feat: mosaic plot

[monfera]

Summary

To support data visualization best practices, we've anticipated alternatives to pie/donut/sunburst and have been implementing them as opportunity arises: treemap, icicle, flame.

Merging #1112 ensured that things are in place for mosaic plot, a.k.a. Marimekko or Mekko chart, which is often better than the analogous two-layer pie (sunburst) and sometimes better than the two-layer treemap.

Mosaic plots are often preferred over full, two-layer sunburst such as this. If the secondary partitioning is shared, eg. here, browsers, then sideways comparison is way more feasible than in the case of sunburst or treemap. In this case, the browser order should be shared too.

Mosaic plot is Lens friendly: it works with full-depth partitioning (Lens can't do heterogeneous depth such as general sunburst or icicle/flame). Mosaic plots are often a visual alternative to crosstabs.

Mosaic plot is activated by specifying partitionLayout: PartitionLayout.mosaic in the partition chart config, as usual.

Mosaic plots are great for 3+1 use case, as often, data is multidimensional and two dimensions can be simultaneously interesting.

"Other" slices can be also used, and placed on the top or bottom, irrespective of size, if we want to avoid too small areas:

Mosaic plots are a tool of choice in machine learning, statistics and analytics, as they're great for visualizing contingency tables aka. cross tabulation and they're sometimes good for showing a relationship between two variables:

(Article by Dr. Robert Grünwald)

Mosaic plots are like

• treemaps and icicle/flame, as they partiton the space with rectangles, which are easier to gauge than disk slices and sectors
• icicle/flame, as they follow a specific 1D orientation per layer, rather than 2D tiling aiming at squarish shapes like treemap
• sunburst, as they work best with two discrete dimensions

There's room for future PRs, eg.

• per layer specification of orientation (horizontal, vertical, squarifying) to meaningfully support arbitrary layer numbers (eg. 3)
• more configurability for in-shape text layouting, eg. cropping with ellipsis or vertical and horizontal text alignment (benefitting treemap too)
• code regularization for layout types, as the increasing number of options has made viewModel.ts etc. slightly more verbose and branching (ternaries) than ideal

Alternating among partition layouts, from the follow-up #1120:

Checklist

Delete any items that are not applicable to this PR.

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• This was checked for cross-browser compatibility
• Proper documentation or storybook story was added for features that require explanation or tutorials

[monfera]

jenkins test this please

[codecov-io]

Codecov Report

Merging #1113 (de3ce5a) into master (74df29b) will increase coverage by 0.40%.
The diff coverage is 72.72%.

@@            Coverage Diff             @@
##           master    #1113      +/-   ##
==========================================
+ Coverage   72.05%   72.46%   +0.40%     
==========================================
  Files         381      397      +16     
  Lines       11929    12257     +328     
  Branches     2603     2660      +57     
==========================================
+ Hits         8596     8882     +286     
- Misses       3308     3342      +34     
- Partials       25       33       +8     

Flag	Coverage Δ
unittests	72.04% <72.72%> (-0.02%)	⬇️

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

Impacted Files	Coverage Δ
...types/partition_chart/layout/types/config_types.ts	100.00% <ø> (ø)
...types/partition_chart/renderer/dom/highlighter.tsx	15.55% <50.00%> (ø)
...tion_chart/layout/viewmodel/hierarchy_of_arrays.ts	89.13% <54.54%> (-10.87%)	⬇️
...ypes/partition_chart/layout/viewmodel/viewmodel.ts	85.48% <100.00%> (+0.40%)	⬆️
src/mocks/annotations/annotations.ts	66.66% <0.00%> (ø)
src/mocks/series/utils.ts	100.00% <0.00%> (ø)
src/mocks/series/index.ts	100.00% <0.00%> (ø)
src/mocks/geometries.ts	92.85% <0.00%> (ø)
src/mocks/specs/index.ts	100.00% <0.00%> (ø)
src/mocks/series/series.ts	91.22% <0.00%> (ø)
... and 10 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 74df29b...de3ce5a. Read the comment docs.

[markov00]

Absolutely great!
Is amazing to see the flexibility of this chart implementation.
Tested locally and works great

[nickofthyme]

🎉 This PR is included in version 28.1.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