@react-native-ohos/victory-native-xl 41.1.1

package/LICENSE

@@ -0,0 +1,8 @@
+The MIT License (MIT)
+Copyright © 2024 <copyright holders>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# @react-native-ohos/victory-native-xl
+
+本项目基于 [victory-native-xl](https://github.com/FormidableLabs/victory-native-xl)
+
+## 文档地址 / Documentation URL 
+
+[中文 / Chinese](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/victory-native-xl.md)
+
+[英文 / English](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-en/victory-native-xl.md)
+
+## 请悉知 / Acknowledgements
+
+本项目基于 [The MIT License (MIT)](https://www.mit-license.org/) ，请自由地享受和参与开源。

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@react-native-ohos/victory-native-xl",
+  "version": "41.1.1",
+  "private": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-native-oh-library/victory-native-xl"
+  },
+  "harmony": {
+    "alias": "victory-native"
+  },
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p ./tsconfig.build.json",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "react-fast-compare": "^3.2.2",
+	  "victory-native": "41.1.0",
+    "its-fine": "^1.2.5"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@shopify/react-native-skia": ">=1.2.3",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-gesture-handler": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@types/d3-scale": "^4.0.3",
+    "@types/d3-shape": "^3.1.1",
+    "@types/react": "~18.2.14",
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.2"
+  },
+  "publishConfig": {
+    "provenance": true
+  }
+}

package/src/cartesian/CartesianChart.tsx

