@bashem/rn-charts 0.0.2

package/src/skia/AreaChart/useAreaChart.ts

@@ -0,0 +1,180 @@
+import { Skia, type SkPath } from "@shopify/react-native-skia";
+import { useMemo, useState } from "react";
+import { getCommonStyleFont, getPaddings } from "../common";
+import type { AreaChartProps, AreaChartStyle } from "./AreaChart";
+import { isDefined } from "../../util/util";
+
+export interface AreaData {
+	values: number[];
+	label?: string;
+	color?: string;
+}
+
+interface Point {
+	x: number;
+	y: number;
+}
+
+export interface PathData {
+	path: SkPath;
+	points: Point[];
+	values: number[];
+	color?: string;
+	label?: string;
+}
+
+export interface XLable {
+	label: string;
+	xPosition: number;
+}
+
+interface TouchLine {
+	col: number;
+	x: number;
+	y: number[];
+	values: number[];
+}
+
+function useAreaChart({
+	data,
+	xLabels,
+	maxValue,
+	minValue,
+	style,
+}: AreaChartProps
+) {
+
+	const height = style?.height ?? 200;
+	const width = style?.width ?? 200;
+	const {
+		paddingLeft,
+		paddingTop,
+		paddingHorizontal,
+		paddingVertical,
+	} = getPaddings(style);
+
+	const canvasHeight = height - paddingVertical;
+	const labelWidth = 30;
+	const chartWidth = width - labelWidth - paddingHorizontal;
+	const xLabelHeight = xLabels && xLabels.length > 0 ? (style?.fontSize ?? 12) + 5 : 0;
+	const areaCanvasHeight = canvasHeight - xLabelHeight;
+
+	const { font } = getCommonStyleFont(style);
+
+	const { maxValueCalculated, minValueCalculated } = useMemo(() => {
+		if (isDefined(maxValue) && isDefined(minValue)) {
+			return { maxValueCalculated: maxValue, minValueCalculated: minValue };
+		}
+		let maxValueCalculated = Number.MIN_VALUE;
+		let minValueCalculated = Number.MAX_VALUE;
+
+		data.forEach((datum) => {
+			datum.values.forEach((value) => {
+				if (value > maxValueCalculated && !isDefined(maxValue)) {
+					maxValueCalculated = value;
+				}
+				if (value < minValueCalculated && !isDefined(minValue)) {
+					minValueCalculated = value;
+				}
+			});
+		});
+
+		return { maxValueCalculated: maxValueCalculated + 10, minValueCalculated };
+	}, [data]);
+
+	const paths = useMemo(() => {
+		const pathData: PathData[] = [];
+		for (let datum of data) {
+			const areaData = datum.values;
+			const stepX = chartWidth / areaData.length;
+			const p = Skia.Path.Make();
+
+			p.moveTo(0, areaCanvasHeight);
+			const points: Point[] = [];
+			const values: number[] = [];
+
+			areaData.forEach((y, i) => {
+				const xPos = i * stepX;
+				const yPos = Math.max(0, areaCanvasHeight - ((y - minValueCalculated) / (maxValueCalculated - minValueCalculated)) * areaCanvasHeight);
+
+				points.push({ x: xPos, y: yPos });
+				values.push(y);
+				p.lineTo(xPos, yPos);
+			});
+
+			p.lineTo(chartWidth, areaCanvasHeight);
+			p.close();
+
+			pathData.push({
+				path: p,
+				points,
+				values,
+				color: datum.color,
+				label: datum.label,
+			});
+		}
+
+		return pathData;
+	}, [data, chartWidth, maxValueCalculated, minValueCalculated]);
+
+	const xLabelsData: XLable[] = useMemo(() => {
+		if (!xLabels || xLabels.length === 0) {
+			return [];
+		}
+
+		const stepX = chartWidth / xLabels.length;
+		const labels = xLabels.map((label, i) => {
+			return {
+				label,
+				xPosition: i * stepX + font.getSize(),
+			};
+		});
+		return labels;
+	}, [xLabels, chartWidth]);
+
+	const [touchLine, setTouchLine] = useState<TouchLine | undefined>(undefined);
+
+	const touchHandler = (touchedX: number, touchedY: number) => {
+		if (data.length === 0 || (data[0]?.values.length ?? 0) === 0 || touchedX < 0 || touchedY < 0 || touchedX >= chartWidth || touchedY >= areaCanvasHeight) {
+			setTouchLine(undefined);
+			return;
+		}
+
+		const stepX = chartWidth / data[0]!.values.length;
+		const xIndex = Math.round(touchedX / stepX);
+		if (xIndex < 0 || xIndex >= data[0]!.values.length) {
+			setTouchLine(undefined);
+			return;
+		}
+
+		const yValues: number[] = paths.map(path => path.points[xIndex]!.y);
+		const values: number[] = paths.map(path => path.values[xIndex]!);
+
+		setTouchLine({
+			col: xIndex,
+			x: xIndex * stepX,
+			y: yValues,
+			values
+		});
+	};
+
+	return {
+		paths,
+		chartWidth,
+		canvasHeight,
+		paddingLeft,
+		paddingTop,
+		paddingHorizontal,
+		areaCanvasHeight,
+		labelWidth,
+		maxValue: maxValueCalculated,
+		minValue: minValueCalculated,
+		xLabelsData,
+		xLabelHeight,
+		font,
+		touchHandler,
+		touchLine
+	};
+}
+
+export default useAreaChart;

