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:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user