remove tickImages prop

FormidableLabs · Jan 10, 2025 · c38b0f5 · c38b0f5
1 parent 7a90e4b
commit c38b0f5
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 75 deletions.
diff --git a/example/app/axis-images.tsx b/example/app/axis-images.tsx
@@ -8,6 +8,9 @@ import {
   Skia,
   Paragraph,
   TileMode,
+  Text as SkiaText,
+  type ImageProps,
+  type SkImage,
 } from "@shopify/react-native-skia";
 import { CartesianChart, Line } from "victory-native";
 import { Text } from "example/components/Text";
@@ -23,9 +26,49 @@ const DATA = [
   { temperature: 15, day: 6 },
 ];
 
+export type TickImage = Partial<Omit<ImageProps, "image">> & {
+  image?: string;
+  skImage?: SkImage | null;
+  width?: number;
+  height?: number;
+};
+
+type AxisImageProps = TickImage & {
+  y: number;
+  x: number;
+};
+
+export const AxisImage: React.FC<AxisImageProps> = ({
+  image,
+  skImage,
+  y,
+  x,
+  ...rest
+}) => {
+  const imageSKFromHook = useImage(image || "");
+  const imageSK = skImage || imageSKFromHook;
+
+  return (
+    <Image
+      image={imageSK}
+      fit="contain"
+      y={y}
+      x={x}
+      width={12}
+      height={12}
+      {...rest}
+    />
+  );
+};
+
 const ChartWithRemoteImages = () => {
   const font = useFont(inter, 12);
   const [data] = useState(DATA);
+  const images = [
+    "https://picsum.photos/32/32",
+    "https://picsum.photos/32/32",
+    "https://picsum.photos/32/32",
+  ];
 
   return (
     <View style={{ flex: 1 }}>
@@ -44,11 +87,18 @@ const ChartWithRemoteImages = () => {
         yAxis={[
           {
             tickValues: [15, 50, 80],
-            tickImages: [
-              { image: "https://picsum.photos/32/32", width: 32, height: 32 },
-              { image: "https://picsum.photos/32/32", width: 32, height: 32 },
-              { image: "https://picsum.photos/32/32", width: 32, height: 32 },
-            ],
+            renderYLabel: ({ x, y, index }) => {
+              return (
+                <AxisImage
+                  image={images[index]!}
+                  fit="contain"
+                  y={y}
+                  x={x}
+                  width={32}
+                  height={32}
+                />
+              );
+            },
             labelOffset: 12,
             font,
             linePathEffect: <DashPathEffect intervals={[4, 4]} />,
@@ -77,6 +127,7 @@ const ChartWithLocalImages = () => {
   const warmImage = useImage(require("../assets/warm.png"));
   const medImage = useImage(require("../assets/med.png"));
   const coldImage = useImage(require("../assets/cold.png"));
+  const images = [coldImage, medImage, warmImage];
 
   return (
     <View style={{ flex: 1 }}>
@@ -91,15 +142,38 @@ const ChartWithLocalImages = () => {
           font,
           labelOffset: 14,
           linePathEffect: <DashPathEffect intervals={[4, 4]} />,
+          renderXLabel: ({ x, y, content, canFitContent }) => {
+            if (!canFitContent) {
+              return null;
+            }
+
+            return (
+              <SkiaText
+                key={`y-${y}-${x}`}
+                color={"green"}
+                text={`Hi ${content}`}
+                font={font}
+                y={y}
+                x={x}
+              />
+            );
+          },
         }}
         yAxis={[
           {
             tickValues: [15, 50, 80],
-            tickImages: [
-              { skImage: coldImage, width: 32, height: 32 },
-              { skImage: medImage, width: 32, height: 32 },
-              { skImage: warmImage, width: 32, height: 32 },
-            ],
+            renderYLabel: ({ x, y, index }) => {
+              return (
+                <Image
+                  image={images[index]!}
+                  fit="contain"
+                  y={y}
+                  x={x}
+                  width={32}
+                  height={32}
+                />
+              );
+            },
             labelOffset: 12,
             font,
             linePathEffect: <DashPathEffect intervals={[4, 4]} />,

diff --git a/lib/src/cartesian/components/AxisImage.tsx b/lib/src/cartesian/components/AxisImage.tsx
diff --git a/lib/src/cartesian/components/XAxis.tsx b/lib/src/cartesian/components/XAxis.tsx
@@ -10,7 +10,6 @@ import type {
   XAxisProps,
   XAxisPropsWithDefaults,
 } from "../../types";
-import { AxisImage } from "./AxisImage";
 
 export const XAxis = <
   RawData extends Record<string, unknown>,
@@ -35,7 +34,6 @@ export const XAxis = <
   chartBounds,
   enableRescaling,
   zoom,
-  tickImages,
   renderXLabel,
 }: XAxisProps<RawData, XK>) => {
   const xScale = zoom ? zoom.rescaleX(xScaleProp) : xScaleProp;
@@ -104,13 +102,7 @@ export const XAxis = <
           })
         ) : (
           <>
-            {tickImages && tickImages[index] && canFitLabelContent && (
-              <AxisImage {...tickImages[index]} y={labelY} x={labelX} />
-            )}
-            {font &&
-            labelWidth &&
-            canFitLabelContent &&
-            !tickImages?.[index] ? (
+            {font && labelWidth && canFitLabelContent ? (
               <Text
                 color={labelColor}
                 text={contentX}

diff --git a/lib/src/cartesian/components/YAxis.tsx b/lib/src/cartesian/components/YAxis.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { StyleSheet } from "react-native";
 import { Group, Line, Text, vec } from "@shopify/react-native-skia";
 import { boundsToClip } from "../../utils/boundsToClip";
-import { AxisImage, type TickImage } from "./AxisImage";
 import type {
   InputDatum,
   NumericalFields,
@@ -28,9 +27,8 @@ export const YAxis = <
   formatYLabel = (label: ValueOf<InputDatum>) => String(label),
   linePathEffect,
   chartBounds,
-  tickImages,
   renderYLabel,
-}: YAxisProps<RawData, YK> & { tickImages?: TickImage[] }) => {
+}: YAxisProps<RawData, YK>) => {
   const [x1 = 0, x2 = 0] = xScale.domain();
   const [_ = 0, y2 = 0] = yScale.domain();
   const fontSize = font?.getSize() ?? 0;
@@ -85,10 +83,7 @@ export const YAxis = <
           })
         ) : (
           <>
-            {tickImages && tickImages[index] && canFitLabelContent && (
-              <AxisImage {...tickImages[index]} y={labelY} x={labelX} />
-            )}
-            {font && canFitLabelContent && !tickImages?.[index] && (
+            {font && canFitLabelContent && (
               <Text
                 color={labelColor}
                 text={contentY}

diff --git a/lib/src/types.ts b/lib/src/types.ts
@@ -7,7 +7,6 @@ import {
 } from "@shopify/react-native-skia";
 import type { ZoomTransform } from "d3-zoom";
 import { type PanGesture } from "react-native-gesture-handler";
-import type { TickImage } from "./cartesian/components/AxisImage";
 
 export type PrimitiveViewWindow = {
   xMin: number;
@@ -188,7 +187,6 @@ export type XAxisInputProps<
   yAxisSide?: YAxisSide;
   linePathEffect?: DashPathEffectComponent;
   enableRescaling?: boolean;
-  tickImages?: TickImage[];
   renderXLabel?: (opts: RenderAxisLabelProps) => React.ReactNode;
 };
 
@@ -202,7 +200,6 @@ export type XAxisPropsWithDefaults<
     | "tickValues"
     | "linePathEffect"
     | "enableRescaling"
-    | "tickImages"
     | "renderXLabel"
   >
 > &
@@ -213,7 +210,6 @@ export type XAxisPropsWithDefaults<
       | "tickValues"
       | "linePathEffect"
       | "enableRescaling"
-      | "tickImages"
       | "renderXLabel"
     >
   >;
@@ -257,7 +253,6 @@ export type YAxisInputProps<
   domain?: YAxisDomain;
   linePathEffect?: DashPathEffectComponent;
   enableRescaling?: boolean;
-  tickImages?: TickImage[];
 };
 
 export type YAxisPropsWithDefaults<
@@ -270,7 +265,6 @@ export type YAxisPropsWithDefaults<
     | "tickValues"
     | "linePathEffect"
     | "enableRescaling"
-    | "tickImages"
     | "renderYLabel"
   >
 > &
@@ -281,7 +275,6 @@ export type YAxisPropsWithDefaults<
       | "tickValues"
       | "linePathEffect"
       | "enableRescaling"
-      | "tickImages"
       | "renderYLabel"
     >
   >;