Modify logic to disable histogram mode for unstacked bar chart

elastic · Sep 29, 2020 · 0ae4cec · 0ae4cec
1 parent 70c978c
commit 0ae4cec
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_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,10 +916,9 @@ 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 the series', () => {
+    test('it does not apply histogram mode to more than one the series for unstacked bar chart', () => {
       const { data, args } = sampleArgs();
       const firstLayer: LayerArgs = { ...args.layers[0], seriesType: 'bar', isHistogram: true };
       delete firstLayer.splitAccessor;
@@ -936,6 +940,28 @@ describe('xy_expression', () => {
       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', () => {
       const { data, args } = sampleArgs();
       const component = shallow(

diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
@@ -584,7 +584,12 @@ export function XYChart({
             groupId: yAxesConfiguration.find((axisConfiguration) =>
               axisConfiguration.series.find((currentSeries) => currentSeries.accessor === accessor)
             )?.groupId,
-            enableHistogramMode: !chartHasMoreThanOneSeries && isHistogram && (seriesType.includes('stacked') || !splitAccessor),
+            enableHistogramMode:
+              isHistogram &&
+              (seriesType.includes('stacked') || !splitAccessor) &&
+              (!seriesType.includes('bar') ||
+                seriesType.includes('stacked') ||
+                !chartHasMoreThanOneSeries),
             stackMode: seriesType.includes('percentage') ? StackMode.Percentage : undefined,
             timeZone,
             areaSeriesStyle: {