date_histogram: some bars are too big (elastic#13068) (elastic#13151)

* handle data sets with holes * add unit tests
thomasneirynck · Jul 27, 2017 · 4ded8a6 · 4ded8a6
1 parent 7bffcda
commit 4ded8a6
Show file tree

Hide file tree

Showing 4 changed files with 252 additions and 0 deletions.
diff --git a/src/fixtures/vislib/mock_data/date_histogram/_rows_series_with_holes.js b/src/fixtures/vislib/mock_data/date_histogram/_rows_series_with_holes.js
@@ -0,0 +1,103 @@
+import moment from 'moment';
+
+export const rowsSeriesWithHoles = {
+  rows: [
+    {
+      'label': '',
+      'xAxisLabel': '@timestamp per 30 sec',
+      'ordered': {
+        'date': true,
+        'min': 1411761457636,
+        'max': 1411762357636,
+        'interval': 30000
+      },
+      'yAxisLabel': 'Count of documents',
+      'series': [
+        {
+          'label': 'Count',
+          'values': [
+            {
+              'x': 1411761450000,
+              'y': 41
+            },
+            {
+              'x': 1411761510000,
+              'y': 22
+            },
+            {
+              'x': 1411761540000,
+              'y': 17
+            },
+            {
+              'x': 1411761840000,
+              'y': 20
+            },
+            {
+              'x': 1411761870000,
+              'y': 20
+            },
+            {
+              'x': 1411761900000,
+              'y': 21
+            },
+            {
+              'x': 1411761930000,
+              'y': 17
+            },
+            {
+              'x': 1411761960000,
+              'y': 20
+            },
+            {
+              'x': 1411761990000,
+              'y': 13
+            },
+            {
+              'x': 1411762020000,
+              'y': 14
+            },
+            {
+              'x': 1411762050000,
+              'y': 25
+            },
+            {
+              'x': 1411762080000,
+              'y': 17
+            },
+            {
+              'x': 1411762110000,
+              'y': 14
+            },
+            {
+              'x': 1411762140000,
+              'y': 22
+            },
+            {
+              'x': 1411762170000,
+              'y': 14
+            },
+            {
+              'x': 1411762200000,
+              'y': 19
+            },
+            {
+              'x': 1411762320000,
+              'y': 15
+            },
+            {
+              'x': 1411762350000,
+              'y': 4
+            }
+          ]
+        }
+      ],
+      'hits': 533,
+      'xAxisFormatter': function (thing) {
+        return moment(thing);
+      },
+      'tooltipFormatter': function (d) {
+        return d;
+      }
+    }
+  ]
+};
diff --git a/src/fixtures/vislib/mock_data/date_histogram/_series_monthly_interval.js b/src/fixtures/vislib/mock_data/date_histogram/_series_monthly_interval.js
@@ -0,0 +1,75 @@
+import moment from 'moment';
+
+export const seriesMonthlyInterval = {
+  'label': '',
+  'xAxisLabel': '@timestamp per month',
+  'ordered': {
+    'date': true,
+    'min': 1451631600000,
+    'max': 1483254000000,
+    'interval': 2678000000
+  },
+  'yAxisLabel': 'Count of documents',
+  'series': [
+    {
+      'label': 'Count',
+      'values': [
+        {
+          'x': 1451631600000,
+          'y': 10220
+        },
+        {
+          'x': 1454310000000,
+          'y': 9997,
+        },
+        {
+          'x': 1456815600000,
+          'y': 10792,
+        },
+        {
+          'x': 1459490400000,
+          'y': 10262
+        },
+        {
+          'x': 1462082400000,
+          'y': 10080
+        },
+        {
+          'x': 1464760800000,
+          'y': 11161
+        },
+        {
+          'x': 1467352800000,
+          'y': 9933
+        },
+        {
+          'x': 1470031200000,
+          'y': 10342
+        },
+        {
+          'x': 1472709600000,
+          'y': 10887
+        },
+        {
+          'x': 1475301600000,
+          'y': 9666
+        },
+        {
+          'x': 1477980000000,
+          'y': 9556
+        },
+        {
+          'x': 1480575600000,
+          'y': 11644
+        }
+      ]
+    }
+  ],
+  'hits': 533,
+  'xAxisFormatter': function (thing) {
+    return moment(thing);
+  },
+  'tooltipFormatter': function (d) {
+    return d;
+  }
+};
diff --git a/src/ui/public/vislib/__tests__/visualizations/column_chart.js b/src/ui/public/vislib/__tests__/visualizations/column_chart.js
@@ -10,6 +10,8 @@ import seriesNeg from 'fixtures/vislib/mock_data/date_histogram/_series_neg';
 import termsColumns from 'fixtures/vislib/mock_data/terms/_columns';
 import histogramRows from 'fixtures/vislib/mock_data/histogram/_rows';
 import stackedSeries from 'fixtures/vislib/mock_data/date_histogram/_stacked_series';
+import { seriesMonthlyInterval } from 'fixtures/vislib/mock_data/date_histogram/_series_monthly_interval';
+import { rowsSeriesWithHoles } from 'fixtures/vislib/mock_data/date_histogram/_rows_series_with_holes';
 import $ from 'jquery';
 import FixturesVislibVisFixtureProvider from 'fixtures/vislib/_vis_fixture';
 import 'ui/persisted_state';
@@ -184,3 +186,71 @@ dataTypesArray.forEach(function (dataType) {
     });
   });
 });
