[Lens]Do not enable histogram mode for multiple un-stacked bar series (…

…#78525)
elastic · Oct 2, 2020 · 94ef651 · 94ef651
1 parent e52884c
commit 94ef651
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 3 deletions.
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
@@ -896,7 +896,12 @@ describe('xy_expression', () => {
 
     test('it applies histogram mode to the series for single series', () => {
       const { data, args } = sampleArgs();
-      const firstLayer: LayerArgs = { ...args.layers[0], seriesType: 'bar', isHistogram: true };
+      const firstLayer: LayerArgs = {
+        ...args.layers[0],
+        accessors: ['b'],
+        seriesType: 'bar',
+        isHistogram: true,
+      };
       delete firstLayer.splitAccessor;
       const component = shallow(
         <XYChart
@@ -911,7 +916,48 @@ describe('xy_expression', () => {
         />
       );
       expect(component.find(BarSeries).at(0).prop('enableHistogramMode')).toEqual(true);
-      expect(component.find(BarSeries).at(1).prop('enableHistogramMode')).toEqual(true);
+    });
+
+    test('it does not apply histogram mode to more than one bar series for unstacked bar chart', () => {
+      const { data, args } = sampleArgs();
+      const firstLayer: LayerArgs = { ...args.layers[0], seriesType: 'bar', isHistogram: true };
+      delete firstLayer.splitAccessor;
+      const component = shallow(
+        <XYChart
+          data={data}
+          args={{ ...args, layers: [firstLayer] }}
+          formatFactory={getFormatSpy}
+          timeZone="UTC"
+          chartsThemeService={chartsThemeService}
+          histogramBarTarget={50}
+          onClickValue={onClickValue}
+          onSelectRange={onSelectRange}
+        />
+      );
+      expect(component.find(BarSeries).at(0).prop('enableHistogramMode')).toEqual(false);
+      expect(component.find(BarSeries).at(1).prop('enableHistogramMode')).toEqual(false);
+    });
+
+    test('it applies histogram mode to more than one the series for unstacked line/area chart', () => {
+      const { data, args } = sampleArgs();
+      const firstLayer: LayerArgs = { ...args.layers[0], seriesType: 'line', isHistogram: true };
+      delete firstLayer.splitAccessor;
+      const secondLayer: LayerArgs = { ...args.layers[0], seriesType: 'line', isHistogram: true };
+      delete secondLayer.splitAccessor;
+      const component = shallow(
+        <XYChart
+          data={data}
+          args={{ ...args, layers: [firstLayer, secondLayer] }}
+          formatFactory={getFormatSpy}
+          timeZone="UTC"
+          chartsThemeService={chartsThemeService}
+          histogramBarTarget={50}
+          onClickValue={onClickValue}
+          onSelectRange={onSelectRange}
+        />
+      );
+      expect(component.find(LineSeries).at(0).prop('enableHistogramMode')).toEqual(true);
+      expect(component.find(LineSeries).at(1).prop('enableHistogramMode')).toEqual(true);
     });
 
     test('it applies histogram mode to the series for stacked series', () => {

diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -299,6 +299,13 @@ export function XYChart({
     yRight: true,
   };
 
+  const filteredBarLayers = filteredLayers.filter((layer) => layer.seriesType.includes('bar'));
+
+  const chartHasMoreThanOneBarSeries =
+    filteredBarLayers.length > 1 ||
+    filteredBarLayers.some((layer) => layer.accessors.length > 1) ||
+    filteredBarLayers.some((layer) => layer.splitAccessor);
+
   function calculateMinInterval() {
     // check all the tables to see if all of the rows have the same timestamp
     // that would mean that chart will draw a single bar
@@ -599,7 +606,12 @@ export function XYChart({
             groupId: yAxesConfiguration.find((axisConfiguration) =>
               axisConfiguration.series.find((currentSeries) => currentSeries.accessor === accessor)
             )?.groupId,
-            enableHistogramMode: isHistogram && (seriesType.includes('stacked') || !splitAccessor),
+            enableHistogramMode:
+              isHistogram &&
+              (seriesType.includes('stacked') || !splitAccessor) &&
+              (seriesType.includes('stacked') ||
+                !seriesType.includes('bar') ||
+                !chartHasMoreThanOneBarSeries),
             stackMode: seriesType.includes('percentage') ? StackMode.Percentage : undefined,
             timeZone,
             areaSeriesStyle: {