adding stepped line to line and area charts

elastic · Dec 14, 2016 · be913a4 · be913a4
1 parent fa6d074
commit be913a4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 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
@@ -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
@@ -1,7 +1,11 @@
 <div>
   <label>
-    <input type="checkbox" value="{{smoothLines}}" ng-model="vis.params.smoothLines" name="smoothLines"
-           ng-checked="vis.params.smoothLines">
-    Smooth Lines
+    Line Mode
   </label>
+  <select
+    class="form-control"
+    ng-model="vis.params.interpolate"
+    ng-options="mode.value as mode.text for mode in vis.type.params.interpolationModes"
+  >
+  </select>
 </div>
diff --git 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
@@ -4,15 +4,17 @@ 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) => {
         return {
           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
@@ -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')