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.

Sign up for GitHub

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

Jump to bottom

feat: heatmap/swimlane chart type #831

Merged
merged 54 commits into from
Oct 2, 2020
Merged

feat: heatmap/swimlane chart type #831

merged 54 commits into from
Oct 2, 2020

Conversation

darnautov
Copy link
Contributor

@darnautov darnautov commented Sep 22, 2020 •
edited
Loading

Summary

Resolves #752.

Initial implementation of a swimlane/heatmap visualization. I was mostly focused on the swim lane use case, but thanks to @markov00 it also has basic heatmap support.

There are some TS and test issues I'm resolving at the moment but would be helpful to start collecting feedback on the implementation, or maybe you'll spot a lacking of some critical features for the beta release.

Swim lane example:
image

Heatmap example:
image

Features:

  • Support linear, threshold, quantile, and quantize color scaling based on values
  • Support time series and categorical scaling for X-axis
  • Tooltip for cells and Y-axis values
  • Highlighting of the brushed area
  • Provide X, Y ranges and selected cells on brushing callback
  • Legend rendering based on color scaling
  • Truncate long Y-axis labels
  • Basic styling for axis, grid, and cells.

Known issues (I hope @nickofthyme or @markov00 could help)

  • Brush component persists even on empty mouseDownPosition
  • Using ScaleContinuous time scale ends up with some ticks outside of the range

TODO for further releases:

  • Support long labels for categorical data on X-axis.

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
  • 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

@darnautov darnautov self-assigned this Sep 22, 2020
@cla-checker-service
Copy link

cla-checker-service bot commented Sep 22, 2020 •
edited
Loading

💚 CLA has been signed

markov00 and others added 15 commits September 22, 2020 19:13
@markov00 @darnautov
feat: add heatmap boilerplate
cfd10b8
@darnautov
WIP legend
b7fdb06
@darnautov
feat: hidden items in legend
f8ab8de
@darnautov
highlight brush selection
5e16286
@darnautov
feat: support threshold scale type
74c691e
@darnautov
feat: grid rendering
af6a06b
@darnautov
feat: init brush for heatmap
5fc4e78
@darnautov
feat: support brushing outside of chart
b2586ab
@darnautov
feat: support xDomain with custom interval
5fba938
@darnautov
feat: WIP axis rendering with overflow, measure chart dimensions
5e468d9
@darnautov
feat: fix brush area selector
289ed74
@darnautov
feat: tooltip for Y axis values
eb8055f
@darnautov
feat: fix pickDragShape
d1125c3
@darnautov
feat: fix pickDragArea
483aa99
@nickofthyme @darnautov
fix: breaking change in patch release of 21.1.1
5c87e27 
breaking change caused by changes in elastic#810 see elastic#830 for more info

BREAKING CHANGE: `TooltipValue.value` is now raw value and `TooltipValue.formattedValue` is now the
string formatted value.

fix elastic#810
@peteharverson
Copy link

Tested this on the playground and it's looking great!

Some feedback on the selection behavior. Some of this may just be because it is running in the playground.

  • Need a way of deselecting
  • Ability for drag select to 'snap' to cell boundaries (as we have in the ML anomaly swim lane). This should possibly be configurable, as for some use cases it might make sense not to snap to the cell boundaries.
    image
  • Ability to select a whole cell by clicking on it (related to item above, where clicking on a cell snaps selection to the full range of that one cell)
  • Styling of selection needs some work - maybe adding the ability to mask out the area that isn't selected (as we have in the ML swim lane)

image

@darnautov darnautov marked this pull request as ready for review September 24, 2020 08:00
darnautov
darnautov commented Oct 1, 2020
View reviewed changes
src/chart_types/heatmap/state/selectors/get_color_scale.ts Outdated
.domain(ranges)
.interpolate(interpolateHcl)
.range(colorRange);
colorScale.ticks = [0, ...colorScale.config.ticks(6)];
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I believe it doesn't cover the case when the values in the range are negative

@darnautov
Copy link
Contributor Author

Are you planning to implement some kind of visibility toggle on the legend? If not, I think we should disable the ability to toggle the legend items.

Screen Recording 2020-09-29 at 10 41 AM

@nickofthyme added in 0af6a9a, thanks @markov00

@markov00 markov00 changed the title feat: Swimlane / Heatmap visualisation feat: heatmap/swimlane chart type Oct 1, 2020
markov00
markov00 approved these changes Oct 2, 2020
View reviewed changes
Copy link
Member

@markov00 markov00 left a comment

Choose a reason for hiding this comment

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

LGTM tested locally.
Everything is in place for an alpha release

@darnautov darnautov merged commit 96f92b5 into elastic:master Oct 2, 2020
markov00 pushed a commit that referenced this pull request Oct 2, 2020
@semantic-release-bot
chore(release): 23.1.0 [skip ci]
905b481 
# [23.1.0](v23.0.1...v23.1.0) (2020-10-02)

### Features

* heatmap/swimlane chart type ([#831](#831)) ([96f92b5](96f92b5)), closes [#752](#752)
@markov00
Copy link
Member

markov00 commented Oct 2, 2020

🎉 This PR is included in version 23.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Oct 2, 2020
@darnautov darnautov mentioned this pull request Oct 2, 2020
Merged
2 tasks
This was referenced Oct 6, 2020
Closed
Closed
Closed
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
@semantic-release-bot
chore(release): 23.1.0 [skip ci]
05dd918 
# [23.1.0](elastic/elastic-charts@v23.0.1...v23.1.0) (2020-10-02)

### Features

* heatmap/swimlane chart type ([opensearch-project#831](elastic/elastic-charts#831)) ([7cd9a6b](elastic/elastic-charts@7cd9a6b)), closes [opensearch-project#752](elastic/elastic-charts#752)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@markov00 markov00 markov00 approved these changes

@peteharverson peteharverson Awaiting requested review from peteharverson

@nickofthyme nickofthyme Awaiting requested review from nickofthyme

Assignees

@darnautov darnautov

Labels
released Issue released publicly
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Swim lane visualization
5 participants
@darnautov @peteharverson @codecov-commenter @nickofthyme @markov00