/
types.ts
140 lines (111 loc) · 3.65 KB
/
types.ts
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import { Arc } from 'd3-shape'
import { HierarchyRectangularNode } from 'd3-hierarchy'
import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
import { Theme, Dimensions, Box, DataFormatter } from '@nivo/core'
import { DefaultSunburstProps } from './props'
type NameAndColor = {
color: string
}
type DataLocation<Datum extends Record<string, unknown>> = NameAndColor & Datum
type DataChildren<Datum extends Record<string, unknown>> = NameAndColor & {
children: DataChildren<Datum>[] | DataLocation<Datum>[]
}
export type Data<Datum extends Record<string, unknown>> = NameAndColor & DataChildren<Datum>
export type SunburstNodeOld = {
data: {
id: string
color: string
}
depth: number
x0: number
x1: number
y0: number
y1: number
}
type ComputedNode<Datum extends Record<string, unknown> = any> = HierarchyRectangularNode<
DataChildren<Datum>
>
export type SunburstNode<Datum extends Record<string, unknown> = any> = Omit<
ComputedNode<Datum>,
'children' | 'data'
> & {
data: {
color: string
id: string
value: number
percentage: number
depth: number
}
}
type CommonSunburstProps = {
identity: string | ((node: ComputedNode['data']) => string)
value: string | ((node: ComputedNode['data']) => number)
margin: Box
cornerRadius: number
colors: OrdinalColorScaleConfig<Omit<SunburstNode['data'], 'color'>>
borderWidth: number
borderColor: string
childColor: InheritedColorConfig<SunburstNode['data']>
// slices labels
enableSliceLabels: boolean
sliceLabel: string | ((node: ComputedNode['data']) => string)
sliceLabelsSkipAngle: number
sliceLabelsTextColor: InheritedColorConfig<SunburstNode['data']>
role: string
theme: Theme
isInteractive: boolean
tooltipFormat: DataFormatter
tooltip: (payload: SunburstNode['data']) => JSX.Element
onClick: (
payload: SunburstNode['data'],
event: React.MouseEvent<SVGPathElement, MouseEvent>
) => void
onMouseEnter: (
payload: SunburstNode['data'],
event: React.MouseEvent<SVGPathElement, MouseEvent>
) => void
onMouseLeave: (
payload: SunburstNode['data'],
event: React.MouseEvent<SVGPathElement, MouseEvent>
) => void
}
type ComputedSunburstProps = {
identity: string | ((node: SunburstNode['data']) => string)
getIdentity: (node: SunburstNode['data']) => string // computed
getValue: (node: SunburstNode['data']) => number // computed
nodes: SunburstNode[] // computed
partition: any // computed
// arcGenerator: (node: SunburstNode) => string // computed
arcGenerator: Arc<any, SunburstNode<any>>
radius: number // computed
centerX: number // computed
centerY: number // computed
outerWidth: number
outerHeight: number
getColor: (payload: unknown) => string
getChildColor: (payload: unknown) => string
getSliceLabel: (node: SunburstNode['data']) => string
}
export type SunburstSvgProps<Datum extends Record<string, unknown>> = Dimensions &
DefaultSunburstProps &
Partial<CommonSunburstProps> & {
data: Data<Datum>
}
export type SunburstArcProps = Pick<
SunburstSvgProps<any>,
| 'tooltip'
| 'tooltipFormat'
| 'onClick'
| 'onMouseEnter'
| 'onMouseLeave'
| 'borderWidth'
| 'borderColor'
> &
Pick<ComputedSunburstProps, 'arcGenerator'> & {
node: SunburstNode
}
export type SunburstLabelProps = Pick<ComputedSunburstProps, 'nodes'> & {
label: ComputedSunburstProps['getSliceLabel']
skipAngle?: number
textColor: CommonSunburstProps['sliceLabelsTextColor']
}