[Visualize] Horizontal Bar Percentiles Overlapping (#75315) (#75437)

* [Visualize] Horizontal Bar Percentiles Overlapping

Closes: #74986

* add tests

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: alexwizp

src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_point_series.js

@@ -54,18 +54,18 @@ export class PointSeries {
     }, 0);
   }
 
-  getGroupedNum(data) {
+  getGroupedNum(seriesId) {
     let i = 0;
     const stacks = [];
     for (const seri of this.baseChart.chartConfig.series) {
       const valueAxis = seri.valueAxis || this.baseChart.handler.valueAxes[0].id;
       const isStacked = seri.mode === 'stacked';
       if (!isStacked) {
-        if (seri.data === data) return i;
+        if (seri.data.rawId === seriesId) return i;
         i++;
       } else {
         if (!(valueAxis in stacks)) stacks[valueAxis] = i++;
-        if (seri.data === data) return stacks[valueAxis];
+        if (seri.data.rawId === seriesId) return stacks[valueAxis];
       }
     }
     return 0;

src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_point_series.test.js

@@ -0,0 +1,114 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { PointSeries } from './_point_series';
+
+describe('Point Series', () => {
+  describe('getGroupedNum', () => {
+    let handler;
+
+    beforeEach(() => {
+      handler = {
+        visConfig: {
+          get: jest.fn(),
+        },
+        pointSeries: {
+          chartConfig: {
+            series: [],
+          },
+          handler: {
+            valueAxes: [{ id: 'stackedId' }],
+          },
+        },
+      };
+    });
+
+    describe('normal mode', () => {
+      let pointSeries;
+
+      beforeEach(() => {
+        handler.pointSeries.chartConfig.series = [
+          {
+            mode: 'normal',
+            data: {
+              label: '1st',
+              rawId: 'col-1',
+            },
+          },
+          {
+            mode: 'normal',
+            data: {
+              label: '2nd',
+              rawId: 'col-2',
+            },
+          },
+        ];
+
+        pointSeries = new PointSeries(handler, [{}], {}, {});
+      });
+
+      test('should calculate correct group num', () => {
+        expect(pointSeries.getGroupedNum('col-2')).toBe(1);
+      });
+
+      test('should return "0" for not found id', () => {
+        expect(pointSeries.getGroupedNum('wrong-id')).toBe(0);
+      });
+    });
+
+    describe('stacked mode', () => {
+      let pointSeries;
+
+      beforeEach(() => {
+        handler.pointSeries.chartConfig.series = [
+          {
+            mode: 'normal',
+            data: {
+              label: '1st',
+              rawId: 'col-1',
+            },
+          },
+          {
+            mode: 'stacked',
+            data: {
+              label: '3rd',
+              rawId: 'col-2',
+            },
+          },
+          {
+            mode: 'stacked',
+            data: {
+              label: '2nd',
+              rawId: 'col-3',
+            },
+          },
+        ];
+
+        pointSeries = new PointSeries(handler, [{}], {}, {});
+      });
+
+      test('should calculate correct group num', () => {
+        expect(pointSeries.getGroupedNum('col-2')).toBe(1);
+      });
+
+      test('should return "0" for not found id', () => {
+        expect(pointSeries.getGroupedNum('wrong-id')).toBe(0);
+      });
+    });
+  });
+});

src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/column_chart.js

@@ -130,8 +130,9 @@ export class ColumnChart extends PointSeries {
     const yMin = yScale.domain()[0];
     const gutterSpacingPercentage = 0.15;
     const chartData = this.chartData;
+    const getGroupedNum = this.getGroupedNum.bind(this);
     const groupCount = this.getGroupedCount();
-    const groupNum = this.getGroupedNum(this.chartData);
+
     let barWidth;
     let gutterWidth;
 
@@ -145,6 +146,8 @@ export class ColumnChart extends PointSeries {
     }
 
     function x(d, i) {
+      const groupNum = getGroupedNum(d.seriesId);
+
       if (isTimeScale) {
         return (
           xScale(d.x) +
@@ -249,12 +252,13 @@ export class ColumnChart extends PointSeries {
     const yScale = this.getValueAxis().getScale();
     const chartData = this.chartData;
     const groupCount = this.getGroupedCount();
-    const groupNum = this.getGroupedNum(this.chartData);
     const gutterSpacingPercentage = 0.15;
     const isTimeScale = this.getCategoryAxis().axisConfig.isTimeDomain();
     const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
     const isLogScale = this.getValueAxis().axisConfig.isLogScale();
     const isLabels = this.labelOptions.show;
+    const getGroupedNum = this.getGroupedNum.bind(this);
+
     let barWidth;
     let gutterWidth;
 
@@ -268,6 +272,7 @@ export class ColumnChart extends PointSeries {
     }
 
     function x(d, i) {
+      const groupNum = getGroupedNum(d.seriesId);
       if (isTimeScale) {
         return (
           xScale(d.x) +