Add overflow legend styles to LineChart #1619

susiekims · 2024-01-17T18:41:11Z

What does this implement/fix?

Hide overflowing legend items in a tooltip for horizontal legends.

In this PR:

Add enableHideOverflow prop to LegendContainer. Enable by default for LineChart, VerticalBarChart, and StackedAreaChart.
Create HiddenLegendTooltip component to display hidden legend items. I originally tried to refactor TooltipWrapper/TooltipAnimatedContainer for this purpose, but creating a separate tooltip seemed to be more appropriate since it's a very different use case. I think there is potential to revisit this in the future.

Not in this PR:

~~Hover events for legend items in HiddenLegendTooltip. This PR was already getting pretty big so before I make any considerable changes to useColorVisionEvents, I wanted to merge this first.~~ I added this in the second commit.
Support for vertical legends i.e. in DonutChart. Priority is charts used in MetricReport/MetricCard.

Does this close any currently open issues?

Resolve https://github.com/Shopify/core-issues/issues/64096

What do the changes look like?

Figma specs

The overflow rules are:

If all legends can be drawn in the provided space, DON’T truncate or overflow
If all legends CANNOT be drawn, truncate legend items down to 100px
If there’s still not enough room, begin collapsing legends into hidden overflow

In general, we should try to show as many items as possible.

Before	After

Storybook link

Long Legend story

Confirm that the overflowing legend items are hidden for Line, VerticalBar, and StackedArea charts
Confirm there are no regressions in the other charts
Confirm the tooltip shows the hidden legend items on hover and focus
Confirm hovering on a legend items highlights the selected series in the chart and vice versa.

Before merging

Check your changes on a variety of browsers and devices.
Update the Changelog's Unreleased section with your changes.
Update relevant documentation, tests, and Storybook.
Make sure you're exporting any new shared Components, Types and Utilities from the top level index file of the package

github-actions · 2024-01-17T19:01:36Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
polaris-viz-core-cjs	61.35 KB (0%)	1.3 s (0%)	1.2 s (+3.09% 🔺)	2.5 s
polaris-viz-cjs	214.72 KB (+0.56% 🔺)	4.3 s (+0.56% 🔺)	1.9 s (-6.56% 🔽)	6.2 s
polaris-viz-esm	175.09 KB (+0.55% 🔺)	3.6 s (+0.55% 🔺)	1.2 s (-28.22% 🔽)	4.7 s
polaris-viz-css	4.78 KB (+0.93% 🔺)	96 ms (+0.93% 🔺)	196 ms (-29% 🔽)	292 ms
polaris-viz-esnext	180.52 KB (+0.57% 🔺)	3.7 s (+0.57% 🔺)	1.4 s (-17.89% 🔽)	5 s

susiekims · 2024-01-29T14:22:11Z

packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts

@@ -70,5 +78,5 @@ export function useColorVisionEvents(enabled = true) {
        item.removeEventListener('blur', onMouseLeave);
      });
    };
-  }, [id, enabled, hiddenIndexes]);
+  }, [id, enabled, hiddenIndexes, dimensions]);


We need the event listeners to be re-added when the dimensions change so they can be applied to the updated displayed legend items.

susiekims · 2024-01-29T14:23:38Z

packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx

+  enableHideOverflow?: boolean;
+  /* Width is required if enableHideOverflow is true */
+  width?: number;
+  renderHiddenLegendLabel?: RenderHiddenLegendLabel;


I added this prop as a callback so we can pass in i18n-ized text from web.

packages/polaris-viz/src/components/Legend/Legend.tsx

michaelnesen

Amazing work! 🎉

Code and 🎩 looks great! Confirmed overflow legend behaviour for Line,VerticalBar, and StackedArea charts 👍

michaelnesen · 2024-01-30T14:51:06Z

packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx

@@ -46,20 +76,27 @@ export function LegendItem({
          index,
        });

