@delacour/react-native-charts 0.1.0-alpha.4 → 0.1.0-alpha.5

package/README.md

@@ -17,12 +17,13 @@ Docs: [ui.delacour.co.nz/docs/charts](https://ui.delacour.co.nz/docs/charts).
 
 ```bash
 bun add @delacour/react-native-charts@alpha
-bunx expo install @shopify/react-native-skia
+bunx expo install @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets
 ```
 
 Peers: `@shopify/react-native-skia`, `react-native-reanimated`,
 `react-native-gesture-handler`, `react-native-worklets`, `react`,
-`react-native`.
+`react-native`. The native four go through `expo install`, so the SDK picks
+versions it can build; `react` and `react-native` are already in any app.
 
 Your app needs a `GestureHandlerRootView` at its root. This package does not
 render one — a nested root is dead weight, and every React Native app that

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@delacour/react-native-charts",
-	"version": "0.1.0-alpha.4",
+	"version": "0.1.0-alpha.5",
 	"description": "Headless Skia charting primitives for React Native \u2014 no tokens, no className",
 	"type": "module",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/delacournz/delacour-ui.git",
-		"directory": "packages/charts"
+		"directory": "packages/react-native-charts"
 	},
 	"keywords": [
 		"react-native",

package/src/cartesian/marks/chart-cursor.tsx

@@ -137,24 +137,24 @@ function CursorLine({
 	readonly scrub: ChartScrubState;
 	readonly series: ChartScrubSeriesState | undefined;
 }): ReactElement {
-	const at = (): number => {
-		"worklet";
+	// Resolved inline rather than through a component-scope worklet helper.
+	// The rule used to call an `at()` worklet from both points' derived values,
+	// and on device it never drew — in this chart and every themed tooltip —
+	// while the dots, which read their shared values directly, did.
+	const position = useDerivedValue(() => {
 		const source = series ?? scrub;
-		if (axis === "x") return snap ? source.snappedX.value : source.x.value;
-		return snap ? source.snappedY.value : source.y.value;
-	};
-
-	const p1 = useDerivedValue(() => {
-		const value = at();
-		const position = Number.isFinite(value) ? value : OFFSCREEN;
-		return axis === "x" ? { x: position, y: bounds.top } : { x: bounds.left, y: position };
+		const value =
+			axis === "x" ? (snap ? source.snappedX.value : source.x.value) : snap ? source.snappedY.value : source.y.value;
+		return Number.isFinite(value) ? value : OFFSCREEN;
 	});
 
-	const p2 = useDerivedValue(() => {
-		const value = at();
-		const position = Number.isFinite(value) ? value : OFFSCREEN;
-		return axis === "x" ? { x: position, y: bounds.bottom } : { x: bounds.right, y: position };
-	});
+	const p1 = useDerivedValue(() =>
+		axis === "x" ? { x: position.value, y: bounds.top } : { x: bounds.left, y: position.value }
+	);
+
+	const p2 = useDerivedValue(() =>
+		axis === "x" ? { x: position.value, y: bounds.bottom } : { x: bounds.right, y: position.value }
+	);
 
 	const alpha = useDerivedValue(() => (scrub.isActive.value ? (opacity ?? 1) : 0));