Skip to content

Commit 236e94c

Browse files
ploucplouc
committedJan 12, 2022
feat(heatmap): restore forceSquare feature
·
v0.88.0v0.79.0
1 parent 38257b8 commit 236e94c

File tree

5 files changed

+320
-154
lines changed

5 files changed

+320
-154
lines changed
 

‎packages/heatmap/src/HeatMap.tsx

+33-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactNode, Fragment, createElement } from 'react'
1+
import { ReactNode, Fragment, createElement, useMemo } from 'react'
22
import { SvgWrapper, Container, useDimensions } from '@nivo/core'
33
import { Axes, Grid } from '@nivo/axes'
44
import { AnchoredContinuousColorsLegendSvg } from '@nivo/legends'
@@ -27,7 +27,7 @@ const InnerHeatMap = <Datum extends HeatMapDatum, ExtraProps extends object>({
2727
width,
2828
height,
2929
margin: partialMargin,
30-
// forceSquare = svgDefaultProps.forceSquare,
30+
forceSquare = svgDefaultProps.forceSquare,
3131
xInnerPadding = svgDefaultProps.xInnerPadding,
3232
xOuterPadding = svgDefaultProps.xOuterPadding,
3333
yInnerPadding = svgDefaultProps.yInnerPadding,
@@ -67,20 +67,31 @@ const InnerHeatMap = <Datum extends HeatMapDatum, ExtraProps extends object>({
6767
ariaLabelledBy,
6868
ariaDescribedBy,
6969
}: InnerHeatMapProps<Datum, ExtraProps>) => {
70-
const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
71-
width,
72-
height,
73-
partialMargin
74-
)
70+
const {
71+
margin: _margin,
72+
innerWidth: _innerWidth,
73+
innerHeight: _innerHeight,
74+
outerWidth,
75+
outerHeight,
76+
} = useDimensions(width, height, partialMargin)
7577

76-
const { xScale, yScale, cells, colorScale, activeCell, setActiveCell } = useHeatMap<
77-
Datum,
78-
ExtraProps
79-
>({
80-
data,
81-
valueFormat,
78+
const {
8279
width: innerWidth,
8380
height: innerHeight,
81+
offsetX,
82+
offsetY,
83+
xScale,
84+
yScale,
85+
cells,
86+
colorScale,
87+
activeCell,
88+
setActiveCell,
89+
} = useHeatMap<Datum, ExtraProps>({
90+
data,
91+
valueFormat,
92+
width: _innerWidth,
93+
height: _innerHeight,
94+
forceSquare,
8495
xInnerPadding,
8596
xOuterPadding,
8697
yInnerPadding,
@@ -97,6 +108,15 @@ const InnerHeatMap = <Datum extends HeatMapDatum, ExtraProps extends object>({
97108
hoverTarget,
98109
})
99110

111+
const margin = useMemo(
112+
() => ({
113+
..._margin,
114+
top: _margin.top + offsetY,
115+
left: _margin.left + offsetX,
116+
}),
117+
[_margin, offsetX, offsetY]
118+
)
119+
100120
const layerById: Record<LayerId, ReactNode> = {
101121
grid: null,
102122
axes: null,

‎packages/heatmap/src/HeatMapCanvas.tsx

+32-12
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
2929
width,
3030
height,
3131
margin: partialMargin,
32-
// forceSquare = canvasDefaultProps.forceSquare,
3332
xInnerPadding = canvasDefaultProps.xInnerPadding,
3433
xOuterPadding = canvasDefaultProps.xOuterPadding,
3534
yInnerPadding = canvasDefaultProps.yInnerPadding,
3635
yOuterPadding = canvasDefaultProps.yOuterPadding,
36+
forceSquare = canvasDefaultProps.forceSquare,
3737
sizeVariation = canvasDefaultProps.sizeVariation,
3838
renderCell: _renderCell = canvasDefaultProps.renderCell as CellShape,
3939
opacity = canvasDefaultProps.opacity,
@@ -66,24 +66,35 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
6666
}: InnerNetworkCanvasProps<Datum, ExtraProps>) => {
6767
const canvasEl = useRef<HTMLCanvasElement | null>(null)
6868

69-
const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
70-
width,
71-
height,
72-
partialMargin
73-
)
69+
const {
70+
margin: _margin,
71+
innerWidth: _innerWidth,
72+
innerHeight: _innerHeight,
73+
outerWidth,
74+
outerHeight,
75+
} = useDimensions(width, height, partialMargin)
7476

75-
const { xScale, yScale, cells, activeCell, setActiveCell, colorScale } = useHeatMap<
76-
Datum,
77-
ExtraProps
78-
>({
79-
data,
80-
valueFormat,
77+
const {
8178
width: innerWidth,
8279
height: innerHeight,
80+
offsetX,
81+
offsetY,
82+
xScale,
83+
yScale,
84+
cells,
85+
colorScale,
86+
activeCell,
87+
setActiveCell,
88+
} = useHeatMap<Datum, ExtraProps>({
89+
data,
90+
valueFormat,
91+
width: _innerWidth,
92+
height: _innerHeight,
8393
xInnerPadding,
8494
xOuterPadding,
8595
yInnerPadding,
8696
yOuterPadding,
97+
forceSquare,
8798
sizeVariation,
8899
colors,
89100
emptyColor,
@@ -96,6 +107,15 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
96107
hoverTarget,
97108
})
98109

110+
const margin = useMemo(
111+
() => ({
112+
..._margin,
113+
top: _margin.top + offsetY,
114+
left: _margin.left + offsetX,
115+
}),
116+
[_margin, offsetX, offsetY]
117+
)
118+
99119
const boundAnnotations = useCellAnnotations(cells, annotations)
100120
const computedAnnotations = useComputedAnnotations({
101121
annotations: boundAnnotations,

‎packages/heatmap/src/compute.ts

+99-9
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,69 @@
1-
import { scaleBand } from 'd3-scale'
1+
import { scaleBand, scaleLinear } from 'd3-scale'
22
import { castBandScale } from '@nivo/scales'
3-
import { ComputedCell, HeatMapCommonProps, HeatMapDataProps, HeatMapDatum } from './types'
3+
import {
4+
ComputedCell,
5+
HeatMapCommonProps,
6+
HeatMapDataProps,
7+
HeatMapDatum,
8+
SizeVariationConfig,
9+
} from './types'
10+
11+
export const computeLayout = ({
12+
width: _width,
13+
height: _height,
14+
rows,
15+
columns,
16+
forceSquare,
17+
}: {
18+
width: number
19+
height: number
20+
rows: number
21+
columns: number
22+
forceSquare: boolean
23+
}) => {
24+
let width = _width
25+
let height = _height
26+
27+
let offsetX = 0
28+
let offsetY = 0
29+
30+
if (forceSquare) {
31+
const cellWidth = Math.max(_width / columns, 0)
32+
const cellHeight = Math.max(_height / rows, 0)
33+
const cellSize = Math.min(cellWidth, cellHeight)
34+
35+
width = cellSize * columns
36+
height = cellSize * rows
37+
38+
offsetX = (_width - width) / 2
39+
offsetY = (_height - height) / 2
40+
}
41+
42+
return {
43+
offsetX,
44+
offsetY,
45+
width,
46+
height,
47+
}
48+
}
449

550
export const computeCells = <Datum extends HeatMapDatum, ExtraProps extends object>({
651
data,
7-
width,
8-
height,
52+
width: _width,
53+
height: _height,
954
xInnerPadding,
1055
xOuterPadding,
1156
yInnerPadding,
1257
yOuterPadding,
58+
forceSquare,
1359
}: {
1460
data: HeatMapDataProps<Datum, ExtraProps>['data']
1561
width: number
1662
height: number
17-
xInnerPadding: HeatMapCommonProps<Datum>['xInnerPadding']
18-
xOuterPadding: HeatMapCommonProps<Datum>['xOuterPadding']
19-
yInnerPadding: HeatMapCommonProps<Datum>['yInnerPadding']
20-
yOuterPadding: HeatMapCommonProps<Datum>['yOuterPadding']
21-
}) => {
63+
} & Pick<
64+
HeatMapCommonProps<Datum>,
65+
'xOuterPadding' | 'xInnerPadding' | 'yOuterPadding' | 'yInnerPadding' | 'forceSquare'
66+
>) => {
2267
const xValuesSet = new Set<Datum['x']>()
2368
const serieIds: string[] = []
2469
const allValues: number[] = []
@@ -47,6 +92,15 @@ export const computeCells = <Datum extends HeatMapDatum, ExtraProps extends obje
4792
})
4893

4994
const xValues = Array.from(xValuesSet)
95+
96+
const { width, height, offsetX, offsetY } = computeLayout({
97+
width: _width,
98+
height: _height,
99+
columns: xValues.length,
100+
rows: serieIds.length,
101+
forceSquare,
102+
})
103+
50104
const xScale = castBandScale<Datum['x']>(
51105
scaleBand<Datum['x']>()
52106
.domain(xValues)
@@ -78,10 +132,46 @@ export const computeCells = <Datum extends HeatMapDatum, ExtraProps extends obje
78132
}))
79133

80134
return {
135+
width,
136+
height,
137+
offsetX,
138+
offsetY,
81139
xScale,
82140
yScale,
83141
minValue: Math.min(...allValues),
84142
maxValue: Math.max(...allValues),
85143
cells: cellsWithPosition,
86144
}
87145
}
146+
147+
export const computeSizeScale = (
148+
size: false | SizeVariationConfig,
149+
min: number,
150+
max: number
151+
): ((value: number | null) => number) => {
152+
if (!size) return () => 1
153+
154+
const scale = scaleLinear()
155+
.domain(size.values ? size.values : [min, max])
156+
.range(size.sizes)
157+
158+
return (value: number | null) => {
159+
if (value === null) return 1
160+
return scale(value)
161+
}
162+
}
163+
164+
export const getCellAnnotationPosition = <Datum extends HeatMapDatum>(
165+
cell: ComputedCell<Datum>
166+
) => ({
167+
x: cell.x,
168+
y: cell.y,
169+
})
170+
171+
export const getCellAnnotationDimensions = <Datum extends HeatMapDatum>(
172+
cell: ComputedCell<Datum>
173+
) => ({
174+
size: Math.max(cell.width, cell.height),
175+
width: cell.width,
176+
height: cell.height,
177+
})

‎packages/heatmap/src/hooks.ts

+155-120
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useMemo, useCallback, useState } from 'react'
2-
import { scaleLinear } from 'd3-scale'
32
import { useTheme, usePropertyAccessor, useValueFormatter } from '@nivo/core'
43
import { useInheritedColor, getContinuousColorScale } from '@nivo/colors'
54
import { AnnotationMatcher, useAnnotations } from '@nivo/annotations'
@@ -12,7 +11,12 @@ import {
1211
SizeVariationConfig,
1312
} from './types'
1413
import { commonDefaultProps } from './defaults'
15-
import { computeCells } from './compute'
14+
import {
15+
computeCells,
16+
computeSizeScale,
17+
getCellAnnotationPosition,
18+
getCellAnnotationDimensions,
19+
} from './compute'
1620

1721
export const useComputeCells = <Datum extends HeatMapDatum, ExtraProps extends object>({
1822
data,
@@ -22,15 +26,15 @@ export const useComputeCells = <Datum extends HeatMapDatum, ExtraProps extends o
2226
xOuterPadding,
2327
yInnerPadding,
2428
yOuterPadding,
29+
forceSquare,
2530
}: {
2631
data: HeatMapDataProps<Datum, ExtraProps>['data']
2732
width: number
2833
height: number
29-
xInnerPadding: HeatMapCommonProps<Datum>['xInnerPadding']
30-
xOuterPadding: HeatMapCommonProps<Datum>['xOuterPadding']
31-
yInnerPadding: HeatMapCommonProps<Datum>['yInnerPadding']
32-
yOuterPadding: HeatMapCommonProps<Datum>['yOuterPadding']
33-
}) =>
34+
} & Pick<
35+
HeatMapCommonProps<Datum>,
36+
'xOuterPadding' | 'xInnerPadding' | 'yOuterPadding' | 'yInnerPadding' | 'forceSquare'
37+
>) =>
3438
useMemo(
3539
() =>
3640
computeCells<Datum, ExtraProps>({
@@ -41,8 +45,18 @@ export const useComputeCells = <Datum extends HeatMapDatum, ExtraProps extends o
4145
xOuterPadding,
4246
yInnerPadding,
4347
yOuterPadding,
48+
forceSquare,
4449
}),
45-
[data, width, height, xInnerPadding, xOuterPadding, yInnerPadding, yOuterPadding]
50+
[
51+
data,
52+
width,
53+
height,
54+
xInnerPadding,
55+
xOuterPadding,
56+
yInnerPadding,
57+
yOuterPadding,
58+
forceSquare,
59+
]
4660
)
4761

4862
const isHoverTargetByType = {
@@ -81,74 +95,45 @@ const useSizeScale = (
8195
min: number,
8296
max: number
8397
): ((value: number | null) => number) =>
84-
useMemo(() => {
85-
if (!size) return () => 1
98+
useMemo(() => computeSizeScale(size, min, max), [size, min, max])
8699

87-
const scale = scaleLinear()
88-
.domain(size.values ? size.values : [min, max])
89-
.range(size.sizes)
90-
91-
return (value: number | null) => {
92-
if (value === null) return 1
93-
return scale(value)
94-
}
95-
}, [size, min, max])
96-
97-
export const useHeatMap = <
98-
Datum extends HeatMapDatum = DefaultHeatMapDatum,
99-
ExtraProps extends object = Record<string, never>
100-
>({
101-
data,
100+
const useCellsStyle = <Datum extends HeatMapDatum = DefaultHeatMapDatum>({
101+
cells,
102+
minValue,
103+
maxValue,
104+
sizeVariation,
105+
colors,
106+
emptyColor,
107+
opacity,
108+
activeOpacity,
109+
inactiveOpacity,
110+
borderColor,
111+
label,
112+
labelTextColor,
102113
valueFormat,
103-
width,
104-
height,
105-
// forceSquare = commonDefaultProps.forceSquare,
106-
xOuterPadding = commonDefaultProps.xOuterPadding,
107-
xInnerPadding = commonDefaultProps.xInnerPadding,
108-
yOuterPadding = commonDefaultProps.yOuterPadding,
109-
yInnerPadding = commonDefaultProps.yInnerPadding,
110-
sizeVariation = commonDefaultProps.sizeVariation,
111-
colors = commonDefaultProps.colors as HeatMapCommonProps<Datum>['colors'],
112-
emptyColor = commonDefaultProps.emptyColor,
113-
opacity = commonDefaultProps.opacity,
114-
activeOpacity = commonDefaultProps.activeOpacity,
115-
inactiveOpacity = commonDefaultProps.inactiveOpacity,
116-
borderColor = commonDefaultProps.borderColor as HeatMapCommonProps<Datum>['borderColor'],
117-
label = commonDefaultProps.label as HeatMapCommonProps<Datum>['label'],
118-
labelTextColor = commonDefaultProps.labelTextColor as HeatMapCommonProps<Datum>['labelTextColor'],
119-
hoverTarget = commonDefaultProps.hoverTarget,
114+
activeIds,
120115
}: {
121-
data: HeatMapDataProps<Datum, ExtraProps>['data']
116+
cells: Omit<
117+
ComputedCell<Datum>,
118+
'formattedValue' | 'color' | 'opacity' | 'borderColor' | 'label' | 'labelTextColor'
119+
>[]
120+
minValue: number
121+
maxValue: number
122122
valueFormat?: HeatMapCommonProps<Datum>['valueFormat']
123-
width: number
124-
height: number
125-
forceSquare?: HeatMapCommonProps<Datum>['forceSquare']
126-
xOuterPadding?: HeatMapCommonProps<Datum>['xOuterPadding']
127-
xInnerPadding?: HeatMapCommonProps<Datum>['xInnerPadding']
128-
yOuterPadding?: HeatMapCommonProps<Datum>['yOuterPadding']
129-
yInnerPadding?: HeatMapCommonProps<Datum>['yInnerPadding']
130-
sizeVariation?: HeatMapCommonProps<Datum>['sizeVariation']
131-
colors?: HeatMapCommonProps<Datum>['colors']
132-
emptyColor?: HeatMapCommonProps<Datum>['emptyColor']
133-
opacity?: HeatMapCommonProps<Datum>['opacity']
134-
activeOpacity?: HeatMapCommonProps<Datum>['activeOpacity']
135-
inactiveOpacity?: HeatMapCommonProps<Datum>['inactiveOpacity']
136-
borderColor?: HeatMapCommonProps<Datum>['borderColor']
137-
label?: HeatMapCommonProps<Datum>['label']
138-
labelTextColor?: HeatMapCommonProps<Datum>['labelTextColor']
139-
hoverTarget?: HeatMapCommonProps<Datum>['hoverTarget']
140-
}) => {
141-
const [activeCell, setActiveCell] = useState<ComputedCell<Datum> | null>(null)
142-
143-
const { cells, xScale, yScale, minValue, maxValue } = useComputeCells<Datum, ExtraProps>({
144-
data,
145-
width,
146-
height,
147-
xOuterPadding,
148-
xInnerPadding,
149-
yOuterPadding,
150-
yInnerPadding,
151-
})
123+
activeIds: string[]
124+
} & Pick<
125+
HeatMapCommonProps<Datum>,
126+
| 'sizeVariation'
127+
| 'colors'
128+
| 'emptyColor'
129+
| 'opacity'
130+
| 'activeOpacity'
131+
| 'inactiveOpacity'
132+
| 'borderColor'
133+
| 'label'
134+
| 'labelTextColor'
135+
>) => {
136+
const getSize = useSizeScale(sizeVariation, minValue, maxValue)
152137

153138
const colorScale = useMemo(() => {
154139
if (typeof colors === 'function') return null
@@ -159,14 +144,6 @@ export const useHeatMap = <
159144
})
160145
}, [colors, minValue, maxValue])
161146

162-
const activeIds = useMemo(() => {
163-
if (!activeCell) return []
164-
165-
const isHoverTarget = isHoverTargetByType[hoverTarget]
166-
167-
return cells.filter(cell => isHoverTarget(cell, activeCell)).map(cell => cell.id)
168-
}, [cells, activeCell, hoverTarget])
169-
170147
const getColor = useCallback(
171148
(cell: Omit<ComputedCell<Datum>, 'color' | 'opacity' | 'borderColor'>) => {
172149
if (cell.value !== null) {
@@ -178,14 +155,14 @@ export const useHeatMap = <
178155
},
179156
[colors, colorScale, emptyColor]
180157
)
181-
const getSize = useSizeScale(sizeVariation, minValue, maxValue)
182158
const theme = useTheme()
183159
const getBorderColor = useInheritedColor(borderColor, theme)
184160
const getLabelTextColor = useInheritedColor(labelTextColor, theme)
161+
185162
const formatValue = useValueFormatter(valueFormat)
186163
const getLabel = usePropertyAccessor(label)
187164

188-
const computedCells = useMemo(
165+
const styledCells = useMemo(
189166
() =>
190167
cells.map(cell => {
191168
let computedOpacity = opacity
@@ -226,53 +203,111 @@ export const useHeatMap = <
226203
)
227204

228205
return {
229-
cells: computedCells,
230-
xScale,
231-
yScale,
206+
cells: styledCells,
232207
colorScale,
233-
activeCell,
234-
setActiveCell,
235208
}
209+
}
236210

237-
/*
238-
const layoutConfig = useMemo(() => {
239-
const columns = keys.length
240-
const rows = data.length
211+
export const useHeatMap = <
212+
Datum extends HeatMapDatum = DefaultHeatMapDatum,
213+
ExtraProps extends object = Record<string, never>
214+
>({
215+
data,
216+
valueFormat,
217+
width: _width,
218+
height: _height,
219+
xOuterPadding = commonDefaultProps.xOuterPadding,
220+
xInnerPadding = commonDefaultProps.xInnerPadding,
221+
yOuterPadding = commonDefaultProps.yOuterPadding,
222+
yInnerPadding = commonDefaultProps.yInnerPadding,
223+
forceSquare = commonDefaultProps.forceSquare,
224+
sizeVariation = commonDefaultProps.sizeVariation,
225+
colors = commonDefaultProps.colors as HeatMapCommonProps<Datum>['colors'],
226+
emptyColor = commonDefaultProps.emptyColor,
227+
opacity = commonDefaultProps.opacity,
228+
activeOpacity = commonDefaultProps.activeOpacity,
229+
inactiveOpacity = commonDefaultProps.inactiveOpacity,
230+
borderColor = commonDefaultProps.borderColor as HeatMapCommonProps<Datum>['borderColor'],
231+
label = commonDefaultProps.label as HeatMapCommonProps<Datum>['label'],
232+
labelTextColor = commonDefaultProps.labelTextColor as HeatMapCommonProps<Datum>['labelTextColor'],
233+
hoverTarget = commonDefaultProps.hoverTarget,
234+
}: {
235+
data: HeatMapDataProps<Datum, ExtraProps>['data']
236+
width: number
237+
height: number
238+
} & Partial<
239+
Pick<
240+
HeatMapCommonProps<Datum>,
241+
| 'valueFormat'
242+
| 'xOuterPadding'
243+
| 'xInnerPadding'
244+
| 'yOuterPadding'
245+
| 'yInnerPadding'
246+
| 'forceSquare'
247+
| 'sizeVariation'
248+
| 'colors'
249+
| 'emptyColor'
250+
| 'opacity'
251+
| 'activeOpacity'
252+
| 'inactiveOpacity'
253+
| 'borderColor'
254+
| 'label'
255+
| 'labelTextColor'
256+
| 'hoverTarget'
257+
>
258+
>) => {
259+
const [activeCell, setActiveCell] = useState<ComputedCell<Datum> | null>(null)
241260

242-
let cellWidth = Math.max((width - padding * (columns + 1)) / columns, 0)
243-
let cellHeight = Math.max((height - padding * (rows + 1)) / rows, 0)
261+
const { width, height, offsetX, offsetY, cells, xScale, yScale, minValue, maxValue } =
262+
useComputeCells<Datum, ExtraProps>({
263+
data,
264+
width: _width,
265+
height: _height,
266+
xOuterPadding,
267+
xInnerPadding,
268+
yOuterPadding,
269+
yInnerPadding,
270+
forceSquare,
271+
})
244272

245-
let offsetX = 0
246-
let offsetY = 0
247-
if (forceSquare === true) {
248-
const cellSize = Math.min(cellWidth, cellHeight)
249-
cellWidth = cellSize
250-
cellHeight = cellSize
273+
const activeIds = useMemo(() => {
274+
if (!activeCell) return []
251275

252-
offsetX = (width - ((cellWidth + padding) * columns + padding)) / 2
253-
offsetY = (height - ((cellHeight + padding) * rows + padding)) / 2
254-
}
276+
const isHoverTarget = isHoverTargetByType[hoverTarget]
255277

256-
return {
257-
cellWidth,
258-
cellHeight,
259-
offsetX,
260-
offsetY,
261-
}
262-
}, [data, keys, width, height, padding, forceSquare])
263-
*/
264-
}
278+
return cells.filter(cell => isHoverTarget(cell, activeCell)).map(cell => cell.id)
279+
}, [cells, activeCell, hoverTarget])
265280

266-
const getCellAnnotationPosition = <Datum extends HeatMapDatum>(cell: ComputedCell<Datum>) => ({
267-
x: cell.x,
268-
y: cell.y,
269-
})
281+
const { cells: computedCells, colorScale } = useCellsStyle<Datum>({
282+
cells,
283+
minValue,
284+
maxValue,
285+
sizeVariation,
286+
colors,
287+
emptyColor,
288+
opacity,
289+
activeOpacity,
290+
inactiveOpacity,
291+
borderColor,
292+
label,
293+
labelTextColor,
294+
valueFormat,
295+
activeIds,
296+
})
270297

271-
const getCellAnnotationDimensions = <Datum extends HeatMapDatum>(cell: ComputedCell<Datum>) => ({
272-
size: Math.max(cell.width, cell.height),
273-
width: cell.width,
274-
height: cell.height,
275-
})
298+
return {
299+
width,
300+
height,
301+
offsetX,
302+
offsetY,
303+
cells: computedCells,
304+
xScale,
305+
yScale,
306+
colorScale,
307+
activeCell,
308+
setActiveCell,
309+
}
310+
}
276311

277312
export const useCellAnnotations = <Datum extends HeatMapDatum>(
278313
cells: ComputedCell<Datum>[],

‎packages/heatmap/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ export * from './ResponsiveHeatMapCanvas'
55
export * from './hooks'
66
export * from './defaults'
77
export * from './types'
8+
export * from './compute'

0 commit comments

Comments
 (0)
Please sign in to comment.