@bashem/rn-charts 0.0.3 → 0.0.5

package/src/skia/BarChart/useBarChart.ts

@@ -1,16 +1,20 @@
 import { useMemo, useState } from "react";
-import { rect } from "@shopify/react-native-skia";
+import { rect, type SkHostRect } from "@shopify/react-native-skia";
 import { arrayFrom, isDefined } from "../../util/util";
-import type { BarData, BarChartStyle, StackValue, BarChartProps } from "./BarChart";
+import type { StackValue, BarChartProps } from "./BarChart";
 import { useWindowDimensions } from "react-native";
-import { getCommonStyleFont, getPaddings } from "../common";
+import { getPaddings } from "../common";
+import { useSharedValue } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 
 export default function useBarChart(
 	{
 		data,
 		style,
 		maxValue,
-		minValue
+		minValue,
+		yLabels,
+		overscanRatio
 	}: BarChartProps
 ) {
 	const { maxValueCalculated, minValueCalculated } = useMemo(() => {
@@ -47,7 +51,7 @@ export default function useBarChart(
 	}, [data, maxValue]);
 
 	const steps = useMemo(() => arrayFrom(1, 0.2), []);
-	const [tooltip, setTooltip] = useState<{ centerX: number, centerY: number, data: StackValue; } | undefined>(undefined);
+	const [tooltip, setTooltip] = useState<{ centerX: number, centerY: number, rect: SkHostRect, data: StackValue, xLabel?: string; } | undefined>(undefined);
 	const [startX, setStartX] = useState<number>(0);
 
 	const {
@@ -59,25 +63,26 @@ export default function useBarChart(
 
 	const chartBarWidth = style?.barWidth ?? 100;
 	const chartBarSpacing = style?.barSpacing ?? 0;
-	const verticalLabelWidth = 35;
+
+	const [verticalLabelWidth, setVerticalLabelWidth] = useState(style?.verticalLabelStyle?.width ?? 0);
 	const chartHeight = style?.height ?? 200;
-	const strokeWidth = 2;
-	const bottomLabelHeight = 20;
-	const canvasHeight = chartHeight + bottomLabelHeight;
+	const verticalStrokeWidth = style?.verticalLabelStyle?.strokeWidth ?? 0;
+	const horizontalStrokeWidth = style?.horizontalLabelStyle?.strokeWidth ?? 0;
+	const [bottomLabelHeight, setBottomLabelHeight] = useState(20);
 	const { width: windowWidth } = useWindowDimensions();
 	const totalWidth = style?.width ?? windowWidth;
 	const totalHeight = chartHeight;
-	
+
 	const initialSpacing = style?.firstBarLeadingSpacing ?? 0;
 	const endSpacing = style?.lastBarTrailingSpacing ?? chartBarSpacing;
 
 	const scrollAreaWidth = initialSpacing + data.length * chartBarWidth + (Math.max(0, data.length - 1) * chartBarSpacing) + endSpacing;
 	const canvasWidth = Math.min(scrollAreaWidth, totalWidth - verticalLabelWidth - paddingRight - paddingLeft);
-	const { font } = getCommonStyleFont(style);
+	const overscanArea = totalWidth * (overscanRatio ?? 0.5);
+	const leftBoundary = startX - overscanArea;
 
 	const rectangles = useMemo(() => {
-		let leftBoundary = Math.max(0, startX);
-		let rightBoundary = startX + totalWidth;
+		let rightBoundary = startX + totalWidth + overscanArea;
 
 		let startArrayIndex = Math.floor(Math.max(leftBoundary - initialSpacing, 0) / (chartBarWidth + chartBarSpacing));
 		let endArrayIndex = Math.min(Math.ceil(rightBoundary / (chartBarWidth + chartBarSpacing)), data.length);
@@ -85,19 +90,19 @@ export default function useBarChart(
 		return data.slice(startArrayIndex, endArrayIndex)
 			.map((bar, xIndex) => {
 				let previousHeight = 0;
-				const x = initialSpacing + (xIndex + startArrayIndex) * (chartBarWidth + chartBarSpacing) - leftBoundary;
+				const x = initialSpacing + (xIndex + startArrayIndex) * (chartBarWidth + chartBarSpacing);
 				return {
 					bars: bar.values.map((item, yIndex) => {
 						const barHeight =
 							((item.value - minValueCalculated) /
-								(maxValueCalculated - minValueCalculated)) *
+								Math.max(maxValueCalculated - minValueCalculated, 1)) *
 							chartHeight;
 
 						const y =
-							chartHeight - barHeight - previousHeight - strokeWidth;
+							chartHeight - barHeight - previousHeight;
 
 						previousHeight += barHeight;
-						return rect(x, y, chartBarWidth, barHeight);
+						return { rect: rect(x, y, chartBarWidth, barHeight), stackValue: item };
 					}),
 					label: bar.label,
 					dataIndex: xIndex + startArrayIndex,
@@ -110,7 +115,6 @@ export default function useBarChart(
 		chartBarSpacing,
 		maxValueCalculated,
 		minValueCalculated,
-		strokeWidth,
 		startX
 	]);
 
@@ -120,19 +124,18 @@ export default function useBarChart(
 			return;
 		}
 
-		let xIndex = -1;
-		let startingXIndex = 0;
-
-		if (touchedX >= rectangles[0]!.x && touchedX <= rectangles[0]!.x + rectangles[0]!.bars[0]!.width) {
-			xIndex = 0;
-			startingXIndex = Math.max(0, rectangles[0]!.x);
-		} else if (touchedX >= rectangles[0]!.x) {
-			xIndex = Math.floor((touchedX - (rectangles[0]!.x + chartBarWidth) - chartBarSpacing) / (chartBarWidth + chartBarSpacing)) + 1;
-			startingXIndex = rectangles[xIndex]!.x;
+		let firstX = rectangles[0]!.x - startX
+		let spaceBetween = touchedX - firstX
+		if(spaceBetween < 0) {
+			setTooltip(undefined);
+			return;
 		}
 
-		if (xIndex === -1 || (touchedX < rectangles[xIndex]!.x || touchedX > rectangles[xIndex]!.x + chartBarWidth)) {
-			console.log('Touch is outside the bar width, ignoring.');
+		let xIndex = Math.floor(spaceBetween / (chartBarWidth + chartBarSpacing));
+		let startingXIndex = rectangles[xIndex]!.x - startX;
+
+		if (xIndex === -1 || (touchedX < rectangles[xIndex]!.x - startX|| touchedX > rectangles[xIndex]!.x - startX + chartBarWidth)) {
+			console.log('Touch is outside the bar width, ignoring.', xIndex);
 			setTooltip(undefined);
 			return;
 		}
@@ -149,7 +152,7 @@ export default function useBarChart(
 		) {
 			const barHeight =
 				((categoryData[yIndex]!.value - minValueCalculated) /
-					(maxValueCalculated - minValueCalculated)) *
+					Math.max(maxValueCalculated - minValueCalculated, 1)) *
 				chartHeight;
 			yPassed += barHeight;
 			lastBarHeight = barHeight;
@@ -163,28 +166,32 @@ export default function useBarChart(
 		}
 
 		setTooltip({
-			centerX: startingXIndex + chartBarWidth / 2,
+			centerX: startingXIndex + verticalLabelWidth + paddingLeft + chartBarWidth / 2,
 			centerY:
-				chartHeight - yPassed - strokeWidth + lastBarHeight / 2,
+				chartHeight - yPassed + paddingTop + lastBarHeight / 2,
+			rect: rect(startingXIndex, chartHeight - yPassed, chartBarWidth, lastBarHeight),
 			data: categoryData[yIndex - 1]!,
+			xLabel: data[xIndex]?.label
 		});
 	};
 
+	const offset = useSharedValue(0);
+
 	function onScroll(translateX: number) {
-		setTooltip(undefined);
-		setStartX((prev) => {
-			let newX = prev + translateX;
-			if (newX < 0) return 0;
-			if (newX + canvasWidth > scrollAreaWidth)
-				return Math.max(0, scrollAreaWidth - canvasWidth);
-			return newX;
-		});
+		'worklet';
+		let prev = offset.value;
+		let newX = Math.max(0, prev + translateX);
+		if (newX + canvasWidth > scrollAreaWidth)
+			newX = Math.max(0, scrollAreaWidth - canvasWidth);
+		offset.set(newX);
+		scheduleOnRN(setTooltip, undefined);
+		scheduleOnRN(setStartX, newX);
 	}
 
 	return {
+		offset,
 		maxValueCalculated,
 		minValueCalculated,
-		canvasHeight,
 		canvasWidth,
 		steps,
 		scrollAreaWidth,
@@ -194,17 +201,21 @@ export default function useBarChart(
 		paddingLeft,
 		paddingRight,
 		verticalLabelWidth,
+		setVerticalLabelWidth,
 		chartBarWidth,
 		chartBarSpacing,
-		strokeWidth,
 		rectangles,
 		tooltip,
 		bottomLabelHeight,
-		font,
+		setBottomLabelHeight,
 		setTooltip,
 		touchHandler,
 		onScroll,
+		startX,
 		totalHeight,
-		totalWidth
+		totalWidth,
+		yLabels,
+		verticalStrokeWidth,
+		horizontalStrokeWidth
 	};
 }

package/src/skia/Common/HorizontalLabelView.tsx

@@ -0,0 +1,153 @@
+import { View, type LayoutChangeEvent } from "react-native";
+import { getPaddings, type CommonStyle } from '../common';
+import React, { useEffect, useState } from "react";
+import { Canvas, Group, Line, type AnimatedProp, type Transforms3d } from "@shopify/react-native-skia";
+import Animated, { useAnimatedStyle, type SharedValue } from "react-native-reanimated";
+
+export interface HorizontalLabelStyle {
+	height?: number;
+	backgroundColor?: string;
+	strokeWidth?: number;
+	strokeColor?: string;
+	strokePosition?: "top" | "bottom";
+}
+
+export interface HorizontalLabelStyleExtended extends HorizontalLabelStyle {
+	viewPosition?: "top" | "bottom";
+}
+
+interface HorizontalLabelViewStyle extends CommonStyle {
+	width: number;
+	left?: number;
+	horizontalLabelStyle?: HorizontalLabelStyleExtended;
+};
+
+interface HorizontalLabelProps<T> {
+	labels: T[];
+	positions: number[];
+	style: HorizontalLabelViewStyle;
+	onLayout?: (event: LayoutChangeEvent) => void;
+	children?: (index: number, data: T) => React.JSX.Element | undefined;
+	labelSkiaView?: (
+		yPosition: number,
+		index: number,
+		data: T,
+	) => React.JSX.Element | undefined;
+	transform?: AnimatedProp<Transforms3d>;
+	xOffset?: SharedValue<number>;
+}
+
+function HorizontalLabelView<T>({
+	labels,
+	positions,
+	style,
+	onLayout,
+	children,
+	labelSkiaView,
+	transform,
+	xOffset
+}: HorizontalLabelProps<T>) {
+	const {
+		width,
+		backgroundColor,
+		left,
+		horizontalLabelStyle = {}
+	} = style;
+
+	const {
+		height,
+		strokeColor = "white",
+		strokePosition = "top",
+		strokeWidth = 0,
+	} = horizontalLabelStyle;
+	const { paddingLeft = 0 } = getPaddings(style);
+
+	const [maxHeight, setMaxHeight] = useState(height);
+	useEffect(() => {
+		setMaxHeight(height);
+	}, [height]);
+
+	return (
+		<View
+			style={{
+				left,
+				width: width,
+				height: (maxHeight ?? 0),
+				backgroundColor,
+				flexDirection: "row-reverse",
+				justifyContent: "flex-end",
+				overflow: "hidden"
+			}}
+			onLayout={(event) => {
+				onLayout?.(event);
+			}}
+		>
+			<View style={{ position: "relative", height: (maxHeight ?? 0), top: strokeWidth, paddingVertical: 0 }}>
+				{labels.map((label, index) => {
+					return <LabelViewWrapper
+						key={index}
+						leftPosition={positions[index]}
+						xOffset={xOffset}
+						onLayout={(event) => {
+							let height = event.nativeEvent.layout.height;
+							if (horizontalLabelStyle.height !== undefined)
+								setMaxHeight(horizontalLabelStyle.height);
+							else {
+								if (index === 0) {
+									setMaxHeight(height + strokeWidth);
+								} else {
+									setMaxHeight(prevHeight => Math.max(height + strokeWidth, prevHeight ?? 0));
+								}
+							}
+						}}
+					>
+						{children?.(index, label)}
+					</LabelViewWrapper>;
+				})}
+			</View>
+			{(labelSkiaView || strokeWidth > 0) &&
+				<Canvas style={{ position: "absolute", width, height: labelSkiaView ? (maxHeight ?? 0) : strokeWidth, }}>
+					<Group transform={transform}>
+						{labelSkiaView && labels.map((label, index) => {
+							let yPosition = positions[index];
+							if (yPosition === undefined) return null;
+							return <Group key={index}>{labelSkiaView(yPosition, index, label)}</Group>;
+						})}
+						{strokeWidth > 0 &&
+							<Line
+								p1={{ x: paddingLeft, y: strokePosition === "top" ? strokeWidth / 2 : (maxHeight ?? height ?? 0) - strokeWidth / 2 }}
+								p2={{ x: width, y: strokePosition === "top" ? strokeWidth / 2 : (maxHeight ?? height ?? 0) - strokeWidth / 2 }}
+								color={strokeColor}
+								strokeWidth={strokeWidth}
+							/>
+						}
+					</Group>
+				</Canvas>
+			}
+		</View >
+	);
+}
+
+interface LabelViewWrapperProps {
+	leftPosition?: number;
+	xOffset?: SharedValue<number>;
+	onLayout: ((event: LayoutChangeEvent) => void) | undefined;
+	children?: React.JSX.Element | undefined;
+};
+
+function LabelViewWrapper(props: LabelViewWrapperProps) {
+	const labelContainerStyle = useAnimatedStyle(() => {
+		return {
+			position: "absolute", left: props.leftPosition ? props.leftPosition - (props.xOffset?.get() ?? 0) : undefined,
+		};
+	}, [props.leftPosition]);
+
+	return <Animated.View
+		style={labelContainerStyle}
+		onLayout={(event) => props.onLayout?.(event)}
+	>
+		{props.children}
+	</Animated.View >;
+}
+
+export default HorizontalLabelView;

package/src/skia/Common/VerticalLabelView.tsx

@@ -0,0 +1,113 @@
+import { View, type LayoutChangeEvent } from "react-native";
+import { Canvas, Group, Line } from '@shopify/react-native-skia';
+import { getPaddings, type CommonStyle } from '../common';
+import React, { useMemo, useState } from "react";
+
+export interface VerticalLabelStyle {
+	width?: number;
+	backgroundColor?: string;
+	strokeWidth?: number;
+	strokeColor?: string;
+}
+
+interface VerticalLabelViewStyles extends CommonStyle {
+	height: number;
+	top?: number;
+	verticalLabelStyle?: VerticalLabelStyle;
+}
+
+interface VerticalLabelProps {
+	labelPercentages: number[];
+	styles: VerticalLabelViewStyles;
+	onLayout?: (event: LayoutChangeEvent) => void;
+	children: (percentage: number, index: number) => React.JSX.Element | undefined;
+	labelSkiaView?: (
+		percentage: number,
+		yPosition: number,
+		index: number
+	) => React.JSX.Element | undefined;
+}
+
+function VerticalLabelView({
+	labelSkiaView,
+	labelPercentages,
+	styles,
+	onLayout,
+	children
+}: VerticalLabelProps) {
+	const {
+		top,
+		height,
+		backgroundColor,
+		verticalLabelStyle = {}
+	} = styles;
+	const {
+		width,
+		strokeWidth = 0,
+		strokeColor = 'white',
+	} = verticalLabelStyle;
+
+	const { paddingTop = 0, paddingBottom = 0 } = getPaddings(styles);
+	const [maxWidth, setMaxWidth] = useState(width);
+	useMemo(() => {
+		setMaxWidth(width);
+	}, [width]);
+
+	return (
+		<View
+			style={{
+				width: (maxWidth ?? 0),
+				top,
+				height,
+				backgroundColor,
+				flexDirection: "row-reverse",
+				justifyContent: "flex-end"
+			}}
+			onLayout={(event) => {
+				onLayout?.(event);
+			}}
+		>
+			<View style={{ position: "relative", width: (maxWidth ?? 0) - strokeWidth, paddingVertical: 0, height: height }}>
+				{labelPercentages.map((percentage, index) => {
+					return <View
+						key={percentage}
+						style={{ position: "absolute", top: (1 - percentage) * height, backgroundColor: "purple" }}
+						onLayout={(event) => {
+							let width = event.nativeEvent.layout.width + strokeWidth;
+							if (verticalLabelStyle.width !== undefined)
+								setMaxWidth(verticalLabelStyle.width);
+							else {
+								if (index === 0) {
+									setMaxWidth(width + strokeWidth);
+								} else {
+									setMaxWidth(prevWidth => Math.max(width + strokeWidth, prevWidth ?? 0));
+								}
+							}
+						}}
+					>
+						{children(percentage, index)}
+					</View>;
+				})}
+			</View>
+
+			{(labelSkiaView || strokeWidth > 0) &&
+				<Canvas style={{ position: "absolute", left: 0, width, height, }}>
+					{labelSkiaView && labelPercentages.map((percentage, index) => {
+						return <Group key={percentage}>{labelSkiaView(percentage, (1 - percentage) * height, index)}</Group>;
+					})}
+
+					{strokeWidth > 0 &&
+						<Line
+							p1={{ x: (maxWidth ?? width ?? 0) - strokeWidth / 2, y: paddingTop }}
+							p2={{ x: (maxWidth ?? width ?? 0) - strokeWidth / 2, y: height - paddingBottom }}
+							color={strokeColor}
+							strokeWidth={strokeWidth}
+						/>
+					}
+				</Canvas>
+			}
+		</View>
+	);
+}
+
+export default VerticalLabelView;

package/src/skia/Common/useComponentLayout.ts

@@ -0,0 +1,14 @@
+import { useCallback, useState } from "react";
+import type { LayoutChangeEvent, LayoutRectangle } from "react-native";
+
+function useComponentLayout(): [LayoutRectangle | undefined, (event: LayoutChangeEvent) => void] {
+  const [size, setSize] = useState<LayoutRectangle | undefined>(undefined);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    setSize(event.nativeEvent.layout);
+  }, []);
+
+  return [size, onLayout];
+};
+
+export default useComponentLayout;