@bashem/rn-charts 0.0.4 → 0.0.5

package/src/skia/HeatMap/HeatMap.tsx

@@ -1,21 +1,26 @@
 import React, { type Ref } from 'react';
-import { View, Modal } from 'react-native';
-import { Canvas, Group, Rect } from '@shopify/react-native-skia';
+import { View } from 'react-native';
+import { Canvas, Group, Rect, rect, type SkHostRect } from '@shopify/react-native-skia';
 import useHeatMap from './useHeatMap';
-import type { CommonStyle } from '../common';
+import type { CommonStyle, HandleOutSideTouch } from '../common';
 import Popup, { type PopupStyle } from '../Popup';
+import VerticalLabelView, { type VerticalLabelStyle } from "../Common/VerticalLabelView";
+import HorizontalLabelView, { type HorizontalLabelStyleExtended } from "../Common/HorizontalLabelView";
 
-export type DayData = {
-  date: string;
+export type CellDatum = {
+  rowIndex: number;
+  colIndex: number;
+  groupIndex: number;
   value: number;
-  dayOfWeek: number;
-  week: number;
   x: number;
   y: number;
 };
 
-export interface HandleOutSideTouch {
-  touchedOutside: () => void;
+export interface HeatMapDataGroup {
+  cols: number;
+  startingRow: number;
+  endingRow: number;
+  data?: Record<number, Record<number, number>>;
 }
 
 export interface HeatMapStyle extends CommonStyle {
@@ -23,22 +28,55 @@ export interface HeatMapStyle extends CommonStyle {
   cellGap?: number;
   cellMaxColor?: string;
   cellMinColor?: string;
+  horizontalLabelStyle?: HorizontalLabelStyleExtended;
+  verticalLabelStyle?: VerticalLabelStyle;
+  interGroupSpacing?: number;
 }
 
 export interface HeatMapProps {
-  startDate: string;
-  endDate: string;
-  data?: Record<string, number>;
+  rows: number;
+  data: HeatMapDataGroup[];
+  coalesceGroups?: boolean;
   style?: HeatMapStyle;
   minValue?: number;
   maxValue?: number;
+  xLabelSkiaView?: (
+    index: number,
+    rect: SkHostRect,
+  ) => React.JSX.Element | undefined;
+  yLabelSkiaView?: (
+    index: number,
+    yPosition: number
+  ) => React.JSX.Element | undefined;
+
+  xLabelView?: (
+    index: number,
+    width: number
+  ) => React.JSX.Element | undefined;
+  yLabelView?: (
+    index: number
+  ) => React.JSX.Element | undefined;
+
+  cellSkiaView?: (
+    rect: SkHostRect,
+    day: CellDatum
+  ) => React.JSX.Element | undefined;
+
+  onSelectSkiaView?: (
+    rect: SkHostRect,
+    day: CellDatum
+  ) => React.JSX.Element | undefined;
+  onSelectView?: (
+    rect: SkHostRect,
+    day: CellDatum
+  ) => React.JSX.Element | undefined;
   ref?: Ref<HandleOutSideTouch | undefined>;
-  popupStyle?: PopupStyle<DayData>;
+  popupStyle?: PopupStyle<CellDatum>;
 }
 
-function HeatMap(props: HeatMapProps) {
+function HeatMap({ yLabelView, yLabelSkiaView, xLabelView, xLabelSkiaView, cellSkiaView, onSelectView, onSelectSkiaView, ...props }: HeatMapProps) {
   const {
-    daysInRange,
+    cellData,
     totalWidth,
     totalHeight,
     popupData,
@@ -48,59 +86,135 @@ function HeatMap(props: HeatMapProps) {
     getColor,
     cellSize,
     onTouchOutside,
+    horizontalLabelHeight,
+    verticalLabelWidth,
+    setHorizontalLabelHeight,
+    setVerticalLabelWidth,
+    numberOfRows,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    xLabelsRect
   } = useHeatMap(props);
 
   const [viewOffset, setViewOffset] = React.useState({ x: 0, y: 0 });
+  const onSelectSkiaViewMemo = React.useMemo(() => {
+    if (!popupData || !onSelectSkiaView) {
+      return undefined;
+    }
+    return onSelectSkiaView?.(rect(popupData.x, popupData.y, cellSize, cellSize), popupData.data);
+  }, [popupData, onSelectSkiaView, cellSize]);
+
+  const onSelectViewMemo = React.useMemo(() => {
+    if (!popupData || !onSelectView) {
+      return undefined;
+    }
+    return onSelectView(rect(popupData.x, popupData.y, cellSize, cellSize), popupData.data);
+  }, [popupData, onSelectView, cellSize]);
 
-  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 };
-          });
+  return <View
+    style={{ backgroundColor: props.style?.backgroundColor, paddingLeft, paddingRight, paddingTop, paddingBottom }}
+    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)
+      });
+    }}
+  >
+    <View style={{ flexDirection: "row" }}>
+      {
+        (yLabelView || yLabelSkiaView) && (<VerticalLabelView
+          onLayout={(event) => {
+            setVerticalLabelWidth(event.nativeEvent.layout.width);
+          }}
+          labelPercentages={Array.from({ length: numberOfRows }, (_, i) => (i + 1) / numberOfRows)}
+          styles={{
+            height: totalHeight,
+            top: horizontalLabelHeight,
+            verticalLabelStyle: props.style?.verticalLabelStyle,
+          }}
+          labelSkiaView={(_percentage, yPosition, index) => yLabelSkiaView?.(index, yPosition)}
+        >
+          {(_percentage, index) => yLabelView?.(index)}
+        </VerticalLabelView>)
+      }
+      <View style={{ width: totalWidth, height: totalHeight }}>
+        {
+          (xLabelView || xLabelSkiaView) &&
+          <HorizontalLabelView
+            labels={xLabelsRect.map((rect) => rect)}
+            positions={xLabelsRect.map(rect => rect.x)}
+            style={{
+              width: totalWidth,
+              horizontalLabelStyle: props.style?.horizontalLabelStyle,
+            }}
+            onLayout={(event) => setHorizontalLabelHeight(event.nativeEvent.layout.height)}
+            labelSkiaView={(yPostion, index, data) => xLabelSkiaView?.(index, data)}
+          >
+            {(index, rect) => xLabelView?.(index, rect.width)}
+          </HorizontalLabelView>
         }
