feat(partition): waffle chart #1255

monfera · 2021-07-14T21:15:57Z

Summary

Adds waffle chart to the set of partition charts. It shows a parts to whole relationship, like pie charts or treemaps, but sometimes a better option than these. It is distinct from the gridded charts in APM that show specific units and were titled waffle map.

Consider this chart type if

there's a single layer of breakdown (use eg. treemaps for hierarchical, multi-layer breakdown eg. continent/country/city)
its high degree of readability (1% squares, 10% rows/columns), or its aesthetics are desirable
there are no categories smaller than 1%, or they're grouped into "Other" (small categories may not show up)
the number of categories is relatively low (preferably up to around 5-6, plus maybe a grey "Other") for easy legend lookup based on color (this is good advice for pies as well)
you prefer to avoid circular charts eg. pie or donut

Pros:

A waffle chart is often easier to read than a pie/donut, because of the non-circular, grid arrangement
It may be more intuitive for some users than a treemap
The most common grid (10x10) leads to easy to comprehend, 1% sized tiles and 10% sized rows/columns
Easier for frequently changing data: its layout is more predictable, linear, while cells in a treemap may reshuffle arbitrarily upon data updates

Potential drawbacks:

No fill labels: it relies on color coding that the viewer has to correlate with a legend (meanwhile, pies and treemaps have adaptive fill labels, when there's enough room)
Discretized resolution: the discretization to 1% levels distorts data a bit, and small slices, below 1% each, are not guaranteed to show up (though, even for the other charts, it's generally recommended to group small values into "Other")

Details

Sometimes are referred to as square pies.

The waffle chart is a lower precision format, because the data is often continuous, while the waffle cells necessitate rounding, so each cell represents a specific ratio (percentage).

At the current alpha level, there's very limited configurability, and it ought to stay this way until more demanding requirements are registered. For example, it's currently always a 10x10 grid (each cell represents 1% and each row or column, 10%).

This PR alters the legend item order such that the waffle colors and legend items match in sequence. Both follow a decreasing value order.

The waffle is responsive, eg. the separating borders get smaller as the chart gets smaller, though not in linear proportion. The config.sectorLineWidth is settable for more or less separation, though other aspects eg. cell corner radius aren't currently configurable (and they may not to be)

Known requirements for non-alpha status:

hovering over cells highlights the specific cell; the desired behavior is, highlighting of the entire band of a given category, like with legend hover
solving this will also solve the accessibility issue that each cell gets repeated in the a11y table, and fix the non-flattened legend, and events may arise on a per cell basis rather than per band (the root cause of all these is the currently per-cell geometry that needs to shift to a per-band representation)

Issues

Checklist

The proper chart type label was added (e.g. :xy, :partition) if the PR involves a specific chart type
The proper feature label was added (e.g. :interactions, :axis) if the PR involves a specific chart feature
Any consumer-facing exports were added to packages/charts/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

nickofthyme

LGTM, made a few non-critical comments. I'll let @markov00 have a look before approving.

packages/charts/src/chart_types/partition_chart/layout/utils/legend.ts

nickofthyme · 2021-07-15T19:06:05Z

packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_wrapped_renderers.ts

+
+const MAX_PADDING_RATIO = 0.25;
+
+const latestRafs: Map<ChartId, number> = new Map();


Could this cause a memory leak as charts are created and destroyed?

Yep, I agree with Nick, and this needs to be destroyed or cleaned on unmount

It was a primitive map (one string and one number per chart), so this leak was unlikely to be ever detectable without millions of instantiation. Still this was useful feedback, as giving it another look, there's no need for the map to begin with.

39f477a simply persists the raf id in the new animationState property of the component object, so it goes away upon garbage collection. I think it's almost always better to link memory cleanup to scoped variables/properties, because there's no need for error prone explicit cleanup.

There'll be some DRY up work in some future commit/PR too for animation

f27c202 removes chartId from the component. Using such an id, external to the component was a bit of an antipattern anyway

fe06920 removes animation code from the wrapped renderer as it's not yet utilized

All good for me, we should remember this PR when bringing back animation

Thanks @markov00! Just to clarify, the animation that existed before (icicle/flame) remained in place (and changed so that there's no rAF Map anymore). The waffle renderer was patterned after the icicle/flame renderer but the animation wasn't (yet) adapted to waffles, so there's no loss with the removal of that bit

packages/charts/src/chart_types/partition_chart/state/selectors/compute_legend.ts

stories/waffle/1_simple.tsx

packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts

markov00 · 2021-07-20T07:44:52Z

packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_wrapped_renderers.ts

+
+const MAX_PADDING_RATIO = 0.25;
+
+const latestRafs: Map<ChartId, number> = new Map();


Yep, I agree with Nick, and this needs to be destroyed or cleaned on unmount

# Conflicts: # playground/playground.tsx

markov00

Code changes looks good to me!

nickofthyme

LGTM thanks for the changes and explanations!

# [33.1.0](v33.0.2...v33.1.0) (2021-07-28) ### Bug Fixes * persisted color via color picker ([#1265](#1265)) ([4205a7f](4205a7f)) ### Features * **legend:** add point shape styles to legend item ([#1227](#1227)) ([46be1d1](46be1d1)) * **partition:** waffle chart ([#1255](#1255)) ([156662a](156662a))

nickofthyme · 2021-07-28T16:49:23Z

🎉 This PR is included in version 33.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

monfera added 2 commits July 14, 2021 22:55

feat: waffle

0f5ce8e

chore: header update

b43deed

monfera added :new chart type New chart type related feature request :partition Partition/PieChart/Donut/Sunburst/Treemap chart related labels Jul 14, 2021

monfera requested review from rshen91, nickofthyme, markov00 and ghudgins July 14, 2021 21:16

monfera added 2 commits July 14, 2021 23:31

chore: waffle in the api doc

1e2109a

test: waffle

0b3a879

nickofthyme reviewed Jul 15, 2021

View reviewed changes

markov00 reviewed Jul 20, 2021

View reviewed changes

monfera added 6 commits July 28, 2021 10:57

Merge remote-tracking branch 'origin/master' into waffle

777a6d3

# Conflicts: # playground/playground.tsx

chore: discontinued the global singleton map

39f477a

chore: remove the now disused chartId

f27c202

chore: remove animation for the time being

fe06920

chore: debug purposed unspreading re-spread

5fe1e2c

fix: revert the legend item sorting changes on the mosaic plot

ee30f2c

monfera requested review from markov00 and nickofthyme July 28, 2021 11:18

markov00 approved these changes Jul 28, 2021

View reviewed changes

nickofthyme approved these changes Jul 28, 2021

View reviewed changes

monfera merged commit 156662a into elastic:master Jul 28, 2021

nickofthyme added the released Issue released publicly label Jul 28, 2021

ghudgins mentioned this pull request Jul 28, 2021

[Lens] Waffle visualization type elastic/kibana#107059

Closed

ghudgins mentioned this pull request Dec 15, 2021

[Waffle] Cannot enforce proper visual sorting to float values #1516

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(partition): waffle chart #1255

feat(partition): waffle chart #1255

monfera commented Jul 14, 2021 •

edited

nickofthyme left a comment

nickofthyme Jul 15, 2021

markov00 Jul 20, 2021

monfera Jul 28, 2021

monfera Jul 28, 2021

monfera Jul 28, 2021

markov00 Jul 28, 2021

monfera Jul 28, 2021

markov00 Jul 20, 2021

markov00 left a comment •

edited

nickofthyme left a comment

nickofthyme commented Jul 28, 2021


		const MAX_PADDING_RATIO = 0.25;

		const latestRafs: Map<ChartId, number> = new Map();

feat(partition): waffle chart #1255

feat(partition): waffle chart #1255

Conversation

monfera commented Jul 14, 2021 • edited

Summary

Details

Issues

Checklist

nickofthyme left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

markov00 left a comment • edited

Choose a reason for hiding this comment

nickofthyme left a comment

Choose a reason for hiding this comment

nickofthyme commented Jul 28, 2021

monfera commented Jul 14, 2021 •

edited

markov00 left a comment •

edited