Add axisScales "log" example

Author: MichelBahl

example/app/line-chart.tsx

@@ -12,6 +12,7 @@ import {
 } from "victory-native";
 import type { AxisLabelPosition } from "lib/src/types";
 import { useDarkMode } from "react-native-dark";
+import type { AxisScaletype } from "lib/src/cartesian/utils/makeScale";
 import { InputSlider } from "example/components/InputSlider";
 import { InputSegment } from "example/components/InputSegment";
 import {
@@ -44,6 +45,7 @@ export default function LineChartPage(props: { segment: string }) {
       strokeWidth,
       xAxisSide,
       yAxisSide,
+      axisScales,
       xLabelOffset,
       yLabelOffset,
       xTickCount,
@@ -84,6 +86,7 @@ export default function LineChartPage(props: { segment: string }) {
           padding={chartPadding}
           yKeys={["sales"]}
           axisOptions={{
+            axisScales,
             font,
             lineWidth: { grid: { x: 0, y: 2 }, frame: 0 },
             lineColor: {
@@ -287,7 +290,6 @@ export default function LineChartPage(props: { segment: string }) {
           value={xAxisSide}
           values={["top", "bottom"]}
         />
-
         <InputSegment<AxisLabelPosition>
           label="X Axis Label position"
           onChange={(val) =>
@@ -339,6 +341,14 @@ export default function LineChartPage(props: { segment: string }) {
           value={yAxisSide}
           values={["left", "right"]}
         />
+        <InputSegment<AxisScaletype>
+          label="Y Axis scales"
+          onChange={(val) =>
+            dispatch({ type: "SET_AXIS_SCALE", payload: { yAxisScale: val } })
+          }
+          value={axisScales?.yAxisScale || "linear"}
+          values={["linear", "log"]}
+        />
         <InputColor
           label="Y-axis Label Color"
           color={colors.yLabel}

example/hooks/useOptionsReducer.ts

@@ -1,4 +1,4 @@
-import type { AxisLabelPosition } from "lib/src/types";
+import type { AxisLabelPosition, AxisScales } from "lib/src/types";
 import type { CurveType, XAxisSide, YAxisSide } from "victory-native";
 
 type State = {
@@ -11,6 +11,7 @@ type State = {
   xTickCount: number;
   xAxisSide: XAxisSide;
   yAxisSide: YAxisSide;
+  axisScales: AxisScales;
   scatterRadius: number;
   xAxisLabelPosition: AxisLabelPosition;
   yAxisLabelPosition: AxisLabelPosition;
@@ -33,6 +34,7 @@ type Action =
   | { type: "SET_X_TICK_COUNT"; payload: number }
   | { type: "SET_X_AXIS_SIDE"; payload: XAxisSide }
   | { type: "SET_Y_AXIS_SIDE"; payload: YAxisSide }
+  | { type: "SET_AXIS_SCALE"; payload: AxisScales }
   | { type: "SET_SCATTER_RADIUS"; payload: number }
   | { type: "SET_X_AXIS_LABEL_POSITION"; payload: AxisLabelPosition }
   | { type: "SET_Y_AXIS_LABEL_POSITION"; payload: AxisLabelPosition }
@@ -64,6 +66,8 @@ export const optionsReducer = (state: State, action: Action): State => {
       return { ...state, xAxisSide: action.payload };
     case "SET_Y_AXIS_SIDE":
       return { ...state, yAxisSide: action.payload };
+    case "SET_AXIS_SCALE":
+      return { ...state, axisScales: action.payload };
     case "SET_SCATTER_RADIUS":
       return { ...state, scatterRadius: action.payload };
     case "SET_X_AXIS_LABEL_POSITION":
@@ -101,6 +105,9 @@ export const optionsInitialState: State = {
   scatterRadius: 7,
   xAxisSide: "bottom",
   yAxisSide: "left",
+  axisScales: {
+    yAxisScale: "linear",
+  },
   xAxisLabelPosition: "outset",
   yAxisLabelPosition: "outset",
   colors: {},

lib/src/cartesian/CartesianChart.tsx

@@ -27,10 +27,7 @@ import type {
   Viewport,
   GestureHandlerConfig,
 } from "../types";
-import {
-  transformInputData,
-  type AxisScaleParam,
-} from "./utils/transformInputData";
+import { transformInputData } from "./utils/transformInputData";
 import { findClosestPoint } from "../utils/findClosestPoint";
 import { valueFromSidedNumber } from "../utils/valueFromSidedNumber";
 import { asNumber } from "../utils/asNumber";
@@ -94,7 +91,6 @@ type CartesianChartProps<
     args: CartesianChartRenderArg<RawData, YK>,
   ) => React.ReactNode;
   axisOptions?: Partial<Omit<AxisProps<RawData, XK, YK>, "xScale" | "yScale">>;
-  axisScales?: AxisScaleParam;
   onChartBoundsChange?: (bounds: ChartBounds) => void;
   onScaleChange?: (
     xScale: ScaleLinear<number, number>,
@@ -164,7 +160,6 @@ function CartesianChartContent<
   customGestures,
   actionsRef,
   viewport,
-  axisScales,
 }: CartesianChartProps<RawData, XK, YK>) {
   const [size, setSize] = React.useState({ width: 0, height: 0 });
   const chartBoundsRef = React.useRef<ChartBounds | undefined>(undefined);
@@ -244,7 +239,7 @@ function CartesianChartContent<
         yAxes: normalizedAxisProps.yAxes,
         viewport,
         labelRotate: normalizedAxisProps.xAxis.labelRotate,
-        axisScales,
+        axisScales: axisOptions?.axisScales,
       });
 
     const primaryYAxis = yAxes[0];

lib/src/cartesian/components/CartesianAxis.tsx

@@ -251,6 +251,7 @@ export const CartesianAxisDefaultProps = {
   tickCount: 5,
   labelOffset: { x: 2, y: 4 },
   axisSide: { x: "bottom", y: "left" },
+  axisScales: { xAxisScale: "linear", yAxisScale: "linear" },
   labelPosition: "outset",
   formatXLabel: (label: ValueOf<InputDatum>) => String(label),
   formatYLabel: (label: ValueOf<InputDatum>) => String(label),

lib/src/cartesian/utils/makeScale.ts

@@ -10,7 +10,7 @@ const scaleFunctions = {
   log: scaleLog,
 };
 
-export type AxisScale = keyof typeof scaleFunctions;
+export type AxisScaletype = keyof typeof scaleFunctions;
 
 export const makeScale = ({
   inputBounds,

lib/src/cartesian/utils/transformInputData.ts

@@ -14,11 +14,11 @@ import type {
   XAxisPropsWithDefaults,
 } from "../../types";
 import { asNumber } from "../../utils/asNumber";
-import { makeScale, type AxisScale } from "./makeScale";
+import { makeScale, type AxisScaletype } from "./makeScale";
 
-export type AxisScaleParam = {
-  xAxisScale?: AxisScale;
-  yAxisScale?: AxisScale;
+export type AxisScales = {
+  xAxisScale?: AxisScaletype;
+  yAxisScale?: AxisScaletype;
 };
 
 /**
@@ -68,7 +68,7 @@ export const transformInputData = <
     y?: [number, number];
   };
   labelRotate?: number;
-  axisScales?: AxisScaleParam;
+  axisScales?: AxisScales;
 }): TransformedData<RawData, XK, YK> & {
   xScale: ScaleLinear<number, number>;
   isNumericalData: boolean;

lib/src/types.ts

@@ -12,6 +12,7 @@ import type {
   UserSelect,
   TouchAction,
 } from "react-native-gesture-handler/lib/typescript/handlers/gestureHandlerCommon";
+import type { AxisScaletype } from "./cartesian/utils/makeScale";
 
 export type PrimitiveViewWindow = {
   xMin: number;
@@ -35,6 +36,11 @@ export type XAxisSide = "top" | "bottom";
 export type YAxisSide = "left" | "right";
 export type AxisLabelPosition = "inset" | "outset";
 
+export type AxisScales = {
+  xAxisScale?: AxisScaletype;
+  yAxisScale?: AxisScaletype;
+};
+
 export type ScatterOptions = {
   radius: number;
 };
@@ -125,6 +131,7 @@ export type AxisProps<
   yTicksNormalized: number[];
   xScale: ScaleLinear<number, number, never>;
   yScale: ScaleLinear<number, number, never>;
+  axisScales?: AxisScales;
   font?: SkFont | null;
   lineColor?: Color | { grid: Color | { x: Color; y: Color }; frame: Color };
   lineWidth?: