简柏林 / thingskit · Commits

Commit 132791367913f2ac4ee9582d6e2eec8025f72bc4

Authored by Igor Kulikov
1 parent e8620d86

Add default bar width option for Bars chart

Inline Side-by-side
Showing 2 changed files with 249 additions and 217 deletions
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 "resources": [], 35 "resources": [],
36 "templateHtml": "", 36 "templateHtml": "",
37 "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", 37 "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",
38 - "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", 38 + "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",
39 "settingsSchema": "{}", 39 "settingsSchema": "{}",
40 "dataKeySettingsSchema": "{}", 40 "dataKeySettingsSchema": "{}",
41 "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}" 41 "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 @@ @@ -147,10 +147,10 @@
147 "resources": [], 147 "resources": [],
148 "templateHtml": "", 148 "templateHtml": "",
149 "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", 149 "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",
150 - "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", 150 + "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",
151 "settingsSchema": "{}", 151 "settingsSchema": "{}",
152 "dataKeySettingsSchema": "{}", 152 "dataKeySettingsSchema": "{}",
153 - "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}" 153 + "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\":{}}"
154 } 154 }
155 }, 155 },
156 { 156 {
@@ -163,7 +163,7 @@ @@ -163,7 +163,7 @@
163 "resources": [], 163 "resources": [],
164 "templateHtml": "", 164 "templateHtml": "",
165 "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", 165 "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",
166 - "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", 166 + "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",
167 "settingsSchema": "{}", 167 "settingsSchema": "{}",
168 "dataKeySettingsSchema": "{}", 168 "dataKeySettingsSchema": "{}",
169 "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}}" 169 "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}}"
@@ -333,6 +333,7 @@ export default class TbFlot { @@ -333,6 +333,7 @@ export default class TbFlot {
333 lineWidth: 0, 333 lineWidth: 0,
334 fill: 0.9 334 fill: 0.9
335 } 335 }
  336 + ctx.defaultBarWidth = settings.defaultBarWidth || 600;
336 } 337 }
337 338
338 if (this.chartType === 'state') { 339 if (this.chartType === 'state') {
@@ -476,7 +477,11 @@ export default class TbFlot { @@ -476,7 +477,11 @@ export default class TbFlot {
476 this.options.yaxes = angular.copy(this.yaxes); 477 this.options.yaxes = angular.copy(this.yaxes);
477 if (this.chartType === 'line' || this.chartType === 'bar' || this.chartType === 'state') { 478 if (this.chartType === 'line' || this.chartType === 'bar' || this.chartType === 'state') {
478 if (this.chartType === 'bar') { 479 if (this.chartType === 'bar') {
479 - this.options.series.bars.barWidth = this.subscription.timeWindow.interval * 0.6; 480 + if (this.subscription.timeWindowConfig.aggregation && this.subscription.timeWindowConfig.aggregation.type === 'NONE') {
  481 + this.options.series.bars.barWidth = this.ctx.defaultBarWidth;
  482 + } else {
  483 + this.options.series.bars.barWidth = this.subscription.timeWindow.interval * 0.6;
  484 + }
480 } 485 }
481 this.options.xaxis.min = this.subscription.timeWindow.minTime; 486 this.options.xaxis.min = this.subscription.timeWindow.minTime;
482 this.options.xaxis.max = this.subscription.timeWindow.maxTime; 487 this.options.xaxis.max = this.subscription.timeWindow.maxTime;
@@ -594,7 +599,11 @@ export default class TbFlot { @@ -594,7 +599,11 @@ export default class TbFlot {
594 this.options.xaxis.min = this.subscription.timeWindow.minTime; 599 this.options.xaxis.min = this.subscription.timeWindow.minTime;
595 this.options.xaxis.max = this.subscription.timeWindow.maxTime; 600 this.options.xaxis.max = this.subscription.timeWindow.maxTime;
596 if (this.chartType === 'bar') { 601 if (this.chartType === 'bar') {
597 - this.options.series.bars.barWidth = this.subscription.timeWindow.interval * 0.6; 602 + if (this.subscription.timeWindowConfig.aggregation && this.subscription.timeWindowConfig.aggregation.type === 'NONE') {
  603 + this.options.series.bars.barWidth = this.ctx.defaultBarWidth;
  604 + } else {
  605 + this.options.series.bars.barWidth = this.subscription.timeWindow.interval * 0.6;
  606 + }
598 } 607 }
599 608
600 if (axisVisibilityChanged) { 609 if (axisVisibilityChanged) {
@@ -603,7 +612,11 @@ export default class TbFlot { @@ -603,7 +612,11 @@ export default class TbFlot {
603 this.ctx.plot.getOptions().xaxes[0].min = this.subscription.timeWindow.minTime; 612 this.ctx.plot.getOptions().xaxes[0].min = this.subscription.timeWindow.minTime;
604 this.ctx.plot.getOptions().xaxes[0].max = this.subscription.timeWindow.maxTime; 613 this.ctx.plot.getOptions().xaxes[0].max = this.subscription.timeWindow.maxTime;
605 if (this.chartType === 'bar') { 614 if (this.chartType === 'bar') {
606 - this.ctx.plot.getOptions().series.bars.barWidth = this.subscription.timeWindow.interval * 0.6; 615 + if (this.subscription.timeWindowConfig.aggregation && this.subscription.timeWindowConfig.aggregation.type === 'NONE') {
  616 + this.ctx.plot.getOptions().series.bars.barWidth = this.ctx.defaultBarWidth;
  617 + } else {
  618 + this.ctx.plot.getOptions().series.bars.barWidth = this.subscription.timeWindow.interval * 0.6;
  619 + }
607 } 620 }
608 this.updateData(); 621 this.updateData();
609 } 622 }
@@ -810,238 +823,257 @@ export default class TbFlot { @@ -810,238 +823,257 @@ export default class TbFlot {
810 } 823 }
811 } 824 }
812 825
813 - static get settingsSchema() {  
814 - return { 826 + static settingsSchema(chartType) {
  827 +
  828 + var schema = {
815 "schema": { 829 "schema": {
816 "type": "object", 830 "type": "object",
817 "title": "Settings", 831 "title": "Settings",
818 "properties": { 832 "properties": {
819 - "stack": {  
820 - "title": "Stacking",  
821 - "type": "boolean",  
822 - "default": false  
823 - },  
824 - "smoothLines": {  
825 - "title": "Display smooth (curved) lines",  
826 - "type": "boolean",  
827 - "default": false  
828 - },  
829 - "shadowSize": {  
830 - "title": "Shadow size",  
831 - "type": "number",  
832 - "default": 4  
833 - },  
834 - "fontColor": {  
835 - "title": "Font color", 833 + }
  834 + }
  835 + };
  836 +
  837 + var properties = schema["schema"]["properties"];
  838 + properties["stack"] = {
  839 + "title": "Stacking",
  840 + "type": "boolean",
  841 + "default": false
  842 + };
  843 + if (chartType === 'graph') {
  844 + properties["smoothLines"] = {
  845 + "title": "Display smooth (curved) lines",
  846 + "type": "boolean",
  847 + "default": false
  848 + };
  849 + }
  850 + if (chartType === 'bar') {
  851 + properties["defaultBarWidth"] = {
  852 + "title": "Default bar width for non-aggregated data (milliseconds)",
  853 + "type": "number",
  854 + "default": 600
  855 + };
  856 + }
  857 + properties["shadowSize"] = {
  858 + "title": "Shadow size",
  859 + "type": "number",
  860 + "default": 4
  861 + };
  862 + properties["fontColor"] = {
  863 + "title": "Font color",
  864 + "type": "string",
  865 + "default": "#545454"
  866 + };
  867 + properties["fontSize"] = {
  868 + "title": "Font size",
  869 + "type": "number",
  870 + "default": 10
  871 + };
  872 + properties["tooltipIndividual"] = {
  873 + "title": "Hover individual points",
  874 + "type": "boolean",
  875 + "default": false
  876 + };
  877 + properties["tooltipCumulative"] = {
  878 + "title": "Show cumulative values in stacking mode",
  879 + "type": "boolean",
  880 + "default": false
  881 + };
  882 + properties["tooltipValueFormatter"] = {
  883 + "title": "Tooltip value format function, f(value)",
  884 + "type": "string",
  885 + "default": ""
  886 + };
  887 +
  888 + properties["grid"] = {
  889 + "title": "Grid settings",
  890 + "type": "object",
  891 + "properties": {
  892 + "color": {
  893 + "title": "Primary color",
836 "type": "string", 894 "type": "string",
837 "default": "#545454" 895 "default": "#545454"
838 - },  
839 - "fontSize": {  
840 - "title": "Font size", 896 + },
  897 + "backgroundColor": {
  898 + "title": "Background color",
  899 + "type": "string",
  900 + "default": null
  901 + },
  902 + "tickColor": {
  903 + "title": "Ticks color",
  904 + "type": "string",
  905 + "default": "#DDDDDD"
  906 + },
  907 + "outlineWidth": {
  908 + "title": "Grid outline/border width (px)",
841 "type": "number", 909 "type": "number",
842 - "default": 10  
843 - },  
844 - "tooltipIndividual": {  
845 - "title": "Hover individual points", 910 + "default": 1
  911 + },
  912 + "verticalLines": {
  913 + "title": "Show vertical lines",
846 "type": "boolean", 914 "type": "boolean",
847 - "default": false  
848 - },  
849 - "tooltipCumulative": {  
850 - "title": "Show cumulative values in stacking mode", 915 + "default": true
  916 + },
  917 + "horizontalLines": {
  918 + "title": "Show horizontal lines",
851 "type": "boolean", 919 "type": "boolean",
852 - "default": false  
853 - },  
854 - "tooltipValueFormatter": {  
855 - "title": "Tooltip value format function, f(value)",  
856 - "type": "string",  
857 - "default": ""  
858 - },  
859 - "grid": {  
860 - "title": "Grid settings",  
861 - "type": "object",  
862 - "properties": {  
863 - "color": {  
864 - "title": "Primary color",  
865 - "type": "string",  
866 - "default": "#545454"  
867 - },  
868 - "backgroundColor": {  
869 - "title": "Background color",  
870 - "type": "string",  
871 - "default": null  
872 - },  
873 - "tickColor": {  
874 - "title": "Ticks color",  
875 - "type": "string",  
876 - "default": "#DDDDDD"  
877 - },  
878 - "outlineWidth": {  
879 - "title": "Grid outline/border width (px)",  
880 - "type": "number",  
881 - "default": 1  
882 - },  
883 - "verticalLines": {  
884 - "title": "Show vertical lines",  
885 - "type": "boolean",  
886 - "default": true  
887 - },  
888 - "horizontalLines": {  
889 - "title": "Show horizontal lines",  
890 - "type": "boolean",  
891 - "default": true  
892 - }  
893 - }  
894 - },  
895 - "xaxis": {  
896 - "title": "X axis settings",  
897 - "type": "object",  
898 - "properties": {  
899 - "showLabels": {  
900 - "title": "Show labels",  
901 - "type": "boolean",  
902 - "default": true  
903 - },  
904 - "title": {  
905 - "title": "Axis title",  
906 - "type": "string",  
907 - "default": null  
908 - },  
909 - "titleAngle": {  
910 - "title": "Axis title's angle in degrees",  
911 - "type": "number",  
912 - "default": 0  
913 - },  
914 - "color": {  
915 - "title": "Ticks color",  
916 - "type": "string",  
917 - "default": null  
918 - }  
919 - }  
920 - },  
921 - "yaxis": {  
922 - "title": "Y axis settings",  
923 - "type": "object",  
924 - "properties": {  
925 - "min": {  
926 - "title": "Minimum value on the scale",  
927 - "type": "number",  
928 - "default": null  
929 - },  
930 - "max": {  
931 - "title": "Maximum value on the scale",  
932 - "type": "number",  
933 - "default": null  
934 - },  
935 - "showLabels": {  
936 - "title": "Show labels",  
937 - "type": "boolean",  
938 - "default": true  
939 - },  
940 - "title": {  
941 - "title": "Axis title",  
942 - "type": "string",  
943 - "default": null  
944 - },  
945 - "titleAngle": {  
946 - "title": "Axis title's angle in degrees",  
947 - "type": "number",  
948 - "default": 0  
949 - },  
950 - "color": {  
951 - "title": "Ticks color",  
952 - "type": "string",  
953 - "default": null  
954 - },  
955 - "ticksFormatter": {  
956 - "title": "Ticks formatter function, f(value)",  
957 - "type": "string",  
958 - "default": ""  
959 - },  
960 - "tickDecimals": {  
961 - "title": "The number of decimals to display",  
962 - "type": "number",  
963 - "default": 0  
964 - },  
965 - "tickSize": {  
966 - "title": "Step size between ticks",  
967 - "type": "number",  
968 - "default": null  
969 - }  
970 - }  
971 - } 920 + "default": true
  921 + }
  922 + }
  923 + };
  924 +
  925 + properties["xaxis"] = {
  926 + "title": "X axis settings",
  927 + "type": "object",
  928 + "properties": {
  929 + "showLabels": {
  930 + "title": "Show labels",
  931 + "type": "boolean",
  932 + "default": true
972 }, 933 },
973 - "required": []  
974 - },  
975 - "form": [  
976 - "stack",  
977 - "smoothLines",  
978 - "shadowSize", 934 + "title": {
  935 + "title": "Axis title",
  936 + "type": "string",
  937 + "default": null
  938 + },
  939 + "titleAngle": {
  940 + "title": "Axis title's angle in degrees",
  941 + "type": "number",
  942 + "default": 0
  943 + },
  944 + "color": {
  945 + "title": "Ticks color",
  946 + "type": "string",
  947 + "default": null
  948 + }
  949 + }
  950 + };
  951 +
  952 + properties["yaxis"] = {
  953 + "title": "Y axis settings",
  954 + "type": "object",
  955 + "properties": {
  956 + "min": {
  957 + "title": "Minimum value on the scale",
  958 + "type": "number",
  959 + "default": null
  960 + },
  961 + "max": {
  962 + "title": "Maximum value on the scale",
  963 + "type": "number",
  964 + "default": null
  965 + },
  966 + "showLabels": {
  967 + "title": "Show labels",
  968 + "type": "boolean",
  969 + "default": true
  970 + },
  971 + "title": {
  972 + "title": "Axis title",
  973 + "type": "string",
  974 + "default": null
  975 + },
  976 + "titleAngle": {
  977 + "title": "Axis title's angle in degrees",
  978 + "type": "number",
  979 + "default": 0
  980 + },
  981 + "color": {
  982 + "title": "Ticks color",
  983 + "type": "string",
  984 + "default": null
  985 + },
  986 + "ticksFormatter": {
  987 + "title": "Ticks formatter function, f(value)",
  988 + "type": "string",
  989 + "default": ""
  990 + },
  991 + "tickDecimals": {
  992 + "title": "The number of decimals to display",
  993 + "type": "number",
  994 + "default": 0
  995 + },
  996 + "tickSize": {
  997 + "title": "Step size between ticks",
  998 + "type": "number",
  999 + "default": null
  1000 + }
  1001 + }
  1002 + };
  1003 +
  1004 + schema["schema"]["required"] = [];
  1005 + schema["form"] = ["stack"];
  1006 + if (chartType === 'graph') {
  1007 + schema["form"].push("smoothLines");
  1008 + }
  1009 + if (chartType === 'bar') {
  1010 + schema["form"].push("defaultBarWidth");
  1011 + }
  1012 + schema["form"].push("shadowSize");
  1013 + schema["form"].push({
  1014 + "key": "fontColor",
  1015 + "type": "color"
  1016 + });
  1017 + schema["form"].push("fontSize");
  1018 + schema["form"].push("tooltipIndividual");
  1019 + schema["form"].push("tooltipCumulative");
  1020 + schema["form"].push({
  1021 + "key": "tooltipValueFormatter",
  1022 + "type": "javascript"
  1023 + });
  1024 + schema["form"].push({
  1025 + "key": "grid",
  1026 + "items": [
979 { 1027 {
980 - "key": "fontColor", 1028 + "key": "grid.color",
981 "type": "color" 1029 "type": "color"
982 }, 1030 },
983 - "fontSize",  
984 - "tooltipIndividual",  
985 - "tooltipCumulative",  
986 { 1031 {
987 - "key": "tooltipValueFormatter",  
988 - "type": "javascript" 1032 + "key": "grid.backgroundColor",
  1033 + "type": "color"
989 }, 1034 },
990 { 1035 {
991 - "key": "grid",  
992 - "items": [  
993 - {  
994 - "key": "grid.color",  
995 - "type": "color"  
996 - },  
997 - {  
998 - "key": "grid.backgroundColor",  
999 - "type": "color"  
1000 - },  
1001 - {  
1002 - "key": "grid.tickColor",  
1003 - "type": "color"  
1004 - },  
1005 - "grid.outlineWidth",  
1006 - "grid.verticalLines",  
1007 - "grid.horizontalLines"  
1008 - ] 1036 + "key": "grid.tickColor",
  1037 + "type": "color"
1009 }, 1038 },
  1039 + "grid.outlineWidth",
  1040 + "grid.verticalLines",
  1041 + "grid.horizontalLines"
  1042 + ]
  1043 + });
  1044 + schema["form"].push({
  1045 + "key": "xaxis",
  1046 + "items": [
  1047 + "xaxis.showLabels",
  1048 + "xaxis.title",
  1049 + "xaxis.titleAngle",
1010 { 1050 {
1011 - "key": "xaxis",  
1012 - "items": [  
1013 - "xaxis.showLabels",  
1014 - "xaxis.title",  
1015 - "xaxis.titleAngle",  
1016 - {  
1017 - "key": "xaxis.color",  
1018 - "type": "color"  
1019 - }  
1020 - ] 1051 + "key": "xaxis.color",
  1052 + "type": "color"
  1053 + }
  1054 + ]
  1055 + });
  1056 + schema["form"].push({
  1057 + "key": "yaxis",
  1058 + "items": [
  1059 + "yaxis.min",
  1060 + "yaxis.max",
  1061 + "yaxis.tickDecimals",
  1062 + "yaxis.tickSize",
  1063 + "yaxis.showLabels",
  1064 + "yaxis.title",
  1065 + "yaxis.titleAngle",
  1066 + {
  1067 + "key": "yaxis.color",
  1068 + "type": "color"
1021 }, 1069 },
1022 { 1070 {
1023 - "key": "yaxis",  
1024 - "items": [  
1025 - "yaxis.min",  
1026 - "yaxis.max",  
1027 - "yaxis.tickDecimals",  
1028 - "yaxis.tickSize",  
1029 - "yaxis.showLabels",  
1030 - "yaxis.title",  
1031 - "yaxis.titleAngle",  
1032 - {  
1033 - "key": "yaxis.color",  
1034 - "type": "color"  
1035 - },  
1036 - {  
1037 - "key": "yaxis.ticksFormatter",  
1038 - "type": "javascript"  
1039 - }  
1040 - ] 1071 + "key": "yaxis.ticksFormatter",
  1072 + "type": "javascript"
1041 } 1073 }
1042 -  
1043 ] 1074 ]
1044 - } 1075 + });
  1076 + return schema;
1045 } 1077 }
1046 1078
1047 static get pieDatakeySettingsSchema() { 1079 static get pieDatakeySettingsSchema() {