Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(heatmap): restore support for empty values and empty color
  • Loading branch information
plouc committed Jan 12, 2022
1 parent d0cd500 commit be1a8af
Show file tree
Hide file tree
Showing 10 changed files with 69 additions and 57 deletions.
10 changes: 7 additions & 3 deletions packages/heatmap/src/HeatMap.tsx
Expand Up @@ -7,7 +7,8 @@ import {
HeatMapDatum,
HeatMapCommonProps,
HeatMapSvgProps,
LayerId, CustomLayerProps,
LayerId,
CustomLayerProps,
} from './types'
import { useHeatMap } from './hooks'
import { svgDefaultProps } from './defaults'
Expand Down Expand Up @@ -74,7 +75,10 @@ const InnerHeatMap = <Datum extends HeatMapDatum, ExtraProps extends object>({
partialMargin
)

const { xScale, yScale, cells, colorScale, activeCell, setActiveCell } = useHeatMap<Datum, ExtraProps>({
const { xScale, yScale, cells, colorScale, activeCell, setActiveCell } = useHeatMap<
Datum,
ExtraProps
>({
data,
valueFormat,
width: innerWidth,
Expand Down Expand Up @@ -180,7 +184,7 @@ const InnerHeatMap = <Datum extends HeatMapDatum, ExtraProps extends object>({
const customLayerProps: CustomLayerProps<Datum> = {
cells,
activeCell,
setActiveCell
setActiveCell,
}

return (
Expand Down
5 changes: 4 additions & 1 deletion packages/heatmap/src/HeatMapCellCircle.tsx
Expand Up @@ -33,7 +33,10 @@ const NonMemoizedHeatMapCellCircle = <Datum extends HeatMapDatum>({
transform={to([animatedProps.x, animatedProps.y], (x, y) => `translate(${x}, ${y})`)}
>
<animated.circle
r={12}
r={to(
[animatedProps.width, animatedProps.height],
(width, height) => Math.min(width, height) / 2
)}
fill={animatedProps.color}
fillOpacity={animatedProps.opacity}
strokeWidth={borderWidth}
Expand Down
2 changes: 1 addition & 1 deletion packages/heatmap/src/defaults.ts
Expand Up @@ -44,7 +44,7 @@ export const commonDefaultProps: Omit<
type: 'sequential',
scheme: 'brown_blueGreen',
},
emptyColor: '#00000000',
emptyColor: '#000000',

legends: [],
annotations: [],
Expand Down
1 change: 1 addition & 0 deletions packages/heatmap/src/index.ts
Expand Up @@ -4,3 +4,4 @@ export * from './HeatMapCanvas'
export * from './ResponsiveHeatMapCanvas'
export * from './hooks'
export * from './defaults'
export * from './types'
34 changes: 16 additions & 18 deletions packages/static/src/mappings/heatmap.ts
@@ -1,43 +1,41 @@
import { FunctionComponent } from 'react'
import Joi from 'joi'
import { Dimensions } from '@nivo/core'
import { HeatMap, HeatMapSvgProps } from '@nivo/heatmap'
import { DefaultHeatMapDatum, HeatMap, HeatMapDatum, HeatMapSvgProps } from '@nivo/heatmap'
import { custom } from './common'
import { dimensions } from './commons/dimensions'
import { inheritedColor } from './commons/colors'
import { axes } from './common'
import { OmitStrict } from '../types'

export type HeatMapApiProps = OmitStrict<
HeatMapSvgProps & Dimensions,
| 'isInteractive'
| 'onClick'
| 'hoverTarget'
| 'cellHoverOpacity'
| 'cellHoverOthersOpacity'
| 'animate'
export type HeatMapApiProps<
Datum extends HeatMapDatum = DefaultHeatMapDatum,
ExtraProps extends object = Record<string, never>
> = OmitStrict<
HeatMapSvgProps<Datum, ExtraProps>,
'isInteractive' | 'onClick' | 'hoverTarget' | 'activeOpacity' | 'inactiveOpacity' | 'animate'
>

export const heatmapMapping = {
component: HeatMap as unknown as FunctionComponent<HeatMapApiProps>,
schema: Joi.object<HeatMapApiProps>().keys({
data: custom.array().min(1).required(),
indexBy: Joi.string(),
keys: Joi.array().sparse(false).min(1).unique(),
minValue: Joi.alternatives().try(Joi.any().valid('auto'), Joi.number()).required(),
maxValue: Joi.alternatives().try(Joi.any().valid('auto'), Joi.number()).required(),
forceSquare: Joi.boolean(),
sizeVariation: Joi.number().min(0).max(1),
padding: Joi.number().min(0),
xOuterPadding: Joi.number().min(0).max(1),
xInnerPadding: Joi.number().min(0).max(1),
yOuterPadding: Joi.number().min(0).max(1),
yInnerPadding: Joi.number().min(0).max(1),
width: dimensions.width,
height: dimensions.height,
margin: dimensions.margin,

cellShape: Joi.any().valid('rect', 'circle'),
colors: Joi.string(),
cellOpacity: Joi.number().min(0).max(1),
cellBorderWidth: Joi.number().min(0),
cellBorderColor: inheritedColor,
cellComponent: Joi.any().valid('rect', 'circle'),
colors: Joi.object(),
opacity: Joi.number().min(0).max(1),
borderWidth: Joi.number().min(0),
borderColor: inheritedColor,

enableLabels: Joi.boolean(),
labelTextColor: inheritedColor,
Expand Down
12 changes: 3 additions & 9 deletions packages/static/src/samples/index.ts
Expand Up @@ -68,17 +68,11 @@ export const samples: Record<
width: 900,
height: 600,
data: generateCountriesData(moreKeys, { size: 9, min: 0, max: 100 }),
keys: moreKeys,
indexBy: 'country',
forceSquare: true,
cellShape: 'circle',
cellBorderWidth: 2,
cellBorderColor: 'inherit:darker(0.4)',
padding: 4,
sizeVariation: 0.5,
enableGridY: true,
cellComponent: 'rect',
borderWidth: 2,
borderColor: 'inherit:darker(0.4)',
labelTextColor: 'inherit:darker(2.4)',
colors: 'PuOr',
},
},
line: {
Expand Down
8 changes: 4 additions & 4 deletions website/src/data/components/heatmap/meta.yml
Expand Up @@ -17,9 +17,9 @@ HeatMap:
- label: Custom tooltip
link: heatmap-custom-tooltip
description: |
An heat map matrix, you can chose between various colors scales
or pass yours, you also have the ability to change the cell shape
for rectangle or circle and even use a custom rendering function.
An heat map matrix, you can chose between various colors scales,
you also have the ability to change the cell shape
for rectangle or circle and even use a custom component.
The responsive alternative of this component is `ResponsiveHeatMap`.
Expand All @@ -35,7 +35,7 @@ HeatMapCanvas:
- canvas
stories: []
description: |
A variation around the [HeatMap](self:/heatmap) component.
A variation around the [HeatMap](self:/heatmap/) component.
Well suited for large data sets as it does not impact DOM tree depth,
however you'll lose the isomorphic ability and transitions.
Expand Down
24 changes: 21 additions & 3 deletions website/src/data/components/heatmap/props.ts
Expand Up @@ -19,6 +19,19 @@ const props: ChartProperty[] = [
help: 'Chart data.',
type: 'HeatMapSerie<Datum, ExtraProps>[]',
required: true,
description: `
The default expected type is:
\`\`\`
{
id: string
data: {
x: string | number
y: number | null
}[]
}[]
\`\`\`
`
},
{
key: 'minValue',
Expand Down Expand Up @@ -155,6 +168,14 @@ const props: ChartProperty[] = [
type: 'continuous_colors',
},
},
{
key: 'emptyColor',
group: 'Style',
help: 'Color to use for cells not having a value.',
type: 'string',
defaultValue: defaults.emptyColor,
control: { type: 'colorPicker' },
},
{
key: 'opacity',
group: 'Style',
Expand Down Expand Up @@ -190,15 +211,13 @@ const props: ChartProperty[] = [
{
key: 'borderWidth',
group: 'Style',
help: 'Cell border width.',
defaultValue: defaults.borderWidth,
type: 'number',
control: { type: 'lineWidth' },
},
{
key: 'borderColor',
group: 'Style',
help: 'Method to compute cell border color.',
description: `
how to compute cell border color,
[see dedicated documentation](self:/guides/colors).
Expand All @@ -224,7 +243,6 @@ const props: ChartProperty[] = [
},
{
key: 'labelTextColor',
help: 'Method to compute label text color.',
description: `
how to compute label text color,
[see dedicated documentation](self:/guides/colors).
Expand Down
24 changes: 10 additions & 14 deletions website/src/pages/heatmap/canvas.tsx
@@ -1,10 +1,7 @@
import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import isFunction from 'lodash/isFunction'
import {
ResponsiveHeatMapCanvas,
canvasDefaultProps as defaults,
} from '@nivo/heatmap'
import { ResponsiveHeatMapCanvas, canvasDefaultProps as defaults } from '@nivo/heatmap'
import { generateXYSeries, sets } from '@nivo/generators'
import { ComponentTemplate } from '../../components/components/ComponentTemplate'
import meta from '../../data/components/heatmap/meta.yml'
Expand Down Expand Up @@ -47,16 +44,8 @@ const initialProperties = {
yOuterPadding: defaults.yOuterPadding,
yInnerPadding: defaults.yInnerPadding,

colors: {
type: 'diverging',
scheme: 'red_yellow_blue',
divergeAt: 0.5,
minValue: -100_000,
maxValue: 100_000,
},

enableGridX: false,
enableGridY: true,
enableGridY: false,
axisTop: {
enable: true,
orient: 'top',
Expand Down Expand Up @@ -98,10 +87,17 @@ const initialProperties = {
},

renderCell: 'rect',
colors: {
type: 'diverging',
scheme: 'red_yellow_blue',
divergeAt: 0.5,
minValue: -100_000,
maxValue: 100_000,
},
emptyColor: '#555555',
opacity: defaults.opacity,
activeOpacity: defaults.activeOpacity,
inactiveOpacity: defaults.inactiveOpacity,
borderRadius: defaults.borderRadius,
borderWidth: defaults.borderWidth,
borderColor: defaults.borderColor,

Expand Down
6 changes: 2 additions & 4 deletions website/src/pages/heatmap/index.tsx
@@ -1,10 +1,7 @@
import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import isFunction from 'lodash/isFunction'
import {
ResponsiveHeatMap,
svgDefaultProps as defaults,
} from '@nivo/heatmap'
import { ResponsiveHeatMap, svgDefaultProps as defaults } from '@nivo/heatmap'
import { generateXYSeries } from '@nivo/generators'
import { ComponentTemplate } from '../../components/components/ComponentTemplate'
import meta from '../../data/components/heatmap/meta.yml'
Expand Down Expand Up @@ -93,6 +90,7 @@ const initialProperties = {
minValue: -100_000,
maxValue: 100_000,
},
emptyColor: '#555555',
cellComponent: 'rect',
opacity: defaults.opacity,
activeOpacity: defaults.activeOpacity,
Expand Down

0 comments on commit be1a8af

Please sign in to comment.