LG-4764: De-emphasize other series lines when one is hovered

[tsck]

✍️ Proposed changes

• Adds config that causes other series lines to become opaque when a given series line is hovered over.
  • This differs from designs slightly. These were discussed and agreed upon with design.
    • The given line doesn't widen on hover. In order to always show the tooltip, we have the tooltip.trigger set to axis. Due to this, the emphasis event on a series occurs when a user hovers anywhere on the chart. So setting the line to a larger width on emphasis makes it so that all lines become wider when the cursor enters the chart.
    • When a point marker is hovered, it doesn't emphasize the line below it. Currently marker points are not associated with a series. I added the option to associate them with a series, but this didn't make it so that the associated series was deemed emphasized on hover of the mark point either. This just appears to be an echarts limitation. Ultimately the plan is to highlight the point and associated line in the custom tooltip when that is built out. I've reverted the ability to associate a point with a line for now until that functionality is necessary.
• Drive-bys:
  • Improves the types of EventMarkerPoint and EventMarkerLine by distinguishing the position prop depending on which component it is.
  • Removes actions from storybook. This was a nice to have, but is causing errors since pnpm, I believe it might be a version mismatch with storybook. It didn't add a ton of value so I just removed it.

🎟 Jira ticket: LG-4764

✅ Checklist

For bug fixes, new features & breaking changes

• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)
• I have run pnpm changeset and documented my changes

For new components

• I have added my new package to the global tsconfig
• I have added my new package to the Table of Contents on the global README
• I have verified the Live Example looks as intended on the design website.

🧪 How to test changes

• Test in Storybook

Screenshot

[changeset-bot]

🦋 Changeset detected

Latest commit: ea5096c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@lg-charts/core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[shaneeza]

Is it possible to add a transition as well? If you move horizontally across the chart, it flickers a lot because of the opacity change.

[tsck]

I'm not sure there's a way to transition, but I actually don't know if a transition would actually help the blinking so much. I do think this is a good callout though and would be curious to get @sooachung's thoughts on this.

@sooachung Shaneeza raises a good point about how having this emphasis on the hovered line causes a great deal of blinking when the user hovers over the chart. Wanted to check in with you about this. (Example below)

Screen.Recording.2025-01-22.at.2.46.26.PM.mov

[tsck]

Sooa is checking with Visudha on this

[shaneeza]

Why does EventMarkerLineProps include type if it needs to be omitted? Is it only needed for BaseEventMarker?

[tsck]

This might be wonky but it exists so that it can be reused by BaseEventMarker, allowing BaseEventMarker to accept EventMarkerLineProps | EventMarkerPointProps, which allows a check such as if (type === 'point') position[1] in BaseEventMarker since TS will know if position is an array or not based on the type.

Essentially what it amounts to is:

export interface BaseEventMarkerProps {
  label?: string;
  message: string;
  level: EventLevel;
  position: [string | number, string | number] | string | number;
  type: 'line' | 'point';
}

export interface BaseEventMarkerLineProps
  extends Omit<BaseEventMarkerProps, 'name' | 'theme'> {
  type: 'line';
  position: string | number;
}

export interface BaseEventMarkerPointProps
  extends Omit<BaseEventMarkerProps, 'name' | 'theme'> {
  type: 'point';
  position: [string | number, string | number];
}

export interface EventMarkerLineProps extends Omit<BaseEventMarkerLineProps, 'type'> {}

export interface EventMarkerPointProps extends Omit<BaseEventMarkerPointProps, 'type'> {}

But isntead I'm inlining the bottom two interfaces.

I'm definitely open to suggestions to making this cleaner!

[tsck]

Actually, I think being more explicit like the example I gave makes more sense since we do ultimately export EventMarkerLineProps and EventMarkerPointProps. So without this, it's actually currently exporting the incorrect type. Will push a fix for this

[shaneeza]

Can you also add the type changes?

[tsck]

I didn't add that because it doesn't actually change what's exposed, it just cleans up the type internally for the base component so that position can be determined by type. But the exposed types should be the same. Is this something that we'd normally note here?

[shaneeza]

It might be worth noting things that have changed internally. In case something breaks, it would be easier to track it. However, I don't feel strongly about this, so if you don't see the need to add it, that's fine with me.

[shaneeza]

It doesn't look like name and theme are included in BaseEventMarkerProps