From 88802cb488278748e576266cea87ecae36a9d257 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Wed, 19 Aug 2020 17:26:41 +0300 Subject: [PATCH] [Visualize] Horizontal Bar Percentiles Overlapping (#75315) * [Visualize] Horizontal Bar Percentiles Overlapping Closes: #74986 * add tests Co-authored-by: Elastic Machine --- .../point_series/_point_series.js | 6 +- .../point_series/_point_series.test.js | 114 ++++++++++++++++++ .../point_series/column_chart.js | 9 +- 3 files changed, 124 insertions(+), 5 deletions(-) create mode 100644 src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_point_series.test.js 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 index 1b084e4142445..d3829d45a88d5 100644 --- 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/_point_series.test.js b/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_point_series.test.js new file mode 100644 index 0000000000000..cedbe2f443f41 --- /dev/null +++ b/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); + }); + }); + }); +}); 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 index cc64e0d746fbf..1369bf1dff68a 100644 --- 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) +