cleaning up

src/core_plugins/kbn_vislib_vis_types/public/area.js

@@ -17,8 +17,7 @@ export default function PointSeriesVisType(Private) {
     params: {
       defaults: {
         grid: {
-          show: false,
-          categoryLines: true,
+          categoryLines: false,
           style: {
             color: '#eee'
           }
@@ -73,7 +72,6 @@ export default function PointSeriesVisType(Private) {
         addLegend: true,
         legendPosition: 'right',
         showCircles: true,
-        smoothLines: false,
         interpolate: 'linear',
         scale: 'linear',
         drawLinesBetweenPoints: true,

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html

@@ -13,12 +13,6 @@
         Grid
       </span>
     </div>
-    <input
-      aria-label="enable"
-      ng-model="vis.params.grid.show"
-      type="checkbox"
-      class="kuiSideBarSectionTitle__action"
-    >
   </div>
 
   <div ng-show="isGridOpen" class="kuiSideBarCollapsibleSection">

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html

@@ -81,11 +81,17 @@
 
         <div ng-show="chart.type == 'line' || chart.type == 'area'">
           <div class="kuiSideBarFormRow">
-            <label class="kuiSideBarFormRow__label" for="{{ 'smoothLine' + $index }}">
-              Smooth lines
+            <label class="kuiSideBarFormRow__label" for="{{ 'lineMode' + $index }}">
+              Line Mode
             </label>
             <div class="kuiSideBarFormRow__control">
-              <input class="kuiCheckBox" id="{{ 'smoothLine' + $index }}" type="checkbox" ng-model="chart.smoothLines">
+              <select
+                id="{{ 'lineMode' + $index }}"
+                class="kuiSelect kuiSideBarSelect"
+                ng-model="chart.interpolate"
+                ng-options="mode.value as mode.text for mode in vis.type.params.interpolationModes"
+              >
+              </select>
             </div>
           </div>
         </div>

src/core_plugins/kbn_vislib_vis_types/public/histogram.js

@@ -15,8 +15,7 @@ export default function PointSeriesVisType(Private) {
     params: {
       defaults: {
         grid: {
-          show: false,
-          categoryLines: true,
+          categoryLines: false,
           style: {
             color: '#eee'
           }
@@ -73,7 +72,6 @@ export default function PointSeriesVisType(Private) {
         addLegend: true,
         legendPosition: 'right',
         showCircles: true,
-        smoothLines: false,
         interpolate: 'linear',
         scale: 'linear',
         drawLinesBetweenPoints: true,
@@ -88,6 +86,16 @@ export default function PointSeriesVisType(Private) {
       axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
       scaleTypes: ['linear', 'log', 'square root'],
       chartModes: ['normal', 'stacked'],
+      interpolationModes: [{
+        value: 'linear',
+        text: 'straight',
+      }, {
+        value: 'cardinal',
+        text: 'smoothed',
+      }, {
+        value: 'step-after',
+        text: 'stepped',
+      }],
       editor: pointSeriesTemplate
     },
     schemas: new Schemas([

src/core_plugins/kbn_vislib_vis_types/public/point_series.js → src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js

@@ -7,15 +7,14 @@ export default function PointSeriesVisType(Private) {
   const Schemas = Private(VisSchemasProvider);
 
   return new VislibVisType({
-    name: 'point_series',
+    name: 'horizontal_bar',
     title: 'Horizontal bar chart',
     icon: 'fa-bars',
     description: 'Like histogram chart but with horizontal bars.',
     params: {
       defaults: {
         grid: {
-          show: false,
-          categoryLines: true,
+          categoryLines: false,
           color: '#eee'
         },
         categoryAxes: [
@@ -71,7 +70,6 @@ export default function PointSeriesVisType(Private) {
         addLegend: true,
         legendPosition: 'right',
         showCircles: true,
-        smoothLines: false,
         interpolate: 'linear',
         scale: 'linear',
         drawLinesBetweenPoints: true,
@@ -86,6 +84,16 @@ export default function PointSeriesVisType(Private) {
       axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
       scaleTypes: ['linear', 'log', 'square root'],
       chartModes: ['normal', 'stacked'],
+      interpolationModes: [{
+        value: 'linear',
+        text: 'straight',
+      }, {
+        value: 'cardinal',
+        text: 'smoothed',
+      }, {
+        value: 'step-after',
+        text: 'stepped',
+      }],
       editor: pointSeriesTemplate
     },
     schemas: new Schemas([

src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js

@@ -5,4 +5,4 @@ visTypes.register(require('plugins/kbn_vislib_vis_types/pie'));
 visTypes.register(require('plugins/kbn_vislib_vis_types/area'));
 visTypes.register(require('plugins/kbn_vislib_vis_types/tile_map'));
 visTypes.register(require('plugins/kbn_vislib_vis_types/heatmap'));
-visTypes.register(require('plugins/kbn_vislib_vis_types/point_series'));
+visTypes.register(require('plugins/kbn_vislib_vis_types/horizontal_bar'));

src/core_plugins/kbn_vislib_vis_types/public/line.js

@@ -15,8 +15,7 @@ export default function PointSeriesVisType(Private) {
     params: {
       defaults: {
         grid: {
-          show: false,
-          categoryLines: true,
+          categoryLines: false,
           style: {
             color: '#eee'
           }

src/ui/public/vislib/lib/axis/axis_config.js

@@ -77,10 +77,10 @@ export default function AxisConfigFactory() {
       const typeDefaults = axisConfigArgs.type === 'category' ? categoryDefaults : valueDefaults;
       // _.defaultsDeep mutates axisConfigArgs nested values so we clone it first
       const axisConfigArgsClone = _.cloneDeep(axisConfigArgs);
-      const isHorizontal = (axisConfigArgsClone.position &&
-        ['top', 'bottom'].includes(axisConfigArgsClone.position)) ||
-        axisConfigArgsClone.type === 'category';
-      _.merge(typeDefaults, isHorizontal ? horizontalDefaults : verticalDefaults);
+      const isCategoryAxis = axisConfigArgsClone.type === 'category';
+      const isHorizontal = axisConfigArgsClone.position && ['top', 'bottom'].includes(axisConfigArgsClone.position);
+
+      _.merge(typeDefaults, isHorizontal || isCategoryAxis ? horizontalDefaults : verticalDefaults);
       this._values = _.defaultsDeep({}, axisConfigArgsClone, typeDefaults, defaults);
 
       this._values.elSelector = this._values.elSelector.replace('{pos}', this._values.position);

src/ui/public/vislib/lib/axis/axis_title.js

@@ -27,6 +27,7 @@ export default function AxisTitleFactory(Private) {
           const div = d3.select(el);
           const width = $(el).width();
           const height = $(el).height();
+          const titlePadding = 15;
 
           const svg = div.append('svg')
           .attr('width', width)
@@ -35,9 +36,9 @@ export default function AxisTitleFactory(Private) {
           const bbox = svg.append('text')
           .attr('transform', function () {
             if (config.isHorizontal()) {
-              return 'translate(' + width / 2 + ',15)';
+              return `translate(${width / 2},${titlePadding})`;
             }
-            return 'translate(15,' + height / 2 + ') rotate(270)';
+            return `translate(${titlePadding},${height / 2}) rotate(270)`;
           })
           .attr('text-anchor', 'middle')
           .text(config.get('title.text'))

src/ui/public/vislib/lib/chart_grid.js

@@ -6,8 +6,7 @@ export default function ChartTitleFactory(Private) {
     style: {
       color: '#eee'
     },
-    show: false,
-    categoryLines: true,
+    categoryLines: false,
     valueAxis: undefined,
   };
 
@@ -54,7 +53,7 @@ export default function ChartTitleFactory(Private) {
     draw(width, height) {
       const self = this;
       return function (selection) {
-        if (!self._values || !self.get('show')) return;
+        if (!self._values) return;
         selection.each(function () {
           if (self.get('categoryLines')) self.drawCategoryLines(d3.select(this), width, height);
           if (self.get('valueAxis', false)) self.drawValueLines(d3.select(this), width, height);

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

@@ -10,7 +10,7 @@ export default function ColumnHandler(Private) {
     }) : null;
 
 
-    let interpolate = cfg.interpolate;
+    let interpolate = matchingSeriParams ? matchingSeriParams.interpolate : cfg.interpolate;
     // for backward compatibility when loading URLs or configs we need to check smoothLines
     if (cfg.smoothLines) interpolate = 'cardinal';
 
@@ -32,8 +32,8 @@ export default function ColumnHandler(Private) {
       show: matchingSeriParams.show,
       type: matchingSeriParams.type,
       mode: matchingSeriParams.mode,
+      interpolate: interpolate,
       valueAxis: matchingSeriParams.valueAxis,
-      smoothLines: matchingSeriParams.smoothLines,
       drawLinesBetweenPoints: matchingSeriParams.drawLinesBetweenPoints,
       showCircles: matchingSeriParams.showCircles,
       radiusRatio: matchingSeriParams.radiusRatio,