New Combo component for combo charts

[marshallpete]

Provide a general summary of the feature here

Combo charts are useful for displaying multiple types of data in the same visualization that you want to compare against each other.

Combo charts often have some unique edge cases like dual metric axes. They also need to share the same dimension axis. Combo charts also have unique highlight/hover behavior to consider.

A new component should be created that will wrap the combo chart types the user wants and handle these edge cases without any special configuration from the user.

To begin with, only a single bar and line combo will be supported.

🤔 Expected Behavior?

Dual axes should be possible Should be possible to hover each bar and point on the line Dimension axes should line up correctly across line and bar

💁 Possible Solution

API

<Chart>
  <Axis position="right" name="people" />
  <Axis position="left" name="adoption" />
  <Axis position="bottom" />
  <Combo dimension="datetime">
    <Bar metric="people" metricAxis="people" />
    <Line metric="adoptionRate" metricAxis="adoption" />
    <ChartTooltip highlightBy="item"></ChartTooltip>
  </Combo>
</Chart>

Need to add name to the Axis component and be able to use that to correlate which mark uses which axis. name can default to the value of position.

Bar needs metricAxis added to it which will allow the bar metric to be connected to the correct axis. If undefined, the typical metric scale should be used.

New Combo component. Should have a dimension prop which sets the dimension of the Bar and Line. If a dimension is set on either Bar or Line, this will override those values. Should default to something like datetime.

ChartTooltip needs a new highlightBy prop which will allow the user to configure the hover targets. Value of this prop can be 'item' | 'dimension' | 'series'. We also want to be able to set some kind of group to highlight by but that can be handled in a separate ticket.

If ChartTooltip is nested under a Combo (child or grandchild) then for a line, this should use a hover area near the points on the line instead of voronoi. If voronoi is used then none of the bars are accessible.

🔦 Context

Combo charts are useful for displaying multiple types of data in the same visualization that you want to compare against each other.

💻 Examples

No response

🧢 Your Company/Team

Adobe

[pratyushbanerjee]

Since we want the axes to behave differently for Combo, should the Axis components be children of Combo?

[c-lamoureux]

We should be able to make it work while keeping Axis next to Combo. I would recommend doing this by adding whatever new features are needed to the existing Axis and then if we need to change the behavior based on whether there's a Combo, we can add a prop or some other control that will make the Axis behavior change.

Please feel free to reach out if you're unsure on how to proceed with it. We'll be happy to help out.

[pratyushbanerjee]

Thanks @c-lamoureux, that makes sense. I'm going through the code and contribution docs right now. I'll reach out when required.

Btw ChartToolTip already has a highlightBy prop that works as described https://opensource.adobe.com/react-spectrum-charts/?path=/docs/rsc-charttooltip-highlightby--docs

[marshallpete]

@pratyushbanerjee great call out about the highlightBy functionality. I forgot that I already added that 😂