-
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.auto-domain-input--custom { | ||
padding-top: 4px; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
// Libraries | ||
import React, {CSSProperties, FunctionComponent} from 'react' | ||
|
||
const generateGradientStyle = (colors: string[]): CSSProperties => { | ||
const stops = colors | ||
.map((hex, i) => `${hex} ${Math.round((i / (colors.length - 1)) * 100)}%`) | ||
.join(', ') | ||
|
||
return { | ||
background: `linear-gradient(to right, ${stops})`, | ||
} | ||
} | ||
|
||
interface Props { | ||
name: string | ||
colors: string[] | ||
} | ||
|
||
const ColorSchemeDropdownItem: FunctionComponent<Props> = ({name, colors}) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good to see more function components |
||
return ( | ||
<div className="color-scheme-dropdown-item"> | ||
<div | ||
className="color-scheme-dropdown-item--swatches" | ||
style={generateGradientStyle(colors)} | ||
/> | ||
<div className="color-scheme-dropdown-item--name">{name}</div> | ||
</div> | ||
) | ||
} | ||
|
||
export default ColorSchemeDropdownItem |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
// Libraries | ||
import React, {FunctionComponent} from 'react' | ||
import {Config, Table} from '@influxdata/vis' | ||
import {get} from 'lodash' | ||
|
||
// Components | ||
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage' | ||
import GraphLoadingDots from 'src/shared/components/GraphLoadingDots' | ||
|
||
// Utils | ||
import {useVisDomainSettings} from 'src/shared/utils/useVisDomainSettings' | ||
import {getFormatter} from 'src/shared/utils/vis' | ||
|
||
// Constants | ||
import {VIS_THEME} from 'src/shared/constants' | ||
import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes' | ||
import {INVALID_DATA_COPY} from 'src/shared/copy/cell' | ||
|
||
// Types | ||
import {RemoteDataState, HeatmapView} from 'src/types' | ||
|
||
interface Props { | ||
table: Table | ||
loading: RemoteDataState | ||
viewProperties: HeatmapView | ||
children: (config: Config) => JSX.Element | ||
} | ||
|
||
const HeatmapContainer: FunctionComponent<Props> = ({ | ||
table, | ||
loading, | ||
viewProperties: { | ||
xColumn, | ||
yColumn, | ||
xDomain: storedXDomain, | ||
yDomain: storedYDomain, | ||
xAxisLabel, | ||
yAxisLabel, | ||
xPrefix, | ||
xSuffix, | ||
yPrefix, | ||
ySuffix, | ||
colors: storedColors, | ||
binSize, | ||
}, | ||
children, | ||
}) => { | ||
const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings( | ||
storedXDomain, | ||
get(table, ['columns', xColumn, 'data'], []) | ||
) | ||
|
||
const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings( | ||
storedYDomain, | ||
get(table, ['columns', yColumn, 'data'], []) | ||
) | ||
|
||
const isValidView = | ||
xColumn && yColumn && table.columns[xColumn] && table.columns[yColumn] | ||
|
||
if (!isValidView) { | ||
return <EmptyGraphMessage message={INVALID_DATA_COPY} /> | ||
} | ||
|
||
const colors: string[] = | ||
storedColors && storedColors.length | ||
? storedColors | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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? :) |
||
: DEFAULT_LINE_COLORS.map(c => c.hex) | ||
|
||
const xFormatter = getFormatter(table.columns[xColumn].type, xPrefix, xSuffix) | ||
const yFormatter = getFormatter(table.columns[yColumn].type, yPrefix, ySuffix) | ||
|
||
const config: Config = { | ||
...VIS_THEME, | ||
table, | ||
xAxisLabel, | ||
yAxisLabel, | ||
xDomain, | ||
onSetXDomain, | ||
onResetXDomain, | ||
yDomain, | ||
onSetYDomain, | ||
onResetYDomain, | ||
valueFormatters: { | ||
[xColumn]: xFormatter, | ||
[yColumn]: yFormatter, | ||
}, | ||
layers: [ | ||
{ | ||
type: 'heatmap', | ||
x: xColumn, | ||
y: yColumn, | ||
colors, | ||
binSize, | ||
}, | ||
], | ||
} | ||
|
||
return ( | ||
<div className="vis-plot-container"> | ||
{loading === RemoteDataState.Loading && <GraphLoadingDots />} | ||
{children(config)} | ||
</div> | ||
) | ||
} | ||
|
||
export default HeatmapContainer |
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