Feat: add scale logarithmic (#592)

Co-authored-by: Eli Zibin <1131641+zibs@users.noreply.github.com>

Author: MichelBahl

.changeset/lucky-phones-relax.md

@@ -0,0 +1,5 @@
+---
+"victory-native": minor
+---
+
+Add scale logarithmic to cartesian charts

example/app/line-chart.tsx

@@ -10,7 +10,7 @@ import {
   type XAxisSide,
   type YAxisSide,
 } from "victory-native";
-import type { AxisLabelPosition } from "lib/src/types";
+import type { AxisLabelPosition, AxisScaleType } from "lib/src/types";
 import { useDarkMode } from "react-native-dark";
 import { InputSlider } from "example/components/InputSlider";
 import { InputSegment } from "example/components/InputSegment";
@@ -44,6 +44,7 @@ export default function LineChartPage(props: { segment: string }) {
       strokeWidth,
       xAxisSide,
       yAxisSide,
+      axisScales,
       xLabelOffset,
       yLabelOffset,
       xTickCount,
@@ -84,6 +85,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 +289,6 @@ export default function LineChartPage(props: { segment: string }) {
           value={xAxisSide}
           values={["top", "bottom"]}
         />
-
         <InputSegment<AxisLabelPosition>
           label="X Axis Label position"
           onChange={(val) =>
@@ -339,6 +340,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

@@ -10,7 +10,7 @@ import {
 } from "react-native-gesture-handler";
 import { type MutableRefObject } from "react";
 import { ZoomTransform } from "d3-zoom";
-import type { ScaleLinear } from "d3-scale";
+import type { ScaleLinear, ScaleLogarithmic } from "d3-scale";
 import isEqual from "react-fast-compare";
 import type {
   AxisProps,
@@ -91,7 +91,6 @@ type CartesianChartProps<
     args: CartesianChartRenderArg<RawData, YK>,
   ) => React.ReactNode;
   axisOptions?: Partial<Omit<AxisProps<RawData, XK, YK>, "xScale" | "yScale">>;
-
   onChartBoundsChange?: (bounds: ChartBounds) => void;
   onScaleChange?: (
     xScale: ScaleLinear<number, number>,
@@ -164,9 +163,10 @@ function CartesianChartContent<
 }: 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 xScaleRef = React.useRef<
+    ScaleLogarithmic<number, number> | ScaleLinear<number, number> | undefined
+  >(undefined);
+
   const yScaleRef = React.useRef<ScaleLinear<number, number> | undefined>(
     undefined,
   );
@@ -239,6 +239,7 @@ function CartesianChartContent<
         yAxes: normalizedAxisProps.yAxes,
         viewport,
         labelRotate: normalizedAxisProps.xAxis.labelRotate,
+        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

@@ -1,4 +1,10 @@
-import { type ScaleLinear, scaleLinear } from "d3-scale";
+import {
+  type ScaleLinear,
+  scaleLinear,
+  scaleLog,
+  type ScaleLogarithmic,
+} from "d3-scale";
+import type { AxisScaleType } from "lib/src/types";
 
 export const makeScale = ({
   inputBounds,
@@ -7,21 +13,38 @@ export const makeScale = ({
   padEnd,
   viewport,
   isNice = false,
+  axisScale = "linear",
 }: {
   inputBounds: [number, number];
   outputBounds: [number, number];
   viewport?: [number, number];
   padStart?: number;
   padEnd?: number;
   isNice?: boolean;
-}): ScaleLinear<number, number> => {
-  // Linear
-  const viewScale = scaleLinear()
-    .domain(viewport ?? inputBounds)
-    .range(outputBounds);
-  const scale = scaleLinear()
-    .domain(inputBounds)
-    .range([viewScale(inputBounds[0]), viewScale(inputBounds[1])]);
+  axisScale?: AxisScaleType;
+}): ScaleLinear<number, number> | ScaleLogarithmic<number, number> => {
+  let scale: ScaleLinear<number, number> | ScaleLogarithmic<number, number>;
+
+  switch (axisScale) {
+    case "log": {
+      const viewScale = scaleLog()
+        .domain(viewport ?? inputBounds)
+        .range(outputBounds);
+      scale = scaleLog()
+        .domain(inputBounds)
+        .range([viewScale(inputBounds[0]), viewScale(inputBounds[1])]);
+      break;
+    }
+    default: {
+      const viewScale = scaleLinear()
+        .domain(viewport ?? inputBounds)
+        .range(outputBounds);
+      scale = scaleLinear()
+        .domain(inputBounds)
+        .range([viewScale(inputBounds[0]), viewScale(inputBounds[1])]);
+      break;
+    }
+  }
 
   if (padStart || padEnd) {
     scale

lib/src/cartesian/utils/transformInputData.ts

@@ -12,6 +12,7 @@ import type {
   NonEmptyArray,
   YAxisPropsWithDefaults,
   XAxisPropsWithDefaults,
+  AxisScales,
 } from "../../types";
 import { asNumber } from "../../utils/asNumber";
 import { makeScale } from "./makeScale";
@@ -45,6 +46,7 @@ export const transformInputData = <
   yAxes,
   viewport,
   labelRotate,
+  axisScales,
 }: {
   data: RawData[];
   xKey: XK;
@@ -62,6 +64,7 @@ export const transformInputData = <
     y?: [number, number];
   };
   labelRotate?: number;
+  axisScales?: AxisScales;
 }): TransformedData<RawData, XK, YK> & {
   xScale: ScaleLinear<number, number>;
   isNumericalData: boolean;
@@ -73,6 +76,7 @@ export const transformInputData = <
   }>;
 } => {
   const data = [..._data];
+  const { xAxisScale = "linear", yAxisScale = "linear" } = axisScales || {};
 
   // Determine if xKey data is numerical
   const isNumericalData = data.every(
@@ -113,6 +117,7 @@ export const transformInputData = <
   const xTempScale = makeScale({
     inputBounds: ixMin === ixMax ? [ixMin - 1, ixMax + 1] : [ixMin, ixMax],
     outputBounds: [0, rawChartWidth],
+    axisScale: xAxisScale,
   });
 
   // normalize xTicks values either via the d3 scaleLinear ticks() function or our custom downSample function
@@ -228,6 +233,7 @@ export const transformInputData = <
           : domainPadding?.bottom,
       padStart:
         typeof domainPadding === "number" ? domainPadding : domainPadding?.top,
+      axisScale: yAxisScale,
     });
 
     const yData = yKeysForAxis.reduce(
@@ -325,6 +331,7 @@ export const transformInputData = <
       typeof domainPadding === "number" ? domainPadding : domainPadding?.left,
     padEnd:
       typeof domainPadding === "number" ? domainPadding : domainPadding?.right,
+    axisScale: xAxisScale,
   });
 
   // Normalize xTicks values either via the d3 scaleLinear ticks() function or our custom downSample function

lib/src/types.ts

@@ -35,6 +35,13 @@ export type XAxisSide = "top" | "bottom";
 export type YAxisSide = "left" | "right";
 export type AxisLabelPosition = "inset" | "outset";
 
+export type AxisScaleType = "linear" | "log";
+
+export type AxisScales = {
+  xAxisScale?: AxisScaleType;
+  yAxisScale?: AxisScaleType;
+};
+
 export type ScatterOptions = {
   radius: number;
 };
@@ -125,6 +132,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?: