diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-stacked-with-missing-values-visually-looks-correct-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-stacked-with-missing-values-visually-looks-correct-1-snap.png new file mode 100644 index 000000000000..de79c6528301 Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-stacked-with-missing-values-visually-looks-correct-1-snap.png differ diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-mixed-visually-looks-correct-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-mixed-visually-looks-correct-1-snap.png index 8c7da6da9f45..96562f09e863 100644 Binary files a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-mixed-visually-looks-correct-1-snap.png and b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-mixed-visually-looks-correct-1-snap.png differ diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-with-domain-constraints-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-with-domain-constraints-1-snap.png index 1b2c4339f97d..86ed002dc998 100644 Binary files a/packages/osd-charts/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-with-domain-constraints-1-snap.png and b/packages/osd-charts/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-with-domain-constraints-1-snap.png differ diff --git a/packages/osd-charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts b/packages/osd-charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts index 750283247709..6d694938be5f 100644 --- a/packages/osd-charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts +++ b/packages/osd-charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts @@ -29,9 +29,9 @@ export interface StackedValues { } /** @internal */ -export const datumXSortPredicate = (xScaleType: ScaleType) => (a: DataSeriesDatum, b: DataSeriesDatum) => { +export const datumXSortPredicate = (xScaleType: ScaleType, sortedXValues?: (string | number)[]) => (a: DataSeriesDatum, b: DataSeriesDatum) => { if (xScaleType === ScaleType.Ordinal || typeof a.x === 'string' || typeof b.x === 'string') { - return 0; + return sortedXValues ? sortedXValues.indexOf(a.x) - sortedXValues.indexOf(b.x) : 0; } return a.x - b.x; }; @@ -172,7 +172,8 @@ export function formatStackedDataSeriesValues( newData.push(filledSeriesDatum); } } - newData.sort(datumXSortPredicate(xScaleType)); + const sortedXValues = [...xValues]; + newData.sort(datumXSortPredicate(xScaleType, sortedXValues)); return { ...ds, data: newData, diff --git a/packages/osd-charts/stories/area/16_test_stacked_with_missing.tsx b/packages/osd-charts/stories/area/16_test_stacked_with_missing.tsx new file mode 100644 index 000000000000..199b719d8cbd --- /dev/null +++ b/packages/osd-charts/stories/area/16_test_stacked_with_missing.tsx @@ -0,0 +1,128 @@ +/* + * 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 { Chart, CurveType, AreaSeries, Position, Axis, ScaleType } from '../../src'; + +export const Example = () => ( + + + + + +); + +const data = [ + { + 'col-0-3': 'ZRH', + 'col-1-6': 'Logstash Airways', + 'col-2-5': 27, + }, + { + 'col-0-3': 'ZRH', + 'col-1-6': 'Kibana Airlines', + 'col-2-5': 38, + }, + { + 'col-0-3': 'ZRH', + 'col-1-6': 'JetBeats', + 'col-2-5': 26, + }, + { + 'col-0-3': 'ZRH', + 'col-1-6': 'ES-Air', + 'col-2-5': 33, + }, + { + 'col-0-3': 'YYZ', + 'col-1-6': 'Kibana Airlines', + 'col-2-5': 5, + }, + { + 'col-0-3': 'YYZ', + 'col-1-6': 'JetBeats', + 'col-2-5': 7, + }, + { + 'col-0-3': 'YYZ', + 'col-1-6': 'ES-Air', + 'col-2-5': 4, + }, + { + 'col-0-3': 'YWG', + 'col-1-6': 'Logstash Airways', + 'col-2-5': 17, + }, + { + 'col-0-3': 'YWG', + 'col-1-6': 'Kibana Airlines', + 'col-2-5': 19, + }, + { + 'col-0-3': 'YWG', + 'col-1-6': 'JetBeats', + 'col-2-5': 17, + }, + { + 'col-0-3': 'YUL', + 'col-1-6': 'Logstash Airways', + 'col-2-5': 4, + }, + { + 'col-0-3': 'YUL', + 'col-1-6': 'Kibana Airlines', + 'col-2-5': 7, + }, + { + 'col-0-3': 'YUL', + 'col-1-6': 'JetBeats', + 'col-2-5': 4, + }, + { + 'col-0-3': 'YUL', + 'col-1-6': 'ES-Air', + 'col-2-5': 13, + }, + { + 'col-0-3': 'YOW', + 'col-1-6': 'Logstash Airways', + 'col-2-5': 11, + }, + { + 'col-0-3': 'YOW', + 'col-1-6': 'Kibana Airlines', + 'col-2-5': 6, + }, + { + 'col-0-3': 'YOW', + 'col-1-6': 'ES-Air', + 'col-2-5': 14, + }, +]; diff --git a/packages/osd-charts/stories/area/area.stories.tsx b/packages/osd-charts/stories/area/area.stories.tsx index a918c21d20db..d14005973ee0 100644 --- a/packages/osd-charts/stories/area/area.stories.tsx +++ b/packages/osd-charts/stories/area/area.stories.tsx @@ -43,3 +43,4 @@ export { Example as stackedGrouped } from './15_stacked_grouped'; export { Example as testLinear } from './11_test_linear'; export { Example as testTime } from './12_test_time'; +export { Example as testStackedWithMissingValues } from './16_test_stacked_with_missing';