diff --git a/package.json b/package.json index 76a24a31e5302..6ca144c82d46f 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "@elastic/apm-rum": "^5.9.1", "@elastic/apm-rum-react": "^1.3.1", "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace", - "@elastic/charts": "38.0.3", + "@elastic/charts": "38.0.5", "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^7.16.0-canary.7", "@elastic/ems-client": "7.16.0", diff --git a/src/plugins/vis_types/xy/public/config/get_config.ts b/src/plugins/vis_types/xy/public/config/get_config.ts index d2a3b9ad2a103..945f9a65953e6 100644 --- a/src/plugins/vis_types/xy/public/config/get_config.ts +++ b/src/plugins/vis_types/xy/public/config/get_config.ts @@ -118,8 +118,6 @@ const shouldEnableHistogramMode = ( } return bars.every(({ valueAxis: groupId, mode }) => { - const yAxisScale = yAxes.find(({ groupId: axisGroupId }) => axisGroupId === groupId)?.scale; - - return mode === 'stacked' || yAxisScale?.mode === 'percentage'; + return mode === 'stacked'; }); }; diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap index 59a7cf966df91..56f35ae021173 100644 --- a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap +++ b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap @@ -54,7 +54,6 @@ exports[`ChartOptions component should init with the default set of props 1`] = { expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartMode.Normal); }); - - it('should set "stacked" mode and disabled control if the referenced axis is "percentage"', () => { - defaultProps.valueAxes[0].scale.mode = AxisMode.Percentage; - defaultProps.chart.mode = ChartMode.Normal; - const paramName = 'mode'; - const comp = mount(); - - expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartMode.Stacked); - expect(comp.find({ paramName }).prop('disabled')).toBeTruthy(); - }); }); diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/chart_options.tsx b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/chart_options.tsx index 04013969fb4fa..f1643746cd84e 100644 --- a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/chart_options.tsx +++ b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/chart_options.tsx @@ -6,14 +6,14 @@ * Side Public License, v 1. */ -import React, { useMemo, useCallback, useEffect, useState } from 'react'; +import React, { useMemo, useCallback } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { SelectOption } from '../../../../../../../vis_default_editor/public'; -import { SeriesParam, ValueAxis, ChartMode, AxisMode } from '../../../../types'; +import { SeriesParam, ValueAxis } from '../../../../types'; import { LineOptions } from './line_options'; import { PointOptions } from './point_options'; import { SetParamByIndex, ChangeValueAxis } from '.'; @@ -39,7 +39,6 @@ function ChartOptions({ changeValueAxis, setParamByIndex, }: ChartOptionsParams) { - const [disabledMode, setDisabledMode] = useState(false); const setChart: SetChart = useCallback( (paramName, value) => { setParamByIndex('seriesParams', index, paramName, value); @@ -70,20 +69,6 @@ function ChartOptions({ [valueAxes] ); - useEffect(() => { - const valueAxisToMetric = valueAxes.find((valueAxis) => valueAxis.id === chart.valueAxis); - if (valueAxisToMetric) { - if (valueAxisToMetric.scale.mode === AxisMode.Percentage) { - setDisabledMode(true); - if (chart.mode !== ChartMode.Stacked) { - setChart('mode', ChartMode.Stacked); - } - } else if (disabledMode) { - setDisabledMode(false); - } - } - }, [valueAxes, chart, disabledMode, setChart, setDisabledMode]); - return ( <> diff --git a/src/plugins/vis_types/xy/public/utils/render_all_series.test.mocks.ts b/src/plugins/vis_types/xy/public/utils/render_all_series.test.mocks.ts index c14e313b1e7a4..4c51d8cad64e4 100644 --- a/src/plugins/vis_types/xy/public/utils/render_all_series.test.mocks.ts +++ b/src/plugins/vis_types/xy/public/utils/render_all_series.test.mocks.ts @@ -109,7 +109,7 @@ export const getVisConfig = (): VisConfig => { show: false, }, scale: { - mode: AxisMode.Normal, + mode: AxisMode.Percentage, type: 'linear', }, domain: { diff --git a/src/plugins/vis_types/xy/public/utils/render_all_series.test.tsx b/src/plugins/vis_types/xy/public/utils/render_all_series.test.tsx index 47b103003b3ed..6f56eff3c2a92 100644 --- a/src/plugins/vis_types/xy/public/utils/render_all_series.test.tsx +++ b/src/plugins/vis_types/xy/public/utils/render_all_series.test.tsx @@ -95,6 +95,43 @@ describe('renderAllSeries', function () { expect(wrapper.find(BarSeries).length).toBe(1); }); + it('renders percentage data for percentage mode', () => { + const barSeriesParams = [{ ...defaultSeriesParams[0], type: 'histogram', mode: 'percentage' }]; + const config = getVisConfig(); + + const renderBarSeries = renderAllSeries( + config, + barSeriesParams as SeriesParam[], + defaultData, + jest.fn(), + jest.fn(), + 'Europe/Athens', + 'col-0-2', + [] + ); + const wrapper = shallow(
{renderBarSeries}
); + expect(wrapper.find(BarSeries).length).toBe(1); + expect(wrapper.find(BarSeries).prop('stackMode')).toEqual('percentage'); + expect(wrapper.find(BarSeries).prop('data')).toEqual([ + { + 'col-0-2': 1610960220000, + 'col-1-3': 1, + }, + { + 'col-0-2': 1610961300000, + 'col-1-3': 1, + }, + { + 'col-0-2': 1610961900000, + 'col-1-3': 1, + }, + { + 'col-0-2': 1610962980000, + 'col-1-3': 1, + }, + ]); + }); + it('renders the correct yAccessors for not percentile aggs', () => { const renderSeries = getAllSeries(getVisConfig(), defaultSeriesParams, defaultData); const wrapper = shallow(
{renderSeries}
); diff --git a/src/plugins/vis_types/xy/public/utils/render_all_series.tsx b/src/plugins/vis_types/xy/public/utils/render_all_series.tsx index c248b3b86e42a..4d71cf454cfd6 100644 --- a/src/plugins/vis_types/xy/public/utils/render_all_series.tsx +++ b/src/plugins/vis_types/xy/public/utils/render_all_series.tsx @@ -19,6 +19,7 @@ import { AccessorFn, ColorVariant, LabelOverflowConstraint, + computeRatioByGroups, } from '@elastic/charts'; import { DatatableRow } from '../../../../expressions/public'; @@ -90,7 +91,24 @@ export const renderAllSeries = ( const id = `${type}-${yAccessors[0]}`; const yAxisScale = yAxes.find(({ groupId: axisGroupId }) => axisGroupId === groupId)?.scale; - const isStacked = mode === 'stacked' || yAxisScale?.mode === 'percentage'; + // compute percentage mode data + const splitChartAccessor = aspects.splitColumn?.accessor || aspects.splitRow?.accessor; + const groupAccessors = [String(xAccessor)]; + if (splitChartAccessor) { + groupAccessors.push(splitChartAccessor); + } + let computedData = data; + if (yAxisScale?.mode === 'percentage') { + yAccessors.forEach((accessor) => { + computedData = computeRatioByGroups( + computedData, + groupAccessors, + (d) => d[accessor], + accessor + ); + }); + } + const isStacked = mode === 'stacked'; const stackMode = yAxisScale?.mode === 'normal' ? undefined : yAxisScale?.mode; // needed to seperate stacked and non-stacked bars into unique pseudo groups const pseudoGroupId = isStacked ? `__pseudo_stacked_group-${groupId}__` : groupId; @@ -113,7 +131,7 @@ export const renderAllSeries = ( xAccessor={xAccessor} yAccessors={yAccessors} splitSeriesAccessors={splitSeriesAccessors} - data={data} + data={computedData} timeZone={timeZone} stackAccessors={isStacked ? ['__any_value__'] : undefined} enableHistogramMode={enableHistogramMode} @@ -153,7 +171,7 @@ export const renderAllSeries = ( markSizeAccessor={markSizeAccessor} markFormat={aspects.z?.formatter} splitSeriesAccessors={splitSeriesAccessors} - data={data} + data={computedData} stackAccessors={isStacked ? ['__any_value__'] : undefined} displayValueSettings={{ showValueLabel, diff --git a/yarn.lock b/yarn.lock index d9a1019c08074..d7a834faad6da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1520,10 +1520,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@38.0.3": - version "38.0.3" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-38.0.3.tgz#0c52dd59abc9b2591348d162f5a8ff4544d1d301" - integrity sha512-BRCVCtOqIJ8L6sOEeeqcQIj4MIzyst1M7cwUMd3QjThd3ZC2iPfTBjxb7lJGqITU79p4zbVkU5w4jtGTQ3sKgw== +"@elastic/charts@38.0.5": + version "38.0.5" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-38.0.5.tgz#b6ca7a41903a5b31589294d141f84134daa590d5" + integrity sha512-Utr1n+j71qQbscCucO7frnMC1j1TgftzqSLoUE0CezFRcwgcy1i3KhSCtdnSthXtvLUvh341WpkKOqp7UyOuhw== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0"