adding stepped line to line and area charts (#9425)

* adding stepped line to line and area charts

* fixing based on Thomas' review

* updating docs

* fixing based on Brandons review

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

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.

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: 'straight',
+      }, {
+        value: 'cardinal',
+        text: 'smoothed',
+      }, {
+        value: 'step-after',
+        text: 'stepped',
+      }],
       scales: ['linear', 'log', 'square root'],
       modes: ['stacked', 'overlap', 'percentage', 'wiggle', 'silhouette'],
       editor: areaTemplate

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>

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: 'straight',
+      }, {
+        value: 'cardinal',
+        text: 'smoothed',
+      }, {
+        value: 'step-after',
+        text: 'stepped',
+      }],
       scales: ['linear', 'log', 'square root'],
       editor: lineTemplate
     },

src/ui/public/vislib/lib/types/point_series.js

@@ -4,6 +4,10 @@ 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 {
       type: 'point_series',
       series: _.map(series, (seri) => {
@@ -11,8 +15,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,

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

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')