@@ -0,0 +1,405 @@
+import * as React from "react";
+import { type LayoutChangeEvent, Button, View } from "react-native";
+import { Canvas, Group, rect, Path } from "@shopify/react-native-skia";
+import { useSharedValue } from "react-native-reanimated";
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  type TouchData,
+} from "react-native-gesture-handler";
+import type {
+  AxisProps,
+  CartesianChartRenderArg,
+  InputFields,
+  NumericalFields,
+  SidedNumber,
+  TransformedData,
+  ChartBounds,
+} from "victory-native/src/types";
+import { transformInputData } from "victory-native/src/cartesian/utils/transformInputData";
+import { findClosestPoint } from "victory-native/src/utils/findClosestPoint";
+import { valueFromSidedNumber } from "victory-native/src/utils/valueFromSidedNumber";
+import {
+  CartesianAxis,
+  CartesianAxisDefaultProps,
+} from "victory-native/src/cartesian/components/CartesianAxis";
+import { asNumber } from "victory-native/src/utils/asNumber";
+import type { ChartPressState } from "victory-native/src/cartesian/hooks/useChartPressState";
+import { useFunctionRef } from "victory-native/src/hooks/useFunctionRef";
+import { CartesianChartProvider } from "victory-native/src/cartesian/contexts/CartesianChartContext";
+
+type CartesianChartProps<
+  RawData extends Record<string, unknown>,
+  XK extends keyof InputFields<RawData>,
+  YK extends keyof NumericalFields<RawData>,
+> = {
+  data: RawData[];
+  xKey: XK;
+  yKeys: YK[];
+  padding?: SidedNumber;
+  domainPadding?: SidedNumber;
+  domain?: { x?: [number] | [number, number]; y?: [number] | [number, number] };
+  chartPressState?:
+    | ChartPressState<{ x: InputFields<RawData>[XK]; y: Record<YK, number> }>
+    | ChartPressState<{ x: InputFields<RawData>[XK]; y: Record<YK, number> }>[];
+  children: (args: CartesianChartRenderArg<RawData, YK>) => React.ReactNode;
+  renderOutside?: (
+    args: CartesianChartRenderArg<RawData, YK>,
+  ) => React.ReactNode;
+  axisOptions?: Partial<Omit<AxisProps<RawData, XK, YK>, "xScale" | "yScale">>;
+  onChartBoundsChange?: (bounds: ChartBounds) => void;
+  gestureLongPressDelay?: number;
+};
+
+export function CartesianChart<
+  RawData extends Record<string, unknown>,
+  XK extends keyof InputFields<RawData>,
+  YK extends keyof NumericalFields<RawData>,
+>({
+  data,
+  xKey,
+  yKeys,
+  padding,
+  domainPadding,
+  children,
+  renderOutside = () => null,
+  axisOptions,
+  domain,
+  chartPressState,
+  onChartBoundsChange,
+  gestureLongPressDelay = 100,
+}: CartesianChartProps<RawData, XK, YK>) {
+  const [size, setSize] = React.useState({ width: 0, height: 0 });
+  const [hasMeasuredLayoutSize, setHasMeasuredLayoutSize] =
+    React.useState(false);
+  const onLayout = React.useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      setHasMeasuredLayoutSize(true);
+      setSize(layout);
+    },
+    [],
+  );
+  const tData = useSharedValue<TransformedData<RawData, XK, YK>>({
+    ix: [],
+    ox: [],
+    y: yKeys.reduce(
+      (acc, key) => {
+        acc[key] = { i: [], o: [] };
+        return acc;
+      },
+      {} as TransformedData<RawData, XK, YK>["y"],
+    ),
+  });
+
+  const {
+    xTicksNormalized,
+    yTicksNormalized,
+    xScale,
+    yScale,
+    chartBounds,
+    isNumericalData,
+    _tData,
+  } = React.useMemo(() => {
+    const {
+      xScale,
+      yScale,
+      isNumericalData,
+      xTicksNormalized,
+      yTicksNormalized,
+      ..._tData
+    } = transformInputData({
+      data,
+      xKey,
+      yKeys,
+      axisOptions: axisOptions
+        ? Object.assign({}, CartesianAxisDefaultProps, axisOptions)
+        : undefined,
+      outputWindow: {
+        xMin: valueFromSidedNumber(padding, "left"),
+        xMax: size.width - valueFromSidedNumber(padding, "right"),
+        yMin: valueFromSidedNumber(padding, "top"),
+        yMax: size.height - valueFromSidedNumber(padding, "bottom"),
+      },
+      domain,
+      domainPadding,
+    });
+    tData.value = _tData;
+
+    const chartBounds = {
+      left: xScale(xScale.domain().at(0) || 0),
+      right: xScale(xScale.domain().at(-1) || 0),
+      top: yScale(yScale.domain().at(0) || 0),
+      bottom: yScale(yScale.domain().at(-1) || 0),
+    };
+
+    return {
+      xTicksNormalized,
+      yTicksNormalized,
+      tData,
+      xScale,
+      yScale,
+      chartBounds,
+      isNumericalData,
+      _tData,
+    };
+  }, [
+    data,
+    xKey,
+    yKeys,
+    axisOptions,
+    padding,
+    size.width,
+    size.height,
+    domain,
+    domainPadding,
+    tData,
+  ]);
+
+  /**
+   * Pan gesture handling
+   */
+  const lastIdx = useSharedValue(null as null | number);
+  /**
+   * Take a "press value" and an x-value and update the shared values accordingly.
+   */
+  const handleTouch = (
+    v: ChartPressState<{ x: InputFields<RawData>[XK]; y: Record<YK, number> }>,
+    x: number,
+  ) => {
+    "worklet";
+    const idx = findClosestPoint(tData.value.ox, x);
+    if (typeof idx !== "number") return;
+
+    const isInYs = (yk: string): yk is YK & string => yKeys.includes(yk as YK);
+    // Shared value
+    if (v) {
+      try {
+        v.x.value.value = tData.value.ix[idx]!;
+        v.x.position.value = asNumber(tData.value.ox[idx]);
+        for (const yk in v.y) {
+          if (isInYs(yk)) {
+            v.y[yk].value.value = asNumber(tData.value.y[yk].i[idx]);
+            v.y[yk].position.value = asNumber(tData.value.y[yk].o[idx]);
+          }
+        }
+      } catch (err) {
+        // no-op
+      }
+    }
+
+    lastIdx.value = idx;
+  };
+
+  /**
+   * Touch gesture is a modified Pan gesture handler that allows for multiple presses:
+   * - Using Pan Gesture handler effectively _just_ for the .activateAfterLongPress functionality.
+   * - Tracking the finger is handled with .onTouchesMove instead of .onUpdate, because
+   *    .onTouchesMove gives us access to each individual finger.
+   * - The activation gets a bit complicated because we want to wait til "start" state before updating Press Value
+   *    which gives time for the gesture to get cancelled before we start updating the shared values.
+   *    Therefore we use gestureState.bootstrap to store some "bootstrap" information if gesture isn't active when finger goes down.
+   */
+  // touch ID -> value index mapping to keep track of which finger updates which value
+  const touchMap = useSharedValue({} as Record<number, number | undefined>);
+  const activePressSharedValues = Array.isArray(chartPressState)
+    ? chartPressState
+    : [chartPressState];
+  const gestureState = useSharedValue({
+    isGestureActive: false,
+    bootstrap: [] as [
+      ChartPressState<{ x: InputFields<RawData>[XK]; y: Record<YK, number> }>,
+      TouchData,
+    ][],
+  });
+
+  const panGesture = Gesture.Pan()
+    /**
+     * When a finger goes down, either update the state or store in the bootstrap array.
+     */
+    .onTouchesDown((e) => {
+      const vals = activePressSharedValues || [];
+      if (!vals.length || e.numberOfTouches === 0) return;
+
+      for (let i = 0; i < Math.min(e.allTouches.length, vals.length); i++) {
+        const touch = e.allTouches[i];
+        const v = vals[i];
+        if (!v || !touch) continue;
+
+        if (gestureState.value.isGestureActive) {
+          // Update the mapping
+          if (typeof touchMap.value[touch.id] !== "number")
+            touchMap.value[touch.id] = i;
+
+          v.isActive.value = true;
+          handleTouch(v, touch.x);
+        } else {
+          gestureState.value.bootstrap.push([v, touch]);
+        }
+      }
+    })
+    /**
+     * On start, check if we have any bootstraped updates we need to apply.
+     */
+    .onStart(() => {
+      gestureState.value.isGestureActive = true;
+
+      for (let i = 0; i < gestureState.value.bootstrap.length; i++) {
+        const [v, touch] = gestureState.value.bootstrap[i]!;
+        // Update the mapping
+        if (typeof touchMap.value[touch.id] !== "number")
+          touchMap.value[touch.id] = i;
+
+        v.isActive.value = true;
+        handleTouch(v, touch.x);
+      }
+    })
+    /**
+     * Clear gesture state on gesture end.
+     */
+    .onFinalize(() => {
+      gestureState.value.isGestureActive = false;
+      gestureState.value.bootstrap = [];
+    })
+    /**
+     * As fingers move, update the shared values accordingly.
+     */
+    .onTouchesMove((e) => {
+      const vals = activePressSharedValues || [];
+      if (!vals.length || e.numberOfTouches === 0) return;
+
+      for (let i = 0; i < Math.min(e.allTouches.length, vals.length); i++) {
+        const touch = e.allTouches[i];
+        const touchId = touch?.id;
+        const idx = typeof touchId === "number" && touchMap.value[touchId];
+        const v = typeof idx === "number" && vals?.[idx];
+
+        if (!v || !touch) continue;
+        if (!v.isActive.value) v.isActive.value = true;
+        handleTouch(v, touch.x);
+      }
+    })
+    /**
+     * On each finger up, start to update values and "free up" the touch map.
+     */
+    .onTouchesUp((e) => {
+      for (const touch of e.changedTouches) {
+        const vals = activePressSharedValues || [];
+
+        // Set active state to false
+        const touchId = touch?.id;
+        const idx = typeof touchId === "number" && touchMap.value[touchId];
+        const val = typeof idx === "number" && vals[idx];
+        if (val) {
+          val.isActive.value = false;
+        }
+
+        // Free up touch map for this touch
+        touchMap.value[touch.id] = undefined;
+      }
+    })
+    /**
+     * Once the gesture ends, ensure all active values are falsified.
+     */
+    .onEnd(() => {
+      const vals = activePressSharedValues || [];
+      // Set active state to false for all vals
+      for (const val of vals) {
+        if (val) {
+          val.isActive.value = false;
+        }
+      }
+    })
+    /**
+     * Activate after a long press, which helps with preventing all touch hijacking.
+     * This is important if this chart is inside of some sort of scrollable container.
+     */
+    .activateAfterLongPress(gestureLongPressDelay);
+
+  /**
+   * Allow end-user to request "raw-ish" data for a given yKey.
+   * Generate this on demand using a proxy.
+   */
+  type PointsArg = CartesianChartRenderArg<RawData, YK>["points"];
+  const points = React.useMemo<PointsArg>(() => {
+    const cache = {} as Record<YK, PointsArg[keyof PointsArg]>;
+    return new Proxy(
+      {},
+      {
+        get(_, property: string): PointsArg[keyof PointsArg] | undefined {
+          const key = property as YK;
+          if (!yKeys.includes(key)) return undefined;
+          if (cache[key]) return cache[key];
+
+          cache[key] = _tData.ix.map((x, i) => ({
+            x: asNumber(_tData.ox[i]),
+            xValue: x,
+            y: _tData.y[key].o[i],
+            yValue: _tData.y[key].i[i],
+          }));
+
+          return cache[key];
+        },
+      },
+    ) as PointsArg;
+  }, [_tData, yKeys]);
+
+  // On bounds change, emit
+  const onChartBoundsRef = useFunctionRef(onChartBoundsChange);
+  React.useEffect(() => {
+    onChartBoundsRef.current?.(chartBounds);
+  }, [chartBounds, onChartBoundsRef]);
+
+  const renderArg: CartesianChartRenderArg<RawData, YK> = {
+    xScale,
+    yScale,
+    chartBounds,
+    canvasSize: size,
+    points,
+  };
+  const clipRect = rect(
+    chartBounds.left,
+    chartBounds.top,
+    chartBounds.right - chartBounds.left,
+    chartBounds.bottom - chartBounds.top,
+  );
+  // Body of the chart.
+  const body = (
+    <View style={{ flex: 1 }}>
+    <Canvas style={{ flex: 1 }} onLayout={onLayout}>
+      {hasMeasuredLayoutSize && (
+        <>
+          {axisOptions ? (
+            <CartesianAxis
+              {...{
+                ...axisOptions,
+                xScale,
+                yScale,
+                isNumericalData,
+                xTicksNormalized,
+                yTicksNormalized,
+                ix: _tData.ix,
+              }}
+            />
+          ) : null}
+        </>
+      )}
+      <CartesianChartProvider yScale={yScale} xScale={xScale}>
+        <Group clip={clipRect}>
+          {hasMeasuredLayoutSize && children(renderArg)}
+        </Group>
+      </CartesianChartProvider>
+      {hasMeasuredLayoutSize && renderOutside?.(renderArg)}
+    </Canvas>
+    </View>
+  );
+
+  // Conditionally wrap the body in gesture handler based on activePressSharedValue
+  return chartPressState ? (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <GestureDetector gesture={panGesture}>{body}</GestureDetector>
+    </GestureHandlerRootView>
+  ) : (
+    body
+  );
+}

