Skip to content

feat: heatmap/swimlane chart type#831

Merged
darnautov merged 54 commits intoelastic:masterfrom
darnautov:swimlane-heatmap-vis-beta
Oct 2, 2020
Merged

feat: heatmap/swimlane chart type#831
darnautov merged 54 commits intoelastic:masterfrom
darnautov:swimlane-heatmap-vis-beta

Conversation

@darnautov
Copy link
Copy Markdown
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
Copy Markdown

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
@darnautov darnautov force-pushed the swimlane-heatmap-vis-beta branch from 9fa1b8c to 5c87e27 Compare September 22, 2020 17:20
@peteharverson
Copy link
Copy Markdown

peteharverson commented Sep 23, 2020

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 requested a review from nickofthyme October 1, 2020 13:15
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
Copy Markdown
Contributor Author

@darnautov darnautov Oct 1, 2020

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
Copy Markdown
Contributor Author

darnautov commented Oct 1, 2020

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
Copy Markdown
Collaborator

@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
Copy Markdown
Collaborator

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