Allow passing custom axis tick formatters to VisCanvas

Author: axelboc

apps/storybook/src/VisCanvas.stories.tsx

@@ -1,5 +1,6 @@
 import { ScaleType, VisCanvas } from '@h5web/lib';
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react';
+import { format } from 'd3-format';
 
 import FillHeight from './decorators/FillHeight';
 
@@ -34,6 +35,23 @@ export const NiceDomains = {
   },
 } satisfies Story;
 
+export const TickFormatters = {
+  args: {
+    abscissaConfig: {
+      visDomain: [-1.2, 2.8],
+      showGrid: true,
+      formatTick: (val) => {
+        return Math.round(val) === val ? val.toString() : val.toFixed(3);
+      },
+    },
+    ordinateConfig: {
+      visDomain: [50, 100],
+      showGrid: true,
+      formatTick: format('.2e'),
+    },
+  },
+} satisfies Story;
+
 export const LogScales = {
   args: {
     abscissaConfig: {

packages/lib/src/vis/models.ts

@@ -42,6 +42,7 @@ export interface AxisConfig {
   label?: string;
   flip?: boolean;
   nice?: boolean;
+  formatTick?: (val: number) => string;
 }
 
 export type VisScaleType = ColorScaleType | [ScaleType.Gamma, number];

packages/lib/src/vis/shared/Axis.tsx

@@ -49,6 +49,7 @@ function Axis(props: Props) {
     showGrid,
     label,
     nice = false,
+    formatTick,
   } = config;
   // Restrain ticks scales to visible domains
   const scale = createScale(scaleType, {
@@ -76,7 +77,9 @@ function Axis(props: Props) {
         >
           <AxisComponent
             scale={scale}
-            tickFormat={getTickFormatter(domain, axisLength, scaleType)}
+            tickFormat={
+              formatTick || getTickFormatter(domain, axisLength, scaleType)
+            }
             label={label}
             labelOffset={offset - (isAbscissa ? 32 : 36)}
             hideAxisLine={showGrid}