-
Notifications
You must be signed in to change notification settings - Fork 72
/
Copy pathgauge_2.json
29 lines (29 loc) · 8.13 KB
/
gauge_2.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
"alias": "gauge1",
"name": "Gauge 2",
"descriptor": {
"type": "latest",
"sizeX": 8,
"sizeY": 8,
"resources": [
{
"url": "https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"
},
{
"url": "https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
},
{
"url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/chartist-plugin-fill-donut.min.js"
},
{
"url": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
}
],
"templateHtml": "<div class=\"ct-gauge\">\n <span id=\"value\">160 mph</span>\n</div>\n",
"templateCss": "#container {\n overflow: auto;\n}\n .ct-gauge{\n width: 100%;\n height: 100%;\n }\n \n #value{\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n \n /*make a color different to fill-donut series*/\n .ct-chart-donut .ct-series-a .ct-slice-donut {\n stroke: var(--stroke);\n }\n \n /*make b hidden*/\n .ct-chart-donut .ct-series-b .ct-slice-donut {\n stroke: #efefef;\n opacity: 0.0;\n }\n /*make all fill-donut series visible and set color*/\n .ct-chart-donut .ct-fill-donut .ct-slice-donut{\n stroke: #efefef;\n opacity: 1;\n }\n \n ",
"controllerScript": "var chart;\n\nself.onInit = function() {\nvar settings = self.ctx.settings;\n\n\nself.ctx.$container[0].style.setProperty('--stroke', settings.color);\n\n\n/* // Your CSS as text\nvar styles = '#' + self.ctx.$container[0].id.toString() + ` \n.ct-chart-donut .ct-series-a .ct-slice-donut {\n stroke: #00ff04;\n }\n`\n\nconsole.log (self.ctx.$container[0]);\n\nif (settings.color != null)\n{\n styles = styles.replace('#00ff04', settings.color);\n \nvar styleSheet = document.createElement(\"style\")fa-solid \nstyleSheet.type = \"text/css\"\nstyleSheet.innerText = styles\ndocument.head.appendChild(styleSheet)\n}\n*/\n \n \n \nvar icon = \"fas fa-chart-line\";\nif (settings.icon != null)\n icon = settings.icon;\n \nconsole.log(icon)\n \n\nchart = new Chartist.Pie($('.ct-gauge', self.ctx.$container)[0], \n {\n series: [160, 60 ],\n labels: ['', '']\n }, {\n donut: true,\n donutWidth: settings.donutWidth,\n startAngle: 210,\n total: 260,\n showLabel: false,\n plugins: [\n Chartist.plugins.fillDonut({\n items: [{\n content: '<i class=\"'+ icon + '\"></i>',\n position: 'center',\n offsetY : 80,\n offsetX: 0\n }, {\n content: ''\n }]\n })\n ],\n });\n \n \n \n//chart.svg._node.setAttribute('style','stroke: blue' );\nchart.on('draw', function(data) {\n\n \n \n \n \n if(data.type === 'slice' && data.index == 0) {\n // Get the total path length in order to use for dash array animation\n var pathLength = data.element._node.getTotalLength();\n\n // Set a dasharray that matches the path length as prerequisite to animate dashoffset\n data.element.attr({\n 'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'\n });\n\n // Create animation definition while also assigning an ID to the animation for later sync usage\n var animationDefinition = {\n 'stroke-dashoffset': {\n id: 'anim' + data.index,\n dur: 1200,\n from: -pathLength + 'px',\n to: '0px',\n easing: Chartist.Svg.Easing.easeOutQuint,\n fill: 'freeze'\n }\n };\n\n // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us\n data.element.attr({\n 'stroke-dashoffset': -pathLength + 'px'\n });\n\n // We can't use guided mode as the animations need to rely on setting begin manually\n // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate\n data.element.animate(animationDefinition, true);\n }\n \n \n \n \n \n});\n \n \n self.onResize();\n}\n\nself.onDataUpdated = function() {\n var settings = self.ctx.settings;\n var series = Array();\n \n var datasourceData = self.ctx.data[0];\n var dataSet = datasourceData.data;\n if (dataSet.length > 0)\n {\n var tsValuePair = dataSet[0];\n if (tsValuePair.length > 0)\n {\n var value = tsValuePair[1];\n if (value > settings.maxValue)\n value = settings.maxValue;\n if (value < settings.minValue)\n value = settings.minValue;\n \n var span = (settings.maxValue - settings.minValue );\n var multiplier = 220 / span;\n \n seriesElement = [(value - settings.minValue) * multiplier , 220-((value -settings.minValue) * multiplier)];\n //chart.container.innerText = value;\n $('#value', self.ctx.$container)[0].innerHTML = Number.parseFloat(value).toFixed(2) + ' ' + settings.unit;\n chart.series = seriesElement;\n chart.update(chart);\n }\n}\n\n \n \n \n}\n\nself.onResize = function() {\n \n if (self.ctx.width > (self.ctx.height - 50))\n {\n $('.ct-gauge', self.ctx.$container)[0].style.zoom = self.ctx.height / 200;\n }\n else\n {\n $('.ct-gauge', self.ctx.$container)[0].style.zoom = self.ctx.width / 200;\n }\n \n}\n\nself.onDestroy = function() {\n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"minValue\": {\n \"title\": \"Min. Value\",\n \"type\": \"number\",\n \"default\": 0\n },\n \"maxValue\": {\n \"title\": \"Max. Value\",\n \"type\": \"number\",\n \"default\": 220\n },\n \n \"donutWidth\": {\n \"title\": \"Donut Width\",\n \"type\": \"number\",\n \"default\": 20\n },\n \n \"unit\": {\n \"title\": \"Unit\",\n \"type\": \"string\",\n \"default\": \"°C\"\n },\n \"color\": {\n \"title\": \"Color\",\n \"type\": \"string\",\n \"default\": \"red\"\n },\n \"icon\": {\n \"title\": \"Font awesome icon\",\n \"type\": \"string\",\n \"default\": \"fa fa-tachometer\"\n }\n \n },\n \n \n \"required\": [ \n \"minValue\",\n \"maxValue\",\n \"donutWidth\",\n \"unit\"\n ]\n },\n \"form\": [\n \"minValue\",\n \"maxValue\",\n \"donutWidth\",\n \"unit\",\n {\n \"key\": \"color\",\n \"type\": \"color\"\n },\n \"icon\"\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 = Math.random() * 220;\\n\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\",\"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\":{\"donutWidth\":30,\"unit\":\" °C\",\"maxValue\":220,\"minValue\":0,\"color\":\"#00ff00\",\"icon\":\"fas fa-thermometer-full\"},\"title\":\"Gauge 2\"}"
}
}