{
  "custom": {},
  "params": {
    "label": "OEE",
    "percent": 50
  },
  "propConfig": {
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.percent": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 235,
      "width": 310
    }
  },
  "root": {
    "children": [
      {
        "custom": {
          "colors": {
            "bad": {
              "arc": "#F5888C",
              "arcBackground": "#FBCFD1"
            },
            "good": {
              "arc": "#79A0C9",
              "arcBackground": "#C9D9E9"
            },
            "warn": {
              "arc": "#E8BD93",
              "arcBackground": "#F6E5D4"
            }
          }
        },
        "meta": {
          "name": "SimpleGauge"
        },
        "position": {
          "basis": "203px"
        },
        "propConfig": {
          "props.arc.color": {
            "binding": {
              "config": {
                "path": "this.props.value"
              },
              "transforms": [
                {
                  "code": "\tif value \u003e 50:\n\t\treturn self.custom.colors.good.arc\n\tif value \u003e 40:\n\t\treturn self.custom.colors.warn.arc\n\telse:\n\t\treturn self.custom.colors.bad.arc",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          },
          "props.arcBackground.color": {
            "binding": {
              "config": {
                "path": "this.props.value"
              },
              "transforms": [
                {
                  "code": "\tif value \u003e 50:\n\t\treturn self.custom.colors.good.arcBackground\n\tif value \u003e 40:\n\t\treturn self.custom.colors.warn.arcBackground\n\telse:\n\t\treturn self.custom.colors.bad.arcBackground",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          },
          "props.value": {
            "binding": {
              "config": {
                "path": "view.params.percent"
              },
              "overlayOptOut": true,
              "type": "property"
            }
          }
        },
        "props": {
          "animate": true,
          "arc": {
            "width": 15
          },
          "arcBackground": {},
          "label": {
            "maxDecimal": 1,
            "size": 16,
            "units": "%"
          },
          "style": {
            "classes": []
          }
        },
        "type": "ia.chart.simple-gauge"
      },
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "basis": "32px",
          "grow": 1
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "view.params.label"
              },
              "transforms": [
                {
                  "expression": "translate({value})",
                  "type": "expression"
                }
              ],
              "type": "property"
            }
          }
        },
        "props": {
          "style": {
            "classes": "Title/Text",
            "fontSize": 15,
            "marginBottom": 30
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "alignContent": "center",
      "alignItems": "center",
      "direction": "column",
      "justify": "center",
      "style": {
        "overflow": "hidden"
      }
    },
    "type": "ia.container.flex"
  }
}