@bashem/rn-charts 0.0.3 → 0.0.5

package/src/skia/AreaChart/AreaChart.tsx

@@ -1,19 +1,29 @@
 // AreaChart.tsx
-import { Canvas, Circle, Group, Path, Text } from '@shopify/react-native-skia';
+import { Canvas, Circle, Group, Path } from '@shopify/react-native-skia';
 import { type CommonStyle } from '../common';
-import VerticalLabel from '../Common/VerticalLabel';
 import { View } from 'react-native';
-import useAreaChart, { type AreaData } from './useAreaChart';
+import useAreaChart from './useAreaChart';
 import { useState } from 'react';
 import { lighten } from '../../util/colors';
 import Popup, { type PopupStyle } from '../Popup';
+import VerticalLabelView, { type VerticalLabelStyle } from "../Common/VerticalLabelView";
+import HorizontalLabelView, { type HorizontalLabelStyle } from "../Common/HorizontalLabelView";
 
-export interface AreaChartStyle extends CommonStyle {
+export interface AreaData {
+  values: number[];
+  label?: string;
+  color?: string;
+}
+
+export interface AreaChartStyle extends CommonStyle, VerticalLabelStyle {
   width: number;
   height: number;
   showPoints?: boolean;
   pointRadius?: number;
   lightenPointsBy?: number;
+  strokeWidth?: number;
+  verticalLabelStyle?: VerticalLabelStyle;
+  horizontalLabelStyle?: HorizontalLabelStyle;
 }
 
 export interface AreaChartProps {
@@ -21,35 +31,40 @@ export interface AreaChartProps {
   minValue?: number;
   maxValue?: number;
   xLabels?: string[];
+  yLabels: number[];
+  yLabelView?: (percentage: number, min: number, max: number) => JSX.Element;
+  xLabelView?: (label?: string) => JSX.Element;
   style?: AreaChartStyle;
-  popupStyle: PopupStyle<{ rowIndex: number; colIndex: number; value: number }>;
+  popupStyle: PopupStyle<{ rowIndex: number; colIndex: number; value: number; }>;
 }
 
-function AreaChart(props: AreaChartProps) {
+function AreaChart({ xLabelView, yLabelView, ...props }: AreaChartProps) {
   const {
     minValue,
     maxValue,
     canvasHeight,
     areaCanvasHeight,
-    labelWidth,
+    verticalLabelWidth,
+    verticalLabelStrokeWidth,
+    yLabels,
+    setVerticalLabelWidth,
+    setHorizontalLabelHeight,
     chartWidth,
     paths,
     xLabelsData,
     paddingLeft,
     paddingTop,
     paddingHorizontal,
-    font,
     touchLine,
     touchHandler,
   } = useAreaChart(props);
   const { style, popupStyle } = props;
 
   const [viewOffset, setViewOffset] = useState({ x: 0, y: 0 });
-  console.log('AreaChart render', { touchLine });
 
   return (
     <View
-      style={[style, { flexDirection: 'row' }]}
+      style={[style, { flexDirection: "column" }]}
       ref={(view) => {
         view?.measureInWindow((fx, fy) => {
           setViewOffset((prev) => {
@@ -61,57 +76,65 @@ function AreaChart(props: AreaChartProps) {
         });
       }}
     >
-      <VerticalLabel
-        minValue={minValue}
-        maxValue={maxValue}
-        styles={{
-          height: areaCanvasHeight,
-          width: labelWidth,
-          fontSize: style?.fontSize,
-        }}
-        labelCount={5}
-      />
-
-      <Canvas
-        style={{
-          width: chartWidth,
-          height: canvasHeight,
-        }}
-        onTouchStart={(event) =>
-          touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY)
+      <View style={{ flexDirection: "row" }}>
+        {yLabelView &&
+          <VerticalLabelView
+            onLayout={(event) => {
+              setVerticalLabelWidth(event.nativeEvent.layout.width);
+            }}
+            labelPercentages={yLabels}
+            styles={{
+              height: areaCanvasHeight,
+              verticalLabelStyle: props.style?.verticalLabelStyle,
+            }}
+          >
+            {percentage => yLabelView(percentage, minValue, maxValue)}
+          </VerticalLabelView>
         }
-      >
-        {paths.map(({ path, points, color }, index) => {
-          return (
-            <Group key={index}>
-              <Path path={path} color={color} />
-              {style?.showPoints &&
-                color &&
-                points.map((points) => (
-                  <Circle
-                    key={`${points.x}-${points.y}`}
-                    cx={points.x}
-                    cy={points.y}
-                    r={style?.pointRadius ?? 3}
-                    color={lighten(color, style?.lightenPointsBy ?? 0.3)}
-                  />
-                ))}
-            </Group>
-          );
-        })}
-        {xLabelsData.map(({ label, xPosition }, index) => {
-          return (
-            <Text
-              key={index}
-              x={xPosition}
-              y={canvasHeight}
-              text={label}
-              font={font}
-              color={'white'}
-            />
-          );
-        })}
-      </Canvas>
+
+        <Canvas
+          style={{
+            width: chartWidth,
+            height: areaCanvasHeight,
+          }}
+          onTouchStart={(event) =>
+            touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY)
+          }
+        >
+          {paths.map(({ path, points, color }, index) => {
+            return (
+              <Group key={index}>
+                <Path path={path} color={color} />
+                {style?.showPoints &&
+                  color &&
+                  points.map((points) => (
+                    <Circle
+                      key={`${points.x}-${points.y}`}
+                      cx={points.x}
+                      cy={points.y}
+                      r={style?.pointRadius ?? 3}
+                      color={lighten(color, style?.lightenPointsBy ?? 0.3)}
+                    />
+                  ))}
+              </Group>
+            );
+          })}
+        </Canvas>
+      </View>
+      {
+        xLabelView &&
+        <HorizontalLabelView
+          labels={xLabelsData.map(labelData => labelData.label)}
+          positions={xLabelsData.map(labelData => labelData.xPosition)}
+          style={{
+            left: verticalLabelWidth,
+            width: chartWidth,
+          }}
+          onLayout={(event) => setHorizontalLabelHeight(event.nativeEvent.layout.height)}
+        >
+          {label => xLabelView(label.toString())}
+        </HorizontalLabelView>
+      }
       {touchLine && (
         <Popup
           popupData={touchLine.y.map((y, index) => ({
@@ -123,11 +146,11 @@ function AreaChart(props: AreaChartProps) {
               value: touchLine.values[index]!,
             },
           }))}
-          totalWidth={chartWidth + labelWidth + paddingHorizontal}
+          totalWidth={chartWidth + verticalLabelWidth + paddingHorizontal}
           totalHeight={canvasHeight}
           touchHandler={(x, y) => {
             console.log('Popup touchHandler', x, y);
-            touchHandler(x - labelWidth - paddingLeft, y - paddingTop);
+            touchHandler(x - verticalLabelWidth - paddingLeft, y - paddingTop);
           }}
           viewOffset={viewOffset}
           popupStyle={popupStyle}

package/src/skia/AreaChart/useAreaChart.ts

@@ -1,15 +1,9 @@
 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 { getPaddings } from "../common";
+import type { AreaChartProps } from "./AreaChart";
 import { isDefined } from "../../util/util";
 
-export interface AreaData {
-	values: number[];
-	label?: string;
-	color?: string;
-}
-
 interface Point {
 	x: number;
 	y: number;
@@ -23,11 +17,6 @@ export interface PathData {
 	label?: string;
 }
 
-export interface XLable {
-	label: string;
-	xPosition: number;
-}
-
 interface TouchLine {
 	col: number;
 	x: number;
@@ -35,12 +24,18 @@ interface TouchLine {
 	values: number[];
 }
 
+interface XLabel {
+	label: string;
+	xPosition: number;
+}
+
 function useAreaChart({
 	data,
 	xLabels,
 	maxValue,
 	minValue,
 	style,
+	yLabels,
 }: AreaChartProps
 ) {
 
@@ -54,12 +49,12 @@ function useAreaChart({
 	} = 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 [verticalLabelWidth, setVerticalLabelWidth] = useState(style?.verticalLabelStyle?.width ?? 0);
+	const strokeWidth = style?.strokeWidth ?? 2
+	const verticalLabelStrokeWidth = style?.verticalLabelStyle?.strokeWidth ?? strokeWidth
+	const chartWidth = width - verticalLabelWidth - paddingHorizontal;
+	const [horizontalLabelHeight, setHorizontalLabelHeight] = useState(20)
+	const areaCanvasHeight = canvasHeight - horizontalLabelHeight;
 
 	const { maxValueCalculated, minValueCalculated } = useMemo(() => {
 		if (isDefined(maxValue) && isDefined(minValue)) {
@@ -97,7 +92,7 @@ function useAreaChart({
 				const xPos = i * stepX;
 				const yPos = Math.max(0, areaCanvasHeight - ((y - minValueCalculated) / (maxValueCalculated - minValueCalculated)) * areaCanvasHeight);
 
-				points.push({ x: xPos, y: yPos });
+				points.push({x: xPos, y: yPos });
 				values.push(y);
 				p.lineTo(xPos, yPos);
 			});
@@ -117,7 +112,7 @@ function useAreaChart({
 		return pathData;
 	}, [data, chartWidth, maxValueCalculated, minValueCalculated]);
 
-	const xLabelsData: XLable[] = useMemo(() => {
+	const xLabelsData: XLabel[] = useMemo(() => {
 		if (!xLabels || xLabels.length === 0) {
 			return [];
 		}
@@ -126,7 +121,7 @@ function useAreaChart({
 		const labels = xLabels.map((label, i) => {
 			return {
 				label,
-				xPosition: i * stepX + font.getSize(),
+				xPosition: i * stepX,
 			};
 		});
 		return labels;
@@ -152,7 +147,7 @@ function useAreaChart({
 
 		setTouchLine({
 			col: xIndex,
-			x: xIndex * stepX,
+			x: xIndex * stepX + verticalLabelWidth,
 			y: yValues,
 			values
 		});
@@ -166,12 +161,16 @@ function useAreaChart({
 		paddingTop,
 		paddingHorizontal,
 		areaCanvasHeight,
-		labelWidth,
+		strokeWidth,
+		verticalLabelStrokeWidth,
+		yLabels,
+		verticalLabelWidth,
+		setVerticalLabelWidth,
 		maxValue: maxValueCalculated,
 		minValue: minValueCalculated,
 		xLabelsData,
-		xLabelHeight,
-		font,
+		horizontalLabelHeight,
+		setHorizontalLabelHeight,
 		touchHandler,
 		touchLine
 	};

package/src/skia/BarChart/BarChart.tsx

@@ -1,16 +1,19 @@
-import { Fragment, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import {
   GestureDetector,
   Gesture,
   GestureHandlerRootView,
+  ScrollView,
 } from 'react-native-gesture-handler';
+import { Canvas, Rect, vec, type SkHostRect, LinearGradient, Group, rect as SKRect, type Transforms3d } from '@shopify/react-native-skia';
 
-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';
+import VerticalLabelView, { type VerticalLabelStyle } from "../Common/VerticalLabelView";
+import HorizontalLabelView, { type HorizontalLabelStyle } from "../Common/HorizontalLabelView";
+import { useDerivedValue } from "react-native-reanimated";
 
 export interface StackValue {
   value: number;
@@ -30,22 +33,32 @@ export interface BarChartStyle extends CommonStyle {
   barSpacing?: number;
   firstBarLeadingSpacing?: number;
   lastBarTrailingSpacing?: number;
+  verticalLabelStyle?: VerticalLabelStyle;
+  horizontalLabelStyle?: HorizontalLabelStyle;
 }
 
 export interface BarChartProps {
   data: BarData[];
-  colors?: Record<string, string>;
+  colors?: Record<string, string | string[]>;
+  yLabels: number[];
+  yLabelView?: (percentage: number, min: number, max: number) => React.JSX.Element;
+  yLabelSkiaView?: (percentage: number, yPosition: number) => React.JSX.Element | undefined;
+  xLabelView?: (label?: string) => React.JSX.Element;
+  onSelectBarView?: (stackValue: StackValue, xLabel?: string) => React.JSX.Element | undefined;
+  barSkiaView?: (rect: SkHostRect, stackValue: StackValue, xLabel?: string) => React.JSX.Element | undefined;
+  onSelectBarSkiaView?: (rect: SkHostRect, stackValue: StackValue, xLabel?: string) => React.JSX.Element | undefined;
   maxValue?: number;
   minValue?: number;
+  overscanRatio?: number;
   popupStyle?: PopupStyle<StackValue>;
   style?: BarChartStyle;
 }
 
-function BarChart(props: BarChartProps) {
+function BarChart({ xLabelView, yLabelView, yLabelSkiaView, barSkiaView, onSelectBarSkiaView, onSelectBarView, ...props }: BarChartProps) {
   const {
     maxValueCalculated,
     minValueCalculated,
-    canvasHeight,
+    yLabels,
     canvasWidth,
     paddingRight,
     paddingLeft,
@@ -53,34 +66,54 @@ function BarChart(props: BarChartProps) {
     paddingTop,
     rectangles,
     verticalLabelWidth,
+    setVerticalLabelWidth,
     chartHeight,
-    strokeWidth,
     tooltip,
-    bottomLabelHeight,
-    font,
+    setBottomLabelHeight,
     onScroll,
     touchHandler,
     totalHeight,
     totalWidth,
+    horizontalStrokeWidth,
+    startX,
+    offset
   } = useBarChart(props);
 
-  const dragGesture = Gesture.Pan()
-    .runOnJS(true)
+  const panGestureRef = useRef(Gesture.Pan());
+
+  const panGesture = Gesture.Pan()
     .onChange((event) => {
       onScroll(-event.changeX);
+    })
+    .withRef(panGestureRef);
+
+  const tapGesture = Gesture.Tap()
+    .runOnJS(true)
+    .onStart((event) => {
+      touchHandler(event.x, event.y);
     });
 
   const [viewOffset, setViewOffset] = useState({ x: 0, y: 0 });
+  const canvasGestures = Gesture.Exclusive(panGesture, tapGesture);
+  const onSelectBarViewMemo = useMemo(() => {
+    if (tooltip === undefined) { return undefined; }
+    return onSelectBarView?.(tooltip.data, tooltip.xLabel);
+  }, [tooltip]);
+  const onSelectBarSkiaViewMemo = useMemo(() => {
+    if (tooltip === undefined) { return undefined; }
+    return onSelectBarSkiaView?.(tooltip.rect, tooltip.data, tooltip.xLabel);
+  }, [tooltip]);
+  const canvasGroupTranslate = useDerivedValue<Transforms3d>(() => [{ translateX: -offset.value }], []);
 
   return (
     <GestureHandlerRootView>
       <View
         style={{
           width: totalWidth,
-          flexDirection: 'row',
+          flexDirection: 'column',
           backgroundColor: props.style?.backgroundColor,
-          paddingLeft: paddingLeft,
-          paddingRight: paddingRight,
+          paddingStart: paddingLeft,
+          paddingEnd: paddingRight,
           paddingTop: paddingTop,
           paddingBottom: paddingBottom,
         }}
@@ -95,95 +128,130 @@ function BarChart(props: BarChartProps) {
           });
         }}
       >
-        <VerticalLabel
-          maxValue={maxValueCalculated}
-          minValue={minValueCalculated}
-          labelCount={6}
-          styles={{
-            width: verticalLabelWidth,
-            height: chartHeight,
-            strokeWidth,
-          }}
-        />
-        <GestureDetector gesture={dragGesture}>
-          <Canvas
+        <View style={{ flexDirection: "row", height: chartHeight, padding: 0 }}>
+          {
+            (yLabelView || yLabelSkiaView) && (<VerticalLabelView
+              onLayout={(event) => {
+                setVerticalLabelWidth(event.nativeEvent.layout.width);
+              }}
+              labelPercentages={yLabels}
+              styles={{
+                height: chartHeight + horizontalStrokeWidth,
+                verticalLabelStyle: props.style?.verticalLabelStyle,
+              }}
+              labelSkiaView={(percentage, yPosition) => yLabelSkiaView?.(percentage, yPosition)}
+            >
+              {percentage => yLabelView?.(percentage, minValueCalculated, maxValueCalculated)}
+            </VerticalLabelView>)
+          }
+          <ScrollView horizontal={true} simultaneousHandlers={panGestureRef} style={{ padding: 0 }}>
+            <GestureDetector gesture={canvasGestures}>
+              <Canvas
+                style={{
+                  width: canvasWidth,
+                  height: chartHeight,
+                }}
+              >
+                <Group transform={canvasGroupTranslate}>
+                  {rectangles.map((bar, xIndex) => {
+                    if (bar.bars.length === 0) return null;
+                    return (
+                      <Group key={xIndex}>
+                        {bar.bars.map(({ rect, stackValue }, yIndex) => {
+                          let skiaView = barSkiaView?.(SKRect(rect.x, rect.y, rect.width, rect.height), stackValue, bar.label);
+                          if (skiaView !== undefined) { return <Group key={xIndex + "-" + yIndex}>{skiaView}</Group>; }
+                          let currentData = props.data[xIndex]!.values[yIndex]!;
+                          let color =
+                            props?.colors?.[currentData.id ?? currentData.label];
+                          return (
+                            <Rect
+                              key={xIndex + '-' + yIndex}
+                              x={rect.x}
+                              y={rect.y}
+                              width={rect.width}
+                              height={rect.height}
+                              color={Array.isArray(color) ? undefined : color}
+                            >
+                              {Array.isArray(color) && (
+                                <LinearGradient
+                                  start={vec(rect.x, rect.y)}
+                                  end={vec(rect.x + rect.width, rect.y + rect.height)}
+                                  colors={color}
+                                />
+                              )}
+                            </Rect>
+                          );
+                        })}
+                      </Group>
+                    );
+                  })}
+                </Group>
+                {onSelectBarSkiaViewMemo}
+              </Canvas>
+            </GestureDetector>
+          </ScrollView>
+        </View>
+        {
+          xLabelView &&
+          <HorizontalLabelView
+            labels={rectangles.map(bar => bar.label)}
+            positions={rectangles.map(bar => bar.x)}
+            transform={canvasGroupTranslate}
+            xOffset={offset}
             style={{
+              left: verticalLabelWidth,
               width: canvasWidth,
-              height: canvasHeight,
-              paddingRight: 50,
-              backgroundColor: 'red',
+              horizontalLabelStyle: props.style?.horizontalLabelStyle
             }}
-            onTouchStart={(event) =>
-              touchHandler(
-                event.nativeEvent.locationX,
-                event.nativeEvent.locationY
-              )
-            }
+            onLayout={(event) => setBottomLabelHeight(event.nativeEvent.layout.height)}
           >
-            {/* 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>
+            {(_index, data) => xLabelView(data)}
+          </HorizontalLabelView>
+        }
         {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)
+          <>
+            {onSelectBarViewMemo &&
+              <View
+                style={{
+                  position: "absolute",
+                  top: tooltip.rect.y + paddingTop,
+                  left: verticalLabelWidth + paddingLeft + Math.max(0, tooltip.rect.x),
+                  width: tooltip.rect.width,
+                  height: tooltip.rect.height,
+                  overflow: "hidden",
+                }}>
+                <View
+                  style={{
+                    position: "relative",
+                    top: 0,
+                    left: -Math.max(0, -tooltip.rect.x),
+                    width: tooltip.rect.width,
+                    height: tooltip.rect.height,
+                  }}
+                >
+                  {onSelectBarViewMemo}
+                </View>
+              </View>
             }
-            viewOffset={viewOffset}
-          />
+            <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);
+              }}
+              onTouchOutside={() => touchHandler(-1, -1)}
+              viewOffset={viewOffset}
+            />
+          </>
         )}
       </View>
-    </GestureHandlerRootView>
+    </GestureHandlerRootView >
   );
 }