package/src/skia/BarChart/BarChart.tsx

@@ -0,0 +1,190 @@
+import { Fragment, useState } from 'react';
+import { View } from 'react-native';
+import {
+  GestureDetector,
+  Gesture,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+
+import { Canvas, Rect, Text, vec, Line } from '@shopify/react-native-skia';
+import { type CommonStyle } from '../common';
+import useBarChart from './useBarChart';
+import VerticalLabel from '../Common/VerticalLabel';
+import Popup, { type PopupStyle } from '../Popup';
+
+export interface StackValue {
+  value: number;
+  label: string;
+  id?: string;
+}
+
+export interface BarData {
+  values: StackValue[];
+  label?: string;
+}
+
+export interface BarChartStyle extends CommonStyle {
+  width?: number;
+  height?: number;
+  barWidth?: number;
+  barSpacing?: number;
+  firstBarLeadingSpacing?: number;
+  lastBarTrailingSpacing?: number;
+}
+
+export interface BarChartProps {
+  data: BarData[];
+  colors?: Record<string, string>;
+  maxValue?: number;
+  minValue?: number;
+  popupStyle?: PopupStyle<StackValue>;
+  style?: BarChartStyle;
+}
+
+function BarChart(props: BarChartProps) {
+  const {
+    maxValueCalculated,
+    minValueCalculated,
+    canvasHeight,
+    canvasWidth,
+    paddingRight,
+    paddingLeft,
+    paddingBottom,
+    paddingTop,
+    rectangles,
+    verticalLabelWidth,
+    chartHeight,
+    strokeWidth,
+    tooltip,
+    bottomLabelHeight,
+    font,
+    onScroll,
+    touchHandler,
+    totalHeight,
+    totalWidth,
+  } = useBarChart(props);
+
+  const dragGesture = Gesture.Pan()
+    .runOnJS(true)
+    .onChange((event) => {
+      onScroll(-event.changeX);
+    });
+
+  const [viewOffset, setViewOffset] = useState({ x: 0, y: 0 });
+
+  return (
+    <GestureHandlerRootView>
+      <View
+        style={{
+          width: totalWidth,
+          flexDirection: 'row',
+          backgroundColor: props.style?.backgroundColor,
+          paddingLeft: paddingLeft,
+          paddingRight: paddingRight,
+          paddingTop: paddingTop,
+          paddingBottom: paddingBottom,
+        }}
+        ref={(view) => {
+          view?.measureInWindow((fx, fy) => {
+            setViewOffset((prev) => {
+              if (prev.x === fx && prev.y === fy) {
+                return prev;
+              }
+              return { x: fx, y: fy };
+            });
+          });
+        }}
+      >
+        <VerticalLabel
+          maxValue={maxValueCalculated}
+          minValue={minValueCalculated}
+          labelCount={6}
+          styles={{
+            width: verticalLabelWidth,
+            height: chartHeight,
+            strokeWidth,
+          }}
+        />
+        <GestureDetector gesture={dragGesture}>
+          <Canvas
+            style={{
+              width: canvasWidth,
+              height: canvasHeight,
+              paddingRight: 50,
+              backgroundColor: 'red',
+            }}
+            onTouchStart={(event) =>
+              touchHandler(
+                event.nativeEvent.locationX,
+                event.nativeEvent.locationY
+              )
+            }
+          >
+            {/* X axis */}
+            <Line
+              p1={vec(0, chartHeight)}
+              p2={vec(canvasWidth, chartHeight)}
+              color="white"
+              strokeWidth={strokeWidth}
+            />
+
+            {/* Bars */}
+
+            {rectangles.map((bar, xIndex) => {
+              if (bar.bars.length === 0) return null;
+              return (
+                <Fragment key={xIndex}>
+                  <Text
+                    x={bar.bars[0]!.x}
+                    y={
+                      chartHeight +
+                      font.getSize() +
+                      (bottomLabelHeight - font.getSize()) / 2
+                    }
+                    text={bar.label ?? ''}
+                    color="white"
+                    font={font}
+                  />
+                  {bar.bars.map((item, yIndex) => {
+                    let currentData = props.data[xIndex]!.values[yIndex]!;
+                    let color =
+                      props?.colors?.[currentData.id ?? currentData.label] ||
+                      '#4A90E2';
+                    return (
+                      <Rect
+                        key={xIndex + '-' + yIndex}
+                        x={item.x}
+                        y={item.y}
+                        width={item.width}
+                        height={item.height}
+                        color={color}
+                      />
+                    );
+                  })}
+                </Fragment>
+              );
+            })}
+          </Canvas>
+        </GestureDetector>
+        {tooltip && (
+          <Popup
+            popupData={{
+              x: tooltip.centerX,
+              y: tooltip.centerY,
+              data: tooltip.data,
+            }}
+            popupStyle={props.popupStyle}
+            totalWidth={totalWidth}
+            totalHeight={totalHeight}
+            touchHandler={(x, y) =>
+              touchHandler(x - verticalLabelWidth - paddingLeft, y - paddingTop)
+            }
+            viewOffset={viewOffset}
+          />
+        )}
+      </View>
+    </GestureHandlerRootView>
+  );
+}
+
+export default BarChart;

package/src/skia/BarChart/useBarChart.ts

@@ -0,0 +1,210 @@
+import { useMemo, useState } from "react";
+import { rect } from "@shopify/react-native-skia";
+import { arrayFrom, isDefined } from "../../util/util";
+import type { BarData, BarChartStyle, StackValue, BarChartProps } from "./BarChart";
+import { useWindowDimensions } from "react-native";
+import { getCommonStyleFont, getPaddings } from "../common";
+
+export default function useBarChart(
+	{
+		data,
+		style,
+		maxValue,
+		minValue
+	}: BarChartProps
+) {
+	const { maxValueCalculated, minValueCalculated } = useMemo(() => {
+		if (isDefined(maxValue) && isDefined(minValue)) {
+			return {
+				maxValueCalculated: maxValue,
+				minValueCalculated: minValue
+			};
+		}
+
+		if (data.length === 0) {
+			return { maxValueCalculated: maxValue ?? 100, minValueCalculated: minValue ?? 0 };
+		}
+		let maxValueCalculated = Number.MIN_VALUE;
+		let minValueCalculated = Number.MAX_VALUE;
+
+		data.forEach((item) => {
+			const currentValue = item.values.reduce(
+				(acc, value) => {
+					minValueCalculated = Math.min(minValueCalculated, value.value);
+					return acc + value.value;
+				},
+				0
+			);
+			maxValueCalculated = Math.max(maxValueCalculated, currentValue);
+		});
+		if (isDefined(maxValue))
+			maxValueCalculated = maxValue;
+
+		if (isDefined(minValue))
+			minValueCalculated = minValue;
+
+		return { maxValueCalculated, minValueCalculated };
+	}, [data, maxValue]);
+
+	const steps = useMemo(() => arrayFrom(1, 0.2), []);
+	const [tooltip, setTooltip] = useState<{ centerX: number, centerY: number, data: StackValue; } | undefined>(undefined);
+	const [startX, setStartX] = useState<number>(0);
+
+	const {
+		paddingLeft,
+		paddingRight,
+		paddingTop,
+		paddingBottom
+	} = getPaddings(style);
+
+	const chartBarWidth = style?.barWidth ?? 100;
+	const chartBarSpacing = style?.barSpacing ?? 0;
+	const verticalLabelWidth = 35;
+	const chartHeight = style?.height ?? 200;
+	const strokeWidth = 2;
+	const bottomLabelHeight = 20;
+	const canvasHeight = chartHeight + bottomLabelHeight;
+	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 rectangles = useMemo(() => {
+		let leftBoundary = Math.max(0, startX);
+		let rightBoundary = startX + totalWidth;
+
+		let startArrayIndex = Math.floor(Math.max(leftBoundary - initialSpacing, 0) / (chartBarWidth + chartBarSpacing));
+		let endArrayIndex = Math.min(Math.ceil(rightBoundary / (chartBarWidth + chartBarSpacing)), data.length);
+
+		return data.slice(startArrayIndex, endArrayIndex)
+			.map((bar, xIndex) => {
+				let previousHeight = 0;
+				const x = initialSpacing + (xIndex + startArrayIndex) * (chartBarWidth + chartBarSpacing) - leftBoundary;
+				return {
+					bars: bar.values.map((item, yIndex) => {
+						const barHeight =
+							((item.value - minValueCalculated) /
+								(maxValueCalculated - minValueCalculated)) *
+							chartHeight;
+
+						const y =
+							chartHeight - barHeight - previousHeight - strokeWidth;
+
+						previousHeight += barHeight;
+						return rect(x, y, chartBarWidth, barHeight);
+					}),
+					label: bar.label,
+					dataIndex: xIndex + startArrayIndex,
+					x: x
+				};
+			});
+	}, [
+		data,
+		chartBarWidth,
+		chartBarSpacing,
+		maxValueCalculated,
+		minValueCalculated,
+		strokeWidth,
+		startX
+	]);
+
+	const touchHandler = (touchedX: number, touchedY: number) => {
+		if (rectangles.length === 0 || touchedX < 0 || touchedY < 0 || touchedX >= canvasWidth || touchedY >= chartHeight) {
+			setTooltip(undefined);
+			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;
+		}
+
+		if (xIndex === -1 || (touchedX < rectangles[xIndex]!.x || touchedX > rectangles[xIndex]!.x + chartBarWidth)) {
+			console.log('Touch is outside the bar width, ignoring.');
+			setTooltip(undefined);
+			return;
+		}
+		xIndex = rectangles[xIndex]!.dataIndex;
+
+		let yIndex = 0;
+		let yPassed = 0;
+		let categoryData = data[xIndex]?.values || [];
+		let lastBarHeight = 0;
+
+		while (
+			yIndex < categoryData.length &&
+			yPassed < chartHeight - touchedY
+		) {
+			const barHeight =
+				((categoryData[yIndex]!.value - minValueCalculated) /
+					(maxValueCalculated - minValueCalculated)) *
+				chartHeight;
+			yPassed += barHeight;
+			lastBarHeight = barHeight;
+			yIndex++;
+		}
+
+		if (yIndex === 0 || (yIndex === categoryData.length && touchedY < chartHeight - yPassed)) {
+			console.log('Touch is outside the bar height, ignoring.');
+			setTooltip(undefined);
+			return;
+		}
+
+		setTooltip({
+			centerX: startingXIndex + chartBarWidth / 2,
+			centerY:
+				chartHeight - yPassed - strokeWidth + lastBarHeight / 2,
+			data: categoryData[yIndex - 1]!,
+		});
+	};
+
+	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;
+		});
+	}
+
+	return {
+		maxValueCalculated,
+		minValueCalculated,
+		canvasHeight,
+		canvasWidth,
+		steps,
+		scrollAreaWidth,
+		chartHeight,
+		paddingTop,
+		paddingBottom,
+		paddingLeft,
+		paddingRight,
+		verticalLabelWidth,
+		chartBarWidth,
+		chartBarSpacing,
+		strokeWidth,
+		rectangles,
+		tooltip,
+		bottomLabelHeight,
+		font,
+		setTooltip,
+		touchHandler,
+		onScroll,
+		totalHeight,
+		totalWidth
+	};
+}

