{
  "custom": {
    "endDate": "value",
    "startDate": "value"
  },
  "params": {
    "Availability": 0.3,
    "OEE": 0.2,
    "Performance": 0.4,
    "Quality": 0.5,
    "title": ""
  },
  "propConfig": {
    "custom.endDate": {
      "persistent": true
    },
    "custom.startDate": {
      "persistent": true
    },
    "params.Availability": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.OEE": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.Performance": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.Quality": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.title": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "title"
        },
        "position": {
          "shrink": 0
        },
        "propConfig": {
          "position.display": {
            "binding": {
              "config": {
                "expression": "coalesce({view.params.title},\u0027\u0027)!\u003d\u0027\u0027"
              },
              "type": "expr"
            }
          },
          "props.params.text": {
            "binding": {
              "config": {
                "path": "view.params.title"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "path": "Page/Embedded/Widget Title"
        },
        "type": "ia.display.view"
      },
      {
        "custom": {
          "colors": {
            "bad": {
              "arc": "#F5888C",
              "arcBackground": "#FBCFD1"
            },
            "good": {
              "arc": "#79A0C9",
              "arcBackground": "#C9D9E9"
            },
            "warn": {
              "arc": "#E8BD93",
              "arcBackground": "#F6E5D4"
            }
          }
        },
        "meta": {
          "name": "OEE Guage"
        },
        "position": {
          "basis": "175px",
          "grow": 1
        },
        "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\n\t",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          },
          "props.arc.width": {
            "binding": {
              "config": {
                "path": "page.props.dimensions.screen.height"
              },
              "transforms": [
                {
                  "code": "\tif value \u003d\u003d 0:\n\t\treturn 30\n\treturn value/75",
                  "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.OEE"
              },
              "transforms": [
                {
                  "code": "\treturn round(value * 100)",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          }
        },
        "props": {
          "animate": true,
          "arc": {},
          "arcBackground": {},
          "label": {
            "maxDecimal": 1,
            "size": 21,
            "units": "%"
          },
          "style": {
            "classes": []
          }
        },
        "type": "ia.chart.simple-gauge"
      },
      {
        "meta": {
          "name": "lbl_OEE"
        },
        "position": {
          "basis": "32px"
        },
        "props": {
          "style": {
            "classes": "Label/labelTitle",
            "fontSize": 17
          },
          "text": "OEE"
        },
        "type": "ia.display.label"
      },
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Avail Guage"
                },
                "position": {
                  "basis": "300px",
                  "grow": 1
                },
                "propConfig": {
                  "props.arc.color": {
                    "binding": {
                      "config": {
                        "path": "this.props.value"
                      },
                      "transforms": [
                        {
                          "code": "\t\n\tif value \u003e 50:\n\t\treturn self.view.getChild(\"root\").custom.colors.good.arc\n\tif value \u003e 40:\n\t\treturn self.view.getChild(\"root\").custom.colors.warn.arc\n\telse:\n\t\treturn self.view.getChild(\"root\").custom.colors.bad.arc",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.arc.width": {
                    "binding": {
                      "config": {
                        "path": "page.props.dimensions.screen.height"
                      },
                      "transforms": [
                        {
                          "code": "\tif value \u003d\u003d 0:\n\t\treturn 20\n\treturn value/100",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.arcBackground.color": {
                    "binding": {
                      "config": {
                        "path": "this.props.value"
                      },
                      "transforms": [
                        {
                          "code": "\tif value \u003e 50:\n\t\treturn self.view.getChild(\"root\").custom.colors.good.arcBackground\n\tif value \u003e 40:\n\t\treturn self.view.getChild(\"root\").custom.colors.warn.arcBackground\n\telse:\n\t\treturn self.view.getChild(\"root\").custom.colors.bad.arcBackground",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.label.size": {
                    "binding": {
                      "config": {
                        "path": "page.props.dimensions.viewport.width"
                      },
                      "transforms": [
                        {
                          "code": "\tif(value \u003e\u003d600 and value\u003c1300):\n\t\treturn 8\n\telif (value \u003e\u003d1300 and value\u003c\u003d1580):\n\t\treturn 12\n\telif(value \u003e 1580):\n\t\treturn 15\n\telif value \u003d\u003d 0:\n\t\treturn 20\n\telse:\n\t\treturn 6",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.value": {
                    "binding": {
                      "config": {
                        "path": "view.params.Availability"
                      },
                      "transforms": [
                        {
                          "code": "\treturn round(value * 100)",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  }
                },
                "props": {
                  "animate": true,
                  "arc": {},
                  "arcBackground": {},
                  "label": {
                    "maxDecimal": 1,
                    "units": "%"
                  },
                  "style": {
                    "classes": []
                  }
                },
                "type": "ia.chart.simple-gauge"
              },
              {
                "meta": {
                  "name": "lbl_availability"
                },
                "position": {
                  "basis": "35px"
                },
                "props": {
                  "style": {
                    "classes": "Label/labelTitle",
                    "fontSize": 15,
                    "marginBottom": 51
                  },
                  "text": "Availability"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "FlexAvail"
            },
            "position": {
              "grow": 1
            },
            "props": {
              "direction": "column",
              "style": {
                "overflow": "hidden"
              }
            },
            "type": "ia.container.flex"
          },
          {
            "children": [
              {
                "meta": {
                  "name": "Perf Guage"
                },
                "position": {
                  "basis": "300px",
                  "grow": 1
                },
                "propConfig": {
                  "props.arc.color": {
                    "binding": {
                      "config": {
                        "path": "this.props.value"
                      },
                      "transforms": [
                        {
                          "code": "\t\n\tif value \u003e 50:\n\t\treturn self.view.getChild(\"root\").custom.colors.good.arc\n\tif value \u003e 40:\n\t\treturn self.view.getChild(\"root\").custom.colors.warn.arc\n\telse:\n\t\treturn self.view.getChild(\"root\").custom.colors.bad.arc",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.arc.width": {
                    "binding": {
                      "config": {
                        "path": "page.props.dimensions.screen.height"
                      },
                      "transforms": [
                        {
                          "code": "\tif value \u003d\u003d 0:\n\t\treturn 20\n\treturn value/100",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.arcBackground.color": {
                    "binding": {
                      "config": {
                        "path": "this.props.value"
                      },
                      "transforms": [
                        {
                          "code": "\tif value \u003e 50:\n\t\treturn self.view.getChild(\"root\").custom.colors.good.arcBackground\n\tif value \u003e 40:\n\t\treturn self.view.getChild(\"root\").custom.colors.warn.arcBackground\n\telse:\n\t\treturn self.view.getChild(\"root\").custom.colors.bad.arcBackground",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.label.size": {
                    "binding": {
                      "config": {
                        "path": "page.props.dimensions.viewport.width"
                      },
                      "transforms": [
                        {
                          "code": "\tif(value \u003e\u003d600 and value\u003c1300):\n\t\treturn 8\n\telif (value \u003e\u003d1300 and value\u003c\u003d1580):\n\t\treturn 12\n\telif(value \u003e 1580):\n\t\treturn 15\n\telif value \u003d\u003d 0:\n\t\treturn 20\n\telse:\n\t\treturn 6",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.value": {
                    "binding": {
                      "config": {
                        "path": "view.params.Performance"
                      },
                      "transforms": [
                        {
                          "code": "\treturn round(value * 100)",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  }
                },
                "props": {
                  "animate": true,
                  "arc": {},
                  "arcBackground": {},
                  "label": {
                    "maxDecimal": 1,
                    "units": "%"
                  },
                  "style": {
                    "classes": []
                  }
                },
                "type": "ia.chart.simple-gauge"
              },
              {
                "meta": {
                  "name": "lbl_performance"
                },
                "position": {
                  "basis": "35px"
                },
                "props": {
                  "style": {
                    "classes": "Label/labelTitle",
                    "fontSize": 15,
                    "marginBottom": 51
                  },
                  "text": "Performance"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "FlexPerf"
            },
            "position": {
              "grow": 1
            },
            "props": {
              "direction": "column",
              "style": {
                "overflow": "hidden"
              }
            },
            "type": "ia.container.flex"
          },
          {
            "children": [
              {
                "meta": {
                  "name": "Qual Guage"
                },
                "position": {
                  "basis": "300px",
                  "grow": 1
                },
                "propConfig": {
                  "props.arc.color": {
                    "binding": {
                      "config": {
                        "path": "this.props.value"
                      },
                      "transforms": [
                        {
                          "code": "\t\n\tif value \u003e 50:\n\t\treturn self.view.getChild(\"root\").custom.colors.good.arc\n\tif value \u003e 40:\n\t\treturn self.view.getChild(\"root\").custom.colors.warn.arc\n\telse:\n\t\treturn self.view.getChild(\"root\").custom.colors.bad.arc",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.arc.width": {
                    "binding": {
                      "config": {
                        "path": "page.props.dimensions.screen.height"
                      },
                      "transforms": [
                        {
                          "code": "\tif value \u003d\u003d 0:\n\t\treturn 20\n\treturn value/100",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.arcBackground.color": {
                    "binding": {
                      "config": {
                        "path": "this.props.value"
                      },
                      "transforms": [
                        {
                          "code": "\tif value \u003e 50:\n\t\treturn self.view.getChild(\"root\").custom.colors.good.arcBackground\n\tif value \u003e 40:\n\t\treturn self.view.getChild(\"root\").custom.colors.warn.arcBackground\n\telse:\n\t\treturn self.view.getChild(\"root\").custom.colors.bad.arcBackground",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.label.size": {
                    "binding": {
                      "config": {
                        "path": "page.props.dimensions.viewport.width"
                      },
                      "transforms": [
                        {
                          "code": "\tif(value \u003e\u003d600 and value\u003c1300):\n\t\treturn 8\n\telif (value \u003e\u003d1300 and value\u003c\u003d1580):\n\t\treturn 12\n\telif(value \u003e 1580):\n\t\treturn 15\n\telif value \u003d\u003d 0:\n\t\treturn 20\n\telse:\n\t\treturn 6",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  },
                  "props.value": {
                    "binding": {
                      "config": {
                        "path": "view.params.Quality"
                      },
                      "transforms": [
                        {
                          "code": "\treturn round(value * 100)",
                          "type": "script"
                        }
                      ],
                      "type": "property"
                    }
                  }
                },
                "props": {
                  "animate": true,
                  "arc": {},
                  "arcBackground": {},
                  "label": {
                    "maxDecimal": 1,
                    "units": "%"
                  },
                  "style": {
                    "classes": []
                  }
                },
                "type": "ia.chart.simple-gauge"
              },
              {
                "meta": {
                  "name": "lbl_quality"
                },
                "position": {
                  "basis": "35px"
                },
                "props": {
                  "style": {
                    "classes": "Label/labelTitle",
                    "fontSize": 15,
                    "marginBottom": 51
                  },
                  "text": "Quality"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "FlexQual"
            },
            "position": {
              "grow": 1
            },
            "props": {
              "direction": "column",
              "style": {
                "overflow": "hidden"
              }
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "FlexGuageRow"
        },
        "position": {
          "basis": "200px",
          "grow": 1
        },
        "props": {
          "style": {
            "overflow": "hidden"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "custom": {
      "colors": {
        "bad": {
          "arc": "#F5888C",
          "arcBackground": "#FBCFD1"
        },
        "good": {
          "arc": "#79A0C9",
          "arcBackground": "#C9D9E9"
        },
        "warn": {
          "arc": "#E8BD93",
          "arcBackground": "#F6E5D4"
        }
      }
    },
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "overflow": "hidden"
      }
    },
    "type": "ia.container.flex"
  }
}