/
types.ts
136 lines (120 loc) · 4.12 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
import * as React from 'react'
import { Interpolation, SpringValue } from 'react-spring'
import {
Box,
ModernMotionProps,
Theme,
PropertyAccessor,
ValueFormat,
SvgDefsAndFill,
} from '@nivo/core'
import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
export interface ComputedDatum<RawDatum> {
id: string
// contain own id plus all ancestor ids
path: string[]
value: number
percentage: number
formattedValue: string
x: number
y: number
radius: number
color: string
// defined when using patterns or gradients
fill?: string
// contains the raw node's data
data: RawDatum
depth: number
height: number
parent?: ComputedDatum<RawDatum>
}
export type CirclePackingLayerId = 'circles' | 'labels'
export interface CirclePackingCustomLayerProps<RawDatum> {
nodes: ComputedDatum<RawDatum>[]
}
export type CirclePackingCustomLayer<RawDatum> = React.FC<CirclePackingCustomLayerProps<RawDatum>>
export type CirclePackingLayer<RawDatum> = CirclePackingLayerId | CirclePackingCustomLayer<RawDatum>
export type MouseHandler<RawDatum> = (
datum: ComputedDatum<RawDatum>,
event: React.MouseEvent
) => void
export type MouseHandlers<RawDatum> = {
onClick?: MouseHandler<RawDatum>
onMouseEnter?: MouseHandler<RawDatum>
onMouseMove?: MouseHandler<RawDatum>
onMouseLeave?: MouseHandler<RawDatum>
}
export interface CirclePackingCommonProps<RawDatum> {
data: RawDatum
id: PropertyAccessor<RawDatum, string>
value: PropertyAccessor<RawDatum, number>
valueFormat?: ValueFormat<number>
width: number
height: number
margin?: Box
padding: number
leavesOnly: boolean
theme?: Theme
colors: OrdinalColorScaleConfig<Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>>
colorBy: 'id' | 'depth'
inheritColorFromParent: boolean
// used if `inheritColorFromParent` is `true`
childColor: InheritedColorConfig<ComputedDatum<RawDatum>>
borderWidth: number
borderColor: InheritedColorConfig<ComputedDatum<RawDatum>>
circleComponent: CircleComponent<RawDatum>
enableLabels: boolean
label: PropertyAccessor<ComputedDatum<RawDatum>, string>
labelsFilter?: (label: ComputedLabel<RawDatum>) => boolean
labelsSkipRadius: number
labelTextColor: InheritedColorConfig<ComputedDatum<RawDatum>>
labelComponent: LabelComponent<RawDatum>
layers: CirclePackingLayer<RawDatum>[]
isInteractive: boolean
tooltip: (props: ComputedDatum<RawDatum>) => JSX.Element
zoomedId?: string | null
animate: boolean
motionConfig: ModernMotionProps['motionConfig']
role: string
}
export type CirclePackingSvgProps<RawDatum> = CirclePackingCommonProps<RawDatum> &
MouseHandlers<RawDatum> &
SvgDefsAndFill<ComputedDatum<RawDatum>>
export type CirclePackingHtmlProps<RawDatum> = CirclePackingCommonProps<RawDatum> &
MouseHandlers<RawDatum>
export type CirclePackingCanvasProps<RawDatum> = CirclePackingCommonProps<RawDatum> &
Pick<MouseHandlers<RawDatum>, 'onMouseMove' | 'onClick'> & {
pixelRatio: number
}
export type CircleProps<RawDatum> = {
node: ComputedDatum<RawDatum>
style: {
x: SpringValue<number>
y: SpringValue<number>
// using an interpolation to avoid negative values
radius: Interpolation<number>
color: SpringValue<string>
opacity: SpringValue<number>
borderWidth: number
borderColor: SpringValue<string>
}
} & MouseHandlers<RawDatum>
export type CircleComponent<RawDatum> = (props: CircleProps<RawDatum>) => JSX.Element
export interface ComputedLabel<RawDatum> {
label: string | number
textColor: string
node: ComputedDatum<RawDatum>
}
export interface LabelProps<RawDatum> {
node: ComputedDatum<RawDatum>
label: string | number
style: {
x: SpringValue<number>
y: SpringValue<number>
// using an interpolation to avoid negative values
radius: Interpolation<number>
textColor: SpringValue<string>
opacity: SpringValue<number>
}
}
export type LabelComponent<RawDatum> = (props: LabelProps<RawDatum>) => JSX.Element