f78c290074
Replace static tag-history binding with expression binding using runScript to call flowrate.queryHistory(), which dynamically queries tag history based on the selected time range. Buttons highlight blue when active, grey when inactive. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
255 lines
6.1 KiB
JSON
255 lines
6.1 KiB
JSON
{
|
|
"custom": {
|
|
"timeHours": 1
|
|
},
|
|
"params": {},
|
|
"props": {
|
|
"defaultSize": {
|
|
"width": 800,
|
|
"height": 500
|
|
}
|
|
},
|
|
"root": {
|
|
"children": [
|
|
{
|
|
"children": [
|
|
{
|
|
"events": {
|
|
"dom": {
|
|
"onClick": {
|
|
"config": {
|
|
"script": "\tself.view.custom.timeHours = 1"
|
|
},
|
|
"scope": "G",
|
|
"type": "script"
|
|
}
|
|
}
|
|
},
|
|
"meta": {
|
|
"name": "Btn1H"
|
|
},
|
|
"position": {
|
|
"basis": "60px",
|
|
"shrink": 0
|
|
},
|
|
"propConfig": {
|
|
"props.style.backgroundColor": {
|
|
"binding": {
|
|
"config": {
|
|
"expression": "if({view.custom.timeHours} = 1, '#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.timeHours = 6"
|
|
},
|
|
"scope": "G",
|
|
"type": "script"
|
|
}
|
|
}
|
|
},
|
|
"meta": {
|
|
"name": "Btn6H"
|
|
},
|
|
"position": {
|
|
"basis": "60px",
|
|
"shrink": 0
|
|
},
|
|
"propConfig": {
|
|
"props.style.backgroundColor": {
|
|
"binding": {
|
|
"config": {
|
|
"expression": "if({view.custom.timeHours} = 6, '#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.timeHours = 24"
|
|
},
|
|
"scope": "G",
|
|
"type": "script"
|
|
}
|
|
}
|
|
},
|
|
"meta": {
|
|
"name": "Btn24H"
|
|
},
|
|
"position": {
|
|
"basis": "60px",
|
|
"shrink": 0
|
|
},
|
|
"propConfig": {
|
|
"props.style.backgroundColor": {
|
|
"binding": {
|
|
"config": {
|
|
"expression": "if({view.custom.timeHours} = 24, '#4747FF', '#AAAAAA')"
|
|
},
|
|
"type": "expr"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"color": "#FFFFFF",
|
|
"fontWeight": "bold",
|
|
"margin": 2
|
|
},
|
|
"text": "24H"
|
|
},
|
|
"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": {
|
|
"expression": "runScript('flowrate.queryHistory', 30000, {view.custom.timeHours})"
|
|
},
|
|
"type": "expr"
|
|
}
|
|
}
|
|
},
|
|
"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"
|
|
}
|
|
}
|