@react-native-ohos/victory-native-xl 41.17.5-rc.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.OpenSource

@@ -0,0 +1,11 @@
+[
+    {
+        "Name": "victory-native-xl",
+        "License": "MIT License",
+        "License File": " LICENSE ",
+        "Version Number": "41.17.4",
+        "Owner" : "xiafeng@huawei.com",
+        "Upstream URL": "https://github.com/FormidableLabs/victory-native-xl",
+        "Description": "A charting library for React Native with a focus on performance and customization."
+    }
+]

package/README.md

@@ -0,0 +1,13 @@
+# @react-native-oh-tpl/victory-native-xl
+
+本项目基于 [victory-native-xl](https://github.com/FormidableLabs/victory-native-xl)
+
+## 文档地址 / Documentation URL 
+
+[中文 / Chinese](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/victory-native-xl.md)
+
+[英文 / English](https://gitee.com/react-native-oh-library/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,44 @@
+{
+  "name": "@react-native-ohos/victory-native-xl",
+  "version": "41.17.5-rc.1",
+  "private": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FormidableLabs/victory-native-xl"
+  },
+  "harmony": {
+    "alias": "victory-native-xl"
+  },
+  "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",
+    "its-fine": "^1.2.5",
+    "react-fast-compare": "^3.2.2",
+    "react-native-reanimated": "^3.18.0"
+  },
+  "peerDependencies": {
+    "@shopify/react-native-skia": "^1.3.7",
+    "react": "18.3.1",
+    "victory-native": "^41.17.4",
+    "react-native": "0.77.1"
+  },
+  "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"
+  }
+}

package/src/cartesian/CartesianChart.tsx