+
+describe('datumWidth - split chart data set with holes', function () {
+  let vis;
+  let persistedState;
+  const visLibParams = {
+    type: 'histogram',
+    addLegend: true,
+    addTooltip: true,
+    mode: 'stacked',
+    zeroFill: true
+  };
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function (Private, $injector) {
+    vis = Private(FixturesVislibVisFixtureProvider)(visLibParams);
+    persistedState = new ($injector.get('PersistedState'))();
+    vis.on('brush', _.noop);
+    vis.render(rowsSeriesWithHoles, persistedState);
+  }));
+
+  afterEach(function () {
+    vis.destroy();
+  });
+
+  it('should not have bar widths that span multiple time bins', function () {
+    expect(vis.handler.charts.length).to.equal(1);
+    const chart = vis.handler.charts[0];
+    const rects = $(chart.chartEl).find('.series rect');
+    const MAX_WIDTH_IN_PIXELS = 27;
+    rects.each(function () {
+      const width = $(this).attr('width');
+      expect(width).to.be.lessThan(MAX_WIDTH_IN_PIXELS);
+    });
+  });
+});
+
+describe('datumWidth - monthly interval', function () {
+  let vis;
+  let persistedState;
+  const visLibParams = {
+    type: 'histogram',
+    addLegend: true,
+    addTooltip: true,
+    mode: 'stacked',
+    zeroFill: true
+  };
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function (Private, $injector) {
+    vis = Private(FixturesVislibVisFixtureProvider)(visLibParams);
+    persistedState = new ($injector.get('PersistedState'))();
+    vis.on('brush', _.noop);
+    vis.render(seriesMonthlyInterval, persistedState);
+  }));
+
+  afterEach(function () {
+    vis.destroy();
+  });
+
+  it('should vary bar width when date histogram intervals are not equal', function () {
+    expect(vis.handler.charts.length).to.equal(1);
+    const chart = vis.handler.charts[0];
+    const rects = $(chart.chartEl).find('.series rect');
+    const januaryBarWidth = $(rects.get(0)).attr('width');
+    const febuaryBarWidth = $(rects.get(1)).attr('width');
+    expect(febuaryBarWidth).to.be.lessThan(januaryBarWidth);
+  });
+});
diff --git a/src/ui/public/vislib/visualizations/point_series/column_chart.js b/src/ui/public/vislib/visualizations/point_series/column_chart.js
@@ -20,6 +20,10 @@ export function VislibVisualizationsColumnChartProvider(Private) {
     let datumWidth = defaultWidth;
     if (nextDatum) {
       datumWidth = ((scale(nextDatum.x) - scale(datum.x)) - gutterWidth) / groupCount;
+      // To handle data-sets with holes, do not let width be larger than default.
+      if (datumWidth > defaultWidth) {
+        datumWidth = defaultWidth;
+      }
     }
     return datumWidth;
   }