diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-use-default-group-domain-visually-looks-correct-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-use-default-group-domain-visually-looks-correct-1-snap.png new file mode 100644 index 000000000000..ffeffd75c05b Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-use-default-group-domain-visually-looks-correct-1-snap.png differ diff --git a/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.test.ts b/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.test.ts new file mode 100644 index 000000000000..60c532d8aeb1 --- /dev/null +++ b/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.test.ts @@ -0,0 +1,94 @@ +/* + * 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 { MockGlobalSpec, MockSeriesSpec } from '../../../../mocks/specs/specs'; +import { MockStore } from '../../../../mocks/store/store'; +import { DEFAULT_GLOBAL_ID } from '../../utils/specs'; +import { computeSeriesGeometriesSelector } from './compute_series_geometries'; +import { getScaleConfigsFromSpecsSelector } from './get_api_scale_configs'; + +describe('GroupIds and useDefaultGroupId', () => { + it('use the specified useDefaultGroupId to compute scale configs', () => { + const store = MockStore.default(); + MockStore.addSpecs( + [ + MockSeriesSpec.bar({ + groupId: 'other', + useDefaultGroupDomain: 'a different one', + }), + ], + store, + ); + const scaleConfigs = getScaleConfigsFromSpecsSelector(store.getState()); + expect(scaleConfigs.y['a different one']).toBeDefined(); + }); + + it('have 2 different y domains with 2 groups', () => { + const store = MockStore.default(); + MockStore.addSpecs( + [ + MockSeriesSpec.bar({ id: 'one' }), + MockSeriesSpec.bar({ + id: 'two', + groupId: 'other', + useDefaultGroupDomain: 'a different one', + }), + ], + store, + ); + const scaleConfigs = getScaleConfigsFromSpecsSelector(store.getState()); + expect(Object.keys(scaleConfigs.y)).toHaveLength(2); + expect(scaleConfigs.y['a different one']).toBeDefined(); + expect(scaleConfigs.y[DEFAULT_GLOBAL_ID]).toBeDefined(); + }); + + it('have 2 different y domains with 3 groups', () => { + const store = MockStore.default({ width: 120, height: 100, left: 0, top: 0 }); + MockStore.addSpecs( + [ + MockGlobalSpec.settingsNoMargins(), + MockSeriesSpec.bar({ id: 'one', data: [{ x: 1, y: 10 }] }), + MockSeriesSpec.bar({ + id: 'two', + groupId: 'other', + useDefaultGroupDomain: 'a different one', + data: [{ x: 1, y: 10 }], + }), + MockSeriesSpec.bar({ + id: 'three', + groupId: 'another again', + useDefaultGroupDomain: 'a different one', + data: [{ x: 1, y: 10 }], + }), + ], + store, + ); + const scaleConfigs = getScaleConfigsFromSpecsSelector(store.getState()); + expect(Object.keys(scaleConfigs.y)).toHaveLength(2); + expect(scaleConfigs.y['a different one']).toBeDefined(); + expect(scaleConfigs.y[DEFAULT_GLOBAL_ID]).toBeDefined(); + + const geoms = computeSeriesGeometriesSelector(store.getState()); + const { bars } = geoms.geometries; + expect(bars).toHaveLength(3); + expect(bars[0].value[0].width).toBe(40); + expect(bars[1].value[0].width).toBe(40); + expect(bars[2].value[0].width).toBe(40); + }); +}); diff --git a/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts b/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts index c66aa1077d10..ecec96bd0e82 100644 --- a/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts +++ b/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts @@ -33,6 +33,7 @@ import { isHorizontalAxis, isVerticalAxis } from '../../utils/axis_type_utils'; import { groupBy } from '../../utils/group_data_series'; import { AxisSpec, BasicSeriesSpec, CustomXDomain, XScaleType, YDomainRange } from '../../utils/specs'; import { isHorizontalRotation } from '../utils/common'; +import { getSpecDomainGroupId } from '../utils/spec'; import { getAxisSpecsSelector, getSeriesSpecsSelector } from './get_specs'; import { mergeYCustomDomainsByGroupId } from './merge_y_custom_domains'; @@ -83,14 +84,15 @@ export function getScaleConfigsFromSpecs( }; // y axes - const scaleConfigsByGroupId = groupBy(seriesSpecs, ['groupId'], true).reduce< + const scaleConfigsByGroupId = groupBy(seriesSpecs, getSpecDomainGroupId, true).reduce< Record >((acc, series) => { const yScaleTypes = series.map(({ yScaleType, yNice }) => ({ nice: getYNiceFromSpec(yNice), type: getYScaleTypeFromSpec(yScaleType), })); - acc[series[0].groupId] = coerceYScaleTypes(yScaleTypes); + const groupId = getSpecDomainGroupId(series[0]); + acc[groupId] = coerceYScaleTypes(yScaleTypes); return acc; }, {}); diff --git a/packages/osd-charts/stories/bar/56_test_use_dfl_gdomain.tsx b/packages/osd-charts/stories/bar/56_test_use_dfl_gdomain.tsx new file mode 100644 index 000000000000..0c308bc77d95 --- /dev/null +++ b/packages/osd-charts/stories/bar/56_test_use_dfl_gdomain.tsx @@ -0,0 +1,52 @@ +/* + * 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 React from 'react'; + +import { Axis, BarSeries, Chart, Position, ScaleType } from '../../src'; + +export const Example = () => { + return ( + + + + + + + ); +}; diff --git a/packages/osd-charts/stories/bar/bars.stories.tsx b/packages/osd-charts/stories/bar/bars.stories.tsx index c492126d2d82..b79a0586703f 100644 --- a/packages/osd-charts/stories/bar/bars.stories.tsx +++ b/packages/osd-charts/stories/bar/bars.stories.tsx @@ -85,3 +85,4 @@ export { Example as testMinHeightPositiveAndNegativeValues } from './46_test_min export { Example as testTooltipAndRotation } from './48_test_tooltip'; export { Example as tooltipBoundary } from './55_tooltip_boundary'; export { Example as testDualYAxis } from './49_test_dual_axis'; +export { Example as testUseDefaultGroupDomain } from './56_test_use_dfl_gdomain';