{
  "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"
  }
}