From 6ee1c9e5229d7c86cf6fa4c46f10da197337ae64 Mon Sep 17 00:00:00 2001
From: dohertj2 <dohertj2@ignition>
Date: Sun, 22 Feb 2026 05:58:18 -0500
Subject: [PATCH] Add time range buttons to flow rate popup

Adds 1H, 6H, 24H, and 7D buttons to the FlowRatePopup view.
Buttons set view custom properties (timeAmount/timeUnits) which
drive the tag-history binding dateRange dynamically.
Active button highlighted blue (#4747FF), inactive grey (#AAAAAA).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../views/FlowRatePopup/view.json             | 189 +++++++++++++++++-
 1 file changed, 185 insertions(+), 4 deletions(-)

diff --git a/projects/watermeter/com.inductiveautomation.perspective/views/FlowRatePopup/view.json b/projects/watermeter/com.inductiveautomation.perspective/views/FlowRatePopup/view.json
index 237cc2c..661b722 100644
--- a/projects/watermeter/com.inductiveautomation.perspective/views/FlowRatePopup/view.json
+++ b/projects/watermeter/com.inductiveautomation.perspective/views/FlowRatePopup/view.json
@@ -1,5 +1,8 @@
 {
-  "custom": {},
+  "custom": {
+    "timeAmount": 1,
+    "timeUnits": "HOUR"
+  },
   "params": {},
   "props": {
     "defaultSize": {
@@ -9,12 +12,190 @@
   },
   "root": {
     "children": [
+      {
+        "children": [
+          {
+            "events": {
+              "dom": {
+                "onClick": {
+                  "config": {
+                    "script": "\tself.view.custom.timeAmount = 1\n\tself.view.custom.timeUnits = \"HOUR\""
+                  },
+                  "scope": "G",
+                  "type": "script"
+                }
+              }
+            },
+            "meta": {
+              "name": "Btn1H"
+            },
+            "position": {
+              "basis": "60px",
+              "shrink": 0
+            },
+            "propConfig": {
+              "props.style.backgroundColor": {
+                "binding": {
+                  "config": {
+                    "expression": "if({view.custom.timeAmount} = 1 && \"{view.custom.timeUnits}\" = \"HOUR\", '#4747FF', '#AAAAAA')"
+                  },
+                  "type": "expr"
+                }
+              }
+            },
+            "props": {
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold",
+                "margin": 2
+              },
+              "text": "1H"
+            },
+            "type": "ia.input.button"
+          },
+          {
+            "events": {
+              "dom": {
+                "onClick": {
+                  "config": {
+                    "script": "\tself.view.custom.timeAmount = 6\n\tself.view.custom.timeUnits = \"HOUR\""
+                  },
+                  "scope": "G",
+                  "type": "script"
+                }
+              }
+            },
+            "meta": {
+              "name": "Btn6H"
+            },
+            "position": {
+              "basis": "60px",
+              "shrink": 0
+            },
+            "propConfig": {
+              "props.style.backgroundColor": {
+                "binding": {
+                  "config": {
+                    "expression": "if({view.custom.timeAmount} = 6 && \"{view.custom.timeUnits}\" = \"HOUR\", '#4747FF', '#AAAAAA')"
+                  },
+                  "type": "expr"
+                }
+              }
+            },
+            "props": {
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold",
+                "margin": 2
+              },
+              "text": "6H"
+            },
+            "type": "ia.input.button"
+          },
+          {
+            "events": {
+              "dom": {
+                "onClick": {
+                  "config": {
+                    "script": "\tself.view.custom.timeAmount = 24\n\tself.view.custom.timeUnits = \"HOUR\""
+                  },
+                  "scope": "G",
+                  "type": "script"
+                }
+              }
+            },
+            "meta": {
+              "name": "Btn24H"
+            },
+            "position": {
+              "basis": "60px",
+              "shrink": 0
+            },
+            "propConfig": {
+              "props.style.backgroundColor": {
+                "binding": {
+                  "config": {
+                    "expression": "if({view.custom.timeAmount} = 24 && \"{view.custom.timeUnits}\" = \"HOUR\", '#4747FF', '#AAAAAA')"
+                  },
+                  "type": "expr"
+                }
+              }
+            },
+            "props": {
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold",
+                "margin": 2
+              },
+              "text": "24H"
+            },
+            "type": "ia.input.button"
+          },
+          {
+            "events": {
+              "dom": {
+                "onClick": {
+                  "config": {
+                    "script": "\tself.view.custom.timeAmount = 7\n\tself.view.custom.timeUnits = \"DAY\""
+                  },
+                  "scope": "G",
+                  "type": "script"
+                }
+              }
+            },
+            "meta": {
+              "name": "Btn7D"
+            },
+            "position": {
+              "basis": "60px",
+              "shrink": 0
+            },
+            "propConfig": {
+              "props.style.backgroundColor": {
+                "binding": {
+                  "config": {
+                    "expression": "if({view.custom.timeAmount} = 7 && \"{view.custom.timeUnits}\" = \"DAY\", '#4747FF', '#AAAAAA')"
+                  },
+                  "type": "expr"
+                }
+              }
+            },
+            "props": {
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold",
+                "margin": 2
+              },
+              "text": "7D"
+            },
+            "type": "ia.input.button"
+          }
+        ],
+        "meta": {
+          "name": "ButtonRow"
+        },
+        "position": {
+          "basis": "40px",
+          "shrink": 0
+        },
+        "props": {
+          "direction": "row",
+          "justify": "center",
+          "alignItems": "center",
+          "style": {
+            "gap": 5,
+            "paddingLeft": 10,
+            "paddingRight": 10
+          }
+        },
+        "type": "ia.container.flex"
+      },
       {
         "meta": {
           "name": "TimeSeriesChart"
         },
         "position": {
-          "basis": "500px",
+          "basis": "460px",
           "grow": 1
         },
         "propConfig": {
@@ -24,8 +205,8 @@
                 "aggregate": "Average",
                 "avoidScanClassValidation": true,
                 "dateRange": {
-                  "mostRecent": "1",
-                  "mostRecentUnits": "HOUR"
+                  "mostRecent": "{view.custom.timeAmount}",
+                  "mostRecentUnits": "{view.custom.timeUnits}"
                 },
                 "enableValueCache": true,
                 "ignoreBadQuality": false,