-
Notifications
You must be signed in to change notification settings - Fork 72
/
3d_chart.json
29 lines (29 loc) · 12.2 KB
/
3d_chart.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": "3d_chart",
"name": "3d_chart",
"image": null,
"description": null,
"descriptor": {
"type": "timeseries",
"sizeX": 14.5,
"sizeY": 12.5,
"resources": [
{
"url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"
},
{
"url": "https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"
}
],
"templateHtml": "<div id=\"echart\" style=\"width:600px; height:400px;\"></div>\n\n",
"templateCss": "\n\n",
"controllerScript": "var myChart;\nvar option = {};\nself.onInit = function() {\n myChart = echarts.init($('#echart', self.ctx\n .$container)[0]);\n \n var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 167, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];\n \n \n var settings = self.ctx.settings;\n\n\n\n// prettier-ignore\nvar hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',\n '7a', '8a', '9a', '10a', '11a',\n '12p', '1p', '2p', '3p', '4p', '5p',\n '6p', '7p', '8p', '9p', '10p', '11p'];\nif (settings.xAxisType == '24hrs format')\n{\n hours = ['0:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',\n '07:00', '08:00', '09:00', '10:00', '11:00',\n '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',\n '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];\n}\n// prettier-ignore\nvar days = [settings.yAxisSunday, settings.yAxisMonday, settings.yAxisTuesday,\n settings.yAxisWednesday, settings.yAxisThursday, settings.yAxisFriday, settings.yAxisSaturday];\n \nif (settings.yAxisType == 'Monday to Friday')\n{\n days = [settings.yAxisMonday, settings.yAxisTuesday,\n settings.yAxisWednesday, settings.yAxisThursday, settings.yAxisFriday];\n}\n \n// prettier-ignore\n\n\n\noption = {\n tooltip: {\n formatter: (params) => {\n var days = [settings.yAxisSunday, settings.yAxisMonday, settings.yAxisTuesday,\n settings.yAxisWednesday, settings.yAxisThursday, settings.yAxisFriday, settings.yAxisSaturday];\nif (settings.yAxisType == 'Monday to Friday')\n{\n days = [settings.yAxisMonday, settings.yAxisTuesday,\n settings.yAxisWednesday, settings.yAxisThursday, settings.yAxisFriday];\n}\nvar hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',\n '7a', '8a', '9a', '10a', '11a',\n '12p', '1p', '2p', '3p', '4p', '5p',\n '6p', '7p', '8p', '9p', '10p', '11p'];\n \nif (settings.xAxisType == '24hrs format')\n{\n hours = ['0:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',\n '07:00', '08:00', '09:00', '10:00', '11:00',\n '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',\n '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];\n}\n\n return days[params.value[1]] + \" \" + hours[params.value[0]] + \": \" + params.value[2]\n \n },\n },\n visualMap: {\n max: settings.maxZValue || 20,\n inRange: {\n color: [\n '#313695',\n '#4575b4',\n '#74add1',\n '#abd9e9',\n '#e0f3f8',\n '#ffffbf',\n '#fee090',\n '#fdae61',\n '#f46d43',\n '#d73027',\n '#a50026'\n ]\n }\n },\n \n xAxis3D: {\n type: 'category',\n data: hours,\n name: \"\"\n },\n yAxis3D: {\n type: 'category',\n data: days,\n name: \"\"\n },\n zAxis3D: {\n type: 'value',\n name: settings.zAxisUnit || \"Z\"\n },\n grid3D: {\n viewControl:\n {\n distance:250\n },\n boxWidth: 200,\n boxDepth: 80,\n light: {\n main: {\n intensity: 1.2\n },\n ambient: {\n intensity: 0.3\n }\n }\n \n },\n series: [\n {\n type: 'bar3D',\n data: data.map(function (item) {\n return {\n value: [item[1], item[0], item[2]]\n };\n }),\n shading: 'color',\n label: {\n show: false,\n fontSize: 16,\n borderWidth: 1\n },\n itemStyle: {\n opacity: 0.4\n },\n emphasis: {\n label: {\n fontSize: 20,\n color: '#900'\n },\n itemStyle: {\n color: '#900'\n }\n }\n }\n ]\n};\n\n\n \n draw(data);\n\n}\n\nfunction draw(data)\n{\n option.series[0].data = data.map(function (item) {\n return {\n value: [item[1], item[0], item[2]]\n };\n })\n option && myChart.setOption(option);\n}\n\nself.onDataUpdated = function() {\n settings = self.ctx.settings;\n var data = [];\n var datasourceData = self.ctx.data[0];\n var dataSet = datasourceData.data;\n let currentHourCalculate = 0;\n let currentHourValue = 0;\n for (var d = 0; d < dataSet.length; d++) {\n \n var tsValuePair = dataSet[d];\n var ts = tsValuePair[0];\n var value = tsValuePair[1];\n \n var dt=new Date(ts);\n \n var day = dt.getDay();\n \n var hour = dt.getHours();\n console.log (hour);\n if (hour != currentHourCalculate)\n {\n if (settings.yAxisType == 'Monday to Friday')\n {\n \n day = day - 1;\n }\n data.push([day, currentHourCalculate, currentHourValue]);\n \n currentHourValue = 0;\n }\n currentHourValue = currentHourValue + value;\n \n currentHourCalculate = hour;\n }\n console.log (data);\n draw (data);\n \n \n}\n\nself.onLatestDataUpdated = function() {\n}\n\nself.onResize = function() {\n myChart.resize({\n width: self.ctx.width,\n height: self.ctx.height - 20\n});\n\n\n}\n\n\n\n\n\nself.onEditModeChanged = function() {\n\n}\n\nself.onMobileModeChanged = function() {\n\n}\n\nself.getSettingsSchema = function() {\n\n}\n\nself.getDataKeySettingsSchema = function() {\n\n}\n\nself.onDestroy = function() {\n\n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"maxZValue\": {\n \"title\": \"Max. Z Value\",\n \"type\": \"number\",\n \"default\": 20\n },\n \"zAxisUnit\": {\n \"title\": \"Unit Z Axis\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"yAxisType\": {\n \"title\": \"Y Axis Type\",\n \"type\": \"string\",\n \"enum\": [\n \"Monday to Sunday\",\n \"Monday to Friday\"\n ],\n \"default\": \"Monday to Friday\"\n },\n \"xAxisType\": {\n \"title\": \"X Axis Type\",\n \"type\": \"string\",\n \"enum\": [\n \"12hrs format\",\n \"24hrs format\"\n ],\n \"default\": \"24hrs format\"\n },\n \n \"yAxisMonday\":\n {\n \"title\": \"Y Axis Monday Text\",\n \"type\": \"string\",\n \"default\": \"Monday\"\n },\n \"yAxisTuesday\": {\n \"title\": \"Y Axis Tuesday Text\",\n \"type\": \"string\",\n \"default\": \"Tuesday\"\n },\n \"yAxisWednesday\": {\n \"title\": \"Y Axis Wednesday Text\",\n \"type\": \"string\",\n \"default\": \"Wednesday\"\n },\n \"yAxisThursday\": {\n \"title\": \"Y Axis Thursday Text\",\n \"type\": \"string\",\n \"default\": \"Thursday\"\n },\n \"yAxisFriday\": {\n \"title\": \"Y Axis Friday Text\",\n \"type\": \"string\",\n \"default\": \"Friday\"\n },\n \"yAxisSaturday\": {\n \"title\": \"Y Axis Saturday Text\",\n \"type\": \"string\",\n \"default\": \"Saturday\"\n },\n \"yAxisSunday\": {\n \"title\": \"Y Axis Sunday Text\",\n \"type\": \"string\",\n \"default\": \"Sunday\"\n },\n \"required\": [\"maxZValue\"]\n }\n },\n \"form\": [\n \"maxZValue\",\n \"zAxisUnit\",\n \"yAxisType\",\n \"xAxisType\",\n \"yAxisMonday\",\n \"yAxisTuesday\",\n \"yAxisWednesday\",\n \"yAxisThursday\",\n \"yAxisFriday\",\n \"yAxisSaturday\",\n \"yAxisSunday\"\n \n \n ]\n\n}",
"dataKeySettingsSchema": "",
"latestDataKeySettingsSchema": "",
"settingsDirective": "",
"dataKeySettingsDirective": "",
"latestDataKeySettingsDirective": "",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false},\"_hash\":0.8587686344902596,\"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\":\"Second\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false},\"_hash\":0.12775350966079668,\"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\":{\"maxZValue\":25,\"zAxisUnit\":\"Pieces\",\"yAxisType\":\"Monday to Friday\"},\"title\":\"3d_chart\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null}"
}
}