1 | import * as React from 'react'
|
2 | import { Interpolation, SpringConfig } from '@react-spring/web'
|
3 | import { CurveFactory } from 'd3-shape'
|
4 | import { ComponentType } from 'react'
|
5 |
|
6 | export type DatumValue = string | number | Date
|
7 |
|
8 | export interface Dimensions {
|
9 | height: number
|
10 | width: number
|
11 | }
|
12 |
|
13 | export interface Point {
|
14 | x: number
|
15 | y: number
|
16 | }
|
17 |
|
18 | export interface AlignBox extends Dimensions, Point {}
|
19 |
|
20 | export type Margin = {
|
21 | bottom: number
|
22 | left: number
|
23 | right: number
|
24 | top: number
|
25 | }
|
26 |
|
27 | export type Box = Partial<Margin>
|
28 | export type BoxAlign =
|
29 | | 'center'
|
30 | | 'top-left'
|
31 | | 'top'
|
32 | | 'top-right'
|
33 | | 'right'
|
34 | | 'bottom-right'
|
35 | | 'bottom'
|
36 | | 'bottom-left'
|
37 | | 'left'
|
38 | export const boxAlignments: BoxAlign[]
|
39 | export function alignBox(box: AlignBox, container: AlignBox, alignment: BoxAlign): [number, number]
|
40 |
|
41 | export type GetColor<T> = (datum: T) => string
|
42 | export type Colors = string[] | string
|
43 | export interface ColorProps<T> {
|
44 | colors?: Colors
|
45 | colorBy?: string | GetColor<T>
|
46 | }
|
47 |
|
48 | export type CompleteTheme = {
|
49 | crosshair: {
|
50 | line: {
|
51 | stroke: string
|
52 | strokeWidth: number
|
53 | strokeOpacity: number
|
54 | strokeDasharray: string
|
55 | }
|
56 | }
|
57 | background: string
|
58 | fontFamily: string
|
59 | fontSize: number
|
60 | textColor: string
|
61 | axis: {
|
62 | domain: {
|
63 | line: Partial<React.CSSProperties>
|
64 | }
|
65 | ticks: {
|
66 | line: Partial<React.CSSProperties>
|
67 | text: Partial<React.CSSProperties>
|
68 | }
|
69 | legend: {
|
70 | text: Partial<React.CSSProperties>
|
71 | }
|
72 | }
|
73 | grid: {
|
74 | line: Partial<React.CSSProperties>
|
75 | }
|
76 | legends: {
|
77 | hidden: {
|
78 | symbol: Partial<{
|
79 | fill: string
|
80 | opacity: number
|
81 | }>
|
82 | text: Partial<React.CSSProperties>
|
83 | }
|
84 | title: {
|
85 | text: Partial<React.CSSProperties>
|
86 | }
|
87 | text: Partial<React.CSSProperties>
|
88 | ticks: {
|
89 | line: Partial<React.CSSProperties>
|
90 | text: Partial<React.CSSProperties>
|
91 | }
|
92 | }
|
93 | labels: {
|
94 | text: Partial<React.CSSProperties>
|
95 | }
|
96 | markers: {
|
97 | lineColor: string
|
98 | lineStrokeWidth: number
|
99 | textColor: string
|
100 | fontSize: string | 0
|
101 | text: Partial<React.CSSProperties>
|
102 | }
|
103 | dots: {
|
104 | text: Partial<React.CSSProperties>
|
105 | }
|
106 | tooltip: {
|
107 | container: Partial<React.CSSProperties>
|
108 | basic: Partial<React.CSSProperties>
|
109 | chip: Partial<React.CSSProperties>
|
110 | table: Partial<React.CSSProperties>
|
111 | tableCell: Partial<React.CSSProperties>
|
112 | tableCellValue: Partial<React.CSSProperties>
|
113 | }
|
114 | annotations: {
|
115 | text: {
|
116 | fill: string
|
117 | outlineWidth: number
|
118 | outlineColor: string
|
119 | outlineOpacity: number
|
120 | } & Partial<Omit<React.CSSProperties, 'fill'>>
|
121 | link: {
|
122 | stroke: string
|
123 | strokeWidth: number
|
124 | outlineWidth: number
|
125 | outlineColor: string
|
126 | outlineOpacity: number
|
127 | } & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>
|
128 | outline: {
|
129 | stroke: string
|
130 | strokeWidth: number
|
131 | outlineWidth: number
|
132 | outlineColor: string
|
133 | outlineOpacity: number
|
134 | } & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>
|
135 | symbol: {
|
136 | fill: string
|
137 | outlineWidth: number
|
138 | outlineColor: string
|
139 | outlineOpacity: number
|
140 | } & Partial<Omit<React.CSSProperties, 'fill'>>
|
141 | }
|
142 | }
|
143 |
|
144 | export type Theme = Partial<
|
145 | Pick<CompleteTheme, 'background' | 'fontFamily' | 'fontSize' | 'textColor'> & {
|
146 | crosshair: Partial<{
|
147 | line: Partial<CompleteTheme['crosshair']['line']>
|
148 | }>
|
149 | axis: Partial<{
|
150 | domain: Partial<{
|
151 | line: Partial<CompleteTheme['axis']['domain']['line']>
|
152 | }>
|
153 | ticks: Partial<{
|
154 | line: Partial<CompleteTheme['axis']['ticks']['line']>
|
155 | text: Partial<CompleteTheme['axis']['ticks']['text']>
|
156 | }>
|
157 | legend: Partial<{
|
158 | text: Partial<CompleteTheme['axis']['legend']['text']>
|
159 | }>
|
160 | }>
|
161 | grid: Partial<{
|
162 | line: Partial<CompleteTheme['grid']['line']>
|
163 | }>
|
164 | legends: Partial<{
|
165 | hidden: Partial<{
|
166 | symbol: CompleteTheme['legends']['hidden']['symbol']
|
167 | text: CompleteTheme['legends']['hidden']['text']
|
168 | }>
|
169 | title: Partial<{
|
170 | text: Partial<CompleteTheme['legends']['title']['text']>
|
171 | }>
|
172 | text: Partial<CompleteTheme['legends']['text']>
|
173 | ticks: Partial<{
|
174 | line: Partial<CompleteTheme['legends']['ticks']['line']>
|
175 | text: Partial<CompleteTheme['legends']['ticks']['text']>
|
176 | }>
|
177 | }>
|
178 | labels: Partial<{
|
179 | text: Partial<CompleteTheme['labels']['text']>
|
180 | }>
|
181 | markers: Partial<CompleteTheme['markers']>
|
182 | dots: Partial<{
|
183 | text: Partial<CompleteTheme['dots']['text']>
|
184 | }>
|
185 | tooltip: Partial<CompleteTheme['tooltip']>
|
186 | annotations: Partial<{
|
187 | text: Partial<CompleteTheme['annotations']['text']>
|
188 | link: Partial<CompleteTheme['annotations']['link']>
|
189 | outline: Partial<CompleteTheme['annotations']['outline']>
|
190 | symbol: Partial<CompleteTheme['annotations']['symbol']>
|
191 | }>
|
192 | }
|
193 | >
|
194 |
|
195 | export function useTheme(): CompleteTheme
|
196 | export function usePartialTheme(theme?: Theme): CompleteTheme
|
197 |
|
198 | export type MotionProps = Partial<{
|
199 | animate: boolean
|
200 | motionConfig: string | SpringConfig
|
201 | }>
|
202 |
|
203 | export function useMotionConfig(): {
|
204 | animate: boolean
|
205 | config: SpringConfig
|
206 | }
|
207 |
|
208 | export type SvgFillMatcher<T> = (datum: T) => boolean
|
209 | export interface SvgDefsAndFill<T> {
|
210 | defs?: {
|
211 | id: string
|
212 | [key: string]: any
|
213 | }[]
|
214 | fill?: { id: string; match: Record<string, unknown> | SvgFillMatcher<T> | '*' }[]
|
215 | }
|
216 |
|
217 | export type CssMixBlendMode =
|
218 | | 'normal'
|
219 | | 'multiply'
|
220 | | 'screen'
|
221 | | 'overlay'
|
222 | | 'darken'
|
223 | | 'lighten'
|
224 | | 'color-dodge'
|
225 | | 'color-burn'
|
226 | | 'hard-light'
|
227 | | 'soft-light'
|
228 | | 'difference'
|
229 | | 'exclusion'
|
230 | | 'hue'
|
231 | | 'saturation'
|
232 | | 'color'
|
233 | | 'luminosity'
|
234 |
|
235 | export type StackOrder = 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse'
|
236 |
|
237 | export type StackOffset = 'expand' | 'diverging' | 'none' | 'silhouette' | 'wiggle'
|
238 |
|
239 | export type AreaCurve =
|
240 | | 'basis'
|
241 | | 'cardinal'
|
242 | | 'catmullRom'
|
243 | | 'linear'
|
244 | | 'monotoneX'
|
245 | | 'monotoneY'
|
246 | | 'natural'
|
247 | | 'step'
|
248 | | 'stepAfter'
|
249 | | 'stepBefore'
|
250 |
|
251 | export function useAnimatedPath(path: string): Interpolation<string>
|
252 |
|
253 | // ------------------------------------------------------------------------
|
254 | // Patterns & Gradients
|
255 | // ------------------------------------------------------------------------
|
256 |
|
257 | export type GradientColor = {
|
258 | offset: number
|
259 | color: string
|
260 | opacity?: number
|
261 | }
|
262 |
|
263 | export function linearGradientDef(
|
264 | id: string,
|
265 | colors: GradientColor[],
|
266 | options?: React.SVGProps<SVGLinearGradientElement>
|
267 | ): {
|
268 | id: string
|
269 | type: 'linearGradient'
|
270 | colors: GradientColor[]
|
271 | } & React.SVGProps<SVGLinearGradientElement>
|
272 |
|
273 | export type LinearGradientDef = {
|
274 | id: string
|
275 | type: 'linearGradient'
|
276 | colors: {
|
277 | offset: number
|
278 | color: string
|
279 | opacity?: number
|
280 | }[]
|
281 | gradientTransform?: string
|
282 | }
|
283 |
|
284 | export type PatternDotsDef = {
|
285 | id: string
|
286 | type: 'patternDots'
|
287 | color?: string
|
288 | background?: string
|
289 | size?: number
|
290 | padding?: number
|
291 | stagger?: boolean
|
292 | }
|
293 | export function patternDotsDef(
|
294 | id: string,
|
295 | options?: Omit<PatternDotsDef, 'id' | 'type'>
|
296 | ): PatternDotsDef
|
297 | export function PatternDots(props: Omit<PatternDotsDef, 'type'>): JSX.Element
|
298 |
|
299 | export type PatternSquaresDef = Omit<PatternDotsDef, 'type'> & {
|
300 | type: 'patternSquares'
|
301 | }
|
302 | export function patternSquaresDef(
|
303 | id: string,
|
304 | options?: Omit<PatternSquaresDef, 'id' | 'type'>
|
305 | ): PatternSquaresDef
|
306 | export function PatternSquares(props: Omit<PatternSquaresDef, 'type'>): JSX.Element
|
307 |
|
308 | export type PatternLinesDef = {
|
309 | id: string
|
310 | type: 'patternLines'
|
311 | spacing?: number
|
312 | rotation?: number
|
313 | background?: string
|
314 | color?: string
|
315 | lineWidth?: number
|
316 | }
|
317 | export function patternLinesDef(
|
318 | id: string,
|
319 | options?: Omit<PatternLinesDef, 'id' | 'type'>
|
320 | ): PatternLinesDef
|
321 | export function PatternLines(props: Omit<PatternLinesDef, 'type'>): JSX.Element
|
322 |
|
323 | export type Def = LinearGradientDef | PatternDotsDef | PatternSquaresDef | PatternLinesDef
|
324 |
|
325 | export type DefsProps = {
|
326 | defs: Def[]
|
327 | }
|
328 |
|
329 | export function Defs(props: DefsProps): JSX.Element
|
330 |
|
331 | // ------------------------------------------------------------------------
|
332 | // Motion
|
333 | // ------------------------------------------------------------------------
|
334 |
|
335 | export const defaultAnimate = true
|
336 |
|
337 | type MotionDefaultProps = {
|
338 | animate: true
|
339 | config: 'default'
|
340 | }
|
341 | export const motionDefaultProps: MotionDefaultProps
|
342 |
|
343 | type DefaultMargin = {
|
344 | top: 0
|
345 | right: 0
|
346 | bottom: 0
|
347 | left: 0
|
348 | }
|
349 | export const defaultMargin: DefaultMargin
|
350 |
|
351 | export function degreesToRadians(degrees: number): number
|
352 | export function radiansToDegrees(radians: number): number
|
353 | export function absoluteAngleDegrees(degrees: number): number
|
354 | export function normalizeAngle(degrees: number): number
|
355 | export function clampArc(startAngle: number, endAngle: number, length?: number): [number, number]
|
356 |
|
357 | type Accessor<T extends keyof U, U> = T extends string ? U[T] : never
|
358 |
|
359 | export type DatumPropertyAccessor<RawDatum, T> = (datum: RawDatum) => T
|
360 |
|
361 | export function useDimensions(
|
362 | width: number,
|
363 | height: number,
|
364 | margin?: Box
|
365 | ): {
|
366 | margin: Margin
|
367 | innerWidth: number
|
368 | innerHeight: number
|
369 | outerWidth: number
|
370 | outerHeight: number
|
371 | }
|
372 |
|
373 | export function useMeasure(): [
|
374 | React.RefObject<HTMLDivElement>,
|
375 | { left: number; top: number; width: number; height: number }
|
376 | ]
|
377 |
|
378 | type SvgWrapperType = (
|
379 | props: React.PropsWithChildren<{
|
380 | width: number
|
381 | height: number
|
382 | margin: Margin
|
383 | defs?: any
|
384 | role?: string
|
385 | ariaLabel?: React.AriaAttributes['aria-label']
|
386 | ariaLabelledBy?: React.AriaAttributes['aria-labelledby']
|
387 | ariaDescribedBy?: React.AriaAttributes['aria-describedby']
|
388 | isFocusable?: boolean
|
389 | }>
|
390 | ) => JSX.Element
|
391 | export const SvgWrapper: SvgWrapperType
|
392 |
|
393 | interface ContainerProps {
|
394 | theme?: Theme
|
395 | renderWrapper?: boolean
|
396 | isInteractive?: boolean
|
397 | animate?: boolean
|
398 | motionConfig?: string | SpringConfig
|
399 | }
|
400 | type ContainerType = (props: React.PropsWithChildren<ContainerProps>) => JSX.Element
|
401 | export const Container: ContainerType
|
402 |
|
403 | type ResponsiveWrapperType = (props: {
|
404 | children: (dimensions: { width: number; height: number }) => JSX.Element
|
405 | }) => JSX.Element
|
406 | export const ResponsiveWrapper: ResponsiveWrapperType
|
407 |
|
408 | interface ThemeProviderProps {
|
409 | theme?: Theme
|
410 | }
|
411 |
|
412 | type ThemeProviderType = (props: React.PropsWithChildren<ThemeProviderProps>) => JSX.Element
|
413 | export const ThemeProvider: ThemeProviderType
|
414 |
|
415 | export function getDistance(x1: number, y1: number, x2: number, y2: number): number
|
416 | export function getAngle(x1: number, y1: number, x2: number, y2: number): number
|
417 |
|
418 | export function positionFromAngle(
|
419 | angle: number,
|
420 | distance: number
|
421 | ): {
|
422 | x: number
|
423 | y: number
|
424 | }
|
425 |
|
426 | export type ValueFormat<Value, Context = void> =
|
427 | | string // d3 formatter
|
428 | // explicit formatting function
|
429 | | (Context extends void ? (value: Value) => string : (value: Value, context: Context) => string)
|
430 | export function getValueFormatter<Value, Context = void>(
|
431 | format?: ValueFormat<Value, Context>
|
432 | ): Context extends void ? (value: Value) => string : (value: Value, context: Context) => string
|
433 | export function useValueFormatter<Value, Context = void>(
|
434 | format?: ValueFormat<Value, Context>
|
435 | ): Context extends void ? (value: Value) => string : (value: Value, context: Context) => string
|
436 |
|
437 | export type PropertyAccessor<Datum, Value> =
|
438 | // path to use with `lodash.get()`
|
439 | | string
|
440 | // explicit accessor function
|
441 | | ((datum: Datum) => Value)
|
442 | export function getPropertyAccessor<Datum, Value>(
|
443 | accessor: PropertyAccessor<Datum, Value>
|
444 | ): (datum: Datum) => Value
|
445 | export function usePropertyAccessor<Datum, Value>(
|
446 | accessor: PropertyAccessor<Datum, Value>
|
447 | ): (datum: Datum) => Value
|
448 |
|
449 | export function getRelativeCursor(element: Element, event: React.MouseEvent): [number, number]
|
450 | export function isCursorInRect(
|
451 | x: number,
|
452 | y: number,
|
453 | width: number,
|
454 | height: number,
|
455 | cursorX: number,
|
456 | cursorY: number
|
457 | ): boolean
|
458 |
|
459 | export interface CartesianMarkerProps<V extends DatumValue = DatumValue> {
|
460 | axis: 'x' | 'y'
|
461 | value: V
|
462 | legend?: string
|
463 | legendOrientation?: 'horizontal' | 'vertical'
|
464 | legendPosition?: BoxAlign
|
465 | lineStyle?: Partial<React.CSSProperties>
|
466 | textStyle?: Partial<React.CSSProperties>
|
467 | }
|
468 | interface CartesianMarkersProps<
|
469 | X extends DatumValue = DatumValue,
|
470 | Y extends DatumValue = DatumValue
|
471 | > {
|
472 | width: number
|
473 | height: number
|
474 | xScale: (value: X) => number
|
475 | yScale: (value: Y) => number
|
476 | markers: CartesianMarkerProps<X | Y>[]
|
477 | }
|
478 | type CartesianMarkersType = <X extends DatumValue = DatumValue, Y extends DatumValue = DatumValue>(
|
479 | props: CartesianMarkersProps<X, Y>
|
480 | ) => JSX.Element
|
481 | export const CartesianMarkers: CartesianMarkersType
|
482 |
|
483 | export type CurveFactoryId =
|
484 | | 'basis'
|
485 | | 'basisClosed'
|
486 | | 'basisOpen'
|
487 | | 'bundle'
|
488 | | 'cardinal'
|
489 | | 'cardinalClosed'
|
490 | | 'cardinalOpen'
|
491 | | 'catmullRom'
|
492 | | 'catmullRomClosed'
|
493 | | 'catmullRomOpen'
|
494 | | 'linear'
|
495 | | 'linearClosed'
|
496 | | 'monotoneX'
|
497 | | 'monotoneY'
|
498 | | 'natural'
|
499 | | 'step'
|
500 | | 'stepAfter'
|
501 | | 'stepBefore'
|
502 |
|
503 | // Curve factories compatible d3 line shape generator
|
504 | export type LineCurveFactoryId =
|
505 | | 'basis'
|
506 | | 'cardinal'
|
507 | | 'catmullRom'
|
508 | | 'linear'
|
509 | | 'monotoneX'
|
510 | | 'monotoneY'
|
511 | | 'natural'
|
512 | | 'step'
|
513 | | 'stepAfter'
|
514 | | 'stepBefore'
|
515 |
|
516 | // Curve factories compatible d3 area shape generator
|
517 | export type AreaCurveFactoryId =
|
518 | | 'basis'
|
519 | | 'cardinal'
|
520 | | 'catmullRom'
|
521 | | 'linear'
|
522 | | 'monotoneX'
|
523 | | 'monotoneY'
|
524 | | 'natural'
|
525 | | 'step'
|
526 | | 'stepAfter'
|
527 | | 'stepBefore'
|
528 |
|
529 | export type ClosedCurveFactoryId =
|
530 | | 'basisClosed'
|
531 | | 'cardinalClosed'
|
532 | | 'catmullRomClosed'
|
533 | | 'linearClosed'
|
534 | export const closedCurvePropKeys: ClosedCurveFactoryId[]
|
535 |
|
536 | export const curveFromProp: (interpolation: CurveFactoryId) => CurveFactory
|
537 |
|
538 | export const useCurveInterpolation: (interpolation: CurveFactoryId) => CurveFactory
|
539 |
|
540 | export interface DotsItemSymbolProps {
|
541 | size: number
|
542 | color: string
|
543 | borderWidth: number
|
544 | borderColor: string
|
545 | }
|
546 | export type DotsItemSymbolComponent = React.FunctionComponent<DotsItemSymbolProps>
|
547 |
|
548 | export interface DotsItemProps<D = any> {
|
549 | datum: D
|
550 | x: number
|
551 | y: number
|
552 | size: number
|
553 | color: string
|
554 | borderWidth: number
|
555 | borderColor: string
|
556 | label?: string | number
|
557 | labelTextAnchor?: 'start' | 'middle' | 'end'
|
558 | labelYOffset?: number
|
559 | symbol?: DotsItemSymbolComponent
|
560 | }
|
561 | export const DotsItem: React.FunctionComponent<DotsItemProps>
|
562 |
|
563 | export type ExtractProps<TComponent> = TComponent extends ComponentType<infer TProps>
|
564 | ? TProps
|
565 | : never
|
566 |
|
\ | No newline at end of file |