{
  "meta": {
    "version": "4.000.9103",
    "fileFormatVersion": "0.4",
    "date": "2024-12-02T20:30:02.182Z",
    "name": "real-time-kpi-plotly-js",
    "description": "KPI with trend and Plolty real-time widget example",
    "groupName": "JavaScript",
    "tags": [
      {
        "text": "widget"
      },
      {
        "text": "plotly"
      },
      {
        "text": "real-time"
      }
    ],
    "schedulerLogOff": true
  },
  "data": {
    "datanodes": [
      {
        "name": "clock",
        "type": "Clock_web-service",
        "settings": {
          "name": "clock",
          "sampleTime": 1,
          "autoStart": true
        }
      },
      {
        "name": "kpiVal",
        "type": "JSON_formula_plugin",
        "settings": {
          "name": "kpiVal",
          "autoStart": true,
          "explicitTrig": false,
          "json_var_formula": "return {\n\n    \"value\": dataNodes[\"random\"],\n    \"subLabel\": Math.round(dataNodes[\"random\"]-dataNodes[\"lastRandom\"]*100) +\"%\",\n    \"window\" : -1 // - 1 for unlimited\n};"
        }
      },
      {
        "name": "lastRandom",
        "type": "JSON_delay_plugin",
        "settings": {
          "name": "lastRandom",
          "json_init": "0",
          "json_input": "dataNodes[\"random\"]"
        }
      },
      {
        "name": "layout",
        "type": "JSON_formula_plugin",
        "settings": {
          "name": "layout",
          "autoStart": true,
          "explicitTrig": false,
          "json_var_formula": "var layout = {\n  title: 'Random variable evolution over time',\n  xaxis: {\n    title: 'Time (s)',\n    showgrid: false,\n    zeroline: false\n  },\n  yaxis: {\n    title: 'Value',\n    showline: false\n  }\n};\n\nreturn layout;\n"
        }
      },
      {
        "name": "random",
        "type": "JSON_formula_plugin",
        "settings": {
          "name": "random",
          "autoStart": true,
          "explicitTrig": false,
          "json_var_formula": "let dep = dataNodes[\"clock\"];\n\nreturn Math.random();"
        }
      }
    ]
  },
  "libraries": {
    "pyodideStandard": [],
    "pyodideMicropip": []
  },
  "dashboard": {
    "plotlyRealTimek": {
      "layout": {
        "top": 45,
        "left": 408,
        "height": 480,
        "width": 814,
        "z-index": "2"
      },
      "container": {
        "instanceId": "plotlyRealTimek",
        "modelJsonId": "plotlyRealTime"
      },
      "modelParameters": {
        "enforceTextColor": true,
        "textColor": "var(--widget-color)",
        "enforceBackgroundTransparency": true,
        "hideModeBar": false,
        "layout": {},
        "showWidget": true,
        "enableWidget": true
      },
      "modelHiddenParams": {
        "data": [
          {
            "y": [],
            "mode": "lines"
          }
        ],
        "layout": {
          "paper_bgcolor": "rgba(0,0,0,0)",
          "plot_bgcolor": "rgba(0,0,0,0)",
          "template": {
            "layout": {
              "xaxis": {
                "gridcolor": "var(--widget-plotly-background-color)"
              },
              "yaxis": {
                "gridcolor": "var(--widget-plotly-background-color)"
              },
              "zaxis": {
                "gridcolor": "var(--widget-plotly-background-color)"
              },
              "colorway": [
                "var(--widget-color-2)",
                "var(--widget-color-5)",
                "var(--widget-color-6)",
                "var(--widget-color-7)",
                "var(--widget-color-8)",
                "var(--widget-color-9)",
                "var(--widget-color-10)",
                "var(--widget-color-11)",
                "var(--widget-color-12)",
                "var(--widget-color-13)"
              ],
              "font": {
                "color": "var(--widget-color)"
              }
            }
          }
        },
        "selection": [
          {}
        ]
      }
    },
    "advancedKpiCardA": {
      "layout": {
        "top": 110,
        "left": 89,
        "height": 352,
        "width": 240,
        "z-index": "3"
      },
      "container": {
        "instanceId": "advancedKpiCardA",
        "modelJsonId": "advancedKpiCard"
      },
      "modelParameters": {
        "label": "kpiVal",
        "inheritLabelFromData": true,
        "displayLabel": true,
        "labelFontSize": 0.5,
        "labelColor": "var(--widget-label-color)",
        "labelFontFamily": "var(--widget-font-family)",
        "valuePosition": "bottom",
        "valueFontSize": 3,
        "valueColor": "var(--widget-color)",
        "valueFontFamily": "var(--widget-font-family)",
        "decimalDigits": 3,
        "subLabelFontSize": 0.5,
        "subLabelColor": "var(--widget-subtext-color)",
        "subLabelFontFamily": "var(--widget-font-family)",
        "borderShadow": false,
        "graphColor": "var(--widget-label-color)",
        "showWidget": true,
        "enableWidget": true
      },
      "modelHiddenParams": {
        "value": "--",
        "subLabel": "--"
      }
    }
  },
  "connections": {
    "plotlyRealTimek": {
      "y1": {
        "name": "y1",
        "dataNode": "random",
        "dataFields": [],
        "dataNodeIndex": 4
      },
      "layout": {
        "name": "layout",
        "dataNode": "layout",
        "dataFields": [],
        "dataNodeIndex": 0
      }
    },
    "advancedKpiCardA": {
      "extendedValue": {
        "name": "extendedValue",
        "dataNode": "kpiVal",
        "dataFields": []
      }
    }
  },
  "display": {
    "theme": "default",
    "backgroundColor": "var(--widget-color-0)",
    "inheritThemeBackgroundColor": true,
    "marginX": 10,
    "marginY": 10,
    "width": 1294,
    "height": 590,
    "enforceHeightLimit": false
  },
  "navBarNotification": false
}