/
HeatMapCellCircle.tsx
64 lines (60 loc) · 2.05 KB
/
HeatMapCellCircle.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { memo, useMemo } from 'react'
import { animated, to } from '@react-spring/web'
import { useTheme } from '@nivo/core'
import { HeatMapDatum, CellComponentProps } from './types'
const NonMemoizedHeatMapCellCircle = <Datum extends HeatMapDatum>({
cell,
borderWidth,
animatedProps,
onMouseEnter,
onMouseMove,
onMouseLeave,
onClick,
enableLabels,
}: CellComponentProps<Datum>) => {
const theme = useTheme()
const handlers = useMemo(
() => ({
onMouseEnter: onMouseEnter ? onMouseEnter(cell) : undefined,
onMouseMove: onMouseMove ? onMouseMove(cell) : undefined,
onMouseLeave: onMouseLeave ? onMouseLeave(cell) : undefined,
onClick: onClick ? onClick(cell) : undefined,
}),
[cell, onMouseEnter, onMouseMove, onMouseLeave, onClick]
)
return (
<animated.g
style={{ cursor: 'pointer' }}
opacity={animatedProps.opacity}
{...handlers}
transform={to([animatedProps.x, animatedProps.y], (x, y) => `translate(${x}, ${y})`)}
>
<animated.circle
r={to(
[animatedProps.width, animatedProps.height],
(width, height) => Math.min(width, height) / 2
)}
fill={animatedProps.color}
fillOpacity={animatedProps.opacity}
strokeWidth={borderWidth}
stroke={animatedProps.borderColor}
/>
{enableLabels && (
<animated.text
dominantBaseline="central"
textAnchor="middle"
fill={animatedProps.labelTextColor}
style={{
...theme.labels.text,
fill: undefined,
}}
>
{cell.label}
</animated.text>
)}
</animated.g>
)
}
export const HeatMapCellCircle = memo(
NonMemoizedHeatMapCellCircle
) as typeof NonMemoizedHeatMapCellCircle