diff --git a/ui/package.json b/ui/package.json index 6e5e6eac19..5f00611bff 100644 --- a/ui/package.json +++ b/ui/package.json @@ -49,6 +49,7 @@ "clipboard": "^1.5.15", "compass-sass-mixins": "^0.12.7", "flot": "git://github.com/flot/flot.git#0.9-work", + "flot-curvedlines": "git://github.com/MichaelZinsmaier/CurvedLines.git#master", "font-awesome": "^4.6.3", "javascript-detect-element-resize": "^0.5.3", "jquery": "^3.1.0", diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js index 446881de8b..4cc2192bea 100644 --- a/ui/src/app/widget/lib/flot-widget.js +++ b/ui/src/app/widget/lib/flot-widget.js @@ -24,6 +24,7 @@ import 'flot/src/plugins/jquery.flot.selection'; import 'flot/src/plugins/jquery.flot.pie'; import 'flot/src/plugins/jquery.flot.crosshair'; import 'flot/src/plugins/jquery.flot.stack'; +import 'flot.curvedlines/curvedLines'; /* eslint-disable angular/angularelement */ export default class TbFlot { @@ -31,6 +32,7 @@ export default class TbFlot { this.ctx = ctx; this.chartType = chartType || 'line'; + var settings = ctx.settings; var colors = []; for (var i = 0; i < ctx.data.length; i++) { @@ -53,6 +55,12 @@ export default class TbFlot { series.points.radius = 3; } + if (this.chartType === 'line' && settings.smoothLines && !series.points.show) { + series.curvedLines = { + apply: true + } + } + var lineColor = tinycolor(series.dataKey.color); lineColor.setAlpha(.75); @@ -160,7 +168,6 @@ export default class TbFlot { }; } - var settings = ctx.settings; ctx.trackDecimals = angular.isDefined(settings.decimals) ? settings.decimals : ctx.decimals; @@ -268,6 +275,13 @@ export default class TbFlot { stack: settings.stack === true } + if (this.chartType === 'line' && settings.smoothLines) { + options.series.curvedLines = { + active: true, + monotonicFit: true + } + } + if (this.chartType === 'bar') { options.series.lines = { show: false, @@ -473,6 +487,11 @@ export default class TbFlot { "type": "boolean", "default": false }, + "smoothLines": { + "title": "Display smooth (curved) lines", + "type": "boolean", + "default": false + }, "shadowSize": { "title": "Shadow size", "type": "number", @@ -591,6 +610,7 @@ export default class TbFlot { }, "form": [ "stack", + "smoothLines", "shadowSize", { "key": "fontColor", @@ -910,7 +930,7 @@ export default class TbFlot { value = series.data[hoverIndex][1]; } - if (series.stack) { + if (series.stack || (series.curvedLines && series.curvedLines.apply)) { hoverIndex = this.findHoverIndexFromDataPoints(pos.x, series, hoverIndex); } results.seriesHover.push({