[Visualize] Horizontal Bar Percentiles Overlapping

Closes: #74986
elastic · Aug 18, 2020 · c3d750d · c3d750d
1 parent 198806b
commit c3d750d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_point_series.js b/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;

diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/column_chart.js b/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) +