feat: wiggle and silhouette stacks

[markov00]

Summary

This PR adds the wiggle and silhouette stacks mode as available in vislib.
t is also to fix fit functions for stacked charts #450

Configuring a stackMode in a stacked area or bar chart will change the baseline offset used to render each group of stacks. StackMode are:

export const StackMode = Object.freeze({
  /** Applies a zero baseline and normalizes the values for each point such that the topline is always one. */
  Percentage: 'percentage' as const,
  /** Shifts the baseline so as to minimize the weighted wiggle of layers. */
  Wiggle: 'wiggle' as const,
  /** Shifts the baseline down such that the center of the streamgraph is always at zero. */
  Silhouette: 'silhouette' as const,
});

Applied to a stacked area chart it can be used to stream graphs

close #715

Additional changes

• Fit functions are now working also on stacked charts
  close Fit functions for stacked line and area charts #450
• The legend extra value is now displayed, on-demand, only on charts with a continuous x-axis
  fix Don't display legend extra values when the x scale is ordinal #766
• The PR adjust slightly the way fitted data is represented in the case of null values and no fit option specified. It renders an empty area segment as in the following screenshot

• The PR also adjust how we fit the chart to the data domain: for zero-based charts (bar and area charts) the fit option doesn't have effects, thus the changes on the screenshots.

• The PR finally adjust the clipped ranges for ordinal charts, where the lines where wrongly clipped due to a missing translate call when rendering.

• Some tests are converted to functional tests, instead of unit tests.

BREAKING CHANGE:

• PointStyleAccessor and BarStyleAccessor now calls the method with a DataSeriesDatum as first argument instead of a RawDataSeriesDatum
• stackAsPercentage prop on BarsSpec and AreaSpec is replaced by stackMode that accept one StackMode.

Checklist

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios

[codecov-commenter]

Codecov Report

Merging #751 into master will increase coverage by 0.21%.
The diff coverage is 85.36%.

@@            Coverage Diff             @@
##           master     #751      +/-   ##
==========================================
+ Coverage   74.33%   74.54%   +0.21%     
==========================================
  Files         269      285      +16     
  Lines        9303     9578     +275     
  Branches     1936     1945       +9     
==========================================
+ Hits         6915     7140     +225     
- Misses       2383     2427      +44     
- Partials        5       11       +6     

Flag	Coverage Δ
#unittests	74.01% <84.71%> (-0.32%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/chart_types/xy_chart/renderer/canvas/areas.ts	40.00% <0.00%> (ø)
..._types/xy_chart/renderer/canvas/primitives/path.ts	9.43% <0.00%> (-1.21%)	⬇️
src/chart_types/xy_chart/specs/bar_series.tsx	100.00% <ø> (ø)
src/components/tooltip/tooltip.tsx	70.00% <ø> (-0.33%)	⬇️
src/mocks/series/data.ts	100.00% <ø> (ø)
src/mocks/specs/specs.ts	77.01% <ø> (ø)
src/renderers/canvas/index.ts	44.00% <0.00%> (ø)
src/utils/geometry.ts	100.00% <ø> (ø)
...chart_types/xy_chart/utils/stacked_series_utils.ts	86.11% <85.29%> (-11.87%)	⬇️
src/chart_types/xy_chart/state/utils/utils.ts	92.57% <90.69%> (-1.20%)	⬇️
... and 30 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4455281...63b29a6. Read the comment docs.

[nickofthyme]

Code changes look good to me, still reviewing behavior and visual screenshot changes. This was lot fewer actual src code changes than I was expecting seeing the +6,975 −3,995.

After looking at the streamgraph example. I think we should change the tooltip highlighting behavior in a future PR. Maybe this is normal but to me having the geometry point at the top as the area is strange. I feel these chart types are more about the difference in relative height to where the top points are irrelevant. Maybe we just hide points altogether for streamgraphs charts and never highlight the tooltip values.

[nickofthyme]

I notice you changed the extra value appearance on many screenshots. I think we should try to keep sweeping visual changes like this to small PRs. That said, I verified all of the screenshots look ok with the changes, so I'm fine with those changes for this PR.

Some screenshots I couldn't see the difference. For instance the none type fitting function screenshots like integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png as well as integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png. Are these just minor canvas rendering changes?

[markov00]

@nickofthyme

Some screenshots I couldn't see the difference. For instance the none type fitting function screenshots like integration/tests/image_snapshots/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png as well as integration/tests/image_snapshots/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png. Are these just minor canvas rendering changes?

Exactly, this probably is caused or by the changes to fix the dashed line misaligned, or due to smaller changes on the clipping ranges

I notice you changed the extra value appearance on many screenshots. I think we should try to keep sweeping visual changes like this to small PRs. That said, I verified all of the screenshots look ok with the changes, so I'm fine with those changes for this PR.

My bad I'm sorry for that, whenever something wrong caches my eyes I preferred to fix that as soon as possible to avoid forget it later... I will do better on my next PR

[nickofthyme]

My bad I'm sorry for that, whenever something wrong caches my eyes I preferred to fix that as soon as possible to avoid forget it later... I will do better on my next PR

No worries I feel the same way.

[nickofthyme]

LGTM, Tested locally, with firefox and chrome. Tested fit function and banded stories.

Verified #766 and #450 are fixed

[markov00]

🎉 This PR is included in version 21.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