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>
This commit is contained in:
dohertj2
2026-02-22 05:58:18 -05:00
parent 85d1a5c4f0
commit 6ee1c9e522

View File

@@ -1,5 +1,8 @@
{ {
"custom": {}, "custom": {
"timeAmount": 1,
"timeUnits": "HOUR"
},
"params": {}, "params": {},
"props": { "props": {
"defaultSize": { "defaultSize": {
@@ -9,12 +12,190 @@
}, },
"root": { "root": {
"children": [ "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": { "meta": {
"name": "TimeSeriesChart" "name": "TimeSeriesChart"
}, },
"position": { "position": {
"basis": "500px", "basis": "460px",
"grow": 1 "grow": 1
}, },
"propConfig": { "propConfig": {
@@ -24,8 +205,8 @@
"aggregate": "Average", "aggregate": "Average",
"avoidScanClassValidation": true, "avoidScanClassValidation": true,
"dateRange": { "dateRange": {
"mostRecent": "1", "mostRecent": "{view.custom.timeAmount}",
"mostRecentUnits": "HOUR" "mostRecentUnits": "{view.custom.timeUnits}"
}, },
"enableValueCache": true, "enableValueCache": true,
"ignoreBadQuality": false, "ignoreBadQuality": false,