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