gauge_4.json

{
  "alias": "gauge_4",
  "name": "Gauge 4",
  "descriptor": {
    "type": "latest",
    "sizeX": 7,
    "sizeY": 7.5,
    "resources": [
      {
        "url": "https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"
      }
    ],
    "templateHtml": "<div id=\"echart\" style=\"width:500px; height:500px;\"></div>",
    "templateCss": "\n\n#echart\n{\n\n  margin-right: -55px;\n}",
    "controllerScript": "var gaugeData = [];\nself.onInit = function() {\n    \n    \n\n\nfor (var i = 0; i<self.ctx.data.length; i++)\n{\n    \n    let gaugeDataElement = {\n    \n\n    name: self.ctx.data[i].dataKey.label,\n    title: {\n      offsetCenter: [0+'%', -30+i*30+'%']\n    },\n    detail: {\n      valueAnimation: true,\n      offsetCenter: [0+'%', -20+i*30+'%']\n    }\n  }\n        \n    \n    gaugeData.push(gaugeDataElement);\n}\n\n    \n    draw();\n    self.onResize();\n}\nvar gaugeData = [];\nfunction draw()\n{\n    \nvar myChart = echarts.init($('#echart', self.ctx.$container)[0]);\n\n\nvar option;\n\n\n\n\n\n    /*var gaugeData = [\n  {\n    value: 20,\n    name: 'Perfect',\n    title: {\n      offsetCenter: ['0%', '-30%']\n    },\n    detail: {\n      valueAnimation: true,\n      offsetCenter: ['0%', '-20%']\n    }\n  },\n  {\n    value: 40,\n    name: 'Good',\n    title: {\n      offsetCenter: ['0%', '0%']\n    },\n    detail: {\n      valueAnimation: true,\n      offsetCenter: ['0%', '10%']\n    }\n  },\n  {\n    value: 60,\n    name: 'Commonly',\n    title: {\n      offsetCenter: ['0%', '30%']\n    },\n    detail: {\n      valueAnimation: true,\n      offsetCenter: ['0%', '40%']\n    }\n  }\n];*/\noption = {\n  series: [\n    {\n      type: 'gauge',\n      startAngle: 90,\n      endAngle: -270,\n      min: self.ctx.settings.minValue || 0,\n      max: self.ctx.settings.maxValue || 100,\n      pointer: {\n        show: false\n      },\n      progress: {\n        show: true,\n        overlap: false,\n        roundCap: true,\n        clip: false,\n        itemStyle: {\n          borderWidth: 1,\n          borderColor: '#464646'\n        }\n      },\n      axisLine: {\n        lineStyle: {\n          width: 40\n        }\n      },\n      splitLine: {\n        show: false,\n        distance: 0,\n        length: 10\n      },\n      axisTick: {\n        show: false\n      },\n      axisLabel: {\n        show: false,\n        distance: 50\n      },\n      data: gaugeData,\n      title: {\n        fontSize: 14\n      },\n      detail: {\n        width: 50,\n        height: 14,\n        fontSize: 14,\n        color: 'auto',\n        borderColor: 'auto',\n        borderRadius: 20,\n        borderWidth: 1,\n        formatter: '{value}' + ((self.ctx.settings.unitValue === undefined) ? '': self.ctx.settings.unitValue)\n      }\n    },\n  ]\n};\n/*setInterval(function () {\n  gaugeData[0].value = +(Math.random() * 100).toFixed(2);\n  gaugeData[1].value = +(Math.random() * 100).toFixed(2);\n  gaugeData[2].value = +(Math.random() * 100).toFixed(2);\n  myChart.setOption({\n    series: [\n      {\n        data: gaugeData,\n        pointer: {\n          show: false\n        }\n      }\n    ]\n  });\n}, 2000);*/\noption && myChart.setOption(option);\n}\n\nself.onDataUpdated = function() {\n   console.log(gaugeData);\n    for (var i = 0; i<self.ctx.data.length; i++)\n{\n    if (self.ctx.data[i].data[0] != undefined)\n    gaugeData[i].value = (self.ctx.data[i].data[0][1])\n   \n}\n\ndraw();\n\n    \n}\n\nself.onResize = function() {\n    if (self.ctx.width > self.ctx.height)\n        $('#echart', self.ctx.$container)[0].style.zoom = self.ctx.height/500;\n    else\n    $('#echart', self.ctx.$container)[0].style.zoom = self.ctx.width/500;\n    \n    self.ctx.detectChanges();\n     \n}\n\nself.onDestroy = function() {\n}\n",
    "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"maxValue\": {\n                \"title\": \"Maximum Value\",\n                \"type\": \"number\",\n                \"default\": 100\n            },\n            \"minValue\": {\n                \"title\": \"Minimum Value\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"unitValue\": {\n                \"title\": \"Unit\",\n                \"type\": \"string\",\n                \"default\": \"°C\"\n            }\n        },\n        \"required\": [\"maxValue\",\"unitValue\"]\n    },\n    \"form\": [\n        \"maxValue\",\n        \"minValue\",\n        \"unitValue\"\n       \n            ]\n}",
    "dataKeySettingsSchema": "{}\n",
    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random 2\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.3800055415482756,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random 3\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.28112084108124735,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue1\":100,\"unitValue1\":\"°C\",\"maxValue2\":100,\"unitValue2\":\"°C\",\"maxValue3\":100,\"unitValue3\":\"°C\"},\"title\":\"Gauge 4\"}"
  }
}