[charts] Add a default value formatter for continuous scales (#18178)

Author: bernardobelchior

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.tsx

@@ -330,7 +330,7 @@ export function ChartAxisZoomSliderActiveTrack({
 function getZoomSliderTooltipsText(axis: ComputedAxis, drawingArea: ChartDrawingArea) {
   const formatValue = (value: Date | number | null) => {
     if (axis.valueFormatter) {
-      return axis.valueFormatter(value, { location: 'zoom-slider-tooltip' });
+      return axis.valueFormatter(value, { location: 'zoom-slider-tooltip', scale: axis.scale });
     }
 
     return `${value}`;

packages/x-charts/src/internals/defaultValueFormatters.ts

@@ -0,0 +1,22 @@
+import { AxisValueFormatterContext, ContinuousScaleName, D3ContinuousScale } from '../models/axis';
+
+/**
+ * Creates a default formatter function for continuous scales (e.g., linear, sqrt, log).
+ * @returns A formatter function for continuous values.
+ */
+export function createScalarFormatter(tickNumber: number, zoomScale: D3ContinuousScale) {
+  return function defaultScalarValueFormatter<S extends ContinuousScaleName = ContinuousScaleName>(
+    value: any,
+    context: AxisValueFormatterContext<S>,
+  ): string {
+    if (context.location === 'tick') {
+      return context.scale.tickFormat(tickNumber)(value);
+    }
+
+    if (context.location === 'zoom-slider-tooltip') {
+      return zoomScale.tickFormat(2)(value);
+    }
+
+    return `${value}`;
+  };
+}

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.ts

@@ -1,4 +1,5 @@
 import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
+import { createScalarFormatter } from '../../../defaultValueFormatters';
 import { AxisConfig, ScaleName } from '../../../../models';
 import {
   ChartsXAxisProps,
@@ -10,6 +11,7 @@ import {
   DefaultedXAxis,
   DefaultedYAxis,
   DefaultedAxis,
+  AxisValueFormatterContext,
 } from '../../../../models/axis';
 import { CartesianChartSeriesType, ChartSeriesType } from '../../../../models/seriesType/config';
 import { getColorScale, getOrdinalColorScale } from '../../../colorScale';
@@ -208,6 +210,19 @@ export function computeAxisValue<T extends ChartSeriesType>({
       scale: finalScale.domain(domain) as any,
       tickNumber,
       colorScale: axis.colorMap && getColorScale(axis.colorMap),
+      valueFormatter:
+        axis.valueFormatter ??
+        (createScalarFormatter(
+          tickNumber,
+          getScale(
+            scaleType,
+            range.map((v) => scale.invert(v)),
+            range,
+          ),
+        ) as <TScaleName extends ScaleName>(
+          value: any,
+          context: AxisValueFormatterContext<TScaleName>,
+        ) => string),
     };
   });
   return {

packages/x-charts/src/models/axis.ts

@@ -326,16 +326,17 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> =
        * - `'legend'` The value is displayed in the legend when using color legend.
        * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
        */
-      location: 'legend' | 'zoom-slider-tooltip';
+      location: 'legend';
     }
   | {
       /**
        * Location indicates where the value will be displayed.
        * - `'tick'` The value is displayed on the axis ticks.
        * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
        * - `'legend'` The value is displayed in the legend when using color legend.
+       * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
        */
-      location: 'tick' | 'tooltip';
+      location: 'tick' | 'tooltip' | 'zoom-slider-tooltip';
       /**
        * The d3-scale instance associated to the axis.
        */