refactor labelFormatter

Author: Lukas742

packages/charts/src/components/BarChart/BarChart.tsx

@@ -189,7 +189,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
-  const labelFormatter = useLabelFormatter(primaryDimension);
+  const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
 
   const onDataPointClickInternal = useCallback(
     (payload, i, event) => {
@@ -258,6 +258,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
           <XAxis
             interval={0}
             type="number"
+            //todo why two times formatter? once in `tick` once in `tickFormatter`
             tick={<XAxisTicks config={primaryMeasure} />}
             axisLine={chartConfig.xAxisVisible}
             tickLine={tickLineConfig}
@@ -377,7 +378,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
             cursor={tooltipFillOpacity}
             formatter={tooltipValueFormatter}
             contentStyle={tooltipContentStyle}
-            labelFormatter={labelFormatter}
+            labelFormatter={tooltipLabelFormatter}
             {...tooltipConfig}
           />
         )}

packages/charts/src/components/BulletChart/BulletChart.tsx

@@ -196,7 +196,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
     chartConfig?.secondYAxis?.dataKey,
   );
 
-  const labelFormatter = useLabelFormatter(primaryDimension);
+  const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
 
   const dataKeys = sortedMeasures.map(({ accessor }) => accessor);
   const colorSecondY = chartConfig.secondYAxis
@@ -426,7 +426,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
             cursor={tooltipFillOpacity}
             formatter={tooltipValueFormatter}
             contentStyle={tooltipContentStyle}
-            labelFormatter={labelFormatter}
+            labelFormatter={tooltipLabelFormatter}
             {...tooltipConfig}
           />
         )}

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -180,7 +180,8 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
     chartConfig?.secondYAxis?.dataKey,
   );
 
-  const labelFormatter = useLabelFormatter(primaryDimension);
+  const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
+
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
   const dataKeys = measures.map(({ accessor }) => accessor);
@@ -371,7 +372,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
             cursor={tooltipFillOpacity}
             formatter={tooltipValueFormatter}
             contentStyle={tooltipContentStyle}
-            labelFormatter={labelFormatter}
+            labelFormatter={tooltipLabelFormatter}
             {...tooltipConfig}
           />
         )}

packages/charts/src/components/ComposedChart/index.tsx

@@ -197,7 +197,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
     chartConfig?.secondYAxis?.dataKey,
   );
 
-  const labelFormatter = useLabelFormatter(primaryDimension);
+  const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
 
   const dataKeys = measures.map(({ accessor }) => accessor);
   const colorSecondY = chartConfig.secondYAxis
@@ -430,7 +430,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
             cursor={tooltipFillOpacity}
             formatter={tooltipValueFormatter}
             contentStyle={tooltipContentStyle}
-            labelFormatter={labelFormatter}
+            labelFormatter={tooltipLabelFormatter}
             {...tooltipConfig}
           />
         )}

packages/charts/src/components/LineChart/LineChart.tsx

@@ -169,7 +169,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
     chartConfig?.secondYAxis?.dataKey,
   );
 
-  const labelFormatter = useLabelFormatter(primaryDimension);
+  const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
 
@@ -345,7 +345,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
             cursor={tooltipFillOpacity}
             formatter={tooltipValueFormatter}
             contentStyle={tooltipContentStyle}
-            labelFormatter={labelFormatter}
+            labelFormatter={tooltipLabelFormatter}
             {...tooltipConfig}
           />
         )}

packages/charts/src/components/RadarChart/RadarChart.tsx

@@ -119,7 +119,7 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
 
   const primaryDimension = dimensions[0];
 
-  const labelFormatter = useLabelFormatter(primaryDimension);
+  const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
 
   const primaryDimensionAccessor = primaryDimension?.accessor;
 
@@ -212,7 +212,7 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
             cursor={tooltipFillOpacity}
             formatter={tooltipValueFormatter}
             contentStyle={tooltipContentStyle}
-            labelFormatter={labelFormatter}
+            labelFormatter={tooltipLabelFormatter}
             {...tooltipConfig}
           />
         )}

packages/charts/src/hooks/useLabelFormatter.cy.tsx

@@ -1,24 +1,24 @@
+import type { TooltipLabelFormatter } from '../interfaces/index.js';
 import { useLabelFormatter } from './useLabelFormatter.js';
 
-// eslint-disable-next-line react/prop-types
-function LabelFormatterComponent({ options }) {
-  const val = useLabelFormatter(options);
-  return <span>{val(100)}</span>;
+function LabelFormatterComponent({ formatter }: { formatter?: TooltipLabelFormatter | string }) {
+  const val = useLabelFormatter(formatter as any);
+  return <span>{val(100, undefined)}</span>;
 }
 
 describe('useLabelFormatter', () => {
   it('should return value when no formatter is present', () => {
-    cy.mount(<LabelFormatterComponent options={{ accessor: 'test' }} />);
+    cy.mount(<LabelFormatterComponent formatter={null} />);
     cy.findByText('100').should('be.visible');
   });
 
   it('should not crash on invalid formatter', () => {
-    cy.mount(<LabelFormatterComponent options={{ accessor: 'test', formatter: 'abc' }} />);
+    cy.mount(<LabelFormatterComponent formatter={'abc'} />);
     cy.findByText('100').should('be.visible');
   });
 
   it('should format the value with a valid formatter', () => {
-    cy.mount(<LabelFormatterComponent options={{ accessor: 'test', formatter: (val) => val / 10 }} />);
+    cy.mount(<LabelFormatterComponent formatter={(val) => val / 10} />);
     cy.findByText('10').should('be.visible');
   });
 });

packages/charts/src/hooks/useLabelFormatter.ts

@@ -1,13 +1,15 @@
 import { useCallback } from 'react';
+import type { DefaultTooltipContentProps } from 'recharts';
+import type { NameType, TooltipLabelFormatter, ValueType } from '../interfaces/index.js';
 
-export const useLabelFormatter = (primaryDimension) => {
-  return useCallback(
-    (name) => {
-      if (primaryDimension && typeof primaryDimension.formatter === 'function') {
-        return primaryDimension.formatter(name);
+export const useLabelFormatter = (formatter: TooltipLabelFormatter) => {
+  return useCallback<TooltipLabelFormatter>(
+    (label: DefaultTooltipContentProps<ValueType, NameType>['label'], payload) => {
+      if (typeof formatter === 'function') {
+        return formatter(label, payload);
       }
-      return name;
+      return label;
     },
-    [primaryDimension],
+    [formatter],
   );
 };

packages/charts/src/interfaces/index.ts

@@ -0,0 +1,9 @@
+import type { TooltipProps } from 'recharts';
+
+export type TooltipLabelFormatter = TooltipProps<
+  number | string | Array<number | string>,
+  number | string
+>['labelFormatter'];
+
+export type ValueType = number | string | Array<number | string>;
+export type NameType = number | string;

packages/charts/src/internal/Utils.ts

@@ -32,6 +32,7 @@ export const truncateLongLabel = (value: string, length = 13) => {
   return value;
 };
 
+// todo: allow to explicitly set primary and secondary measure
 export const resolvePrimaryAndSecondaryMeasures = (measures: IChartMeasure[], secondaryAxisDataKey: string) => {
   const secondaryMeasure = measures.find((measure) => measure.accessor === secondaryAxisDataKey);
   const primaryMeasure = measures[0] === secondaryMeasure ? (measures[1] ?? measures[0]) : measures[0];