funnel.json

{
  "alias": "funnel",
  "name": "Funnel",
  "image": null,
  "description": null,
  "descriptor": {
    "type": "latest",
    "sizeX": 9.5,
    "sizeY": 7.5,
    "resources": [
      {
        "url": "https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"
      }
    ],
    "templateHtml": "<div id=\"echart\" style=\"width:600px; height:400px;\"></div>",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
    "controllerScript": "\nvar myChart;\nself.onInit = function() {\n    \n    myChart = echarts.init($('#echart', self.ctx\n        .$container)[0]);\n    \n    option = {\n  title: {\n    text: ''\n  },\n  tooltip: {\n    trigger: 'item',\n    formatter: '{b} : {c}'\n  },\n  toolbox: {\n    feature: {\n      dataView: { readOnly: false },\n      restore: {},\n      saveAsImage: {}\n    }\n  },\n  legend: {\n    data: []\n  },\n  series: [\n    {\n        color: [],\n      name: 'Funnel',\n      type: 'funnel',\n      left: '10%',\n      top: 60,\n      bottom: 60,\n      width: '80%',\n    min: 0,\n      minSize: '0%',\n      maxSize: '100%',\n      sort: 'descending',\n      gap: 2,\n      label: {\n        show: true,\n        position: 'inside'\n      },\n      labelLine: {\n        length: 10,\n        lineStyle: {\n          width: 1,\n          type: 'solid'\n        }\n      },\n      itemStyle: {\n        borderColor: '#fff',\n        borderWidth: 1\n      },\n      emphasis: {\n        label: {\n          fontSize: 20\n        }\n      },\n      data: [\n       \n      ]\n    }\n  ]\n};\n\nfor (var i = 0; i < self.ctx.data.length; i++) {\n    if (self.ctx.data[i].data[0] != undefined)\n    {\n        \n        option.legend.data.push(self.ctx.data[0].dataKey.label);\n        option.series[0].data.push({ value: self.ctx.data[0].data[0][1], name: self.ctx.data[0].dataKey.label })\n         option.series[0].color.push(self.ctx.data[i].dataKey.color);\n        \n    }\n}\n\n\n\nmyChart.setOption(option);\n    myChart.resize();\n    \n}\n\nself.onDataUpdated = function() {\n    let minValue = 0;\n    let maxValue = 0;\n    for (var i = 0; i < self.ctx.data.length; i++) {\n    if (self.ctx.data[i].data[0] != undefined)\n    {\n   \n        option.legend.data[i] = (self.ctx.data[i].dataKey.label);\n        option.series[0].data[i] = ({ value: self.ctx.data[i].data[0][1], name: self.ctx.data[i].dataKey.label })\n        \n        option.series[0].color[i] =self.ctx.data[i].dataKey.color;\n        if (minValue != 0)\n        {\n\n            if (self.ctx.data[i].data[0][1] < minValue)\n                minValue = self.ctx.data[i].data[0][1];\n        }\n        else\n        {\n            minValue = self.ctx.data[i].data[0][1];\n          \n        }\n            \n        if (maxValue != 0)\n        {\n            if (self.ctx.data[i].data[0][1] > maxValue)\n                maxValue = self.ctx.data[i].data[0][1];\n        }\n        else\n            maxValue = self.ctx.data[i].data[0][1];\n    }\n\n}\noption.series[0].min = minValue;\n\n\nlet minSize = 0;\nif (maxValue > 0)\n    minSize = minValue/maxValue * 100\n    \n    option.series[0].minSize = String(minSize) + \"%\";\n    \n    console.log(minValue)\n\n    myChart.setOption(option);\n    myChart.resize();\n}\n\nself.onResize = function() {\n    if (self.ctx.width > self.ctx.height)\n        $('#echart', self.ctx.$container)[0].style.zoom = self.ctx.height/550;\n    else\n    $('#echart', self.ctx.$container)[0].style.zoom = self.ctx.width/600;\n    \n    $('#echart', self.ctx.$container)[0].style.margin = \"auto\";\n    \n    self.ctx.detectChanges();\n     \n}\n\nself.onDestroy = function() {\n}\n",
    "settingsSchema": "{\n    \n}",
    "dataKeySettingsSchema": "{}\n",
    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Current max. Produktion\",\"color\":\"#0f4a7a\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return 14100\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Produktion based on current efficiency\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.7789702810191768,\"funcBody\":\"return 9300\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Produktion current hour - calculation\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.7114844695086053,\"funcBody\":\"return 4900\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Funnel\"}"
  }
}