How to draw multiple circles dynamically (Cartesian Chart tooltip intersections)

[carlreiser2]

Hello,

I am new to using skia and I am trying to draw multiple circles on a cartesian chart at line intersections. They are used in a tooltip component. Here is my current attempt; however as I pan over the chart the circle Y values do not update in real time because I am using yValue which is a number and not a SharedValue. The x values are just fine as I am passing them in as a shared value.

interface ToolTipProps {
	x: SharedValue<number>;
	chartBounds: ChartBounds;
	xToYMapping: Record<number, number[]>;
}

export const JRToolTip = (props: ToolTipProps) => {
	const { x, chartBounds, xToYMapping } = props;

	const yValues = useDerivedValue(() => {
		const foundYValues = xToYMapping[x.value];
		return foundYValues;
	}, [x.value, xToYMapping]);

	return (
		<Group>
			{yValues.value.map((yValue, idx) => (
				<Fragment key={idx}>
					<Circle cx={x} cy={yValue} r={5} color={colors.PRIMARY.ORANGE} />
				</Fragment>
			))}
		</Group>
	);
};

XToYMapping is just a map Record<xCoordinate, number[yCoordinate1, yCoordinate2...]> so that in the component I can draw n circles at the X coordinate where n is the number array of y coordinates. So if I had x = 32, I would perhaps get out yValues of [100, 22] and I would want to draw 2 circles in that case at their respective y positions.

Is there any way I can create an array like SharedValue[] from the useDerivedValue hook that way I can pass in a sharedValue to the cy in the circle?

Thanks, any help is much appreciated.

[wcandillon]

To have dynamic arrays of shared values you can look at this example: https://github.com/wcandillon/can-it-be-done-in-react-native/blob/ceb3d22418d6e7d3dc7535e1710f04d03c150b6e/season5/src/Instagram/StickerModal.tsx#L14 (makeMutable is the non hook version of useSharedValue).

Of course another great way to animate on a dynamic number of drawing elements is Picture: https://shopify.github.io/react-native-skia/docs/shapes/pictures/

[carlreiser2]

Amazing! That worked perfectly well. Here is the updated tooltip code for anyone interested.

export const JRToolTip = (props: ToolTipProps) => {
	const { x, chartBounds, xToYMapping, colorsByIdx } = props;

	const lineStart = useDerivedValue(() => ({ x: x.value, y: 0 }));
	const lineEnd = useDerivedValue(() => ({ x: x.value, y: chartBounds.bottom }));

	// Create an array to hold the shared values
	const [circles, setCircles] = useState<SharedValue<number>[]>([]);

	const updateCircles = useCallback((newYValues: number[]) => {
		const tmpCircles: SharedValue<number>[] = [];

		for (const yValue of newYValues) {
			tmpCircles.push(makeMutable(yValue));
		}

		setCircles(tmpCircles);
	}, []);

	useDerivedValue(() => {
		const foundXToY = xToYMapping[x.value];
		if (!foundXToY) {
			return;
		}

		runOnJS(updateCircles)(foundXToY);
	}, [x.value]);

	const renderCircles = useMemo(() => {
		const out = [];
		for (const [idx, yValue] of circles.entries()) {
			if (yValue.value === null) {
				continue;
			}

			const color = colorsByIdx[idx] ?? colors.PRIMARY.ORANGE;
			out.push(
				<Fragment key={idx}>
					<Circle cx={x} cy={yValue} r={5} color="white" strokeWidth={2} />
					<Circle cx={x} cy={yValue} r={4} color={color} />
				</Fragment>
			);
		}

		return out;
	}, [circles, colorsByIdx]);

	return (
		<Group>
			<Line strokeWidth={2} strokeCap={"round"} color={"white"} p1={lineStart} p2={lineEnd} />
			{renderCircles}
		</Group>
	);
};