@coinbase/cds-web-visualization 3.4.0-beta.2 → 3.4.0-beta.21
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 +122 -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 +99 -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 +303 -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 +56 -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 +45 -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 +101 -392
- package/esm/chart/scrubber/ScrubberBeaconGroup.js +174 -0
- package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +209 -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
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,128 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 3.4.0-beta.21 (3/2/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Fix styles props on Scrubber. [[#463](https://github.com/coinbase/cds/pull/463)]
|
|
16
|
+
- Fix text elevation background. [[#463](https://github.com/coinbase/cds/pull/463)]
|
|
17
|
+
|
|
18
|
+
## 3.4.0-beta.20 (2/27/2026 PST)
|
|
19
|
+
|
|
20
|
+
#### 🚀 Updates
|
|
21
|
+
|
|
22
|
+
- Add classnames and styles props to PeriodSelector. [[#438](https://github.com/coinbase/cds/pull/438/)]
|
|
23
|
+
|
|
24
|
+
#### 📘 Misc
|
|
25
|
+
|
|
26
|
+
- Clarify framer-motion is a peerDependency. [[#437](https://github.com/coinbase/cds/pull/437)]
|
|
27
|
+
- Update oudated doc links. [[#440](https://github.com/coinbase/cds/pull/440)]
|
|
28
|
+
|
|
29
|
+
## 3.4.0-beta.19 (2/20/2026 PST)
|
|
30
|
+
|
|
31
|
+
#### 🚀 Updates
|
|
32
|
+
|
|
33
|
+
- Support custom enter transitions [[#400](https://github.com/coinbase/cds/pull/400/)]
|
|
34
|
+
|
|
35
|
+
#### 📘 Misc
|
|
36
|
+
|
|
37
|
+
- Update jsdocs for styles props. [[#384](https://github.com/coinbase/cds/pull/384)]
|
|
38
|
+
|
|
39
|
+
## 3.4.0-beta.18 (2/8/2026 PST)
|
|
40
|
+
|
|
41
|
+
This is an artificial version bump with no new change.
|
|
42
|
+
|
|
43
|
+
## 3.4.0-beta.17 (2/4/2026 PST)
|
|
44
|
+
|
|
45
|
+
#### 🚀 Updates
|
|
46
|
+
|
|
47
|
+
- Add support preferred side for scrubber beacon label group. [[#366](https://github.com/coinbase/cds/pull/366)]
|
|
48
|
+
|
|
49
|
+
## 3.4.0-beta.16 (1/29/2026 PST)
|
|
50
|
+
|
|
51
|
+
#### 🚀 Updates
|
|
52
|
+
|
|
53
|
+
- Export `CartesianChartContext`. [[#340](https://github.com/coinbase/cds/pull/340)]
|
|
54
|
+
|
|
55
|
+
## 3.4.0-beta.15 (1/27/2026 PST)
|
|
56
|
+
|
|
57
|
+
#### 🐞 Fixes
|
|
58
|
+
|
|
59
|
+
- Fix padding on PeriodSelector. [[#330](https://github.com/coinbase/cds/pull/330)]
|
|
60
|
+
|
|
61
|
+
## 3.4.0-beta.14 (1/22/2026 PST)
|
|
62
|
+
|
|
63
|
+
#### 🚀 Updates
|
|
64
|
+
|
|
65
|
+
- Add chart Legend component. [[#302](https://github.com/coinbase/cds/pull/302)]
|
|
66
|
+
- Add support for hideBeaconLabels in Scrubber. [[#302](https://github.com/coinbase/cds/pull/302)]
|
|
67
|
+
- Add support for custom bar components. [[#302](https://github.com/coinbase/cds/pull/302)]
|
|
68
|
+
|
|
69
|
+
## 3.4.0-beta.13 (1/20/2026 PST)
|
|
70
|
+
|
|
71
|
+
#### 🚀 Updates
|
|
72
|
+
|
|
73
|
+
- Feat: support styling default scrubber beacon. [[#315](https://github.com/coinbase/cds/pull/315)]
|
|
74
|
+
|
|
75
|
+
#### 📘 Misc
|
|
76
|
+
|
|
77
|
+
- Internal: code connect file lint fixes. [[#311](https://github.com/coinbase/cds/pull/311)]
|
|
78
|
+
- Internal: update figma code connect config and some mapping files. [[#304](https://github.com/coinbase/cds/pull/304)]
|
|
79
|
+
|
|
80
|
+
## 3.4.0-beta.12 (1/8/2026 PST)
|
|
81
|
+
|
|
82
|
+
This is an artificial version bump with no new change.
|
|
83
|
+
|
|
84
|
+
## 3.4.0-beta.11 (1/7/2026 PST)
|
|
85
|
+
|
|
86
|
+
#### 🐞 Fixes
|
|
87
|
+
|
|
88
|
+
- Allow customization of axis tick mark and grid line alignment in band scale. [[#291](https://github.com/coinbase/cds/pull/291)]
|
|
89
|
+
|
|
90
|
+
## 3.4.0-beta.10 (1/6/2026 PST)
|
|
91
|
+
|
|
92
|
+
#### 🐞 Fixes
|
|
93
|
+
|
|
94
|
+
- Fix axis clip line issues when multiple axes are present on one side. [[#285](https://github.com/coinbase/cds/pull/285)]
|
|
95
|
+
|
|
96
|
+
## 3.4.0-beta.9 (12/18/2025 PST)
|
|
97
|
+
|
|
98
|
+
This is an artificial version bump with no new change.
|
|
99
|
+
|
|
100
|
+
## 3.4.0-beta.8 (12/2/2025 PST)
|
|
101
|
+
|
|
102
|
+
This is an artificial version bump with no new change.
|
|
103
|
+
|
|
104
|
+
## 3.4.0-beta.7 (12/2/2025 PST)
|
|
105
|
+
|
|
106
|
+
#### 🐞 Fixes
|
|
107
|
+
|
|
108
|
+
- Improve opacity customization for ReferenceLine. [[#201](https://github.com/coinbase/cds/pull/201)]
|
|
109
|
+
|
|
110
|
+
## 3.4.0-beta.6 (10/16/2025 PST)
|
|
111
|
+
|
|
112
|
+
#### 🚀 Updates
|
|
113
|
+
|
|
114
|
+
- Support connecting null values in Area and Line
|
|
115
|
+
- Added label to XAxis and YAxis
|
|
116
|
+
- Added gradient support
|
|
117
|
+
- Improved charts accessibility support
|
|
118
|
+
|
|
119
|
+
## 3.4.0-beta.5 (11/4/2025 PST)
|
|
120
|
+
|
|
121
|
+
This is an artificial version bump with no new change.
|
|
122
|
+
|
|
123
|
+
## 3.4.0-beta.4 (10/27/2025 PST)
|
|
124
|
+
|
|
125
|
+
This is an artificial version bump with no new change.
|
|
126
|
+
|
|
127
|
+
## 3.4.0-beta.3 (10/6/2025 PST)
|
|
128
|
+
|
|
129
|
+
#### 🐞 Fixes
|
|
130
|
+
|
|
131
|
+
- Factor sparkline container offset in axis label calculations. [[#88](https://github.com/coinbase/cds/pull/88)]
|
|
132
|
+
|
|
11
133
|
## 3.4.0-beta.2 (10/6/2025 PST)
|
|
12
134
|
|
|
13
135
|
This is an artificial version bump with no new change.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type BoxBaseProps, type BoxProps } from '@coinbase/cds-web/layout';
|
|
3
3
|
import { type ScrubberProviderProps } from './scrubber/ScrubberProvider';
|
|
4
|
-
import { type AxisConfigProps, type ChartInset, type Series } from './utils';
|
|
4
|
+
import { type AxisConfigProps, type ChartInset, type LegendPosition, type Series } from './utils';
|
|
5
5
|
export type CartesianChartBaseProps = BoxBaseProps &
|
|
6
6
|
Pick<ScrubberProviderProps, 'enableScrubbing' | 'onScrubberPositionChange'> & {
|
|
7
7
|
/**
|
|
@@ -19,15 +19,68 @@ export type CartesianChartBaseProps = BoxBaseProps &
|
|
|
19
19
|
*/
|
|
20
20
|
xAxis?: Partial<Omit<AxisConfigProps, 'id'>>;
|
|
21
21
|
/**
|
|
22
|
-
* Configuration for y-axis(es).
|
|
22
|
+
* Configuration for y-axis(es). Can be a single config or array of configs.
|
|
23
23
|
*/
|
|
24
24
|
yAxis?: Partial<Omit<AxisConfigProps, 'data'>> | Partial<Omit<AxisConfigProps, 'data'>>[];
|
|
25
25
|
/**
|
|
26
26
|
* Inset around the entire chart (outside the axes).
|
|
27
27
|
*/
|
|
28
28
|
inset?: number | Partial<ChartInset>;
|
|
29
|
+
/**
|
|
30
|
+
* Whether to show the legend or a custom legend element.
|
|
31
|
+
* - `true` renders the default Legend component
|
|
32
|
+
* - A React element renders that element as the legend
|
|
33
|
+
* - `false` or omitted hides the legend
|
|
34
|
+
*/
|
|
35
|
+
legend?: boolean | React.ReactNode;
|
|
36
|
+
/**
|
|
37
|
+
* Position of the legend relative to the chart.
|
|
38
|
+
* @default 'bottom'
|
|
39
|
+
*/
|
|
40
|
+
legendPosition?: LegendPosition;
|
|
41
|
+
/**
|
|
42
|
+
* Accessibility label for the legend group.
|
|
43
|
+
* @default 'Legend'
|
|
44
|
+
*/
|
|
45
|
+
legendAccessibilityLabel?: string;
|
|
46
|
+
};
|
|
47
|
+
export type CartesianChartProps = Omit<BoxProps<'div'>, 'title'> &
|
|
48
|
+
CartesianChartBaseProps & {
|
|
49
|
+
/**
|
|
50
|
+
* Custom class name for the root element.
|
|
51
|
+
*/
|
|
52
|
+
className?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Custom class names for the component.
|
|
55
|
+
*/
|
|
56
|
+
classNames?: {
|
|
57
|
+
/**
|
|
58
|
+
* Custom class name for the root element.
|
|
59
|
+
*/
|
|
60
|
+
root?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Custom class name for the chart SVG element.
|
|
63
|
+
*/
|
|
64
|
+
chart?: string;
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Custom styles for the root element.
|
|
68
|
+
*/
|
|
69
|
+
style?: React.CSSProperties;
|
|
70
|
+
/**
|
|
71
|
+
* Custom styles for the component.
|
|
72
|
+
*/
|
|
73
|
+
styles?: {
|
|
74
|
+
/**
|
|
75
|
+
* Custom styles for the root element.
|
|
76
|
+
*/
|
|
77
|
+
root?: React.CSSProperties;
|
|
78
|
+
/**
|
|
79
|
+
* Custom styles for the chart SVG element.
|
|
80
|
+
*/
|
|
81
|
+
chart?: React.CSSProperties;
|
|
82
|
+
};
|
|
29
83
|
};
|
|
30
|
-
export type CartesianChartProps = BoxProps<'svg'> & CartesianChartBaseProps;
|
|
31
84
|
export declare const CartesianChart: React.MemoExoticComponent<
|
|
32
85
|
React.ForwardRefExoticComponent<
|
|
33
86
|
Omit<CartesianChartProps, 'ref'> & React.RefAttributes<SVGSVGElement>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGjF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGjF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAG3F,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,UAAU,EAUf,KAAK,cAAc,EACnB,KAAK,MAAM,EAEZ,MAAM,SAAS,CAAC;AAYjB,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAChD,IAAI,CAAC,qBAAqB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC,GAAG;IAC5E;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;IAC1F;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAC9D,uBAAuB,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,cAAc,mIA2X1B,CAAC"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import type { CartesianChartContextValue } from './utils/context';
|
|
2
|
+
export declare const CartesianChartContext: import('react').Context<
|
|
3
|
+
CartesianChartContextValue | undefined
|
|
4
|
+
>;
|
|
2
5
|
export declare const useCartesianChartContext: () => CartesianChartContextValue;
|
|
3
6
|
export declare const CartesianChartProvider: import('react').Provider<
|
|
4
7
|
CartesianChartContextValue | undefined
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../src/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../src/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAElE,eAAO,MAAM,qBAAqB,iEAEjC,CAAC;AAEF,eAAO,MAAM,wBAAwB,QAAO,0BAQ3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,kEAAiC,CAAC"}
|
package/dts/chart/Path.d.ts
CHANGED
|
@@ -1,7 +1,32 @@
|
|
|
1
|
-
import 'd3-transition';
|
|
2
1
|
import type { SVGProps } from 'react';
|
|
3
2
|
import type { Rect, SharedProps } from '@coinbase/cds-common/types';
|
|
4
|
-
|
|
3
|
+
import { type Transition } from 'framer-motion';
|
|
4
|
+
/**
|
|
5
|
+
* Duration in seconds for path enter transition.
|
|
6
|
+
* @deprecated Use `transitions.enter` on the Path component instead.
|
|
7
|
+
*/
|
|
8
|
+
export declare const pathEnterTransitionDuration = 0.5;
|
|
9
|
+
export type PathBaseProps = SharedProps & {
|
|
10
|
+
/**
|
|
11
|
+
* Whether to animate this path. Overrides the animate prop on the Chart component.
|
|
12
|
+
*/
|
|
13
|
+
animate?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Initial path for enter animation.
|
|
16
|
+
* When provided, the first animation will go from initialPath to d.
|
|
17
|
+
* If not provided, defaults to d (no path enter animation).
|
|
18
|
+
*/
|
|
19
|
+
initialPath?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Fill color for the path.
|
|
22
|
+
*/
|
|
23
|
+
fill?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Opacity for the path fill.
|
|
26
|
+
*/
|
|
27
|
+
fillOpacity?: number;
|
|
28
|
+
};
|
|
29
|
+
export type PathProps = PathBaseProps &
|
|
5
30
|
Omit<
|
|
6
31
|
SVGProps<SVGPathElement>,
|
|
7
32
|
| 'onAnimationStart'
|
|
@@ -18,17 +43,49 @@ export type PathProps = SharedProps &
|
|
|
18
43
|
| 'onDragStartCapture'
|
|
19
44
|
> & {
|
|
20
45
|
/**
|
|
21
|
-
*
|
|
46
|
+
* Transition configuration for enter and update animations.
|
|
47
|
+
* @note Disable an animation by passing in null.
|
|
48
|
+
*
|
|
49
|
+
* @default transitions = {{
|
|
50
|
+
* enter: { type: 'tween', duration: 0.5 },
|
|
51
|
+
* update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 }
|
|
52
|
+
* }}
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* // Custom enter and update transitions
|
|
56
|
+
* transitions={{ enter: { type: 'tween', duration: 0.3 }, update: { type: 'spring', damping: 20 } }}
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* // Disable enter animation
|
|
60
|
+
* transitions={{ enter: null }}
|
|
22
61
|
*/
|
|
23
|
-
|
|
62
|
+
transitions?: {
|
|
63
|
+
/**
|
|
64
|
+
* Transition for the initial enter/reveal animation.
|
|
65
|
+
* Set to `null` to disable.
|
|
66
|
+
*/
|
|
67
|
+
enter?: Transition | null;
|
|
68
|
+
/**
|
|
69
|
+
* Transition for subsequent data update animations.
|
|
70
|
+
* Set to `null` to disable.
|
|
71
|
+
*/
|
|
72
|
+
update?: Transition | null;
|
|
73
|
+
};
|
|
24
74
|
/**
|
|
25
|
-
*
|
|
75
|
+
* Transition for updates.
|
|
76
|
+
* @deprecated Use `transitions.update` instead.
|
|
26
77
|
*/
|
|
27
|
-
|
|
78
|
+
transition?: Transition;
|
|
28
79
|
/**
|
|
29
|
-
*
|
|
80
|
+
* Offset added to the clip rect boundaries.
|
|
30
81
|
*/
|
|
31
82
|
clipOffset?: number;
|
|
83
|
+
/**
|
|
84
|
+
* Custom clip path rect. If provided, this overrides the default chart rect for clipping.
|
|
85
|
+
* Pass null to disable clipping.
|
|
86
|
+
* @default drawingArea of chart + clipOffset
|
|
87
|
+
*/
|
|
88
|
+
clipRect?: Rect | null;
|
|
32
89
|
};
|
|
33
90
|
export declare const Path: import('react').NamedExoticComponent<PathProps>;
|
|
34
91
|
//# sourceMappingURL=Path.d.ts.map
|
package/dts/chart/Path.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAM7D;;;GAGG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,QAAQ,CAAC,cAAc,CAAC,EACtB,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,GACtB,yBAAyB,GACzB,uBAAuB,GACvB,6BAA6B,GAC7B,QAAQ,GACR,WAAW,GACX,aAAa,GACb,eAAe,GACf,kBAAkB,GAClB,oBAAoB,CACvB,GAAG;IACF;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB,CAAC;AAgBJ,eAAO,MAAM,IAAI,iDA2EhB,CAAC"}
|
|
@@ -9,6 +9,7 @@ export declare const PeriodSelectorActiveIndicator: React.MemoExoticComponent<
|
|
|
9
9
|
position,
|
|
10
10
|
borderRadius,
|
|
11
11
|
style,
|
|
12
|
+
...props
|
|
12
13
|
}: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element | null
|
|
13
14
|
>;
|
|
14
15
|
export declare const liveTabLabelDefaultElement = 'span';
|
|
@@ -23,10 +24,6 @@ export type LiveTabLabelBaseProps = TextBaseProps & {
|
|
|
23
24
|
* Whether to hide the dot.
|
|
24
25
|
*/
|
|
25
26
|
hideDot?: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* Whether to disable the pulse animation.
|
|
28
|
-
*/
|
|
29
|
-
disablePulse?: boolean;
|
|
30
27
|
};
|
|
31
28
|
export type LiveTabLabelProps<AsComponent extends React.ElementType> = Polymorphic.Props<
|
|
32
29
|
AsComponent,
|
|
@@ -37,23 +34,16 @@ type LiveTabLabelComponent = (<AsComponent extends React.ElementType = LiveTabLa
|
|
|
37
34
|
) => Polymorphic.ReactReturn) &
|
|
38
35
|
Polymorphic.ReactNamed;
|
|
39
36
|
export declare const LiveTabLabel: LiveTabLabelComponent;
|
|
40
|
-
export type PeriodSelectorProps = SegmentedTabsProps
|
|
37
|
+
export type PeriodSelectorProps = Omit<SegmentedTabsProps, 'styles' | 'classNames'> &
|
|
38
|
+
Pick<SegmentedTabsProps, 'styles' | 'classNames'>;
|
|
41
39
|
/**
|
|
42
40
|
* PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
|
|
43
41
|
* It provides transparent background, primary wash active state, and full-width layout by default.
|
|
44
42
|
*/
|
|
45
43
|
export declare const PeriodSelector: React.MemoExoticComponent<
|
|
46
44
|
React.ForwardRefExoticComponent<
|
|
47
|
-
|
|
48
|
-
Pick<
|
|
49
|
-
import('@coinbase/cds-web/tabs').TabsProps<string>,
|
|
50
|
-
'TabComponent' | 'TabsActiveIndicatorComponent'
|
|
51
|
-
>
|
|
52
|
-
> &
|
|
53
|
-
Omit<
|
|
54
|
-
import('@coinbase/cds-web/tabs').TabsProps<string>,
|
|
55
|
-
'TabComponent' | 'TabsActiveIndicatorComponent'
|
|
56
|
-
> &
|
|
45
|
+
Omit<SegmentedTabsProps, 'styles' | 'classNames'> &
|
|
46
|
+
Pick<SegmentedTabsProps, 'styles' | 'classNames'> &
|
|
57
47
|
React.RefAttributes<HTMLElement>
|
|
58
48
|
>
|
|
59
49
|
>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAE9B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAOxE,eAAO,MAAM,6BAA6B,qGAQrC,wBAAwB,oDA0B5B,CAAC;AAEF,eAAO,MAAM,0BAA0B,SAAS,CAAC;AAEjD,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACtF,WAAW,EACX,qBAAqB,CACtB,CAAC;AAYF,KAAK,qBAAqB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,0BAA0B,EAC/F,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAClC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,YAAY,EAAE,qBAiC1B,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,YAAY,CAAC,GACjF,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,YAAY,CAAC,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,cAAc,sMAwC1B,CAAC"}
|
package/dts/chart/area/Area.d.ts
CHANGED
|
@@ -1,36 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SVGProps } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* The color of the area.
|
|
8
|
-
* @default color of the series or 'var(--color-fgPrimary)'
|
|
9
|
-
*/
|
|
10
|
-
fill?: string;
|
|
11
|
-
fillOpacity?: number;
|
|
12
|
-
stroke?: string;
|
|
13
|
-
strokeWidth?: number;
|
|
14
|
-
yAxisId?: string;
|
|
15
|
-
animate?: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* Baseline value for the gradient.
|
|
18
|
-
* When set, overrides the default baseline.
|
|
19
|
-
*/
|
|
20
|
-
baseline?: number;
|
|
21
|
-
};
|
|
22
|
-
export type AreaComponent = React.FC<AreaComponentProps>;
|
|
23
|
-
export type AreaProps = Pick<
|
|
24
|
-
AreaComponentProps,
|
|
25
|
-
'fill' | 'fillOpacity' | 'stroke' | 'strokeWidth' | 'baseline'
|
|
26
|
-
> & {
|
|
3
|
+
import type { PathBaseProps, PathProps } from '../Path';
|
|
4
|
+
import { type ChartPathCurveType, type GradientDefinition } from '../utils';
|
|
5
|
+
export type AreaBaseProps = {
|
|
27
6
|
/**
|
|
28
7
|
* The ID of the series to render. Will be used to find the data from the chart context.
|
|
29
8
|
*/
|
|
30
9
|
seriesId: string;
|
|
31
10
|
/**
|
|
32
11
|
* The curve interpolation method to use for the line.
|
|
33
|
-
* @default '
|
|
12
|
+
* @default 'bump'
|
|
34
13
|
*/
|
|
35
14
|
curve?: ChartPathCurveType;
|
|
36
15
|
/**
|
|
@@ -43,6 +22,52 @@ export type AreaProps = Pick<
|
|
|
43
22
|
* Takes precedence over the type prop if provided.
|
|
44
23
|
*/
|
|
45
24
|
AreaComponent?: AreaComponent;
|
|
25
|
+
/**
|
|
26
|
+
* When true, the area is connected across null values.
|
|
27
|
+
*/
|
|
28
|
+
connectNulls?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* The color of the area.
|
|
31
|
+
* @default color of the series or 'var(--color-fgPrimary)'
|
|
32
|
+
*/
|
|
33
|
+
fill?: PathBaseProps['fill'];
|
|
34
|
+
/**
|
|
35
|
+
* Opacity of the area
|
|
36
|
+
* @note when combined with gradient, both will be applied
|
|
37
|
+
* @default 1
|
|
38
|
+
*/
|
|
39
|
+
fillOpacity?: PathBaseProps['fillOpacity'];
|
|
40
|
+
/**
|
|
41
|
+
* Baseline value for the gradient.
|
|
42
|
+
* When set, overrides the default baseline.
|
|
43
|
+
*/
|
|
44
|
+
baseline?: number;
|
|
45
|
+
/**
|
|
46
|
+
* Gradient configuration.
|
|
47
|
+
* When provided, creates gradient or threshold-based coloring.
|
|
48
|
+
*/
|
|
49
|
+
gradient?: GradientDefinition;
|
|
50
|
+
/**
|
|
51
|
+
* Whether to animate the area.
|
|
52
|
+
* Overrides the animate value from the chart context.
|
|
53
|
+
*/
|
|
54
|
+
animate?: PathBaseProps['animate'];
|
|
55
|
+
};
|
|
56
|
+
export type AreaProps = AreaBaseProps & Pick<PathProps, 'transitions' | 'transition'>;
|
|
57
|
+
export type AreaComponentProps = Pick<
|
|
58
|
+
AreaProps,
|
|
59
|
+
'fill' | 'fillOpacity' | 'baseline' | 'gradient' | 'animate' | 'transitions' | 'transition'
|
|
60
|
+
> & {
|
|
61
|
+
/**
|
|
62
|
+
* Path of the area
|
|
63
|
+
*/
|
|
64
|
+
d: SVGProps<SVGPathElement>['d'];
|
|
65
|
+
/**
|
|
66
|
+
* ID of the y-axis to use.
|
|
67
|
+
* If not provided, defaults to the default y-axis.
|
|
68
|
+
*/
|
|
69
|
+
yAxisId?: string;
|
|
46
70
|
};
|
|
71
|
+
export type AreaComponent = React.FC<AreaComponentProps>;
|
|
47
72
|
export declare const Area: React.NamedExoticComponent<AreaProps>;
|
|
48
73
|
//# sourceMappingURL=Area.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/chart/area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,KAAK,kBAAkB,EAAe,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/chart/area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,KAAK,kBAAkB,EAAe,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAMzF,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACvC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B;;;;OAIG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,GAAG,YAAY,CAAC,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACT,MAAM,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CAC5F,GAAG;IACF;;OAEG;IACH,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,eAAO,MAAM,IAAI,uCAiFhB,CAAC"}
|
|
@@ -1,13 +1,41 @@
|
|
|
1
1
|
import { type XAxisProps, type YAxisProps } from '../axis';
|
|
2
|
-
import { type CartesianChartProps } from '../CartesianChart';
|
|
2
|
+
import { type CartesianChartBaseProps, type CartesianChartProps } from '../CartesianChart';
|
|
3
3
|
import { type LineProps } from '../line/Line';
|
|
4
4
|
import { type AxisConfigProps, type Series } from '../utils';
|
|
5
5
|
import { type AreaProps } from './Area';
|
|
6
6
|
export type AreaSeries = Series &
|
|
7
|
-
Partial<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
Partial<
|
|
8
|
+
Pick<
|
|
9
|
+
AreaProps,
|
|
10
|
+
| 'AreaComponent'
|
|
11
|
+
| 'curve'
|
|
12
|
+
| 'fillOpacity'
|
|
13
|
+
| 'type'
|
|
14
|
+
| 'fill'
|
|
15
|
+
| 'connectNulls'
|
|
16
|
+
| 'transitions'
|
|
17
|
+
| 'transition'
|
|
18
|
+
>
|
|
19
|
+
> &
|
|
20
|
+
Partial<Pick<LineProps, 'LineComponent' | 'strokeWidth' | 'stroke' | 'opacity'>> & {
|
|
21
|
+
/**
|
|
22
|
+
* The type of line to render for this series.
|
|
23
|
+
* Overrides the chart-level lineType if provided.
|
|
24
|
+
* @default 'solid'
|
|
25
|
+
*/
|
|
26
|
+
lineType?: 'solid' | 'dotted';
|
|
27
|
+
};
|
|
28
|
+
export type AreaChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis' | 'series'> &
|
|
29
|
+
Pick<
|
|
30
|
+
AreaProps,
|
|
31
|
+
| 'AreaComponent'
|
|
32
|
+
| 'curve'
|
|
33
|
+
| 'fillOpacity'
|
|
34
|
+
| 'type'
|
|
35
|
+
| 'connectNulls'
|
|
36
|
+
| 'transitions'
|
|
37
|
+
| 'transition'
|
|
38
|
+
> &
|
|
11
39
|
Pick<LineProps, 'LineComponent' | 'strokeWidth'> & {
|
|
12
40
|
/**
|
|
13
41
|
* Configuration objects that define how to visualize the data.
|
|
@@ -40,10 +68,22 @@ export type AreaChartProps = Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'seri
|
|
|
40
68
|
* The type of line to render.
|
|
41
69
|
* @default 'solid'
|
|
42
70
|
*/
|
|
43
|
-
lineType?: 'solid' | 'dotted'
|
|
71
|
+
lineType?: 'solid' | 'dotted';
|
|
72
|
+
/**
|
|
73
|
+
* Configuration for x-axis.
|
|
74
|
+
* Accepts axis config and axis props.
|
|
75
|
+
* To show the axis, set `showXAxis` to true.
|
|
76
|
+
*/
|
|
44
77
|
xAxis?: Partial<AxisConfigProps> & XAxisProps;
|
|
78
|
+
/**
|
|
79
|
+
* Configuration for y-axis.
|
|
80
|
+
* Accepts axis config and axis props.
|
|
81
|
+
* To show the axis, set `showYAxis` to true.
|
|
82
|
+
*/
|
|
45
83
|
yAxis?: Partial<AxisConfigProps> & YAxisProps;
|
|
46
84
|
};
|
|
85
|
+
export type AreaChartProps = AreaChartBaseProps &
|
|
86
|
+
Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'>;
|
|
47
87
|
export declare const AreaChart: import('react').MemoExoticComponent<
|
|
48
88
|
import('react').ForwardRefExoticComponent<
|
|
49
89
|
Omit<AreaChartProps, 'ref'> & import('react').RefAttributes<SVGSVGElement>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/chart/area/AreaChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,
|
|
1
|
+
{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/chart/area/AreaChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EACL,KAAK,eAAe,EAIpB,KAAK,MAAM,EACZ,MAAM,UAAU,CAAC;AAElB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CACL,IAAI,CACF,SAAS,EACP,eAAe,GACf,OAAO,GACP,aAAa,GACb,MAAM,GACN,MAAM,GACN,cAAc,GACd,aAAa,GACb,YAAY,CACf,CACF,GACD,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,GAAG;IACjF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC1F,IAAI,CACF,SAAS,EACP,eAAe,GACf,OAAO,GACP,aAAa,GACb,MAAM,GACN,cAAc,GACd,aAAa,GACb,YAAY,CACf,GACD,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,CAAC,GAAG;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE1D,eAAO,MAAM,SAAS,4JAmLrB,CAAC"}
|
|
@@ -1,7 +1,18 @@
|
|
|
1
1
|
import { type PathProps } from '../Path';
|
|
2
2
|
import type { AreaComponentProps } from './Area';
|
|
3
|
-
export type DottedAreaProps =
|
|
4
|
-
|
|
3
|
+
export type DottedAreaProps = Pick<
|
|
4
|
+
PathProps,
|
|
5
|
+
| 'stroke'
|
|
6
|
+
| 'strokeWidth'
|
|
7
|
+
| 'strokeOpacity'
|
|
8
|
+
| 'strokeLinecap'
|
|
9
|
+
| 'strokeLinejoin'
|
|
10
|
+
| 'strokeDasharray'
|
|
11
|
+
| 'strokeDashoffset'
|
|
12
|
+
| 'clipOffset'
|
|
13
|
+
| 'children'
|
|
14
|
+
> &
|
|
15
|
+
AreaComponentProps & {
|
|
5
16
|
/**
|
|
6
17
|
* Size of the pattern unit (width and height).
|
|
7
18
|
* @default 4
|
|
@@ -14,55 +25,21 @@ export type DottedAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity' | 'cl
|
|
|
14
25
|
dotSize?: number;
|
|
15
26
|
/**
|
|
16
27
|
* Opacity at the peak values (top/bottom of gradient).
|
|
17
|
-
* @
|
|
28
|
+
* @note only used when no gradient is provided
|
|
29
|
+
* @default 1
|
|
18
30
|
*/
|
|
19
31
|
peakOpacity?: number;
|
|
20
32
|
/**
|
|
21
33
|
* Opacity at the baseline (0 or edge closest to 0).
|
|
34
|
+
* @note only used when no gradient is provided
|
|
22
35
|
* @default 0
|
|
23
36
|
*/
|
|
24
37
|
baselineOpacity?: number;
|
|
25
|
-
/**
|
|
26
|
-
* ID of the y-axis to use for gradient range.
|
|
27
|
-
* If not provided, defaults to the default y-axis.
|
|
28
|
-
*/
|
|
29
|
-
yAxisId?: string;
|
|
30
|
-
className?: string;
|
|
31
|
-
style?: React.CSSProperties;
|
|
32
|
-
/**
|
|
33
|
-
* Custom class names for the component.
|
|
34
|
-
*/
|
|
35
|
-
classNames?: {
|
|
36
|
-
/**
|
|
37
|
-
* Custom class name for the root element.
|
|
38
|
-
*/
|
|
39
|
-
root?: string;
|
|
40
|
-
/**
|
|
41
|
-
* Custom class name for the pattern element.
|
|
42
|
-
*/
|
|
43
|
-
pattern?: string;
|
|
44
|
-
/**
|
|
45
|
-
* Custom class name for the area path element.
|
|
46
|
-
*/
|
|
47
|
-
path?: string;
|
|
48
|
-
};
|
|
49
|
-
/**
|
|
50
|
-
* Custom styles for the component.
|
|
51
|
-
*/
|
|
52
|
-
styles?: {
|
|
53
|
-
/**
|
|
54
|
-
* Custom styles for the root element.
|
|
55
|
-
*/
|
|
56
|
-
root?: React.CSSProperties;
|
|
57
|
-
/**
|
|
58
|
-
* Custom styles for the pattern element.
|
|
59
|
-
*/
|
|
60
|
-
pattern?: React.CSSProperties;
|
|
61
|
-
/**
|
|
62
|
-
* Custom styles for the area path element.
|
|
63
|
-
*/
|
|
64
|
-
path?: React.CSSProperties;
|
|
65
|
-
};
|
|
66
38
|
};
|
|
39
|
+
/**
|
|
40
|
+
* A customizable dotted area gradient component.
|
|
41
|
+
* When no gradient is provided, renders a default gradient based
|
|
42
|
+
* on the fill color and peak/baseline opacities.
|
|
43
|
+
*/
|
|
67
44
|
export declare const DottedArea: import('react').NamedExoticComponent<DottedAreaProps>;
|
|
68
45
|
//# sourceMappingURL=DottedArea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/DottedArea.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/DottedArea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,YAAY,GACZ,UAAU,CACb,GACC,kBAAkB,GAAG;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,UAAU,uDA4EtB,CAAC"}
|