@@ -0,0 +1,709 @@
+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 {
+  type ComposedGesture,
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  type TouchData,
+} from "react-native-gesture-handler";
+import { type MutableRefObject } from "react";
+import type { ScaleLinear } from "d3-scale";
+import type {
+  AxisProps,
+  CartesianChartRenderArg,
+  InputFields,
+  NumericalFields,
+  SidedNumber,
+  TransformedData,
+  ChartBounds,
+  Viewport,
+  ChartPressPanConfig,
+  YAxisInputProps,
+  FrameInputProps,
+  XAxisInputProps,
+  GestureHandlerConfig
+} 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,
+  ChartPressStateInit, } from "victory-native/src/cartesian/hooks/useChartPressState";
+import { useFunctionRef } from "victory-native/src/hooks/useFunctionRef";
+import { CartesianChartProvider } from "victory-native/src/cartesian/contexts/CartesianChartContext";
+import { XAxis } from "victory-native/src/cartesian/components/XAxis";
+import { YAxis } from "victory-native/src/cartesian/components/YAxis";
+import { Frame } from "victory-native/src/cartesian/components/Frame";
+import { useBuildChartAxis } from "victory-native/src/cartesian/hooks/useBuildChartAxis";
+import { type ChartTransformState } from "victory-native/src/cartesian/hooks/useChartTransformState";
+import {
+  panTransformGesture,
+  type PanTransformGestureConfig,
+  pinchTransformGesture,
+  type PinchTransformGestureConfig,
+} from "victory-native/src/cartesian/utils/transformGestures";
+import {
+  CartesianTransformProvider,
+  useCartesianTransformContext,
+} from "victory-native/src/cartesian/contexts/CartesianTransformContext";
+import { downsampleTicks } from "victory-native/src/utils/tickHelpers";
+import { GestureHandler } from "victory-native/src/shared/GestureHandler";
+import { boundsToClip } from "victory-native/src/utils/boundsToClip";
+import { normalizeYAxisTicks } from "victory-native/src/utils/normalizeYAxisTicks";
+import { createFallbackChartState } from "victory-native/src/cartesian/utils/createFallbackChartState";
+import { ZoomTransform } from "d3-zoom";
+import isEqual from "react-fast-compare";
+export type CartesianActionsHandle<T = undefined> =
+  T extends ChartPressState<infer S>
+    ? S extends ChartPressStateInit
+      ? {
+          handleTouch: (v: T, x: number, y: number) => void;
+        }
+      : never
+    : never;
+
+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] };
+  viewport?: Viewport;
+  chartPressState?:
+    | ChartPressState<{ x: InputFields<RawData>[XK]; y: Record<YK, number> }>
+    | ChartPressState<{ x: InputFields<RawData>[XK]; y: Record<YK, number> }>[];
+  chartPressConfig?: {
+    pan?: ChartPressPanConfig;
+  };
+  gestureHandlerConfig?: GestureHandlerConfig;
+  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;
+  onScaleChange?: (
+    xScale: ScaleLinear<number, number>,
+    yScale: ScaleLinear<number, number>,
+  ) => void;
+  /**
+   * @deprecated This prop will eventually be replaced by the new `chartPressConfig`. For now it's being kept around for backwards compatibility sake.
+   */
+  gestureLongPressDelay?: number;
+  xAxis?: XAxisInputProps<RawData, XK>;
+  yAxis?: YAxisInputProps<RawData, YK>[];
+  frame?: FrameInputProps;
+  transformState?: ChartTransformState;
+  transformConfig?: {
+    pan?: PanTransformGestureConfig;
+    pinch?: PinchTransformGestureConfig;
+  };
+  customGestures?: ComposedGesture;
+  actionsRef?: MutableRefObject<CartesianActionsHandle<
+    | ChartPressState<{
+        x: InputFields<RawData>[XK];
+        y: Record<YK, number>;
+      }>
+    | undefined
+  > | null>;
+};
+
+export function CartesianChart<
+  RawData extends Record<string, unknown>,
+  XK extends keyof InputFields<RawData>,
+  YK extends keyof NumericalFields<RawData>,
+>({ transformState, children, ...rest }: CartesianChartProps<RawData, XK, YK>) {
+  return (
+    <CartesianTransformProvider transformState={transformState}>
+      <CartesianChartContent {...{ ...rest, transformState }}>
+        {children}
+      </CartesianChartContent>
+    </CartesianTransformProvider>
+  );
+}
+
+function CartesianChartContent<
+  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,
+  chartPressConfig,
+  gestureHandlerConfig,
+  onChartBoundsChange,
+  onScaleChange,
+  gestureLongPressDelay = 100,
+  xAxis,
+  yAxis,
+  frame,
+  transformState,
+  transformConfig,
+  customGestures,
+  actionsRef,
+  viewport,
+}: CartesianChartProps<RawData, XK, YK>) {
+  const [size, setSize] = React.useState({ width: 0, height: 0 });
+  const chartBoundsRef = React.useRef<ChartBounds | undefined>(undefined);
+  const xScaleRef = React.useRef<ScaleLinear<number, number> | undefined>(
+    undefined,
+  );
+  const yScaleRef = React.useRef<ScaleLinear<number, number> | undefined>(
+    undefined,
+  );
+  const [hasMeasuredLayoutSize, setHasMeasuredLayoutSize] =
+    React.useState(false);
+  const onLayout = React.useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      setHasMeasuredLayoutSize(true);
+      setSize(layout);
+    },
+    [],
+  );
+  const normalizedAxisProps = useBuildChartAxis({
+    xAxis,
+    yAxis,
+    frame,
+    yKeys,
+    axisOptions,
+  });
+
+  // create a d3-zoom transform object based on the current transform state. This
+  // is used for rescaling the X and Y axes.
+  const transform = useCartesianTransformContext();
+  const zoomX = React.useMemo(
+    () => new ZoomTransform(transform.k, transform.tx, transform.ty),
+    [transform.k, transform.tx, transform.ty],
+  );
+  const zoomY = React.useMemo(
+    () => new ZoomTransform(transform.ky, transform.tx, transform.ty),
+    [transform.ky, transform.tx, transform.ty],
+  );
+
+  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 {
+    yAxes,
+    xScale,
+    chartBounds,
+    isNumericalData,
+    xTicksNormalized,
+    _tData,
+  } = React.useMemo(() => {
+    if (!data.length) {
+      return createFallbackChartState<RawData, XK, YK>(yKeys);
+    }
+    const { xScale, yAxes, isNumericalData, xTicksNormalized, ..._tData } =
+      transformInputData({
+        data,
+        xKey,
+        yKeys,
+        outputWindow: {
+          xMin: valueFromSidedNumber(padding, "left"),
+          xMax: size.width - valueFromSidedNumber(padding, "right"),
+          yMin: valueFromSidedNumber(padding, "top"),
+          yMax: size.height - valueFromSidedNumber(padding, "bottom"),
+        },
+        domain,
+        domainPadding,
+        xAxis: normalizedAxisProps.xAxis,
+        yAxes: normalizedAxisProps.yAxes,
+        viewport,
+        labelRotate: normalizedAxisProps.xAxis.labelRotate,
+      });
+
+    const primaryYAxis = yAxes[0];
+    const primaryYScale = primaryYAxis.yScale;
+    const chartBounds = {
+      left: xScale(viewport?.x?.[0] ?? xScale.domain().at(0) ?? 0),
+      right: xScale(viewport?.x?.[1] ?? xScale.domain().at(-1) ?? 0),
+      top: primaryYScale(
+        viewport?.y?.[1] ?? (primaryYScale.domain().at(0) || 0),
+      ),
+      bottom: primaryYScale(
+        viewport?.y?.[0] ?? (primaryYScale.domain().at(-1) || 0),
+      ),
+    };
+
+    return {
+      xTicksNormalized,
+      yAxes,
+      xScale,
+      chartBounds,
+      isNumericalData,
+      _tData,
+    };
+  }, [
+    data,
+    xKey,
+    yKeys,
+    padding,
+    size.width,
+    size.height,
+    domain,
+    domainPadding,
+    normalizedAxisProps,
+    viewport,
+  ]);
+
+  React.useEffect(() => {
+    tData.value = _tData;
+  }, [_tData, tData]);
+
+  const primaryYAxis = yAxes[0];
+  const primaryYScale = primaryYAxis.yScale;
+
+  // stacked bar values
+  const chartHeight = chartBounds.bottom;
+  const yScaleTop = primaryYAxis.yScale.domain().at(0);
+  const yScaleBottom = primaryYAxis.yScale.domain().at(-1);
+  // end stacked bar values
+
+  /**
+   * 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,
+    y: 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);
+
+    // begin stacked bar handling:
+    // store the heights of each bar segment
+    const barHeights: number[] = [];
+    for (const yk in v.y) {
+      if (isInYs(yk)) {
+        const height = asNumber(tData.value.y[yk].i[idx]);
+        barHeights.push(height);
+      }
+    }
+
+    const chartYPressed = chartHeight - y; // Invert y-coordinate, since RNGH gives us the absolute Y, and we want to know where in the chart they clicked
+    // Calculate the actual yValue of the touch within the domain of the yScale
+    const yDomainValue =
+      (chartYPressed / chartHeight) * (yScaleTop! - yScaleBottom!);
+
+    // track the cumulative height and the y-index of the touched segment
+    let cumulativeHeight = 0;
+    let yIndex = -1;
+
+    // loop through the bar heights to find which bar was touched
+    for (let i = 0; i < barHeights.length; i++) {
+      // Accumulate the height as we go along
+      cumulativeHeight += barHeights[i]!;
+      // Check if the y-value touched falls within the current segment
+      if (yDomainValue <= cumulativeHeight) {
+        // If it does, set yIndex to the current segment index and break
+        yIndex = i;
+        break;
+      }
+    }
+
+    // Update the yIndex value in the state or context
+    v.yIndex.value = yIndex;
+    // end stacked bar handling
+
+    if (v) {
+      try {
+        v.matchedIndex.value = idx;
+        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;
+  };
+
+  if (actionsRef) {
+    actionsRef.current = {
+      handleTouch,
+    };
+  }
+
+  /**
+   * 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, touch.y);
+        } else {
+          gestureState.value.bootstrap.push([v, touch]);
+        }
+      }
+    })
+    /**
+     * On start, check if we have any bootstrapped 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, touch.y);
+      }
+    })
+    /**
+     * 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, touch.y);
+      }
+    })
+    /**
+     * 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;
+        }
+      }
+    });
+
+  if (!chartPressConfig?.pan) {
+    /**
+     * 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.
+     */
+    panGesture.activateAfterLongPress(gestureLongPressDelay);
+  }
+
+  if (chartPressConfig?.pan?.activateAfterLongPress) {
+    panGesture.activateAfterLongPress(
+      chartPressConfig.pan?.activateAfterLongPress,
+    );
+  }
+  if (chartPressConfig?.pan?.activeOffsetX) {
+    panGesture.activeOffsetX(chartPressConfig.pan.activeOffsetX);
+  }
+  if (chartPressConfig?.pan?.activeOffsetY) {
+    panGesture.activeOffsetX(chartPressConfig.pan.activeOffsetY);
+  }
+  if (chartPressConfig?.pan?.failOffsetX) {
+    panGesture.failOffsetX(chartPressConfig.pan.failOffsetX);
+  }
+  if (chartPressConfig?.pan?.failOffsetY) {
+    panGesture.failOffsetX(chartPressConfig.pan.failOffsetY);
+  }
+
+  /**
+   * 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(() => {
+    if (!isEqual(chartBounds, chartBoundsRef.current)) {
+      chartBoundsRef.current = chartBounds;
+      onChartBoundsRef.current?.(chartBounds);
+    }
+  }, [chartBounds, onChartBoundsRef]);
+
+  const onScaleRef = useFunctionRef(onScaleChange);
+  React.useEffect(() => {
+    const rescaledX = zoomX.rescaleX(xScale);
+    const rescaledY = zoomY.rescaleY(primaryYScale);
+    if (
+      !isEqual(xScaleRef.current?.domain(), rescaledX.domain()) ||
+      !isEqual(yScaleRef.current?.domain(), rescaledY.domain()) ||
+      !isEqual(xScaleRef.current?.range(), rescaledX.range()) ||
+      !isEqual(yScaleRef.current?.range(), rescaledY.range())
+    ) {
+      xScaleRef.current = xScale;
+      yScaleRef.current = primaryYScale;
+      onScaleRef.current?.(rescaledX, rescaledY);
+    }
+  }, [onScaleChange, onScaleRef, xScale, zoomX, zoomY, primaryYScale]);
+
+  const renderArg: CartesianChartRenderArg<RawData, YK> = {
+    xScale,
+    xTicks: xTicksNormalized,
+    yScale: primaryYScale,
+    yTicks: primaryYAxis.yTicksNormalized,
+    chartBounds,
+    canvasSize: size,
+    points,
+  };
+
+  const clipRect = boundsToClip(chartBounds);
+  const YAxisComponents =
+    hasMeasuredLayoutSize && (axisOptions || yAxes)
+      ? normalizedAxisProps.yAxes?.map((axis, index) => {
+          const yAxis = yAxes[index];
+
+          if (!yAxis) return null;
+
+          const primaryAxisProps = normalizedAxisProps.yAxes[0]!;
+          const primaryRescaled = zoomY.rescaleY(primaryYScale);
+          const rescaled = zoomY.rescaleY(yAxis.yScale);
+
+          const rescaledTicks = axis.tickValues
+            ? downsampleTicks(axis.tickValues, axis.tickCount)
+            : axis.enableRescaling
+              ? rescaled.ticks(axis.tickCount)
+              : yAxis.yScale.ticks(axis.tickCount);
+
+          const primaryTicksRescaled = primaryAxisProps.tickValues
+            ? downsampleTicks(
+                primaryAxisProps.tickValues,
+                primaryAxisProps.tickCount,
+              )
+            : primaryAxisProps.enableRescaling
+              ? primaryRescaled.ticks(primaryAxisProps.tickCount)
+              : primaryYScale.ticks(primaryAxisProps.tickCount);
+
+          return (
+            <YAxis
+              key={index}
+              {...axis}
+              xScale={zoomX.rescaleX(xScale)}
+              yScale={rescaled}
+              yTicksNormalized={
+                index > 0 && !axis.tickValues
+                  ? normalizeYAxisTicks(
+                      primaryTicksRescaled,
+                      primaryRescaled,
+                      rescaled,
+                    )
+                  : rescaledTicks
+              }
+              chartBounds={chartBounds}
+            />
+          );
+        })
+      : null;
+
+  const XAxisComponents =
+    hasMeasuredLayoutSize && (axisOptions || xAxis) ? (
+      <XAxis
+        {...normalizedAxisProps.xAxis}
+        xScale={xScale}
+        yScale={zoomY.rescaleY(primaryYScale)}
+        ix={_tData.ix}
+        isNumericalData={isNumericalData}
+        chartBounds={chartBounds}
+        zoom={zoomX}
+      />
+    ) : null;
+
+  const FrameComponent =
+    hasMeasuredLayoutSize && (axisOptions || frame) ? (
+      <Frame
+        {...normalizedAxisProps.frame}
+        xScale={xScale}
+        yScale={primaryYScale}
+      />
+    ) : null;
+
+  // Body of the chart.
+  const body = (
+    <Canvas style={{ flex: 1 }} onLayout={onLayout}>
+      {YAxisComponents}
+      {XAxisComponents}
+      {FrameComponent}
+      <CartesianChartProvider yScale={primaryYScale} xScale={xScale}>
+        <Group clip={clipRect}>
+          <Group matrix={transformState?.matrix}>
+            {hasMeasuredLayoutSize && children(renderArg)}
+          </Group>
+        </Group>
+      </CartesianChartProvider>
+      {hasMeasuredLayoutSize && renderOutside?.(renderArg)}
+    </Canvas>
+  );
+
+  let composed = customGestures ?? Gesture.Race();
+  if (transformState) {
+    let gestures = Gesture.Simultaneous();
+
+    if (transformConfig?.pinch?.enabled ?? true) {
+      gestures = Gesture.Simultaneous(
+        gestures,
+        pinchTransformGesture(transformState, transformConfig?.pinch),
+      );
+    }
+
+    if (transformConfig?.pan?.enabled ?? true) {
+      gestures = Gesture.Simultaneous(
+        gestures,
+        panTransformGesture(transformState, transformConfig?.pan),
+      );
+    }
+
+    composed = Gesture.Race(composed, Gesture.Simultaneous(gestures));
+  }
+  if (chartPressState) {
+    composed = Gesture.Race(composed, panGesture);
+  }
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1, overflow: "hidden" }}>
+      {body}
+      <GestureHandler
+        config={gestureHandlerConfig}
+        gesture={composed}
+        transformState={transformState}
+        dimensions={{
+          x: Math.min(xScale.range()[0]!, 0),
+          y: Math.min(primaryYScale.range()[0]!, 0),
+          width: xScale.range()[1]! - Math.min(xScale.range()[0]!, 0),
+          height:
+            primaryYScale.range()[1]! - Math.min(primaryYScale.range()[0]!, 0),
+        }}
+      />
+    </GestureHandlerRootView>
+  );
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+/**
+ * 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";
+export { useChartTransformState } 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,
+  },
+});