package/src/skia/Common/VerticalLabel.tsx

@@ -0,0 +1,91 @@
+import { Canvas, Line, Text, Skia } from '@shopify/react-native-skia';
+import { getFont, type CommonStyle } from '../common';
+
+interface VerticalLabelStyles extends CommonStyle {
+  width: number;
+  height: number;
+  strokeWidth?: number;
+  strokeColor?: string;
+  textColor?: string;
+}
+
+interface VerticalLabelProps {
+  minValue: number;
+  maxValue: number;
+  labelCount: number;
+  styles: VerticalLabelStyles;
+}
+
+function VerticalLabel({
+  minValue,
+  maxValue,
+  labelCount,
+  styles,
+}: VerticalLabelProps) {
+  const {
+    width,
+    height,
+    strokeWidth = 2,
+    strokeColor = 'white',
+    textColor = 'white',
+    paddingTop = 0,
+    paddingRight = 0,
+    paddingBottom = 0,
+    paddingLeft = 0,
+    fontSize = 12,
+    backgroundColor,
+  } = styles;
+
+  // Generate evenly spaced values
+  const stepValue =
+    labelCount > 1 ? (maxValue - minValue) / (labelCount - 1) : 0;
+  const labels = Array.from(
+    { length: labelCount },
+    (_, i) => minValue + i * stepValue
+  );
+
+  const font = getFont(fontSize);
+
+  const usableHeight = height - paddingTop - paddingBottom - fontSize;
+  const stepY = labelCount > 1 ? usableHeight / (labelCount - 1) : 0;
+
+  // Precompute text paint
+  const paint = Skia.Paint();
+  paint.setColor(Skia.Color(textColor));
+
+  return (
+    <Canvas style={{ width, height, backgroundColor }}>
+      <Line
+        p1={{ x: width - paddingRight - strokeWidth / 2, y: paddingTop }}
+        p2={{
+          x: width - paddingRight - strokeWidth / 2,
+          y: height - paddingBottom,
+        }}
+        color={strokeColor}
+        strokeWidth={strokeWidth}
+      />
+
+      {labels.map((label, i) => {
+        const y = height - paddingBottom - stepY * i;
+        const text = label.toFixed(0);
+
+        // measure text width for right-align
+        const textWidth = font.measureText(text).width;
+        const x = width - paddingRight - strokeWidth - 4 - textWidth;
+
+        return (
+          <Text
+            key={i}
+            x={x}
+            y={y}
+            text={text}
+            font={font}
+            color={textColor}
+          />
+        );
+      })}
+    </Canvas>
+  );
+}
+
+export default VerticalLabel;