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

Add heatmap vis type #13945

Merged
merged 2 commits into from May 17, 2019
Merged

Add heatmap vis type #13945

merged 2 commits into from May 17, 2019

Conversation

chnn
Copy link
Contributor

@chnn chnn commented May 16, 2019

Closes #13871

Adds a heatmap / 2D histogram visualization type:

selected

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:

influx.toggleFeature('heatmap')

Then refresh the page.

The heatmaps will recompute the binning statistic on zoom and resize:

rebinning

Heatmaps support a variety of visualization options:

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:

options_side_by_side

Copy link
Contributor

@ebb-tide ebb-tide left a 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
Copy link
Contributor

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 {
Copy link
Contributor

Choose a reason for hiding this comment

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

Naisss

Copy link
Contributor

@alexpaxton alexpaxton left a 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}) => {
Copy link
Contributor

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">
Copy link
Contributor

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

ui/src/shared/components/cells/Cell.scss Outdated Show resolved Hide resolved
ui/src/shared/components/cells/Cell.scss Outdated Show resolved Hide resolved
@chnn chnn force-pushed the add-heatmap branch 2 times, most recently from 4d0482b to d673349 Compare May 17, 2019 18:53
@chnn chnn merged commit 1a59fbc into master May 17, 2019
@chnn chnn deleted the add-heatmap branch May 17, 2019 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add heatmap vis type
3 participants