package/src/index.ts

@@ -0,0 +1,51 @@
+/**
+ * Cartesian chart exports (including useful types)
+ */
+export { CartesianChart } from "./cartesian/CartesianChart";
+export { PolarChart } from "./polar/PolarChart";
+
+
+export { type CurveType } from "victory-native";
+export { type RoundedCorners } from "victory-native";
+
+export { useAnimatedPath } from "victory-native";
+export { AnimatedPath } from "victory-native";
+export { usePrevious } from "victory-native";
+export {
+  useChartPressState,
+  type ChartPressState,
+} from "victory-native";
+
+// Line
+export { useLinePath } from "victory-native";
+export { Line } from "victory-native";
+
+// Bar
+export { useBarPath } from "victory-native";
+export { Bar } from "victory-native";
+
+// Bar group
+export { useBarGroupPaths } from "victory-native";
+export { BarGroup } from "victory-native";
+
+// Area
+export { useAreaPath } from "victory-native";
+export { Area } from "victory-native";
+
+// Scatter
+export { Scatter, type ScatterShape } from "victory-native";
+
+// Grid and Axis
+export { CartesianAxis } from "victory-native";
+
+/**
+ * Polar chart exports
+ */
+
+/**
+ * Pie chart exports (including useful types)
+ */
+export { Pie, type PieSliceData } from "victory-native";
+
+export { useSlicePath } from "victory-native";
+export { useSliceAngularInsetPath } from "victory-native";

