6ee1c9e522
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>
320 lines
8.3 KiB
JSON
320 lines
8.3 KiB
JSON
{
|
|
"custom": {
|
|
"timeAmount": 1,
|
|
"timeUnits": "HOUR"
|
|
},
|
|
"params": {},
|
|
"props": {
|
|
"defaultSize": {
|
|
"width": 800,
|
|
"height": 500
|
|
}
|
|
},
|
|
"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": "460px",
|
|
"grow": 1
|
|
},
|
|
"propConfig": {
|
|
"props.series[0].data": {
|
|
"binding": {
|
|
"config": {
|
|
"aggregate": "Average",
|
|
"avoidScanClassValidation": true,
|
|
"dateRange": {
|
|
"mostRecent": "{view.custom.timeAmount}",
|
|
"mostRecentUnits": "{view.custom.timeUnits}"
|
|
},
|
|
"enableValueCache": true,
|
|
"ignoreBadQuality": false,
|
|
"polling": {
|
|
"enabled": true,
|
|
"rate": "30"
|
|
},
|
|
"preventInterpolation": false,
|
|
"returnFormat": "Wide",
|
|
"returnSize": {
|
|
"delay": "1",
|
|
"delayUnits": "MIN",
|
|
"type": "INTERVAL"
|
|
},
|
|
"tags": [
|
|
{
|
|
"alias": "Flow Rate",
|
|
"path": "[CoreDB/ignition-ignition:default]watermeter/prefilterflowrate"
|
|
}
|
|
],
|
|
"valueFormat": "DATASET"
|
|
},
|
|
"type": "tag-history"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"defaultStyles": {
|
|
"colors": [
|
|
"#0000FF"
|
|
]
|
|
},
|
|
"legend": {
|
|
"position": "right",
|
|
"style": {
|
|
"color": "#000000"
|
|
},
|
|
"visible": true
|
|
},
|
|
"series": [
|
|
{
|
|
"name": "Flow Rate"
|
|
}
|
|
],
|
|
"style": {
|
|
"color": "#000000"
|
|
},
|
|
"timeAxis": {
|
|
"color": "#000000",
|
|
"grid": {
|
|
"color": "#000000"
|
|
},
|
|
"style": {
|
|
"color": "#000000"
|
|
},
|
|
"tick": {
|
|
"color": "#000000",
|
|
"label": {
|
|
"font": {
|
|
"color": "#000000"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"timeRange": {
|
|
"dateFormat": "MM-DD-YYYY",
|
|
"timeFormat": "h:mm:ss A"
|
|
},
|
|
"title": {
|
|
"font": {
|
|
"color": "#000000"
|
|
},
|
|
"height": 20,
|
|
"style": {
|
|
"color": "#000000"
|
|
},
|
|
"text": "Prefilter Flow Rate (GPM)",
|
|
"visible": true
|
|
},
|
|
"xTrace": {
|
|
"infoBox": {
|
|
"dateFormat": "MM-DD-YYYY",
|
|
"fill": {
|
|
"color": "#FFFFFF"
|
|
},
|
|
"font": {
|
|
"color": "#000000"
|
|
},
|
|
"stroke": {
|
|
"color": "#000000"
|
|
},
|
|
"timeFormat": "h:mm:ss A"
|
|
},
|
|
"line": {
|
|
"color": "#000000"
|
|
}
|
|
}
|
|
},
|
|
"type": "ia.chart.timeseries"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "root"
|
|
},
|
|
"props": {
|
|
"direction": "column"
|
|
},
|
|
"type": "ia.container.flex"
|
|
}
|
|
}
|