From 8e2dfc3ea4856f677f52090f2e1890cb4d2181a1 Mon Sep 17 00:00:00 2001 From: oleg Date: Fri, 29 Dec 2017 10:35:53 +0200 Subject: [PATCH 1/3] "Timeseries - Flot" widget improvements --- ui/src/app/widget/lib/flot-widget.js | 79 +++++++++++++++++----------- 1 file changed, 49 insertions(+), 30 deletions(-) diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js index 59787cf920..4e5f99f919 100644 --- a/ui/src/app/widget/lib/flot-widget.js +++ b/ui/src/app/widget/lib/flot-widget.js @@ -238,19 +238,30 @@ export default class TbFlot { if (this.ticksFormatterFunction) { return this.ticksFormatterFunction(value); } - var factor = this.tickDecimals ? Math.pow(10, this.tickDecimals) : 1, - formatted = "" + Math.round(value * factor) / factor; - if (this.tickDecimals != null) { - var decimal = formatted.indexOf("."), - precision = decimal === -1 ? 0 : formatted.length - decimal - 1; - - if (precision < this.tickDecimals) { - formatted = (precision ? formatted : formatted + ".") + ("" + factor).substr(1, this.tickDecimals - precision); - } + if (this.tickDecimals) { + value = value.toFixed(this.tickDecimals); } - formatted += ' ' + this.tickUnits; - return formatted; - } + if (this.tickUnits) { + value = value + ' ' + this.tickUnits; + } + if (this.tickSize) { + return value; + } + + // var factor = this.tickDecimals ? Math.pow(10, this.tickDecimals) : 1, + // formatted = "" + Math.round(value * factor) / factor; + // if (this.tickDecimals != null) { + // var decimal = formatted.indexOf("."), + // precision = decimal === -1 ? 0 : formatted.length - decimal - 1; + // + // if (precision < this.tickDecimals) { + // formatted = (precision ? formatted : formatted + ".") + ("" + factor).substr(1, this.tickDecimals - precision); + // } + // } + // formatted += ' ' + this.tickUnits; + return value; + + }; this.yaxis.tickFormatter = ctx.yAxisTickFormatter; @@ -262,6 +273,8 @@ export default class TbFlot { this.yaxis.labelFont.color = this.yaxis.font.color; this.yaxis.labelFont.size = this.yaxis.font.size+2; this.yaxis.labelFont.weight = "bold"; + this.yaxis.tickSize = settings.yaxis.tickSize || null; + this.yaxis.tickDecimals = settings.yaxis.tickDecimals || null; if (settings.yaxis.ticksFormatter && settings.yaxis.ticksFormatter.length) { try { this.yaxis.ticksFormatterFunction = new Function('value', settings.yaxis.ticksFormatter); @@ -489,7 +502,7 @@ export default class TbFlot { var yaxis = angular.copy(this.yaxis); var label = keySettings.axisTitle && keySettings.axisTitle.length ? keySettings.axisTitle : yaxis.label; - var tickDecimals = angular.isDefined(keySettings.axisTickDecimals) ? keySettings.axisTickDecimals : 0; + //var tickDecimals = angular.isDefined(keySettings.axisTickDecimals) ? keySettings.axisTickDecimals : 0; var position = keySettings.axisPosition && keySettings.axisPosition.length ? keySettings.axisPosition : "left"; var min = angular.isDefined(keySettings.axisMin) ? keySettings.axisMin : yaxis.min; @@ -499,7 +512,6 @@ export default class TbFlot { yaxis.min = min; yaxis.max = max; yaxis.tickUnits = units; - yaxis.tickDecimals = tickDecimals; yaxis.alignTicksWithAxis = position == "right" ? 1 : null; yaxis.position = position; @@ -904,6 +916,11 @@ export default class TbFlot { "type": "number", "default": null }, + "tickSize": { + "title": "Step size between ticks", + "type": "number", + "default": null + }, "showLabels": { "title": "Show labels", "type": "boolean", @@ -928,7 +945,13 @@ export default class TbFlot { "title": "Ticks formatter function, f(value)", "type": "string", "default": "" + }, + "tickDecimals": { + "title": "The number of decimals to display", + "type": "number", + "default": 0 } + } } }, @@ -986,6 +1009,8 @@ export default class TbFlot { "items": [ "yaxis.min", "yaxis.max", + "yaxis.tickSize", + "yaxis.tickDecimals", "yaxis.showLabels", "yaxis.title", "yaxis.titleAngle", @@ -1010,24 +1035,24 @@ export default class TbFlot { static datakeySettingsSchema(defaultShowLines) { return { - "schema": { + "schema": { "type": "object", - "title": "DataKeySettings", - "properties": { + "title": "DataKeySettings", + "properties": { "showLines": { "title": "Show lines", - "type": "boolean", - "default": defaultShowLines + "type": "boolean", + "default": defaultShowLines }, "fillLines": { "title": "Fill lines", - "type": "boolean", - "default": false + "type": "boolean", + "default": false }, "showPoints": { "title": "Show points", - "type": "boolean", - "default": false + "type": "boolean", + "default": false }, "tooltipValueFormatter": { "title": "Tooltip value format function, f(value)", @@ -1054,11 +1079,6 @@ export default class TbFlot { "type": "string", "default": "" }, - "axisTickDecimals": { - "title": "Axis tick number of digits after floating point", - "type": "number", - "default": 0 - }, "axisPosition": { "title": "Axis position", "type": "string", @@ -1072,7 +1092,7 @@ export default class TbFlot { }, "required": ["showLines", "fillLines", "showPoints"] }, - "form": [ + "form": [ "showLines", "fillLines", "showPoints", @@ -1084,7 +1104,6 @@ export default class TbFlot { "axisMin", "axisMax", "axisTitle", - "axisTickDecimals", { "key": "axisPosition", "type": "rc-select", From c683b9c076df5e39d2814ce8adb27dcf0622ec64 Mon Sep 17 00:00:00 2001 From: oleg Date: Wed, 10 Jan 2018 13:31:49 +0200 Subject: [PATCH 2/3] UI:Fix 'Timeseries - Flot' widget (the legend breaks tooltips) --- ui/src/app/widget/lib/flot-widget.js | 81 ++++++++++++++++++---------- 1 file changed, 53 insertions(+), 28 deletions(-) diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js index 4e5f99f919..981cdd1e5b 100644 --- a/ui/src/app/widget/lib/flot-widget.js +++ b/ui/src/app/widget/lib/flot-widget.js @@ -238,29 +238,23 @@ export default class TbFlot { if (this.ticksFormatterFunction) { return this.ticksFormatterFunction(value); } - if (this.tickDecimals) { - value = value.toFixed(this.tickDecimals); + if (angular.isNumber(this.tickDecimals)) { + var factor = this.tickDecimals ? Math.pow(10, this.tickDecimals) : 1, + formatted = "" + Math.round(value * factor) / factor; + if (this.tickDecimals != null) { + var decimal = formatted.indexOf("."), + precision = decimal === -1 ? 0 : formatted.length - decimal - 1; + + if (precision < this.tickDecimals) { + value = (precision ? formatted : formatted + ".") + ("" + factor).substr(1, this.tickDecimals - precision); + } + } } if (this.tickUnits) { value = value + ' ' + this.tickUnits; } - if (this.tickSize) { - return value; - } - // var factor = this.tickDecimals ? Math.pow(10, this.tickDecimals) : 1, - // formatted = "" + Math.round(value * factor) / factor; - // if (this.tickDecimals != null) { - // var decimal = formatted.indexOf("."), - // precision = decimal === -1 ? 0 : formatted.length - decimal - 1; - // - // if (precision < this.tickDecimals) { - // formatted = (precision ? formatted : formatted + ".") + ("" + factor).substr(1, this.tickDecimals - precision); - // } - // } - // formatted += ' ' + this.tickUnits; return value; - }; this.yaxis.tickFormatter = ctx.yAxisTickFormatter; @@ -273,8 +267,16 @@ export default class TbFlot { this.yaxis.labelFont.color = this.yaxis.font.color; this.yaxis.labelFont.size = this.yaxis.font.size+2; this.yaxis.labelFont.weight = "bold"; - this.yaxis.tickSize = settings.yaxis.tickSize || null; - this.yaxis.tickDecimals = settings.yaxis.tickDecimals || null; + if (angular.isNumber(settings.yaxis.tickSize)) { + this.yaxis.tickSize = settings.yaxis.tickSize; + } else { + this.yaxis.tickSize = null; + } + if (angular.isNumber(settings.yaxis.tickDecimals)) { + this.yaxis.tickDecimals = settings.yaxis.tickDecimals + } else { + this.yaxis.tickDecimals = null; + } if (settings.yaxis.ticksFormatter && settings.yaxis.ticksFormatter.length) { try { this.yaxis.ticksFormatterFunction = new Function('value', settings.yaxis.ticksFormatter); @@ -500,9 +502,19 @@ export default class TbFlot { createYAxis(keySettings, units) { var yaxis = angular.copy(this.yaxis); + var tickDecimals, tickSize; var label = keySettings.axisTitle && keySettings.axisTitle.length ? keySettings.axisTitle : yaxis.label; - //var tickDecimals = angular.isDefined(keySettings.axisTickDecimals) ? keySettings.axisTickDecimals : 0; + if (angular.isNumber(keySettings.axisTickDecimals)) { + tickDecimals = keySettings.axisTickDecimals; + } else { + tickDecimals = yaxis.tickDecimals; + } + if (angular.isNumber(keySettings.axisTickSize)) { + tickSize = keySettings.axisTickSize; + } else { + tickSize = yaxis.tickSize; + } var position = keySettings.axisPosition && keySettings.axisPosition.length ? keySettings.axisPosition : "left"; var min = angular.isDefined(keySettings.axisMin) ? keySettings.axisMin : yaxis.min; @@ -512,6 +524,8 @@ export default class TbFlot { yaxis.min = min; yaxis.max = max; yaxis.tickUnits = units; + yaxis.tickDecimals = tickDecimals; + yaxis.tickSize = tickSize; yaxis.alignTicksWithAxis = position == "right" ? 1 : null; yaxis.position = position; @@ -557,7 +571,7 @@ export default class TbFlot { } } yaxis.hidden = hidden; - var newIndex = -1; + var newIndex = 1; if (!yaxis.hidden) { this.options.yaxes.push(yaxis); newIndex = this.options.yaxes.length; @@ -916,11 +930,6 @@ export default class TbFlot { "type": "number", "default": null }, - "tickSize": { - "title": "Step size between ticks", - "type": "number", - "default": null - }, "showLabels": { "title": "Show labels", "type": "boolean", @@ -950,8 +959,12 @@ export default class TbFlot { "title": "The number of decimals to display", "type": "number", "default": 0 + }, + "tickSize": { + "title": "Step size between ticks", + "type": "number", + "default": null } - } } }, @@ -1009,8 +1022,8 @@ export default class TbFlot { "items": [ "yaxis.min", "yaxis.max", - "yaxis.tickSize", "yaxis.tickDecimals", + "yaxis.tickSize", "yaxis.showLabels", "yaxis.title", "yaxis.titleAngle", @@ -1079,6 +1092,16 @@ export default class TbFlot { "type": "string", "default": "" }, + "axisTickDecimals": { + "title": "Axis tick number of digits after floating point", + "type": "number", + "default": 0 + }, + "axisTickSize": { + "title": "Axis step size between ticks", + "type": "number", + "default": null + }, "axisPosition": { "title": "Axis position", "type": "string", @@ -1104,6 +1127,8 @@ export default class TbFlot { "axisMin", "axisMax", "axisTitle", + "axisTickDecimals", + "axisTickSize", { "key": "axisPosition", "type": "rc-select", From ec6b926219b86d8c9ba1707e829d47eeae5505fe Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 19 Jan 2018 18:59:57 +0200 Subject: [PATCH 3/3] Update flot-widget.js --- ui/src/app/widget/lib/flot-widget.js | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js index 981cdd1e5b..718da76e9d 100644 --- a/ui/src/app/widget/lib/flot-widget.js +++ b/ui/src/app/widget/lib/flot-widget.js @@ -238,23 +238,22 @@ export default class TbFlot { if (this.ticksFormatterFunction) { return this.ticksFormatterFunction(value); } - if (angular.isNumber(this.tickDecimals)) { - var factor = this.tickDecimals ? Math.pow(10, this.tickDecimals) : 1, - formatted = "" + Math.round(value * factor) / factor; - if (this.tickDecimals != null) { - var decimal = formatted.indexOf("."), - precision = decimal === -1 ? 0 : formatted.length - decimal - 1; - if (precision < this.tickDecimals) { - value = (precision ? formatted : formatted + ".") + ("" + factor).substr(1, this.tickDecimals - precision); - } + var factor = this.tickDecimals ? Math.pow(10, this.tickDecimals) : 1, + formatted = "" + Math.round(value * factor) / factor; + if (this.tickDecimals != null) { + var decimal = formatted.indexOf("."), + precision = decimal === -1 ? 0 : formatted.length - decimal - 1; + + if (precision < this.tickDecimals) { + formatted = (precision ? formatted : formatted + ".") + ("" + factor).substr(1, this.tickDecimals - precision); } } if (this.tickUnits) { - value = value + ' ' + this.tickUnits; + formatted += ' ' + this.tickUnits; } - - return value; + + return formatted; }; this.yaxis.tickFormatter = ctx.yAxisTickFormatter; @@ -1445,4 +1444,4 @@ export default class TbFlot { } } -/* eslint-enable angular/angularelement */ \ No newline at end of file +/* eslint-enable angular/angularelement */