@coinbase/cds-mobile-visualization 3.4.0-beta.5 → 3.4.0-beta.7

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.
Files changed (179) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dts/chart/CartesianChart.d.ts +57 -33
  3. package/dts/chart/CartesianChart.d.ts.map +1 -1
  4. package/dts/chart/ChartContextBridge.d.ts +28 -0
  5. package/dts/chart/ChartContextBridge.d.ts.map +1 -0
  6. package/dts/chart/Path.d.ts +77 -34
  7. package/dts/chart/Path.d.ts.map +1 -1
  8. package/dts/chart/PeriodSelector.d.ts +1 -1
  9. package/dts/chart/PeriodSelector.d.ts.map +1 -1
  10. package/dts/chart/area/Area.d.ts +42 -27
  11. package/dts/chart/area/Area.d.ts.map +1 -1
  12. package/dts/chart/area/AreaChart.d.ts +51 -10
  13. package/dts/chart/area/AreaChart.d.ts.map +1 -1
  14. package/dts/chart/area/DottedArea.d.ts +21 -2
  15. package/dts/chart/area/DottedArea.d.ts.map +1 -1
  16. package/dts/chart/area/GradientArea.d.ts +19 -13
  17. package/dts/chart/area/GradientArea.d.ts.map +1 -1
  18. package/dts/chart/area/SolidArea.d.ts +17 -2
  19. package/dts/chart/area/SolidArea.d.ts.map +1 -1
  20. package/dts/chart/axis/Axis.d.ts +68 -78
  21. package/dts/chart/axis/Axis.d.ts.map +1 -1
  22. package/dts/chart/axis/DefaultAxisTickLabel.d.ts +8 -0
  23. package/dts/chart/axis/DefaultAxisTickLabel.d.ts.map +1 -0
  24. package/dts/chart/axis/XAxis.d.ts +1 -1
  25. package/dts/chart/axis/XAxis.d.ts.map +1 -1
  26. package/dts/chart/axis/YAxis.d.ts +2 -2
  27. package/dts/chart/axis/YAxis.d.ts.map +1 -1
  28. package/dts/chart/axis/index.d.ts +1 -0
  29. package/dts/chart/axis/index.d.ts.map +1 -1
  30. package/dts/chart/bar/Bar.d.ts +16 -13
  31. package/dts/chart/bar/Bar.d.ts.map +1 -1
  32. package/dts/chart/bar/BarChart.d.ts +36 -20
  33. package/dts/chart/bar/BarChart.d.ts.map +1 -1
  34. package/dts/chart/bar/BarPlot.d.ts +2 -1
  35. package/dts/chart/bar/BarPlot.d.ts.map +1 -1
  36. package/dts/chart/bar/BarStack.d.ts +39 -48
  37. package/dts/chart/bar/BarStack.d.ts.map +1 -1
  38. package/dts/chart/bar/BarStackGroup.d.ts +1 -0
  39. package/dts/chart/bar/BarStackGroup.d.ts.map +1 -1
  40. package/dts/chart/bar/DefaultBar.d.ts +1 -1
  41. package/dts/chart/bar/DefaultBar.d.ts.map +1 -1
  42. package/dts/chart/bar/DefaultBarStack.d.ts.map +1 -1
  43. package/dts/chart/gradient/Gradient.d.ts +25 -0
  44. package/dts/chart/gradient/Gradient.d.ts.map +1 -0
  45. package/dts/chart/gradient/index.d.ts +2 -0
  46. package/dts/chart/gradient/index.d.ts.map +1 -0
  47. package/dts/chart/index.d.ts +3 -1
  48. package/dts/chart/index.d.ts.map +1 -1
  49. package/dts/chart/line/DefaultReferenceLineLabel.d.ts +9 -0
  50. package/dts/chart/line/DefaultReferenceLineLabel.d.ts.map +1 -0
  51. package/dts/chart/line/DottedLine.d.ts +13 -5
  52. package/dts/chart/line/DottedLine.d.ts.map +1 -1
  53. package/dts/chart/line/Line.d.ts +62 -25
  54. package/dts/chart/line/Line.d.ts.map +1 -1
  55. package/dts/chart/line/LineChart.d.ts +43 -9
  56. package/dts/chart/line/LineChart.d.ts.map +1 -1
  57. package/dts/chart/line/ReferenceLine.d.ts +68 -20
  58. package/dts/chart/line/ReferenceLine.d.ts.map +1 -1
  59. package/dts/chart/line/SolidLine.d.ts +8 -5
  60. package/dts/chart/line/SolidLine.d.ts.map +1 -1
  61. package/dts/chart/line/index.d.ts +1 -1
  62. package/dts/chart/line/index.d.ts.map +1 -1
  63. package/dts/chart/point/DefaultPointLabel.d.ts +10 -0
  64. package/dts/chart/point/DefaultPointLabel.d.ts.map +1 -0
  65. package/dts/chart/point/Point.d.ts +120 -0
  66. package/dts/chart/point/Point.d.ts.map +1 -0
  67. package/dts/chart/point/index.d.ts +3 -0
  68. package/dts/chart/point/index.d.ts.map +1 -0
  69. package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts +8 -0
  70. package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map +1 -0
  71. package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts +12 -0
  72. package/dts/chart/scrubber/DefaultScrubberBeaconLabel.d.ts.map +1 -0
  73. package/dts/chart/scrubber/DefaultScrubberLabel.d.ts +11 -0
  74. package/dts/chart/scrubber/DefaultScrubberLabel.d.ts.map +1 -0
  75. package/dts/chart/scrubber/Scrubber.d.ts +172 -43
  76. package/dts/chart/scrubber/Scrubber.d.ts.map +1 -1
  77. package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts +44 -0
  78. package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts.map +1 -0
  79. package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts +31 -0
  80. package/dts/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map +1 -0
  81. package/dts/chart/scrubber/ScrubberProvider.d.ts +6 -3
  82. package/dts/chart/scrubber/ScrubberProvider.d.ts.map +1 -1
  83. package/dts/chart/scrubber/index.d.ts +3 -0
  84. package/dts/chart/scrubber/index.d.ts.map +1 -1
  85. package/dts/chart/text/ChartText.d.ts +151 -77
  86. package/dts/chart/text/ChartText.d.ts.map +1 -1
  87. package/dts/chart/text/{SmartChartTextGroup.d.ts → ChartTextGroup.d.ts} +9 -3
  88. package/dts/chart/text/ChartTextGroup.d.ts.map +1 -0
  89. package/dts/chart/text/index.d.ts +1 -1
  90. package/dts/chart/text/index.d.ts.map +1 -1
  91. package/dts/chart/utils/chart.d.ts +34 -7
  92. package/dts/chart/utils/chart.d.ts.map +1 -1
  93. package/dts/chart/utils/context.d.ts +28 -7
  94. package/dts/chart/utils/context.d.ts.map +1 -1
  95. package/dts/chart/utils/gradient.d.ts +117 -0
  96. package/dts/chart/utils/gradient.d.ts.map +1 -0
  97. package/dts/chart/utils/index.d.ts +3 -0
  98. package/dts/chart/utils/index.d.ts.map +1 -1
  99. package/dts/chart/utils/path.d.ts +53 -0
  100. package/dts/chart/utils/path.d.ts.map +1 -1
  101. package/dts/chart/utils/point.d.ts +60 -1
  102. package/dts/chart/utils/point.d.ts.map +1 -1
  103. package/dts/chart/utils/scale.d.ts +91 -0
  104. package/dts/chart/utils/scale.d.ts.map +1 -1
  105. package/dts/chart/utils/scrubber.d.ts +39 -0
  106. package/dts/chart/utils/scrubber.d.ts.map +1 -0
  107. package/dts/chart/utils/transition.d.ts +140 -0
  108. package/dts/chart/utils/transition.d.ts.map +1 -0
  109. package/esm/chart/CartesianChart.js +164 -70
  110. package/esm/chart/ChartContextBridge.js +148 -0
  111. package/esm/chart/Path.js +196 -113
  112. package/esm/chart/PeriodSelector.js +1 -1
  113. package/esm/chart/__stories__/CartesianChart.stories.js +371 -129
  114. package/esm/chart/__stories__/Chart.stories.js +2 -4
  115. package/esm/chart/area/Area.js +25 -35
  116. package/esm/chart/area/AreaChart.js +17 -12
  117. package/esm/chart/area/DottedArea.js +61 -109
  118. package/esm/chart/area/GradientArea.js +35 -91
  119. package/esm/chart/area/SolidArea.js +22 -8
  120. package/esm/chart/area/__stories__/AreaChart.stories.js +1 -1
  121. package/esm/chart/axis/Axis.js +2 -0
  122. package/esm/chart/axis/DefaultAxisTickLabel.js +11 -0
  123. package/esm/chart/axis/XAxis.js +62 -56
  124. package/esm/chart/axis/YAxis.js +58 -52
  125. package/esm/chart/axis/__stories__/Axis.stories.js +0 -1
  126. package/esm/chart/axis/index.js +1 -0
  127. package/esm/chart/bar/Bar.js +3 -1
  128. package/esm/chart/bar/BarChart.js +15 -37
  129. package/esm/chart/bar/BarPlot.js +41 -35
  130. package/esm/chart/bar/BarStack.js +75 -38
  131. package/esm/chart/bar/BarStackGroup.js +6 -16
  132. package/esm/chart/bar/DefaultBar.js +26 -48
  133. package/esm/chart/bar/DefaultBarStack.js +23 -58
  134. package/esm/chart/bar/__stories__/BarChart.stories.js +463 -77
  135. package/esm/chart/gradient/Gradient.js +53 -0
  136. package/esm/chart/gradient/index.js +1 -0
  137. package/esm/chart/index.js +3 -1
  138. package/esm/chart/line/DefaultReferenceLineLabel.js +66 -0
  139. package/esm/chart/line/DottedLine.js +29 -14
  140. package/esm/chart/line/Line.js +106 -67
  141. package/esm/chart/line/LineChart.js +20 -14
  142. package/esm/chart/line/ReferenceLine.js +80 -63
  143. package/esm/chart/line/SolidLine.js +25 -10
  144. package/esm/chart/line/__stories__/LineChart.stories.js +2098 -1975
  145. package/esm/chart/line/__stories__/ReferenceLine.stories.js +83 -28
  146. package/esm/chart/line/index.js +1 -1
  147. package/esm/chart/point/DefaultPointLabel.js +39 -0
  148. package/esm/chart/point/Point.js +188 -0
  149. package/esm/chart/point/index.js +2 -0
  150. package/esm/chart/scrubber/DefaultScrubberBeacon.js +179 -0
  151. package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js +43 -0
  152. package/esm/chart/scrubber/DefaultScrubberLabel.js +28 -0
  153. package/esm/chart/scrubber/Scrubber.js +126 -146
  154. package/esm/chart/scrubber/ScrubberBeaconGroup.js +161 -0
  155. package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js +185 -0
  156. package/esm/chart/scrubber/ScrubberProvider.js +46 -54
  157. package/esm/chart/scrubber/index.js +3 -1
  158. package/esm/chart/text/ChartText.js +242 -174
  159. package/esm/chart/text/{SmartChartTextGroup.js → ChartTextGroup.js} +6 -5
  160. package/esm/chart/text/index.js +1 -1
  161. package/esm/chart/utils/chart.js +44 -3
  162. package/esm/chart/utils/gradient.js +305 -0
  163. package/esm/chart/utils/index.js +3 -0
  164. package/esm/chart/utils/path.js +76 -8
  165. package/esm/chart/utils/point.js +116 -5
  166. package/esm/chart/utils/scale.js +230 -1
  167. package/esm/chart/utils/scrubber.js +139 -0
  168. package/esm/chart/utils/transition.js +214 -0
  169. package/package.json +7 -5
  170. package/dts/chart/Point.d.ts +0 -103
  171. package/dts/chart/Point.d.ts.map +0 -1
  172. package/dts/chart/line/GradientLine.d.ts +0 -45
  173. package/dts/chart/line/GradientLine.d.ts.map +0 -1
  174. package/dts/chart/scrubber/ScrubberBeacon.d.ts +0 -75
  175. package/dts/chart/scrubber/ScrubberBeacon.d.ts.map +0 -1
  176. package/dts/chart/text/SmartChartTextGroup.d.ts.map +0 -1
  177. package/esm/chart/Point.js +0 -111
  178. package/esm/chart/line/GradientLine.js +0 -62
  179. 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,KAAyC,MAAM,OAAO,CAAC;AAO9D,OAAO,EAAuC,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAE1F,MAAM,MAAM,qBAAqB,GAAG,OAAO,CACzC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC,CAC3E,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkK5D,CAAC"}
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,2 +1,5 @@
1
+ export * from './DefaultScrubberBeacon';
2
+ export * from './DefaultScrubberBeaconLabel';
3
+ export * from './DefaultScrubberLabel';
1
4
  export * from './Scrubber';
