diff --git a/.eslintrc.js b/.eslintrc.js index f322e771f84..4e262da1913 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -356,6 +356,8 @@ module.exports = { { files: ['stories/**/*.ts?(x)', '*.test.ts?(x)'], rules: { + 'jsx-a11y/no-static-element-interactions': 0, + 'jsx-a11y/click-events-have-key-events': 0, 'no-restricted-properties': [ process.env.NODE_ENV === 'production' ? 2 : 1, { diff --git a/.storybook/style.scss b/.storybook/style.scss index bc26e8928fa..38764348d61 100644 --- a/.storybook/style.scss +++ b/.storybook/style.scss @@ -57,3 +57,8 @@ html.echVisualTesting { padding-bottom: 200px; } } + +// for using EuiWrappingPopover in stories +.euiPopover__anchor { + width: 100%; +} diff --git a/api/charts.api.md b/api/charts.api.md index 020256230eb..26dc5e3fb78 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -738,10 +738,18 @@ export interface LayerValue { value: number; } +// @public +export type LegendAction = ComponentType; + +// @public +export interface LegendActionProps { + series: SeriesIdentifier; +} + // Warning: (ae-missing-release-tag) "LegendColorPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export type LegendColorPicker = React.ComponentType; +export type LegendColorPicker = ComponentType; // Warning: (ae-missing-release-tag) "LegendColorPickerProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -764,6 +772,7 @@ export type LegendItemListener = (series: SeriesIdentifier | null) => void; // @public (undocumented) export interface LegendStyle { horizontalHeight: number; + margin: number; spacingBuffer: number; verticalWidth: number; } @@ -1273,6 +1282,7 @@ export interface SettingsSpec extends Spec { externalPointerEvents: ExternalPointerEventsSettings; flatLegend?: boolean; hideDuplicateAxes: boolean; + legendAction?: LegendAction; // (undocumented) legendColorPicker?: LegendColorPicker; legendMaxDepth?: number; diff --git a/integration/helpers.ts b/integration/helpers.ts index 655724c4d00..54eb79c9d6e 100644 --- a/integration/helpers.ts +++ b/integration/helpers.ts @@ -22,7 +22,7 @@ import { join, resolve } from 'path'; import { getStorybook, configure } from '@storybook/react'; -export type StoryInfo = [string, string]; +export type StoryInfo = [string, string, number]; export type StoryGroupInfo = [string, string, StoryInfo[]]; @@ -67,6 +67,22 @@ function encodeString(string: string) { .toLowerCase(); } +/** + * Stories to skip in all vrt based on group. + */ +const storiesToSkip: Record = { + // Interactions: ['Some story name'], +}; + +/** + * Delays for stories to skip in all vrt based on group. + */ +const storiesToDelay: Record> = { + Legend: { + Actions: 200, // needed for icon to load + }, +}; + export function getStorybookInfo(): StoryGroupInfo[] { configure(requireAllStories(__dirname, '../stories'), module); @@ -74,11 +90,12 @@ export function getStorybookInfo(): StoryGroupInfo[] { .filter(({ kind }) => kind) .map(({ kind: group, stories: storiesRaw }) => { const stories: StoryInfo[] = storiesRaw - .filter(({ name }) => name) + .filter(({ name }) => name && !storiesToSkip[group]?.includes(name)) .map(({ name: title }) => { // cleans story name to match url params const encodedTitle = encodeString(title); - return [title, encodedTitle]; + const delay = (storiesToDelay[group] ?? {})[title]; + return [title, encodedTitle, delay]; }); const encodedGroup = encodeString(group); diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png index c5c5662f5e5..e16f5957b12 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png index d9a809b01bd..c7252f03922 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png index 1a81919f077..6bd76bc5429 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png index f262be3ea8a..3f2755be2d1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png index 3e65eed2cee..f79bbc0a909 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png index a518cb4cb59..e009c33fc59 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png index a518cb4cb59..e009c33fc59 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png index 1e4ecbf714d..1ccafa68e11 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png index a6e49fac9eb..71bf9fa3f4c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png index d2cf016b35c..3cc3d51ef99 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png index 9d4af6ce5f0..fcf5732e988 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png index d8c5479888b..f14c3176a3c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png index dedde919217..bbdcb2eda14 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png index 7f67a424e3c..54f68ccb4de 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png index d7ad8e98a02..b873128512a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png index 38ae0806c6a..392b1f1afea 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png index d8c5479888b..f14c3176a3c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png index 7b92c2493e0..cb53cb7a693 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png index 73a1b21da7e..49cb7824033 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png index 0502f3c2a23..f4c281be677 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png index 8e0d04e9241..22ca07ecdf8 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png index 8b7a9819d91..9af2dbd1c76 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png index de46d3a2eea..c3170d245c9 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png index e7133321cb3..a1ef5d52712 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png index 1e1b6cdc821..d26ad235a21 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png index 5d090c83082..50128342374 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png new file mode 100644 index 00000000000..9503de445b6 Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png index 98c49da8def..99aa01fbf4b 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png index b36613b15ed..aa778892870 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png index de46d3a2eea..c3170d245c9 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png index 13473e41261..c8a54ead31e 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png index a665a5a314a..80f860ba1a8 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-margins-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-margins-visually-looks-correct-1-snap.png new file mode 100644 index 00000000000..c23a53fb205 Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-margins-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png index 37cb8f00979..c6ce31cd4e3 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png index e7133321cb3..a1ef5d52712 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png index 890b2a472ea..23d609cd768 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png index 17e6d545ef1..5fd3bd0fab6 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png index b8680710c8e..d8fe90c318c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png index cb25cd90be7..c07d4f5bc5b 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png index 967210de422..66283fa71d1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png index 464e0e13bdb..cc3f65de9c4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png index af375d20e1c..fba2b3a29a1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png index 4826a6aa328..2146f8e83ea 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png index 789d43759c1..42541652910 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png index 5853bba4e2c..dbd66d1c7c4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png index 334c9205a15..b14d89b0ead 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png index f6c990308af..fab4108a8c5 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png index 853394ec15e..3a0bea1d951 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png index 53139dec022..26d9a263d15 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png index 2dc61a89e91..6c3421ff2aa 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png index 92752b6c795..a0694584314 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png index d53011a231a..26c8cc68a6e 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png index 3e0530f8464..058c96187eb 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png index 78712fb4d24..d562821b3ea 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png index 41f149bb719..8d6d006700b 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png index 0200cf56bee..5004e1839cc 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png index 3613abbf3eb..1d9add7db35 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png index 062d496a2e2..7df222a9873 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png index 062d496a2e2..7df222a9873 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png index d4d26f6888b..a166f16c334 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png index 3a8b0c5c463..f1542ca466f 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png index aaf54705299..9c804c39ac1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png index e901db56e5f..f988ad4dd11 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png index c8857ead28c..6ac96cbe9c8 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png index f7a68e89721..1118f259fd0 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png index 5f9424fc261..9cd9462421c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png index 9e423436f05..fed5eb728dc 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png index d9a809b01bd..c7252f03922 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png index d9a809b01bd..c7252f03922 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png index f7d06156eff..42f11c5b1a4 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png index f7d06156eff..42f11c5b1a4 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png index 1a81919f077..6bd76bc5429 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png index 84b6ba2baa9..b35c75cdbe2 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png index e8c8e3ff2bb..6ee9531fa49 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-custom-tooltip-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-custom-tooltip-1-snap.png index 425e3c5793c..96e2bc869ad 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-custom-tooltip-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-custom-tooltip-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png index d34419deb9c..e6814e9a13d 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png index d96e6a41d61..8d749cd38b0 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png index 7ccd4b6f445..bc0e63a7932 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-legend-action-on-mouse-hover-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-legend-action-on-mouse-hover-1-snap.png new file mode 100644 index 00000000000..c37017d1f1b Binary files /dev/null and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-legend-action-on-mouse-hover-1-snap.png differ diff --git a/integration/tests/all.test.ts b/integration/tests/all.test.ts index 134bea533b1..1c365012c6e 100644 --- a/integration/tests/all.test.ts +++ b/integration/tests/all.test.ts @@ -29,10 +29,10 @@ const storyGroups = getStorybookInfo(); describe('Baseline Visual tests for all stories', () => { describe.each(storyGroups)('%s', (_group, encodedGroup, stories) => { - describe.each(stories)('%s', (_title, encodedTitle) => { + describe.each(stories)('%s', (_title, encodedTitle, delay) => { it('visually looks correct', async() => { const url = `http://localhost:9001?id=${encodedGroup}--${encodedTitle}`; - await common.expectChartAtUrlToMatchScreenshot(url); + await common.expectChartAtUrlToMatchScreenshot(url, { delay }); }); }); }); diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts index bd5c3d962fd..630d78b465c 100644 --- a/integration/tests/legend_stories.test.ts +++ b/integration/tests/legend_stories.test.ts @@ -54,4 +54,16 @@ describe('Legend stories', () => { }, ); }); + + it('should render legend action on mouse hover', async() => { + const action = async() => + await common.moveMouseRelativeToDOMElement({ left: 30, top: 10 }, '.echLegendItem'); + await common.expectChartAtUrlToMatchScreenshot( + 'http://localhost:9001/?path=/story/legend--actions', + { + action, + delay: 200, // needed for icon to load + }, + ); + }); }); diff --git a/src/chart_types/xy_chart/utils/dimensions.test.ts b/src/chart_types/xy_chart/utils/dimensions.test.ts index d43cd2e3b5c..79ba2fe7222 100644 --- a/src/chart_types/xy_chart/utils/dimensions.test.ts +++ b/src/chart_types/xy_chart/utils/dimensions.test.ts @@ -73,6 +73,7 @@ describe('Computed chart dimensions', () => { verticalWidth: 10, horizontalHeight: 10, spacingBuffer: 10, + margin: 0, }; const defaultTheme = LIGHT_THEME; const chartTheme = { diff --git a/src/chart_types/xy_chart/utils/dimensions.ts b/src/chart_types/xy_chart/utils/dimensions.ts index c65f1f5d3bb..02c1da23f90 100644 --- a/src/chart_types/xy_chart/utils/dimensions.ts +++ b/src/chart_types/xy_chart/utils/dimensions.ts @@ -32,8 +32,6 @@ import { AxisSpec } from './specs'; * @param chartTheme the theme style of the chart * @param axisDimensions the axis dimensions * @param axisSpecs the axis specs - * @param showLegend is the legend shown - * @param legendPosition the optional legend position * @internal */ export function computeChartDimensions( diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap index b97537d8343..a49d816bfd4 100644 --- a/src/components/__snapshots__/chart.test.tsx.snap +++ b/src/components/__snapshots__/chart.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Chart should render the legend name test 1`] = `"
  • test
"`; +exports[`Chart should render the legend name test 1`] = `"
  • test
"`; diff --git a/src/components/legend/__snapshots__/legend.test.tsx.snap b/src/components/legend/__snapshots__/legend.test.tsx.snap index b45628e10d0..b8832b2a73f 100644 --- a/src/components/legend/__snapshots__/legend.test.tsx.snap +++ b/src/components/legend/__snapshots__/legend.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"
  • splita
  • splitb
  • splitc
  • splitd
    • "`; +exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"
  • splita
  • splitb
  • splitc
  • splitd
    • "`; -exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"
  • splita
  • splitb
  • splitc
  • splitd
    • "`; +exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"
  • splita
  • splitb
  • splitc
  • splitd
    • "`; exports[`Legend #legendColorPicker should render colorPicker when color is clicked 1`] = `"
    Custom Color Picker
    "`; -exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"
  • splita
    • Custom Color Picker
  • splitb
  • splitc
  • splitd
    • "`; +exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"
  • splita
    • Custom Color Picker
  • splitb
  • splitc
  • splitd
    • "`; diff --git a/src/components/legend/_legend_item.scss b/src/components/legend/_legend_item.scss index 32665eee348..f6166bc1554 100644 --- a/src/components/legend/_legend_item.scss +++ b/src/components/legend/_legend_item.scss @@ -15,6 +15,19 @@ $legendItemVerticalPadding: $echLegendRowGap / 2; } } + &:hover { + background-color: #e7f0f7; + } + + &__action { + height: 100%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + margin-left: $euiSizeXS; + } + &__color { margin-right: $euiSizeXS; } @@ -43,6 +56,7 @@ $legendItemVerticalPadding: $echLegendRowGap / 2; &__extra { @include euiFontSizeXS; text-align: right; + flex: 0 0 auto; margin-left: $euiSizeXS; font-feature-settings: 'tnum'; @@ -53,8 +67,8 @@ $legendItemVerticalPadding: $echLegendRowGap / 2; &--right, &--left { - padding-top: $legendItemVerticalPadding; - padding-bottom: $legendItemVerticalPadding; + margin-top: $legendItemVerticalPadding; + margin-bottom: $legendItemVerticalPadding; } @include internetExplorerOnly { @@ -64,8 +78,8 @@ $legendItemVerticalPadding: $echLegendRowGap / 2; margin-right: $euiSizeL; } - padding-top: $legendItemVerticalPadding; - padding-bottom: $legendItemVerticalPadding; + margin-top: $legendItemVerticalPadding; + margin-bottom: $legendItemVerticalPadding; } &--hidden { diff --git a/src/components/legend/color.tsx b/src/components/legend/color.tsx index 1c65e27b615..61a934f24da 100644 --- a/src/components/legend/color.tsx +++ b/src/components/legend/color.tsx @@ -48,7 +48,12 @@ export function Color({ color, isSeriesHidden = false, hasColorPicker, onClick } }); return ( -
    +
    ); diff --git a/src/components/legend/legend.tsx b/src/components/legend/legend.tsx index b536fa35c56..ea08a113413 100644 --- a/src/components/legend/legend.tsx +++ b/src/components/legend/legend.tsx @@ -23,7 +23,7 @@ import { connect } from 'react-redux'; import { Dispatch, bindActionCreators } from 'redux'; import { LegendItem, LegendItemExtraValues } from '../../commons/legend'; -import { LegendItemListener, BasicListener, LegendColorPicker } from '../../specs'; +import { LegendItemListener, BasicListener, LegendColorPicker, LegendAction } from '../../specs'; import { clearTemporaryColors, setTemporaryColor, setPersistedColor } from '../../state/actions/colors'; import { onToggleLegend, @@ -55,6 +55,7 @@ interface LegendStateProps { showExtra: boolean; extraValues: Map; colorPicker?: LegendColorPicker; + action?: LegendAction; onItemOver?: LegendItemListener; onItemOut?: BasicListener; onItemClick?: LegendItemListener; @@ -80,7 +81,7 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) { if (items.length === 0) { return null; } - const legendContainerStyle = getLegendStyle(position, size); + const legendContainerStyle = getLegendStyle(position, size, legend.margin); const legendListStyle = getLegendListStyle(position, chartMargins, legend); const legendClasses = classNames('echLegend', `echLegend--${position}`, { 'echLegend--debug': debug, @@ -101,6 +102,7 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) { mouseOverAction: props.onItemOverAction, toggleDeselectSeriesAction: props.onToggleDeselectSeriesAction, colorPicker: props.colorPicker, + action: props.action, }; return (
    @@ -148,6 +150,7 @@ const mapStateToProps = (state: GlobalChartState): LegendStateProps => { showLegendExtra, debug, legendColorPicker, + legendAction, onLegendItemOver: onItemOver, onLegendItemOut: onItemOut, onLegendItemClick: onItemClick, @@ -165,6 +168,7 @@ const mapStateToProps = (state: GlobalChartState): LegendStateProps => { showExtra: showLegendExtra, extraValues: getLegendExtraValuesSelector(state), colorPicker: legendColorPicker, + action: legendAction, onItemOver, onItemOut, onItemClick, diff --git a/src/components/legend/legend_item.tsx b/src/components/legend/legend_item.tsx index 35877cf4ba9..4480f35af18 100644 --- a/src/components/legend/legend_item.tsx +++ b/src/components/legend/legend_item.tsx @@ -22,7 +22,7 @@ import React, { Component, createRef, MouseEventHandler } from 'react'; import { LegendItem, LegendItemExtraValues } from '../../commons/legend'; import { SeriesIdentifier } from '../../commons/series_id'; -import { LegendItemListener, BasicListener, LegendColorPicker } from '../../specs/settings'; +import { LegendItemListener, BasicListener, LegendColorPicker, LegendAction } from '../../specs/settings'; import { clearTemporaryColors as clearTemporaryColorsAction, setTemporaryColor as setTemporaryColorAction, @@ -51,6 +51,7 @@ export interface LegendItemProps { extraValues: Map; showExtra: boolean; colorPicker?: LegendColorPicker; + action?: LegendAction; onClick?: LegendItemListener; onMouseOut?: BasicListener; onMouseOver?: LegendItemListener; @@ -85,6 +86,7 @@ export function renderLegendItem( totalItems={totalItems} position={props.position} colorPicker={props.colorPicker} + action={props.action} extraValues={props.extraValues} showExtra={props.showExtra} toggleDeselectSeriesAction={props.toggleDeselectSeriesAction} @@ -102,6 +104,7 @@ export function renderLegendItem( interface LegendItemState { isOpen: boolean; + actionActive: boolean; } /** @internal */ @@ -111,6 +114,7 @@ export class LegendListItem extends Component ref = createRef(); state: LegendItemState = { isOpen: false, + actionActive: false, }; shouldComponentUpdate(nextProps: LegendItemProps, nextState: LegendItemState) { @@ -197,7 +201,7 @@ export class LegendListItem extends Component } render() { - const { extraValues, item, showExtra, colorPicker, position, totalItems } = this.props; + const { extraValues, item, showExtra, colorPicker, position, totalItems, action: Action } = this.props; const { color, isSeriesHidden, isItemHidden, seriesIdentifier, label } = item; const itemClassNames = classNames('echLegendItem', `echLegendItem--${position}`, { 'echLegendItem--hidden': isSeriesHidden, @@ -227,6 +231,12 @@ export class LegendListItem extends Component /> {showExtra && extra != null && renderExtra(extra, isSeriesHidden)} + {Action + && ( +
    + +
    + )} {this.renderColorPicker()} diff --git a/src/components/legend/style_utils.ts b/src/components/legend/style_utils.ts index a458df1ecda..d8770d506fa 100644 --- a/src/components/legend/style_utils.ts +++ b/src/components/legend/style_utils.ts @@ -23,12 +23,17 @@ import { Margins } from '../../utils/dimensions'; import { LegendStyle as ThemeLegendStyle } from '../../utils/themes/theme'; /** @internal */ -export interface LegendStyle { - maxHeight?: string; - maxWidth?: string; +export type LegendStyle = { width?: string; + maxWidth?: string; + marginLeft?: number; + marginRight?: number; +} | { height?: string; -} + maxHeight?: string; + marginTop?: number; + marginBottom?: number; +}; /** @internal */ export interface LegendListStyle { @@ -70,17 +75,21 @@ export function getLegendListStyle( * @param size the computed size of the legend * @internal */ -export function getLegendStyle(position: Position, size: BBox): LegendStyle { +export function getLegendStyle(position: Position, size: BBox, margin: number): LegendStyle { if (position === Position.Left || position === Position.Right) { const width = `${size.width}px`; return { width, maxWidth: width, + marginLeft: margin, + marginRight: margin, }; } const height = `${size.height}px`; return { height, maxHeight: height, + marginTop: margin, + marginBottom: margin, }; } diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx index 768531fc827..e529896d862 100644 --- a/src/specs/settings.tsx +++ b/src/specs/settings.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React from 'react'; +import React, { ComponentType } from 'react'; import { Spec } from '.'; import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup'; @@ -190,6 +190,24 @@ export interface ExternalPointerEventsSettings { } } +/** + * Legend action component props + * + * @public + */ +export interface LegendActionProps { + /** + * Series identifier for the given series + */ + series: SeriesIdentifier; +} +/** + * Legend action component used to render actions next to legend items + * + * @public + */ +export type LegendAction = ComponentType; + export interface LegendColorPickerProps { /** * Anchor used to position picker @@ -212,7 +230,7 @@ export interface LegendColorPickerProps { */ seriesIdentifier: SeriesIdentifier; } -export type LegendColorPicker = React.ComponentType; +export type LegendColorPicker = ComponentType; /** * Buffer between cursor and point to trigger interaction @@ -289,6 +307,10 @@ export interface SettingsSpec extends Spec { onRenderChange?: RenderChangeListener; xDomain?: Domain | DomainRange; resizeDebounce?: number; + /** + * Render slot to render action for legend + */ + legendAction?: LegendAction; legendColorPicker?: LegendColorPicker; /** * Block the brush tool on a specific axis: x, y or both. diff --git a/src/state/selectors/get_chart_container_dimensions.ts b/src/state/selectors/get_chart_container_dimensions.ts index 1d88f8e37d3..d4347dce0fb 100644 --- a/src/state/selectors/get_chart_container_dimensions.ts +++ b/src/state/selectors/get_chart_container_dimensions.ts @@ -39,7 +39,7 @@ export const getChartContainerDimensionsSelector = createCachedSelector( return { left: 0, top: 0, - width: parentDimensions.width - legendSize.width, + width: parentDimensions.width - legendSize.width - (legendSize.margin * 2), height: parentDimensions.height, }; } @@ -47,7 +47,7 @@ export const getChartContainerDimensionsSelector = createCachedSelector( left: 0, top: 0, width: parentDimensions.width, - height: parentDimensions.height - legendSize.height, + height: parentDimensions.height - legendSize.height - (legendSize.margin * 2), }; }, )(getChartIdSelector); diff --git a/src/state/selectors/get_legend_size.ts b/src/state/selectors/get_legend_size.ts index 7b39c8d5029..4ddd3fde1a7 100644 --- a/src/state/selectors/get_legend_size.ts +++ b/src/state/selectors/get_legend_size.ts @@ -40,7 +40,7 @@ const VERTICAL_PADDING = 4; /** @internal */ export const getLegendSizeSelector = createCachedSelector( [getSettingsSpecSelector, getChartThemeSelector, getParentDimensionSelector, getLegendItemsLabelsSelector], - (settings, theme, parentDimensions, labels): BBox => { + (settings, theme, parentDimensions, labels): BBox & { margin: number } => { const bboxCalculator = new CanvasTextBBoxCalculator(); const bbox = labels.reduce( (acc, { label, depth }) => { @@ -67,10 +67,10 @@ export const getLegendSizeSelector = createCachedSelector( bboxCalculator.destroy(); const { showLegend, showLegendExtra: showLegendDisplayValue, legendPosition } = settings; const { - legend: { verticalWidth, spacingBuffer }, + legend: { verticalWidth, spacingBuffer, margin }, } = theme; if (!showLegend) { - return { width: 0, height: 0 }; + return { width: 0, height: 0, margin: 0 }; } const legendItemWidth = MARKER_WIDTH + MARKER_LEFT_MARGIN + bbox.width + (showLegendDisplayValue ? VALUE_LEFT_MARGIN : 0); if (isVerticalAxis(legendPosition)) { @@ -78,12 +78,14 @@ export const getLegendSizeSelector = createCachedSelector( return { width: Math.floor(Math.min(legendItemWidth + spacingBuffer, verticalWidth)), height: legendItemHeight, + margin, }; } const isSingleLine = (parentDimensions.width - 20) / 200 > labels.length; return { height: isSingleLine ? bbox.height + 16 : bbox.height * 2 + 24, width: Math.floor(Math.min(legendItemWidth + spacingBuffer, verticalWidth)), + margin, }; }, )(getChartIdSelector); diff --git a/src/utils/themes/dark_theme.ts b/src/utils/themes/dark_theme.ts index 0a3d0b199b8..a5e6bfe689c 100644 --- a/src/utils/themes/dark_theme.ts +++ b/src/utils/themes/dark_theme.ts @@ -150,6 +150,7 @@ export const DARK_THEME: Theme = { verticalWidth: 200, horizontalHeight: 64, spacingBuffer: 10, + margin: 0, }, crosshair: { band: { diff --git a/src/utils/themes/light_theme.ts b/src/utils/themes/light_theme.ts index 1bb04762db6..bf3905ee577 100644 --- a/src/utils/themes/light_theme.ts +++ b/src/utils/themes/light_theme.ts @@ -150,6 +150,7 @@ export const LIGHT_THEME: Theme = { verticalWidth: 200, horizontalHeight: 64, spacingBuffer: 10, + margin: 0, }, crosshair: { band: { diff --git a/src/utils/themes/theme.ts b/src/utils/themes/theme.ts index 94b9d772197..48804e6629b 100644 --- a/src/utils/themes/theme.ts +++ b/src/utils/themes/theme.ts @@ -155,6 +155,12 @@ export interface LegendStyle { * Smaller values render a more compact legend */ spacingBuffer: number; + /** + * Legend padding. The Chart margins are independent of the legend. + * + * TODO: make SimplePadding when after axis changes are added + */ + margin: number; } export interface Theme { /** diff --git a/stories/legend/11_legend_actions.tsx b/stories/legend/11_legend_actions.tsx new file mode 100644 index 00000000000..55a43d44c9c --- /dev/null +++ b/stories/legend/11_legend_actions.tsx @@ -0,0 +1,166 @@ +/* + * 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 { EuiIcon, EuiPopover, EuiContextMenu, EuiContextMenuPanelDescriptor, EuiWrappingPopover, EuiColorPicker, EuiSpacer, EuiButton } from '@elastic/eui'; +import { boolean } from '@storybook/addon-knobs'; +import React, { useState } from 'react'; + +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendAction, XYChartSeriesIdentifier, LegendColorPicker } from '../../src'; +import * as TestDatasets from '../../src/utils/data_samples/test_dataset'; +import { getPositionKnob } from '../utils/knobs'; + +const getAction = (hideActions: boolean): LegendAction => ({ series }) => { + const [popoverOpen, setPopoverOpen] = useState(false); + + const getPanels = (series: XYChartSeriesIdentifier): EuiContextMenuPanelDescriptor[] => [ + { + id: 0, + title: 'Legend Actions', + items: [ + { + name: 'Alert series specId', + icon: , + onClick: () => { + setPopoverOpen(false); + setTimeout(() => { + window.alert(`Selected series: ${series.specId}`); + }, 100); + }, + }, + { + name: 'Alert series keys', + icon: , + onClick: () => { + setPopoverOpen(false); + setTimeout(() => { + window.alert(`Selected series: [${series.seriesKeys.join(', ')}]`); + }, 100); + }, + }, + { + name: 'Filter series', + icon: , + onClick: () => { + setPopoverOpen(false); + setTimeout(() => { + window.alert('Series Filtered!'); + }, 100); + }, + }, + { + name: 'Like series', + icon: , + onClick: () => { + setPopoverOpen(false); + setTimeout(() => { + window.alert('Series liked!!!'); + }, 100); + }, + }, + ], + }, + ]; + + const Button = ( +
    setPopoverOpen(!popoverOpen)} + > + +
    + ); + + return ( + : Button} + isOpen={popoverOpen} + closePopover={() => setPopoverOpen(false)} + panelPaddingSize="none" + withTitle + anchorPosition="upLeft" + > + + + ); +}; + +const renderColorPicker: LegendColorPicker = ({ anchor, color, onClose, onChange }) => ( + + + + + Done + + +); + +export const Example = () => { + const hideActions = boolean('Hide legend action', false); + const showLegendExtra = !boolean('Hide legend extra', false); + const showColorPicker = !boolean('Hide color picker', true); + + return ( + + + + Number(d).toFixed(2)} /> + + + + ); +}; + +Example.story = { + parameters: { + info: { + text: + 'The `legendAction` action prop allows you to pass a render function/component that will render next to the legend item.', + }, + }, +}; diff --git a/stories/legend/12_legend_margins.tsx b/stories/legend/12_legend_margins.tsx new file mode 100644 index 00000000000..a0712cdb99d --- /dev/null +++ b/stories/legend/12_legend_margins.tsx @@ -0,0 +1,60 @@ +/* + * 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 { number } from '@storybook/addon-knobs'; +import React from 'react'; + +import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src'; +import { BARCHART_1Y1G } from '../../src/utils/data_samples/test_dataset'; + +export const Example = () => ( + + + + Number(d).toFixed(2)} /> + + + +); + +Example.story = { + parameters: { + info: { + text: + 'The `Theme.chartMargins` does not contain the legend element. Adding legend margins via `Theme.legend.margin` allows adding margins to the Left/right or Top/Bottom of the legend.', + }, + }, +}; diff --git a/stories/legend/9_color_picker.tsx b/stories/legend/9_color_picker.tsx index a267b3fdd74..33bf7f22d85 100644 --- a/stories/legend/9_color_picker.tsx +++ b/stories/legend/9_color_picker.tsx @@ -46,7 +46,7 @@ export const Example = () => { onChangeAction(color); }; return ( - + diff --git a/stories/legend/legend.stories.tsx b/stories/legend/legend.stories.tsx index 65a0d360afb..846a71f1748 100644 --- a/stories/legend/legend.stories.tsx +++ b/stories/legend/legend.stories.tsx @@ -36,3 +36,5 @@ export { Example as displayValuesInLegendElements } from './7_display_values'; export { Example as legendSpacingBuffer } from './8_spacing_buffer'; export { Example as colorPicker } from './9_color_picker'; export { Example as piechart } from './10_sunburst'; +export { Example as actions } from './11_legend_actions'; +export { Example as margins } from './12_legend_margins';