-      >
-        <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>
+        <Canvas
+          style={{ width: totalWidth, height: totalHeight }}
+          onTouchStart={(event) =>
+            touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY)
+          }
+        >
+          <Group>
+            {cellData.map((datum) => {
+              let skiaView = cellSkiaView?.(rect(datum.x, datum.y, cellSize, cellSize), datum);
+              if (skiaView !== undefined) { return skiaView; }
+              return (
+                <Rect
+                  key={datum.x + '-' + datum.y}
+                  x={datum.x}
+                  y={datum.y}
+                  width={cellSize}
+                  height={cellSize}
+                  color={getColor(datum.value)}
+                />
+              );
+            })}
+            {onSelectSkiaViewMemo}
+          </Group>
+        </Canvas>
+      </View>
+    </View>
 
-      {popupData && props.popupStyle && (
+    {
+      popupData && (<>
+        {onSelectViewMemo &&
+          <View
+            style={{
+              position: "absolute",
+              top: popupData.y + (props.style?.horizontalLabelStyle?.viewPosition === "bottom" ? 0 : horizontalLabelHeight) + paddingTop,
+              left: popupData.x + verticalLabelWidth + paddingLeft
+            }}
+          >
+            {onSelectViewMemo}
+          </View>
+        }
         <Popup
-          popupData={{ x: popupData.x, y: popupData.y, data: popupData.day }}
+          popupData={{ x: popupData.x + verticalLabelWidth + paddingLeft, y: popupData.y + (props.style?.horizontalLabelStyle?.viewPosition === "bottom" ? 0 : horizontalLabelHeight) + paddingTop, data: popupData.data }}
           totalWidth={totalWidth}
           totalHeight={totalHeight}
-          touchHandler={touchHandler}
+          touchHandler={(x, y) => {
+            console.log(x, y)
+            touchHandler(x - verticalLabelWidth - paddingLeft, y - (props.style?.horizontalLabelStyle?.viewPosition === "bottom" ? 0 : horizontalLabelHeight) - paddingTop);
+          }}
           onTouchOutside={onTouchOutside}
           popupStyle={props.popupStyle}
           viewOffset={viewOffset}
         />
-      )}
-    </View>
-  );
+      </>
+      )
+    }
+  </View >;
 }
 
 export default HeatMap;

