@bashem/rn-charts 0.0.2

package/src/skia/HeatMap/HeatMap.tsx

@@ -0,0 +1,106 @@
+import React, { type Ref } from 'react';
+import { View, Modal } from 'react-native';
+import { Canvas, Group, Rect } from '@shopify/react-native-skia';
+import useHeatMap from './useHeatMap';
+import type { CommonStyle } from '../common';
+import Popup, { type PopupStyle } from '../Popup';
+
+export type DayData = {
+  date: string;
+  value: number;
+  dayOfWeek: number;
+  week: number;
+  x: number;
+  y: number;
+};
+
+export interface HandleOutSideTouch {
+  touchedOutside: () => void;
+}
+
+export interface HeatMapStyle extends CommonStyle {
+  cellSize?: number;
+  cellGap?: number;
+  cellMaxColor?: string;
+  cellMinColor?: string;
+}
+
+export interface HeatMapProps {
+  startDate: string;
+  endDate: string;
+  data?: Record<string, number>;
+  style?: HeatMapStyle;
+  minValue?: number;
+  maxValue?: number;
+  ref?: Ref<HandleOutSideTouch | undefined>;
+  popupStyle?: PopupStyle<DayData>;
+}
+
+function HeatMap(props: HeatMapProps) {
+  const {
+    daysInRange,
+    totalWidth,
+    totalHeight,
+    popupData,
+    popupRef,
+    popupDimension,
+    touchHandler,
+    getColor,
+    cellSize,
+    onTouchOutside,
+  } = useHeatMap(props);
+
+  const [viewOffset, setViewOffset] = React.useState({ x: 0, y: 0 });
+
+  return (
+    <View
+      style={{ backgroundColor: props.style?.backgroundColor }}
+      ref={(view) => {
+        view?.measureInWindow((fx, fy) => {
+          setViewOffset((prev) => {
+            if (prev.x === fx && prev.y === fy) {
+              return prev;
+            }
+            return { x: fx, y: fy };
+          });
+        });
+      }}
+    >
+      <Canvas
+        style={{ width: totalWidth, height: totalHeight }}
+        onTouchStart={(event) =>
+          touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY)
+        }
+      >
+        <Group>
+          {daysInRange.map((day) => {
+            return (
+              <Rect
+                key={day.date}
+                x={day.x}
+                y={day.y}
+                width={cellSize}
+                height={cellSize}
+                color={getColor(day.value)}
+              />
+            );
+          })}
+        </Group>
+      </Canvas>
+
+      {popupData && props.popupStyle && (
+        <Popup
+          popupData={{ x: popupData.x, y: popupData.y, data: popupData.day }}
+          totalWidth={totalWidth}
+          totalHeight={totalHeight}
+          touchHandler={touchHandler}
+          onTouchOutside={onTouchOutside}
+          popupStyle={props.popupStyle}
+          viewOffset={viewOffset}
+        />
+      )}
+    </View>
+  );
+}
+
+export default HeatMap;

package/src/skia/HeatMap/useHeatMap.ts

@@ -0,0 +1,175 @@
+import type { View } from "react-native-reanimated/lib/typescript/Animated";
+import type { DayData, HeatMapProps } from "./HeatMap";
+import { useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+function useHeatMap({
+  startDate,
+  endDate,
+  data,
+  style,
+  minValue,
+  maxValue,
+  ref,
+  popupStyle
+}: HeatMapProps) {
+
+  const cellSize = style?.cellSize ?? 24;
+  const cellGap = style?.cellGap ?? 4;
+  const cellMaxColor = style?.cellMaxColor ?? '#50f555ff';
+  const cellMinColor = style?.cellMinColor ?? '#ffffffff';
+
+  const numberOfDaysInWeek = 7;
+  const numberOfMsInDay = 1000 * 60 * 60 * 24;
+
+  const [popupData, setPopupData] = useState<
+    { x: number; y: number; day: DayData; } | undefined
+  >(undefined);
+
+  const [popupDimension, setPopupDimension] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  const popupRef = useRef<View>(null);
+
+  const formatDate = (date: Date) =>
+    `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+      2,
+      '0'
+    )}-${String(date.getDate()).padStart(2, '0')}`;
+
+  const { daysInRange, computedMin, computedMax } = useMemo(() => {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+
+    const output: DayData[] = [];
+    let computedMax = Number.MIN_VALUE;
+    let computedMin = Number.MAX_VALUE;
+
+    const startDayOfWeek = start.getDay();
+
+    for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+      const dateStr = formatDate(d);
+      const value = data?.[dateStr] ?? 0;
+
+      const dayOfWeek = d.getDay();
+      const daysFromStart = Math.floor(
+        (d.getTime() - start.getTime()) / numberOfMsInDay
+      );
+
+      const week = Math.floor(
+        (startDayOfWeek + daysFromStart) / numberOfDaysInWeek
+      );
+
+      computedMax = Math.max(computedMax, value);
+      computedMin = Math.min(computedMin, value);
+
+      output.push({
+        date: dateStr,
+        value,
+        dayOfWeek,
+        week,
+        x: week * (cellSize + cellGap),
+        y: dayOfWeek * (cellSize + cellGap),
+      });
+    }
+
+    return {
+      daysInRange: output,
+      computedMin: minValue !== undefined ? minValue : computedMin,
+      computedMax: maxValue !== undefined ? maxValue : computedMax,
+    };
+  }, [startDate, endDate, data, minValue, maxValue, cellSize, cellGap]);
+
+  // --- COLOR LOGIC ---
+  const getColor = (value: number) => {
+    if (value <= 0) return cellMinColor;
+
+    const intensity = Math.min(
+      1,
+      Math.max(0, (value - computedMin) / (computedMax - computedMin || 1))
+    );
+
+    const bigint = parseInt(cellMaxColor.replace('#', ''), 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+
+    const mix = (base: number) => Math.round(255 - (255 - base) * intensity);
+
+    return `rgb(${mix(r)}, ${mix(g)}, ${mix(b)})`;
+  };
+
+  // Heatmap size
+  const numWeeks = Math.ceil(daysInRange.length / 7 + 1);
+  const totalWidth = numWeeks * (cellSize + cellGap);
+  const totalHeight = 7 * (cellSize + cellGap);
+
+  // --- POPUP MEASUREMENT ---
+  useLayoutEffect(() => {
+    if (popupRef.current) {
+      popupRef.current.measure((x, y, width, height) => {
+        setPopupDimension({ width, height });
+      });
+    }
+  }, [popupData]);
+
+  // --- TOUCH HANDLER ---
+  const touchHandler = (x: number, y: number) => {
+    if (!popupStyle?.renderPopup || (x < 0 || y < 0 || x >= totalWidth || y >= totalHeight)) {
+      setPopupData(undefined);
+      return;
+    }
+
+    const col = Math.floor(x / (cellSize + cellGap));
+    const row = Math.floor(y / (cellSize + cellGap));
+
+    const start = new Date(startDate);
+    const startDayOfWeek = start.getDay();
+
+    const index = col * numberOfDaysInWeek + row;
+
+    if (
+      index >= startDayOfWeek &&
+      index - startDayOfWeek < daysInRange.length
+    ) {
+      const day = daysInRange[index - startDayOfWeek];
+      if (day) {
+        setPopupData({
+          x: col * (cellSize + cellGap),
+          y: row * (cellSize + cellGap),
+          day,
+        });
+        return;
+      }
+    }
+
+    setPopupData(undefined);
+  };
+  const onTouchOutside = () => {
+    setPopupData(undefined);
+  };
+
+  useImperativeHandle(ref, () => ({
+    touchedOutside: () => {
+      setPopupData(undefined);
+    }
+  }), [ref]);
+
+  return {
+    daysInRange,
+    computedMin,
+    computedMax,
+    totalWidth,
+    totalHeight,
+    popupData,
+    popupRef,
+    popupDimension,
+    touchHandler,
+    getColor,
+    cellSize,
+    onTouchOutside
+  };
+}
+
+export default useHeatMap;

package/src/skia/PieChart/PieChart.tsx

@@ -0,0 +1,114 @@
+import { Canvas, Path } from '@shopify/react-native-skia';
+import { type CommonStyle } from '../common';
+import { Text, View } from 'react-native';
+import { usePieChart } from './usePieChart';
+import Popup, { type PopupStyle } from '../Popup';
+import { useState } from 'react';
+
+export interface PopupData {
+  centerX: number;
+  centerY: number;
+  data: PieSlice;
+}
+
+export type PieSlice = {
+  value: number;
+  color?: string;
+  label?: string;
+};
+
+export type PieChartProps = {
+  slices: PieSlice[];
+  style: PieChartStyles;
+  centerView?: React.ReactNode;
+  onSliceTouch?: (slice: PieSlice | undefined) => void;
+  popupStyle?: PopupStyle<PieSlice>;
+};
+
+export interface PieChartStyles extends CommonStyle {
+  radius?: number;
+  innerRadius?: number;
+  innerColor?: string;
+}
+
+function PieChart(props: PieChartProps) {
+  const { radius, innerRadius, paths, popupData, touchHandler } =
+    usePieChart(props);
+  const { style, centerView, popupStyle } = props;
+
+  const paddingTop = style.paddingTop ?? style.padding ?? 0;
+  const paddingBottom = style.paddingBottom ?? style.padding ?? 0;
+  const paddingLeft = style.paddingLeft ?? style.padding ?? 0;
+  const paddingRight = style.paddingRight ?? style.padding ?? 0;
+  const [viewOffset, setViewOffset] = useState({ x: 0, y: 0 });
+
+  return (
+    <View
+      style={{
+        paddingTop: paddingTop,
+        paddingBottom: paddingBottom,
+        paddingRight: paddingRight,
+        paddingLeft: paddingLeft,
+        backgroundColor: style.backgroundColor ?? 'transparent',
+      }}
+      ref={(view) => {
+        view?.measureInWindow((fx, fy) => {
+          setViewOffset((prev) => {
+            if (prev.x === fx && prev.y === fy) {
+              return prev;
+            }
+            return { x: fx, y: fy };
+          });
+        });
+      }}
+    >
+      {centerView && (
+        <View
+          style={{
+            position: 'absolute',
+            top: paddingTop + radius - innerRadius,
+            left: paddingLeft + radius - innerRadius,
+            width: innerRadius * 2,
+            height: innerRadius * 2,
+            borderRadius: innerRadius,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: style.innerColor ?? 'black',
+          }}
+        >
+          {centerView}
+        </View>
+      )}
+      <Canvas
+        style={{
+          width: radius * 2,
+          height: radius * 2,
+          backgroundColor: style.backgroundColor ?? 'transparent',
+        }}
+        onTouchStart={(event) =>
+          touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY)
+        }
+      >
+        {paths.map(({ path, color }, index) => (
+          <Path key={index} path={path} color={color} stroke={{ width: 5 }} />
+        ))}
+      </Canvas>
+      {popupData && (
+        <Popup
+          popupData={{
+            x: popupData.centerX,
+            y: popupData.centerY,
+            data: popupData.data,
+          }}
+          totalWidth={radius * 2}
+          totalHeight={radius * 2}
+          touchHandler={(x, y) => touchHandler(x - paddingLeft, y - paddingTop)}
+          viewOffset={viewOffset}
+          popupStyle={popupStyle}
+        />
+      )}
+    </View>
+  );
+}
+
+export default PieChart;

