@coinbase/cds-web-visualization 3.4.0-beta.2 → 3.4.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +115 -0
- package/dts/chart/CartesianChart.d.ts +56 -3
- package/dts/chart/CartesianChart.d.ts.map +1 -1
- package/dts/chart/ChartProvider.d.ts +3 -0
- package/dts/chart/ChartProvider.d.ts.map +1 -1
- package/dts/chart/Path.d.ts +64 -7
- package/dts/chart/Path.d.ts.map +1 -1
- package/dts/chart/PeriodSelector.d.ts +5 -15
- package/dts/chart/PeriodSelector.d.ts.map +1 -1
- package/dts/chart/area/Area.d.ts +50 -25
- package/dts/chart/area/Area.d.ts.map +1 -1
- package/dts/chart/area/AreaChart.d.ts +46 -6
- package/dts/chart/area/AreaChart.d.ts.map +1 -1
- package/dts/chart/area/DottedArea.d.ts +21 -44
- package/dts/chart/area/DottedArea.d.ts.map +1 -1
- package/dts/chart/area/GradientArea.d.ts +21 -12
- package/dts/chart/area/GradientArea.d.ts.map +1 -1
- package/dts/chart/area/SolidArea.d.ts +16 -1
- package/dts/chart/area/SolidArea.d.ts.map +1 -1
- package/dts/chart/axis/Axis.d.ts +109 -63
- package/dts/chart/axis/Axis.d.ts.map +1 -1
- package/dts/chart/axis/DefaultAxisTickLabel.d.ts +8 -0
- package/dts/chart/axis/DefaultAxisTickLabel.d.ts.map +1 -0
- package/dts/chart/axis/XAxis.d.ts +1 -1
- package/dts/chart/axis/XAxis.d.ts.map +1 -1
- package/dts/chart/axis/YAxis.d.ts +2 -2
- package/dts/chart/axis/YAxis.d.ts.map +1 -1
- package/dts/chart/axis/index.d.ts +1 -0
- package/dts/chart/axis/index.d.ts.map +1 -1
- package/dts/chart/bar/Bar.d.ts +50 -12
- package/dts/chart/bar/Bar.d.ts.map +1 -1
- package/dts/chart/bar/BarChart.d.ts +20 -8
- package/dts/chart/bar/BarChart.d.ts.map +1 -1
- package/dts/chart/bar/BarPlot.d.ts +3 -1
- package/dts/chart/bar/BarPlot.d.ts.map +1 -1
- package/dts/chart/bar/BarStack.d.ts +41 -46
- package/dts/chart/bar/BarStack.d.ts.map +1 -1
- package/dts/chart/bar/BarStackGroup.d.ts +2 -0
- package/dts/chart/bar/BarStackGroup.d.ts.map +1 -1
- package/dts/chart/bar/DefaultBar.d.ts.map +1 -1
- package/dts/chart/bar/DefaultBarStack.d.ts.map +1 -1
- package/dts/chart/gradient/Gradient.d.ts +35 -0
- package/dts/chart/gradient/Gradient.d.ts.map +1 -0
- package/dts/chart/gradient/index.d.ts +2 -0
- package/dts/chart/gradient/index.d.ts.map +1 -0
- package/dts/chart/index.d.ts +3 -1
- package/dts/chart/index.d.ts.map +1 -1
- package/dts/chart/legend/DefaultLegendEntry.d.ts +21 -0
- package/dts/chart/legend/DefaultLegendEntry.d.ts.map +1 -0
- package/dts/chart/legend/DefaultLegendShape.d.ts +7 -0
- package/dts/chart/legend/DefaultLegendShape.d.ts.map +1 -0
- package/dts/chart/legend/Legend.d.ts +169 -0
- package/dts/chart/legend/Legend.d.ts.map +1 -0
- package/dts/chart/legend/index.d.ts +4 -0
- package/dts/chart/legend/index.d.ts.map +1 -0
- package/dts/chart/line/DefaultReferenceLineLabel.d.ts +9 -0
- package/dts/chart/line/DefaultReferenceLineLabel.d.ts.map +1 -0
- package/dts/chart/line/DottedLine.d.ts +15 -3
- package/dts/chart/line/DottedLine.d.ts.map +1 -1
- package/dts/chart/line/Line.d.ts +84 -28
- package/dts/chart/line/Line.d.ts.map +1 -1
- package/dts/chart/line/LineChart.d.ts +28 -8
- package/dts/chart/line/LineChart.d.ts.map +1 -1
- package/dts/chart/line/ReferenceLine.d.ts +91 -44
- package/dts/chart/line/ReferenceLine.d.ts.map +1 -1
- package/dts/chart/line/SolidLine.d.ts +14 -3
- package/dts/chart/line/SolidLine.d.ts.map +1 -1
- package/dts/chart/line/index.d.ts +1 -1
- package/dts/chart/line/index.d.ts.map +1 -1
- package/dts/chart/point/DefaultPointLabel.d.ts +10 -0
- package/dts/chart/point/DefaultPointLabel.d.ts.map +1 -0
- package/dts/chart/point/Point.d.ts +217 -0
- package/dts/chart/point/Point.d.ts.map +1 -0
- package/dts/chart/point/index.d.ts +3 -0
- package/dts/chart/point/index.d.ts.map +1 -0
- package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts +41 -0
- package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map +1 -0
- package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts +12 -0
- package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts.map +1 -0
- package/dts/chart/scrubber/DefaultScrubberLabel.d.ts +10 -0
- package/dts/chart/scrubber/DefaultScrubberLabel.d.ts.map +1 -0
- package/dts/chart/scrubber/Scrubber.d.ts +287 -70
- package/dts/chart/scrubber/Scrubber.d.ts.map +1 -1
- package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts +80 -0
- package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts.map +1 -0
- package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts +47 -0
- package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map +1 -0
- package/dts/chart/scrubber/index.d.ts +3 -0
- package/dts/chart/scrubber/index.d.ts.map +1 -1
- package/dts/chart/text/ChartText.d.ts +46 -43
- package/dts/chart/text/ChartText.d.ts.map +1 -1
- package/dts/chart/text/{SmartChartTextGroup.d.ts → ChartTextGroup.d.ts} +9 -3
- package/dts/chart/text/ChartTextGroup.d.ts.map +1 -0
- package/dts/chart/text/index.d.ts +1 -1
- package/dts/chart/text/index.d.ts.map +1 -1
- package/dts/chart/utils/axis.d.ts +25 -1
- package/dts/chart/utils/axis.d.ts.map +1 -1
- package/dts/chart/utils/bar.d.ts +34 -0
- package/dts/chart/utils/bar.d.ts.map +1 -1
- package/dts/chart/utils/chart.d.ts +45 -7
- package/dts/chart/utils/chart.d.ts.map +1 -1
- package/dts/chart/utils/context.d.ts +6 -0
- package/dts/chart/utils/context.d.ts.map +1 -1
- package/dts/chart/utils/gradient.d.ts +104 -0
- package/dts/chart/utils/gradient.d.ts.map +1 -0
- package/dts/chart/utils/index.d.ts +4 -0
- package/dts/chart/utils/index.d.ts.map +1 -1
- package/dts/chart/utils/interpolate.d.ts +112 -0
- package/dts/chart/utils/interpolate.d.ts.map +1 -0
- package/dts/chart/utils/path.d.ts +30 -1
- package/dts/chart/utils/path.d.ts.map +1 -1
- package/dts/chart/utils/point.d.ts +40 -7
- package/dts/chart/utils/point.d.ts.map +1 -1
- package/dts/chart/utils/scale.d.ts +11 -0
- package/dts/chart/utils/scale.d.ts.map +1 -1
- package/dts/chart/utils/scrubber.d.ts +40 -0
- package/dts/chart/utils/scrubber.d.ts.map +1 -0
- package/dts/chart/utils/transition.d.ts +101 -0
- package/dts/chart/utils/transition.d.ts.map +1 -0
- package/dts/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.d.ts.map +1 -1
- package/esm/chart/CartesianChart.js +170 -83
- package/esm/chart/ChartProvider.js +2 -2
- package/esm/chart/Path.js +59 -54
- package/esm/chart/PeriodSelector.js +36 -32
- package/esm/chart/area/Area.js +26 -34
- package/esm/chart/area/AreaChart.js +29 -15
- package/esm/chart/area/DottedArea.js +39 -89
- package/esm/chart/area/GradientArea.js +37 -80
- package/esm/chart/area/SolidArea.js +32 -11
- package/esm/chart/axis/Axis.js +4 -39
- package/esm/chart/axis/DefaultAxisTickLabel.js +15 -0
- package/esm/chart/axis/XAxis.js +184 -63
- package/esm/chart/axis/YAxis.js +190 -57
- package/esm/chart/axis/index.js +1 -0
- package/esm/chart/bar/Bar.js +7 -1
- package/esm/chart/bar/BarChart.js +17 -32
- package/esm/chart/bar/BarPlot.js +5 -2
- package/esm/chart/bar/BarStack.js +74 -22
- package/esm/chart/bar/BarStackGroup.js +8 -18
- package/esm/chart/bar/DefaultBar.js +23 -28
- package/esm/chart/bar/DefaultBarStack.js +24 -20
- package/esm/chart/gradient/Gradient.js +104 -0
- package/esm/chart/gradient/index.js +1 -0
- package/esm/chart/index.js +3 -1
- package/esm/chart/legend/DefaultLegendEntry.css +1 -0
- package/esm/chart/legend/DefaultLegendEntry.js +50 -0
- package/esm/chart/legend/DefaultLegendShape.css +5 -0
- package/esm/chart/legend/DefaultLegendShape.js +47 -0
- package/esm/chart/legend/Legend.js +76 -0
- package/esm/chart/legend/index.js +3 -0
- package/esm/chart/line/DefaultReferenceLineLabel.js +81 -0
- package/esm/chart/line/DottedLine.js +41 -17
- package/esm/chart/line/Line.js +87 -75
- package/esm/chart/line/LineChart.js +24 -8
- package/esm/chart/line/ReferenceLine.js +41 -43
- package/esm/chart/line/SolidLine.js +39 -15
- package/esm/chart/line/index.js +1 -1
- package/esm/chart/{line/GradientLine.js → point/DefaultPointLabel.js} +31 -45
- package/esm/chart/point/Point.css +2 -0
- package/esm/chart/{Point.js → point/Point.js} +87 -62
- package/esm/chart/point/index.js +2 -0
- package/esm/chart/scrubber/DefaultScrubberBeacon.js +154 -0
- package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js +57 -0
- package/esm/chart/scrubber/{ScrubberBeaconLabel.js → DefaultScrubberLabel.js} +15 -18
- package/esm/chart/scrubber/Scrubber.js +97 -392
- package/esm/chart/scrubber/ScrubberBeaconGroup.js +174 -0
- package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +201 -0
- package/esm/chart/scrubber/index.js +3 -1
- package/esm/chart/text/ChartText.js +15 -20
- package/esm/chart/text/{SmartChartTextGroup.js → ChartTextGroup.js} +4 -3
- package/esm/chart/text/index.js +1 -1
- package/esm/chart/utils/axis.js +47 -31
- package/esm/chart/utils/bar.js +48 -0
- package/esm/chart/utils/chart.js +42 -3
- package/esm/chart/utils/gradient.js +257 -0
- package/esm/chart/utils/index.js +4 -0
- package/esm/chart/utils/interpolate.js +644 -0
- package/esm/chart/utils/path.js +41 -9
- package/esm/chart/utils/point.js +99 -12
- package/esm/chart/utils/scale.js +13 -2
- package/esm/chart/utils/scrubber.js +137 -0
- package/esm/chart/utils/transition.js +133 -0
- package/esm/sparkline/__figma__/Sparkline.figma.js +1 -1
- package/esm/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.js +8 -4
- package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js +1 -1
- package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js +1 -1
- package/package.json +12 -11
- package/dts/chart/Point.d.ts +0 -153
- package/dts/chart/Point.d.ts.map +0 -1
- package/dts/chart/line/GradientLine.d.ts +0 -42
- package/dts/chart/line/GradientLine.d.ts.map +0 -1
- package/dts/chart/scrubber/ScrubberBeacon.d.ts +0 -93
- package/dts/chart/scrubber/ScrubberBeacon.d.ts.map +0 -1
- package/dts/chart/scrubber/ScrubberBeaconLabel.d.ts +0 -7
- package/dts/chart/scrubber/ScrubberBeaconLabel.d.ts.map +0 -1
- package/dts/chart/text/SmartChartTextGroup.d.ts.map +0 -1
- package/esm/chart/Point.css +0 -2
- package/esm/chart/scrubber/ScrubberBeacon.js +0 -195
|
@@ -1,27 +1,154 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SharedProps } from '@coinbase/cds-common/types';
|
|
3
|
-
import { type
|
|
4
|
-
import { type
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
import { type Transition } from 'framer-motion';
|
|
4
|
+
import { type ReferenceLineBaseProps, type ReferenceLineLabelComponentProps } from '../line';
|
|
5
|
+
import type { ChartTextChildren, ChartTextProps } from '../text';
|
|
6
|
+
import { type ChartInset, type Series } from '../utils';
|
|
7
|
+
import {
|
|
8
|
+
type ScrubberBeaconGroupBaseProps,
|
|
9
|
+
type ScrubberBeaconGroupProps,
|
|
10
|
+
type ScrubberBeaconGroupRef,
|
|
11
|
+
} from './ScrubberBeaconGroup';
|
|
12
|
+
import {
|
|
13
|
+
type ScrubberBeaconLabelGroupBaseProps,
|
|
14
|
+
type ScrubberBeaconLabelGroupProps,
|
|
15
|
+
} from './ScrubberBeaconLabelGroup';
|
|
16
|
+
export type ScrubberBeaconRef = {
|
|
17
|
+
/**
|
|
18
|
+
* Triggers a single pulse animation.
|
|
19
|
+
* Only works when the beacon is in idle state (not actively scrubbing).
|
|
20
|
+
*/
|
|
21
|
+
pulse: () => void;
|
|
22
|
+
};
|
|
23
|
+
export type ScrubberBeaconBaseProps = {
|
|
24
|
+
/**
|
|
25
|
+
* Id of the series.
|
|
26
|
+
*/
|
|
27
|
+
seriesId: Series['id'];
|
|
28
|
+
/**
|
|
29
|
+
* Color of the series.
|
|
30
|
+
*/
|
|
31
|
+
color?: string;
|
|
32
|
+
/**
|
|
33
|
+
* X coordinate in data space.
|
|
34
|
+
*/
|
|
35
|
+
dataX: number;
|
|
36
|
+
/**
|
|
37
|
+
* Y coordinate in data space.
|
|
38
|
+
*/
|
|
39
|
+
dataY: number;
|
|
40
|
+
/**
|
|
41
|
+
* Whether the beacon is in idle state (not actively scrubbing).
|
|
42
|
+
*/
|
|
43
|
+
isIdle?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Pulse the beacon while it is at rest.
|
|
46
|
+
*
|
|
47
|
+
* @note Only has an effect when `isIdle` is `true`. Pulse animations work
|
|
48
|
+
* regardless of the chart's `animate` prop.
|
|
49
|
+
*/
|
|
50
|
+
idlePulse?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Whether position animations are enabled.
|
|
53
|
+
* @default to ChartContext's animate value
|
|
54
|
+
*/
|
|
55
|
+
animate?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* Opacity of the beacon.
|
|
58
|
+
* @default 1
|
|
59
|
+
*/
|
|
60
|
+
opacity?: number;
|
|
61
|
+
/**
|
|
62
|
+
* Stroke color of the beacon circle.
|
|
63
|
+
* @default 'var(--color-bg)'
|
|
64
|
+
*/
|
|
65
|
+
stroke?: string;
|
|
66
|
+
};
|
|
67
|
+
export type ScrubberBeaconProps = SharedProps &
|
|
68
|
+
ScrubberBeaconBaseProps & {
|
|
69
|
+
/**
|
|
70
|
+
* Transition configuration for beacon animations.
|
|
71
|
+
*/
|
|
72
|
+
transitions?: {
|
|
73
|
+
/**
|
|
74
|
+
* Transition for the initial enter/reveal animation.
|
|
75
|
+
* Set to `null` to disable.
|
|
76
|
+
*/
|
|
77
|
+
enter?: Transition | null;
|
|
78
|
+
/**
|
|
79
|
+
* Transition for subsequent data update animations.
|
|
80
|
+
* Set to `null` to disable.
|
|
81
|
+
*/
|
|
82
|
+
update?: Transition | null;
|
|
83
|
+
/**
|
|
84
|
+
* Transition used for the pulse animation.
|
|
85
|
+
* @default transition { duration: 1.6, ease: 'easeInOut' }
|
|
86
|
+
*/
|
|
87
|
+
pulse?: Transition;
|
|
88
|
+
/**
|
|
89
|
+
* Delay, in seconds between pulse transitions
|
|
90
|
+
* when `idlePulse` is enabled.
|
|
91
|
+
* @default 0.4
|
|
92
|
+
*/
|
|
93
|
+
pulseRepeatDelay?: number;
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Custom className for styling.
|
|
97
|
+
*/
|
|
98
|
+
className?: string;
|
|
99
|
+
/**
|
|
100
|
+
* Custom inline styles.
|
|
101
|
+
*/
|
|
102
|
+
style?: React.CSSProperties;
|
|
103
|
+
};
|
|
104
|
+
export type ScrubberBeaconComponent = React.FC<
|
|
105
|
+
ScrubberBeaconProps & {
|
|
106
|
+
ref?: React.Ref<ScrubberBeaconRef>;
|
|
107
|
+
}
|
|
108
|
+
>;
|
|
109
|
+
export type ScrubberBeaconLabelProps = Pick<Series, 'color'> &
|
|
110
|
+
Pick<
|
|
111
|
+
ChartTextProps,
|
|
112
|
+
'x' | 'y' | 'dx' | 'horizontalAlignment' | 'onDimensionsChange' | 'opacity' | 'font'
|
|
113
|
+
> & {
|
|
114
|
+
/**
|
|
115
|
+
* Label for the series.
|
|
116
|
+
*/
|
|
117
|
+
label: ChartTextChildren;
|
|
118
|
+
/**
|
|
119
|
+
* Id of the series.
|
|
120
|
+
*/
|
|
121
|
+
seriesId: Series['id'];
|
|
122
|
+
/**
|
|
123
|
+
* Transition configuration for position animations.
|
|
124
|
+
* When provided, the label component should animate its y position using this transition.
|
|
125
|
+
*/
|
|
126
|
+
transition?: Transition;
|
|
127
|
+
};
|
|
128
|
+
export type ScrubberBeaconLabelComponent = React.FC<ScrubberBeaconLabelProps>;
|
|
129
|
+
export type ScrubberLabelProps = ReferenceLineLabelComponentProps;
|
|
130
|
+
export type ScrubberLabelComponent = React.FC<ScrubberLabelProps>;
|
|
131
|
+
export type ScrubberBaseProps = SharedProps &
|
|
132
|
+
Pick<ScrubberBeaconGroupBaseProps, 'idlePulse'> &
|
|
133
|
+
Pick<ReferenceLineBaseProps, 'LineComponent' | 'LabelComponent' | 'labelElevated'> &
|
|
134
|
+
Pick<ScrubberBeaconGroupProps, 'BeaconComponent'> &
|
|
135
|
+
Pick<ScrubberBeaconLabelGroupProps, 'BeaconLabelComponent'> & {
|
|
13
136
|
/**
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* By default, all series will be highlighted by the Scrubber.
|
|
137
|
+
* Array of series IDs to highlight when scrubbing with scrubber beacons.
|
|
138
|
+
* By default, all series will be highlighted.
|
|
17
139
|
*/
|
|
18
140
|
seriesIds?: string[];
|
|
19
141
|
/**
|
|
20
|
-
* Hides the
|
|
142
|
+
* Hides the beacon labels while keeping the line label visible (if provided).
|
|
143
|
+
*/
|
|
144
|
+
hideBeaconLabels?: boolean;
|
|
145
|
+
/**
|
|
146
|
+
* Hides the scrubber line.
|
|
147
|
+
* @note This hides Scrubber's ReferenceLine including the label.
|
|
21
148
|
*/
|
|
22
149
|
hideLine?: boolean;
|
|
23
150
|
/**
|
|
24
|
-
*
|
|
151
|
+
* Hides the overlay rect which obscures data beyond the scrubber position.
|
|
25
152
|
*/
|
|
26
153
|
hideOverlay?: boolean;
|
|
27
154
|
/**
|
|
@@ -31,68 +158,117 @@ export type ScrubberProps = SharedProps &
|
|
|
31
158
|
*/
|
|
32
159
|
overlayOffset?: number;
|
|
33
160
|
/**
|
|
34
|
-
*
|
|
161
|
+
* Minimum gap between beacon labels to prevent overlap.
|
|
162
|
+
* Measured in pixels.
|
|
35
163
|
*/
|
|
36
|
-
|
|
164
|
+
beaconLabelMinGap?: ScrubberBeaconLabelGroupBaseProps['labelMinGap'];
|
|
37
165
|
/**
|
|
38
|
-
*
|
|
166
|
+
* Horizontal offset for beacon labels from their beacon position.
|
|
167
|
+
* Measured in pixels.
|
|
39
168
|
*/
|
|
40
|
-
|
|
169
|
+
beaconLabelHorizontalOffset?: ScrubberBeaconLabelGroupBaseProps['labelHorizontalOffset'];
|
|
41
170
|
/**
|
|
42
|
-
*
|
|
171
|
+
* Preferred side for beacon labels.
|
|
172
|
+
* @note labels will switch to the opposite side if there's not enough space on the preferred side.
|
|
173
|
+
* @default 'right'
|
|
43
174
|
*/
|
|
44
|
-
|
|
175
|
+
beaconLabelPreferredSide?: ScrubberBeaconLabelGroupBaseProps['labelPreferredSide'];
|
|
45
176
|
/**
|
|
46
|
-
*
|
|
177
|
+
* Label text displayed above the scrubber line.
|
|
178
|
+
* Can be a static string or a function that receives the current dataIndex.
|
|
47
179
|
*/
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
line?: React.CSSProperties;
|
|
52
|
-
beaconLabel?: React.CSSProperties;
|
|
53
|
-
};
|
|
180
|
+
label?:
|
|
181
|
+
| ReferenceLineBaseProps['label']
|
|
182
|
+
| ((dataIndex: number) => ReferenceLineBaseProps['label']);
|
|
54
183
|
/**
|
|
55
|
-
*
|
|
184
|
+
* Font style for the scrubber line label.
|
|
56
185
|
*/
|
|
57
|
-
|
|
58
|
-
overlay?: string;
|
|
59
|
-
beacon?: string;
|
|
60
|
-
line?: string;
|
|
61
|
-
beaconLabel?: string;
|
|
62
|
-
};
|
|
186
|
+
labelFont?: ChartTextProps['font'];
|
|
63
187
|
/**
|
|
64
|
-
*
|
|
188
|
+
* Bounds inset for the scrubber line label to prevent cutoff at chart edges.
|
|
189
|
+
* @default inset { top: 4, bottom: 20, left: 12, right: 12 } when labelElevated is true, otherwise none
|
|
65
190
|
*/
|
|
66
|
-
|
|
191
|
+
labelBoundsInset?: number | ChartInset;
|
|
67
192
|
/**
|
|
68
|
-
*
|
|
193
|
+
* Font style for the beacon labels.
|
|
194
|
+
*/
|
|
195
|
+
beaconLabelFont?: ChartTextProps['font'];
|
|
196
|
+
/**
|
|
197
|
+
* Stroke color for the scrubber line.
|
|
69
198
|
*/
|
|
70
|
-
|
|
199
|
+
lineStroke?: ReferenceLineBaseProps['stroke'];
|
|
71
200
|
/**
|
|
72
|
-
*
|
|
201
|
+
* Stroke color of the scrubber beacon circle.
|
|
202
|
+
* @default 'var(--color-bg)'
|
|
73
203
|
*/
|
|
74
|
-
|
|
204
|
+
beaconStroke?: string;
|
|
75
205
|
};
|
|
206
|
+
export type ScrubberProps = ScrubberBaseProps & {
|
|
207
|
+
/**
|
|
208
|
+
* Transition configuration for the scrubber.
|
|
209
|
+
* Controls enter, update, and pulse animations for beacons and beacon labels.
|
|
210
|
+
*/
|
|
211
|
+
transitions?: ScrubberBeaconProps['transitions'];
|
|
212
|
+
/**
|
|
213
|
+
* Transition configuration for the scrubber beacon.
|
|
214
|
+
* @deprecated Use `transitions` instead.
|
|
215
|
+
*/
|
|
216
|
+
beaconTransitions?: ScrubberBeaconProps['transitions'];
|
|
217
|
+
/**
|
|
218
|
+
* Accessibility label for the scrubber. Can be a static string or a function that receives the current dataIndex.
|
|
219
|
+
* If not provided, label will be used if it resolves to a string.
|
|
220
|
+
*/
|
|
221
|
+
accessibilityLabel?: string | ((dataIndex: number) => string);
|
|
222
|
+
/** Custom styles for individual elements of the Scrubber component */
|
|
223
|
+
styles?: {
|
|
224
|
+
/** Overlay element */
|
|
225
|
+
overlay?: React.CSSProperties;
|
|
226
|
+
/** Beacon circle element */
|
|
227
|
+
beacon?: React.CSSProperties;
|
|
228
|
+
/** Scrubber line element */
|
|
229
|
+
line?: React.CSSProperties;
|
|
230
|
+
/** Beacon label element */
|
|
231
|
+
beaconLabel?: React.CSSProperties;
|
|
232
|
+
};
|
|
233
|
+
/** Custom class names for individual elements of the Scrubber component */
|
|
234
|
+
classNames?: {
|
|
235
|
+
/** Overlay element */
|
|
236
|
+
overlay?: string;
|
|
237
|
+
/** Beacon circle element */
|
|
238
|
+
beacon?: string;
|
|
239
|
+
/** Scrubber line element */
|
|
240
|
+
line?: string;
|
|
241
|
+
/** Beacon label element */
|
|
242
|
+
beaconLabel?: string;
|
|
243
|
+
};
|
|
244
|
+
};
|
|
245
|
+
export type ScrubberRef = ScrubberBeaconGroupRef;
|
|
76
246
|
/**
|
|
77
|
-
* Unified component that manages all scrubber elements (beacons, line, labels)
|
|
78
|
-
* with intelligent collision detection and consistent positioning.
|
|
247
|
+
* Unified component that manages all scrubber elements (beacons, line, labels).
|
|
79
248
|
*/
|
|
80
249
|
export declare const Scrubber: React.MemoExoticComponent<
|
|
81
250
|
React.ForwardRefExoticComponent<
|
|
82
251
|
SharedProps &
|
|
83
|
-
Pick<
|
|
252
|
+
Pick<ScrubberBeaconGroupBaseProps, 'idlePulse'> &
|
|
253
|
+
Pick<ReferenceLineBaseProps, 'LabelComponent' | 'LineComponent' | 'labelElevated'> &
|
|
254
|
+
Pick<ScrubberBeaconGroupProps, 'BeaconComponent'> &
|
|
255
|
+
Pick<ScrubberBeaconLabelGroupProps, 'BeaconLabelComponent'> & {
|
|
84
256
|
/**
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
* By default, all series will be highlighted by the Scrubber.
|
|
257
|
+
* Array of series IDs to highlight when scrubbing with scrubber beacons.
|
|
258
|
+
* By default, all series will be highlighted.
|
|
88
259
|
*/
|
|
89
260
|
seriesIds?: string[];
|
|
90
261
|
/**
|
|
91
|
-
* Hides the
|
|
262
|
+
* Hides the beacon labels while keeping the line label visible (if provided).
|
|
263
|
+
*/
|
|
264
|
+
hideBeaconLabels?: boolean;
|
|
265
|
+
/**
|
|
266
|
+
* Hides the scrubber line.
|
|
267
|
+
* @note This hides Scrubber's ReferenceLine including the label.
|
|
92
268
|
*/
|
|
93
269
|
hideLine?: boolean;
|
|
94
270
|
/**
|
|
95
|
-
*
|
|
271
|
+
* Hides the overlay rect which obscures data beyond the scrubber position.
|
|
96
272
|
*/
|
|
97
273
|
hideOverlay?: boolean;
|
|
98
274
|
/**
|
|
@@ -101,49 +277,90 @@ export declare const Scrubber: React.MemoExoticComponent<
|
|
|
101
277
|
* @default 2
|
|
102
278
|
*/
|
|
103
279
|
overlayOffset?: number;
|
|
280
|
+
/**
|
|
281
|
+
* Minimum gap between beacon labels to prevent overlap.
|
|
282
|
+
* Measured in pixels.
|
|
283
|
+
*/
|
|
284
|
+
beaconLabelMinGap?: ScrubberBeaconLabelGroupBaseProps['labelMinGap'];
|
|
285
|
+
/**
|
|
286
|
+
* Horizontal offset for beacon labels from their beacon position.
|
|
287
|
+
* Measured in pixels.
|
|
288
|
+
*/
|
|
289
|
+
beaconLabelHorizontalOffset?: ScrubberBeaconLabelGroupBaseProps['labelHorizontalOffset'];
|
|
290
|
+
/**
|
|
291
|
+
* Preferred side for beacon labels.
|
|
292
|
+
* @note labels will switch to the opposite side if there's not enough space on the preferred side.
|
|
293
|
+
* @default 'right'
|
|
294
|
+
*/
|
|
295
|
+
beaconLabelPreferredSide?: ScrubberBeaconLabelGroupBaseProps['labelPreferredSide'];
|
|
104
296
|
/**
|
|
105
297
|
* Label text displayed above the scrubber line.
|
|
298
|
+
* Can be a static string or a function that receives the current dataIndex.
|
|
299
|
+
*/
|
|
300
|
+
label?:
|
|
301
|
+
| ReferenceLineBaseProps['label']
|
|
302
|
+
| ((dataIndex: number) => ReferenceLineBaseProps['label']);
|
|
303
|
+
/**
|
|
304
|
+
* Font style for the scrubber line label.
|
|
305
|
+
*/
|
|
306
|
+
labelFont?: ChartTextProps['font'];
|
|
307
|
+
/**
|
|
308
|
+
* Bounds inset for the scrubber line label to prevent cutoff at chart edges.
|
|
309
|
+
* @default inset { top: 4, bottom: 20, left: 12, right: 12 } when labelElevated is true, otherwise none
|
|
106
310
|
*/
|
|
107
|
-
|
|
311
|
+
labelBoundsInset?: number | ChartInset;
|
|
108
312
|
/**
|
|
109
|
-
*
|
|
313
|
+
* Font style for the beacon labels.
|
|
110
314
|
*/
|
|
111
|
-
|
|
315
|
+
beaconLabelFont?: ChartTextProps['font'];
|
|
112
316
|
/**
|
|
113
317
|
* Stroke color for the scrubber line.
|
|
114
318
|
*/
|
|
115
|
-
lineStroke?:
|
|
319
|
+
lineStroke?: ReferenceLineBaseProps['stroke'];
|
|
116
320
|
/**
|
|
117
|
-
*
|
|
321
|
+
* Stroke color of the scrubber beacon circle.
|
|
322
|
+
* @default 'var(--color-bg)'
|
|
118
323
|
*/
|
|
324
|
+
beaconStroke?: string;
|
|
325
|
+
} & {
|
|
326
|
+
/**
|
|
327
|
+
* Transition configuration for the scrubber.
|
|
328
|
+
* Controls enter, update, and pulse animations for beacons and beacon labels.
|
|
329
|
+
*/
|
|
330
|
+
transitions?: ScrubberBeaconProps['transitions'];
|
|
331
|
+
/**
|
|
332
|
+
* Transition configuration for the scrubber beacon.
|
|
333
|
+
* @deprecated Use `transitions` instead.
|
|
334
|
+
*/
|
|
335
|
+
beaconTransitions?: ScrubberBeaconProps['transitions'];
|
|
336
|
+
/**
|
|
337
|
+
* Accessibility label for the scrubber. Can be a static string or a function that receives the current dataIndex.
|
|
338
|
+
* If not provided, label will be used if it resolves to a string.
|
|
339
|
+
*/
|
|
340
|
+
accessibilityLabel?: string | ((dataIndex: number) => string);
|
|
341
|
+
/** Custom styles for individual elements of the Scrubber component */
|
|
119
342
|
styles?: {
|
|
343
|
+
/** Overlay element */
|
|
120
344
|
overlay?: React.CSSProperties;
|
|
345
|
+
/** Beacon circle element */
|
|
121
346
|
beacon?: React.CSSProperties;
|
|
347
|
+
/** Scrubber line element */
|
|
122
348
|
line?: React.CSSProperties;
|
|
349
|
+
/** Beacon label element */
|
|
123
350
|
beaconLabel?: React.CSSProperties;
|
|
124
351
|
};
|
|
125
|
-
/**
|
|
126
|
-
* Custom class names for scrubber elements.
|
|
127
|
-
*/
|
|
352
|
+
/** Custom class names for individual elements of the Scrubber component */
|
|
128
353
|
classNames?: {
|
|
354
|
+
/** Overlay element */
|
|
129
355
|
overlay?: string;
|
|
356
|
+
/** Beacon circle element */
|
|
130
357
|
beacon?: string;
|
|
358
|
+
/** Scrubber line element */
|
|
131
359
|
line?: string;
|
|
360
|
+
/** Beacon label element */
|
|
132
361
|
beaconLabel?: string;
|
|
133
362
|
};
|
|
134
|
-
|
|
135
|
-
* Custom component for the scrubber beacon.
|
|
136
|
-
*/
|
|
137
|
-
BeaconComponent?: React.ComponentType<ScrubberBeaconProps>;
|
|
138
|
-
/**
|
|
139
|
-
* Custom component for the scrubber beacon label.
|
|
140
|
-
*/
|
|
141
|
-
BeaconLabelComponent?: React.ComponentType<ScrubberBeaconLabelProps>;
|
|
142
|
-
/**
|
|
143
|
-
* Custom component for the scrubber line.
|
|
144
|
-
*/
|
|
145
|
-
LineComponent?: React.ComponentType<ReferenceLineProps>;
|
|
146
|
-
} & React.RefAttributes<ScrubberBeaconRef>
|
|
363
|
+
} & React.RefAttributes<ScrubberBeaconGroupRef>
|
|
147
364
|
>
|
|
148
365
|
>;
|
|
149
366
|
//# sourceMappingURL=Scrubber.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/Scrubber.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/Scrubber.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import type { SharedProps } from '@coinbase/cds-common/types';
|
|
2
|
+
import type { ScrubberBeaconComponent, ScrubberBeaconProps } from './Scrubber';
|
|
3
|
+
export type ScrubberBeaconGroupRef = {
|
|
4
|
+
/**
|
|
5
|
+
* Triggers a pulse animation on all beacons.
|
|
6
|
+
*/
|
|
7
|
+
pulse: () => void;
|
|
8
|
+
};
|
|
9
|
+
export type ScrubberBeaconGroupBaseProps = SharedProps & {
|
|
10
|
+
/**
|
|
11
|
+
* Array of series IDs to render beacons for.
|
|
12
|
+
*/
|
|
13
|
+
seriesIds: string[];
|
|
14
|
+
/**
|
|
15
|
+
* Pulse the beacons while at rest.
|
|
16
|
+
*/
|
|
17
|
+
idlePulse?: boolean;
|
|
18
|
+
};
|
|
19
|
+
export type ScrubberBeaconGroupProps = ScrubberBeaconGroupBaseProps & {
|
|
20
|
+
/**
|
|
21
|
+
* Transition configuration for beacon animations.
|
|
22
|
+
*/
|
|
23
|
+
transitions?: ScrubberBeaconProps['transitions'];
|
|
24
|
+
/**
|
|
25
|
+
* Custom component for the scrubber beacon.
|
|
26
|
+
* @default DefaultScrubberBeacon
|
|
27
|
+
*/
|
|
28
|
+
BeaconComponent?: ScrubberBeaconComponent;
|
|
29
|
+
/**
|
|
30
|
+
* Custom className for beacon styling.
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Custom inline styles for beacons.
|
|
35
|
+
*/
|
|
36
|
+
style?: React.CSSProperties;
|
|
37
|
+
/**
|
|
38
|
+
* Stroke color of the beacon circle.
|
|
39
|
+
* @default 'var(--color-bg)'
|
|
40
|
+
*/
|
|
41
|
+
stroke?: string;
|
|
42
|
+
};
|
|
43
|
+
export declare const ScrubberBeaconGroup: import('react').MemoExoticComponent<
|
|
44
|
+
import('react').ForwardRefExoticComponent<
|
|
45
|
+
SharedProps & {
|
|
46
|
+
/**
|
|
47
|
+
* Array of series IDs to render beacons for.
|
|
48
|
+
*/
|
|
49
|
+
seriesIds: string[];
|
|
50
|
+
/**
|
|
51
|
+
* Pulse the beacons while at rest.
|
|
52
|
+
*/
|
|
53
|
+
idlePulse?: boolean;
|
|
54
|
+
} & {
|
|
55
|
+
/**
|
|
56
|
+
* Transition configuration for beacon animations.
|
|
57
|
+
*/
|
|
58
|
+
transitions?: ScrubberBeaconProps['transitions'];
|
|
59
|
+
/**
|
|
60
|
+
* Custom component for the scrubber beacon.
|
|
61
|
+
* @default DefaultScrubberBeacon
|
|
62
|
+
*/
|
|
63
|
+
BeaconComponent?: ScrubberBeaconComponent;
|
|
64
|
+
/**
|
|
65
|
+
* Custom className for beacon styling.
|
|
66
|
+
*/
|
|
67
|
+
className?: string;
|
|
68
|
+
/**
|
|
69
|
+
* Custom inline styles for beacons.
|
|
70
|
+
*/
|
|
71
|
+
style?: React.CSSProperties;
|
|
72
|
+
/**
|
|
73
|
+
* Stroke color of the beacon circle.
|
|
74
|
+
* @default 'var(--color-bg)'
|
|
75
|
+
*/
|
|
76
|
+
stroke?: string;
|
|
77
|
+
} & import('react').RefAttributes<ScrubberBeaconGroupRef>
|
|
78
|
+
>
|
|
79
|
+
>;
|
|
80
|
+
//# sourceMappingURL=ScrubberBeaconGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrubberBeaconGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAW9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAqB,MAAM,YAAY,CAAC;AAyGlG,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,WAAW,GAAG;IACvD;;OAEG;IACH,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,GAAG;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mBAAmB;IAnC9B;;OAEG;eACQ,MAAM,EAAE;IACnB;;OAEG;gBACS,OAAO;;IAInB;;OAEG;kBACW,mBAAmB,CAAC,aAAa,CAAC;IAChD;;;OAGG;sBACe,uBAAuB;IACzC;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;;OAGG;aACM,MAAM;2DAyFhB,CAAC"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { SharedProps } from '@coinbase/cds-common/types';
|
|
2
|
+
import type { ChartTextProps } from '../text';
|
|
3
|
+
import { type ScrubberLabelPosition } from '../utils/scrubber';
|
|
4
|
+
import type {
|
|
5
|
+
ScrubberBeaconLabelComponent,
|
|
6
|
+
ScrubberBeaconLabelProps,
|
|
7
|
+
ScrubberBeaconProps,
|
|
8
|
+
} from './Scrubber';
|
|
9
|
+
export type ScrubberBeaconLabelGroupBaseProps = SharedProps & {
|
|
10
|
+
/**
|
|
11
|
+
* Labels to be displayed.
|
|
12
|
+
*/
|
|
13
|
+
labels: Array<Pick<ScrubberBeaconLabelProps, 'seriesId' | 'label' | 'color'>>;
|
|
14
|
+
/**
|
|
15
|
+
* Minimum gap between labels in pixels.
|
|
16
|
+
* @default 4
|
|
17
|
+
*/
|
|
18
|
+
labelMinGap?: number;
|
|
19
|
+
/**
|
|
20
|
+
* Horizontal offset of labels from the scrubber line in pixels.
|
|
21
|
+
* @default 16
|
|
22
|
+
*/
|
|
23
|
+
labelHorizontalOffset?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Font style for the beacon labels.
|
|
26
|
+
*/
|
|
27
|
+
labelFont?: ChartTextProps['font'];
|
|
28
|
+
/**
|
|
29
|
+
* Preferred side for labels.
|
|
30
|
+
* @note labels will switch to the opposite side if there's not enough space on the preferred side.
|
|
31
|
+
* @default 'right'
|
|
32
|
+
*/
|
|
33
|
+
labelPreferredSide?: ScrubberLabelPosition;
|
|
34
|
+
};
|
|
35
|
+
export type ScrubberBeaconLabelGroupProps = ScrubberBeaconLabelGroupBaseProps & {
|
|
36
|
+
/**
|
|
37
|
+
* Custom component to render as a scrubber beacon label.
|
|
38
|
+
* @default DefaultScrubberBeaconLabel
|
|
39
|
+
*/
|
|
40
|
+
BeaconLabelComponent?: ScrubberBeaconLabelComponent;
|
|
41
|
+
/**
|
|
42
|
+
* Transition configuration for beacon label animations.
|
|
43
|
+
*/
|
|
44
|
+
transitions?: ScrubberBeaconProps['transitions'];
|
|
45
|
+
};
|
|
46
|
+
export declare const ScrubberBeaconLabelGroup: import('react').NamedExoticComponent<ScrubberBeaconLabelGroupProps>;
|
|
47
|
+
//# sourceMappingURL=ScrubberBeaconLabelGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrubberBeaconLabelGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconLabelGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAI9D,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,SAAS,CAAC;AAQjE,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EACV,4BAA4B,EAC5B,wBAAwB,EACxB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAyDpB,MAAM,MAAM,iCAAiC,GAAG,WAAW,GAAG;IAC5D;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAC9E;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,iCAAiC,GAAG;IAC9E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAsMpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC"}
|