package/src/polar/PolarChart.tsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+
+import { Canvas } from "@shopify/react-native-skia";
+import { useContextBridge, FiberProvider } from "its-fine";
+import {
+  StyleSheet,
+  View,
+  type ViewStyle,
+  type LayoutChangeEvent,
+  type StyleProp,
+} from "react-native";
+import {
+  PolarChartProvider,
+  usePolarChartContext,
+} from "victory-native/src/polar/contexts/PolarChartContext";
+import type {
+  ColorFields,
+  InputFields,
+  NumericalFields,
+  StringKeyOf,
+} from "victory-native/src/types";
+
+type PolarChartBaseProps = {
+  onLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
+  hasMeasuredLayoutSize: boolean;
+  canvasSize: { width: number; height: number };
+  containerStyle?: StyleProp<ViewStyle>;
+  canvasStyle?: StyleProp<ViewStyle>;
+};
+
+interface PolarChartContext {
+  data: Record<string, unknown>[];
+  canvasSize: { width: number; height: number };
+  labelKey: string;
+  valueKey: string;
+  colorKey: string;
+}
+
+const PolarChartBase = (
+  props: React.PropsWithChildren<PolarChartBaseProps>,
+) => {
+  const {
+    containerStyle,
+    canvasStyle,
+    children,
+    onLayout,
+    hasMeasuredLayoutSize,
+    canvasSize,
+  } = props;
+  const { width, height } = canvasSize;
+
+  const ctx = usePolarChartContext();
+  const ContextBridge = useContextBridge();
+  return (
+    <View style={[styles.baseContainer, containerStyle]}>
+      <Canvas
+        onLayout={onLayout}
+        style={StyleSheet.flatten([
+          styles.canvasContainer,
+          hasMeasuredLayoutSize ? { width, height } : null,
+          canvasStyle,
+        ])}
+      >
+        {/* https://shopify.github.io/react-native-skia/docs/canvas/contexts/
+            we have to re-inject our context to make it available in the skia renderer
+         */}
+        <ContextBridge {...ctx}>
+        {children}
+        </ContextBridge>
+        {/* <PolarChartProvider {...ctx} canvasSize={canvasSize}>
+          {children}
+        </PolarChartProvider> */}
+      </Canvas>
+    </View>
+  );
+};
+
+type PolarChartProps<
+  RawData extends Record<string, unknown>,
+  LabelKey extends StringKeyOf<InputFields<RawData>>,
+  ValueKey extends StringKeyOf<NumericalFields<RawData>>,
+  ColorKey extends StringKeyOf<ColorFields<RawData>>,
+> = {
+  data: RawData[];
+  colorKey: ColorKey;
+  labelKey: LabelKey;
+  valueKey: ValueKey;
+} & Omit<
+  PolarChartBaseProps,
+  "canvasSize" | "onLayout" | "hasMeasuredLayoutSize" // omit exposing internal props for calculating canvas layout/size
+>;
+export const PolarChart = <
+  RawData extends Record<string, unknown>,
+  LabelKey extends StringKeyOf<InputFields<RawData>>,
+  ValueKey extends StringKeyOf<NumericalFields<RawData>>,
+  ColorKey extends StringKeyOf<ColorFields<RawData>>,
+>(
+  props: React.PropsWithChildren<
+    PolarChartProps<RawData, LabelKey, ValueKey, ColorKey>
+  >,
+) => {
+  const { data, labelKey, colorKey, valueKey } = props;
+
+  const [canvasSize, setCanvasSize] = React.useState({ width: 0, height: 0 });
+
+  const [hasMeasuredLayoutSize, setHasMeasuredLayoutSize] =
+    React.useState(false);
+
+  const onLayout = React.useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      setHasMeasuredLayoutSize(true);
+      setCanvasSize(layout);
+    },
+    [],
+  );
+
+  return (
+    <FiberProvider>
+    <PolarChartProvider
+      data={data}
+      labelKey={labelKey.toString()}
+      colorKey={colorKey.toString()}
+      valueKey={valueKey.toString()}
+      canvasSize={canvasSize}
+    >
+      <PolarChartBase
+        {...props}
+        onLayout={onLayout}
+        hasMeasuredLayoutSize={hasMeasuredLayoutSize}
+        canvasSize={canvasSize}
+      />
+    </PolarChartProvider>
+    </FiberProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseContainer: {
+    flex: 1,
+  },
+  canvasContainer: {
+    flex: 1,
+  },
+});