Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(partition): add tooltip #544

Merged
merged 19 commits into from
Mar 2, 2020
Merged

feat(partition): add tooltip #544

merged 19 commits into from
Mar 2, 2020

Conversation

monfera
Copy link
Contributor

@monfera monfera commented Feb 10, 2020

Summary

Adds shape picking calculation, basic event handler and cursor location transform.
It may return multiple items, for example:

  • multilayer treemap: it returns all hovered layers (can be less than the total number of layers if the user hovers over what's a gap at a granular level, but inside a rectangle at a less granular level)
  • pie/sunburst: we may extend the logic such that it covers the entire pixel (now it covers the corner of the pixel, so currently it'll yield up to one shape)

shape pick

Checklist

  • 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

@monfera monfera added the :tooltip Related to hover tooltip label Feb 10, 2020
@monfera monfera requested a review from markov00 February 10, 2020 13:55
@monfera monfera self-assigned this Feb 10, 2020
@codecov-io
Copy link

codecov-io commented Feb 10, 2020

Codecov Report

Merging #544 into master will increase coverage by 0.34%.
The diff coverage is 82.92%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #544      +/-   ##
==========================================
+ Coverage   71.08%   71.43%   +0.34%     
==========================================
  Files         214      214              
  Lines        6215     6269      +54     
  Branches     1150     1200      +50     
==========================================
+ Hits         4418     4478      +60     
+ Misses       1778     1772       -6     
  Partials       19       19
Impacted Files Coverage Δ
...ypes/partition_chart/layout/viewmodel/viewmodel.ts 13.44% <ø> (ø) ⬆️
...t_types/xy_chart/state/selectors/compute_legend.ts 100% <ø> (ø) ⬆️
src/utils/commons.ts 100% <ø> (ø) ⬆️
src/chart_types/xy_chart/utils/specs.ts 100% <ø> (ø) ⬆️
...es/partition_chart/layout/types/viewmodel_types.ts 80% <ø> (ø) ⬆️
src/utils/geometry.ts 100% <ø> (ø) ⬆️
...types/partition_chart/layout/types/config_types.ts 100% <ø> (ø) ⬆️
...rtition_chart/layout/viewmodel/link_text_layout.ts 10.52% <ø> (ø) ⬆️
...art_types/xy_chart/annotations/annotation_utils.ts 100% <ø> (ø) ⬆️
.../chart_types/partition_chart/layout/types/types.ts 100% <ø> (ø) ⬆️
... and 40 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 4d73ff3...918939e. Read the comment docs.

@elastic elastic deleted a comment from robgil Feb 10, 2020
@monfera
Copy link
Contributor Author

monfera commented Feb 11, 2020

Added data collection for which individual data array elements make up the sunburst slice or treemap rectangle on @markov00's request. The collection and identification of the original Datum elements in the passed-on data array is done via their zero-based indices in the array. Here's an example in case of a three-layer sunburst:

indices

A new story is added, which has more than one input Datum for each (leaf) slice.

@markov00 markov00 added the wip work in progress label Feb 13, 2020
Move `Datum`, `Rotation`, `Position` and `Color` to `utils/commons`. Decouple legend from axis position method and move the `scales` to `utils/scales`.
This commit will decouple the tooltip component from the XY chart to allow Partition and other chart type an ease use.

BREAKING CHANGE: 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.

close elastic#246
@markov00 markov00 changed the title feat: pick shape feat(partition): add tooltip Feb 21, 2020
@markov00 markov00 removed the wip work in progress label Feb 21, 2020
Copy link
Contributor

@rshen91 rshen91 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good! I could use some clarification on the positioning of the tooltip when it approaches the end of the canvas - I'm including a giphy that shows the tooltip not adjusting when it is greater than the canvas perimeter (I'm thinking it should pivot to the right of the cursor sooner than it currently is?).
tooltip

Is this something this PR should address or is there a subsequent PR that will fix it?

Copy link
Collaborator

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, would be nice to have an interaction VRT for this.

Screen Recording 2020-02-28 at 08 22 AM

src/chart_types/partition_chart/state/selectors/tooltip.ts Outdated Show resolved Hide resolved
@markov00 markov00 self-assigned this Mar 2, 2020
@markov00 markov00 merged this pull request into elastic:master Mar 2, 2020
markov00 added a commit that referenced this pull request Mar 2, 2020
This commit moves the `Datum`, `Rotation`, `Position` and `Color` into `utils/commons`. It decouples the legend from axis position and moves the `scales` to `utils/scales`.
It decouples the tooltip component from the XY chart to allow Partition charts and other chart to use it.

close #246

Co-authored-by: Marco Vettorello <[email protected]>
@markov00 markov00 mentioned this pull request Mar 3, 2020
93 tasks
markov00 pushed a commit that referenced this pull request Mar 17, 2020
# [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.
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
# [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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:tooltip Related to hover tooltip
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants