@bashem/rn-charts 0.0.4 → 0.0.5

package/README.md

@@ -6,7 +6,7 @@ Experimental Charts Library. ⚠️ Not ready for use.
 
 
 ```sh
-npm install @bashem/rn-charts @shopify/react-native-skia@2.2.12 react-native-gesture-handler@2.28.0
+npm install @bashem/rn-charts @shopify/react-native-skia@2.2.12 react-native-gesture-handler@2.28.0 react-native-reanimated@4.1.1 react-native-worklets@0.5.1
 ```
 
 

package/lib/module/skia/AreaChart/AreaChart.js

@@ -1,28 +1,36 @@
 "use strict";
 
 // AreaChart.tsx
-import { Canvas, Circle, Group, Path, Text } from '@shopify/react-native-skia';
-import VerticalLabel from "../Common/VerticalLabel.js";
+import { Canvas, Circle, Group, Path } from '@shopify/react-native-skia';
 import { View } from 'react-native';
 import useAreaChart from "./useAreaChart.js";
 import { useState } from 'react';
 import { lighten } from "../../util/colors.js";
 import Popup from "../Popup.js";
+import VerticalLabelView from "../Common/VerticalLabelView.js";
+import HorizontalLabelView from "../Common/HorizontalLabelView.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function AreaChart(props) {
+function AreaChart({
+  xLabelView,
+  yLabelView,
+  ...props
+}) {
   const {
     minValue,
     maxValue,
     canvasHeight,
     areaCanvasHeight,
-    labelWidth,
+    verticalLabelWidth,
+    verticalLabelStrokeWidth,
+    yLabels,
+    setVerticalLabelWidth,
+    setHorizontalLabelHeight,
     chartWidth,
     paths,
     xLabelsData,
     paddingLeft,
     paddingTop,
     paddingHorizontal,
-    font,
     touchLine,
     touchHandler
   } = useAreaChart(props);
@@ -34,12 +42,9 @@ function AreaChart(props) {
     x: 0,
     y: 0
   });
-  console.log('AreaChart render', {
-    touchLine
-  });
   return /*#__PURE__*/_jsxs(View, {
     style: [style, {
-      flexDirection: 'row'
+      flexDirection: "column"
     }],
     ref: view => {
       view?.measureInWindow((fx, fy) => {
@@ -54,49 +59,53 @@ function AreaChart(props) {
         });
       });
     },
-    children: [/*#__PURE__*/_jsx(VerticalLabel, {
-      minValue: minValue,
-      maxValue: maxValue,
-      styles: {
-        height: areaCanvasHeight,
-        width: labelWidth,
-        fontSize: style?.fontSize
-      },
-      labelCount: 5
-    }), /*#__PURE__*/_jsxs(Canvas, {
+    children: [/*#__PURE__*/_jsxs(View, {
       style: {
-        width: chartWidth,
-        height: canvasHeight
+        flexDirection: "row"
       },
-      onTouchStart: event => touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY),
-      children: [paths.map(({
-        path,
-        points,
-        color
-      }, index) => {
-        return /*#__PURE__*/_jsxs(Group, {
-          children: [/*#__PURE__*/_jsx(Path, {
-            path: path,
-            color: color
-          }), style?.showPoints && color && points.map(points => /*#__PURE__*/_jsx(Circle, {
-            cx: points.x,
-            cy: points.y,
-            r: style?.pointRadius ?? 3,
-            color: lighten(color, style?.lightenPointsBy ?? 0.3)
-          }, `${points.x}-${points.y}`))]
-        }, index);
-      }), xLabelsData.map(({
-        label,
-        xPosition
-      }, index) => {
-        return /*#__PURE__*/_jsx(Text, {
-          x: xPosition,
-          y: canvasHeight,
-          text: label,
-          font: font,
-          color: 'white'
-        }, index);
+      children: [yLabelView && /*#__PURE__*/_jsx(VerticalLabelView, {
+        onLayout: event => {
+          setVerticalLabelWidth(event.nativeEvent.layout.width);
+        },
+        labelPercentages: yLabels,
+        styles: {
+          height: areaCanvasHeight,
+          verticalLabelStyle: props.style?.verticalLabelStyle
+        },
+        children: percentage => yLabelView(percentage, minValue, maxValue)
+      }), /*#__PURE__*/_jsx(Canvas, {
+        style: {
+          width: chartWidth,
+          height: areaCanvasHeight
+        },
+        onTouchStart: event => touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY),
+        children: paths.map(({
+          path,
+          points,
+          color
+        }, index) => {
+          return /*#__PURE__*/_jsxs(Group, {
+            children: [/*#__PURE__*/_jsx(Path, {
+              path: path,
+              color: color
+            }), style?.showPoints && color && points.map(points => /*#__PURE__*/_jsx(Circle, {
+              cx: points.x,
+              cy: points.y,
+              r: style?.pointRadius ?? 3,
+              color: lighten(color, style?.lightenPointsBy ?? 0.3)
+            }, `${points.x}-${points.y}`))]
+          }, index);
+        })
       })]
+    }), xLabelView && /*#__PURE__*/_jsx(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),
+      children: label => xLabelView(label.toString())
     }), touchLine && /*#__PURE__*/_jsx(Popup, {
       popupData: touchLine.y.map((y, index) => ({
         x: touchLine.x,
@@ -107,11 +116,11 @@ function AreaChart(props) {
           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/lib/module/skia/AreaChart/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"names":["Canvas","Circle","Group","Path","Text","VerticalLabel","View","useAreaChart","useState","lighten","Popup","jsx","_jsx","jsxs","_jsxs","AreaChart","props","minValue","maxValue","canvasHeight","areaCanvasHeight","labelWidth","chartWidth","paths","xLabelsData","paddingLeft","paddingTop","paddingHorizontal","font","touchLine","touchHandler","style","popupStyle","viewOffset","setViewOffset","x","y","console","log","flexDirection","ref","view","measureInWindow","fx","fy","prev","children","styles","height","width","fontSize","labelCount","onTouchStart","event","nativeEvent","locationX","locationY","map","path","points","color","index","showPoints","cx","cy","r","pointRadius","lightenPointsBy","label","xPosition","text","popupData","data","rowIndex","colIndex","col","value","values","totalWidth","totalHeight"],"sourceRoot":"../../../../src","sources":["skia/AreaChart/AreaChart.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Canvas","Circle","Group","Path","View","useAreaChart","useState","lighten","Popup","VerticalLabelView","HorizontalLabelView","jsx","_jsx","jsxs","_jsxs","AreaChart","xLabelView","yLabelView","props","minValue","maxValue","canvasHeight","areaCanvasHeight","verticalLabelWidth","verticalLabelStrokeWidth","yLabels","setVerticalLabelWidth","setHorizontalLabelHeight","chartWidth","paths","xLabelsData","paddingLeft","paddingTop","paddingHorizontal","touchLine","touchHandler","style","popupStyle","viewOffset","setViewOffset","x","y","flexDirection","ref","view","measureInWindow","fx","fy","prev","children","onLayout","event","nativeEvent","layout","width","labelPercentages","styles","height","verticalLabelStyle","percentage","onTouchStart","locationX","locationY","map","path","points","color","index","showPoints","cx","cy","r","pointRadius","lightenPointsBy","labels","labelData","label","positions","xPosition","left","toString","popupData","data","rowIndex","colIndex","col","value","values","totalWidth","totalHeight","console","log"],"sourceRoot":"../../../../src","sources":["skia/AreaChart/AreaChart.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/skia/AreaChart/useAreaChart.js

@@ -2,14 +2,15 @@
 
 import { Skia } from "@shopify/react-native-skia";
 import { useMemo, useState } from "react";
-import { getCommonStyleFont, getPaddings } from "../common.js";
+import { getPaddings } from "../common.js";
 import { isDefined } from "../../util/util.js";
 function useAreaChart({
   data,
   xLabels,
   maxValue,
   minValue,
-  style
+  style,
+  yLabels
 }) {
   const height = style?.height ?? 200;
   const width = style?.width ?? 200;
@@ -20,13 +21,12 @@ function useAreaChart({
     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 [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
@@ -93,7 +93,7 @@ function useAreaChart({
     const labels = xLabels.map((label, i) => {
       return {
         label,
-        xPosition: i * stepX + font.getSize()
+        xPosition: i * stepX
       };
     });
     return labels;
@@ -114,7 +114,7 @@ function useAreaChart({
     const values = paths.map(path => path.values[xIndex]);
     setTouchLine({
       col: xIndex,
-      x: xIndex * stepX,
+      x: xIndex * stepX + verticalLabelWidth,
       y: yValues,
       values
     });
@@ -127,12 +127,16 @@ function useAreaChart({
     paddingTop,
     paddingHorizontal,
     areaCanvasHeight,
-    labelWidth,
+    strokeWidth,
+    verticalLabelStrokeWidth,
+    yLabels,
+    verticalLabelWidth,
+    setVerticalLabelWidth,
     maxValue: maxValueCalculated,
     minValue: minValueCalculated,
     xLabelsData,
-    xLabelHeight,
-    font,
+    horizontalLabelHeight,
+    setHorizontalLabelHeight,
     touchHandler,
     touchLine
   };

package/lib/module/skia/AreaChart/useAreaChart.js.map

@@ -1 +1 @@
-{"version":3,"names":["Skia","useMemo","useState","getCommonStyleFont","getPaddings","isDefined","useAreaChart","data","xLabels","maxValue","minValue","style","height","width","paddingLeft","paddingTop","paddingHorizontal","paddingVertical","canvasHeight","labelWidth","chartWidth","xLabelHeight","length","fontSize","areaCanvasHeight","font","maxValueCalculated","minValueCalculated","Number","MIN_VALUE","MAX_VALUE","forEach","datum","values","value","paths","pathData","areaData","stepX","p","Path","Make","moveTo","points","y","i","xPos","yPos","Math","max","push","x","lineTo","close","path","color","label","xLabelsData","labels","map","xPosition","getSize","touchLine","setTouchLine","undefined","touchHandler","touchedX","touchedY","xIndex","round","yValues","col"],"sourceRoot":"../../../../src","sources":["skia/AreaChart/useAreaChart.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Skia","useMemo","useState","getPaddings","isDefined","useAreaChart","data","xLabels","maxValue","minValue","style","yLabels","height","width","paddingLeft","paddingTop","paddingHorizontal","paddingVertical","canvasHeight","verticalLabelWidth","setVerticalLabelWidth","verticalLabelStyle","strokeWidth","verticalLabelStrokeWidth","chartWidth","horizontalLabelHeight","setHorizontalLabelHeight","areaCanvasHeight","maxValueCalculated","minValueCalculated","Number","MIN_VALUE","MAX_VALUE","forEach","datum","values","value","paths","pathData","areaData","stepX","length","p","Path","Make","moveTo","points","y","i","xPos","yPos","Math","max","push","x","lineTo","close","path","color","label","xLabelsData","labels","map","xPosition","touchLine","setTouchLine","undefined","touchHandler","touchedX","touchedY","xIndex","round","yValues","col"],"sourceRoot":"../../../../src","sources":["skia/AreaChart/useAreaChart.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/skia/BarChart/BarChart.js

@@ -1,18 +1,28 @@
 "use strict";
 
-import { Fragment, useState } from 'react';
+import React, { useMemo, useRef, 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 { GestureDetector, Gesture, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
+import { Canvas, Rect, vec, LinearGradient, Group, rect as SKRect } from '@shopify/react-native-skia';
 import useBarChart from "./useBarChart.js";
-import VerticalLabel from "../Common/VerticalLabel.js";
 import Popup from "../Popup.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function BarChart(props) {
+import VerticalLabelView from "../Common/VerticalLabelView.js";
+import HorizontalLabelView from "../Common/HorizontalLabelView.js";
+import { useDerivedValue } from "react-native-reanimated";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function BarChart({
+  xLabelView,
+  yLabelView,
+  yLabelSkiaView,
+  barSkiaView,
+  onSelectBarSkiaView,
+  onSelectBarView,
+  ...props
+}) {
   const {
     maxValueCalculated,
     minValueCalculated,
-    canvasHeight,
+    yLabels,
     canvasWidth,
     paddingRight,
     paddingLeft,
@@ -20,31 +30,53 @@ function BarChart(props) {
     paddingTop,
     rectangles,
     verticalLabelWidth,
+    setVerticalLabelWidth,
     chartHeight,
-    strokeWidth,
     tooltip,
-    bottomLabelHeight,
-    font,
+    setBottomLabelHeight,
     onScroll,
     touchHandler,
     totalHeight,
-    totalWidth
+    totalWidth,
+    horizontalStrokeWidth,
+    startX,
+    offset
   } = useBarChart(props);
-  const dragGesture = Gesture.Pan().runOnJS(true).onChange(event => {
+  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(() => [{
+    translateX: -offset.value
+  }], []);
   return /*#__PURE__*/_jsx(GestureHandlerRootView, {
     children: /*#__PURE__*/_jsxs(View, {
       style: {
         width: totalWidth,
-        flexDirection: 'row',
+        flexDirection: 'column',
         backgroundColor: props.style?.backgroundColor,
-        paddingLeft: paddingLeft,
-        paddingRight: paddingRight,
+        paddingStart: paddingLeft,
+        paddingEnd: paddingRight,
         paddingTop: paddingTop,
         paddingBottom: paddingBottom
       },
@@ -61,64 +93,119 @@ function BarChart(props) {
           });
         });
       },
-      children: [/*#__PURE__*/_jsx(VerticalLabel, {
-        maxValue: maxValueCalculated,
-        minValue: minValueCalculated,
-        labelCount: 6,
-        styles: {
-          width: verticalLabelWidth,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: "row",
           height: chartHeight,
-          strokeWidth
-        }
-      }), /*#__PURE__*/_jsx(GestureDetector, {
-        gesture: dragGesture,
-        children: /*#__PURE__*/_jsxs(Canvas, {
+          padding: 0
+        },
+        children: [(yLabelView || yLabelSkiaView) && /*#__PURE__*/_jsx(VerticalLabelView, {
+          onLayout: event => {
+            setVerticalLabelWidth(event.nativeEvent.layout.width);
+          },
+          labelPercentages: yLabels,
+          styles: {
+            height: chartHeight + horizontalStrokeWidth,
+            verticalLabelStyle: props.style?.verticalLabelStyle
+          },
+          labelSkiaView: (percentage, yPosition) => yLabelSkiaView?.(percentage, yPosition),
+          children: percentage => yLabelView?.(percentage, minValueCalculated, maxValueCalculated)
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          horizontal: true,
+          simultaneousHandlers: panGestureRef,
           style: {
-            width: canvasWidth,
-            height: canvasHeight,
-            paddingRight: 50,
-            backgroundColor: 'red'
+            padding: 0
           },
-          onTouchStart: event => touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY),
-          children: [/*#__PURE__*/_jsx(Line, {
-            p1: vec(0, chartHeight),
-            p2: vec(canvasWidth, chartHeight),
-            color: "white",
-            strokeWidth: strokeWidth
-          }), rectangles.map((bar, xIndex) => {
-            if (bar.bars.length === 0) return null;
-            return /*#__PURE__*/_jsxs(Fragment, {
-              children: [/*#__PURE__*/_jsx(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 /*#__PURE__*/_jsx(Rect, {
-                  x: item.x,
-                  y: item.y,
-                  width: item.width,
-                  height: item.height,
-                  color: color
-                }, xIndex + '-' + yIndex);
-              })]
-            }, xIndex);
-          })]
-        })
-      }), tooltip && /*#__PURE__*/_jsx(Popup, {
-        popupData: {
-          x: tooltip.centerX,
-          y: tooltip.centerY,
-          data: tooltip.data
+          children: /*#__PURE__*/_jsx(GestureDetector, {
+            gesture: canvasGestures,
+            children: /*#__PURE__*/_jsxs(Canvas, {
+              style: {
+                width: canvasWidth,
+                height: chartHeight
+              },
+              children: [/*#__PURE__*/_jsx(Group, {
+                transform: canvasGroupTranslate,
+                children: rectangles.map((bar, xIndex) => {
+                  if (bar.bars.length === 0) return null;
+                  return /*#__PURE__*/_jsx(Group, {
+                    children: 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 /*#__PURE__*/_jsx(Group, {
+                          children: skiaView
+                        }, xIndex + "-" + yIndex);
+                      }
+                      let currentData = props.data[xIndex].values[yIndex];
+                      let color = props?.colors?.[currentData.id ?? currentData.label];
+                      return /*#__PURE__*/_jsx(Rect, {
+                        x: rect.x,
+                        y: rect.y,
+                        width: rect.width,
+                        height: rect.height,
+                        color: Array.isArray(color) ? undefined : color,
+                        children: Array.isArray(color) && /*#__PURE__*/_jsx(LinearGradient, {
+                          start: vec(rect.x, rect.y),
+                          end: vec(rect.x + rect.width, rect.y + rect.height),
+                          colors: color
+                        })
+                      }, xIndex + '-' + yIndex);
+                    })
+                  }, xIndex);
+                })
+              }), onSelectBarSkiaViewMemo]
+            })
+          })
+        })]
+      }), xLabelView && /*#__PURE__*/_jsx(HorizontalLabelView, {
+        labels: rectangles.map(bar => bar.label),
+        positions: rectangles.map(bar => bar.x),
+        transform: canvasGroupTranslate,
+        xOffset: offset,
+        style: {
+          left: verticalLabelWidth,
+          width: canvasWidth,
+          horizontalLabelStyle: props.style?.horizontalLabelStyle
         },
-        popupStyle: props.popupStyle,
-        totalWidth: totalWidth,
-        totalHeight: totalHeight,
-        touchHandler: (x, y) => touchHandler(x - verticalLabelWidth - paddingLeft, y - paddingTop),
-        viewOffset: viewOffset
+        onLayout: event => setBottomLabelHeight(event.nativeEvent.layout.height),
+        children: (_index, data) => xLabelView(data)
+      }), tooltip && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [onSelectBarViewMemo && /*#__PURE__*/_jsx(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"
+          },
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              position: "relative",
+              top: 0,
+              left: -Math.max(0, -tooltip.rect.x),
+              width: tooltip.rect.width,
+              height: tooltip.rect.height
+            },
+            children: onSelectBarViewMemo
+          })
+        }), /*#__PURE__*/_jsx(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
+        })]
       })]
     })
   });