feat: percentage display in partitioning charts

[monfera]

Summary

Adds the option of using the ratio rather than the value in data that's the basis for aggregation.

The ratio is computed as the value of the sector or treemap square divided by the total sum of the value.

Client code may use the ratio to display the ratio, or a percentage, instead of the sector / rectangle value.

One item in #518

Checklist

Use strikethroughs to remove checklist items you don't feel are 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, including a check against IE11
• 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
• Each commit follows the convention

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@103df02). Click here to learn what that means.
The diff coverage is 43.58%.

@@            Coverage Diff            @@
##             master     #558   +/-   ##
=========================================
  Coverage          ?   70.23%           
=========================================
  Files             ?      208           
  Lines             ?     6238           
  Branches          ?     1208           
=========================================
  Hits              ?     4381           
  Misses            ?     1839           
  Partials          ?       18

Impacted Files	Coverage Δ
...rtition_chart/layout/viewmodel/link_text_layout.ts	8.1% <ø> (ø)
...rtition_chart/layout/viewmodel/fill_text_layout.ts	7.69% <0%> (ø)
...es/partition_chart/layout/types/viewmodel_types.ts	80% <100%> (ø)
...t_types/partition_chart/state/selectors/tooltip.ts	31.81% <20%> (ø)
...es/partition_chart/layout/utils/group_by_rollup.ts	26.82% <40%> (ø)
...ypes/partition_chart/layout/viewmodel/viewmodel.ts	14.04% <50%> (ø)
...hart_types/partition_chart/layout/config/config.ts	66.66% <50%> (ø)
...ypes/partition_chart/state/selectors/scenegraph.ts	34.78% <60%> (ø)
src/chart_types/partition_chart/specs/index.ts	58.33% <66.66%> (ø)

---

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 103df02...d2e1b57. Read the comment docs.

[markov00]

I've scanned the code and LGTM. I just want to make a small comment on the API:
your implementation impose to import a function, the percentageValueGetter and add them to the valueGetter props of the <Partition/> component. I think it's fine, but what if we provide a simpler version also? like allow the user to specify a string/constant or a function like

type ValueGetter = 'value' | 'percentage' | (node: ShapeTreeNode) => number;

This will simplify the API a bit and will make it a bit more readable in few cases

[monfera]

[markov00]

Everything looks good. Tested locally.
This actually reproduce the same behaviour in Kibana:

• you can display percentage only or the number only on the slice label
• you will see the formatted value plus the percentage in the tooltip

As a next step, we should make it configurable also on the slice

[markov00]

Hey @monfera I've pushed a change to add the percentFormatter as part of the spec. This because Kibana has the freedom to change the percentage format depending on the Advanced settings. you can see the changes here: ae26259

I've also removed a small portion of code (the one related to the indices) on the tooltip selector, not sure what was the original requirements for these indices values, see: 1843a16

[monfera]

Thanks @marco the new commits look great. We can reconsider the datumIndices whenever the need comes back

[markov00]

@monfera sure, let me copy the code here also:

    const datumIndices = new Set();
    pickedShapes.forEach((shape) => {
      const node = shape.parent;
      const shapeNode = node.children.find(([key]) => key === shape.dataName);
      if (shapeNode) {
        const indices = shapeNode[1][INPUT_KEY] || [];
        indices.forEach((i) => datumIndices.add(i));
      }
    });

[markov00]

🎉 This PR is included in version 18.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