Skip to content

Commit 47104f9

Browse files
Lukas742Lukas742
authored
fix(Charts): tooltip respects dimension formatter (#614)
* fix(Charts): tooltip respects dimension formatter
1 parent e13b634 commit 47104f9

File tree

7 files changed

+60
-6
lines changed

7 files changed

+60
-6
lines changed

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
} from 'recharts';
2323
import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
2424
import { useChartMargin } from '../../hooks/useChartMargin';
25+
import { useLabelFormatter } from '../../hooks/useLabelFormatter';
2526
import { useLongestYAxisLabelBar } from '../../hooks/useLongestYAxisLabelBar';
2627
import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
2728
import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
@@ -143,6 +144,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<H
143144
const chartRef = useConsolidatedRef<any>(ref);
144145

145146
const onItemLegendClick = useLegendItemClick(onLegendClick);
147+
const labelFormatter = useLabelFormatter(primaryDimension);
146148

147149
const onDataPointClickInternal = useCallback(
148150
(payload, i, event) => {
@@ -261,7 +263,12 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<H
261263
label={chartConfig.referenceLine.label}
262264
/>
263265
)}
264-
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
266+
<Tooltip
267+
cursor={tooltipFillOpacity}
268+
formatter={tooltipValueFormatter}
269+
contentStyle={tooltipContentStyle}
270+
labelFormatter={labelFormatter}
271+
/>
265272
{chartConfig.zoomingTool && (
266273
<Brush
267274
y={10}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
} from 'recharts';
2323
import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
2424
import { useChartMargin } from '../../hooks/useChartMargin';
25+
import { useLabelFormatter } from '../../hooks/useLabelFormatter';
2526
import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel';
2627
import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
2728
import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
@@ -140,6 +141,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
140141
const primaryDimension = dimensions[0];
141142
const primaryMeasure = measures[0];
142143

144+
const labelFormatter = useLabelFormatter(primaryDimension);
143145
const chartRef = useConsolidatedRef<any>(ref);
144146

145147
const dataKeys = measures.map(({ accessor }) => accessor);
@@ -272,7 +274,12 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
272274
yAxisId={'left'}
273275
/>
274276
)}
275-
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
277+
<Tooltip
278+
cursor={tooltipFillOpacity}
279+
formatter={tooltipValueFormatter}
280+
labelFormatter={labelFormatter}
281+
contentStyle={tooltipContentStyle}
282+
/>
276283
{chartConfig.zoomingTool && (
277284
<Brush
278285
y={10}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
YAxis
2323
} from 'recharts';
2424
import { useChartMargin } from '../../hooks/useChartMargin';
25+
import { useLabelFormatter } from '../../hooks/useLabelFormatter';
2526
import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel';
2627
import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
2728
import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
@@ -151,6 +152,8 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
151152
const primaryDimension = dimensions[0];
152153
const primaryMeasure = measures[0];
153154

155+
const labelFormatter = useLabelFormatter(primaryDimension);
156+
154157
const dataKeys = measures.map(({ accessor }) => accessor);
155158
const colorSecondY = chartConfig.secondYAxis
156159
? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
@@ -307,7 +310,12 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
307310
xAxisId={layout === 'vertical' ? 'primary' : undefined}
308311
/>
309312
)}
310-
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
313+
<Tooltip
314+
cursor={tooltipFillOpacity}
315+
formatter={tooltipValueFormatter}
316+
labelFormatter={labelFormatter}
317+
contentStyle={tooltipContentStyle}
318+
/>
311319
{!noLegend && (
312320
<Legend
313321
verticalAlign={chartConfig.legendPosition}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
YAxis
2121
} from 'recharts';
2222
import { useChartMargin } from '../../hooks/useChartMargin';
23+
import { useLabelFormatter } from '../../hooks/useLabelFormatter';
2324
import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel';
2425
import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
2526
import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
@@ -124,6 +125,8 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
124125
const primaryDimension = dimensions[0];
125126
const primaryMeasure = measures[0];
126127

128+
const labelFormatter = useLabelFormatter(primaryDimension);
129+
127130
const chartRef = useConsolidatedRef<any>(ref);
128131

129132
const dataKeys = measures.map(({ accessor }) => accessor);
@@ -252,7 +255,12 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
252255
yAxisId={'left'}
253256
/>
254257
)}
255-
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
258+
<Tooltip
259+
cursor={tooltipFillOpacity}
260+
formatter={tooltipValueFormatter}
261+
contentStyle={tooltipContentStyle}
262+
labelFormatter={labelFormatter}
263+
/>
256264
{chartConfig.zoomingTool && (
257265
<Brush
258266
y={10}

‎packages/charts/src/components/PieChart/PieChart.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,10 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<H
118118
[measure]
119119
);
120120

121-
const tooltipValueFormatter = useCallback((value) => measure.formatter(value), [measure.formatter]);
121+
const tooltipValueFormatter = useCallback((value, name) => [measure.formatter(value), dimension.formatter(name)], [
122+
measure.formatter,
123+
dimension.formatter
124+
]);
122125
const chartRef = useConsolidatedRef<any>(ref);
123126

124127
const onItemLegendClick = useLegendItemClick(onLegendClick, () => measure.accessor);

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
RadarChart as RadarChartLib,
1616
Tooltip
1717
} from 'recharts';
18+
import { useLabelFormatter } from '../../hooks/useLabelFormatter';
1819
import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
1920
import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
2021
import { IChartBaseProps } from '../../interfaces/IChartBaseProps';
@@ -106,6 +107,8 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
106107

107108
const primaryDimension = dimensions[0];
108109

110+
const labelFormatter = useLabelFormatter(primaryDimension);
111+
109112
const primaryDimensionAccessor = primaryDimension?.accessor;
110113

111114
const onItemLegendClick = useLegendItemClick(onLegendClick);
@@ -171,7 +174,12 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
171174
/>
172175
);
173176
})}
174-
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
177+
<Tooltip
178+
cursor={tooltipFillOpacity}
179+
formatter={tooltipValueFormatter}
180+
contentStyle={tooltipContentStyle}
181+
labelFormatter={labelFormatter}
182+
/>
175183
{!noLegend && (
176184
<Legend
177185
verticalAlign={chartConfig.legendPosition}

‎packages/charts/src/hooks/useLabelFormatter.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { useCallback } from 'react';
2+
3+
export const useLabelFormatter = (primaryDimension) => {
4+
return useCallback(
5+
(name) => {
6+
if (primaryDimension && typeof primaryDimension?.formatter === 'function') {
7+
return primaryDimension.formatter(name);
8+
}
9+
return name;
10+
},
11+
[primaryDimension]
12+
);
13+
};

0 commit comments

Comments
 (0)