combo stacked chart

[alxnddr]

Closes #41976
Closes #12008

Description

• In Combo charts, on the Display tab, add a new radio setting:
  • Bar and area stacking
    • Don't stack
    • Stack
    • Stack - 100%
• If Stack or Stack - 100% is selected then:
  • All series with a Display type set to bar should be stacked together.
  • All series with a Display type set to area should be stacked together.
  • But series with a Display type set to line should be unaffected.
• If Stack - 100% is chosen, if there are any series set to line, there should be two y-axes:
  • one from 0% to 100% that the stacked bars/areas should be associated with,
  • and the other that should depict the scale and measure of the line series.

How to verify

• Create a multiple series combo chart with at least 5 series
• Make two of them bars, make the other two areas, keep 1 line series
• Enable stacking
• Ensure areas stacked with each other, bars stacked with each other
• Hover areas: ensure the tooltip shows area series only
• Hover bars: ensure the tooltip shows bar series only
• Hover line: ensure it shows a default key-value tooltip with all values
• Switch to Stack — 100%
• Ensure left y-axis is normalized and used for stacked areas and bars
• Ensure right y-axis is used for the line series

Demo

Checklist

• Tests have been added/updated to cover changes in this PR

[replay-io]

Status	Complete ↗︎
Commit	2d55b52
Results	⚠️ 2 Flaky ✅ 2508 Passed

[cdeweyx]

🎉

[mazameli]

Nice!

[JesseSDevaney]

99% LGTM, but there are still a few bugs that make this kind of hard to use. Perhaps these issues are already being tracked separately.

2024-05-07.17-15-23.mp4

When bars are stuck under an area, you cannot hover over the bars and see their tool-tip values. Also, when areas are not stacked, hovering over the smaller one will highlight the larger one (when it should be highlighting the smaller one).

[alxnddr]

@JesseSDevaney thanks for the review!
The issues you mentioned are not related to this change, it worked like this in dc.js implementation:

I created an issue to track it #42366

[JesseSDevaney]

Hi Sasha! I found a couple more bugs upon further investigation.

1. The ability to select the y-axis position for stacked charts is broken (comment)
2. With the new ability of combo charts, we probably still want to show the Show values on data points setting if we have a line series in a stacked 100% chart (comment)

Once we get these bugs fixed up and fix the type errors + unit test failures (probably coming from updates to the number of arguments in a function and how we handle the data models), we should be good to merge.

[JesseSDevaney]

@alxnddr In my PR to move data label formatters from model to option, I noticed that in this new combo chart paradigm, we can have non-stacked lines with stacked bars/areas. We may still want to optionally enable/disable showing values for the non-stacked lines, but this setting gets hidden because of old checks. Would you be able to account for this in this PR?

See #42616 (comment) for more context

[JesseSDevaney]

Suggested change

	expect(isHidden).toBe(true);
	expect(isHidden).toBe(false);

Should be visible implies isHidden = false?

[alxnddr]

@JesseSDevaney good catch, thanks, I fixed it