+  const background = backgroundColor ?? selectedTheme.legend.backgroundColor;


Curious why background color is being passed in now?

For the hidden legend tooltip, I wanted to override the theme's legend background color with transparent so that it matches the standard tooltip styles 😅

packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx

michaelnesen · 2024-01-30T14:59:56Z

packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx

+  const defaultPosition = useMemo(
+    () => ({
+      top: 0,
+      left: 0,
+    }),
+    [],
+  );


I see the existing TooltipWrapper using a position interface that looks something like:

TooltipPosition { x: number; y: number; ...

Curious, any reason you went with top and left here?

I think TooltipAnimatedContainer uses the css transform property since its more performant to animate translations than positions. Since my tooltip is not animated, I just used css position properties instead.

michaelnesen · 2024-01-30T15:04:32Z

packages/polaris-viz/src/components/LineChart/Chart.tsx

+          renderHiddenLegendLabel={renderHiddenLegendLabel}
+          width={width}
+          dimensions={dimensions}
+          enableHideOverflow


We talked about enabling this as the default, however do we still want to allow the option for a consumer to override the default? i.e make enableHideOverflow a prop on the charts?

Good question, I'll check with UX!

… StackedAreaChart

susiekims force-pushed the legend-overflow branch 2 times, most recently from fbc026f to 3ac9fec Compare January 17, 2024 18:59

susiekims force-pushed the legend-overflow branch 6 times, most recently from 7803fb5 to 7c677c0 Compare January 24, 2024 19:11

susiekims force-pushed the legend-overflow branch 4 times, most recently from 1a5b3de to 097dee9 Compare January 26, 2024 21:08

susiekims marked this pull request as ready for review January 29, 2024 14:17

susiekims commented Jan 29, 2024

View reviewed changes

susiekims force-pushed the legend-overflow branch from 85025a7 to 2cf66e8 Compare January 29, 2024 14:33

susiekims requested review from envex, michaelnesen and Tom-F-an January 29, 2024 14:33

susiekims force-pushed the legend-overflow branch 3 times, most recently from 93af03e to 3e62f75 Compare January 29, 2024 19:37

envex approved these changes Jan 29, 2024

View reviewed changes

michaelnesen approved these changes Jan 30, 2024

View reviewed changes

shopify-shipit bot temporarily deployed to beta-test January 30, 2024 15:21 Inactive

Add hidden legend overflow styles to LineChart, VerticalBarChart, and…

fba7688

… StackedAreaChart

susiekims force-pushed the legend-overflow branch from 55f0bdf to fba7688 Compare January 30, 2024 16:14

susiekims merged commit 1733682 into main Jan 30, 2024
6 checks passed

shopify-shipit bot temporarily deployed to production January 31, 2024 18:09 Inactive

shopify-shipit bot temporarily deployed to beta-test January 31, 2024 21:18 Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add overflow legend styles to LineChart #1619

Add overflow legend styles to LineChart #1619

susiekims commented Jan 17, 2024 •

edited

Loading

github-actions bot commented Jan 17, 2024 •

edited

Loading

susiekims Jan 29, 2024

susiekims Jan 29, 2024

michaelnesen left a comment

michaelnesen Jan 30, 2024

susiekims Jan 30, 2024

michaelnesen Jan 30, 2024

susiekims Jan 30, 2024

michaelnesen Jan 30, 2024

susiekims Jan 30, 2024

Add overflow legend styles to LineChart #1619

Add overflow legend styles to LineChart #1619

Conversation

susiekims commented Jan 17, 2024 • edited Loading

What does this implement/fix?

Does this close any currently open issues?

What do the changes look like?

Storybook link

Before merging

github-actions bot commented Jan 17, 2024 • edited Loading

size-limit report 📦

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaelnesen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

susiekims commented Jan 17, 2024 •

edited

Loading

github-actions bot commented Jan 17, 2024 •

edited

Loading