showing too many series error just on heatmap (#10229)

Backports PR #10134

**Commit 1:**
showing too many series error just on heatmap

* Original sha: e5da6ac75b
* Authored by ppisljar <peter.pisljar@gmail.com> on 2017-02-01T15:10:14Z

**Commit 2:**
adding tests

* Original sha: 1558649959
* Authored by ppisljar <peter.pisljar@gmail.com> on 2017-02-01T17:44:20Z

**Commit 3:**
adding test for non heatmap chart

* Original sha: b102c95b54
* Authored by ppisljar <peter.pisljar@gmail.com> on 2017-02-03T10:27:16Z

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

@@ -0,0 +1,118 @@
+import d3 from 'd3';
+import _ from 'lodash';
+import ngMock from 'ng_mock';
+import expect from 'expect.js';
+import stackedSeries from 'fixtures/vislib/mock_data/date_histogram/_stacked_series';
+import VislibLibVisPointSeriesTypeConfigProvider from 'ui/vislib/lib/types/point_series';
+
+describe('Point Series Config Type Class Test Suite', function () {
+  let pointSeriesConfig;
+  let parsedConfig;
+  let el;
+  const histogramConfig = {
+    type: 'histogram',
+    addLegend: true,
+    addTooltip: true,
+  };
+
+  const heatmapConfig = {
+    type: 'heatmap',
+    addLegend: true,
+    addTooltip: true,
+    colorsNumber: 4,
+    colorSchema: 'Greens',
+    setColorRange: false,
+    percentageMode: true,
+    invertColors: false,
+    colorsRange: []
+  };
+
+  const data = {
+    get: (prop) => { return data[prop] || null; },
+    getLabels: () => [],
+    data: {
+      hits: 621,
+      ordered: {
+        date: true,
+        interval: 30000,
+        max: 1408734982458,
+        min: 1408734082458
+      },
+      series: [
+        { label: 's1', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's2', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's3', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's4', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's5', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's6', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's7', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's8', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's9', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's10', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's11', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's12', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's13', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's14', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's15', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's16', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's17', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's18', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's19', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's20', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's21', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's22', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's23', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's24', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's25', values: [{ x: 1408734060000, y: 8 }] },
+        { label: 's26', values: [{ x: 1408734060000, y: 8 }] }
+      ],
+      xAxisLabel: 'Date Histogram',
+      yAxisLabel: 'series'
+    }
+
+  };
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function (Private, $injector) {
+    pointSeriesConfig = Private(VislibLibVisPointSeriesTypeConfigProvider);
+  }));
+
+  describe('histogram chart', function () {
+    beforeEach(function () {
+      parsedConfig = pointSeriesConfig.heatmap(histogramConfig, data);
+    });
+    it('should not throw an error when more than 25 series are provided', function () {
+      expect(parsedConfig.error).to.be.undefined;
+    });
+  });
+
+
+  describe('heatmap chart', function () {
+    beforeEach(function () {
+      const stackedData = {
+        get: (prop) => { return data[prop] || null; },
+        getLabels: () => [],
+        data: stackedSeries
+      };
+      parsedConfig = pointSeriesConfig.heatmap(heatmapConfig, stackedData);
+    });
+
+    it('should throw an error when more than 25 series are provided', function () {
+      parsedConfig = pointSeriesConfig.heatmap(heatmapConfig, data);
+      expect(parsedConfig.error).to.be('There are too many series defined.');
+    });
+
+    it('should not throw an error when less than 25 series are provided', function () {
+      expect(parsedConfig.error).to.be.undefined;
+    });
+
+    it('should hide first value axis', function () {
+      expect(parsedConfig.valueAxes[0].show).to.be(false);
+    });
+
+    it('should add second value axis', function () {
+      expect(parsedConfig.valueAxes.length).to.equal(2);
+    });
+  });
+
+});

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

@@ -113,6 +113,8 @@ export default function HandlerBaseClass(Private) {
      * @returns {HTMLElement} With the visualization child element
      */
     render() {
+      if (this.visConfig.get('error', null)) return this.error(this.visConfig.get('error'));
+
       const self = this;
       const { binder, charts = [] } = this;
       const selection = d3.select(this.el);

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

@@ -148,6 +148,12 @@ export default function ColumnHandler(Private) {
 
     heatmap: (cfg, data) => {
       const defaults = create()(cfg, data);
+      const seriesLimit = 25;
+      const hasCharts = defaults.charts.length;
+      const tooManySeries = defaults.charts[0].series.length > seriesLimit;
+      if (hasCharts && tooManySeries) {
+        defaults.error = 'There are too many series defined.';
+      }
       defaults.valueAxes[0].show = false;
       defaults.categoryAxes[0].style = {
         rangePadding: 0,

src/ui/public/vislib/visualizations/point_series.js

@@ -33,11 +33,6 @@ export default function PointSeriesFactory(Private) {
       this.chartEl = chartEl;
       this.chartConfig = this.findChartConfig();
       this.handler.pointSeries = this;
-
-      const seriesLimit = 25;
-      if (this.chartConfig.series.length > seriesLimit) {
-        throw new errors.VislibError('There are too many series defined.');
-      }
     }
 
     findChartConfig() {