feat(partition): add element click, over, out events by markov00 · Pull Request #578 · elastic/elastic-charts

markov00 · 2020-03-04T09:36:07Z

Summary

This commit adds the element click event to the Partition chart, returning a groupByRollup value for each configured chart layer and the associated value.

The ElementClickListener is now defined with two possible types, one for each chart type:

type XYChartElementEvent = [GeometryValue, XYChartSeriesIdentifier];
type PartitionElementEvent = [Array<LayerValue>, SeriesIdentifier];
type ElementClickListener = (elements: Array<XYChartElementEvent | PartitionElementEvent>) => void;

nothing change for the XYChart, but I've added a new type specific for the Partition chart.
This type is composed by the SeriesIdentifiers of the Pie/Sunburst and a set of LayerValues on per each defined layer in the layers props of a Partition component.

A layer value is an object defined as the following:

interface LayerValue {
  groupByRollup: PrimitiveValue;
  value: number;
}

The groupByRollup property returns group by value relative to the slice of the specific layer.
The value instead returns the numeric value used to represent percentage as a whole of that specific slice.

In this example, clicking on the first slice on the top/right (source: CN 33 from the parent layer dest: US 77) the object passed to the listener is:

[
  [
    [
      { groupByRollup: 'US', value: '77'}, // the first layer (the parent layer)
      { groupByRollup: 'CN', value: '33'}, // the outermost layer
    ],
    {
       specId: 'thePieSpecId',
       key:'thePieSpecIdKey'
    }
  ],
// ... there could be multiple slices clicked at the same time, specially on very small slices, so we have left the possibility to return more than one 'PartitionElementEvent'
]

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

This commit adds the element click event to the Partition chart, returning a groupByRollup value for each configured chart layer and the associated value

codecov-io · 2020-03-04T14:17:44Z

Codecov Report

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

@@            Coverage Diff            @@
##             master     #578   +/-   ##
=========================================
  Coverage          ?   70.59%           
=========================================
  Files             ?      220           
  Lines             ?     6376           
  Branches          ?     1226           
=========================================
  Hits              ?     4501           
  Misses            ?     1856           
  Partials          ?       19

Impacted Files	Coverage Δ
src/specs/settings.tsx	`90.62% <ø> (ø)`
...types/partition_chart/layout/types/config_types.ts	`100% <ø> (ø)`
src/state/chart_state.ts	`85.45% <ø> (ø)`
src/state/selectors/get_last_click.ts	`100% <100%> (ø)`
src/chart_types/xy_chart/state/chart_state.tsx	`100% <100%> (ø)`
src/components/chart.tsx	`73.23% <100%> (ø)`
...t_types/partition_chart/state/selectors/tooltip.ts	`26.08% <100%> (ø)`
src/state/utils.ts	`61.53% <16.66%> (ø)`
...on_chart/state/selectors/on_element_over_caller.ts	`18.42% <18.42%> (ø)`
...s/partition_chart/state/selectors/picked_shapes.ts	`19.23% <19.23%> (ø)`
... and 5 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 3994439...6a5d8ca. Read the comment docs.

rshen91

LGTM! I like the naming changes (getPickdedShapes and pickedShapes) and the new story is great. I especially like the use of storybook actions 👍

rshen91

These new cleanup changes LGTM

nickofthyme

LGTM, Tested locally. The API changes look great, just one idea on the API.

nickofthyme · 2020-03-09T19:34:47Z

src/specs/settings.tsx

+}
+
+export type XYChartElementEvent = [GeometryValue, XYChartSeriesIdentifier];
+export type PartitionElementEvent = [Array<LayerValue>, SeriesIdentifier];


Is the order of the LayerValue[] always hierarchical? If not it should be and would be good to note that.

A similar thought is what if this was recursive instead of an object? Something like...

export interface LayerValue { groupByRollup: PrimitiveValue; value: number; child?: LayerValue; }

Just a thought, not saying to change it. 🤔

It's hierarchical but I'd configured them in the same way you are configuring the hierarchy in the <Partition /> layers prop

nickofthyme · 2020-03-09T19:46:43Z

src/chart_types/partition_chart/state/selectors/on_element_over_caller.ts

