@react-native-ohos/victory-native-xl 41.17.5-rc.1 → 41.18.0-beta.1

package/src/index.ts

@@ -1,52 +1,56 @@
-/**
- * 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";
+/**
+ * Cartesian chart exports (including useful types)
+ */
+export {
+  CartesianChart,
+  type CartesianActionsHandle,
+  type CartesianChartRef,
+} from "./cartesian/CartesianChart";
+export { PolarChart } from "./polar/PolarChart";
+
+export { type CurveType } from "victory-native";
+export { type RoundedCorners } from "victory-native";
+export { type AxisScaleType, type AxisScales } from "victory-native/src/types";
+
+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

@@ -1,144 +1,146 @@
-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,
-  },
-});
+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]}
+      onLayout={onLayout}
+    >
+      <Canvas
+        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,
+  },
+});

package/src/shared/GestureHandler.tsx

@@ -0,0 +1,45 @@
+import {
+  type ComposedGesture,
+  GestureDetector,
+  type GestureType,
+} from "react-native-gesture-handler";
+import { type SkRect } from "@shopify/react-native-skia";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import * as React from "react";
+import { type ChartTransformState } from "victory-native/src/cartesian/hooks/useChartTransformState";
+import type { GestureHandlerConfig } from "victory-native/src/types";
+
+type GestureHandlerProps = {
+  gesture: ComposedGesture | GestureType;
+  dimensions?: SkRect;
+  transformState?: ChartTransformState;
+  debug?: boolean;
+  config?: GestureHandlerConfig;
+};
+
+/**
+ * OHOS: Keep the gesture overlay fixed to the chart container instead of
+ * following transformState.matrix. Upstream 41.20.2 moves the overlay with
+ * matrix transforms, which breaks pan/pinch on HarmonyOS RNGH (e.g. Y pan
+ * requires a horizontal move first). Aligns with upstream main PR #664.
+ */
+export const GestureHandler = ({
+  gesture,
+  debug = false,
+  config,
+}: GestureHandlerProps) => {
+  const style = useAnimatedStyle(() => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: debug ? "rgba(100, 200, 255, 0.4)" : "transparent",
+  }));
+
+  return (
+    <GestureDetector {...config} gesture={gesture}>
+      <Animated.View style={style} />
+    </GestureDetector>
+  );
+};