2
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC"}
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 React from 'react';
2
- import { type TextPathProps, type TextProps, type TSpanProps } from 'react-native-svg';
3
- import type { Rect, SharedProps } from '@coinbase/cds-common/types';
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 ChartTextProps = SharedProps &
27
- Pick<TextProps, 'dx' | 'dy' | 'fontSize' | 'fontWeight' | 'opacity'> & {
28
- /**
29
- * The text color.
30
- * @default theme.color.fgMuted
31
- */
32
- color?: string;
33
- /**
34
- * The background color of the text's container element.
35
- * @default 'transparent'
36
- */
37
- background?: string;
38
- /**
39
- * The text content to display.
40
- */
41
- children: ChartTextChildren;
42
- /**
43
- * The desired x position in SVG pixels.
44
- * @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
45
- */
46
- x: number;
47
- /**
48
- * The desired y position in SVG pixels.
49
- * @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
50
- */
51
- y: number;
52
- /**
53
- * Horizontal alignment of the text.
54
- * @default 'center'
55
- */
56
- horizontalAlignment?: TextHorizontalAlignment;
57
- /**
58
- * Vertical alignment of the text.
59
- * @default 'middle'
60
- */
61
- verticalAlignment?: TextVerticalAlignment;
62
- /**
63
- * When true, disables automatic repositioning to fit within bounds.
64
- */
65
- disableRepositioning?: boolean;
66
- /**
67
- * Optional bounds rectangle to constrain the text within. If provided, text will be positioned
68
- * to stay within these bounds. If not provided, defaults to the full chart bounds.
69
- */
70
- bounds?: Rect;
71
- /**
72
- * Callback fired when text dimensions change.
73
- * Used for collision detection and smart positioning.
74
- * Returns the adjusted position and dimensions.
75
- */
76
- onDimensionsChange?: (rect: Rect) => void;
77
- /**
78
- * Inset around the text content for the background rect.
79
- * Only affects the background, text position remains unchanged.
80
- */
81
- inset?: number | ChartInset;
82
- /**
83
- * Border radius for the background rectangle.
84
- * @default 4
85
- */
86
- borderRadius?: number;
87
- };
88
- export declare const ChartText: React.NamedExoticComponent<ChartTextProps>;
89
- export {};
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":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAE/E,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAIpE,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,UAAU,CAAC;AAE1D,KAAK,2BAA2B,GAC5B,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,GACvC,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,MAAM,GACN,IAAI,GACJ,SAAS,GACT,2BAA2B,GAC3B,2BAA2B,EAAE,CAAC;AAElC;;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,cAAc,GAAG,WAAW,GACtC,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC,GAAG;IACrE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C;;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;AAyGJ,eAAO,MAAM,SAAS,4CA6KrB,CAAC"}
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 SmartChartTextGroupProps = {
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 SmartChartTextGroup: import('react').NamedExoticComponent<SmartChartTextGroupProps>;
55
- //# sourceMappingURL=SmartChartTextGroup.d.ts.map
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,3 +1,3 @@
1
1
  export * from './ChartText';
2
- export * from './SmartChartTextGroup';
2
+ export * from './ChartTextGroup';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/text/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,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
- * The id of the series.
16
+ * Id of the series.
15
17
  */
16
18
  id: string;
17
19
  /**
18
- * The data array for this series. Use null values to create gaps in the visualization.
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
- * The label of the series. Can be a React node or a function that receives the data index and returns a React node.
28
+ * Label of the series.
29
+ * Used for scrubber beacon labels.
27
30
  */
28
- label?: string | ((dataIndex: number) => string);
31
+ label?: string;
29
32
  /**
30
- * The color of the series.
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
- * The ID of the y-axis this series uses.
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
- * The stack group this series belongs to.
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":"AAEA,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;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;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;;;;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"}
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?: number;
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;AAEvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;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;;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,WAAW,EAAE,IAAI,CAAC;IAClB;;;;;;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,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,eAAO,MAAM,eAAe,2DAA6D,CAAC;AAE1F,eAAO,MAAM,kBAAkB,QAAO,oBAMrC,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"}