Chart crashes if there is a trendline or other "displayOnHover" component but highlight is not set on the legend

[marshallpete]

Provide a general summary of the issue here

If you create a chart and add a component that supports displayOnHover like Trendline or MetricRange and set displayOnHover to true, but highlight is not set or false on the Legend, then the chart crashes and burns.

🤔 Expected Behavior?

You shouldn't need to have highlight set to true on the legend for displayOnHover to work.

😯 Current Behavior

If highlight is false and on the legend, displayOnHover causes the chart to crash.

💁 Possible Solution

The issue is that getHoverRules() in lineUtils.ts is adding a legendRule.

const legendRule = { test: `highlightedSeries && highlightedSeries === datum.${SERIES_ID}`, ...opacityRule };

This rule references the highlighedSeries which is a signal that gets added by the legend highlight prop. If that prop is false, the signal doesn't get added.

This logic should be pulled out of lineUtils.ts and instead should live in legendHighlightUtils.ts. This hover rule on displayOnHover components should only be added when highlight is true on the Legend.

🔦 Context

No response

🖥️ Steps to Reproduce

In storybook dev, in Trendline.story.tsx, remove highlight from the Legend in the TrendlineStoryWithoutTooltip.

Then serve storybook and open the Trendline > Display On Hover story. No chart will appear and you will see an error in the console.

Version

0.0.1-alpha.7

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

Adobe/Analytics

🕷 Tracking Issue

No response