Commit 58cbb1165c276c211b865d6912e2e21262f127a7
Committed by
mp-loki
1 parent
148e4ae7
TB-46: Add option to make flot time-series graphs smooth
Showing
2 changed files
with
23 additions
and
2 deletions
... | ... | @@ -49,6 +49,7 @@ |
49 | 49 | "clipboard": "^1.5.15", |
50 | 50 | "compass-sass-mixins": "^0.12.7", |
51 | 51 | "flot": "git://github.com/flot/flot.git#0.9-work", |
52 | + "flot-curvedlines": "git://github.com/MichaelZinsmaier/CurvedLines.git#master", | |
52 | 53 | "font-awesome": "^4.6.3", |
53 | 54 | "javascript-detect-element-resize": "^0.5.3", |
54 | 55 | "jquery": "^3.1.0", | ... | ... |
... | ... | @@ -24,6 +24,7 @@ import 'flot/src/plugins/jquery.flot.selection'; |
24 | 24 | import 'flot/src/plugins/jquery.flot.pie'; |
25 | 25 | import 'flot/src/plugins/jquery.flot.crosshair'; |
26 | 26 | import 'flot/src/plugins/jquery.flot.stack'; |
27 | +import 'flot.curvedlines/curvedLines'; | |
27 | 28 | |
28 | 29 | /* eslint-disable angular/angularelement */ |
29 | 30 | export default class TbFlot { |
... | ... | @@ -31,6 +32,7 @@ export default class TbFlot { |
31 | 32 | |
32 | 33 | this.ctx = ctx; |
33 | 34 | this.chartType = chartType || 'line'; |
35 | + var settings = ctx.settings; | |
34 | 36 | |
35 | 37 | var colors = []; |
36 | 38 | for (var i = 0; i < ctx.data.length; i++) { |
... | ... | @@ -53,6 +55,12 @@ export default class TbFlot { |
53 | 55 | series.points.radius = 3; |
54 | 56 | } |
55 | 57 | |
58 | + if (this.chartType === 'line' && settings.smoothLines && !series.points.show) { | |
59 | + series.curvedLines = { | |
60 | + apply: true | |
61 | + } | |
62 | + } | |
63 | + | |
56 | 64 | var lineColor = tinycolor(series.dataKey.color); |
57 | 65 | lineColor.setAlpha(.75); |
58 | 66 | |
... | ... | @@ -160,7 +168,6 @@ export default class TbFlot { |
160 | 168 | }; |
161 | 169 | } |
162 | 170 | |
163 | - var settings = ctx.settings; | |
164 | 171 | ctx.trackDecimals = angular.isDefined(settings.decimals) ? |
165 | 172 | settings.decimals : ctx.decimals; |
166 | 173 | |
... | ... | @@ -268,6 +275,13 @@ export default class TbFlot { |
268 | 275 | stack: settings.stack === true |
269 | 276 | } |
270 | 277 | |
278 | + if (this.chartType === 'line' && settings.smoothLines) { | |
279 | + options.series.curvedLines = { | |
280 | + active: true, | |
281 | + monotonicFit: true | |
282 | + } | |
283 | + } | |
284 | + | |
271 | 285 | if (this.chartType === 'bar') { |
272 | 286 | options.series.lines = { |
273 | 287 | show: false, |
... | ... | @@ -473,6 +487,11 @@ export default class TbFlot { |
473 | 487 | "type": "boolean", |
474 | 488 | "default": false |
475 | 489 | }, |
490 | + "smoothLines": { | |
491 | + "title": "Display smooth (curved) lines", | |
492 | + "type": "boolean", | |
493 | + "default": false | |
494 | + }, | |
476 | 495 | "shadowSize": { |
477 | 496 | "title": "Shadow size", |
478 | 497 | "type": "number", |
... | ... | @@ -591,6 +610,7 @@ export default class TbFlot { |
591 | 610 | }, |
592 | 611 | "form": [ |
593 | 612 | "stack", |
613 | + "smoothLines", | |
594 | 614 | "shadowSize", |
595 | 615 | { |
596 | 616 | "key": "fontColor", |
... | ... | @@ -910,7 +930,7 @@ export default class TbFlot { |
910 | 930 | value = series.data[hoverIndex][1]; |
911 | 931 | } |
912 | 932 | |
913 | - if (series.stack) { | |
933 | + if (series.stack || (series.curvedLines && series.curvedLines.apply)) { | |
914 | 934 | hoverIndex = this.findHoverIndexFromDataPoints(pos.x, series, hoverIndex); |
915 | 935 | } |
916 | 936 | results.seriesHover.push({ | ... | ... |