+    if (selector === null && state.chartType === ChartTypes.Partition) {
+      selector = createCachedSelector(
+        [getPieSpecOrNull, getPickedShapesLayerValues, getSettingsSpecSelector],
+        (pieSpec, nextPickedShapes, settings): void => {
+          if (!pieSpec) {
+            return;
+          }
+          if (!settings.onElementOver) {
+            return;
+          }
+
+          if (isOverElement(prevPickedShapes, nextPickedShapes)) {
+            const elements = nextPickedShapes.map<[Array<LayerValue>, SeriesIdentifier]>((values) => [
+              values,
+              {
+                specId: pieSpec.id,
+                key: `spec{${pieSpec.id}}`,
+              },
+            ]);
+            settings.onElementOver(elements);
+          }
+          prevPickedShapes = nextPickedShapes;
+        },
+      )({
+        keySelector: getChartIdSelector,
+      });
+    }
+    if (selector) {
+      selector(state);
+    }
+  };


Looks like there is some common logic between these event listers might be good to provide a factory function at some point. Looks fine for now.

You are perfectly fine, I will I've already cleaned up a bit this code, I will clean up more in a future PR

nickofthyme · 2020-03-09T19:47:44Z

src/chart_types/partition_chart/layout/types/config_types.ts

 export const PartitionLayout = Object.freeze({
-  sunburst: 'sunburst',
-  treemap: 'treemap',
+  sunburst: 'sunburst' as 'sunburst',


# [18.0.0](v17.1.1...v18.0.0) (2020-03-17) ### Code Refactoring * clean up TS types ([#554](#554)) ([22f7635](22f7635)), closes [#547](#547) [#547](#547) * decouple tooltip from XY chart ([#553](#553)) ([e70792e](e70792e)), closes [#246](#246) ### Features * cleaner color API on SeriesSpec ([#571](#571)) ([f769f7c](f769f7c)) * **legend:** allow color picker component render prop ([#545](#545)) ([90f4b95](90f4b95)) * **partition:** add element click, over and out events ([#578](#578)) ([103df02](103df02)) * **partition:** add tooltip ([#544](#544)) ([6bf9a69](6bf9a69)), closes [#246](#246) * percentage display in partitioning charts ([#558](#558)) ([d6aa8d7](d6aa8d7)) * specify series name with a function on SeriesSpec ([#539](#539)) ([358455a](358455a)) * xAccessor can be a function accessor ([#574](#574)) ([bcc3d63](bcc3d63)) ### BREAKING CHANGES * The `getSpecId`, `getGroupId`, `getAxisId` and `getAnnotationId` are no longer available. Use a simple `string` instead. * `customSeriesColors` prop on `SeriesSpec` is now `color`. The `CustomSeriesColors` type is replaced with `SeriesColorAccessor`. * Remove `customSubSeriesName` prop on series specs in favor of cleaner api using just the `name` prop on `SeriesSpec`. The types `SeriesStringPredicate`, `SubSeriesStringPredicate` have been removed. * the `SeriesIdentifier` type is generalized into a simplified object with two values in common: `specId` and `key`. A specialized `XYChartSeriesIdentifier` extends now the base `SeriesIdentifier`. The `SettingsSpec` prop `showLegendDisplayValue` is renamed to `showLegendExtra` and its default value is now `false` hiding the current/last value on the legend by default.

markov00 · 2020-03-17T10:36:56Z

🎉 This PR is included in version 18.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [18.0.0](elastic/elastic-charts@v17.1.1...v18.0.0) (2020-03-17) ### Code Refactoring * clean up TS types ([opensearch-project#554](elastic/elastic-charts#554)) ([6ce56fa](elastic/elastic-charts@6ce56fa)), closes [opensearch-project#547](elastic/elastic-charts#547) [opensearch-project#547](elastic/elastic-charts#547) * decouple tooltip from XY chart ([opensearch-project#553](elastic/elastic-charts#553)) ([cb02cd0](elastic/elastic-charts@cb02cd0)), closes [opensearch-project#246](elastic/elastic-charts#246) ### Features * cleaner color API on SeriesSpec ([opensearch-project#571](elastic/elastic-charts#571)) ([6a78c4e](elastic/elastic-charts@6a78c4e)) * **legend:** allow color picker component render prop ([opensearch-project#545](elastic/elastic-charts#545)) ([22ef1e6](elastic/elastic-charts@22ef1e6)) * **partition:** add element click, over and out events ([opensearch-project#578](elastic/elastic-charts#578)) ([4189573](elastic/elastic-charts@4189573)) * **partition:** add tooltip ([opensearch-project#544](elastic/elastic-charts#544)) ([0cffed4](elastic/elastic-charts@0cffed4)), closes [opensearch-project#246](elastic/elastic-charts#246) * percentage display in partitioning charts ([opensearch-project#558](elastic/elastic-charts#558)) ([993a448](elastic/elastic-charts@993a448)) * specify series name with a function on SeriesSpec ([opensearch-project#539](elastic/elastic-charts#539)) ([fc6430b](elastic/elastic-charts@fc6430b)) * xAccessor can be a function accessor ([opensearch-project#574](elastic/elastic-charts#574)) ([f702e2c](elastic/elastic-charts@f702e2c)) ### BREAKING CHANGES * The `getSpecId`, `getGroupId`, `getAxisId` and `getAnnotationId` are no longer available. Use a simple `string` instead. * `customSeriesColors` prop on `SeriesSpec` is now `color`. The `CustomSeriesColors` type is replaced with `SeriesColorAccessor`. * Remove `customSubSeriesName` prop on series specs in favor of cleaner api using just the `name` prop on `SeriesSpec`. The types `SeriesStringPredicate`, `SubSeriesStringPredicate` have been removed. * the `SeriesIdentifier` type is generalized into a simplified object with two values in common: `specId` and `key`. A specialized `XYChartSeriesIdentifier` extends now the base `SeriesIdentifier`. The `SettingsSpec` prop `showLegendDisplayValue` is renamed to `showLegendExtra` and its default value is now `false` hiding the current/last value on the legend by default.

markov00 added 2 commits March 4, 2020 10:16

feat(partition): add element click event

0ba75c1

This commit adds the element click event to the Partition chart, returning a groupByRollup value for each configured chart layer and the associated value

fix: expose missing LayerValue type

dff6992

markov00 added enhancement New feature or request :interactions Interactions related issue labels Mar 4, 2020

markov00 requested a review from nickofthyme March 4, 2020 09:36

markov00 self-assigned this Mar 4, 2020

markov00 requested review from monfera and rshen91 March 4, 2020 09:36

test: add missing VRT baseline

98c0a97

markov00 mentioned this pull request Mar 4, 2020

Roadmap #3

Closed

93 tasks

rshen91 approved these changes Mar 5, 2020

View reviewed changes

markov00 added 3 commits March 9, 2020 11:00

Merge branch 'master' into 2020-03-03_add_click_event_partition

afd5399

refactor: cleanup callers

fe24174

feat: add elementOut and elementOver events

981c66a

markov00 changed the title ~~feat(partition): add element click event~~ feat(partition): add element click, over, out events Mar 9, 2020

rshen91 self-requested a review March 9, 2020 16:23

rshen91 approved these changes Mar 9, 2020

View reviewed changes

nickofthyme approved these changes Mar 9, 2020

View reviewed changes

markov00 added 3 commits March 10, 2020 10:26

Merge branch 'master' into 2020-03-03_add_click_event_partition

046618a

chore: removed partition from playground

14a4da4

fix: move jest-env as top comment

6a5d8ca

markov00 merged commit 103df02 into elastic:master Mar 10, 2020

markov00 deleted the 2020-03-03_add_click_event_partition branch March 10, 2020 10:12

markov00 added the released Issue released publicly label Mar 17, 2020

markov00 mentioned this pull request Mar 18, 2020

Update dependency @elastic/charts to v18.1.0 elastic/kibana#60578

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(partition): add element click, over, out events#578

feat(partition): add element click, over, out events#578
markov00 merged 9 commits intoelastic:masterfrom
markov00:2020-03-03_add_click_event_partition

markov00 commented Mar 4, 2020

Uh oh!

codecov-io commented Mar 4, 2020 •

edited

Loading

Uh oh!

rshen91 left a comment

Uh oh!

rshen91 left a comment

Uh oh!

nickofthyme left a comment

Uh oh!

nickofthyme Mar 9, 2020

Uh oh!

markov00 Mar 10, 2020

Uh oh!

nickofthyme Mar 9, 2020

Uh oh!

markov00 Mar 10, 2020

Uh oh!

nickofthyme Mar 9, 2020

Uh oh!

markov00 commented Mar 17, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

markov00 commented Mar 4, 2020

Summary

Checklist

Uh oh!

codecov-io commented Mar 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

rshen91 left a comment

Choose a reason for hiding this comment

Uh oh!

rshen91 left a comment

Choose a reason for hiding this comment

Uh oh!

nickofthyme left a comment

Choose a reason for hiding this comment

Uh oh!

nickofthyme Mar 9, 2020

Choose a reason for hiding this comment

Uh oh!

markov00 Mar 10, 2020

Choose a reason for hiding this comment

Uh oh!

nickofthyme Mar 9, 2020

Choose a reason for hiding this comment

Uh oh!

markov00 Mar 10, 2020

Choose a reason for hiding this comment

Uh oh!

nickofthyme Mar 9, 2020

Choose a reason for hiding this comment

Uh oh!

markov00 commented Mar 17, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov-io commented Mar 4, 2020 •

edited

Loading