package/src/skia/PieChart/usePieChart.ts

@@ -0,0 +1,156 @@
+import { useState } from "react";
+import type { PieChartProps, PieChartStyles, PieSlice, PopupData } from "./PieChart";
+import { rect, Skia } from "@shopify/react-native-skia";
+import { getRandomRGBColor } from "../common";
+
+function deegreesToRadians(degrees: number): number {
+	return (degrees * Math.PI) / 180;
+}
+
+function ypoint(angle: number, radius: number, cy: number): number {
+	return cy - radius * Math.sin(deegreesToRadians(angle));
+}
+
+function xpoint(angle: number, radius: number, cx: number): number {
+	return cx - radius * Math.cos(deegreesToRadians(angle));
+}
+
+function getCircularPoints(
+	startAngle: number,
+	radius: number,
+	angle: number,
+	cx: number,
+	cy: number
+): [number, number, number, number] {
+	let x1 = xpoint(startAngle, radius, cx);
+	let y1 = ypoint(startAngle, radius, cy);
+	let x2 = xpoint(startAngle + angle, radius, cx);
+	let y2 = ypoint(startAngle + angle, radius, cy);
+
+	return [x1, y1, x2, y2];
+}
+
+export function usePieChart({
+	slices,
+	style,
+	onSliceTouch
+}: PieChartProps
+) {
+	const [popupData, setPopupData] = useState<PopupData | undefined>(undefined);
+
+	const radius = style.radius ?? 150;
+	const diameter = radius * 2;
+	const innerRadius = style.innerRadius ?? 100;
+	const cx = radius;
+	const cy = radius;
+
+	const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+
+	let startAngle = 0;
+
+	const paths = slices.map(({ value, color }, index) => {
+		const sweepAngle = (value / total) * 360;
+
+		let [x1, y1, x2, y2] = getCircularPoints(
+			startAngle,
+			radius,
+			sweepAngle,
+			cx,
+			cy
+		);
+		let [cx1, cy1, cx2, cy2] = getCircularPoints(
+			startAngle,
+			innerRadius,
+			sweepAngle,
+			cx,
+			cy
+		);
+
+		const path = Skia.Path.Make();
+		path.moveTo(cx1, cy1);
+		path.lineTo(x1, y1);
+		path.addArc(
+			rect(
+				cx - radius,
+				cy - radius,
+				radius * 2,
+				radius * 2
+			),
+			startAngle + 180,
+			sweepAngle
+		);
+		path.lineTo(cx2, cy2);
+
+		path.addArc(
+			rect(
+				cx - innerRadius,
+				cy - innerRadius,
+				innerRadius * 2,
+				innerRadius * 2
+			),
+			startAngle + 180 + sweepAngle,
+			-sweepAngle
+		);
+		path.lineTo(x1, y1);
+		path.close();
+
+		startAngle += sweepAngle;
+
+		return { path, color: color ?? getRandomRGBColor() };
+	});
+
+	const touchHandler = (locationX: number, locationY: number) => {
+		if (!onSliceTouch || locationX < 0 || locationY < 0 || locationX >= diameter || locationY >= diameter) {
+			setPopupData(undefined);
+			return;
+		}
+
+		let foundPath = false;
+		let angles = 0;
+
+		paths.forEach(({ path }, index) => {
+			let slice = slices[index];
+			if (!slice) return;
+
+			let lastAngle = (slice.value / total) * 360;
+			if (path.contains(locationX, locationY)) {
+				const label = slice.label || 'Slice';
+
+				const outerX = xpoint(angles + lastAngle / 2, radius, cx);
+				const innerX = xpoint(angles + lastAngle / 2, innerRadius, cx);
+
+				const outerY = ypoint(angles + lastAngle / 2, radius, cy);
+				const innerY = ypoint(angles + lastAngle / 2, innerRadius, cy);
+
+				const centerY = (outerY + innerY) / 2;
+				const centerX = (outerX + innerX) / 2;
+
+				onSliceTouch?.(slice);
+				setPopupData({
+					centerX: centerX,
+					centerY: centerY,
+					data: slice,
+				});
+
+				foundPath = true;
+				return;
+			}
+
+			angles += lastAngle;
+		});
+
+		if (!foundPath) {
+			console.log('No slice found at touch location');
+			onSliceTouch?.(undefined);
+			setPopupData(undefined);
+		}
+	};
+	return {
+		paths,
+		diameter,
+		innerRadius,
+		radius,
+		popupData,
+		touchHandler,
+	};
+}

