{
  "custom": {},
  "params": {
    "percentage": 11.2
  },
  "propConfig": {
    "params.percentage": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 144,
      "width": 232
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Icon"
        },
        "position": {
          "basis": "50px"
        },
        "propConfig": {
          "props.path": {
            "binding": {
              "config": {
                "path": "view.params.percentage"
              },
              "transforms": [
                {
                  "code": "\tif value \u003e 0:\n\t\treturn \u0027material/arrow_drop_up\u0027\n\telif value \u003c 0:\n\t\treturn \u0027material/arrow_drop_down\u0027\n\telse:\n\t\treturn \u0027material/horizontal_rule\u0027",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          },
          "props.style.color": {
            "binding": {
              "config": {
                "path": "view.params.percentage"
              },
              "transforms": [
                {
                  "fallback": "#000000",
                  "inputType": "range",
                  "mappings": [
                    {
                      "input": {
                        "exclusiveMax": true,
                        "exclusiveMin": true,
                        "min": 0
                      },
                      "output": "#00FF22"
                    },
                    {
                      "input": {
                        "exclusiveMax": true,
                        "exclusiveMin": true,
                        "max": 0
                      },
                      "output": "#F31212"
                    }
                  ],
                  "outputType": "color",
                  "type": "map"
                }
              ],
              "type": "property"
            }
          }
        },
        "type": "ia.display.icon"
      },
      {
        "meta": {
          "name": "Label_0"
        },
        "position": {
          "basis": "70px",
          "shrink": 0
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "view.params.percentage"
              },
              "transforms": [
                {
                  "code": "\treturn str(\u0027%.2f\u0027 % round(value,2)) + \u0027%\u0027 ",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          },
          "props.textStyle.color": {
            "binding": {
              "config": {
                "path": "view.params.percentage"
              },
              "transforms": [
                {
                  "fallback": "#000000",
                  "inputType": "range",
                  "mappings": [
                    {
                      "input": {
                        "exclusiveMax": true,
                        "exclusiveMin": true,
                        "min": 0
                      },
                      "output": "#00FF22"
                    },
                    {
                      "input": {
                        "exclusiveMax": true,
                        "exclusiveMin": true,
                        "max": 0
                      },
                      "output": "#F31212"
                    }
                  ],
                  "outputType": "color",
                  "type": "map"
                }
              ],
              "type": "property"
            }
          }
        },
        "props": {
          "textStyle": {
            "fontSize": 15
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.flex"
  }
}