From be913a4a31572a58207d3ed0fac154275a870e5a Mon Sep 17 00:00:00 2001 From: ppisljar Date: Fri, 9 Dec 2016 15:59:16 +0100 Subject: [PATCH 1/4] adding stepped line to line and area charts --- src/core_plugins/kbn_vislib_vis_types/public/area.js | 11 ++++++++++- .../public/controls/line_interpolation_option.html | 10 +++++++--- src/core_plugins/kbn_vislib_vis_types/public/line.js | 11 ++++++++++- src/ui/public/vislib/lib/types/point_series.js | 6 ++++-- .../vislib/visualizations/point_series/line_chart.js | 3 +-- 5 files changed, 32 insertions(+), 9 deletions(-) diff --git a/src/core_plugins/kbn_vislib_vis_types/public/area.js b/src/core_plugins/kbn_vislib_vis_types/public/area.js index 8f3e37ce94b63..b4b9a42453318 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/area.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/area.js @@ -19,7 +19,6 @@ export default function HistogramVisType(Private) { addTooltip: true, addLegend: true, legendPosition: 'right', - smoothLines: false, scale: 'linear', interpolate: 'linear', mode: 'stacked', @@ -41,6 +40,16 @@ export default function HistogramVisType(Private) { value: 'bottom', text: 'bottom', }], + interpolationModes: [{ + value: 'linear', + text: 'normal', + }, { + value: 'cardinal', + text: 'smoothed', + }, { + value: 'step-after', + text: 'stepped', + }], scales: ['linear', 'log', 'square root'], modes: ['stacked', 'overlap', 'percentage', 'wiggle', 'silhouette'], editor: areaTemplate diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html index ce8b59410c292..1927727a4a42c 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html @@ -1,7 +1,11 @@
+
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/line.js b/src/core_plugins/kbn_vislib_vis_types/public/line.js index 24090e8cd892d..43986108e0a49 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/line.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/line.js @@ -18,7 +18,6 @@ export default function HistogramVisType(Private) { addLegend: true, legendPosition: 'right', showCircles: true, - smoothLines: false, interpolate: 'linear', scale: 'linear', drawLinesBetweenPoints: true, @@ -41,6 +40,16 @@ export default function HistogramVisType(Private) { value: 'bottom', text: 'bottom', }], + interpolationModes: [{ + value: 'linear', + text: 'normal', + }, { + value: 'cardinal', + text: 'smoothed', + }, { + value: 'step-after', + text: 'stepped', + }], scales: ['linear', 'log', 'square root'], editor: lineTemplate }, diff --git a/src/ui/public/vislib/lib/types/point_series.js b/src/ui/public/vislib/lib/types/point_series.js index e59695fda7745..17d0f1e2c83a9 100644 --- a/src/ui/public/vislib/lib/types/point_series.js +++ b/src/ui/public/vislib/lib/types/point_series.js @@ -4,6 +4,9 @@ export default function ColumnHandler(Private) { const createSeries = (cfg, series) => { const stacked = ['stacked', 'percentage', 'wiggle', 'silhouette'].includes(cfg.mode); + let interpolate = cfg.interpolate; + if (cfg.smoothLines) interpolate = 'cardinal'; + return { type: 'point_series', series: _.map(series, (seri) => { @@ -11,8 +14,7 @@ export default function ColumnHandler(Private) { show: true, type: cfg.type || 'line', mode: stacked ? 'stacked' : 'normal', - interpolate: cfg.interpolate, - smoothLines: cfg.smoothLines, + interpolate: interpolate, drawLinesBetweenPoints: cfg.drawLinesBetweenPoints, showCircles: cfg.showCircles, radiusRatio: cfg.radiusRatio, diff --git a/src/ui/public/vislib/visualizations/point_series/line_chart.js b/src/ui/public/vislib/visualizations/point_series/line_chart.js index aad856d0be7d6..37ddad59f4900 100644 --- a/src/ui/public/vislib/visualizations/point_series/line_chart.js +++ b/src/ui/public/vislib/visualizations/point_series/line_chart.js @@ -10,7 +10,6 @@ export default function LineChartFactory(Private) { showCircles: true, radiusRatio: 9, showLines: true, - smoothLines: false, interpolate: 'linear', color: undefined, fillColor: undefined @@ -142,7 +141,7 @@ export default function LineChartFactory(Private) { const xAxisFormatter = this.handler.data.get('xAxisFormatter'); const color = this.handler.data.getColorFunc(); const ordered = this.handler.data.get('ordered'); - const interpolate = (this.seriesConfig.smoothLines) ? 'cardinal' : this.seriesConfig.interpolate; + const interpolate = this.seriesConfig.interpolate; const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal(); const line = svg.append('g') From 1a285e35d119e760c46614696e6ac7d29fa837e7 Mon Sep 17 00:00:00 2001 From: ppisljar Date: Wed, 14 Dec 2016 09:27:50 +0100 Subject: [PATCH 2/4] fixing based on Thomas' review --- src/core_plugins/kbn_vislib_vis_types/public/area.js | 2 +- src/core_plugins/kbn_vislib_vis_types/public/line.js | 2 +- src/ui/public/vislib/lib/types/point_series.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/core_plugins/kbn_vislib_vis_types/public/area.js b/src/core_plugins/kbn_vislib_vis_types/public/area.js index b4b9a42453318..15db616bf203b 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/area.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/area.js @@ -42,7 +42,7 @@ export default function HistogramVisType(Private) { }], interpolationModes: [{ value: 'linear', - text: 'normal', + text: 'straight', }, { value: 'cardinal', text: 'smoothed', diff --git a/src/core_plugins/kbn_vislib_vis_types/public/line.js b/src/core_plugins/kbn_vislib_vis_types/public/line.js index 43986108e0a49..0576ec45a9a6b 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/line.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/line.js @@ -42,7 +42,7 @@ export default function HistogramVisType(Private) { }], interpolationModes: [{ value: 'linear', - text: 'normal', + text: 'straight', }, { value: 'cardinal', text: 'smoothed', diff --git a/src/ui/public/vislib/lib/types/point_series.js b/src/ui/public/vislib/lib/types/point_series.js index 17d0f1e2c83a9..66a97b2ad17b5 100644 --- a/src/ui/public/vislib/lib/types/point_series.js +++ b/src/ui/public/vislib/lib/types/point_series.js @@ -5,6 +5,7 @@ export default function ColumnHandler(Private) { const createSeries = (cfg, series) => { const stacked = ['stacked', 'percentage', 'wiggle', 'silhouette'].includes(cfg.mode); let interpolate = cfg.interpolate; + // for backward compatibility when loading URLs or configs we need to check smoothLines if (cfg.smoothLines) interpolate = 'cardinal'; return { From 03a0e9f43903bb5f7a95d7d7637cb18a16948738 Mon Sep 17 00:00:00 2001 From: ppisljar Date: Mon, 19 Dec 2016 12:04:04 +0100 Subject: [PATCH 3/4] updating docs --- docs/visualize/area.asciidoc | 2 +- docs/visualize/line.asciidoc | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/visualize/area.asciidoc b/docs/visualize/area.asciidoc index 907a7aa2c062c..a0124c67e4cd9 100644 --- a/docs/visualize/area.asciidoc +++ b/docs/visualize/area.asciidoc @@ -61,7 +61,7 @@ _silhouette_:: Displays each aggregation as variance from a central line. Checkboxes are available to enable and disable the following behaviors: -*Smooth Lines*:: Check this box to curve the top boundary of the area from point to point. +*Line Mode*:: You can choose between straight line, smoothed line and stepped line. *Set Y-Axis Extents*:: Check this box and enter values in the *y-max* and *y-min* fields to set the Y axis to specific values. *Scale Y-Axis to Data Bounds*:: The default Y axis bounds are zero and the maximum value returned in the data. Check diff --git a/docs/visualize/line.asciidoc b/docs/visualize/line.asciidoc index dd5f05a5204f4..490b6bcb95d5f 100644 --- a/docs/visualize/line.asciidoc +++ b/docs/visualize/line.asciidoc @@ -38,8 +38,7 @@ regularize the display of data sets with variabilities that are themselves highl the variability is itself variable over the domain being examined, is known as _heteroscedastic_ data. For example, if a data set of height versus weight has a relatively narrow range of variability at the short end of height, but a wider range at the taller end, the data set is heteroscedastic. -*Smooth Lines*:: Check this box to curve the line from point to point. Bear in mind that smoothed lines necessarily -affect the representation of your data and create a potential for ambiguity. +*Line Mode*:: You can choose between straight line, smoothed line and stepped line. *Show Connecting Lines*:: Check this box to draw lines between the points on the chart. *Show Circles*:: Check this box to draw each data point on the chart as a small circle. *Current time marker*:: For charts of time-series data, check this box to draw a red line on the current time. From 2f86249f5ee9500ded48a3f53aa611699fc6dda7 Mon Sep 17 00:00:00 2001 From: ppisljar Date: Fri, 23 Dec 2016 16:04:34 +0100 Subject: [PATCH 4/4] fixing based on Brandons review --- src/ui/public/vislib/visualizations/point_series/area_chart.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/ui/public/vislib/visualizations/point_series/area_chart.js b/src/ui/public/vislib/visualizations/point_series/area_chart.js index bc8c0e4e93646..9fffb6b711373 100644 --- a/src/ui/public/vislib/visualizations/point_series/area_chart.js +++ b/src/ui/public/vislib/visualizations/point_series/area_chart.js @@ -11,7 +11,6 @@ export default function AreaChartFactory(Private) { showCircles: true, radiusRatio: 9, showLines: true, - smoothLines: false, interpolate: 'linear', color: undefined, fillColor: undefined, @@ -68,7 +67,7 @@ export default function AreaChartFactory(Private) { const color = this.handler.data.getColorFunc(); const xScale = this.getCategoryAxis().getScale(); const yScale = this.getValueAxis().getScale(); - const interpolate = (this.seriesConfig.smoothLines) ? 'cardinal' : this.seriesConfig.interpolate; + const interpolate = this.seriesConfig.interpolate; const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal(); // Data layers