fix: generate ticks with the correct domain

Refs: zakodium-oss/react-plot#437

src/hooks/useLinearPrimaryTicks.ts

@@ -24,17 +24,13 @@ export function useLinearPrimaryTicks<
   ref: MutableRefObject<SVGGElement | null>,
   options: Options = {},
 ): PrimaryLinearTicks[] {
-  const [ticks, setTicks] = useState<number[]>([]);
+  const [ticks, setTicks] = useState<PrimaryLinearTicks[]>([]);
   const { tickFormat = String } = options;
   useTicks<number, ScaleContinuousNumeric<number, number>>(
     scale,
     direction,
     ref,
     { ...options, tickFormat, setTicks },
   );
-  return ticks.map((value) => ({
-    label: tickFormat(value),
-    position: scale(value),
-    value,
-  }));
+  return ticks;
 }

src/hooks/useTick.ts

@@ -13,7 +13,9 @@ export interface Ticks<T> {
 
 interface Options<T> {
   tickFormat: (d: T) => string;
-  setTicks: Dispatch<SetStateAction<T[]>>;
+  setTicks: Dispatch<
+    SetStateAction<Array<{ label: string; position: number; value: T }>>
+  >;
   minSpace?: number;
 }
 const TEST_HEIGHT = '+1234567890';
@@ -80,7 +82,13 @@ export function useTicks<
         }
       }
 
-      setTicks(ticks);
+      setTicks(
+        ticks.map((value) => ({
+          label: tickFormat(value),
+          position: scale(value),
+          value,
+        })),
+      );
     }
   }, [axisLength, direction, minSpace, ref, scale, setTicks, tickFormat]);
 }

src/hooks/useTimeTicks.ts

@@ -23,15 +23,11 @@ export function useTimeTicks<Scale extends ScaleTime<number, number>>(
   options: Options,
 ): TimeTicks[] {
   const { tickFormat = scale.tickFormat() } = options;
-  const [ticks, setTicks] = useState<Date[]>([]);
+  const [ticks, setTicks] = useState<TimeTicks[]>([]);
   useTicks<Date, ScaleTime<number, number>>(scale, direction, ref, {
     ...options,
     setTicks,
     tickFormat,
   });
-  return ticks.map((value) => ({
-    label: tickFormat(value),
-    position: scale(value),
-    value,
-  }));
+  return ticks;
 }

stories/hooks/LinearPrimaryExamples.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
 import { HorizontalExample, VerticalExample } from './TestAxis';
 
@@ -56,6 +57,25 @@ export function HorizontalScientificDecimals() {
 }
 HorizontalScientificDecimals.storyName = 'Horizontal scientific decimals';
 
+export function HorizontalToggleDomain() {
+  const domain1 = [-1, 1] as const;
+  const domain2 = [0, 0] as const;
+  const [which, setWhich] = useState(1);
+
+  return (
+    <div>
+      <HorizontalExample
+        domain={which === 1 ? domain1 : domain2}
+        type="linear"
+      />
+      <button type="button" onClick={() => setWhich((w) => (w === 1 ? 2 : 1))}>
+        Toggle domain
+      </button>
+    </div>
+  );
+}
+HorizontalToggleDomain.storyName = 'Horizontal toggle domain';
+
 export function VerticalCentaines() {
   return (
     <VerticalExample

stories/hooks/TestAxis.tsx

@@ -52,7 +52,7 @@ const HorizontalAxisTop = forwardRef<SVGGElement | null, HorizontalRenderProps>(
     <g ref={ref} transform={`translate(${x}, ${y})`}>
       <line x2={width} y1={15} y2={15} stroke="black" />
       {ticks.map(({ label, position }) => (
-        <g key={`${label}${position}`}>
+        <g key={position}>
           <line x1={position} x2={position} y1={10} y2={15} stroke="black" />
           <text x={position} dominantBaseline="middle" textAnchor="middle">
             {label}
@@ -69,7 +69,7 @@ const HorizontalAxisBottom = forwardRef<
   <g ref={ref} transform={`translate(${x}, ${y})`}>
     <line x2={width} y1={-15} y2={-15} stroke="black" />
     {ticks.map(({ label, position }) => (
-      <g key={`${label}${position}`}>
+      <g key={position}>
         <line x1={position} x2={position} y1={-10} y2={-15} stroke="black" />
         <text x={position} dominantBaseline="middle" textAnchor="middle">
           {label}
@@ -169,7 +169,7 @@ const VerticalAxisLeft = forwardRef<SVGGElement | null, VerticalRenderProps>(
     <g ref={ref} transform={`translate(${x}, ${y})`}>
       <line y2={height} x1={15} x2={15} stroke="black" />
       {ticks.map(({ label, position }) => (
-        <g key={`${label}${position}`}>
+        <g key={position}>
           <line y1={position} y2={position} x1={10} x2={15} stroke="black" />
           <text y={position} dominantBaseline="middle" textAnchor="end">
             {label}
@@ -185,7 +185,7 @@ const VerticalAxisRight = forwardRef<SVGGElement | null, VerticalRenderProps>(
       <line y2={height} x1={-15} x2={-15} stroke="black" />
       {ticks.map(({ label, position }) => {
         return (
-          <g key={`${label}${position}`}>
+          <g key={position}>
             <line
               y1={position}
               y2={position}
@@ -307,7 +307,7 @@ interface VerticalState {
   height: number;
 }
 interface ExampleProps {
-  domain: [number | Date, number | Date];
+  domain: readonly [number | Date, number | Date];
   type: 'linear' | 'log' | 'time';
   scientificNotation?: boolean;
 }