-
Notifications
You must be signed in to change notification settings - Fork 3.6k
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
Add heatmap vis type #13945
Add heatmap vis type #13945
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
|
||
const colors = | ||
storedColors && storedColors.length | ||
? storedColors |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah, some colors are string[] and some are the color interface- would you mind adding a type assertion that trickles to this to protect against someone reverting to color type? or maybe just add it to the tech debt to-do list for now? :)
display: flex; | ||
justify-content: flex-start; | ||
align-items: center; | ||
} | ||
|
||
.color-scheme-dropdown--swatches { | ||
.color-scheme-dropdown-item--swatches { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Naisss
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some small CSS nits but great work overall, very thorough and well organized
colors: string[] | ||
} | ||
|
||
const ColorSchemeDropdownItem: FunctionComponent<Props> = ({name, colors}) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good to see more function components
@@ -120,7 +124,7 @@ const XYContainer: FunctionComponent<Props> = ({ | |||
} | |||
|
|||
return ( | |||
<div className="xy-container"> | |||
<div className="vis-plot-container"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's all in the details
4d0482b
to
d673349
Compare
Closes #13871
Adds a heatmap / 2D histogram visualization type:
The ability to create heatmaps is feature flagged in the UI, which will help us roll out the API updates to cloud before the UI updates.
To enable the feature, open the dev tools and type:
Then refresh the page.
The heatmaps will recompute the binning statistic on zoom and resize:
Heatmaps support a variety of visualization options:
The line and histogram options have been tweaked for consistency between all visualization types, though there's still lots of work to do in cleaning up the vis options: