Commit 58cbb1165c276c211b865d6912e2e21262f127a7

Authored by Igor Kulikov
Committed by mp-loki
1 parent 148e4ae7

TB-46: Add option to make flot time-series graphs smooth

... ... @@ -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({
... ...