diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/test-last-bucket-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/test-last-bucket-chrome-linux.png new file mode 100644 index 00000000000..c6d6d9a04f0 Binary files /dev/null and b/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/test-last-bucket-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/axes/different-tooltip-formatter-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/axes/different-tooltip-formatter-chrome-linux.png index 4b504148fb2..2c82f863b2f 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/axes/different-tooltip-formatter-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/axes/different-tooltip-formatter-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-1y-0g-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-1y-0g-chrome-linux.png index b01329bfc05..125590b31eb 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-1y-0g-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-1y-0g-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-1y-1g-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-1y-1g-chrome-linux.png index 9ec13339b16..a6cbe8c4764 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-1y-1g-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-1y-1g-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-2y-0g-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-2y-0g-chrome-linux.png index 1cc745a0b70..db60dce3173 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-2y-0g-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-2y-0g-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-2y-1g-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-2y-1g-chrome-linux.png index 0b2dee01f4d..50d72d73057 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-2y-1g-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/bar-chart-2y-1g-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/order-bins-by-sum-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/order-bins-by-sum-chrome-linux.png index 6fe23cf3dd7..0e7a8c57f30 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/order-bins-by-sum-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/order-bins-by-sum-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/mixed-charts/polarized-stacked-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/mixed-charts/polarized-stacked-chrome-linux.png index 4d79efd45e3..8660ab33822 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/mixed-charts/polarized-stacked-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/mixed-charts/polarized-stacked-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/negative-90-degree-ordinal-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/negative-90-degree-ordinal-chrome-linux.png index 83c39d75070..b8ffe54c69d 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/negative-90-degree-ordinal-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/negative-90-degree-ordinal-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-0-deg-ordinal-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-0-deg-ordinal-chrome-linux.png index 494128f0ec9..fc9cf8f9e4b 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-0-deg-ordinal-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-0-deg-ordinal-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-180-deg-ordinal-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-180-deg-ordinal-chrome-linux.png index 01e7db48d06..6fee02dbcb9 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-180-deg-ordinal-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-180-deg-ordinal-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-90-deg-ordinal-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-90-deg-ordinal-chrome-linux.png index 4a3e3607936..2b647fa9810 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-90-deg-ordinal-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/rotations-90-deg-ordinal-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/with-ordinal-axis-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/with-ordinal-axis-chrome-linux.png index 33fbd3e5f2c..5723810986d 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/with-ordinal-axis-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/rotations/with-ordinal-axis-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/area-series-color-variant-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/area-series-color-variant-chrome-linux.png index 5e55a7872a5..9c2cc865889 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/area-series-color-variant-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/area-series-color-variant-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/bar-series-color-variant-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/bar-series-color-variant-chrome-linux.png index 9d9ae482db8..1f37f35424a 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/bar-series-color-variant-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/bar-series-color-variant-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-chrome-linux.png index db6c428552a..5bbb564eb25 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-config-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-config-chrome-linux.png index 91c263dfe02..5f8ba6d7e11 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-config-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-config-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-formatting-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-formatting-chrome-linux.png index fde53627897..9f42f108ad1 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-formatting-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/custom-series-name-formatting-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/line-series-color-variant-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/line-series-color-variant-chrome-linux.png index b726bbe3dc8..15c96f66c65 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/line-series-color-variant-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/stylings/line-series-color-variant-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-size-legends-with-ordinal-x-axis-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-size-legends-with-ordinal-x-axis-chrome-linux.png index ce6f4f762d8..f54fde07593 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-size-legends-with-ordinal-x-axis-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-size-legends-with-ordinal-x-axis-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-all-custom-tick-formatters-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-all-custom-tick-formatters-chrome-linux.png index c1d4b46dfaa..a7ec697b98a 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-all-custom-tick-formatters-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-all-custom-tick-formatters-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-axis-tick-formatter-with-no-header-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-axis-tick-formatter-with-no-header-formatter-chrome-linux.png index be683f778a5..f7193eab08c 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-axis-tick-formatter-with-no-header-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-axis-tick-formatter-with-no-header-formatter-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-header-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-header-formatter-chrome-linux.png index 32c9f459092..b02e5ab4c16 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-header-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-header-formatter-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-series-tick-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-series-tick-formatter-chrome-linux.png index ba9f2b805d2..26a77f45546 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-series-tick-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-series-tick-formatter-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-header-formatter-for-x-axis-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-header-formatter-for-x-axis-chrome-linux.png index c1d4b46dfaa..a7ec697b98a 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-header-formatter-for-x-axis-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-header-formatter-for-x-axis-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-chrome-linux.png index dc65fbf52ce..170dd8f9df5 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-missing-series-tick-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-missing-series-tick-formatter-chrome-linux.png index b842fb3626b..939c071d2f4 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-missing-series-tick-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-missing-series-tick-formatter-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-values-in-legend-chrome-linux.png similarity index 100% rename from e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png rename to e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-values-in-legend-chrome-linux.png diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-for-split-and-y-accessors-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-for-split-and-y-accessors-chrome-linux.png index 39779be0fd1..4f6e5591f23 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-for-split-and-y-accessors-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-for-split-and-y-accessors-chrome-linux.png differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-flat-legend-extra-values-on-sunburst-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-flat-legend-extra-values-on-sunburst-chrome-linux.png deleted file mode 100644 index 22bc93734af..00000000000 Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-flat-legend-extra-values-on-sunburst-chrome-linux.png and /dev/null differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-flat-legend-extra-values-on-treemap-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-flat-legend-extra-values-on-treemap-chrome-linux.png deleted file mode 100644 index 8daa418d94d..00000000000 Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-flat-legend-extra-values-on-treemap-chrome-linux.png and /dev/null differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-nested-legend-extra-values-on-sunburst-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-nested-legend-extra-values-on-sunburst-chrome-linux.png deleted file mode 100644 index 813454e2041..00000000000 Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-nested-legend-extra-values-on-sunburst-chrome-linux.png and /dev/null differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-nested-legend-extra-values-on-treemap-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-nested-legend-extra-values-on-treemap-chrome-linux.png deleted file mode 100644 index 05daf63626f..00000000000 Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/extra-values/should-display-nested-legend-extra-values-on-treemap-chrome-linux.png and /dev/null differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-flat-legend-values-on-sunburst-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-flat-legend-values-on-sunburst-chrome-linux.png new file mode 100644 index 00000000000..4a0f6a5660e Binary files /dev/null and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-flat-legend-values-on-sunburst-chrome-linux.png differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-flat-legend-values-on-treemap-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-flat-legend-values-on-treemap-chrome-linux.png new file mode 100644 index 00000000000..f1d3677cdee Binary files /dev/null and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-flat-legend-values-on-treemap-chrome-linux.png differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-nested-legend-values-on-sunburst-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-nested-legend-values-on-sunburst-chrome-linux.png new file mode 100644 index 00000000000..1b9fa0a6e1a Binary files /dev/null and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-nested-legend-values-on-sunburst-chrome-linux.png differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-nested-legend-values-on-treemap-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-nested-legend-values-on-treemap-chrome-linux.png new file mode 100644 index 00000000000..c3a7c9bbed5 Binary files /dev/null and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-values/should-display-nested-legend-values-on-treemap-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-average-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-average-chrome-linux.png index a92f7c9b67a..36ca2308497 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-average-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-average-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-carry-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-carry-chrome-linux.png index 2a9e1b9bf67..c16ce17af66 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-carry-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-carry-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-explicit-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-explicit-chrome-linux.png index 0f31b7d5fb1..8a83c2a011a 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-explicit-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-explicit-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-linear-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-linear-chrome-linux.png index 420662d2685..d208da84876 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-linear-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-linear-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-lookahead-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-lookahead-chrome-linux.png index b5d50d9d6dd..3cebaa60ae3 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-lookahead-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-lookahead-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-nearest-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-nearest-chrome-linux.png index ade062c6ab5..e33b252dd53 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-nearest-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-nearest-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-none-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-none-chrome-linux.png index b4caa677251..faebf827b27 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-none-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-none-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-zero-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-zero-chrome-linux.png index 7a57a5f9067..c7fe473afde 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-zero-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts-as-percentage/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-zero-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-average-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-average-chrome-linux.png index 62e47dde8f6..2bb4c6dc4b0 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-average-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-average-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-carry-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-carry-chrome-linux.png index b39ea0efb83..ee87c6dd4ea 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-carry-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-carry-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-explicit-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-explicit-chrome-linux.png index 7fc5151c4ac..c793a743cfb 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-explicit-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-explicit-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-linear-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-linear-chrome-linux.png index 055183d4a3d..ce67996f61a 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-linear-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-linear-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-lookahead-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-lookahead-chrome-linux.png index bfbd72cb88a..4c9e0842dc0 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-lookahead-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-lookahead-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-nearest-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-nearest-chrome-linux.png index 7b9e9c6fb8e..e0a40b885f9 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-nearest-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-nearest-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-none-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-none-chrome-linux.png index 7ff42756398..cbcd44c1ffe 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-none-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-none-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-zero-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-zero-chrome-linux.png index 062ea59fabc..2badef2e7e9 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-zero-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/fitting-functions-stacked-charts/area-charts-ordinal-dataset-no-end-value/should-display-correct-fit-for-type-zero-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png index 4a11c0c6e0d..be46b2cb03b 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index c67230d2008..00ec478df73 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png index 30a45f59e77..b4d1f98d4fa 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 5ed22dbdfef..41b6835e224 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png index 18fd2b1b60f..1d8521c6297 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 56be722fce6..e6adff2341a 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png index 2e607eb5991..c446b3aec61 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index dc0bc4dd6bd..7285617c91a 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png index 18fd2b1b60f..1d8521c6297 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 56be722fce6..e6adff2341a 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png index 2e607eb5991..c446b3aec61 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index dc0bc4dd6bd..7285617c91a 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png index 253032eb06f..be03d38da56 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 941b6e090f9..69536107e00 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png index a8918199354..990492a3b61 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index ca70a70e270..166e8a2d76d 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png index 14f264acdde..14e80a5b847 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 5b0b3608b9d..5dc70c17d6d 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png index bc22f24216f..51daebf6f3d 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index cd142070b2d..cb5113dd0fb 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png index 60cba965b47..c7bab047790 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index a958d4e4fe6..07763f8add4 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png index 3f20022d683..51daebf6f3d 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 2d7e9892dc1..a55f48884f9 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png index c21a41898d5..47cd4304705 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 747b4b60200..869ea835c95 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png index bc45c83f273..ed4a5c001dc 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 0e0bd5d5b98..effb9932f22 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png index db85be77d43..72e6d9f145c 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 33669e09f85..5233a109f1e 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png index 201babf098b..732ecb0069c 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 920ca833ea0..4c80e1bda1d 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png index 0f1c95cb1d5..cd426bf369a 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 3c1a2169ba7..514014a8c15 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png index 5dce3b957a0..b58949af777 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-display-correct-stacking-chrome-linux.png differ diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png index 1c4447020b6..325e42688b8 100644 Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ diff --git a/e2e/tests/interactions.test.ts b/e2e/tests/interactions.test.ts index c07668ecffb..3ce6e0ca4d2 100644 --- a/e2e/tests/interactions.test.ts +++ b/e2e/tests/interactions.test.ts @@ -256,7 +256,7 @@ test.describe('Interactions', () => { ); }); - test('show synced extra values in legend', async ({ page }) => { + test('show synced values in legend', async ({ page }) => { await common.expectChartWithMouseAtUrlToMatchScreenshot(page)( 'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-Series type_Top Chart=line&knob-enable external tooltip_Top Chart=true&knob-Series type_Bottom Chart=line&knob-enable external tooltip_Bottom Chart=false&knob-pointer update debounce=0', { right: 200, top: 80 }, diff --git a/e2e/tests/legend_stories.test.ts b/e2e/tests/legend_stories.test.ts index 29ea9bc32e9..38a3c948c44 100644 --- a/e2e/tests/legend_stories.test.ts +++ b/e2e/tests/legend_stories.test.ts @@ -41,13 +41,13 @@ test.describe('Legend stories', () => { test('should correctly render multiline nested legend labels', async ({ page }) => { await common.expectChartAtUrlToMatchScreenshot(page)( - 'http://localhost:9001/?path=/story/legend--piechart&globals=background:white;theme:light&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-max legend label lines=0&knob-Number of series=5&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-multiline Legend labels=true&knob-vAlign_Legend=bottom&knob-Partition Layout=sunburst&knob-flatLegend=&knob-showLegendExtra=&knob-legendMaxDepth=2&knob-legendStrategy=key', + 'http://localhost:9001/?path=/story/legend--piechart&globals=background:white;theme:light&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-max legend label lines=0&knob-Number of series=5&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-multiline Legend labels=true&knob-vAlign_Legend=bottom&knob-Partition Layout=sunburst&knob-flatLegend=&knob-legendValue=none&knob-legendMaxDepth=2&knob-legendStrategy=key', ); }); test('should correctly render very long multiline legend labels', async ({ page }) => { await common.expectChartAtUrlToMatchScreenshot(page)( - 'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-Number of series=5&knob-Partition Layout=sunburst&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-flatLegend=true&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-legendMaxDepth=3&knob-legendStrategy=key&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-max legend label lines=0&knob-showLegendExtra=true&knob-use long labels=true&knob-vAlign_Legend=bottom', + 'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-Number of series=5&knob-Partition Layout=sunburst&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-flatLegend=true&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-legendMaxDepth=3&knob-legendStrategy=key&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-max legend label lines=0&knob-legendValue=lastBucket&knob-use long labels=true&knob-vAlign_Legend=bottom', ); }); @@ -184,21 +184,21 @@ test.describe('Legend stories', () => { }); }); - test.describe('Extra values', () => { + test.describe('Legend values', () => { pwEach.test([PartitionLayout.sunburst, PartitionLayout.treemap])( - (l) => `should display flat legend extra values on ${l}`, + (l) => `should display flat legend values on ${l}`, async (page, layout) => { await common.expectChartAtUrlToMatchScreenshot(page)( - `http://localhost:9001/?path=/story/legend--piechart&knob-Partition Layout=${layout}&knob-flatLegend=true&knob-showLegendExtra=true&knob-legendMaxDepth=2`, + `http://localhost:9001/?path=/story/legend--piechart&knob-Partition Layout=${layout}&knob-flatLegend=true&knob-legendValue=lastBucket&knob-legendMaxDepth=2`, ); }, ); pwEach.test([PartitionLayout.sunburst, PartitionLayout.treemap])( - (l) => `should display nested legend extra values on ${l}`, + (l) => `should display nested legend values on ${l}`, async (page, layout) => { await common.expectChartAtUrlToMatchScreenshot(page)( - `http://localhost:9001/?path=/story/legend--piechart&knob-Partition Layout=${layout}&knob-flatLegend=false&knob-showLegendExtra=true&knob-legendMaxDepth=2`, + `http://localhost:9001/?path=/story/legend--piechart&knob-Partition Layout=${layout}&knob-flatLegend=false&knob-legendValue=lastBucket&knob-legendMaxDepth=2`, ); }, ); diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index a4e6bc2826f..76b49d09229 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -662,7 +662,7 @@ export interface CustomLegendProps { label: CategoryLabel; seriesType?: SeriesType; pointStyle?: PointStyle; - extraValue?: PrimitiveValue; + value?: PrimitiveValue; isSeriesHidden?: boolean; onItemOverActon: () => void; onItemOutAction: () => void; @@ -1623,6 +1623,7 @@ export interface LegendSpec { legendSize: number; legendSort?: SeriesCompareFn; legendStrategy?: LegendStrategy; + legendValue: 'none' | 'lastBucket' | 'lastInSeries' | 'avg' | 'min' | 'max' | 'sum'; // (undocumented) onLegendItemClick?: LegendItemListener; // (undocumented) @@ -1634,7 +1635,6 @@ export interface LegendSpec { // (undocumented) onLegendItemPlusClick?: LegendItemListener; showLegend: boolean; - showLegendExtra: boolean; } // @public (undocumented) @@ -2453,7 +2453,7 @@ export const Settings: (props: SFProps; +export const settingsBuildProps: BuildProps; // @public (undocumented) export type SettingsProps = ComponentProps; diff --git a/packages/charts/src/chart_types/flame_chart/internal_chart_state.ts b/packages/charts/src/chart_types/flame_chart/internal_chart_state.ts index 96dbd4e451b..3662b3588a0 100644 --- a/packages/charts/src/chart_types/flame_chart/internal_chart_state.ts +++ b/packages/charts/src/chart_types/flame_chart/internal_chart_state.ts @@ -9,7 +9,7 @@ import { FlameWithTooltip } from './flame_chart'; import { ChartType } from '..'; import { DEFAULT_CSS_CURSOR } from '../../common/constants'; -import { LegendItemExtraValues } from '../../common/legend'; +import { LegendItemValues } from '../../common/legend'; import { SeriesKey } from '../../common/series_id'; import { InternalChartState } from '../../state/chart_state'; import { InitStatus } from '../../state/selectors/get_internal_is_intialized'; @@ -28,7 +28,7 @@ export class FlameState implements InternalChartState { isChartEmpty = () => false; getLegendItemsLabels = () => []; getLegendItems = () => []; - getLegendExtraValues = () => new Map(); + getLegendValues = () => new Map(); getPointerCursor = () => DEFAULT_CSS_CURSOR; getTooltipAnchor = () => ({ x: 0, y: 0, width: 0, height: 0 }); isTooltipVisible = () => ({ visible: false, isExternal: false, displayOnly: false, isPinnable: false }); diff --git a/packages/charts/src/chart_types/goal_chart/state/chart_state.tsx b/packages/charts/src/chart_types/goal_chart/state/chart_state.tsx index a778deb8fa3..2ad6cadb062 100644 --- a/packages/charts/src/chart_types/goal_chart/state/chart_state.tsx +++ b/packages/charts/src/chart_types/goal_chart/state/chart_state.tsx @@ -71,7 +71,7 @@ export class GoalState implements InternalChartState { return EMPTY_LEGEND_ITEM_LIST; } - getLegendExtraValues() { + getLegendValues() { return EMPTY_MAP; } diff --git a/packages/charts/src/chart_types/heatmap/state/chart_state.tsx b/packages/charts/src/chart_types/heatmap/state/chart_state.tsx index eccd0dd0d1a..24175ba3f4a 100644 --- a/packages/charts/src/chart_types/heatmap/state/chart_state.tsx +++ b/packages/charts/src/chart_types/heatmap/state/chart_state.tsx @@ -78,7 +78,7 @@ export class HeatmapState implements InternalChartState { return getLegendItemsLabelsSelector(globalState); } - getLegendExtraValues() { + getLegendValues() { return EMPTY_MAP; } diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts b/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts index 11a47a60cca..b5e6346a872 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts @@ -32,6 +32,11 @@ export const computeLegendSelector = createCustomCachedSelector( isToggleable: true, path: [{ index: 0, value: label }], keys: [], + value: { + raw: null, + formatted: '', + legendSizingLabel: '', + }, }; }); }, diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_legend_items_labels.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_legend_items_labels.ts index dae202929fa..ca86d449bf0 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/get_legend_items_labels.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_legend_items_labels.ts @@ -14,9 +14,9 @@ import { getSettingsSpecSelector } from '../../../../state/selectors/get_setting /** @internal */ export const getLegendItemsLabelsSelector = createCustomCachedSelector( [computeLegendSelector, getSettingsSpecSelector], - (legendItems, { showLegendExtra }): LegendItemLabel[] => - legendItems.map(({ label, defaultExtra }) => ({ - label: `${label}${showLegendExtra ? defaultExtra?.formatted ?? '' : ''}`, + (legendItems): LegendItemLabel[] => + legendItems.map(({ label }) => ({ + label: `${label}`, depth: 0, })), ); diff --git a/packages/charts/src/chart_types/metric/state/chart_state.tsx b/packages/charts/src/chart_types/metric/state/chart_state.tsx index 2fd3cc0f7eb..ede6f85928d 100644 --- a/packages/charts/src/chart_types/metric/state/chart_state.tsx +++ b/packages/charts/src/chart_types/metric/state/chart_state.tsx @@ -31,7 +31,7 @@ export class MetricState implements InternalChartState { isChartEmpty = () => false; getLegendItems = () => EMPTY_LEGEND_LIST; getLegendItemsLabels = () => EMPTY_LEGEND_ITEM_LIST; - getLegendExtraValues = () => EMPTY_MAP; + getLegendValues = () => EMPTY_MAP; getPointerCursor = () => DEFAULT_CSS_CURSOR; isTooltipVisible = () => ({ visible: false, diff --git a/packages/charts/src/chart_types/partition_chart/__snapshots__/partition.test.tsx.snap b/packages/charts/src/chart_types/partition_chart/__snapshots__/partition.test.tsx.snap index 11a5d6ef392..b43aabd60eb 100644 --- a/packages/charts/src/chart_types/partition_chart/__snapshots__/partition.test.tsx.snap +++ b/packages/charts/src/chart_types/partition_chart/__snapshots__/partition.test.tsx.snap @@ -5,11 +5,6 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct { "childId": "A", "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { - "formatted": "2", - "legendSizingLabel": "2", - "raw": 2, - }, "depth": 0, "keys": [], "label": "A", @@ -33,15 +28,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct "specId": "spec1", }, ], + "value": { + "formatted": "2", + "legendSizingLabel": "2", + "raw": 2, + }, }, { "childId": "A", "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { - "formatted": "1", - "legendSizingLabel": "1", - "raw": 1, - }, "depth": 1, "keys": [], "label": "A", @@ -69,15 +64,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct "specId": "spec1", }, ], - }, - { - "childId": "B", - "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { + "value": { "formatted": "1", "legendSizingLabel": "1", "raw": 1, }, + }, + { + "childId": "B", + "color": "rgba(128, 0, 0, 0.5)", "depth": 1, "keys": [], "label": "B", @@ -105,15 +100,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct "specId": "spec1", }, ], + "value": { + "formatted": "1", + "legendSizingLabel": "1", + "raw": 1, + }, }, { "childId": "B", "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { - "formatted": "2", - "legendSizingLabel": "2", - "raw": 2, - }, "depth": 0, "keys": [], "label": "B", @@ -137,15 +132,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct "specId": "spec1", }, ], + "value": { + "formatted": "2", + "legendSizingLabel": "2", + "raw": 2, + }, }, { "childId": "A", "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { - "formatted": "1", - "legendSizingLabel": "1", - "raw": 1, - }, "depth": 1, "keys": [], "label": "A", @@ -173,15 +168,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct "specId": "spec1", }, ], - }, - { - "childId": "B", - "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { + "value": { "formatted": "1", "legendSizingLabel": "1", "raw": 1, }, + }, + { + "childId": "B", + "color": "rgba(128, 0, 0, 0.5)", "depth": 1, "keys": [], "label": "B", @@ -209,15 +204,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct "specId": "spec1", }, ], + "value": { + "formatted": "1", + "legendSizingLabel": "1", + "raw": 1, + }, }, { "childId": "C", "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { - "formatted": "2", - "legendSizingLabel": "2", - "raw": 2, - }, "depth": 0, "keys": [], "label": "C", @@ -241,15 +236,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct "specId": "spec1", }, ], + "value": { + "formatted": "2", + "legendSizingLabel": "2", + "raw": 2, + }, }, { "childId": "A", "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { - "formatted": "1", - "legendSizingLabel": "1", - "raw": 1, - }, "depth": 1, "keys": [], "label": "A", @@ -277,15 +272,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct "specId": "spec1", }, ], - }, - { - "childId": "B", - "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { + "value": { "formatted": "1", "legendSizingLabel": "1", "raw": 1, }, + }, + { + "childId": "B", + "color": "rgba(128, 0, 0, 0.5)", "depth": 1, "keys": [], "label": "B", @@ -313,6 +308,11 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct "specId": "spec1", }, ], + "value": { + "formatted": "1", + "legendSizingLabel": "1", + "raw": 1, + }, }, ] `; @@ -322,11 +322,6 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case: { "childId": "A", "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { - "formatted": "1", - "legendSizingLabel": "1", - "raw": 1, - }, "depth": 0, "keys": [], "label": "A", @@ -350,15 +345,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case: "specId": "spec1", }, ], - }, - { - "childId": "A", - "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { + "value": { "formatted": "1", "legendSizingLabel": "1", "raw": 1, }, + }, + { + "childId": "A", + "color": "rgba(128, 0, 0, 0.5)", "depth": 1, "keys": [], "label": "A", @@ -386,6 +381,11 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case: "specId": "spec1", }, ], + "value": { + "formatted": "1", + "legendSizingLabel": "1", + "raw": 1, + }, }, ] `; @@ -395,11 +395,6 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case: { "childId": "C", "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { - "formatted": "1", - "legendSizingLabel": "1", - "raw": 1, - }, "depth": 0, "keys": [], "label": "C", @@ -423,15 +418,15 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case: "specId": "spec1", }, ], - }, - { - "childId": "B", - "color": "rgba(128, 0, 0, 0.5)", - "defaultExtra": { + "value": { "formatted": "1", "legendSizingLabel": "1", "raw": 1, }, + }, + { + "childId": "B", + "color": "rgba(128, 0, 0, 0.5)", "depth": 1, "keys": [], "label": "B", @@ -459,6 +454,11 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case: "specId": "spec1", }, ], + "value": { + "formatted": "1", + "legendSizingLabel": "1", + "raw": 1, + }, }, ] `; diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts index 9c47ae32612..5bb13e0e8fb 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts @@ -7,7 +7,7 @@ */ import { isMosaic, isSunburst, isTreemap, isWaffle } from './viewmodel'; -import { LegendItemExtraValues } from '../../../../common/legend'; +import { LegendItemValues } from '../../../../common/legend'; import { SeriesKey } from '../../../../common/series_id'; import { Relation } from '../../../../common/text_utils'; import { LegendPath } from '../../../../state/actions/legend'; @@ -100,27 +100,27 @@ export function partitionTree( } /** - * Creates flat extra value map from nested key path + * Creates flat legend values map from nested key path * @internal */ -export function getExtraValueMap( +export function getLegendValuesMap( layers: Layer[], valueFormatter: ValueFormatter, tree: HierarchyOfArrays, maxDepth: number, depth: number = 0, - keys: Map = new Map(), -): Map { + keys: Map = new Map(), +): Map { for (let i = 0; i < tree.length; i++) { const branch = tree[i]; if (!branch) continue; const [key, arrayNode] = branch; const { value, path, [CHILDREN_KEY]: children } = arrayNode; - const values: LegendItemExtraValues = new Map(); + const values: LegendItemValues = new Map(); const formattedValue = valueFormatter ? valueFormatter(value) : value; values.set(key, formattedValue); keys.set(path.map(({ index }) => index).join('__'), values); - if (depth < maxDepth) getExtraValueMap(layers, valueFormatter, children, maxDepth, depth + 1, keys); + if (depth < maxDepth) getLegendValuesMap(layers, valueFormatter, children, maxDepth, depth + 1, keys); } return keys; } diff --git a/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx b/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx index b500e018f54..d2212496b05 100644 --- a/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx +++ b/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx @@ -12,8 +12,8 @@ import { computeLegendSelector } from './selectors/compute_legend'; import { getChartTypeDescriptionSelector } from './selectors/get_chart_type_description'; import { getPointerCursorSelector } from './selectors/get_cursor_pointer'; import { getDebugStateSelector } from './selectors/get_debug_state'; -import { getLegendItemsExtra } from './selectors/get_legend_items_extra'; import { getLegendItemsLabels } from './selectors/get_legend_items_labels'; +import { getLegendItemsValues } from './selectors/get_legend_items_values'; import { isTooltipVisibleSelector } from './selectors/is_tooltip_visible'; import { createOnElementClickCaller } from './selectors/on_element_click_caller'; import { createOnElementOutCaller } from './selectors/on_element_out_caller'; @@ -62,7 +62,7 @@ export class PartitionState implements InternalChartState { getLegendItemsLabels(globalState: GlobalChartState) { // order doesn't matter, but it needs to return the highest depth of the label occurrence so enough horizontal width is allocated - // the label item strings needs to be a concatenation of the label + the extra formatted value if available. + // the label item strings needs to be a concatenation of the label + the value formatted value if available. // this is required to compute the legend automatic width return getLegendItemsLabels(globalState); } @@ -71,8 +71,8 @@ export class PartitionState implements InternalChartState { return computeLegendSelector(globalState); } - getLegendExtraValues(globalState: GlobalChartState) { - return getLegendItemsExtra(globalState); + getLegendValues(globalState: GlobalChartState) { + return getLegendItemsValues(globalState); } chartRenderer(containerRef: BackwardRef, forwardStageRef: RefObject) { diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/__snapshots__/get_legend_items_extra.test.ts.snap b/packages/charts/src/chart_types/partition_chart/state/selectors/__snapshots__/get_legend_items_extra.test.ts.snap deleted file mode 100644 index 6425c0c73dd..00000000000 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/__snapshots__/get_legend_items_extra.test.ts.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Partition - Legend item extra values should return all extra values in nested legend 1`] = `{}`; - -exports[`Partition - Legend item extra values should return extra values in nested legend within max depth of 1 1`] = `{}`; - -exports[`Partition - Legend item extra values should return extra values in nested legend within max depth of 2 1`] = `{}`; diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/__snapshots__/get_legend_items_values.test.ts.snap b/packages/charts/src/chart_types/partition_chart/state/selectors/__snapshots__/get_legend_items_values.test.ts.snap new file mode 100644 index 00000000000..cf7c96b8db9 --- /dev/null +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/__snapshots__/get_legend_items_values.test.ts.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Partition - Legend item values should return all values in nested legend 1`] = `{}`; + +exports[`Partition - Legend item values should return values in nested legend within max depth of 1 1`] = `{}`; + +exports[`Partition - Legend item values should return values in nested legend within max depth of 2 1`] = `{}`; diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/compute_legend.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/compute_legend.ts index 1d1ae749fe2..fa363ef358c 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/compute_legend.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/compute_legend.ts @@ -123,7 +123,7 @@ function walkTree( depth: node[DEPTH_KEY] - 1, seriesIdentifiers: [{ key, specId }], keys: [], - defaultExtra: { + value: { raw: node[AGGREGATE_KEY], formatted: valueFormatter(node[AGGREGATE_KEY]), legendSizingLabel: `${node[AGGREGATE_KEY]}`, diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.ts index a52bed4f60a..72a2a25fef2 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.ts @@ -8,6 +8,7 @@ import { getPartitionSpecs } from './get_partition_specs'; import { getTrees } from './tree'; +import { LegendValue } from '../../../../specs/legend_spec'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { LegendItemLabel } from '../../../../state/selectors/get_legend_items_labels'; import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec'; @@ -16,11 +17,16 @@ import { getLegendLabelsAndValue } from '../../layout/utils/legend_labels'; /** @internal */ export const getLegendItemsLabels = createCustomCachedSelector( [getPartitionSpecs, getSettingsSpecSelector, getTrees], - (specs, { legendMaxDepth, showLegend, showLegendExtra }, trees): LegendItemLabel[] => + (specs, { legendMaxDepth, showLegend, legendValue }, trees): LegendItemLabel[] => specs.flatMap(({ layers, valueFormatter }) => showLegend ? trees.flatMap(({ tree }) => - getLegendLabelsAndValue(layers, tree, legendMaxDepth, showLegendExtra ? valueFormatter : () => ''), + getLegendLabelsAndValue( + layers, + tree, + legendMaxDepth, + legendValue && legendValue !== LegendValue.None ? valueFormatter : () => '', + ), ) : [], ), diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_extra.test.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_values.test.ts similarity index 69% rename from packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_extra.test.ts rename to packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_values.test.ts index df72699a71c..de3e089d1b1 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_extra.test.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_values.test.ts @@ -8,13 +8,13 @@ import { Store } from 'redux'; -import { getLegendItemsExtra } from './get_legend_items_extra'; +import { getLegendItemsValues } from './get_legend_items_values'; import { MockSeriesSpec, MockGlobalSpec } from '../../../../mocks/specs'; import { MockStore } from '../../../../mocks/store'; import { GlobalChartState } from '../../../../state/chart_state'; import { PrimitiveValue } from '../../layout/utils/group_by_rollup'; -describe('Partition - Legend item extra values', () => { +describe('Partition - Legend item values', () => { type TestDatum = [string, string, string, number]; const spec = MockSeriesSpec.sunburst({ data: [ @@ -53,11 +53,11 @@ describe('Partition - Legend item extra values', () => { store = MockStore.default(); }); - it('should return all extra values in nested legend', () => { + it('should return all values in nested legend', () => { MockStore.addSpecs([spec], store); - const extraValues = getLegendItemsExtra(store.getState()); - expect([...extraValues.keys()]).toEqual([ + const values = getLegendItemsValues(store.getState()); + expect([...values.keys()]).toEqual([ '0__0', '0__0__0', '0__0__0__0', @@ -78,24 +78,24 @@ describe('Partition - Legend item extra values', () => { '0__0__1__2__0', '0__0__1__2__1', ]); - expect(extraValues.values()).toMatchSnapshot(); + expect(values.values()).toMatchSnapshot(); }); - it('should return extra values in nested legend within max depth of 1', () => { + it('should return values in nested legend within max depth of 1', () => { const settings = MockGlobalSpec.settings({ legendMaxDepth: 1 }); MockStore.addSpecs([settings, spec], store); - const extraValues = getLegendItemsExtra(store.getState()); - expect([...extraValues.keys()]).toEqual(['0__0', '0__0__0', '0__0__1']); - expect(extraValues.values()).toMatchSnapshot(); + const values = getLegendItemsValues(store.getState()); + expect([...values.keys()]).toEqual(['0__0', '0__0__0', '0__0__1']); + expect(values.values()).toMatchSnapshot(); }); - it('should return extra values in nested legend within max depth of 2', () => { + it('should return values in nested legend within max depth of 2', () => { const settings = MockGlobalSpec.settings({ legendMaxDepth: 2 }); MockStore.addSpecs([settings, spec], store); - const extraValues = getLegendItemsExtra(store.getState()); - expect([...extraValues.keys()]).toEqual([ + const values = getLegendItemsValues(store.getState()); + expect([...values.keys()]).toEqual([ '0__0', '0__0__0', '0__0__0__0', @@ -105,22 +105,22 @@ describe('Partition - Legend item extra values', () => { '0__0__1__1', '0__0__1__2', ]); - expect(extraValues.values()).toMatchSnapshot(); + expect(values.values()).toMatchSnapshot(); }); - it('filters all extraValues if depth is 0', () => { + it('filters all values if depth is 0', () => { const settings = MockGlobalSpec.settings({ legendMaxDepth: 0 }); MockStore.addSpecs([settings, spec], store); - const extraValues = getLegendItemsExtra(store.getState()); - expect([...extraValues.keys()]).toEqual([]); + const values = getLegendItemsValues(store.getState()); + expect([...values.keys()]).toEqual([]); }); - it('filters all extraValues if depth is NaN', () => { + it('filters all values if depth is NaN', () => { const settings = MockGlobalSpec.settings({ legendMaxDepth: NaN }); MockStore.addSpecs([settings, spec], store); - const extraValues = getLegendItemsExtra(store.getState()); - expect([...extraValues.keys()]).toEqual([]); + const values = getLegendItemsValues(store.getState()); + expect([...values.keys()]).toEqual([]); }); }); diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_extra.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_values.ts similarity index 69% rename from packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_extra.ts rename to packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_values.ts index 22c4957de2b..c880353953a 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_extra.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_values.ts @@ -8,20 +8,20 @@ import { getPartitionSpec } from './partition_spec'; import { getTrees } from './tree'; -import { LegendItemExtraValues } from '../../../../common/legend'; +import { LegendItemValues } from '../../../../common/legend'; import { SeriesKey } from '../../../../common/series_id'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec'; -import { getExtraValueMap } from '../../layout/viewmodel/hierarchy_of_arrays'; +import { getLegendValuesMap } from '../../layout/viewmodel/hierarchy_of_arrays'; /** @internal */ -export const getLegendItemsExtra = createCustomCachedSelector( +export const getLegendItemsValues = createCustomCachedSelector( [getPartitionSpec, getSettingsSpecSelector, getTrees], - (spec, { legendMaxDepth }, trees): Map => { - const emptyMap = new Map(); + (spec, { legendMaxDepth }, trees): Map => { + const emptyMap = new Map(); return spec && !Number.isNaN(legendMaxDepth) && legendMaxDepth > 0 ? trees.reduce((result, { tree }) => { - const treeData = getExtraValueMap(spec.layers, spec.valueFormatter, tree, legendMaxDepth); + const treeData = getLegendValuesMap(spec.layers, spec.valueFormatter, tree, legendMaxDepth); for (const [key, value] of treeData) { result.set(key, value); } diff --git a/packages/charts/src/chart_types/timeslip/internal_chart_state.ts b/packages/charts/src/chart_types/timeslip/internal_chart_state.ts index 15d36560ebe..42cedba9c08 100644 --- a/packages/charts/src/chart_types/timeslip/internal_chart_state.ts +++ b/packages/charts/src/chart_types/timeslip/internal_chart_state.ts @@ -9,7 +9,7 @@ import { TimeslipWithTooltip } from './timeslip_chart'; import { ChartType } from '..'; import { DEFAULT_CSS_CURSOR } from '../../common/constants'; -import { LegendItemExtraValues } from '../../common/legend'; +import { LegendItemValues } from '../../common/legend'; import { SeriesKey } from '../../common/series_id'; import { InternalChartState } from '../../state/chart_state'; import { InitStatus } from '../../state/selectors/get_internal_is_intialized'; @@ -28,7 +28,7 @@ export class TimeslipState implements InternalChartState { isChartEmpty = () => false; getLegendItemsLabels = () => []; getLegendItems = () => []; - getLegendExtraValues = () => new Map(); + getLegendValues = () => new Map(); getPointerCursor = () => DEFAULT_CSS_CURSOR; getTooltipAnchor = () => ({ x: 0, y: 0, width: 0, height: 0 }); isTooltipVisible = () => ({ diff --git a/packages/charts/src/chart_types/wordcloud/state/chart_state.tsx b/packages/charts/src/chart_types/wordcloud/state/chart_state.tsx index 5e6b67c1516..90fe4314bcd 100644 --- a/packages/charts/src/chart_types/wordcloud/state/chart_state.tsx +++ b/packages/charts/src/chart_types/wordcloud/state/chart_state.tsx @@ -52,7 +52,7 @@ export class WordcloudState implements InternalChartState { return EMPTY_LEGEND_ITEM_LIST; } - getLegendExtraValues() { + getLegendValues() { return EMPTY_MAP; } diff --git a/packages/charts/src/chart_types/xy_chart/legend/legend.test.ts b/packages/charts/src/chart_types/xy_chart/legend/legend.test.ts index fc64d40ffbc..54639659129 100644 --- a/packages/charts/src/chart_types/xy_chart/legend/legend.test.ts +++ b/packages/charts/src/chart_types/xy_chart/legend/legend.test.ts @@ -8,7 +8,6 @@ import { Store } from 'redux'; -import { getLegendExtra } from './legend'; import { ChartType } from '../..'; import { MockGlobalSpec, MockSeriesSpec } from '../../../mocks/specs/specs'; import { MockStore } from '../../../mocks/store/store'; @@ -23,12 +22,6 @@ import { computeSeriesDomainsSelector } from '../state/selectors/compute_series_ import { getSeriesName } from '../utils/series'; import { AxisSpec, BasicSeriesSpec, SeriesType } from '../utils/specs'; -const nullDisplayValue = { - formatted: null, - raw: null, - legendSizingLabel: null, -}; - const spec1: BasicSeriesSpec = { chartType: ChartType.XYAxis, specType: SpecType.Series, @@ -105,7 +98,6 @@ describe('Legends', () => { isItemHidden: false, isSeriesHidden: false, isToggleable: true, - defaultExtra: nullDisplayValue, path: [{ index: 0, value: 'groupId{__global__}spec{spec1}yAccessor{y1}splitAccessors{}' }], }; expect(legend[0]).toMatchObject(expected); @@ -148,7 +140,6 @@ describe('Legends', () => { isItemHidden: false, isSeriesHidden: false, isToggleable: true, - defaultExtra: nullDisplayValue, path: [{ index: 0, value: 'groupId{__global__}spec{spec1}yAccessor{y1}splitAccessors{g-a}' }], }, { @@ -158,7 +149,6 @@ describe('Legends', () => { isItemHidden: false, isSeriesHidden: false, isToggleable: true, - defaultExtra: nullDisplayValue, path: [{ index: 0, value: 'groupId{__global__}spec{spec1}yAccessor{y2}splitAccessors{g-a}' }], }, { @@ -168,7 +158,6 @@ describe('Legends', () => { isItemHidden: false, isSeriesHidden: false, isToggleable: true, - defaultExtra: nullDisplayValue, path: [{ index: 0, value: 'groupId{__global__}spec{spec1}yAccessor{y1}splitAccessors{g-b}' }], }, { @@ -178,7 +167,6 @@ describe('Legends', () => { isItemHidden: false, isSeriesHidden: false, isToggleable: true, - defaultExtra: nullDisplayValue, path: [{ index: 0, value: 'groupId{__global__}spec{spec1}yAccessor{y2}splitAccessors{g-b}' }], }, ]; @@ -227,7 +215,6 @@ describe('Legends', () => { isItemHidden: false, isSeriesHidden: false, isToggleable: true, - defaultExtra: nullDisplayValue, path: [{ index: 0, value: 'groupId{__global__}spec{spec2}yAccessor{y}splitAccessors{}' }], }, ]; @@ -402,37 +389,4 @@ describe('Legends', () => { name = getSeriesName(seriesIdentifier1, false, false, specWithSplit); expect(name).toBe('Spec 1 title'); }); - it('should return correct legendSizingLabel with linear scale and showExtraLegend set to true', () => { - const formatter = (d: string | number) => `${Number(d).toFixed(2)} dogs`; - const lastValues = { y0: null, y1: 14 }; - const showExtraLegend = true; - const xScaleIsLinear = ScaleType.Linear; - - expect(getLegendExtra(showExtraLegend, xScaleIsLinear, formatter, 'y1', lastValues)).toMatchObject({ - raw: 14, - formatted: '14.00 dogs', - legendSizingLabel: '14.00 dogs', - }); - }); - it('should return formatted to null with ordinal scale and showExtraLegend set to true', () => { - const formatter = (d: string | number) => `${Number(d).toFixed(2)} dogs`; - const lastValues = { y0: null, y1: 14 }; - - expect(getLegendExtra(true, ScaleType.Ordinal, formatter, 'y1', lastValues)).toMatchObject({ - raw: 14, - formatted: null, - legendSizingLabel: '14.00 dogs', - }); - }); - it('should return legendSizingLabel null with showLegendExtra set to false', () => { - const formatter = (d: string | number) => `${Number(d).toFixed(2)} dogs`; - const lastValues = { y0: null, y1: 14 }; - const showLegendExtra = false; - - expect(getLegendExtra(showLegendExtra, ScaleType.Ordinal, formatter, 'y1', lastValues)).toMatchObject({ - raw: null, - formatted: null, - legendSizingLabel: null, - }); - }); }); diff --git a/packages/charts/src/chart_types/xy_chart/legend/legend.ts b/packages/charts/src/chart_types/xy_chart/legend/legend.ts index a0833da2afc..0d430d9250a 100644 --- a/packages/charts/src/chart_types/xy_chart/legend/legend.ts +++ b/packages/charts/src/chart_types/xy_chart/legend/legend.ts @@ -9,15 +9,14 @@ import { Color } from '../../../common/colors'; import { LegendItem } from '../../../common/legend'; import { SeriesKey, SeriesIdentifier } from '../../../common/series_id'; -import { ScaleType } from '../../../scales/constants'; -import { SettingsSpec, TickFormatterOptions } from '../../../specs'; +import { SettingsSpec } from '../../../specs'; import { isDefined, mergePartial } from '../../../utils/common'; import { BandedAccessorType } from '../../../utils/geometry'; import { getLegendCompareFn, SeriesCompareFn } from '../../../utils/series_sort'; import { PointStyle, Theme } from '../../../utils/themes/theme'; -import { getXScaleTypeFromSpec } from '../scales/get_api_scales'; +import { XDomain } from '../domains/types'; +import { getLegendValue } from '../state/utils/legend_value'; import { getAxesSpecForSpecId, getSpecsById } from '../state/utils/spec'; -import { LastValues } from '../state/utils/types'; import { Y0_ACCESSOR_POSTFIX, Y1_ACCESSOR_POSTFIX } from '../tooltip/tooltip'; import { defaultTickFormatter } from '../utils/axis_utils'; import { defaultXYLegendSeriesSort } from '../utils/default_series_sort_fn'; @@ -34,18 +33,13 @@ import { AxisSpec, BasicSeriesSpec, Postfixes, + StackMode, isAreaSeriesSpec, isBarSeriesSpec, isBubbleSeriesSpec, isLineSeriesSpec, } from '../utils/specs'; -/** @internal */ -export interface FormattedLastValues { - y0: number | string | null; - y1: number | string | null; -} - function getPostfix(spec: BasicSeriesSpec): Postfixes { if (isAreaSeriesSpec(spec) || isBarSeriesSpec(spec)) { const { y0AccessorFormat = Y0_ACCESSOR_POSTFIX, y1AccessorFormat = Y1_ACCESSOR_POSTFIX } = spec; @@ -61,27 +55,6 @@ function getBandedLegendItemLabel(name: string, yAccessor: BandedAccessorType, p : `${name}${postfixes.y0AccessorFormat}`; } -/** @internal */ -export function getLegendExtra( - showLegendExtra: boolean, - xScaleType: ScaleType, - formatter: (value: any, options?: TickFormatterOptions | undefined) => string, - key: keyof LastValues, - lastValue?: LastValues, -): LegendItem['defaultExtra'] { - if (showLegendExtra) { - const rawValue = (lastValue && lastValue[key]) ?? null; - const formattedValue = rawValue !== null ? formatter(rawValue) : null; - - return { - raw: rawValue !== null ? rawValue : null, - formatted: xScaleType === ScaleType.Ordinal ? null : formattedValue, - legendSizingLabel: formattedValue, - }; - } - return { raw: null, formatted: null, legendSizingLabel: null }; -} - /** @internal */ function getPointStyle(spec: BasicSeriesSpec, theme: Theme): PointStyle | undefined { if (isBubbleSeriesSpec(spec)) { @@ -95,8 +68,8 @@ function getPointStyle(spec: BasicSeriesSpec, theme: Theme): PointStyle | undefi /** @internal */ export function computeLegend( + xDomain: XDomain, dataSeries: DataSeries[], - lastValues: Map, seriesColors: Map, specs: BasicSeriesSpec[], axesSpecs: AxisSpec[], @@ -111,7 +84,7 @@ export function computeLegend( dataSeries.forEach((series) => { const { specId, yAccessor } = series; const banded = isBandedSpec(series.spec); - const key = getSeriesKey(series, series.groupId); + const spec = getSpecsById(specs, specId); const dataSeriesKey = getSeriesKey( { @@ -129,43 +102,61 @@ export function computeLegend( if (name === '' || !spec) return; const postFixes = getPostfix(spec); - const labelY1 = banded ? getBandedLegendItemLabel(name, BandedAccessorType.Y1, postFixes) : name; // Use this to get axis spec w/ tick formatter const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, settingsSpec.rotation); const formatter = spec.tickFormat ?? yAxis?.tickFormat ?? defaultTickFormatter; const { hideInLegend } = spec; - const lastValue = lastValues.get(key); const seriesIdentifier = getSeriesIdentifierFromDataSeries(series); - const xScaleType = getXScaleTypeFromSpec(spec.xScaleType); const pointStyle = getPointStyle(spec, theme); + const itemValue = getLegendValue(series, xDomain, settingsSpec.legendValue, (d) => { + return series.stackMode === StackMode.Percentage + ? d.y1 === null || d.y0 === null + ? null + : d.y1 - d.y0 + : d.initialY1; + }); + const formattedItemValue = itemValue !== null ? formatter(itemValue) : ''; + legendItems.push({ color, - label: labelY1, + label: banded ? getBandedLegendItemLabel(name, BandedAccessorType.Y1, postFixes) : name, seriesIdentifiers: [seriesIdentifier], childId: BandedAccessorType.Y1, isSeriesHidden, isItemHidden: hideInLegend, isToggleable: true, - defaultExtra: getLegendExtra(settingsSpec.showLegendExtra, xScaleType, formatter, 'y1', lastValue), + value: { + raw: itemValue, + formatted: formattedItemValue, + legendSizingLabel: formattedItemValue, + }, path: [{ index: 0, value: seriesIdentifier.key }], keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()], pointStyle, }); if (banded) { - const labelY0 = getBandedLegendItemLabel(name, BandedAccessorType.Y0, postFixes); + const itemValue = getLegendValue(series, xDomain, settingsSpec.legendValue, (d) => { + return series.stackMode === StackMode.Percentage ? d.y0 : d.initialY0; + }); + const formattedItemValue = itemValue !== null ? formatter(itemValue) : ''; + legendItems.push({ color, - label: labelY0, + label: getBandedLegendItemLabel(name, BandedAccessorType.Y0, postFixes), seriesIdentifiers: [seriesIdentifier], childId: BandedAccessorType.Y0, isSeriesHidden, isItemHidden: hideInLegend, isToggleable: true, - defaultExtra: getLegendExtra(settingsSpec.showLegendExtra, xScaleType, formatter, 'y0', lastValue), + value: { + raw: itemValue, + formatted: formattedItemValue, + legendSizingLabel: formattedItemValue, + }, path: [{ index: 0, value: seriesIdentifier.key }], keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()], pointStyle, diff --git a/packages/charts/src/chart_types/xy_chart/rendering/rendering.test.ts b/packages/charts/src/chart_types/xy_chart/rendering/rendering.test.ts index c132e7f8862..f4c15a0d117 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/rendering.test.ts +++ b/packages/charts/src/chart_types/xy_chart/rendering/rendering.test.ts @@ -128,10 +128,10 @@ describe('Rendering utils', () => { label: '', seriesIdentifiers: [seriesIdentifier], isSeriesHidden: false, - defaultExtra: { - formatted: null, + value: { + formatted: '', raw: null, - legendSizingLabel: null, + legendSizingLabel: '', }, path: [], keys: [], diff --git a/packages/charts/src/chart_types/xy_chart/state/chart_state.tsx b/packages/charts/src/chart_types/xy_chart/state/chart_state.tsx index e49bac84488..a8e49890dd5 100644 --- a/packages/charts/src/chart_types/xy_chart/state/chart_state.tsx +++ b/packages/charts/src/chart_types/xy_chart/state/chart_state.tsx @@ -15,7 +15,7 @@ import { getBrushAreaSelector } from './selectors/get_brush_area'; import { getChartTypeDescriptionSelector } from './selectors/get_chart_type_description'; import { getPointerCursorSelector } from './selectors/get_cursor_pointer'; import { getDebugStateSelector } from './selectors/get_debug_state'; -import { getLegendItemExtraValuesSelector } from './selectors/get_legend_item_extra_values'; +import { getLegendItemValuesSelector } from './selectors/get_legend_item_values'; import { getLegendItemsLabelsSelector } from './selectors/get_legend_items_labels'; import { getSeriesSpecsSelector } from './selectors/get_specs'; import { getTooltipAnchorPositionSelector } from './selectors/get_tooltip_anchor_position'; @@ -30,7 +30,7 @@ import { createOnElementOverCaller } from './selectors/on_element_over_caller'; import { createOnPointerMoveCaller } from './selectors/on_pointer_move_caller'; import { createOnProjectionAreaCaller } from './selectors/on_projection_area_caller'; import { ChartType } from '../..'; -import { LegendItemExtraValues } from '../../../common/legend'; +import { LegendItemValues } from '../../../common/legend'; import { SeriesKey } from '../../../common/series_id'; import { BrushTool } from '../../../components/brush/brush'; import { Tooltip } from '../../../components/tooltip/tooltip'; @@ -111,8 +111,8 @@ export class XYAxisChartState implements InternalChartState { return computeLegendSelector(globalState); } - getLegendExtraValues(globalState: GlobalChartState): Map { - return getLegendItemExtraValuesSelector(globalState); + getLegendValues(globalState: GlobalChartState): Map { + return getLegendItemValuesSelector(globalState); } chartRenderer(containerRef: BackwardRef, forwardCanvasRef: RefObject) { diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts index 5515df1aa91..0f124750bee 100644 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts @@ -17,7 +17,6 @@ import { getDeselectedSeriesSelector } from '../../../../state/selectors/get_des import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec'; import { computeLegend } from '../../legend/legend'; import { DataSeries } from '../../utils/series'; -import { getLastValues } from '../utils/get_last_value'; /** @internal */ export const computeLegendSelector = createCustomCachedSelector( @@ -42,8 +41,8 @@ export const computeLegendSelector = createCustomCachedSelector( siDataSeriesMap: Record, ): LegendItem[] => { return computeLegend( + xDomain, formattedDataSeries, - getLastValues(formattedDataSeries, xDomain), seriesColors, seriesSpecs, axesSpecs, diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_extra_values.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_extra_values.ts deleted file mode 100644 index 11a9df22be6..00000000000 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_extra_values.ts +++ /dev/null @@ -1,19 +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 { getTooltipInfoAndGeomsSelector } from './get_tooltip_values_highlighted_geoms'; -import { LegendItemExtraValues } from '../../../../common/legend'; -import { SeriesKey } from '../../../../common/series_id'; -import { createCustomCachedSelector } from '../../../../state/create_selector'; -import { getLegendItemExtraValues } from '../../tooltip/tooltip'; - -/** @internal */ -export const getLegendItemExtraValuesSelector = createCustomCachedSelector( - [getTooltipInfoAndGeomsSelector], - ({ tooltip: { values } }): Map => getLegendItemExtraValues(values), -); diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_values.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_values.ts new file mode 100644 index 00000000000..18b0f7fcceb --- /dev/null +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_values.ts @@ -0,0 +1,28 @@ +/* + * 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 { getComputedScalesSelector } from './get_computed_scales'; +import { getTooltipInfoAndGeomsSelector } from './get_tooltip_values_highlighted_geoms'; +import { LegendItemValues } from '../../../../common/legend'; +import { SeriesKey } from '../../../../common/series_id'; +import { ScaleType } from '../../../../scales/constants'; +import { createCustomCachedSelector } from '../../../../state/create_selector'; +import { getLegendItemValues } from '../../tooltip/tooltip'; + +const EMPTY_MAP = new Map(); +/** @internal */ +export const getLegendItemValuesSelector = createCustomCachedSelector( + [getTooltipInfoAndGeomsSelector, getComputedScalesSelector], + ({ tooltip: { values } }, { xScale: { type } }): Map => + // 24/05/2023 A decision was made by the Kibana Visualization Team (MarcoV, StratoulaK) + // to disable representing `current` hovered values if the X scale is Ordinal. at Elastic this feature wasn't used + // and the the information was redundant because it was alredy available in the tooltip. + // A possible enhancement will probably update this configuration to allow `current` values if explicitly configured. + // See https://github.com/elastic/elastic-charts/issues/2050 + type === ScaleType.Ordinal ? EMPTY_MAP : getLegendItemValues(values), +); diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_items_labels.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_items_labels.ts index f70c3384e12..810b08407bd 100644 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_items_labels.ts +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_items_labels.ts @@ -9,17 +9,13 @@ import { computeLegendSelector } from './compute_legend'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { LegendItemLabel } from '../../../../state/selectors/get_legend_items_labels'; -import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec'; /** @internal */ export const getLegendItemsLabelsSelector = createCustomCachedSelector( - [computeLegendSelector, getSettingsSpecSelector], - (legendItems, { showLegendExtra }): LegendItemLabel[] => - legendItems.map(({ label, defaultExtra }) => ({ - label: - defaultExtra && (defaultExtra.legendSizingLabel ?? null) !== null - ? `${label}${showLegendExtra ? defaultExtra.legendSizingLabel : ''}` - : label, + [computeLegendSelector], + (legendItems): LegendItemLabel[] => + legendItems.map(({ label, value }) => ({ + label: `${label}${value.legendSizingLabel}`, depth: 0, })), ); diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/common.test.ts b/packages/charts/src/chart_types/xy_chart/state/utils/common.test.ts index a2ecbf23857..5257c0194be 100644 --- a/packages/charts/src/chart_types/xy_chart/state/utils/common.test.ts +++ b/packages/charts/src/chart_types/xy_chart/state/utils/common.test.ts @@ -133,7 +133,7 @@ describe('Type Checks', () => { specId: 'bars', }, ], - defaultExtra: { raw: 6, formatted: '6.00', legendSizingLabel: '6.00' }, + value: { raw: 6, formatted: '6.00', legendSizingLabel: '6.00' }, isSeriesHidden: true, path: [], keys: [], @@ -147,7 +147,7 @@ describe('Type Checks', () => { specId: 'bars', }, ], - defaultExtra: { raw: 2, formatted: '2.00', legendSizingLabel: '2.00' }, + value: { raw: 2, formatted: '2.00', legendSizingLabel: '2.00' }, isSeriesHidden: true, path: [], keys: [], @@ -166,7 +166,7 @@ describe('Type Checks', () => { specId: 'bars', }, ], - defaultExtra: { raw: 6, formatted: '6.00', legendSizingLabel: '6.00' }, + value: { raw: 6, formatted: '6.00', legendSizingLabel: '6.00' }, isSeriesHidden: false, path: [], keys: [], @@ -180,7 +180,7 @@ describe('Type Checks', () => { specId: 'bars', }, ], - defaultExtra: { raw: 2, formatted: '2.00', legendSizingLabel: '2.00' }, + value: { raw: 2, formatted: '2.00', legendSizingLabel: '2.00' }, isSeriesHidden: true, path: [], keys: [], diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/get_last_value.ts b/packages/charts/src/chart_types/xy_chart/state/utils/get_last_value.ts deleted file mode 100644 index 220f07c8554..00000000000 --- a/packages/charts/src/chart_types/xy_chart/state/utils/get_last_value.ts +++ /dev/null @@ -1,58 +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 { LastValues } from './types'; -import { SeriesKey } from '../../../../common/series_id'; -import { XDomain } from '../../domains/types'; -import { isDatumFilled } from '../../rendering/utils'; -import { DataSeries, getSeriesKey, XYChartSeriesIdentifier } from '../../utils/series'; -import { StackMode } from '../../utils/specs'; - -/** - * @internal - * @param dataSeries - * @param xDomain - */ -export function getLastValues(dataSeries: DataSeries[], xDomain: XDomain): Map { - const lastValues = new Map(); - - // we need to get the latest - dataSeries.forEach((series) => { - if (series.data.length === 0) { - return; - } - - const last = series.data.at(-1); - if (!last) { - return; - } - if (isDatumFilled(last)) { - return; - } - - if (last.x !== xDomain.domain.at(-1)) { - // we have a dataset that is not filled with all x values - // and the last value of the series is not the last value for every series - // let's skip it - return; - } - - const { y0, y1, initialY0, initialY1 } = last; - const seriesKey = getSeriesKey(series as XYChartSeriesIdentifier, series.groupId); - - if (series.stackMode === StackMode.Percentage) { - const y1InPercentage = y1 === null || y0 === null ? null : y1 - y0; - lastValues.set(seriesKey, { y0, y1: y1InPercentage }); - return; - } - if (initialY0 !== null || initialY1 !== null) { - lastValues.set(seriesKey, { y0: initialY0, y1: initialY1 }); - } - }); - return lastValues; -} diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/legend_value.ts b/packages/charts/src/chart_types/xy_chart/state/utils/legend_value.ts new file mode 100644 index 00000000000..d688509d20d --- /dev/null +++ b/packages/charts/src/chart_types/xy_chart/state/utils/legend_value.ts @@ -0,0 +1,86 @@ +/* + * 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 { ScaleType } from '../../../../scales/constants'; +import { LegendSpec, LegendValue } from '../../../../specs'; +import { roundDateToESInterval } from '../../../../utils/chrono/elasticsearch'; +import { XDomain } from '../../domains/types'; +import { isDatumFilled } from '../../rendering/utils'; +import { DataSeries, DataSeriesDatum } from '../../utils/series'; + +/** + * This method return a value from a DataSeries that correspond to the type of value requested. + * It in general compute the last, min, max, avg, sum of the value in a series. + * NOTE: not every type can work correctly with the data provided, for example a sum will not work when using the percentage chart + * @internal + */ +export function getLegendValue( + series: DataSeries, + xDomain: XDomain, + type: LegendSpec['legendValue'], + valueAccessor: (d: DataSeriesDatum) => number | null, +): number | null { + // 24/05/2023 A decision was made by the Kibana Visualization Team (MarcoV, StratoulaK) + // to disable representing `current` hovered values if the X scale is Ordinal. at Elastic this feature wasn't used + // and the the information was redundant because it was alredy available in the tooltip. + // A possible enhancement will probably update this configuration to allow `current` values if explicitly configured. + // See https://github.com/elastic/elastic-charts/issues/2050 + if (xDomain.type === ScaleType.Ordinal) { + return null; + } + + switch (type) { + case LegendValue.LastNonNull: + const last = series.data.findLast((d) => valueAccessor(d) !== null); + return last ? valueAccessor(last) : null; + case LegendValue.LastTimeBucket: + if (xDomain.type !== ScaleType.Time) { + return null; + } + const lastDataPoint = series.data.at(-1); + if (!lastDataPoint) { + return null; + } + + const lastX = lastDataPoint.x as number; + const upperDomainBound = xDomain.domain[1] as number; + const lastBucket = roundDateToESInterval( + upperDomainBound, + { type: 'fixed', unit: 'ms', value: xDomain.minInterval }, + 'start', + xDomain.timeZone, + ); + if (lastDataPoint && !isDatumFilled(lastDataPoint) && lastX >= lastBucket) { + return valueAccessor(lastDataPoint); + } + return null; + case LegendValue.Average: + const avg = series.data.reduce( + (acc, curr) => { + const value = valueAccessor(curr); + return value !== null + ? { + count: acc.count + 1, + sum: acc.sum + value, + } + : acc; + }, + { count: 0, sum: 0 }, + ); + return avg.count > 0 ? avg.sum / avg.count : 0; + case LegendValue.Sum: + return series.data.reduce((acc, curr) => acc + (valueAccessor(curr) ?? 0), 0); + case LegendValue.Min: + return series.data.reduce((acc, curr) => Math.min(acc, valueAccessor(curr) ?? Infinity), Infinity); + case LegendValue.Max: + return series.data.reduce((acc, curr) => Math.max(acc, valueAccessor(curr) ?? -Infinity), -Infinity); + default: + case LegendValue.None: + return null; + } +} diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/types.ts b/packages/charts/src/chart_types/xy_chart/state/utils/types.ts index 89a18eb8d5e..4f85b948451 100644 --- a/packages/charts/src/chart_types/xy_chart/state/utils/types.ts +++ b/packages/charts/src/chart_types/xy_chart/state/utils/types.ts @@ -69,9 +69,3 @@ export interface SeriesDomainsAndData extends SmallMultiplesSeriesDomains { yDomains: YDomain[]; formattedDataSeries: DataSeries[]; } - -/** @internal */ -export interface LastValues { - y0: number | null; - y1: number | null; -} diff --git a/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts b/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts index 7438609bc77..b6d865492ed 100644 --- a/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts +++ b/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { LegendItemExtraValues } from '../../../common/legend'; +import { LegendItemValues } from '../../../common/legend'; import { SeriesKey } from '../../../common/series_id'; import { TooltipValue } from '../../../specs'; import { PointerValue } from '../../../state/types'; @@ -23,15 +23,15 @@ export const Y0_ACCESSOR_POSTFIX = ' - lower'; export const Y1_ACCESSOR_POSTFIX = ' - upper'; /** @internal */ -export function getLegendItemExtraValues( +export function getLegendItemValues( tooltipValues: TooltipValue[], defaultValue?: string, -): Map { - const seriesTooltipValues = new Map(); +): Map { + const seriesTooltipValues = new Map(); tooltipValues.forEach(({ formattedValue, seriesIdentifier, valueAccessor }) => { const seriesValue = defaultValue || formattedValue; - const current: LegendItemExtraValues = seriesTooltipValues.get(seriesIdentifier.key) ?? new Map(); + const current: LegendItemValues = seriesTooltipValues.get(seriesIdentifier.key) ?? new Map(); if (defaultValue) { if (!current.has(BandedAccessorType.Y0)) { current.set(BandedAccessorType.Y0, defaultValue); diff --git a/packages/charts/src/common/legend.ts b/packages/charts/src/common/legend.ts index f67c8253f39..55bebc4170a 100644 --- a/packages/charts/src/common/legend.ts +++ b/packages/charts/src/common/legend.ts @@ -30,10 +30,10 @@ export type LegendItem = { label: CategoryLabel; isSeriesHidden?: boolean; isItemHidden?: boolean; - defaultExtra?: { + value: { raw: number | null; - formatted: number | string | null; - legendSizingLabel: number | string | null; + formatted: string; + legendSizingLabel: string; }; // TODO: Remove when partition layers are toggleable isToggleable?: boolean; @@ -43,4 +43,4 @@ export type LegendItem = { }; /** @internal */ -export type LegendItemExtraValues = Map; +export type LegendItemValues = Map; diff --git a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap index 7ef38b43fa7..126ced122a5 100644 --- a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap +++ b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap @@ -20,11 +20,11 @@ exports[`Chart should render the legend name test 1`] = ` - +
    - +
  • diff --git a/packages/charts/src/components/legend/__snapshots__/legend.test.tsx.snap b/packages/charts/src/components/legend/__snapshots__/legend.test.tsx.snap index 4be56c20f0a..5f42a129cc8 100644 --- a/packages/charts/src/components/legend/__snapshots__/legend.test.tsx.snap +++ b/packages/charts/src/components/legend/__snapshots__/legend.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = ` -" +"
  • @@ -23,7 +23,7 @@ exports[`Legend #legendColorPicker should match snapshot after onChange is calle
    • -     +
  • @@ -45,7 +45,7 @@ exports[`Legend #legendColorPicker should match snapshot after onChange is calle
    • -     +
  • @@ -67,7 +67,7 @@ exports[`Legend #legendColorPicker should match snapshot after onChange is calle
    • -     +
  • @@ -93,7 +93,7 @@ exports[`Legend #legendColorPicker should match snapshot after onChange is calle `; exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = ` -" +"
  • @@ -115,7 +115,7 @@ exports[`Legend #legendColorPicker should match snapshot after onClose is called
    • -     +
  • @@ -137,7 +137,7 @@ exports[`Legend #legendColorPicker should match snapshot after onClose is called
    • -     +
  • @@ -159,7 +159,7 @@ exports[`Legend #legendColorPicker should match snapshot after onClose is called
    • -     +
  • @@ -199,7 +199,7 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click `; exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = ` -" +"
  • @@ -234,7 +234,7 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click
    - +
  • @@ -256,7 +256,7 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click
    • -     +
  • @@ -278,7 +278,7 @@ exports[`Legend #legendColorPicker should render colorPicker when color is click
    • -     +
  • diff --git a/packages/charts/src/components/legend/_legend_item.scss b/packages/charts/src/components/legend/_legend_item.scss index a7bd7aee61d..b0fc8fa8244 100644 --- a/packages/charts/src/components/legend/_legend_item.scss +++ b/packages/charts/src/components/legend/_legend_item.scss @@ -21,7 +21,7 @@ $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight}; &:not([dir='rtl']) > *:not(.background) { margin-left: $euiSizeXS; - &:last-child:not(.echLegendItem__extra) { + &:last-child:not(.echLegendItem__value) { margin-right: $euiSizeXS; } } @@ -29,7 +29,7 @@ $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight}; &[dir='rtl'] > *:not(.background) { margin-right: $euiSizeXS; - &:last-child:not(.echLegendItem__extra) { + &:last-child:not(.echLegendItem__value) { margin-left: $euiSizeXS; } } @@ -102,7 +102,7 @@ $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight}; } } - &__extra { + &__value { @include euiFontSizeXS; text-align: right; flex: 0 0 auto; diff --git a/packages/charts/src/components/legend/legend.test.tsx b/packages/charts/src/components/legend/legend.test.tsx index 0094df800bd..b15d60baa69 100644 --- a/packages/charts/src/components/legend/legend.test.tsx +++ b/packages/charts/src/components/legend/legend.test.tsx @@ -14,6 +14,7 @@ import { LegendListItem } from './legend_item'; import { SeededDataGenerator } from '../../mocks/utils'; import { ScaleType } from '../../scales/constants'; import { Settings, BarSeries, LegendColorPicker } from '../../specs'; +import { LegendValue } from '../../specs/legend_spec'; import { Chart } from '../chart'; const dg = new SeededDataGenerator(); @@ -22,7 +23,7 @@ describe('Legend', () => { it('shall render the all the series names', () => { const wrapper = mount( - + { it('shall render the all the series names without the data value', () => { const wrapper = mount( - + { const data = dg.generateGroupedSeries(10, numberOfSeries, 'split'); const wrapper = mount( - + { const data = dg.generateGroupedSeries(10, numberOfSeries, 'split'); const wrapper = mount( - + { const data = [{ x: 2, y: 5 }]; const wrapper = mount( - + ; + values: Map; } interface LegendDispatchProps { @@ -96,8 +96,8 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) { positionConfig, isMostlyRTL, totalItems: items.length, - extraValues: props.extraValues, - showExtra: config.showLegendExtra, + values: props.values, + legendValue: config.legendValue, onMouseOut: config.onLegendItemOut, onMouseOver: config.onLegendItemOver, onClick: config.onLegendItemClick, @@ -123,7 +123,7 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) { ...customProps, seriesIdentifiers, path, - extraValue: itemProps.extraValues.get(seriesIdentifiers[0]?.key ?? '')?.get(childId ?? ''), + value: itemProps.values.get(seriesIdentifiers[0]?.key ?? '')?.get(childId ?? ''), onItemOutAction: itemProps.mouseOutAction, onItemOverActon: () => itemProps.mouseOverAction(path), onItemClickAction: (negate: boolean) => itemProps.toggleDeselectSeriesAction(seriesIdentifiers, negate), @@ -160,7 +160,7 @@ const EMPTY_DEFAULT_STATE: LegendStateProps = { chartDimensions: { width: 0, height: 0, left: 0, top: 0 }, containerDimensions: { width: 0, height: 0, left: 0, top: 0 }, items: [], - extraValues: new Map(), + values: new Map(), debug: false, isBrushing: false, chartTheme: LIGHT_THEME, @@ -185,7 +185,7 @@ const mapStateToProps = (state: GlobalChartState): LegendStateProps => { chartTheme: getChartThemeSelector(state), size: getLegendSizeSelector(state), items: getLegendItemsSelector(state), - extraValues: getLegendExtraValuesSelector(state), + values: getLegendValuesSelector(state), config, }; }; diff --git a/packages/charts/src/components/legend/legend_icon.test.tsx b/packages/charts/src/components/legend/legend_icon.test.tsx index c45c57cabfa..493ff6ef775 100644 --- a/packages/charts/src/components/legend/legend_icon.test.tsx +++ b/packages/charts/src/components/legend/legend_icon.test.tsx @@ -11,14 +11,14 @@ import React from 'react'; import { LegendIcon } from './legend_icon'; import { ScaleType } from '../../scales/constants'; -import { Settings, LineSeries, AreaSeries } from '../../specs'; +import { Settings, LineSeries, AreaSeries, LegendValue } from '../../specs'; import { Chart } from '../chart'; describe('Legend icons', () => { it('should test default dot icons', () => { const wrapper = mount( - + { it('should align styles - stroke', () => { const wrapperColorChange = mount( - + ; - showExtra: boolean; + values: Map; + legendValue: LegendSpec['legendValue']; isMostlyRTL: boolean; labelOptions: LegendLabelOptions; colorPicker?: LegendColorPicker; @@ -170,9 +171,9 @@ export class LegendListItem extends Component render() { const { - extraValues, + values, + legendValue, item, - showExtra, colorPicker, totalItems, action: Action, @@ -190,12 +191,13 @@ export class LegendListItem extends Component 'echLegendItem--vertical': positionConfig.direction === LayoutDirection.Vertical, }); const hasColorPicker = Boolean(colorPicker); - const extra = showExtra && getExtra(extraValues, item, totalItems); - const style: CSSProperties = flatLegend - ? {} - : { - [isMostlyRTL ? 'marginRight' : 'marginLeft']: LEGEND_HIERARCHY_MARGIN * (item.depth ?? 0), - }; + + const value = legendValue !== LegendValue.None ? getValue(values, item, totalItems) : undefined; + const style: CSSProperties = { + [isMostlyRTL ? 'marginRight' : 'marginLeft']: flatLegend + ? undefined + : LEGEND_HIERARCHY_MARGIN * (item.depth ?? 0), + }; return ( <>
  • onToggle={this.onLabelToggle(seriesIdentifiers)} isSeriesHidden={isSeriesHidden} /> - {extra && !isSeriesHidden && renderExtra(extra)} + {value && !isSeriesHidden && ( +
    + {value} +
    + )} {Action && (
    diff --git a/packages/charts/src/components/legend/position_style.ts b/packages/charts/src/components/legend/position_style.ts index 23735ab26c0..8b7c761eea1 100644 --- a/packages/charts/src/components/legend/position_style.ts +++ b/packages/charts/src/components/legend/position_style.ts @@ -8,7 +8,7 @@ import { CSSProperties } from 'react'; -import { LegendSpec, LegendPositionConfig } from '../../specs/settings'; +import { LegendSpec, LegendPositionConfig } from '../../specs/legend_spec'; import { LayoutDirection, Position } from '../../utils/common'; import { Dimensions, Size } from '../../utils/dimensions'; diff --git a/packages/charts/src/components/legend/style_utils.ts b/packages/charts/src/components/legend/style_utils.ts index d0b7b60f0bc..508f5b6b7d7 100644 --- a/packages/charts/src/components/legend/style_utils.ts +++ b/packages/charts/src/components/legend/style_utils.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { LegendPositionConfig } from '../../specs/settings'; +import { LegendPositionConfig } from '../../specs/legend_spec'; import { clamp, LayoutDirection } from '../../utils/common'; import { Margins, Size } from '../../utils/dimensions'; import { LegendStyle as ThemeLegendStyle } from '../../utils/themes/theme'; diff --git a/packages/charts/src/components/legend/extra.tsx b/packages/charts/src/components/legend/types.ts similarity index 59% rename from packages/charts/src/components/legend/extra.tsx rename to packages/charts/src/components/legend/types.ts index d24a9fc07d0..c6cde7b74e1 100644 --- a/packages/charts/src/components/legend/extra.tsx +++ b/packages/charts/src/components/legend/types.ts @@ -6,17 +6,7 @@ * Side Public License, v 1. */ -import React from 'react'; - -/** - * @internal - * @param extra - * @param isSeriesHidden - */ -export function renderExtra(extra: string | number) { - return ( -
    - {extra} -
    - ); +/** @internal */ +export interface LegendValue { + value: number | null; } diff --git a/packages/charts/src/components/legend/utils.ts b/packages/charts/src/components/legend/utils.ts index 2807048a06c..9a210d11ec8 100644 --- a/packages/charts/src/components/legend/utils.ts +++ b/packages/charts/src/components/legend/utils.ts @@ -6,18 +6,18 @@ * Side Public License, v 1. */ -import { LegendItemExtraValues, LegendItem } from '../../common/legend'; +import { LegendItemValues, LegendItem } from '../../common/legend'; /** @internal */ -export function getExtra(extraValues: Map, item: LegendItem, totalItems: number) { - const { seriesIdentifiers, defaultExtra, childId, path } = item; - // don't show extra if the legend item is associated with multiple series - if (extraValues.size === 0 || seriesIdentifiers.length > 1 || !seriesIdentifiers[0]) { - return defaultExtra?.formatted ?? ''; +export function getValue(values: Map, item: LegendItem, totalItems: number) { + const { seriesIdentifiers, value, childId, path } = item; + // don't show value if the legend item is associated with multiple series + if (values.size === 0 || seriesIdentifiers.length > 1 || !seriesIdentifiers[0]) { + return value.formatted; } const [{ key }] = seriesIdentifiers; - const extraValueKey = path.map(({ index }) => index).join('__'); - const itemExtraValues = extraValues.has(extraValueKey) ? extraValues.get(extraValueKey) : extraValues.get(key); - const actionExtra = childId !== undefined && itemExtraValues?.get(childId); - return actionExtra ?? (extraValues.size === totalItems ? defaultExtra?.formatted : null) ?? ''; + const valueKey = path.map(({ index }) => index).join('__'); + const itemValues = values.has(valueKey) ? values.get(valueKey) : values.get(key); + const actionValue = childId !== undefined ? itemValues?.get(childId) : null; + return actionValue ? `${actionValue}` : values.size === totalItems ? value.formatted : ''; } diff --git a/packages/charts/src/specs/constants.ts b/packages/charts/src/specs/constants.ts index e907d58c81f..14f866ffdc3 100644 --- a/packages/charts/src/specs/constants.ts +++ b/packages/charts/src/specs/constants.ts @@ -8,6 +8,7 @@ import { $Values } from 'utility-types'; +import { LegendValue } from './legend_spec'; import { SettingsSpec } from './settings'; import { ChartType } from '../chart_types'; import { BOTTOM, CENTER, LEFT, MIDDLE, RIGHT, TOP } from '../common/constants'; @@ -134,7 +135,7 @@ export type TooltipStickTo = $Values; export const DEFAULT_LEGEND_CONFIG = { showLegend: false, legendSize: NaN, - showLegendExtra: false, + legendValue: LegendValue.None, legendMaxDepth: Infinity, legendPosition: Position.Right, flatLegend: false, diff --git a/packages/charts/src/specs/index.ts b/packages/charts/src/specs/index.ts index a4dc077c330..484288a06e0 100644 --- a/packages/charts/src/specs/index.ts +++ b/packages/charts/src/specs/index.ts @@ -21,6 +21,7 @@ export interface Spec { export * from './group_by'; export * from './small_multiples'; export * from './settings'; +export * from './legend_spec'; export * from './constants'; export * from './tooltip'; export * from '../chart_types/specs'; diff --git a/packages/charts/src/specs/legend_spec.tsx b/packages/charts/src/specs/legend_spec.tsx new file mode 100644 index 00000000000..f2fd0f5fcf7 --- /dev/null +++ b/packages/charts/src/specs/legend_spec.tsx @@ -0,0 +1,220 @@ +/* + * 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 { ComponentType } from 'react'; +import { $Values } from 'utility-types'; + +import { BasicListener } from './settings'; +import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup'; +import { LegendStrategy } from '../chart_types/partition_chart/layout/utils/highlighted_geoms'; +import { SeriesType } from '../chart_types/specs'; +import { CategoryLabel } from '../common/category'; +import { Color } from '../common/colors'; +import { SeriesIdentifier } from '../common/series_id'; +import { LegendPath } from '../state/actions/legend'; +import { PointerValue } from '../state/types'; +import { HorizontalAlignment, LayoutDirection, Position, VerticalAlignment } from '../utils/common'; +import { SeriesCompareFn } from '../utils/series_sort'; +import { PointStyle } from '../utils/themes/theme'; + +/** @public */ +export type LegendItemListener = (series: SeriesIdentifier[]) => void; + +/** + * Legend action component props + * + * @public + */ +export interface LegendActionProps { + /** + * Series identifiers for the given series + */ + series: SeriesIdentifier[]; + /** + * Resolved label/name of given series + */ + label: string; + /** + * Resolved color of given series + */ + color: string; +} + +/** + * Legend action component used to render actions next to legend items + * + * render slot is constrained to 20px x 16px + * + * @public + */ +export type LegendAction = ComponentType; + +/** @public */ +export interface LegendColorPickerProps { + /** + * Anchor used to position picker + */ + anchor: HTMLElement; + /** + * Current color of the given series + */ + color: Color; + /** + * Callback to close color picker and set persistent color + */ + onClose: () => void; + /** + * Callback to update temporary color state + */ + onChange: (color: Color | null) => void; + /** + * Series ids for the active series + */ + seriesIdentifiers: SeriesIdentifier[]; +} + +/** @public */ +export type LegendColorPicker = ComponentType; + +/** + * The legend position configuration. + * @public + */ +export type LegendPositionConfig = { + /** + * The vertical alignment of the legend + */ + vAlign: typeof VerticalAlignment.Top | typeof VerticalAlignment.Bottom; // TODO typeof VerticalAlignment.Middle + /** + * The horizontal alignment of the legend + */ + hAlign: typeof HorizontalAlignment.Left | typeof HorizontalAlignment.Right; // TODO typeof HorizontalAlignment.Center + /** + * The direction of the legend items. + * `horizontal` shows all the items listed one a side the other horizontally, wrapping to new lines. + * `vertical` shows the items in a vertical list + */ + direction: LayoutDirection; + /** + * Remove the legend from the outside chart area, making it floating above the chart. + * @defaultValue false + */ + floating: boolean; + /** + * The number of columns in floating configuration + * @defaultValue 1 + */ + floatingColumns?: number; + // TODO add grow factor: fill, shrink, fixed column size +}; + +/** + * The props for {@link CustomLegend} + * @public + */ +export interface CustomLegendProps { + pointerValue?: PointerValue; + items: { + seriesIdentifiers: SeriesIdentifier[]; + path: LegendPath; + color: Color; + label: CategoryLabel; + seriesType?: SeriesType; + pointStyle?: PointStyle; + value?: PrimitiveValue; + isSeriesHidden?: boolean; + onItemOverActon: () => void; + onItemOutAction: () => void; + onItemClickAction: (negate: boolean) => void; + }[]; +} + +/** + * The react component used to render a custom legend + * @public + */ +export type CustomLegend = ComponentType; + +/** @public */ +export const LegendValue = Object.freeze({ + None: 'none' as const, + LastTimeBucket: 'lastTimeBucket' as const, + LastNonNull: 'lastNonNull' as const, + Average: 'avg' as const, + Min: 'min' as const, + Max: 'max' as const, + Sum: 'sum' as const, +}); +/** @public */ +export type LegendValue = $Values; + +/** + * The legend configuration + * @public + */ + +export interface LegendSpec { + /** + * Show the legend + * @defaultValue false + */ + showLegend: boolean; + /** + * Set legend position + * @defaultValue Position.Right + */ + legendPosition: Position | LegendPositionConfig; + /** + * Show an calculated value for each legend item + * @defaultValue `LegendValue.None` + */ + legendValue: LegendValue; + /** + * Limit the legend to the specified maximal depth when showing a hierarchical legend + * + * @remarks + * This is not the max depth, but the number of level shown: 0 none, 1 first, 2 up to the second etc. + * See https://github.com/elastic/elastic-charts/issues/1981 for details + */ + legendMaxDepth: number; + /** + * Sets the exact legend width (vertical) or height (horizontal) + * + * Limited to max of 70% of the chart container dimension + * Vertical legends limited to min of 30% of computed width + */ + legendSize: number; + /** + * Display the legend as a flat list. + * @defaultValue `false` + */ + flatLegend?: boolean; + /** + * Choose a partition highlighting strategy for hovering over legend items. + * @defaultValue `LegendStrategy.Path` + */ + legendStrategy?: LegendStrategy; + onLegendItemOver?: LegendItemListener; + onLegendItemOut?: BasicListener; + onLegendItemClick?: LegendItemListener; + onLegendItemPlusClick?: LegendItemListener; + onLegendItemMinusClick?: LegendItemListener; + /** + * Render slot to render action for legend + */ + legendAction?: LegendAction; + legendColorPicker?: LegendColorPicker; + /** + * A SeriesSortFn to sort the legend values (top-bottom) + */ + legendSort?: SeriesCompareFn; + /** + * Override the legend with a custom component. + */ + customLegend?: CustomLegend; +} diff --git a/packages/charts/src/specs/settings.test.tsx b/packages/charts/src/specs/settings.test.tsx index 911b7ed604d..82ffbec42b3 100644 --- a/packages/charts/src/specs/settings.test.tsx +++ b/packages/charts/src/specs/settings.test.tsx @@ -11,6 +11,7 @@ import React from 'react'; import { Provider } from 'react-redux'; import { createStore, Store } from 'redux'; +import { LegendValue } from './legend_spec'; import { Settings, SettingsSpec } from './settings'; import { SpecsParser } from './specs_parser'; import { chartStoreReducer, GlobalChartState } from '../state/chart_state'; @@ -71,7 +72,7 @@ describe('Settings spec component', () => { animateData: true, showLegend: true, legendPosition: Position.Bottom, - showLegendExtra: false, + legendValue: LegendValue.None, debug: true, xDomain: { min: 0, max: 10 }, }, @@ -83,7 +84,7 @@ describe('Settings spec component', () => { expect(settingSpec.animateData).toBe(true); expect(settingSpec.showLegend).toEqual(true); expect(settingSpec.legendPosition).toBe(Position.Bottom); - expect(settingSpec.showLegendExtra).toEqual(false); + expect(settingSpec.legendValue).toEqual('none'); expect(settingSpec.debug).toBe(true); expect(settingSpec.xDomain).toEqual({ min: 0, max: 10 }); }); @@ -161,7 +162,7 @@ describe('Settings spec component', () => { animateData: true, showLegend: true, legendPosition: Position.Bottom, - showLegendExtra: false, + legendValue: LegendValue.None, debug: true, xDomain: { min: 0, max: 10 }, }; diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.ts similarity index 71% rename from packages/charts/src/specs/settings.tsx rename to packages/charts/src/specs/settings.ts index 2c14148ab35..b37e4e2068e 100644 --- a/packages/charts/src/specs/settings.tsx +++ b/packages/charts/src/specs/settings.ts @@ -10,35 +10,23 @@ import { ComponentProps, ComponentType, ReactChild } from 'react'; import { CustomXDomain, GroupByAccessor, Spec } from '.'; import { BinAgg, BrushAxis, Direction, PointerEventType, PointerUpdateTrigger, settingsBuildProps } from './constants'; +import { LegendSpec } from './legend_spec'; import { Cell } from '../chart_types/heatmap/layout/types/viewmodel_types'; import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup'; -import { LegendStrategy } from '../chart_types/partition_chart/layout/utils/highlighted_geoms'; -import { LineAnnotationDatum, RectAnnotationDatum, SeriesType } from '../chart_types/specs'; +import { LineAnnotationDatum, RectAnnotationDatum } from '../chart_types/specs'; import { WordModel } from '../chart_types/wordcloud/layout/types/viewmodel_types'; import { XYChartSeriesIdentifier } from '../chart_types/xy_chart/utils/series'; -import { CategoryLabel } from '../common/category'; -import { Color } from '../common/colors'; import { SmallMultiplesDatum } from '../common/panel_utils'; import { SeriesIdentifier } from '../common/series_id'; import { TooltipPortalSettings } from '../components'; import { ScaleContinuousType, ScaleOrdinalType } from '../scales'; import { LegendPath } from '../state/actions/legend'; import { SFProps, useSpecFactory } from '../state/spec_factory'; -import { PointerValue } from '../state/types'; -import { - HorizontalAlignment, - LayoutDirection, - Position, - Rendering, - Rotation, - VerticalAlignment, - stripUndefined, -} from '../utils/common'; +import { Rendering, Rotation, stripUndefined } from '../utils/common'; import { Dimensions } from '../utils/dimensions'; import { GeometryValue } from '../utils/geometry'; import { GroupId, SpecId } from '../utils/ids'; -import { SeriesCompareFn } from '../utils/series_sort'; -import { PartialTheme, PointStyle, Theme } from '../utils/themes/theme'; +import { PartialTheme, Theme } from '../utils/themes/theme'; /** @public */ export interface LayerValue { @@ -197,8 +185,6 @@ export interface HeatmapBrushEvent extends SmallMultiplesDatum { y: (string | number)[]; } -/** @public */ -export type LegendItemListener = (series: SeriesIdentifier[]) => void; /** * The listener type for generic mouse move * @@ -273,192 +259,12 @@ export interface ExternalPointerEventsSettings { }; } -/** - * Legend action component props - * - * @public - */ -export interface LegendActionProps { - /** - * Series identifiers for the given series - */ - series: SeriesIdentifier[]; - /** - * Resolved label/name of given series - */ - label: string; - /** - * Resolved color of given series - */ - color: string; -} - -/** - * Legend action component used to render actions next to legend items - * - * render slot is constrained to 20px x 16px - * - * @public - */ -export type LegendAction = ComponentType; - -/** @public */ -export interface LegendColorPickerProps { - /** - * Anchor used to position picker - */ - anchor: HTMLElement; - /** - * Current color of the given series - */ - color: Color; - /** - * Callback to close color picker and set persistent color - */ - onClose: () => void; - /** - * Callback to update temporary color state - */ - onChange: (color: Color | null) => void; - /** - * Series ids for the active series - */ - seriesIdentifiers: SeriesIdentifier[]; -} - -/** @public */ -export type LegendColorPicker = ComponentType; - /** * Buffer between cursor and point to trigger interaction * @public */ export type MarkBuffer = number | ((radius: number) => number); -/** - * The legend position configuration. - * @public - */ -export type LegendPositionConfig = { - /** - * The vertical alignment of the legend - */ - vAlign: typeof VerticalAlignment.Top | typeof VerticalAlignment.Bottom; // TODO typeof VerticalAlignment.Middle - /** - * The horizontal alignment of the legend - */ - hAlign: typeof HorizontalAlignment.Left | typeof HorizontalAlignment.Right; // TODO typeof HorizontalAlignment.Center - /** - * The direction of the legend items. - * `horizontal` shows all the items listed one a side the other horizontally, wrapping to new lines. - * `vertical` shows the items in a vertical list - */ - direction: LayoutDirection; - /** - * Remove the legend from the outside chart area, making it floating above the chart. - * @defaultValue false - */ - floating: boolean; - /** - * The number of columns in floating configuration - * @defaultValue 1 - */ - floatingColumns?: number; - // TODO add grow factor: fill, shrink, fixed column size -}; - -/** - * The props for {@link CustomLegend} - * @public - */ -export interface CustomLegendProps { - pointerValue?: PointerValue; - items: { - seriesIdentifiers: SeriesIdentifier[]; - path: LegendPath; - color: Color; - label: CategoryLabel; - seriesType?: SeriesType; - pointStyle?: PointStyle; - extraValue?: PrimitiveValue; - isSeriesHidden?: boolean; - onItemOverActon: () => void; - onItemOutAction: () => void; - onItemClickAction: (negate: boolean) => void; - }[]; -} - -/** - * The react component used to render a custom legend - * @public - */ -export type CustomLegend = ComponentType; - -/** - * The legend configuration - * @public - */ -export interface LegendSpec { - /** - * Show the legend - * @defaultValue false - */ - showLegend: boolean; - /** - * Set legend position - * @defaultValue Position.Right - */ - legendPosition: Position | LegendPositionConfig; - /** - * Show an extra parameter on each legend item defined by the chart type - * @defaultValue `false` - */ - showLegendExtra: boolean; - /** - * Limit the legend to the specified maximal depth when showing a hierarchical legend - * - * @remarks - * This is not the max depth, but the number of level shown: 0 none, 1 first, 2 up to the second etc. - * See https://github.com/elastic/elastic-charts/issues/1981 for details - */ - legendMaxDepth: number; - /** - * Sets the exact legend width (vertical) or height (horizontal) - * - * Limited to max of 70% of the chart container dimension - * Vertical legends limited to min of 30% of computed width - */ - legendSize: number; - /** - * Display the legend as a flat list. - * @defaultValue `false` - */ - flatLegend?: boolean; - /** - * Choose a partition highlighting strategy for hovering over legend items. - * @defaultValue `LegendStrategy.Path` - */ - legendStrategy?: LegendStrategy; - onLegendItemOver?: LegendItemListener; - onLegendItemOut?: BasicListener; - onLegendItemClick?: LegendItemListener; - onLegendItemPlusClick?: LegendItemListener; - onLegendItemMinusClick?: LegendItemListener; - /** - * Render slot to render action for legend - */ - legendAction?: LegendAction; - legendColorPicker?: LegendColorPicker; - /** - * A SeriesSortFn to sort the legend values (top-bottom) - */ - legendSort?: SeriesCompareFn; - /** - * Override the legend with a custom component. - */ - customLegend?: CustomLegend; -} - /** * The Spec used for Chart settings * @public diff --git a/packages/charts/src/state/chart_state.ts b/packages/charts/src/state/chart_state.ts index 308347ba4ba..c95b4ad76f2 100644 --- a/packages/charts/src/state/chart_state.ts +++ b/packages/charts/src/state/chart_state.ts @@ -34,7 +34,7 @@ import { WordcloudState } from '../chart_types/wordcloud/state/chart_state'; import { XYAxisChartState } from '../chart_types/xy_chart/state/chart_state'; import { CategoryKey } from '../common/category'; import { Color } from '../common/colors'; -import { LegendItem, LegendItemExtraValues } from '../common/legend'; +import { LegendItem, LegendItemValues } from '../common/legend'; import { SmallMultiplesSeriesDomains } from '../common/panel_utils'; import { SeriesIdentifier, SeriesKey } from '../common/series_id'; import { AnchorPosition } from '../components/portal/types'; @@ -101,10 +101,10 @@ export interface InternalChartState { */ getLegendItems(globalState: GlobalChartState): LegendItem[]; /** - * Returns the list of extra values for each legend item + * Returns the list of values for each legend item * @param globalState */ - getLegendExtraValues(globalState: GlobalChartState): Map; + getLegendValues(globalState: GlobalChartState): Map; /** * Returns the CSS pointer cursor depending on the internal chart state * @param globalState diff --git a/packages/charts/src/state/selectors/get_legend_config_selector.ts b/packages/charts/src/state/selectors/get_legend_config_selector.ts index 9606e8fa189..01412220b17 100644 --- a/packages/charts/src/state/selectors/get_legend_config_selector.ts +++ b/packages/charts/src/state/selectors/get_legend_config_selector.ts @@ -28,7 +28,7 @@ export const getLegendConfigSelector = createCustomCachedSelector( onLegendItemOut, onLegendItemOver, onLegendItemPlusClick, - showLegendExtra, + legendValue, }) => { return { flatLegend, @@ -45,7 +45,7 @@ export const getLegendConfigSelector = createCustomCachedSelector( onLegendItemOut, onLegendItemOver, onLegendItemPlusClick, - showLegendExtra, + legendValue, }; }, ); diff --git a/packages/charts/src/state/selectors/get_legend_items_values.ts b/packages/charts/src/state/selectors/get_legend_items_values.ts index 7a56e3c5a03..8614a3cbfcf 100644 --- a/packages/charts/src/state/selectors/get_legend_items_values.ts +++ b/packages/charts/src/state/selectors/get_legend_items_values.ts @@ -6,16 +6,16 @@ * Side Public License, v 1. */ -import { LegendItemExtraValues } from '../../common/legend'; +import { LegendItemValues } from '../../common/legend'; import { SeriesKey } from '../../common/series_id'; import { GlobalChartState } from '../chart_state'; -const EMPTY_ITEM_LIST = new Map(); +const EMPTY_ITEM_LIST = new Map(); /** @internal */ -export const getLegendExtraValuesSelector = (state: GlobalChartState): Map => { +export const getLegendValuesSelector = (state: GlobalChartState): Map => { if (state.internalChartState) { - return state.internalChartState.getLegendExtraValues(state); + return state.internalChartState.getLegendValues(state); } return EMPTY_ITEM_LIST; }; diff --git a/packages/charts/src/state/selectors/get_legend_size.ts b/packages/charts/src/state/selectors/get_legend_size.ts index e0f2d48889d..56d622968e1 100644 --- a/packages/charts/src/state/selectors/get_legend_size.ts +++ b/packages/charts/src/state/selectors/get_legend_size.ts @@ -12,7 +12,7 @@ import { getLegendItemsLabelsSelector } from './get_legend_items_labels'; import { DEFAULT_FONT_FAMILY } from '../../common/default_theme_attributes'; import { LEGEND_HIERARCHY_MARGIN } from '../../components/legend/legend_item'; import { LEGEND_TO_FULL_CONFIG } from '../../components/legend/position_style'; -import { LegendPositionConfig } from '../../specs/settings'; +import { LegendValue, LegendPositionConfig } from '../../specs/legend_spec'; import { withTextMeasure } from '../../utils/bbox/canvas_text_bbox_calculator'; import { isDefined, LayoutDirection, Position } from '../../utils/common'; import { Size } from '../../utils/dimensions'; @@ -58,13 +58,14 @@ export const getLegendSizeSelector = createCustomCachedSelector( ), ); - const { showLegendExtra: showLegendDisplayValue, legendPosition, legendAction } = legendConfig; + const { legendValue, legendPosition, legendAction } = legendConfig; const { legend: { verticalWidth, spacingBuffer, margin }, } = theme; const actionDimension = isDefined(legendAction) ? 24 : 0; // max width plus margin - const legendItemWidth = MARKER_WIDTH + SHARED_MARGIN + bbox.width + (showLegendDisplayValue ? SHARED_MARGIN : 0); + const legendItemWidth = + MARKER_WIDTH + SHARED_MARGIN + bbox.width + (legendValue !== LegendValue.None ? SHARED_MARGIN : 0); if (legendPosition.direction === LayoutDirection.Vertical) { const legendItemHeight = bbox.height + VERTICAL_PADDING * 2; diff --git a/packages/charts/src/utils/data_samples/test_dataset_kibana_2.ts b/packages/charts/src/utils/data_samples/test_dataset_kibana_2.ts new file mode 100644 index 00000000000..12d03d4d62c --- /dev/null +++ b/packages/charts/src/utils/data_samples/test_dataset_kibana_2.ts @@ -0,0 +1,85 @@ +/* + * 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. + */ + +export const TIME_SERIES_DATASET = [ + [1684188000000, 6], + [1684189800000, 8], + [1684191600000, 8], + [1684193400000, 8], + [1684195200000, 8], + [1684197000000, 8], + [1684198800000, 8], + [1684200600000, 8], + [1684202400000, 6], + [1684204200000, 3], + [1684206000000, 6], + [1684207800000, 3], + [1684209600000, 4], + [1684211400000, 11], + [1684213200000, 11], + [1684215000000, 9], + [1684216800000, 4], + [1684218600000, 11], + [1684220400000, 14], + [1684222200000, 9], + [1684224000000, 7], + [1684225800000, 7], + [1684227600000, 9], + [1684229400000, 4], + [1684231200000, 8], + [1684233000000, 8], + [1684234800000, 3], + [1684236600000, 7], + [1684238400000, 8], + [1684240200000, 8], + [1684242000000, 6], + [1684243800000, 4], + [1684245600000, 2], + [1684247400000, 7], + [1684249200000, 6], + [1684251000000, 10], + [1684252800000, 8], + [1684254600000, 6], + [1684256400000, 4], + [1684258200000, 9], + [1684260000000, 5], + [1684261800000, 3], + [1684263600000, 7], + [1684265400000, 7], + [1684267200000, 1], + [1684269000000, 5], + [1684270800000, 6], + [1684272600000, 9], + [1684274400000, 10], + [1684276200000, 8], + [1684278000000, 12], + [1684279800000, 5], + [1684281600000, 7], + [1684283400000, 5], + [1684285200000, 8], + [1684287000000, 2], + [1684288800000, 7], + [1684290600000, 7], + [1684292400000, 4], + [1684294200000, 7], + [1684296000000, 9], + [1684297800000, 8], + [1684299600000, 5], + [1684301400000, 8], + [1684303200000, 6], + [1684305000000, 5], + [1684306800000, 5], + [1684308600000, 8], + [1684310400000, 2], + [1684312200000, 8], + [1684314000000, 6], + [1684315800000, 8], + [1684317600000, 3], + [1684319400000, 6], + [1684321200000, null], +]; diff --git a/packages/charts/src/utils/legend.ts b/packages/charts/src/utils/legend.ts index 31ce9dee301..887ec0dc14d 100644 --- a/packages/charts/src/utils/legend.ts +++ b/packages/charts/src/utils/legend.ts @@ -7,7 +7,7 @@ */ import { LayoutDirection } from './common'; -import { LegendPositionConfig } from '../specs/settings'; +import { LegendPositionConfig } from '../specs/legend_spec'; /** @internal */ export const isHorizontalLegend = (legendPosition: LegendPositionConfig) => diff --git a/storybook/stories/annotations/lines/1_x_continuous.story.tsx b/storybook/stories/annotations/lines/1_x_continuous.story.tsx index e97372149ea..c9d52899326 100644 --- a/storybook/stories/annotations/lines/1_x_continuous.story.tsx +++ b/storybook/stories/annotations/lines/1_x_continuous.story.tsx @@ -54,7 +54,13 @@ export const Example = () => { return ( - + ( - + { const y1AccessorFormat = text('y1AccessorFormat', ''); return ( - + + new Intl.DateTimeFormat('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + }).format(d); + +const topAxisLabelFormat = (d: any) => + `${new Intl.DateTimeFormat('en-US', { minute: 'numeric' }).format(d).padStart(2, '0')}′ `; + +export const Example = () => { + const horizontalAxisTitle = true; + const yAxisTitle = 'CPU utilization'; + const legendValue = getKnobFromEnum('Legend Value', LegendValue, LegendValue.LastNonNull); + return ( + + + + `${Number(d).toFixed(1)}`} + /> + + + ); +}; + +// storybook configuration +Example.parameters = { + options: { selectedPanel: SB_SOURCE_PANEL }, +}; diff --git a/storybook/stories/area/6_with_axis_and_legend.story.tsx b/storybook/stories/area/6_with_axis_and_legend.story.tsx index 75f6a2a934c..b6d322c48a9 100644 --- a/storybook/stories/area/6_with_axis_and_legend.story.tsx +++ b/storybook/stories/area/6_with_axis_and_legend.story.tsx @@ -8,7 +8,7 @@ import React from 'react'; -import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts'; +import { AreaSeries, Axis, Chart, LegendValue, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts'; import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,7 +17,12 @@ const dateFormatter = timeFormatter('HH:mm'); export const Example = () => ( - + { const allMetrics = [...data3, ...data2, ...data1]; return ( - + { const stackedAsPercentage = boolean('stacked as percentage', true); return ( - + ( - + ( - + { return ( - + `${value}${headerUnit ? ` ${headerUnit}` : ''}` diff --git a/storybook/stories/bar/10_axis_and_legend.story.tsx b/storybook/stories/bar/10_axis_and_legend.story.tsx index 76a31084d49..555f1210863 100644 --- a/storybook/stories/bar/10_axis_and_legend.story.tsx +++ b/storybook/stories/bar/10_axis_and_legend.story.tsx @@ -8,13 +8,18 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, LegendValue, Position, ScaleType, Settings } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/11_stacked_with_axis_and_legend.story.tsx b/storybook/stories/bar/11_stacked_with_axis_and_legend.story.tsx index a51e5798a1e..278e2956739 100644 --- a/storybook/stories/bar/11_stacked_with_axis_and_legend.story.tsx +++ b/storybook/stories/bar/11_stacked_with_axis_and_legend.story.tsx @@ -8,13 +8,18 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, LegendValue, Position, ScaleType, Settings } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/13_clustered.story.tsx b/storybook/stories/bar/13_clustered.story.tsx index 16c483bc58f..541c7081305 100644 --- a/storybook/stories/bar/13_clustered.story.tsx +++ b/storybook/stories/bar/13_clustered.story.tsx @@ -9,7 +9,7 @@ import { number } from '@storybook/addon-knobs'; import React from 'react'; -import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, LegendValue, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; import { customKnobs } from '../utils/knobs'; @@ -35,7 +35,7 @@ export const Example = () => { ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/18_bar_chart_1y0g.story.tsx b/storybook/stories/bar/18_bar_chart_1y0g.story.tsx index d9c820a1ac7..c3937ded306 100644 --- a/storybook/stories/bar/18_bar_chart_1y0g.story.tsx +++ b/storybook/stories/bar/18_bar_chart_1y0g.story.tsx @@ -8,14 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/19_bar_chart_1y1g.story.tsx b/storybook/stories/bar/19_bar_chart_1y1g.story.tsx index 0d538286e50..ecfa30497e5 100644 --- a/storybook/stories/bar/19_bar_chart_1y1g.story.tsx +++ b/storybook/stories/bar/19_bar_chart_1y1g.story.tsx @@ -8,14 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/20_bar_chart_1y2g.story.tsx b/storybook/stories/bar/20_bar_chart_1y2g.story.tsx index e2a569cb303..6dcddd54b23 100644 --- a/storybook/stories/bar/20_bar_chart_1y2g.story.tsx +++ b/storybook/stories/bar/20_bar_chart_1y2g.story.tsx @@ -8,14 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/21_bar_chart_2y0g.story.tsx b/storybook/stories/bar/21_bar_chart_2y0g.story.tsx index b12896d0ea0..2b5d7fd1a82 100644 --- a/storybook/stories/bar/21_bar_chart_2y0g.story.tsx +++ b/storybook/stories/bar/21_bar_chart_2y0g.story.tsx @@ -8,14 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/22_barchart_2y1g.story.tsx b/storybook/stories/bar/22_barchart_2y1g.story.tsx index 1ef42acc01b..2204879b382 100644 --- a/storybook/stories/bar/22_barchart_2y1g.story.tsx +++ b/storybook/stories/bar/22_barchart_2y1g.story.tsx @@ -8,14 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/23_bar_chart_2y2g.story.tsx b/storybook/stories/bar/23_bar_chart_2y2g.story.tsx index 0dea52d2962..141b7370293 100644 --- a/storybook/stories/bar/23_bar_chart_2y2g.story.tsx +++ b/storybook/stories/bar/23_bar_chart_2y2g.story.tsx @@ -8,14 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> { const isVisibleFunction: FilterPredicate = (series) => series.splitAccessors.get('g1') === 'cloudflare.com'; return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/2_label_value.story.tsx b/storybook/stories/bar/2_label_value.story.tsx index 356f34c7838..d517261cbdf 100644 --- a/storybook/stories/bar/2_label_value.story.tsx +++ b/storybook/stories/bar/2_label_value.story.tsx @@ -19,6 +19,7 @@ import { ScaleType, Settings, PartialTheme, + LegendValue, } from '@elastic/charts'; import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils'; @@ -98,7 +99,7 @@ export const Example = () => { debug={debug} rotation={customKnobs.enum.rotation()} showLegend - showLegendExtra + legendValue={LegendValue.LastTimeBucket} legendPosition={customKnobs.enum.position('legend')} /> diff --git a/storybook/stories/bar/50_order_bins_by_sum.story.tsx b/storybook/stories/bar/50_order_bins_by_sum.story.tsx index 047d185c74b..76f2aa8d231 100644 --- a/storybook/stories/bar/50_order_bins_by_sum.story.tsx +++ b/storybook/stories/bar/50_order_bins_by_sum.story.tsx @@ -9,7 +9,7 @@ import { select, boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings, BinAgg, Direction } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, BinAgg, Direction, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -68,7 +68,7 @@ export const Example = () => { : undefined } showLegend - showLegendExtra + legendValue={LegendValue.LastTimeBucket} baseTheme={useBaseTheme()} legendPosition={Position.Right} /> diff --git a/storybook/stories/bar/51_label_value_advanced.story.tsx b/storybook/stories/bar/51_label_value_advanced.story.tsx index 1257ceb498f..ff8586e3fe7 100644 --- a/storybook/stories/bar/51_label_value_advanced.story.tsx +++ b/storybook/stories/bar/51_label_value_advanced.story.tsx @@ -19,6 +19,7 @@ import { Position, ScaleType, Settings, + LegendValue, } from '@elastic/charts'; import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils'; @@ -129,7 +130,7 @@ export const Example = () => { debug={debug} rotation={customKnobs.enum.rotation()} showLegend - showLegendExtra + legendValue={LegendValue.LastTimeBucket} /> Number(d).toFixed(2)} /> diff --git a/storybook/stories/debug/1_basic.story.tsx b/storybook/stories/debug/1_basic.story.tsx index 9f334d4083c..d3319198ebb 100644 --- a/storybook/stories/debug/1_basic.story.tsx +++ b/storybook/stories/debug/1_basic.story.tsx @@ -9,7 +9,17 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, ScaleType, Settings, Position, Axis, BarSeries, AreaSeries, CurveType } from '@elastic/charts'; +import { + Chart, + ScaleType, + Settings, + Position, + Axis, + BarSeries, + AreaSeries, + CurveType, + LegendValue, +} from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -18,7 +28,13 @@ export const Example = () => { return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/debug/2_debug_state.story.tsx b/storybook/stories/debug/2_debug_state.story.tsx index 64598ace28e..58c9bc9fe4e 100644 --- a/storybook/stories/debug/2_debug_state.story.tsx +++ b/storybook/stories/debug/2_debug_state.story.tsx @@ -20,6 +20,7 @@ import { Axis, Position, SeriesNameFn, + LegendValue, } from '@elastic/charts'; import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils'; @@ -49,7 +50,7 @@ export const Example = () => { debug={debug} debugState={debugState} showLegend - showLegendExtra + legendValue={LegendValue.LastTimeBucket} baseTheme={useBaseTheme()} /> diff --git a/storybook/stories/interactions/15_render_change.story.tsx b/storybook/stories/interactions/15_render_change.story.tsx index 5bb2343fc8e..c7919e1d627 100644 --- a/storybook/stories/interactions/15_render_change.story.tsx +++ b/storybook/stories/interactions/15_render_change.story.tsx @@ -9,7 +9,7 @@ import { action } from '@storybook/addon-actions'; import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -19,7 +19,7 @@ export const Example = () => ( { { { {selectedChart === ChartType.Partition ? renderPartitionChart() diff --git a/storybook/stories/interactions/1_bar_clicks.story.tsx b/storybook/stories/interactions/1_bar_clicks.story.tsx index cea7975847a..69f695fa766 100644 --- a/storybook/stories/interactions/1_bar_clicks.story.tsx +++ b/storybook/stories/interactions/1_bar_clicks.story.tsx @@ -19,6 +19,7 @@ import { Settings, Tooltip, TooltipHeaderFormatter, + LegendValue, } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -49,7 +50,7 @@ export const Example = () => { ( ( ( { { ( ( ( { PartitionLayout.sunburst, ); const flatLegend = boolean('flatLegend', true); - const showLegendExtra = boolean('showLegendExtra', false); + const showLegendValue = boolean('showLegendValue', false); const legendMaxDepth = number('legendMaxDepth', 2, { min: 0, max: 3, @@ -100,7 +100,7 @@ export const Example = () => { { export const Example = () => { const hideActions = boolean('Hide legend action', false, 'Legend'); - const showLegendExtra = !boolean('Hide legend extra', false, 'Legend'); + const showLegendValue = !boolean('Hide legend value', false, 'Legend'); const showColorPicker = !boolean('Hide color picker', true, 'Legend'); const legendPosition = customKnobs.enum.position('Legend position', undefined, { group: 'Legend' }); const euiPopoverPosition = customKnobs.enum.euiPopoverPosition(undefined, undefined, { group: 'Legend' }); @@ -39,7 +48,7 @@ export const Example = () => { showLegend theme={{ legend: { labelOptions } }} baseTheme={useBaseTheme()} - showLegendExtra={showLegendExtra} + legendValue={showLegendValue ? LegendValue.LastTimeBucket : LegendValue.None} legendPosition={legendPosition} legendAction={hideActions ? undefined : getLegendAction(euiPopoverPosition)} legendColorPicker={showColorPicker ? getColorPicker(euiPopoverPosition) : undefined} diff --git a/storybook/stories/legend/13_inside_chart.story.tsx b/storybook/stories/legend/13_inside_chart.story.tsx index 935d404833b..325cb2766c3 100644 --- a/storybook/stories/legend/13_inside_chart.story.tsx +++ b/storybook/stories/legend/13_inside_chart.story.tsx @@ -20,6 +20,7 @@ import { VerticalAlignment, HorizontalAlignment, LayoutDirection, + LegendValue, } from '@elastic/charts'; import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils'; import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; @@ -83,7 +84,7 @@ export const Example = () => { { { onClick={() => i.onItemClickAction(false)} style={{ display: 'block', color: i.isSeriesHidden ? 'gray' : i.color }} > - {i.label} {i.extraValue} + {i.label} {i.value} ))}
    @@ -61,7 +62,7 @@ export const Example = () => { { ( ( ( { const splitSeries = boolean('split series', true) ? ['g1', 'g2'] : undefined; return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/legend/6_hide_legend.story.tsx b/storybook/stories/legend/6_hide_legend.story.tsx index fc8755cda94..95f0e4d9792 100644 --- a/storybook/stories/legend/6_hide_legend.story.tsx +++ b/storybook/stories/legend/6_hide_legend.story.tsx @@ -9,7 +9,7 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -19,7 +19,12 @@ export const Example = () => { return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/legend/8_spacing_buffer.story.tsx b/storybook/stories/legend/8_spacing_buffer.story.tsx index 6e0069e22c5..f36cd362eda 100644 --- a/storybook/stories/legend/8_spacing_buffer.story.tsx +++ b/storybook/stories/legend/8_spacing_buffer.story.tsx @@ -9,7 +9,7 @@ import { boolean, number } from '@storybook/addon-knobs'; import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings, PartialTheme } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, PartialTheme, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -26,7 +26,13 @@ export const Example = () => { return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/line/11_discontinuous_data_points.story.tsx b/storybook/stories/line/11_discontinuous_data_points.story.tsx index 8d96adb58cb..ee203585234 100644 --- a/storybook/stories/line/11_discontinuous_data_points.story.tsx +++ b/storybook/stories/line/11_discontinuous_data_points.story.tsx @@ -9,7 +9,18 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Axis, Chart, CurveType, LineSeries, Position, ScaleType, Settings, Fit, AreaSeries } from '@elastic/charts'; +import { + Axis, + Chart, + CurveType, + LineSeries, + Position, + ScaleType, + Settings, + Fit, + AreaSeries, + LegendValue, +} from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -19,7 +30,12 @@ export const Example = () => { const LineOrAreaSeries = isArea ? AreaSeries : LineSeries; return ( - + diff --git a/storybook/stories/line/14_point_shapes.story.tsx b/storybook/stories/line/14_point_shapes.story.tsx index aefa40dd046..f3b718ce904 100644 --- a/storybook/stories/line/14_point_shapes.story.tsx +++ b/storybook/stories/line/14_point_shapes.story.tsx @@ -20,6 +20,7 @@ import { ScaleType, Settings, timeFormatter, + LegendValue, } from '@elastic/charts'; import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; @@ -37,7 +38,7 @@ export const Example = () => { ( - + ( - + ( - + ( - + ( - + ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/mixed/2_lines_and_areas.story.tsx b/storybook/stories/mixed/2_lines_and_areas.story.tsx index 1c165880854..0a23f108541 100644 --- a/storybook/stories/mixed/2_lines_and_areas.story.tsx +++ b/storybook/stories/mixed/2_lines_and_areas.story.tsx @@ -8,13 +8,18 @@ import React from 'react'; -import { AreaSeries, Axis, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts'; +import { AreaSeries, Axis, Chart, LineSeries, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/mixed/3_areas_and_bars.story.tsx b/storybook/stories/mixed/3_areas_and_bars.story.tsx index 06240997d8c..605325464b0 100644 --- a/storybook/stories/mixed/3_areas_and_bars.story.tsx +++ b/storybook/stories/mixed/3_areas_and_bars.story.tsx @@ -8,13 +8,28 @@ import React from 'react'; -import { AreaSeries, Axis, BarSeries, Chart, CurveType, Position, ScaleType, Settings } from '@elastic/charts'; +import { + AreaSeries, + Axis, + BarSeries, + Chart, + CurveType, + Position, + ScaleType, + Settings, + LegendValue, +} from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/mixed/4_test_bar.story.tsx b/storybook/stories/mixed/4_test_bar.story.tsx index 628ff075bae..44a85fcb0b8 100644 --- a/storybook/stories/mixed/4_test_bar.story.tsx +++ b/storybook/stories/mixed/4_test_bar.story.tsx @@ -8,7 +8,7 @@ import React from 'react'; -import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -38,7 +38,12 @@ export const Example = () => { return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/mixed/5_test_bar_time.story.tsx b/storybook/stories/mixed/5_test_bar_time.story.tsx index 3a56fcc56d3..868d2df87e9 100644 --- a/storybook/stories/mixed/5_test_bar_time.story.tsx +++ b/storybook/stories/mixed/5_test_bar_time.story.tsx @@ -9,7 +9,7 @@ import { DateTime } from 'luxon'; import React from 'react'; -import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, LineSeries, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { timeFormatter } from '@elastic/charts/src/utils/data/formatters'; import { useBaseTheme } from '../../use_base_theme'; @@ -42,7 +42,12 @@ export const Example = () => { return ( - + { { { }); return ( - + { ( baseTheme={useBaseTheme()} debug={boolean('Debug', true)} showLegend={boolean('Legend', true)} - showLegendExtra + legendValue={LegendValue.LastTimeBucket} legendPosition={select( 'Legend position', { diff --git a/storybook/stories/rotations/2_negative_ordinal.story.tsx b/storybook/stories/rotations/2_negative_ordinal.story.tsx index adb656cb365..6fd162df906 100644 --- a/storybook/stories/rotations/2_negative_ordinal.story.tsx +++ b/storybook/stories/rotations/2_negative_ordinal.story.tsx @@ -8,13 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + diff --git a/storybook/stories/rotations/3_rotations_ordinal.story.tsx b/storybook/stories/rotations/3_rotations_ordinal.story.tsx index 07fd60fc1ce..43bdd3cbb39 100644 --- a/storybook/stories/rotations/3_rotations_ordinal.story.tsx +++ b/storybook/stories/rotations/3_rotations_ordinal.story.tsx @@ -8,13 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + diff --git a/storybook/stories/rotations/4_90_ordinal.story.tsx b/storybook/stories/rotations/4_90_ordinal.story.tsx index 4a50cf527ed..63ce64f98cd 100644 --- a/storybook/stories/rotations/4_90_ordinal.story.tsx +++ b/storybook/stories/rotations/4_90_ordinal.story.tsx @@ -8,13 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + diff --git a/storybook/stories/rotations/5_180_ordinal.story.tsx b/storybook/stories/rotations/5_180_ordinal.story.tsx index bd233337ef2..51771f128a2 100644 --- a/storybook/stories/rotations/5_180_ordinal.story.tsx +++ b/storybook/stories/rotations/5_180_ordinal.story.tsx @@ -8,13 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + diff --git a/storybook/stories/rotations/6_negative_linear.story.tsx b/storybook/stories/rotations/6_negative_linear.story.tsx index cffae527acd..aaf3f7ba1d1 100644 --- a/storybook/stories/rotations/6_negative_linear.story.tsx +++ b/storybook/stories/rotations/6_negative_linear.story.tsx @@ -8,13 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + diff --git a/storybook/stories/rotations/7_rotations_linear.story.tsx b/storybook/stories/rotations/7_rotations_linear.story.tsx index 6dab2610f39..9299fb22f28 100644 --- a/storybook/stories/rotations/7_rotations_linear.story.tsx +++ b/storybook/stories/rotations/7_rotations_linear.story.tsx @@ -8,13 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + diff --git a/storybook/stories/rotations/8_90_deg_linear.story.tsx b/storybook/stories/rotations/8_90_deg_linear.story.tsx index f06fdb831d0..f4c5e8330ae 100644 --- a/storybook/stories/rotations/8_90_deg_linear.story.tsx +++ b/storybook/stories/rotations/8_90_deg_linear.story.tsx @@ -8,13 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + diff --git a/storybook/stories/rotations/9_180_deg_linear.story.tsx b/storybook/stories/rotations/9_180_deg_linear.story.tsx index 04ae1b2aff5..a3488355e75 100644 --- a/storybook/stories/rotations/9_180_deg_linear.story.tsx +++ b/storybook/stories/rotations/9_180_deg_linear.story.tsx @@ -8,13 +8,19 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + diff --git a/storybook/stories/small_multiples/7_sunbursts.story.tsx b/storybook/stories/small_multiples/7_sunbursts.story.tsx index 4c7bda6a67b..2f107acaab8 100644 --- a/storybook/stories/small_multiples/7_sunbursts.story.tsx +++ b/storybook/stories/small_multiples/7_sunbursts.story.tsx @@ -15,6 +15,7 @@ import { Datum, GroupBy, LegendStrategy, + LegendValue, PartialTheme, Partition, PartitionLayout, @@ -95,7 +96,7 @@ export const Example = () => { { return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/stylings/11_custom_lines.story.tsx b/storybook/stories/stylings/11_custom_lines.story.tsx index 0f944b46aa0..abd393a3ed8 100644 --- a/storybook/stories/stylings/11_custom_lines.story.tsx +++ b/storybook/stories/stylings/11_custom_lines.story.tsx @@ -18,6 +18,7 @@ import { Settings, LineSeriesStyle, RecursivePartial, + LegendValue, } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -86,7 +87,7 @@ export const Example = () => { { { return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/stylings/13_custom_series_name_config.story.tsx b/storybook/stories/stylings/13_custom_series_name_config.story.tsx index a33a51f1e67..1fa541dfa80 100644 --- a/storybook/stories/stylings/13_custom_series_name_config.story.tsx +++ b/storybook/stories/stylings/13_custom_series_name_config.story.tsx @@ -8,7 +8,16 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings, SeriesNameConfigOptions } from '@elastic/charts'; +import { + Axis, + BarSeries, + Chart, + Position, + ScaleType, + Settings, + SeriesNameConfigOptions, + LegendValue, +} from '@elastic/charts'; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset'; import { useBaseTheme } from '../../use_base_theme'; @@ -32,7 +41,12 @@ export const Example = () => { }; return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/stylings/14_custom_series_name_formatting.story.tsx b/storybook/stories/stylings/14_custom_series_name_formatting.story.tsx index dde2cd53281..ad7e87efb3f 100644 --- a/storybook/stories/stylings/14_custom_series_name_formatting.story.tsx +++ b/storybook/stories/stylings/14_custom_series_name_formatting.story.tsx @@ -10,7 +10,7 @@ import { DateTime } from 'luxon'; import moment from 'moment'; import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings, SeriesNameFn } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, SeriesNameFn, LegendValue } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; @@ -54,7 +54,12 @@ export const Example = () => { return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/stylings/17_bar_series_color_variant.story.tsx b/storybook/stories/stylings/17_bar_series_color_variant.story.tsx index e6911de3ae9..b7e6e0422ed 100644 --- a/storybook/stories/stylings/17_bar_series_color_variant.story.tsx +++ b/storybook/stories/stylings/17_bar_series_color_variant.story.tsx @@ -9,7 +9,7 @@ import { select, color } from '@storybook/addon-knobs'; import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings, PartialTheme } from '@elastic/charts'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, PartialTheme, LegendValue } from '@elastic/charts'; import { ColorVariant } from '@elastic/charts/src/utils/common'; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset'; @@ -55,7 +55,7 @@ export const Example = () => { { { { return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/stylings/26_highlighter_style.story.tsx b/storybook/stories/stylings/26_highlighter_style.story.tsx index 0a5f766cfa5..38b31e74a13 100644 --- a/storybook/stories/stylings/26_highlighter_style.story.tsx +++ b/storybook/stories/stylings/26_highlighter_style.story.tsx @@ -18,6 +18,7 @@ import { Settings, timeFormatter, Tooltip, + LegendValue, } from '@elastic/charts'; import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; @@ -29,7 +30,7 @@ export const Example = () => ( { baseTheme={useBaseTheme()} debug={boolean('debug', true)} showLegend - showLegendExtra + legendValue={LegendValue.LastTimeBucket} legendPosition={Position.Right} /> { baseTheme={useBaseTheme()} debug={boolean('debug', false)} showLegend - showLegendExtra + legendValue={LegendValue.LastTimeBucket} legendPosition={Position.Right} /> diff --git a/storybook/stories/stylings/5_partial_custom_theme.story.tsx b/storybook/stories/stylings/5_partial_custom_theme.story.tsx index 1aec7002e5a..c95ae8e400e 100644 --- a/storybook/stories/stylings/5_partial_custom_theme.story.tsx +++ b/storybook/stories/stylings/5_partial_custom_theme.story.tsx @@ -9,7 +9,7 @@ import { color } from '@storybook/addon-knobs'; import React from 'react'; -import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings } from '@elastic/charts'; +import { Axis, BarSeries, Chart, PartialTheme, Position, ScaleType, Settings, LegendValue } from '@elastic/charts'; import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils'; import { useBaseTheme } from '../../use_base_theme'; @@ -34,7 +34,7 @@ export const Example = () => { { { ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/stylings/9_custom_series_colors_function.story.tsx b/storybook/stories/stylings/9_custom_series_colors_function.story.tsx index 17ce0177718..6382231df37 100644 --- a/storybook/stories/stylings/9_custom_series_colors_function.story.tsx +++ b/storybook/stories/stylings/9_custom_series_colors_function.story.tsx @@ -18,6 +18,7 @@ import { Position, ScaleType, Settings, + LegendValue, } from '@elastic/charts'; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset'; @@ -47,7 +48,12 @@ export const Example = () => { return ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/sunburst/14_full_zero.story.tsx b/storybook/stories/sunburst/14_full_zero.story.tsx index 5fa3a5188f8..d299fb03bb9 100644 --- a/storybook/stories/sunburst/14_full_zero.story.tsx +++ b/storybook/stories/sunburst/14_full_zero.story.tsx @@ -8,14 +8,22 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; +import { + Chart, + Datum, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, + LegendValue, +} from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils'; export const Example = () => ( - + { rotation={type === SeriesType.Bar ? 90 : 0} debugState showLegend={showLegend} - showLegendExtra + legendValue={LegendValue.LastTimeBucket} baseTheme={useBaseTheme()} legendColorPicker={getColorPicker('leftCenter')} /> diff --git a/storybook/stories/treemap/9_zero_values.story.tsx b/storybook/stories/treemap/9_zero_values.story.tsx index 61d9ef032ff..da91924ff4d 100644 --- a/storybook/stories/treemap/9_zero_values.story.tsx +++ b/storybook/stories/treemap/9_zero_values.story.tsx @@ -8,7 +8,15 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; +import { + Chart, + Datum, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, + LegendValue, +} from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -16,7 +24,7 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + (i ? d : { ...d, exportVal: 0 }))} diff --git a/storybook/stories/waffle/1_simple.story.tsx b/storybook/stories/waffle/1_simple.story.tsx index 13c6e5590fa..7d96a834a77 100644 --- a/storybook/stories/waffle/1_simple.story.tsx +++ b/storybook/stories/waffle/1_simple.story.tsx @@ -9,7 +9,15 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; +import { + Chart, + Datum, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, + LegendValue, +} from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils'; @@ -35,7 +43,7 @@ export const Example = () => { debug={showDebug} showLegend flatLegend - showLegendExtra + legendValue={LegendValue.LastTimeBucket} /> { baseTheme={useBaseTheme()} showLegend flatLegend - showLegendExtra + legendValue={LegendValue.LastTimeBucket} />