@coinbase/cds-mobile-visualization 3.4.0-beta.4 → 3.4.0-beta.6
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 +13 -0
- package/dts/chart/CartesianChart.d.ts +57 -33
- package/dts/chart/CartesianChart.d.ts.map +1 -1
- package/dts/chart/ChartContextBridge.d.ts +28 -0
- package/dts/chart/ChartContextBridge.d.ts.map +1 -0
- package/dts/chart/Path.d.ts +77 -34
- package/dts/chart/Path.d.ts.map +1 -1
- package/dts/chart/PeriodSelector.d.ts +1 -1
- package/dts/chart/PeriodSelector.d.ts.map +1 -1
- package/dts/chart/area/Area.d.ts +42 -27
- package/dts/chart/area/Area.d.ts.map +1 -1
- package/dts/chart/area/AreaChart.d.ts +51 -10
- package/dts/chart/area/AreaChart.d.ts.map +1 -1
- package/dts/chart/area/DottedArea.d.ts +21 -2
- package/dts/chart/area/DottedArea.d.ts.map +1 -1
- package/dts/chart/area/GradientArea.d.ts +19 -13
- package/dts/chart/area/GradientArea.d.ts.map +1 -1
- package/dts/chart/area/SolidArea.d.ts +17 -2
- package/dts/chart/area/SolidArea.d.ts.map +1 -1
- package/dts/chart/axis/Axis.d.ts +68 -78
- 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 +16 -13
- package/dts/chart/bar/Bar.d.ts.map +1 -1
- package/dts/chart/bar/BarChart.d.ts +36 -20
- package/dts/chart/bar/BarChart.d.ts.map +1 -1
- package/dts/chart/bar/BarPlot.d.ts +2 -1
- package/dts/chart/bar/BarPlot.d.ts.map +1 -1
- package/dts/chart/bar/BarStack.d.ts +39 -48
- package/dts/chart/bar/BarStack.d.ts.map +1 -1
- package/dts/chart/bar/BarStackGroup.d.ts +1 -0
- package/dts/chart/bar/BarStackGroup.d.ts.map +1 -1
- package/dts/chart/bar/DefaultBar.d.ts +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 +25 -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/line/DefaultReferenceLineLabel.d.ts +9 -0
- package/dts/chart/line/DefaultReferenceLineLabel.d.ts.map +1 -0
- package/dts/chart/line/DottedLine.d.ts +13 -5
- package/dts/chart/line/DottedLine.d.ts.map +1 -1
- package/dts/chart/line/Line.d.ts +62 -25
- package/dts/chart/line/Line.d.ts.map +1 -1
- package/dts/chart/line/LineChart.d.ts +43 -9
- package/dts/chart/line/LineChart.d.ts.map +1 -1
- package/dts/chart/line/ReferenceLine.d.ts +65 -22
- package/dts/chart/line/ReferenceLine.d.ts.map +1 -1
- package/dts/chart/line/SolidLine.d.ts +8 -5
- 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 +120 -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 +8 -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 +11 -0
- package/dts/chart/scrubber/DefaultScrubberLabel.d.ts.map +1 -0
- package/dts/chart/scrubber/Scrubber.d.ts +168 -41
- package/dts/chart/scrubber/Scrubber.d.ts.map +1 -1
- package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts +44 -0
- package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts.map +1 -0
- package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts +31 -0
- package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map +1 -0
- package/dts/chart/scrubber/ScrubberProvider.d.ts +6 -3
- package/dts/chart/scrubber/ScrubberProvider.d.ts.map +1 -1
- 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 +151 -77
- 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/chart.d.ts +34 -7
- package/dts/chart/utils/chart.d.ts.map +1 -1
- package/dts/chart/utils/context.d.ts +28 -7
- package/dts/chart/utils/context.d.ts.map +1 -1
- package/dts/chart/utils/gradient.d.ts +117 -0
- package/dts/chart/utils/gradient.d.ts.map +1 -0
- package/dts/chart/utils/index.d.ts +3 -0
- package/dts/chart/utils/index.d.ts.map +1 -1
- package/dts/chart/utils/path.d.ts +53 -0
- package/dts/chart/utils/path.d.ts.map +1 -1
- package/dts/chart/utils/point.d.ts +60 -1
- package/dts/chart/utils/point.d.ts.map +1 -1
- package/dts/chart/utils/scale.d.ts +91 -0
- package/dts/chart/utils/scale.d.ts.map +1 -1
- package/dts/chart/utils/scrubber.d.ts +39 -0
- package/dts/chart/utils/scrubber.d.ts.map +1 -0
- package/dts/chart/utils/transition.d.ts +140 -0
- package/dts/chart/utils/transition.d.ts.map +1 -0
- package/esm/chart/CartesianChart.js +164 -70
- package/esm/chart/ChartContextBridge.js +148 -0
- package/esm/chart/Path.js +196 -113
- package/esm/chart/PeriodSelector.js +1 -1
- package/esm/chart/__stories__/CartesianChart.stories.js +371 -129
- package/esm/chart/__stories__/Chart.stories.js +2 -4
- package/esm/chart/area/Area.js +25 -35
- package/esm/chart/area/AreaChart.js +17 -12
- package/esm/chart/area/DottedArea.js +61 -109
- package/esm/chart/area/GradientArea.js +35 -91
- package/esm/chart/area/SolidArea.js +22 -8
- package/esm/chart/area/__stories__/AreaChart.stories.js +1 -1
- package/esm/chart/axis/Axis.js +2 -0
- package/esm/chart/axis/DefaultAxisTickLabel.js +11 -0
- package/esm/chart/axis/XAxis.js +62 -56
- package/esm/chart/axis/YAxis.js +58 -52
- package/esm/chart/axis/__stories__/Axis.stories.js +0 -1
- package/esm/chart/axis/index.js +1 -0
- package/esm/chart/bar/Bar.js +3 -1
- package/esm/chart/bar/BarChart.js +15 -37
- package/esm/chart/bar/BarPlot.js +41 -35
- package/esm/chart/bar/BarStack.js +75 -38
- package/esm/chart/bar/BarStackGroup.js +6 -16
- package/esm/chart/bar/DefaultBar.js +26 -48
- package/esm/chart/bar/DefaultBarStack.js +23 -58
- package/esm/chart/bar/__stories__/BarChart.stories.js +463 -77
- package/esm/chart/gradient/Gradient.js +53 -0
- package/esm/chart/gradient/index.js +1 -0
- package/esm/chart/index.js +3 -1
- package/esm/chart/line/DefaultReferenceLineLabel.js +66 -0
- package/esm/chart/line/DottedLine.js +29 -14
- package/esm/chart/line/Line.js +106 -67
- package/esm/chart/line/LineChart.js +20 -14
- package/esm/chart/line/ReferenceLine.js +73 -62
- package/esm/chart/line/SolidLine.js +25 -10
- package/esm/chart/line/__stories__/LineChart.stories.js +2098 -1975
- package/esm/chart/line/__stories__/ReferenceLine.stories.js +83 -28
- package/esm/chart/line/index.js +1 -1
- package/esm/chart/point/DefaultPointLabel.js +39 -0
- package/esm/chart/point/Point.js +188 -0
- package/esm/chart/point/index.js +2 -0
- package/esm/chart/scrubber/DefaultScrubberBeacon.js +179 -0
- package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js +43 -0
- package/esm/chart/scrubber/DefaultScrubberLabel.js +28 -0
- package/esm/chart/scrubber/Scrubber.js +130 -148
- package/esm/chart/scrubber/ScrubberBeaconGroup.js +161 -0
- package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +185 -0
- package/esm/chart/scrubber/ScrubberProvider.js +46 -54
- package/esm/chart/scrubber/index.js +3 -1
- package/esm/chart/text/ChartText.js +242 -174
- package/esm/chart/text/{SmartChartTextGroup.js → ChartTextGroup.js} +6 -5
- package/esm/chart/text/index.js +1 -1
- package/esm/chart/utils/chart.js +44 -3
- package/esm/chart/utils/gradient.js +305 -0
- package/esm/chart/utils/index.js +3 -0
- package/esm/chart/utils/path.js +76 -8
- package/esm/chart/utils/point.js +116 -5
- package/esm/chart/utils/scale.js +230 -1
- package/esm/chart/utils/scrubber.js +139 -0
- package/esm/chart/utils/transition.js +221 -0
- package/package.json +11 -9
- package/dts/chart/Point.d.ts +0 -103
- package/dts/chart/Point.d.ts.map +0 -1
- package/dts/chart/line/GradientLine.d.ts +0 -45
- package/dts/chart/line/GradientLine.d.ts.map +0 -1
- package/dts/chart/scrubber/ScrubberBeacon.d.ts +0 -75
- package/dts/chart/scrubber/ScrubberBeacon.d.ts.map +0 -1
- package/dts/chart/text/SmartChartTextGroup.d.ts.map +0 -1
- package/esm/chart/Point.js +0 -111
- package/esm/chart/line/GradientLine.js +0 -62
- package/esm/chart/scrubber/ScrubberBeacon.js +0 -199
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAA4C,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAG/F,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC,GAAG;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsJ5D,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"}
|
|
@@ -1,20 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
|
|
2
|
+
import type { Rect } from '@coinbase/cds-common/types';
|
|
3
|
+
import {
|
|
4
|
+
type AnimatedProp,
|
|
5
|
+
FontSlant,
|
|
6
|
+
FontWeight,
|
|
7
|
+
type SkParagraph,
|
|
8
|
+
TextAlign,
|
|
9
|
+
} from '@shopify/react-native-skia';
|
|
4
10
|
import { type ChartInset } from '../utils';
|
|
5
|
-
type ValidChartTextChildElements =
|
|
6
|
-
| React.ReactElement<TSpanProps, 'TSpan'>
|
|
7
|
-
| React.ReactElement<TextPathProps, 'TextPath'>;
|
|
8
11
|
/**
|
|
9
12
|
* The supported content types for ChartText.
|
|
13
|
+
* Pass a string for simple text, or a SkParagraph for advanced rich text formatting.
|
|
10
14
|
*/
|
|
11
|
-
export type ChartTextChildren =
|
|
12
|
-
| string
|
|
13
|
-
| number
|
|
14
|
-
| null
|
|
15
|
-
| undefined
|
|
16
|
-
| ValidChartTextChildElements
|
|
17
|
-
| ValidChartTextChildElements[];
|
|
15
|
+
export type ChartTextChildren = AnimatedProp<string | SkParagraph>;
|
|
18
16
|
/**
|
|
19
17
|
* Horizontal alignment options for chart text.
|
|
20
18
|
*/
|
|
@@ -23,68 +21,144 @@ export type TextHorizontalAlignment = 'left' | 'center' | 'right';
|
|
|
23
21
|
* Vertical alignment options for chart text.
|
|
24
22
|
*/
|
|
25
23
|
export type TextVerticalAlignment = 'top' | 'middle' | 'bottom';
|
|
26
|
-
export type
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
24
|
+
export type ChartTextBaseProps = {
|
|
25
|
+
/**
|
|
26
|
+
* The text color.
|
|
27
|
+
* @default theme.color.fgMuted
|
|
28
|
+
*/
|
|
29
|
+
color?: string;
|
|
30
|
+
/**
|
|
31
|
+
* The background color of the text's background rectangle.
|
|
32
|
+
* @default theme.color.bgElevation1 if elevated, otherwise 'transparent'
|
|
33
|
+
*/
|
|
34
|
+
background?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Whether the text's background should have an elevated appearance with a shadow.
|
|
37
|
+
*/
|
|
38
|
+
elevated?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* When true, disables automatic repositioning to fit within bounds.
|
|
41
|
+
*/
|
|
42
|
+
disableRepositioning?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Optional bounds rectangle to constrain the text within. If provided, text will be positioned
|
|
45
|
+
* to stay within these bounds. Defaults to the full chart bounds when not provided.
|
|
46
|
+
*/
|
|
47
|
+
bounds?: Rect;
|
|
48
|
+
/**
|
|
49
|
+
* Callback fired when text dimensions change.
|
|
50
|
+
* Used for collision detection and smart positioning.
|
|
51
|
+
* Returns the adjusted position and dimensions.
|
|
52
|
+
*/
|
|
53
|
+
onDimensionsChange?: (rect: Rect) => void;
|
|
54
|
+
/**
|
|
55
|
+
* Inset around the text content for the background rect.
|
|
56
|
+
* Only affects the background, text position remains unchanged.
|
|
57
|
+
*/
|
|
58
|
+
inset?: number | ChartInset;
|
|
59
|
+
/**
|
|
60
|
+
* Border radius for the background rectangle.
|
|
61
|
+
* @default 4
|
|
62
|
+
*/
|
|
63
|
+
borderRadius?: number;
|
|
64
|
+
};
|
|
65
|
+
export type ChartTextProps = ChartTextBaseProps & {
|
|
66
|
+
/**
|
|
67
|
+
* The text content to display.
|
|
68
|
+
* Pass a string for simple text rendering, or build your own SkParagraph for advanced formatting.
|
|
69
|
+
* @example
|
|
70
|
+
* // Simple text
|
|
71
|
+
* <ChartText x={100} y={100}>Hello World</ChartText>
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* // Advanced rich text with SkParagraph
|
|
75
|
+
* const paragraph = useMemo(() => {
|
|
76
|
+
* const builder = Skia.ParagraphBuilder.Make(style, fontProvider);
|
|
77
|
+
* builder.pushStyle({ fontSize: 14, fontWeight: 400 });
|
|
78
|
+
* builder.addText('Regular ');
|
|
79
|
+
* builder.pushStyle({ fontSize: 14, fontWeight: 700 });
|
|
80
|
+
* builder.addText('Bold');
|
|
81
|
+
* builder.pop();
|
|
82
|
+
* const para = builder.build();
|
|
83
|
+
* para.layout(width);
|
|
84
|
+
* return para;
|
|
85
|
+
* }, [fontProvider, width]);
|
|
86
|
+
* <ChartText x={100} y={100}>{paragraph}</ChartText>
|
|
87
|
+
*/
|
|
88
|
+
children: ChartTextChildren;
|
|
89
|
+
/**
|
|
90
|
+
* The desired x position in pixels.
|
|
91
|
+
* @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
|
|
92
|
+
*/
|
|
93
|
+
x: AnimatedProp<number>;
|
|
94
|
+
/**
|
|
95
|
+
* The desired y position in pixels.
|
|
96
|
+
* @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
|
|
97
|
+
*/
|
|
98
|
+
y: AnimatedProp<number>;
|
|
99
|
+
/**
|
|
100
|
+
* Horizontal offset in pixels to adjust the final x position.
|
|
101
|
+
* Useful for fine-tuning placement without affecting alignment.
|
|
102
|
+
*/
|
|
103
|
+
dx?: AnimatedProp<number>;
|
|
104
|
+
/**
|
|
105
|
+
* Vertical offset in pixels to adjust the final y position.
|
|
106
|
+
* Useful for fine-tuning placement or elevation.
|
|
107
|
+
*/
|
|
108
|
+
dy?: AnimatedProp<number>;
|
|
109
|
+
/**
|
|
110
|
+
* Horizontal alignment of the component.
|
|
111
|
+
* @default 'center'
|
|
112
|
+
*/
|
|
113
|
+
horizontalAlignment?: AnimatedProp<TextHorizontalAlignment>;
|
|
114
|
+
/**
|
|
115
|
+
* Vertical alignment of the component.
|
|
116
|
+
* @default 'middle'
|
|
117
|
+
*/
|
|
118
|
+
verticalAlignment?: AnimatedProp<TextVerticalAlignment>;
|
|
119
|
+
/**
|
|
120
|
+
* Text alignment of the SkParagraph
|
|
121
|
+
* @note when providing a custom SkParagraph as children, you still need to pass in the alignment used.
|
|
122
|
+
* @default TextAlign.Left
|
|
123
|
+
*/
|
|
124
|
+
paragraphAlignment?: TextAlign;
|
|
125
|
+
/**
|
|
126
|
+
* Theme font to use for text rendering.
|
|
127
|
+
* This sets both fontSize and fontWeight from the theme.
|
|
128
|
+
* @note this will not adjust the actual font family used,
|
|
129
|
+
* that is only adjusted by using fontFamilies on ChartText or at chart level
|
|
130
|
+
* @default 'label2'
|
|
131
|
+
*/
|
|
132
|
+
font?: ThemeVars.Font;
|
|
133
|
+
/**
|
|
134
|
+
* Font families override for Skia
|
|
135
|
+
* @example
|
|
136
|
+
* ['Helvetica', 'sans-serif']
|
|
137
|
+
*/
|
|
138
|
+
fontFamilies?: string[];
|
|
139
|
+
/**
|
|
140
|
+
* Font size override in pixels.
|
|
141
|
+
* Overrides the size from the font prop.
|
|
142
|
+
* @example
|
|
143
|
+
* // Use label1 font weight but with custom size
|
|
144
|
+
* <ChartText font="label1" fontSize={18}>Text</ChartText>
|
|
145
|
+
*/
|
|
146
|
+
fontSize?: number;
|
|
147
|
+
/**
|
|
148
|
+
* Font weight.
|
|
149
|
+
* Overrides the weight from the font prop.
|
|
150
|
+
*/
|
|
151
|
+
fontWeight?: FontWeight;
|
|
152
|
+
/**
|
|
153
|
+
* Font style (normal or italic).
|
|
154
|
+
* @default FontSlant.Upright
|
|
155
|
+
*/
|
|
156
|
+
fontStyle?: FontSlant;
|
|
157
|
+
/**
|
|
158
|
+
* Opacity of the text and background.
|
|
159
|
+
* @default 1
|
|
160
|
+
*/
|
|
161
|
+
opacity?: AnimatedProp<number>;
|
|
162
|
+
};
|
|
163
|
+
export declare const ChartText: import('react').NamedExoticComponent<ChartTextProps>;
|
|
90
164
|
//# sourceMappingURL=ChartText.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../src/chart/text/ChartText.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../src/chart/text/ChartText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAGvD,OAAO,EACL,KAAK,YAAY,EAEjB,SAAS,EACT,UAAU,EAOV,KAAK,WAAW,EAEhB,SAAS,EAEV,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,KAAK,UAAU,EAA2D,MAAM,UAAU,CAAC;AAwBpG;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;AAEnE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACxB;;;OAGG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACxB;;;OAGG;IACH,EAAE,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC,uBAAuB,CAAC,CAAC;IAC5D;;;OAGG;IACH,iBAAiB,CAAC,EAAE,YAAY,CAAC,qBAAqB,CAAC,CAAC;IACxD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,SAAS,sDA0TrB,CAAC"}
|
|
@@ -23,7 +23,7 @@ export type TextLabelData = {
|
|
|
23
23
|
export type TextLabelDataWithKey = TextLabelData & {
|
|
24
24
|
key: string;
|
|
25
25
|
};
|
|
26
|
-
export type
|
|
26
|
+
export type ChartTextGroupBaseProps = {
|
|
27
27
|
/**
|
|
28
28
|
* Array of text labels to display
|
|
29
29
|
*/
|
|
@@ -42,7 +42,13 @@ export type SmartChartTextGroupProps = {
|
|
|
42
42
|
* Common props to apply to all ChartText components
|
|
43
43
|
*/
|
|
44
44
|
chartTextProps?: Partial<ChartTextProps>;
|
|
45
|
+
/**
|
|
46
|
+
* Custom component to render each label
|
|
47
|
+
* @default ChartText
|
|
48
|
+
*/
|
|
49
|
+
LabelComponent?: React.FC<ChartTextProps>;
|
|
45
50
|
};
|
|
51
|
+
export type ChartTextGroupProps = ChartTextGroupBaseProps;
|
|
46
52
|
/**
|
|
47
53
|
* A smart text display component that prevents label overlap through collision detection.
|
|
48
54
|
*
|
|
@@ -51,5 +57,5 @@ export type SmartChartTextGroupProps = {
|
|
|
51
57
|
*
|
|
52
58
|
* The component focuses solely on overlap prevention logic for better separation of concerns.
|
|
53
59
|
*/
|
|
54
|
-
export declare const
|
|
55
|
-
//# sourceMappingURL=
|
|
60
|
+
export declare const ChartTextGroup: import('react').NamedExoticComponent<ChartTextGroupBaseProps>;
|
|
61
|
+
//# sourceMappingURL=ChartTextGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChartTextGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/text/ChartTextGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAErF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAiB1D;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,+DA8L1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/text/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/text/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import type { AnimatedProp } from '@shopify/react-native-skia';
|
|
2
|
+
import type { GradientDefinition } from './gradient';
|
|
1
3
|
export declare const defaultStackId = 'DEFAULT_STACK_ID';
|
|
2
4
|
export type AxisBounds = {
|
|
3
5
|
min: number;
|
|
@@ -11,11 +13,11 @@ export type AxisBounds = {
|
|
|
11
13
|
export declare const isValidBounds: (bounds: Partial<AxisBounds>) => bounds is AxisBounds;
|
|
12
14
|
export type Series = {
|
|
13
15
|
/**
|
|
14
|
-
*
|
|
16
|
+
* Id of the series.
|
|
15
17
|
*/
|
|
16
18
|
id: string;
|
|
17
19
|
/**
|
|
18
|
-
*
|
|
20
|
+
* Data array for this series. Use null values to create gaps in the visualization.
|
|
19
21
|
*
|
|
20
22
|
* Can be either:
|
|
21
23
|
* - Array of numbers: `[10, -5, 20]`
|
|
@@ -23,20 +25,28 @@ export type Series = {
|
|
|
23
25
|
*/
|
|
24
26
|
data?: Array<number | null> | Array<[number, number] | null>;
|
|
25
27
|
/**
|
|
26
|
-
*
|
|
28
|
+
* Label of the series.
|
|
29
|
+
* Used for scrubber beacon labels.
|
|
27
30
|
*/
|
|
28
|
-
label?: string
|
|
31
|
+
label?: string;
|
|
29
32
|
/**
|
|
30
|
-
*
|
|
33
|
+
* Color for the series.
|
|
34
|
+
* If gradient is provided, that will be used for chart components
|
|
35
|
+
* Color will still be used by scrubber beacon labels
|
|
31
36
|
*/
|
|
32
37
|
color?: string;
|
|
33
38
|
/**
|
|
34
|
-
*
|
|
39
|
+
* Color gradient configuration.
|
|
40
|
+
* Takes precedence over color except for scrubber beacon labels.
|
|
41
|
+
*/
|
|
42
|
+
gradient?: GradientDefinition;
|
|
43
|
+
/**
|
|
44
|
+
* Id of the y-axis this series uses.
|
|
35
45
|
* Defaults to defaultAxisId if not specified.
|
|
36
46
|
*/
|
|
37
47
|
yAxisId?: string;
|
|
38
48
|
/**
|
|
39
|
-
*
|
|
49
|
+
* Id of the stack group this series belongs to.
|
|
40
50
|
* Series with the same stackId value will be stacked together.
|
|
41
51
|
* If not specified, the series will not be stacked.
|
|
42
52
|
*/
|
|
@@ -61,6 +71,17 @@ export declare const getChartDomain: (
|
|
|
61
71
|
export declare const getStackedSeriesData: (
|
|
62
72
|
series: Series[],
|
|
63
73
|
) => Map<string, Array<[number, number] | null>>;
|
|
74
|
+
/**
|
|
75
|
+
* Extracts line data values from series data that may contain tuples.
|
|
76
|
+
* For tuple data [[baseline, value]], extracts the last value.
|
|
77
|
+
* For numeric data [value], returns as-is.
|
|
78
|
+
*
|
|
79
|
+
* @param data - Array of numbers, tuples, or null values
|
|
80
|
+
* @returns Array of numbers or null values
|
|
81
|
+
*/
|
|
82
|
+
export declare const getLineData: (
|
|
83
|
+
data?: Array<number | null> | Array<[number, number] | null>,
|
|
84
|
+
) => Array<number | null>;
|
|
64
85
|
/**
|
|
65
86
|
* Calculates the range of a chart from series data.
|
|
66
87
|
* Range represents the range of y-values from the data.
|
|
@@ -94,4 +115,10 @@ export declare const getChartInset: (
|
|
|
94
115
|
inset?: number | Partial<ChartInset>,
|
|
95
116
|
defaults?: ChartInset,
|
|
96
117
|
) => ChartInset;
|
|
118
|
+
/**
|
|
119
|
+
* Unwraps an optionally animated value to get the raw value.
|
|
120
|
+
* @param value - The value to unwrap.
|
|
121
|
+
* @returns The raw value.
|
|
122
|
+
*/
|
|
123
|
+
export declare const unwrapAnimatedValue: <T>(value: AnimatedProp<T>) => T;
|
|
97
124
|
//# sourceMappingURL=chart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/chart.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/chart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,eAAO,MAAM,cAAc,qBAAqB,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,QAAQ,OAAO,CAAC,UAAU,CAAC,KAAG,MAAM,IAAI,UAChB,CAAC;AAEvD,MAAM,MAAM,MAAM,GAAG;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EAAE,EAChB,MAAM,MAAM,EACZ,MAAM,MAAM,KACX,OAAO,CAAC,UAAU,CAoBpB,CAAC;AAcF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EAAE,KACf,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CA0E5C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,KAC3D,KAAK,CAAC,MAAM,GAAG,IAAI,CAerB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EAAE,EAChB,MAAM,MAAM,EACZ,MAAM,MAAM,KACX,OAAO,CAAC,UAAU,CA2EpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,UAK/B,CAAC;AAEF;;;;;GAKG;AACH;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,EACpC,WAAW,UAAU,KACpB,UAuBF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAE,OAAO,YAAY,CAAC,CAAC,CAAC,KAAG,CAM/D,CAAC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import type { SharedValue } from 'react-native-reanimated';
|
|
1
2
|
import type { Rect } from '@coinbase/cds-common/types';
|
|
3
|
+
import type { SkTypefaceFontProvider } from '@shopify/react-native-skia';
|
|
2
4
|
import type { AxisConfig } from './axis';
|
|
3
5
|
import type { Series } from './chart';
|
|
4
|
-
import type { ChartScaleFunction } from './scale';
|
|
6
|
+
import type { ChartScaleFunction, SerializableScale } from './scale';
|
|
5
7
|
/**
|
|
6
8
|
* Context value for Cartesian (X/Y) coordinate charts.
|
|
7
9
|
* Contains axis-specific methods and properties for rectangular coordinate systems.
|
|
@@ -34,6 +36,15 @@ export type CartesianChartContextValue = {
|
|
|
34
36
|
* Height of the chart SVG.
|
|
35
37
|
*/
|
|
36
38
|
height: number;
|
|
39
|
+
/**
|
|
40
|
+
* Default font families to use within ChartText.
|
|
41
|
+
* When not set, should use the default for the system.
|
|
42
|
+
*/
|
|
43
|
+
fontFamilies?: string[];
|
|
44
|
+
/**
|
|
45
|
+
* Skia font provider.
|
|
46
|
+
*/
|
|
47
|
+
fontProvider: SkTypefaceFontProvider;
|
|
37
48
|
/**
|
|
38
49
|
* Get x-axis configuration.
|
|
39
50
|
*/
|
|
@@ -52,10 +63,25 @@ export type CartesianChartContextValue = {
|
|
|
52
63
|
* @param id - The axis ID. Defaults to defaultAxisId.
|
|
53
64
|
*/
|
|
54
65
|
getYScale: (id?: string) => ChartScaleFunction | undefined;
|
|
66
|
+
/**
|
|
67
|
+
* Get x-axis serializable scale function that can be used in worklets.
|
|
68
|
+
*/
|
|
69
|
+
getXSerializableScale: () => SerializableScale | undefined;
|
|
70
|
+
/**
|
|
71
|
+
* Get y-axis serializable scale function by ID that can be used in worklets.
|
|
72
|
+
* @param id - The axis ID. Defaults to defaultAxisId.
|
|
73
|
+
*/
|
|
74
|
+
getYSerializableScale: (id?: string) => SerializableScale | undefined;
|
|
55
75
|
/**
|
|
56
76
|
* Drawing area of the chart.
|
|
57
77
|
*/
|
|
58
78
|
drawingArea: Rect;
|
|
79
|
+
/**
|
|
80
|
+
* Length of the data domain.
|
|
81
|
+
* This is equal to the length of xAxis.data or the longest series data length
|
|
82
|
+
* This equals the number of possible scrubber positions
|
|
83
|
+
*/
|
|
84
|
+
dataLength: number;
|
|
59
85
|
/**
|
|
60
86
|
* Registers an axis.
|
|
61
87
|
* Used by axis components to reserve space in the chart, preventing overlap with the drawing area.
|
|
@@ -83,12 +109,7 @@ export type ScrubberContextValue = {
|
|
|
83
109
|
/**
|
|
84
110
|
* The current position of the scrubber.
|
|
85
111
|
*/
|
|
86
|
-
scrubberPosition
|
|
87
|
-
/**
|
|
88
|
-
* Callback fired when the scrubber position changes.
|
|
89
|
-
* Receives the dataIndex of the scrubber or undefined when not scrubbing.
|
|
90
|
-
*/
|
|
91
|
-
onScrubberPositionChange: (index: number | undefined) => void;
|
|
112
|
+
scrubberPosition: SharedValue<number | undefined>;
|
|
92
113
|
};
|
|
93
114
|
export declare const ScrubberContext: import('react').Context<ScrubberContextValue | undefined>;
|
|
94
115
|
export declare const useScrubberContext: () => ScrubberContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,SAAS,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD;;;;OAIG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACjF;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,YAAY,EAAE,sBAAsB,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,MAAM,UAAU,GAAG,SAAS,CAAC;IACvC;;;OAGG;IACH,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,UAAU,GAAG,SAAS,CAAC;IAClD;;OAEG;IACH,SAAS,EAAE,MAAM,kBAAkB,GAAG,SAAS,CAAC;IAChD;;;OAGG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,qBAAqB,EAAE,MAAM,iBAAiB,GAAG,SAAS,CAAC;IAC3D;;;OAGG;IACH,qBAAqB,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,iBAAiB,GAAG,SAAS,CAAC;IACtE;;OAEG;IACH,WAAW,EAAE,IAAI,CAAC;IAClB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChG;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,SAAS,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,eAAe,2DAA6D,CAAC;AAE1F,eAAO,MAAM,kBAAkB,QAAO,oBAMrC,CAAC"}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import type { AxisBounds } from './chart';
|
|
2
|
+
import { type ChartScaleFunction, type SerializableScale } from './scale';
|
|
3
|
+
/**
|
|
4
|
+
* Defines a color transition point in the gradient
|
|
5
|
+
*/
|
|
6
|
+
export type GradientStop = {
|
|
7
|
+
/**
|
|
8
|
+
* Position in data space.
|
|
9
|
+
* Multiple stops at the same offset create hard color transitions.
|
|
10
|
+
*/
|
|
11
|
+
offset: number;
|
|
12
|
+
/** Color at the stop (any valid Skia color) */
|
|
13
|
+
color: string;
|
|
14
|
+
/** Optional opacity (0-1). Defaults to 1. */
|
|
15
|
+
opacity?: number;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Defines a gradient.
|
|
19
|
+
*/
|
|
20
|
+
export type GradientDefinition = {
|
|
21
|
+
/**
|
|
22
|
+
* Axis that the gradient maps to.
|
|
23
|
+
* @default 'y'
|
|
24
|
+
*/
|
|
25
|
+
axis?: 'x' | 'y';
|
|
26
|
+
/**
|
|
27
|
+
* Gradient stops with colors and positions.
|
|
28
|
+
* Can be an array of stop objects or a function that receives domain bounds.
|
|
29
|
+
*/
|
|
30
|
+
stops: GradientStop[] | ((domain: AxisBounds) => GradientStop[]);
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Resolves gradient stops, handling both static arrays and function forms.
|
|
34
|
+
* When stops is a function, calls it with the domain bounds.
|
|
35
|
+
*/
|
|
36
|
+
export declare const getGradientStops: (
|
|
37
|
+
stops: GradientStop[] | ((domain: AxisBounds) => GradientStop[]),
|
|
38
|
+
domain: AxisBounds,
|
|
39
|
+
) => GradientStop[];
|
|
40
|
+
/**
|
|
41
|
+
* Adds an opacity to a color
|
|
42
|
+
* Returns an rgba string.
|
|
43
|
+
*/
|
|
44
|
+
export declare const getColorWithOpacity: (color1: string, opacity: number) => string;
|
|
45
|
+
/**
|
|
46
|
+
* Creates a gradient configuration for SVG components.
|
|
47
|
+
* Processes a GradientDefinition into a renderable GradientConfig.
|
|
48
|
+
* Supports both numeric scales (linear, log) and categorical scales (band).
|
|
49
|
+
*
|
|
50
|
+
* @param gradient - GradientDefinition configuration (required)
|
|
51
|
+
* @param xScale - X-axis scale (required)
|
|
52
|
+
* @param yScale - Y-axis scale (required)
|
|
53
|
+
* @returns GradientConfig or null if gradient processing fails
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* const gradientConfig = useMemo(() => {
|
|
57
|
+
* if (!gradient || !xScale || !yScale) return;
|
|
58
|
+
* return getGradientConfig(gradient, xScale, yScale);
|
|
59
|
+
* }, [gradient, xScale, yScale]);
|
|
60
|
+
*
|
|
61
|
+
* if (gradientConfig) {
|
|
62
|
+
* return (
|
|
63
|
+
* <defs>
|
|
64
|
+
* <Gradient
|
|
65
|
+
* config={gradientConfig}
|
|
66
|
+
* direction={gradient.axis === 'x' ? 'horizontal' : 'vertical'}
|
|
67
|
+
* id={gradientId}
|
|
68
|
+
* />
|
|
69
|
+
* </defs>
|
|
70
|
+
* );
|
|
71
|
+
* }
|
|
72
|
+
*/
|
|
73
|
+
export declare const getGradientConfig: (
|
|
74
|
+
gradient: GradientDefinition,
|
|
75
|
+
xScale: ChartScaleFunction,
|
|
76
|
+
yScale: ChartScaleFunction,
|
|
77
|
+
) => GradientStop[] | undefined;
|
|
78
|
+
/**
|
|
79
|
+
* Evaluates the color at a specific data value based on the gradient stops, ignoring opacity.
|
|
80
|
+
* @param stops - The gradient stops configuration
|
|
81
|
+
* @param dataValue - The data value to evaluate (for band scales, this is the index)
|
|
82
|
+
* @param scale - The scale to use for value mapping (handles log scales correctly)
|
|
83
|
+
* @returns The color string at this data value, or undefined if invalid
|
|
84
|
+
*/
|
|
85
|
+
export declare const evaluateGradientAtValue: (
|
|
86
|
+
stops: GradientStop[],
|
|
87
|
+
dataValue: number,
|
|
88
|
+
scale: SerializableScale | ChartScaleFunction,
|
|
89
|
+
) => string | undefined;
|
|
90
|
+
/**
|
|
91
|
+
* Determines the baseline value for the gradient area by finding the value
|
|
92
|
+
* within the axis bounds that is closest to the target baseline.
|
|
93
|
+
*
|
|
94
|
+
* @param axisBounds - The min and max bounds of the axis
|
|
95
|
+
* @param baseline - The target baseline value (defaults to 0)
|
|
96
|
+
* @returns The value within bounds closest to the baseline
|
|
97
|
+
*/
|
|
98
|
+
export declare const getBaseline: (axisBounds: AxisBounds, baseline?: number) => number;
|
|
99
|
+
/**
|
|
100
|
+
* Generates a gradient definition for the area chart based on the axis bounds
|
|
101
|
+
* and styling parameters. Ensures gradient stops are in ascending order.
|
|
102
|
+
*
|
|
103
|
+
* @param axisBounds - The min and max bounds of the axis
|
|
104
|
+
* @param baselineValue - The baseline value for the gradient
|
|
105
|
+
* @param fill - The color to use for the gradient
|
|
106
|
+
* @param peakOpacity - Opacity at the peak of the gradient
|
|
107
|
+
* @param baselineOpacity - Opacity at the baseline
|
|
108
|
+
* @returns A gradient definition with y-axis stops in ascending order
|
|
109
|
+
*/
|
|
110
|
+
export declare const createGradient: (
|
|
111
|
+
axisBounds: AxisBounds,
|
|
112
|
+
baselineValue: number,
|
|
113
|
+
fill: string,
|
|
114
|
+
peakOpacity: number,
|
|
115
|
+
baselineOpacity: number,
|
|
116
|
+
) => GradientDefinition;
|
|
117
|
+
//# sourceMappingURL=gradient.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/gradient.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAEL,KAAK,kBAAkB,EAGvB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,CAAC;CAClE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,EAChE,QAAQ,UAAU,KACjB,YAAY,EAKd,CAAC;AAiEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,EAAE,SAAS,MAAM,KAAG,MAGrE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,kBAAkB,EAC5B,QAAQ,kBAAkB,EAC1B,QAAQ,kBAAkB,KACzB,YAAY,EAAE,GAAG,SAqBnB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,YAAY,EAAE,EACrB,WAAW,MAAM,EACjB,OAAO,iBAAiB,GAAG,kBAAkB,KAC5C,MAAM,GAAG,SAyFX,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,UAAU,EAAE,WAAU,MAAU,KAAG,MAc1E,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,GACzB,YAAY,UAAU,EACtB,eAAe,MAAM,EACrB,MAAM,MAAM,EACZ,aAAa,MAAM,EACnB,iBAAiB,MAAM,KACtB,kBA0BF,CAAC"}
|
|
@@ -2,7 +2,10 @@ export * from './axis';
|
|
|
2
2
|
export * from './bar';
|
|
3
3
|
export * from './chart';
|
|
4
4
|
export * from './context';
|
|
5
|
+
export * from './gradient';
|
|
5
6
|
export * from './path';
|
|
6
7
|
export * from './point';
|
|
7
8
|
export * from './scale';
|
|
9
|
+
export * from './scrubber';
|
|
10
|
+
export * from './transition';
|
|
8
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}
|