Vislib refactor nr5 (#8950)

* moving margin to css * adding point_series type (the others are left for backward compatibility) * adding series default options * fixing alignment of axes * injectZeros should be applied per value axis * fixing error in axis matching * fixing style (indentation) * fixing tooltips * fixing axisformatter * making grouped/overlap the default mode * making charts direction independent * fixing tests
elastic · Nov 5, 2016 · 30e3fd4 · 30e3fd4
1 parent 0476119
commit 30e3fd4
Show file tree

Hide file tree

Showing 24 changed files with 457 additions and 543 deletions.
diff --git a/src/ui/public/vislib/__tests__/components/zero_injection.js b/src/ui/public/vislib/__tests__/components/zero_injection.js
diff --git a/src/ui/public/vislib/__tests__/lib/data.js b/src/ui/public/vislib/__tests__/lib/data.js
@@ -117,7 +117,7 @@ describe('Vislib Data Class Test Suite', function () {
     });
 
     it('should return an object', function () {
-      const rowIn = new Data(rowsData, {}, persistedState);
+      const rowIn = new Data(rowsData, persistedState);
       expect(_.isObject(rowIn)).to.be(true);
     });
   });
@@ -136,7 +136,7 @@ describe('Vislib Data Class Test Suite', function () {
     };
 
     beforeEach(function () {
-      data = new Data(pieData, {}, persistedState);
+      data = new Data(pieData, persistedState);
     });
 
     it('should remove zero values', function () {
@@ -154,9 +154,9 @@ describe('Vislib Data Class Test Suite', function () {
     let colOut;
 
     beforeEach(function () {
-      serIn = new Data(seriesData, {}, persistedState);
-      rowIn = new Data(rowsData, {}, persistedState);
-      colIn = new Data(colsData, {}, persistedState);
+      serIn = new Data(seriesData, persistedState);
+      rowIn = new Data(rowsData, persistedState);
+      colIn = new Data(colsData, persistedState);
       serOut = serIn.flatten();
       rowOut = rowIn.flatten();
       colOut = colIn.flatten();
@@ -172,7 +172,7 @@ describe('Vislib Data Class Test Suite', function () {
 
     function testLength(inputData) {
       return function () {
-        const data = new Data(inputData, {}, persistedState);
+        const data = new Data(inputData, persistedState);
         const len = _.reduce(data.chartData(), function (sum, chart) {
           return sum + chart.series.reduce(function (sum, series) {
             return sum + series.values.length;
@@ -224,7 +224,7 @@ describe('Vislib Data Class Test Suite', function () {
     };
 
     beforeEach(function () {
-      data = new Data(geohashGridData, {}, persistedState);
+      data = new Data(geohashGridData, persistedState);
     });
 
     describe('getVisData', function () {
@@ -245,7 +245,7 @@ describe('Vislib Data Class Test Suite', function () {
 
   describe('null value check', function () {
     it('should return false', function () {
-      const data = new Data(rowsData, {}, persistedState);
+      const data = new Data(rowsData, persistedState);
       expect(data.hasNullValues()).to.be(false);
     });
 
@@ -261,7 +261,7 @@ describe('Vislib Data Class Test Suite', function () {
         ]
       });
 
-      const data = new Data(nullRowData, {}, persistedState);
+      const data = new Data(nullRowData, persistedState);
       expect(data.hasNullValues()).to.be(true);
     });
   });

diff --git a/src/ui/public/vislib/__tests__/visualizations/column_chart.js b/src/ui/public/vislib/__tests__/visualizations/column_chart.js
@@ -8,7 +8,6 @@ import series from 'fixtures/vislib/mock_data/date_histogram/_series';
 import seriesPosNeg from 'fixtures/vislib/mock_data/date_histogram/_series_pos_neg';
 import seriesNeg from 'fixtures/vislib/mock_data/date_histogram/_series_neg';
 import termsColumns from 'fixtures/vislib/mock_data/terms/_columns';
-//const histogramRows = require('fixtures/vislib/mock_data/histogram/_rows');
 import stackedSeries from 'fixtures/vislib/mock_data/date_histogram/_stacked_series';
 import $ from 'jquery';
 import FixturesVislibVisFixtureProvider from 'fixtures/vislib/_vis_fixture';

diff --git a/src/ui/public/vislib/__tests__/visualizations/pie_chart.js b/src/ui/public/vislib/__tests__/visualizations/pie_chart.js
@@ -1,5 +1,4 @@
 import d3 from 'd3';
-import angular from 'angular';
 import expect from 'expect.js';
 import ngMock from 'ng_mock';
 import _ from 'lodash';

diff --git a/src/ui/public/vislib/__tests__/visualizations/tile_maps/tile_map.js b/src/ui/public/vislib/__tests__/visualizations/tile_maps/tile_map.js
@@ -1,4 +1,3 @@
-import angular from 'angular';
 import expect from 'expect.js';
 import ngMock from 'ng_mock';
 import _ from 'lodash';
@@ -14,7 +13,13 @@ let TileMap;
 let extentsStub;
 
 function createTileMap(handler, chartEl, chartData) {
-  handler = handler || {};
+  handler = handler || {
+    visConfig: {
+      get: function () {
+        return '';
+      }
+    }
+  };
   chartEl = chartEl || mockChartEl;
   chartData = chartData || geoJsonData;
 

diff --git a/src/ui/public/vislib/components/zero_injection/inject_zeros.js b/src/ui/public/vislib/components/zero_injection/inject_zeros.js
@@ -1,10 +1,8 @@
 import _ from 'lodash';
-import VislibComponentsZeroInjectionOrderedXKeysProvider from 'ui/vislib/components/zero_injection/ordered_x_keys';
 import VislibComponentsZeroInjectionZeroFilledArrayProvider from 'ui/vislib/components/zero_injection/zero_filled_array';
 import VislibComponentsZeroInjectionZeroFillDataArrayProvider from 'ui/vislib/components/zero_injection/zero_fill_data_array';
 export default function ZeroInjectionUtilService(Private) {
 
-  const orderXValues = Private(VislibComponentsZeroInjectionOrderedXKeysProvider);
   const createZeroFilledArray = Private(VislibComponentsZeroInjectionZeroFilledArrayProvider);
   const zeroFillDataArray = Private(VislibComponentsZeroInjectionZeroFillDataArrayProvider);
 
@@ -19,30 +17,12 @@ export default function ZeroInjectionUtilService(Private) {
    * and injects zeros where needed.
    */
 
-  function getDataArray(obj) {
-    if (obj.rows) {
-      return obj.rows;
-    } else if (obj.columns) {
-      return obj.columns;
-    } else if (obj.series) {
-      return [obj];
-    }
-  }
-
   return function (obj) {
-    if (!_.isObject(obj) || !obj.rows && !obj.columns && !obj.series) {
-      throw new TypeError('ZeroInjectionUtilService expects an object with a series, rows, or columns key');
-    }
-
-    const keys = orderXValues(obj);
-    const arr = getDataArray(obj);
-
-    arr.forEach(function (object) {
-      object.series.forEach(function (series) {
-        const zeroArray = createZeroFilledArray(keys);
+    const keys = _(obj).map('values').flatten().map('x').uniq().sort().value();//orderXValues(obj);
 
-        series.values = zeroFillDataArray(zeroArray, series.values);
-      });
+    obj.forEach(function (series) {
+      const zeroArray = createZeroFilledArray(keys);
+      series.values = zeroFillDataArray(zeroArray, series.values);
     });
 
     return obj;

diff --git a/src/ui/public/vislib/lib/axis/axis.js b/src/ui/public/vislib/lib/axis/axis.js
@@ -198,30 +198,11 @@ export default function AxisFactory(Private) {
     }
 
     getLength(el, n) {
-      const margin = this.visConfig.get('style.margin');
       if (this.axisConfig.isHorizontal()) {
-        return $(el).parent().width() / n - margin.left - margin.right - 50;
+        return $(el).parent().width() / n;
+      } else {
+        return $(el).parent().height() / n;
       }
-      return $(el).parent().height() / n - margin.top - margin.bottom;
-    }
-
-    updateXaxisHeight() {
-      const el = this.axisConfig.get('rootEl');
-      const position = this.axisConfig.get('position');
-      const selection = d3.select(el).selectAll('.vis-wrapper');
-
-      selection.each(function () {
-        const visEl = d3.select(this);
-
-        if (visEl.select('.inner-spacer-block').node() === null) {
-          visEl.selectAll('.y-axis-spacer-block')
-          .append('div')
-          .attr('class', 'inner-spacer-block');
-        }
-
-        const height = visEl.select(`.axis-wrapper-${position}`).style('height');
-        visEl.selectAll(`.y-axis-spacer-block-${position} .inner-spacer-block`).style('height', height);
-      });
     }
 
     adjustSize() {
@@ -245,23 +226,27 @@ export default function AxisFactory(Private) {
             }
           })());
         });
-        const length = lengths.length > 0 ? _.max(lengths) : 0;
+        let length = lengths.length > 0 ? _.max(lengths) : 0;
 
         if (config.isHorizontal()) {
           selection.attr('height', length);
-          self.updateXaxisHeight();
           if (position === 'top') {
             selection.select('g')
             .attr('transform', `translate(0, ${length - parseInt(style.lineWidth)})`);
             selection.select('path')
             .attr('transform', 'translate(1,0)');
           }
         } else {
+          const axisSpacing = 2;
           selection.attr('width', length + xAxisPadding);
           if (position === 'left') {
-            const translateWidth = length + xAxisPadding - 2 - parseInt(style.lineWidth);
+            const translateWidth = length + xAxisPadding - axisSpacing - parseInt(style.lineWidth);
+            selection.select('g')
+            .attr('transform', `translate(${translateWidth},0)`);
+          } else if (position === 'right') {
+            const translateWidth = axisSpacing + parseInt(style.lineWidth);
             selection.select('g')
-            .attr('transform', `translate(${translateWidth},${margin.top})`);
+              .attr('transform', `translate(${translateWidth},0)`);
           }
         }
       };

diff --git a/src/ui/public/vislib/lib/axis/axis_config.js b/src/ui/public/vislib/lib/axis/axis_config.js
@@ -26,7 +26,7 @@ export default function AxisConfigFactory() {
       tickLength: '6px'
     },
     labels: {
-      axisFormatter: d3.format('n'),
+      axisFormatter: null,
       show: true,
       rotate: 0,
       rotateAnchor: 'center',
@@ -49,13 +49,19 @@ export default function AxisConfigFactory() {
       rotate: 0,
       rotateAnchor: 'end',
       filter: true,
-      truncate: 0
+      truncate: 0,
+    }
+  };
+
+  const valueDefaults = {
+    labels: {
+      axisFormatter: d3.format('n')
     }
   };
 
   class AxisConfig {
     constructor(chartConfig, axisConfigArgs) {
-      const typeDefaults = axisConfigArgs.type === 'category' ? categoryDefaults : {};
+      const typeDefaults = axisConfigArgs.type === 'category' ? categoryDefaults : valueDefaults;
       this._values = _.defaultsDeep({}, axisConfigArgs, typeDefaults, defaults);
 
       this._values.elSelector = this._values.elSelector.replace('{pos}', this._values.position);
@@ -65,6 +71,9 @@ export default function AxisConfigFactory() {
       if (this._values.type === 'category') {
         this.values = this.data.xValues();
         this.ordered = this.data.get('ordered');
+        if (!this._values.labels.axisFormatter) {
+          this._values.labels.axisFormatter = this.data.data.xAxisFormatter || this.data.get('xAxisFormatter');
+        }
       }
 
       if (this._values.type === 'value') {

diff --git a/src/ui/public/vislib/lib/data.js b/src/ui/public/vislib/lib/data.js
@@ -290,8 +290,8 @@ export default function DataFactory(Private) {
      * @method injectZeros
      * @returns {Object} Data object with zeros injected
      */
-    injectZeros() {
-      return injectZeros(this.data);
+    injectZeros(data) {
+      return injectZeros(data);
     };
 
     /**

diff --git a/src/ui/public/vislib/lib/dispatch.js b/src/ui/public/vislib/lib/dispatch.js
@@ -259,36 +259,41 @@ export default function DispatchClass(Private, config) {
     createBrush(xScale, svg) {
       const self = this;
       const visConfig = self.handler.visConfig;
-      const height = svg.node().getBBox().height;
-      const margin = visConfig.get('style.margin');
+      const {width, height} = svg.node().getBBox();
+      const isHorizontal = self.handler.categoryAxes[0].axisConfig.isHorizontal();
 
       // Brush scale
-      const brush = d3.svg.brush()
-        .x(xScale)
-        .on('brushend', function brushEnd() {
-
-          // Assumes data is selected at the chart level
-          // In this case, the number of data objects should always be 1
-          const data = d3.select(this).data()[0];
-          const isTimeSeries = (data.ordered && data.ordered.date);
-
-          // Allows for brushing on d3.scale.ordinal()
-          const selected = xScale.domain().filter(function (d) {
-            return (brush.extent()[0] <= xScale(d)) && (xScale(d) <= brush.extent()[1]);
-          });
-          const range = isTimeSeries ? brush.extent() : selected;
-
-          return self.emit('brush', {
-            range: range,
-            config: visConfig,
-            e: d3.event,
-            data: data
-          });
+      const brush = d3.svg.brush();
+      if (isHorizontal) {
+        brush.x(xScale);
+      } else {
+        brush.y(xScale);
+      }
+
+      brush.on('brushend', function brushEnd() {
+
+        // Assumes data is selected at the chart level
+        // In this case, the number of data objects should always be 1
+        const data = d3.select(this).data()[0];
+        const isTimeSeries = (data.ordered && data.ordered.date);
+
+        // Allows for brushing on d3.scale.ordinal()
+        const selected = xScale.domain().filter(function (d) {
+          return (brush.extent()[0] <= xScale(d)) && (xScale(d) <= brush.extent()[1]);
         });
+        const range = isTimeSeries ? brush.extent() : selected;
+
+        return self.emit('brush', {
+          range: range,
+          config: visConfig,
+          e: d3.event,
+          data: data
+        });
+      });
 
       // if `addBrushing` is true, add brush canvas
       if (self.listenerCount('brush')) {
-        svg.insert('g', 'g')
+        const rect = svg.insert('g', 'g')
           .attr('class', 'brush')
           .call(brush)
           .call(function (brushG) {
@@ -299,8 +304,13 @@ export default function DispatchClass(Private, config) {
               if (validBrushClick(d3.event)) brushHandler.apply(this, arguments);
             });
           })
-          .selectAll('rect')
-          .attr('height', height - margin.top - margin.bottom);
+          .selectAll('rect');
+
+        if (isHorizontal) {
+          rect.attr('height', height);
+        } else {
+          rect.attr('width', width);
+        }
 
         return brush;
       }

diff --git a/src/ui/public/vislib/lib/handler.js b/src/ui/public/vislib/lib/handler.js
@@ -45,8 +45,17 @@ export default function HandlerBaseClass(Private) {
         this.layout,
         this.chartTitle,
         this.alerts
-      ].concat(_.values(this.categoryAxes))
-      .concat(_.values(this.valueAxes)), Boolean);
+      ], Boolean);
+
+      if (this.categoryAxes.length && this.categoryAxes[0].axisConfig.isHorizontal()) {
+        this.renderArray = this.renderArray
+          .concat(this.valueAxes)
+          .concat(this.categoryAxes);
+      } else {
+        this.renderArray = this.renderArray
+          .concat(this.categoryAxes)
+          .concat(this.valueAxes);
+      }
 
       // memoize so that the same function is returned every time,
       // allowing us to remove/re-add the same function