package/src/skia/HeatMap/useHeatMap.ts

@@ -1,14 +1,16 @@
 import type { View } from "react-native-reanimated/lib/typescript/Animated";
-import type { DayData, HeatMapProps } from "./HeatMap";
+import type { CellDatum, HeatMapProps } from "./HeatMap";
 import { useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { getPaddings } from "../common";
+import { rect, type SkHostRect } from "@shopify/react-native-skia";
 
 function useHeatMap({
-  startDate,
-  endDate,
+  rows,
   data,
   style,
   minValue,
   maxValue,
+  coalesceGroups,
   ref,
   popupStyle
 }: HeatMapProps) {
@@ -18,11 +20,18 @@ function useHeatMap({
   const cellMaxColor = style?.cellMaxColor ?? '#50f555ff';
   const cellMinColor = style?.cellMinColor ?? '#ffffffff';
 
-  const numberOfDaysInWeek = 7;
-  const numberOfMsInDay = 1000 * 60 * 60 * 24;
+  const [verticalLabelWidth, setVerticalLabelWidth] = useState<number>(0);
+  const [horizontalLabelHeight, setHorizontalLabelHeight] = useState<number>(0);
+  const {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom
+  } = getPaddings(style);
 
+  const numberOfRows = rows;
   const [popupData, setPopupData] = useState<
-    { x: number; y: number; day: DayData; } | undefined
+    { x: number; y: number; data: CellDatum; } | undefined
   >(undefined);
 
   const [popupDimension, setPopupDimension] = useState({
@@ -32,54 +41,82 @@ function useHeatMap({
 
   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[] = [];
+  const { cellData, computedMin, computedMax, numberOfCols, totalInterGroupSpacing, xLabelsRect, groupInfos } = useMemo(() => {
     let computedMax = Number.MIN_VALUE;
     let computedMin = Number.MAX_VALUE;
 
-    const startDayOfWeek = start.getDay();
+    let nextRow = 0;
+    let nextCol = 0;
+    let xLabelsRect: SkHostRect[] = [];
 
-    for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
-      const dateStr = formatDate(d);
-      const value = data?.[dateStr] ?? 0;
+    let cellsInRange: CellDatum[] = [];
+    let totalInterGroupSpacing = 0;
+    let groupInfos: { startingX: number, endingX: number, startingCellIndex: number, lastCellIndex: number; }[] = [];
 
-      const dayOfWeek = d.getDay();
-      const daysFromStart = Math.floor(
-        (d.getTime() - start.getTime()) / numberOfMsInDay
-      );
+    data.forEach((datum, index) => {
+      let startingRow = datum.startingRow;
+      let currentCol = nextCol;
 
-      const week = Math.floor(
-        (startDayOfWeek + daysFromStart) / numberOfDaysInWeek
-      );
+      if (index !== 0 && (coalesceGroups === false || datum.startingRow < nextRow)) {
+        currentCol++;
+        let additionalGroupSpacing = coalesceGroups ? 0 : (style?.interGroupSpacing ?? 0);
+        totalInterGroupSpacing += additionalGroupSpacing;
+      }
 
-      computedMax = Math.max(computedMax, value);
-      computedMin = Math.min(computedMin, value);
+      let minX = Number.MAX_VALUE;
+      let maxX = Number.MIN_VALUE;
+      let firstIndexInGroup = cellsInRange.length;
+      let lastIndexInGroup = firstIndexInGroup;
+
+      for (let i = 0; i < datum.cols; i++) {
+        for (let j = startingRow; j < (i === datum.cols - 1 ? datum.endingRow + 1 : rows); j++) {
+          const value = datum.data?.[j]?.[i] ?? 0;
+          computedMax = Math.max(computedMax, value);
+          computedMin = Math.min(computedMin, value);
+
+          let x = currentCol * (cellSize + cellGap) + totalInterGroupSpacing;
+          let y = j * (cellSize + cellGap);
+          minX = Math.min(minX, x);
+          maxX = Math.max(maxX, x);
+          cellsInRange.push({
+            rowIndex: j,
+            colIndex: currentCol,
+            groupIndex: data.indexOf(datum),
+            value,
+            x: x,
+            y: y,
+          });
+          lastIndexInGroup = cellsInRange.length - 1;
+          nextRow = j + 1;
+        }
+
+        startingRow = 0;
+        if (nextRow == rows) {
+          currentCol++;
+          nextRow = 0;
+        }
+      }
 
-      output.push({
-        date: dateStr,
-        value,
-        dayOfWeek,
-        week,
-        x: week * (cellSize + cellGap),
-        y: dayOfWeek * (cellSize + cellGap),
+      nextCol = Math.max(nextCol, currentCol);
+      xLabelsRect.push(rect(minX, 0, maxX - minX + cellSize + 1, style?.horizontalLabelStyle?.height ?? -1));
+      groupInfos.push({
+        startingX: minX,
+        endingX: maxX + cellSize,
+        startingCellIndex: firstIndexInGroup,
+        lastCellIndex: lastIndexInGroup
       });
-    }
+    });
 
     return {
-      daysInRange: output,
+      cellData: cellsInRange,
+      numberOfCols: nextCol + (nextRow > 0 ? 1 : 0),
+      totalInterGroupSpacing,
+      xLabelsRect,
+      groupInfos,
       computedMin: minValue !== undefined ? minValue : computedMin,
       computedMax: maxValue !== undefined ? maxValue : computedMax,
     };
-  }, [startDate, endDate, data, minValue, maxValue, cellSize, cellGap]);
+  }, [rows, data, minValue, maxValue, cellSize, cellGap]);
 
   // --- COLOR LOGIC ---
   const getColor = (value: number) => {
@@ -101,9 +138,8 @@ function useHeatMap({
   };
 
   // Heatmap size
-  const numWeeks = Math.ceil(daysInRange.length / 7 + 1);
-  const totalWidth = numWeeks * (cellSize + cellGap);
-  const totalHeight = 7 * (cellSize + cellGap);
+  const totalWidth = numberOfCols * (cellSize + cellGap) + totalInterGroupSpacing + verticalLabelWidth;
+  const totalHeight = rows * (cellSize + cellGap) + horizontalLabelHeight;
 
   // --- POPUP MEASUREMENT ---
   useLayoutEffect(() => {
@@ -121,27 +157,55 @@ function useHeatMap({
       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;
+    let cellIndex: number | undefined = undefined;
+
+    for (const [index, group] of groupInfos.entries()) {
+      if (x > group.endingX) continue;
+      if (x < group.startingX) continue;
+
+      let groupData = data[index];
+      if (!groupData) break;
+
+      let colIndex = Math.floor((x - group.startingX) / (cellSize + cellGap));
+      let rowIndex = Math.floor(y / (cellSize + cellGap));
+      let firstRowCells = rows - groupData.startingRow;
+
+      if (colIndex < 0 || colIndex >= groupData.cols || rowIndex < 0 || rowIndex >= rows) {
+        break;
+      }
+
+      let cellColStartingCellIndex = group.startingCellIndex + Math.max(0, colIndex - 1) * rows;
+      if (colIndex !== 0) {
+        cellColStartingCellIndex += firstRowCells;
+        cellIndex = cellColStartingCellIndex + rowIndex;
+      } else {
+        cellIndex = cellColStartingCellIndex + rowIndex - groupData.startingRow;
       }
+
+      if (cellIndex < 0 || cellIndex >= cellData.length) {
+        console.error("Calculated cell index is out of bounds:", cellIndex);
+        cellIndex = undefined;
+        break;
+      }
+      let cell = cellData[cellIndex];
+      if (!cell || x < cell.x || x > cell.x + cellSize || y < cell.y || y > cell.y + cellSize) {
+        cellIndex = undefined;
+      }
+      break;
+    }
+
+    if (cellIndex === undefined) {
+      setPopupData(undefined);
+      return;
+    }
+    const cellDatum = cellData[cellIndex];
+    if (cellDatum) {
+      setPopupData({
+        x: cellDatum.x,
+        y: cellDatum.y,
+        data: cellDatum,
+      });
+      return;
     }
 
     setPopupData(undefined);
@@ -157,7 +221,7 @@ function useHeatMap({
   }), [ref]);
 
   return {
-    daysInRange,
+    cellData,
     computedMin,
     computedMax,
     totalWidth,
@@ -168,7 +232,17 @@ function useHeatMap({
     touchHandler,
     getColor,
     cellSize,
-    onTouchOutside
+    onTouchOutside,
+    verticalLabelWidth,
+    setVerticalLabelWidth,
+    horizontalLabelHeight,
+    setHorizontalLabelHeight,
+    numberOfRows,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    xLabelsRect
   };
 }
 

package/src/skia/PieChart/PieChart.tsx

@@ -1,6 +1,6 @@
 import { Canvas, Path } from '@shopify/react-native-skia';
 import { type CommonStyle } from '../common';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import { usePieChart } from './usePieChart';
 import Popup, { type PopupStyle } from '../Popup';
 import { useState } from 'react';
@@ -15,27 +15,31 @@ export type PieSlice = {
   value: number;
   color?: string;
   label?: string;
+  radius?: number;
 };
 
 export type PieChartProps = {
   slices: PieSlice[];
   style: PieChartStyles;
   centerView?: React.ReactNode;
+  centerSkiaView?: (centerX: number, centerY: number, radius: number) => React.ReactNode;
   onSliceTouch?: (slice: PieSlice | undefined) => void;
   popupStyle?: PopupStyle<PieSlice>;
 };
 
 export interface PieChartStyles extends CommonStyle {
+  startAngle?: number;
   radius?: number;
   innerRadius?: number;
   innerColor?: string;
+  interSliceGap?: number;
 }
 
-function PieChart(props: PieChartProps) {
-  const { radius, innerRadius, paths, popupData, touchHandler } =
+function PieChart({ popupStyle, centerSkiaView, centerView, ...props }: PieChartProps) {
+  const { radius, width, height, cx, cy, innerRadius, paths, popupData, touchHandler } =
     usePieChart(props);
-  const { style, centerView, popupStyle } = props;
 
+  const { style } = props;
   const paddingTop = style.paddingTop ?? style.padding ?? 0;
   const paddingBottom = style.paddingBottom ?? style.padding ?? 0;
   const paddingLeft = style.paddingLeft ?? style.padding ?? 0;
@@ -66,8 +70,8 @@ function PieChart(props: PieChartProps) {
         <View
           style={{
             position: 'absolute',
-            top: paddingTop + radius - innerRadius,
-            left: paddingLeft + radius - innerRadius,
+            top: paddingTop + cx - innerRadius,
+            left: paddingLeft + cy - innerRadius,
             width: innerRadius * 2,
             height: innerRadius * 2,
             borderRadius: innerRadius,
@@ -81,8 +85,8 @@ function PieChart(props: PieChartProps) {
       )}
       <Canvas
         style={{
-          width: radius * 2,
-          height: radius * 2,
+          width,
+          height,
           backgroundColor: style.backgroundColor ?? 'transparent',
         }}
         onTouchStart={(event) =>
@@ -90,8 +94,9 @@ function PieChart(props: PieChartProps) {
         }
       >
         {paths.map(({ path, color }, index) => (
-          <Path key={index} path={path} color={color} stroke={{ width: 5 }} />
+          <Path key={index} path={path} color={color} />
         ))}
+        {centerSkiaView && centerSkiaView(cx, cy, innerRadius)}
       </Canvas>
       {popupData && (
         <Popup
@@ -100,8 +105,8 @@ function PieChart(props: PieChartProps) {
             y: popupData.centerY,
             data: popupData.data,
           }}
-          totalWidth={radius * 2}
-          totalHeight={radius * 2}
+          totalWidth={width}
+          totalHeight={height}
           touchHandler={(x, y) => touchHandler(x - paddingLeft, y - paddingTop)}
           viewOffset={viewOffset}
           popupStyle={popupStyle}