package/src/skia/Popup.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { Modal, View } from 'react-native';
+
+export interface PopupStyle<T> {
+	width?: number;
+	height?: number;
+	renderPopup?: (data: T) => React.ReactNode;
+}
+
+interface PopupData<T> {
+  x: number;
+  y: number;
+  data: T;
+}
+
+interface PopupProps<T> {
+  popupData?: PopupData<T> | PopupData<T>[];
+  totalWidth: number;
+  totalHeight: number;
+  touchHandler?: (x: number, y: number) => void;
+  onTouchOutside?: () => void;
+	popupStyle?: PopupStyle<T>;
+  viewOffset: {
+    x: number;
+    y: number;
+  };
+}
+
+export default function Popup<T>({
+  popupData,
+  totalWidth,
+  totalHeight,
+  touchHandler,
+  onTouchOutside,
+  popupStyle,
+  viewOffset,
+}: PopupProps<T>) {
+  return (
+    <>
+      {popupData && popupStyle?.renderPopup && (
+        <Modal
+          animationType="fade"
+          transparent={true}
+          visible={true}
+          onRequestClose={() => {
+            onTouchOutside?.();
+          }}
+          onTouchStart={(e) => {
+            console.log('modal touched ');
+          }}
+        >
+          <View
+            style={{
+              flex: 1,
+              width: '100%',
+              height: '100%',
+            }}
+            onTouchStart={(e) => {
+              const x = e.nativeEvent.pageX;
+              const y = e.nativeEvent.pageY;
+              touchHandler?.(x - viewOffset.x, y - viewOffset.y);
+            }}
+          >
+            {popupData && !Array.isArray(popupData) && (
+              <View
+                style={[
+                  {
+                    position: 'absolute',
+                    left: Math.max(
+                      0,
+                      Math.min(popupData.x, totalWidth - (popupStyle?.width ?? 0)) +
+                        viewOffset.x
+                    ),
+                    top: Math.max(
+                      0,
+                      Math.min(
+                        popupData.y,
+                        totalHeight - (popupStyle?.height ?? 0)
+                      ) + viewOffset.y
+                    ),
+                  },
+                ]}
+                onTouchStart={(e) => e.stopPropagation()}
+              >
+                {popupStyle?.renderPopup(popupData.data)}
+              </View>
+            )}
+
+            {popupData &&
+              Array.isArray(popupData) &&
+              popupData.map((popupItem, index) => 
+               (
+                  <View
+                    key={index}
+                    style={[
+                      {
+                        position: 'absolute',
+                        left: Math.max(
+                          0,
+                          Math.min(
+                            popupItem.x,
+                            totalWidth - (popupStyle?.width ?? 0)
+                          ) + viewOffset.x
+                        ),
+                        top: Math.max(
+                          0,
+                          Math.min(
+                            popupItem.y,
+                            totalHeight - (popupStyle?.height ?? 0)
+                          ) + viewOffset.y
+                        ),
+                      },
+                    ]}
+                    onTouchStart={(e) => e.stopPropagation()}
+                  >
+                    {popupStyle?.renderPopup?.(popupItem.data)}
+                  </View>
+                )
+              )}
+          </View>
+        </Modal>
+      )}
+    </>
+  );
+}