-
Notifications
You must be signed in to change notification settings - Fork 2
/
performance_bar.json
28 lines (28 loc) · 15 KB
/
performance_bar.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
{
"alias": "performance_bar",
"name": "Performance bar",
"descriptor": {
"type": "latest",
"sizeX": 12,
"sizeY": 6,
"resources": [
{
"url": "https://canvasjs.com/assets/script/canvasjs.min.js"
},
{
"url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
},
{
"url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
}
],
"templateHtml": "<html>\n <head>\n <title>Special performance bar</title>\n </head>\n <body>\n <div id=\"container\">\n <div id = \"row\">\n <div id=\"chartContainer2\" style=\"height: 300px; width: 100%;margin-bottom:-140px;\"></div>\n <div id=\"chartContainer\" style=\"height: 100px; width: 100%;\"></div>\n </div>\n </div>\n </body>\n</html>",
"templateCss": "#container {\n overflow: auto;\n}\n\n.tbDatasource-container {\n margin: 5px;\n padding: 8px;\n}\n\n.tbDatasource-title {\n font-size: 1.200rem;\n font-weight: 500;\n padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n width: 100%;\n box-shadow: 0 0 10px #ccc;\n border-collapse: collapse;\n white-space: nowrap;\n font-size: 1.000rem;\n color: #757575;\n}\n\n.tbDatasource-table td {\n position: relative;\n border-top: 1px solid rgba(0, 0, 0, 0.12);\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n padding: 0px 18px;\n box-sizing: border-box;\n}\n\n.canvasjs-chart-credit\n{\n display: none;\n}\n",
"controllerScript": "self.onInit = function() {\n var $scope = self.ctx.$scope;\n self.ctx.datasourceTitleCells = [];\n self.ctx.valueCells = [];\n self.ctx.labelCells = [];\n \n for (var i=0; i < self.ctx.datasources.length; i++) {\n var tbDatasource = self.ctx.datasources[i];\n\n var datasourceId = 'tbDatasource' + i;\n self.ctx.$container.append(\n \"<div id='\" + datasourceId +\n \"' class='tbDatasource-container'></div>\"\n );\n\n var datasourceContainer = $('#' + datasourceId,\n self.ctx.$container);\n\n datasourceContainer.append(\n \"<div class='tbDatasource-title'>\" +\n tbDatasource.name + \"</div>\"\n );\n \n var datasourceTitleCell = $('.tbDatasource-title', datasourceContainer);\n self.ctx.datasourceTitleCells.push(datasourceTitleCell);\n \n var tableId = 'table' + i;\n datasourceContainer.append(\n \"<table id='\" + tableId +\n \"' class='tbDatasource-table'><col width='30%'><col width='70%'></table>\"\n );\n var table = $('#' + tableId, self.ctx.$container);\n\n for (var a = 0; a < tbDatasource.dataKeys.length; a++) {\n var dataKey = tbDatasource.dataKeys[a];\n var labelCellId = 'labelCell' + a;\n var cellId = 'cell' + a;\n table.append(\"<tr><td id='\" + labelCellId + \"'>\" + dataKey.label +\n \"</td><td id='\" + cellId +\n \"'></td></tr>\");\n var labelCell = $('#' + labelCellId, table);\n self.ctx.labelCells.push(labelCell);\n var valueCell = $('#' + cellId, table);\n self.ctx.valueCells.push(valueCell);\n }\n } \n \n self.onResize();\n var dataPoints1= [{ y: 50, indexLabel: \"Performance {y} pts\",markerColor: \"black\", markerType: \"triangle\",indexLabelFontColor: \"black\" }];\n var chart2 = new CanvasJS.Chart(\"chartContainer2\", {\n\tanimationEnabled: true,\n\ttheme: \"light2\",\n\ttitle:{\n\t\ttext: \"Chart\"\n \t},\n toolTip:{\n enabled : false\n },\n \n axisX:{\n lineColor: \"white\",\n gridColor: \"white\",\n labelFontColor: \"white\",\n tickColor: \"white\"\n },\n axisY:{\n lineColor: \"white\",\n gridColor: \"white\",\n labelFontColor:\"white\",\n tickColor: \"white\"\n },\n \tdata: [{ \n \t\ttype: \"line\",\n indexLabelFontSize: \"\"+self.ctx.settings.ifontSize+\"px\",\n \t\tdataPoints: dataPoints1\n \t}]\n });\n chart2.render();\n var chart = new CanvasJS.Chart(\"chartContainer\", {\n\tanimationEnabled: true,\n\ttheme: \"light2\",\n\taxisY:{\n\t\tinterval: 10\n\t},\n toolTip:{\n enabled: false, //disable here\n animationEnabled: false //disable here\n },\n\tdata:[{\n\t\ttype: \"stackedBar100\", \n\t\tname: \"Bad\",\n \tcursor: \"pointer\",\n indexLabel:\"\"+self.ctx.settings.indexLabelE,\n color: \"\"+self.ctx.settings.color1,\n labelFontSize:\"\"+self.ctx.settings.lfontSize,\n indexLabelFontColor: \"black\",\n\t\tdataPoints: [\n\t\t\t{ y: self.ctx.settings.GradeEInterval, label: \"Rating Grade\",indexLabel:\"E\" },\n { y: self.ctx.settings.GradeEInterval, label: \"Rating Desciption\"}\n\t\t]\n\t\t},\n\t\t{\n\t\t\ttype: \"stackedBar100\",\n\t\t\tname: \"Below Average\",\n cursor: \"pointer\",\n indexLabel:\"\"+self.ctx.settings.indexLabelD,\n labelFontSize:\"\"+self.ctx.settings.lfontSize,\n \tcolor: \"\"+self.ctx.settings.color2,\n indexLabelFontColor: \"black\",\n\t\t\tdataPoints: [\n\t\t\t\t{ y: self.ctx.settings.GradeDInterval, label: \"Rating Grade\",indexLabel:\"D\" },\n { y: self.ctx.settings.GradeDInterval, label: \"Rating Desciption\"}\n\t\t\t]\n\t\t}, \n\t\t{\n\t\t\ttype: \"stackedBar100\",\n\t\t\tname: \"Average\",\n cursor: \"pointer\",\n indexLabel:\"\"+self.ctx.settings.indexLabelC,\n labelFontSize:\"\"+self.ctx.settings.lfontSize,\n \tcolor: \"\"+self.ctx.settings.color3,\n indexLabelFontColor: \"black\",\n\t\t\tdataPoints: [\n\t\t\t\t{ y: self.ctx.settings.GradeCInterval, label: \"Rating Grade\",indexLabel:\"C\" },\n { y: self.ctx.settings.GradeCInterval, label: \"Rating Desciption\"}\n\t\t\t]\n\t},\n {\n\t\t\ttype: \"stackedBar100\",\n\t\t\tname: \"Good\",\n cursor: \"pointer\",\n indexLabel:\"\"+self.ctx.settings.indexLabelB,\n labelFontSize:\"\"+self.ctx.settings.lfontSize,\n \tcolor: \"\"+self.ctx.settings.color4,\n indexLabelFontColor: \"black\",\n\t\t\tdataPoints: [\n\t\t\t\t{ y: self.ctx.settings.GradeBInterval, label: \"Rating Grade\",indexLabel:\"B\" },\n { y: self.ctx.settings.GradeBInterval, label: \"Rating Desciption\"}\n\t\t\t]\n\t},\n {\n\t\t\ttype: \"stackedBar100\",\n\t\t\tname: \"Very good\",\n cursor: \"pointer\",\n indexLabel:\"\"+self.ctx.settings.indexLabelA,\n labelFontSize:\"\"+self.ctx.settings.lfontSize,\n \tcolor: \"\"+self.ctx.settings.color5,\n indexLabelFontColor: \"black\",\n\t\t\tdataPoints: [\n\t\t\t\t{ y: self.ctx.settings.GradeAInterval, label: \"Rating Grade\",indexLabel:\"A\" },\n { y: self.ctx.settings.GradeAInterval, label: \"\"+self.ctx.settings.LegendLabel}\n\t\t\t]\n\t}]\n});\nchart.render();\n var yVal = 100;\t\n var updateInterval = 5000;\n var data = String(self.ctx.data[0].data[0]).split(\",\");\n\n var updateChart = function () {\n \t\t//yVal = yVal + Math.round(5 + Math.random() *(-5-5));\n \t\n \tdataPoints1.push({y: data[1],indexLabel: \"Performance {y} pts\",markerColor: \"black\", markerType: \"triangle\",indexLabelFontColor: \"black\"});\n \tchart.render();\t\t\n \n \t// update chart after specified time. \n \n };\n document.getElementsByClassName(\"canvasjs-chart-canvas\")[0].style.display=\"none\";\n \n // document.getElementsByClassName(\"canvasjs-chart-canvas\")[1].style.display=\"none\";\n // setInterval(function(){updateChart()}, updateInterval);\n// var asd=document.getElementsByClassName(\"canvasjs-chart-credit\");\n// for(var key=0;key<asd.length;key++){\n \n// }\n// console.log(document.getElementsByClassName(\"canvasjs-chart-credit\"))\n}\nself.onDataUpdated = function() {\n var txtValue=0;\n for (var i = 0; i < self.ctx.valueCells.length; i++) {\n var cellData = self.ctx.data[i];\n if (cellData && cellData.data && cellData.data.length > 0) {\n var tvPair = cellData.data[cellData.data.length - 1];\n var value = tvPair[1];\n //toDo -> + IsNumber\n \n if (isNumber(value)) {\n var decimals = self.ctx.decimals;\n var units = self.ctx.units;\n if (cellData.dataKey.decimals || cellData.dataKey.decimals === 0) {\n decimals = cellData.dataKey.decimals;\n }\n if (cellData.dataKey.units) {\n units = cellData.dataKey.units;\n }\n txtValue = self.ctx.utils.formatValue(value, decimals, units, true);\n } else {\n txtValue = value;\n }\n self.ctx.valueCells[i].html(txtValue);\n \n }\n }\n function isNumber(n) {\n return !isNaN(parseFloat(n)) && isFinite(n);\n }\n \n}\n\nself.onResize = function() {\n var datasourceTitleFontSize = self.ctx.height/8;\n if (self.ctx.width/self.ctx.height <= 1.5) {\n datasourceTitleFontSize = self.ctx.width/12;\n }\n datasourceTitleFontSize = Math.min(datasourceTitleFontSize, 20);\n for (var i = 0; i < self.ctx.datasourceTitleCells.length; i++) {\n self.ctx.datasourceTitleCells[i].css('font-size', datasourceTitleFontSize+'px');\n }\n var valueFontSize = self.ctx.height/9;\n var labelFontSize = self.ctx.height/9;\n if (self.ctx.width/self.ctx.height <= 1.5) {\n valueFontSize = self.ctx.width/15;\n labelFontSize = self.ctx.width/15;\n }\n valueFontSize = Math.min(valueFontSize, 18);\n labelFontSize = Math.min(labelFontSize, 18);\n\n for (i = 0; i < self.ctx.valueCells; i++) {\n self.ctx.valueCells[i].css('font-size', valueFontSize+'px');\n self.ctx.valueCells[i].css('height', valueFontSize*2.5+'px');\n self.ctx.valueCells[i].css('padding', '0px ' + valueFontSize + 'px');\n self.ctx.labelCells[i].css('font-size', labelFontSize+'px');\n self.ctx.labelCells[i].css('height', labelFontSize*2.5+'px');\n self.ctx.labelCells[i].css('padding', '0px ' + labelFontSize + 'px');\n } \n}\n\nself.onDestroy = function() {\n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"GradeAInterval\": {\n \"default\": \"0\",\n \"type\": \"number\",\n \"title\": \"Minimum and Maximum Values\"\n },\n \"GradeBInterval\": {\n \"default\": \"0\",\n \"type\": \"number\",\n \"title\": \"Minimum and Maximum Values\"\n }, \n \"GradeCInterval\": {\n \"default\": \"0\",\n \"type\": \"number\",\n \"title\": \"Minimum and Maximum Values\"\n },\"GradeDInterval\": {\n \"default\": \"0\",\n \"type\": \"number\",\n \"title\": \"Minimum and Maximum Values\"\n },\"GradeEInterval\": {\n \"default\": \"0\",\n \"type\": \"number\",\n \"title\": \"Minimum and Maximum Values\"\n },\n \"color1\":{\n \"title\": \"Default color\",\n \"type\": \"string\",\n \"default\": null\n },\n \"color2\":{\n \"title\": \"Default color\",\n \"type\": \"string\",\n \"default\": null\n },\n \"color3\":{\n \"title\": \"Default color\",\n \"type\": \"string\",\n \"default\": null\n },\n \"color4\":{\n \"title\": \"Default color\",\n \"type\": \"string\",\n \"default\": null\n },\n \"color5\":{\n \"title\": \"Default color\",\n \"type\": \"string\",\n \"default\": null\n },\n \"lfontSize\":{\n \"title\":\"LabelFontSize\",\n \"type\":\"string\",\n \"default\":\"12px\"\n },\n \"ifontSize\":{\n \"title\":\"IndexFontSize\",\n \"type\":\"string\",\n \"default\":\"12px\"\n },\n \"LegendLabel\":{\n \"title\":\"Rating Description\",\n \"type\":\"string\",\n \"default\":\"xyz\"\n },\n \"indexLabelA\":{\n \"title\":\"Label A\",\n \"type\":\"string\",\n \"default\":\"very good\"\n },\n \"indexLabelB\":{\n \"title\":\"Label B\",\n \"type\":\"string\",\n \"default\":\"Good\"\n },\n \"indexLabelC\":{\n \"title\":\"Label C\",\n \"type\":\"string\",\n \"default\":\"Average\"\n },\n \"indexLabelD\":{\n \"title\":\"Label D\",\n \"type\":\"string\",\n \"default\":\"Below Average\"\n },\n \"indexLabelE\":{\n \"title\":\"Label E\",\n \"type\":\"string\",\n \"default\":\"Bad\"\n }\n }\n },\n \"form\": [\n \"LegendLabel\",\n \"indexLabelA\",\n \"indexLabelB\",\n \"indexLabelC\",\n \"indexLabelD\",\n \"indexLabelE\",\n \"lfontSize\",\n \"ifontSize\",\n \"GradeAInterval\",\n \"GradeBInterval\",\n \"GradeCInterval\",\n \"GradeDInterval\",\n \"GradeEInterval\",\n {\n \"key\": \"color1\",\n \"type\": \"color\"\n },\n { \n \"key\": \"color2\",\n \"type\": \"color\"\n },\n {\n \"key\": \"color3\",\n \"type\": \"color\"\n },\n {\n \"key\": \"color4\",\n \"type\": \"color\"\n },\n {\n \"key\": \"color5\",\n \"type\": \"color\"\n }\n ]\n}",
"dataKeySettingsSchema": "{}\n",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"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;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Performance bar\"}"
},
"image": null,
"description": null
}