From 9e2566cc9ae057e33a05b65093ba039acbe48442 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 17 Feb 2022 11:56:11 +0100 Subject: [PATCH] fix(xy): dataIndex keeps original data order on small multiples (#1597) --- ...-sorting-visually-looks-correct-1-snap.png | Bin 0 -> 10682 bytes packages/charts/src/common/predicate.ts | 4 +- .../stories/small_multiples/1_grid.story.tsx | 221 ------------------ .../small_multiples/8_sorting.story.tsx | 78 +++++++ .../small_multiples.stories.tsx | 2 + 5 files changed, 82 insertions(+), 223 deletions(-) create mode 100644 integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sorting-visually-looks-correct-1-snap.png delete mode 100644 storybook/stories/small_multiples/1_grid.story.tsx create mode 100644 storybook/stories/small_multiples/8_sorting.story.tsx diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sorting-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sorting-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..247490977050cffb4455454c8f33b3033fafe666 GIT binary patch literal 10682 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 literal 0 HcmV?d00001 diff --git a/packages/charts/src/common/predicate.ts b/packages/charts/src/common/predicate.ts index 490c1cf6b6..fe3f65be54 100644 --- a/packages/charts/src/common/predicate.ts +++ b/packages/charts/src/common/predicate.ts @@ -41,13 +41,13 @@ export function getPredicateFn(predicate: Predicate, accessor?: keyof T): (a: const bValue = Number(accessor ? b[accessor] : b); return bValue - aValue; }; - default: - case 'dataIndex': case 'numAsc': return (a: T, b: T) => { const aValue = Number(accessor ? a[accessor] : a); const bValue = Number(accessor ? b[accessor] : b); return aValue - bValue; }; + case 'dataIndex': + return () => 0; } } diff --git a/storybook/stories/small_multiples/1_grid.story.tsx b/storybook/stories/small_multiples/1_grid.story.tsx deleted file mode 100644 index b6643d9048..0000000000 --- a/storybook/stories/small_multiples/1_grid.story.tsx +++ /dev/null @@ -1,221 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { action } from '@storybook/addon-actions'; -import { boolean } from '@storybook/addon-knobs'; -import React, { useState } from 'react'; - -import { - ScaleType, - Position, - Chart, - Axis, - LineSeries, - GroupBy, - SmallMultiples, - Settings, - BarSeries, - AreaSeries, - Fit, - LineAnnotation, - BubbleSeries, - AnnotationDomainType, - Rotation, - RectAnnotation, -} from '@elastic/charts'; -import { getRandomNumberGenerator, SeededDataGenerator } from '@elastic/charts/src/mocks/utils'; - -import { useBaseTheme } from '../../use_base_theme'; - -const getRandomNumber = getRandomNumberGenerator(); -const dg = new SeededDataGenerator(); - -const data1 = dg.generateGroupedSeries(10, 3); -const data2 = dg.generateGroupedSeries(10, 3).map((d) => { - return getRandomNumber() > 0.95 ? { ...d, y: null } : d; -}); -const data3 = dg.generateGroupedSeries(10, 3).map((d) => { - return getRandomNumber() > 0.95 ? { ...d, y: null } : d; -}); - -export const Example = () => { - const splitVertically = boolean('vertical split', true); - const splitHorizontally = boolean('horizontal split', true); - const [rotationIndex, setRotationIndex] = useState(0); - const rot: Rotation = ([0, -90, 90, 0] as Rotation[])[rotationIndex]; - const showLegend = boolean('Show Legend', true); - return ( - <> - g - - - - - d.toFixed(2)} - /> - - { - return id; - }} - sort="alphaAsc" - /> - { - return g; - }} - sort="alphaAsc" - /> - - - - } - style={{ - line: { - stroke: 'red', - strokeWidth: 2, - opacity: 0.8, - }, - }} - zIndex={-10} - /> - - } - style={{ - line: { - stroke: 'blue', - strokeWidth: 5, - opacity: 0.8, - }, - }} - zIndex={-10} - /> - - - - - - - - ); -}; -Example.parameters = { - markdown: `If your data is in UTC timezone, your tooltip and axis labels can be configured - to visualize the time translated to your local timezone. You should be able to see the - first value on \`2019-01-01 01:00:00.000 \``, -}; diff --git a/storybook/stories/small_multiples/8_sorting.story.tsx b/storybook/stories/small_multiples/8_sorting.story.tsx new file mode 100644 index 0000000000..4f3c526327 --- /dev/null +++ b/storybook/stories/small_multiples/8_sorting.story.tsx @@ -0,0 +1,78 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { select } from '@storybook/addon-knobs'; +import React from 'react'; + +import { + ScaleType, + Position, + Chart, + Axis, + GroupBy, + SmallMultiples, + Settings, + BarSeries, + Predicate, +} from '@elastic/charts'; + +/** + * This story is used on VRTs to test the sorting logic of the dataIndex sort predicate + */ +export const Example = () => { + const data: [string, number][] = [ + ['3', 100], + ['5', 80], + ['1', 50], + ['2', 30], + ['6', 12], + ['4', 10], + ['7', 5], + ]; + + return ( + + + + + + { + return datum[0]; + }} + sort={select( + 'Chart sorting', + { + ...Predicate, + }, + Predicate.DataIndex, + )} + /> + + + { + return `#logins day ${si.smVerticalAccessorValue}`; + }} + xScaleType={ScaleType.Ordinal} + yScaleType={ScaleType.Linear} + timeZone="local" + xAccessor={() => ''} + yAccessors={[1]} + data={data} + /> + + ); +}; +Example.parameters = { + markdown: `You can sort your small multiples by the \`GroupBy.by\` value in ascending/descending order. + If the sort is configured with the \`dataIndex\` predicate the small multiples + will keep the order of the passed data array.`, +}; diff --git a/storybook/stories/small_multiples/small_multiples.stories.tsx b/storybook/stories/small_multiples/small_multiples.stories.tsx index ae7570569f..f890de1562 100644 --- a/storybook/stories/small_multiples/small_multiples.stories.tsx +++ b/storybook/stories/small_multiples/small_multiples.stories.tsx @@ -18,3 +18,5 @@ export { Example as gridLines } from './3_grid_lines.story'; export { Example as histogramBars } from './5_histogram_bars.story'; export { Example as heterogeneous } from './6_heterogeneous_cartesians.story'; export { Example as sunbursts } from './7_sunbursts.story'; + +export { Example as sorting } from './8_sorting.story';