/
ArcLinkLabelsLayer.tsx
70 lines (67 loc) · 2.47 KB
/
ArcLinkLabelsLayer.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
65
66
67
68
69
70
import React from 'react'
import { animated } from 'react-spring'
import { useArcLinkLabelsTransition } from './useArcLinkLabelsTransition'
import { DatumWithArcAndColor } from '../types'
import { ArcLinkLabelsProps } from './props'
interface ArcLinkLabelsLayerProps<Datum extends DatumWithArcAndColor> {
center: [number, number]
data: Datum[]
label: ArcLinkLabelsProps<Datum, Datum>['arcLinkLabel']
skipAngle: ArcLinkLabelsProps<Datum, Datum>['arcLinkLabelsSkipAngle']
offset: ArcLinkLabelsProps<Datum, Datum>['arcLinkLabelsOffset']
diagonalLength: ArcLinkLabelsProps<Datum, Datum>['arcLinkLabelsDiagonalLength']
straightLength: ArcLinkLabelsProps<Datum, Datum>['arcLinkLabelsStraightLength']
strokeWidth: ArcLinkLabelsProps<Datum, Datum>['arcLinkLabelsThickness']
textOffset: ArcLinkLabelsProps<Datum, Datum>['arcLinkLabelsTextOffset']
textColor: ArcLinkLabelsProps<Datum, Datum>['arcLinkLabelsTextColor']
linkColor: ArcLinkLabelsProps<Datum, Datum>['arcLinkLabelsColor']
}
export const ArcLinkLabelsLayer = <Datum extends DatumWithArcAndColor>({
center,
data,
label,
skipAngle,
offset,
diagonalLength,
straightLength,
strokeWidth,
textOffset,
textColor,
linkColor,
}: ArcLinkLabelsLayerProps<Datum>) => {
const { transition, interpolateLink } = useArcLinkLabelsTransition<Datum>({
data,
label,
skipAngle,
offset,
diagonalLength,
straightLength,
textOffset,
linkColor,
textColor,
})
return (
<g transform={`translate(${center[0]},${center[1]})`}>
{transition((transitionProps, datum) => {
return (
<animated.path
key={datum.id}
fill="none"
stroke={transitionProps.linkColor}
strokeWidth={strokeWidth}
opacity={transitionProps.opacity}
d={interpolateLink(
transitionProps.startAngle,
transitionProps.endAngle,
transitionProps.innerRadius,
transitionProps.outerRadius,
transitionProps.offset,
transitionProps.diagonalLength,
transitionProps.straightLength
)}
/>
)
})}
</g>
)
}