-
Notifications
You must be signed in to change notification settings - Fork 0
/
weekly_heatmap.json
22 lines (22 loc) · 8.73 KB
/
weekly_heatmap.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"alias": "weekly_heatmap",
"name": "Weekly Heatmap",
"image": null,
"description": null,
"descriptor": {
"type": "timeseries",
"sizeX": 4.5,
"sizeY": 3,
"resources": [
{
"url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"
}
],
"templateHtml": "<div id=\"echart\" style=\"width: 600px; height:100%; flow-direction: row; transform: scale(1); transform-origin: 0% 0% 100px\"></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": "let data = [[0, 0, 55], [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, 17, 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 .map(function (item) {\n return [item[1], item[0], item[2] || '-'];\n});\nvar myChart;\nvar chartDom;\nvar option;\nself.onInit = function() {\n\n\nchartDom = $('#echart', self.ctx\n .$container)[0];\n myChart = echarts.init(chartDom);\ndraw();\n\n}\n\nfunction draw()\n{\n \n\n// prettier-ignore\nconst hours = [\n '00:', '01:', '02:', '03:', '04:', '05:', '06:',\n '07:', '08:', '09:', '10:', '11:',\n '12:', '13:', '14:', '15:', '16:', '17:',\n '18:', '19:', '20:', '21:', '22:', '23:'\n];\n// prettier-ignore\nconst days = [\n 'Saturday', 'Friday', 'Thursday',\n 'Wednesday', 'Tuesday', 'Monday', 'Sunday'\n];\n// prettier-ignore\n\n \n\noption = {\n tooltip: {\n position: 'top',\n formatter: function (params) {\n console.log(params)\n \n return `${params.seriesName}<br />\n ${params.data[0]}:00, Value: ${params.data[2]}`;\n }\n },\n gradientColor:\n \n [\n '#f6efa6',\n '#d88273',\n '#bf444c'\n ]\n ,\n grid: {\n height: '50%',\n top: '10%'\n },\n xAxis: {\n type: 'category',\n data: hours,\n splitArea: {\n show: true\n }\n },\n yAxis: {\n type: 'category',\n data: days,\n splitArea: {\n show: true\n }\n },\n visualMap: {\n min: self.ctx.settings.minScale || 0,\n max: self.ctx.settings.maxScale || 100,\n calculable: true,\n orient: 'horizontal',\n left: 'center',\n bottom: '15%'\n },\n series: [\n {\n name: self.ctx.data[0].dataKey.label,\n type: 'heatmap',\n data: data,\n label: {\n show: self.ctx.settings.showDataInHeatmap,\n \n },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\nif (self.ctx.settings.style == 'Green')\n{\noption.gradientColor =\n[\n '#e6ffe6',\n '#00ff00',\n]\n}\n\noption && myChart.setOption(option);\n}\n\nself.onDataUpdated = function() {\n \n \nvar datasourceData = self.ctx.data[0];\nlet dataElement = Array();\n var dataSet = datasourceData.data;\n var dataToAdd = Array();\n \n for (var i = 0; i < dataSet.length; i++) {\n \n var tsValuePair = dataSet[i];\n var ts = tsValuePair[0];\n var value = tsValuePair[1];\n \n let day = new Date(ts).getDay()\n let hour = new Date(ts).getHours();\n \n dataElement.push([6-day, hour, parseFloat(value).toFixed(self.ctx.settings.numberOfDigits)]);\n \n \n }\n \n data = dataElement.map(function (item) {\n return [item[1], item[0], item[2] || '-'];\n});\n \n if (myChart != undefined)\n {\n option.series[0].data = data;\n myChart.setOption(option);\n }\n \n}\n\nself.onResize = function() {\n \n let maxWidth = self.ctx.height / 0.55;\n let width = self.ctx.width;\n if (maxWidth < width)\n width = self.ctx.height / 0.55;\n\n $('#echart', self.ctx.$container)[0].style.transform = \"scale(\" + (width / 600) + \")\";\n\n\n\n $('#echart', self.ctx.$container)[0].style.marginTop = width * -0.05 +\"px\";\n \n self.onInit();\n \n}\n\nself.onEditModeChanged = 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 \"showDataInHeatmap\": {\n \"title\": \"Show Data in Heatmap\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"minScale\": {\n \"title\": \"Min. Value\",\n \"type\": \"number\",\n \"default\": 0\n },\n \"maxScale\": {\n \"title\": \"Max. Value\",\n \"type\": \"number\",\n \"default\": 100\n },\n \"numberOfDigits\": {\n \"title\": \"Number of digits\",\n \"type\": \"number\",\n \"default\": 1\n },\n \"style\": {\n \"title\": \"Type\",\n \"type\": \"string\",\n \"enum\": [\n \"Red\",\n \"Green\"],\n \"default\": \"Red\"\n }\n \n }\n },\n \"form\": [\n \"showDataInHeatmap\",\n \"minScale\",\n \"maxScale\",\n \"numberOfDigits\",\n \"style\"\n \n \n \n ]\n}",
"dataKeySettingsSchema": "{}",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = Math.random() * 100;\\n\\nreturn value;\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}]}],\"timewindow\":{\"hideInterval\":false,\"hideAggregation\":false,\"hideAggInterval\":false,\"hideTimezone\":false,\"selectedTab\":1,\"history\":{\"historyType\":0,\"timewindowMs\":604800000,\"interval\":3600000,\"fixedTimewindow\":{\"startTimeMs\":1652037003619,\"endTimeMs\":1652123403619},\"quickInterval\":\"CURRENT_DAY\"},\"aggregation\":{\"type\":\"AVG\",\"limit\":25000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showDataInHeatmap\":true,\"minScale\":0,\"maxScale\":100,\"numberOfDigits\":0,\"style\":\"Green\"},\"title\":\"Weekly Heatmap\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"useDashboardTimewindow\":false,\"displayTimewindow\":false,\"showTitleIcon\":false,\"titleTooltip\":\"\",\"widgetStyle\":{},\"widgetCss\":\"\",\"noDataDisplayMessage\":\"\",\"showLegend\":false}"
}
}