thingsboard-aplcache
Changes
ui/src/app/widget/lib/flot-widget.js 458(+245 -213)
Details
diff --git a/application/src/main/data/json/system/widget_bundles/charts.json b/application/src/main/data/json/system/widget_bundles/charts.json
index a264ba6..71e9fa7 100644
--- a/application/src/main/data/json/system/widget_bundles/charts.json
+++ b/application/src/main/data/json/system/widget_bundles/charts.json
@@ -35,7 +35,7 @@
"resources": [],
"templateHtml": "",
"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": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n return TbFlot.settingsSchema;\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.datakeySettingsSchema(true);\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n",
+ "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n return TbFlot.settingsSchema('graph');\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.datakeySettingsSchema(true);\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n",
"settingsSchema": "{}",
"dataKeySettingsSchema": "{}",
"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\":{\"shadowSize\":4,\"fontColor\":\"#545454\",\"fontSize\":10,\"xaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"grid\":{\"color\":\"#545454\",\"tickColor\":\"#DDDDDD\",\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1},\"legend\":{\"show\":true,\"position\":\"nw\",\"backgroundColor\":\"#f0f0f0\",\"backgroundOpacity\":0.85,\"labelBoxBorderColor\":\"rgba(1, 1, 1, 0.45)\"},\"decimals\":1,\"stack\":false,\"tooltipIndividual\":false},\"title\":\"Timeseries - Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null}"
@@ -147,10 +147,10 @@
"resources": [],
"templateHtml": "",
"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": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'bar'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n return TbFlot.settingsSchema;\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.datakeySettingsSchema(false);\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n",
+ "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'bar'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n return TbFlot.settingsSchema('bar');\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.datakeySettingsSchema(false);\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n",
"settingsSchema": "{}",
"dataKeySettingsSchema": "{}",
- "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":false,\"fillLines\":false,\"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 < 0) {\\n\\tvalue = 0;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":false,\"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 < 0) {\\n\\tvalue = 0;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000},\"aggregation\":{\"limit\":200,\"type\":\"AVG\"}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"shadowSize\":4,\"fontColor\":\"#545454\",\"fontSize\":10,\"xaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"grid\":{\"color\":\"#545454\",\"tickColor\":\"#DDDDDD\",\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1},\"legend\":{\"show\":true,\"position\":\"nw\",\"backgroundColor\":\"#f0f0f0\",\"backgroundOpacity\":0.85,\"labelBoxBorderColor\":\"rgba(1, 1, 1, 0.45)\"},\"decimals\":1,\"stack\":true,\"tooltipIndividual\":false},\"title\":\"Timeseries Bars - Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null}"
+ "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":false,\"fillLines\":false,\"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 < 0) {\\n\\tvalue = 0;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":false,\"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 < 0) {\\n\\tvalue = 0;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000},\"aggregation\":{\"limit\":200,\"type\":\"AVG\"}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"shadowSize\":4,\"fontColor\":\"#545454\",\"fontSize\":10,\"xaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"grid\":{\"color\":\"#545454\",\"tickColor\":\"#DDDDDD\",\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1},\"stack\":true,\"tooltipIndividual\":false,\"defaultBarWidth\":600},\"title\":\"Timeseries Bars - Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"widgetStyle\":{},\"useDashboardTimewindow\":true,\"showLegend\":true,\"actions\":{}}"
}
},
{
@@ -163,7 +163,7 @@
"resources": [],
"templateHtml": "",
"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": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'state'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.typeParameters = function() {\n return {\n stateData: true\n };\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n return TbFlot.settingsSchema;\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.datakeySettingsSchema(true);\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n",
+ "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'state'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.typeParameters = function() {\n return {\n stateData: true\n };\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n return TbFlot.settingsSchema('graph');\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.datakeySettingsSchema(true);\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n",
"settingsSchema": "{}",
"dataKeySettingsSchema": "{}",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 1\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false,\"axisPosition\":\"left\",\"showSeparateAxis\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"return Math.random() > 0.5 ? 1 : 0;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 2\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false,\"axisPosition\":\"left\"},\"_hash\":0.12775350966079668,\"funcBody\":\"return Math.random() <= 0.5 ? 1 : 0;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"shadowSize\":4,\"fontColor\":\"#545454\",\"fontSize\":10,\"xaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"showLabels\":true,\"color\":\"#545454\",\"ticksFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\"},\"grid\":{\"color\":\"#545454\",\"tickColor\":\"#DDDDDD\",\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1},\"stack\":false,\"tooltipIndividual\":false,\"tooltipValueFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\",\"smoothLines\":false},\"title\":\"State Chart\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"widgetStyle\":{},\"useDashboardTimewindow\":true,\"showLegend\":true,\"actions\":{},\"legendConfig\":{\"position\":\"bottom\",\"showMin\":false,\"showMax\":false,\"showAvg\":false,\"showTotal\":false}}"
ui/src/app/widget/lib/flot-widget.js 458(+245 -213)
diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js
index 1f363d6..acaaf10 100644
--- a/ui/src/app/widget/lib/flot-widget.js
+++ b/ui/src/app/widget/lib/flot-widget.js
@@ -333,6 +333,7 @@ export default class TbFlot {
lineWidth: 0,
fill: 0.9
}
+ ctx.defaultBarWidth = settings.defaultBarWidth || 600;
}
if (this.chartType === 'state') {
@@ -476,7 +477,11 @@ export default class TbFlot {
this.options.yaxes = angular.copy(this.yaxes);
if (this.chartType === 'line' || this.chartType === 'bar' || this.chartType === 'state') {
if (this.chartType === 'bar') {
- this.options.series.bars.barWidth = this.subscription.timeWindow.interval * 0.6;
+ if (this.subscription.timeWindowConfig.aggregation && this.subscription.timeWindowConfig.aggregation.type === 'NONE') {
+ this.options.series.bars.barWidth = this.ctx.defaultBarWidth;
+ } else {
+ this.options.series.bars.barWidth = this.subscription.timeWindow.interval * 0.6;
+ }
}
this.options.xaxis.min = this.subscription.timeWindow.minTime;
this.options.xaxis.max = this.subscription.timeWindow.maxTime;
@@ -594,7 +599,11 @@ export default class TbFlot {
this.options.xaxis.min = this.subscription.timeWindow.minTime;
this.options.xaxis.max = this.subscription.timeWindow.maxTime;
if (this.chartType === 'bar') {
- this.options.series.bars.barWidth = this.subscription.timeWindow.interval * 0.6;
+ if (this.subscription.timeWindowConfig.aggregation && this.subscription.timeWindowConfig.aggregation.type === 'NONE') {
+ this.options.series.bars.barWidth = this.ctx.defaultBarWidth;
+ } else {
+ this.options.series.bars.barWidth = this.subscription.timeWindow.interval * 0.6;
+ }
}
if (axisVisibilityChanged) {
@@ -603,7 +612,11 @@ export default class TbFlot {
this.ctx.plot.getOptions().xaxes[0].min = this.subscription.timeWindow.minTime;
this.ctx.plot.getOptions().xaxes[0].max = this.subscription.timeWindow.maxTime;
if (this.chartType === 'bar') {
- this.ctx.plot.getOptions().series.bars.barWidth = this.subscription.timeWindow.interval * 0.6;
+ if (this.subscription.timeWindowConfig.aggregation && this.subscription.timeWindowConfig.aggregation.type === 'NONE') {
+ this.ctx.plot.getOptions().series.bars.barWidth = this.ctx.defaultBarWidth;
+ } else {
+ this.ctx.plot.getOptions().series.bars.barWidth = this.subscription.timeWindow.interval * 0.6;
+ }
}
this.updateData();
}
@@ -810,238 +823,257 @@ export default class TbFlot {
}
}
- static get settingsSchema() {
- return {
+ static settingsSchema(chartType) {
+
+ var schema = {
"schema": {
"type": "object",
"title": "Settings",
"properties": {
- "stack": {
- "title": "Stacking",
- "type": "boolean",
- "default": false
- },
- "smoothLines": {
- "title": "Display smooth (curved) lines",
- "type": "boolean",
- "default": false
- },
- "shadowSize": {
- "title": "Shadow size",
- "type": "number",
- "default": 4
- },
- "fontColor": {
- "title": "Font color",
+ }
+ }
+ };
+
+ var properties = schema["schema"]["properties"];
+ properties["stack"] = {
+ "title": "Stacking",
+ "type": "boolean",
+ "default": false
+ };
+ if (chartType === 'graph') {
+ properties["smoothLines"] = {
+ "title": "Display smooth (curved) lines",
+ "type": "boolean",
+ "default": false
+ };
+ }
+ if (chartType === 'bar') {
+ properties["defaultBarWidth"] = {
+ "title": "Default bar width for non-aggregated data (milliseconds)",
+ "type": "number",
+ "default": 600
+ };
+ }
+ properties["shadowSize"] = {
+ "title": "Shadow size",
+ "type": "number",
+ "default": 4
+ };
+ properties["fontColor"] = {
+ "title": "Font color",
+ "type": "string",
+ "default": "#545454"
+ };
+ properties["fontSize"] = {
+ "title": "Font size",
+ "type": "number",
+ "default": 10
+ };
+ properties["tooltipIndividual"] = {
+ "title": "Hover individual points",
+ "type": "boolean",
+ "default": false
+ };
+ properties["tooltipCumulative"] = {
+ "title": "Show cumulative values in stacking mode",
+ "type": "boolean",
+ "default": false
+ };
+ properties["tooltipValueFormatter"] = {
+ "title": "Tooltip value format function, f(value)",
+ "type": "string",
+ "default": ""
+ };
+
+ properties["grid"] = {
+ "title": "Grid settings",
+ "type": "object",
+ "properties": {
+ "color": {
+ "title": "Primary color",
"type": "string",
"default": "#545454"
- },
- "fontSize": {
- "title": "Font size",
+ },
+ "backgroundColor": {
+ "title": "Background color",
+ "type": "string",
+ "default": null
+ },
+ "tickColor": {
+ "title": "Ticks color",
+ "type": "string",
+ "default": "#DDDDDD"
+ },
+ "outlineWidth": {
+ "title": "Grid outline/border width (px)",
"type": "number",
- "default": 10
- },
- "tooltipIndividual": {
- "title": "Hover individual points",
+ "default": 1
+ },
+ "verticalLines": {
+ "title": "Show vertical lines",
"type": "boolean",
- "default": false
- },
- "tooltipCumulative": {
- "title": "Show cumulative values in stacking mode",
+ "default": true
+ },
+ "horizontalLines": {
+ "title": "Show horizontal lines",
"type": "boolean",
- "default": false
- },
- "tooltipValueFormatter": {
- "title": "Tooltip value format function, f(value)",
- "type": "string",
- "default": ""
- },
- "grid": {
- "title": "Grid settings",
- "type": "object",
- "properties": {
- "color": {
- "title": "Primary color",
- "type": "string",
- "default": "#545454"
- },
- "backgroundColor": {
- "title": "Background color",
- "type": "string",
- "default": null
- },
- "tickColor": {
- "title": "Ticks color",
- "type": "string",
- "default": "#DDDDDD"
- },
- "outlineWidth": {
- "title": "Grid outline/border width (px)",
- "type": "number",
- "default": 1
- },
- "verticalLines": {
- "title": "Show vertical lines",
- "type": "boolean",
- "default": true
- },
- "horizontalLines": {
- "title": "Show horizontal lines",
- "type": "boolean",
- "default": true
- }
- }
- },
- "xaxis": {
- "title": "X axis settings",
- "type": "object",
- "properties": {
- "showLabels": {
- "title": "Show labels",
- "type": "boolean",
- "default": true
- },
- "title": {
- "title": "Axis title",
- "type": "string",
- "default": null
- },
- "titleAngle": {
- "title": "Axis title's angle in degrees",
- "type": "number",
- "default": 0
- },
- "color": {
- "title": "Ticks color",
- "type": "string",
- "default": null
- }
- }
- },
- "yaxis": {
- "title": "Y axis settings",
- "type": "object",
- "properties": {
- "min": {
- "title": "Minimum value on the scale",
- "type": "number",
- "default": null
- },
- "max": {
- "title": "Maximum value on the scale",
- "type": "number",
- "default": null
- },
- "showLabels": {
- "title": "Show labels",
- "type": "boolean",
- "default": true
- },
- "title": {
- "title": "Axis title",
- "type": "string",
- "default": null
- },
- "titleAngle": {
- "title": "Axis title's angle in degrees",
- "type": "number",
- "default": 0
- },
- "color": {
- "title": "Ticks color",
- "type": "string",
- "default": null
- },
- "ticksFormatter": {
- "title": "Ticks formatter function, f(value)",
- "type": "string",
- "default": ""
- },
- "tickDecimals": {
- "title": "The number of decimals to display",
- "type": "number",
- "default": 0
- },
- "tickSize": {
- "title": "Step size between ticks",
- "type": "number",
- "default": null
- }
- }
- }
+ "default": true
+ }
+ }
+ };
+
+ properties["xaxis"] = {
+ "title": "X axis settings",
+ "type": "object",
+ "properties": {
+ "showLabels": {
+ "title": "Show labels",
+ "type": "boolean",
+ "default": true
},
- "required": []
- },
- "form": [
- "stack",
- "smoothLines",
- "shadowSize",
+ "title": {
+ "title": "Axis title",
+ "type": "string",
+ "default": null
+ },
+ "titleAngle": {
+ "title": "Axis title's angle in degrees",
+ "type": "number",
+ "default": 0
+ },
+ "color": {
+ "title": "Ticks color",
+ "type": "string",
+ "default": null
+ }
+ }
+ };
+
+ properties["yaxis"] = {
+ "title": "Y axis settings",
+ "type": "object",
+ "properties": {
+ "min": {
+ "title": "Minimum value on the scale",
+ "type": "number",
+ "default": null
+ },
+ "max": {
+ "title": "Maximum value on the scale",
+ "type": "number",
+ "default": null
+ },
+ "showLabels": {
+ "title": "Show labels",
+ "type": "boolean",
+ "default": true
+ },
+ "title": {
+ "title": "Axis title",
+ "type": "string",
+ "default": null
+ },
+ "titleAngle": {
+ "title": "Axis title's angle in degrees",
+ "type": "number",
+ "default": 0
+ },
+ "color": {
+ "title": "Ticks color",
+ "type": "string",
+ "default": null
+ },
+ "ticksFormatter": {
+ "title": "Ticks formatter function, f(value)",
+ "type": "string",
+ "default": ""
+ },
+ "tickDecimals": {
+ "title": "The number of decimals to display",
+ "type": "number",
+ "default": 0
+ },
+ "tickSize": {
+ "title": "Step size between ticks",
+ "type": "number",
+ "default": null
+ }
+ }
+ };
+
+ schema["schema"]["required"] = [];
+ schema["form"] = ["stack"];
+ if (chartType === 'graph') {
+ schema["form"].push("smoothLines");
+ }
+ if (chartType === 'bar') {
+ schema["form"].push("defaultBarWidth");
+ }
+ schema["form"].push("shadowSize");
+ schema["form"].push({
+ "key": "fontColor",
+ "type": "color"
+ });
+ schema["form"].push("fontSize");
+ schema["form"].push("tooltipIndividual");
+ schema["form"].push("tooltipCumulative");
+ schema["form"].push({
+ "key": "tooltipValueFormatter",
+ "type": "javascript"
+ });
+ schema["form"].push({
+ "key": "grid",
+ "items": [
{
- "key": "fontColor",
+ "key": "grid.color",
"type": "color"
},
- "fontSize",
- "tooltipIndividual",
- "tooltipCumulative",
{
- "key": "tooltipValueFormatter",
- "type": "javascript"
+ "key": "grid.backgroundColor",
+ "type": "color"
},
{
- "key": "grid",
- "items": [
- {
- "key": "grid.color",
- "type": "color"
- },
- {
- "key": "grid.backgroundColor",
- "type": "color"
- },
- {
- "key": "grid.tickColor",
- "type": "color"
- },
- "grid.outlineWidth",
- "grid.verticalLines",
- "grid.horizontalLines"
- ]
+ "key": "grid.tickColor",
+ "type": "color"
},
+ "grid.outlineWidth",
+ "grid.verticalLines",
+ "grid.horizontalLines"
+ ]
+ });
+ schema["form"].push({
+ "key": "xaxis",
+ "items": [
+ "xaxis.showLabels",
+ "xaxis.title",
+ "xaxis.titleAngle",
{
- "key": "xaxis",
- "items": [
- "xaxis.showLabels",
- "xaxis.title",
- "xaxis.titleAngle",
- {
- "key": "xaxis.color",
- "type": "color"
- }
- ]
+ "key": "xaxis.color",
+ "type": "color"
+ }
+ ]
+ });
+ schema["form"].push({
+ "key": "yaxis",
+ "items": [
+ "yaxis.min",
+ "yaxis.max",
+ "yaxis.tickDecimals",
+ "yaxis.tickSize",
+ "yaxis.showLabels",
+ "yaxis.title",
+ "yaxis.titleAngle",
+ {
+ "key": "yaxis.color",
+ "type": "color"
},
{
- "key": "yaxis",
- "items": [
- "yaxis.min",
- "yaxis.max",
- "yaxis.tickDecimals",
- "yaxis.tickSize",
- "yaxis.showLabels",
- "yaxis.title",
- "yaxis.titleAngle",
- {
- "key": "yaxis.color",
- "type": "color"
- },
- {
- "key": "yaxis.ticksFormatter",
- "type": "javascript"
- }
- ]
+ "key": "yaxis.ticksFormatter",
+ "type": "javascript"
}
-
]
- }
+ });
+ return schema;
}
static get pieDatakeySettingsSchema() {