Skip to content

Commit 73b630e

Browse files
Lukas742Lukas742
authored
refactor(charts): refactor formatter logic (#7601)
prerequisite for feature #7597
1 parent 699d1fc commit 73b630e

File tree

16 files changed

+81
-111
lines changed

16 files changed

+81
-111
lines changed

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

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
189189
const [componentRef, chartRef] = useSyncRef<any>(ref);
190190

191191
const onItemLegendClick = useLegendItemClick(onLegendClick);
192-
const labelFormatter = useLabelFormatter(primaryDimension);
192+
const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
193193

194194
const onDataPointClickInternal = useCallback(
195195
(payload, i, event) => {
@@ -258,10 +258,9 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
258258
<XAxis
259259
interval={0}
260260
type="number"
261-
tick={<XAxisTicks config={primaryMeasure} />}
261+
tick={<XAxisTicks formatter={primaryMeasure?.formatter} />}
262262
axisLine={chartConfig.xAxisVisible}
263263
tickLine={tickLineConfig}
264-
tickFormatter={primaryMeasure?.formatter}
265264
height={xAxisHeight}
266265
reversed={isRTL}
267266
{...chartConfig.xAxisConfig}
@@ -275,7 +274,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
275274
}}
276275
tick={
277276
<XAxisTicks
278-
config={secondaryMeasure}
277+
formatter={secondaryMeasure?.formatter}
279278
secondYAxisConfig={{
280279
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
281280
}}
@@ -284,8 +283,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
284283
tickLine={{
285284
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
286285
}}
287-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
288-
// @ts-ignore
289286
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
290287
orientation="top"
291288
interval={0}
@@ -303,7 +300,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
303300
type="category"
304301
key={dimension.reactKey}
305302
dataKey={dimension.accessor}
306-
tick={<YAxisTicks config={dimension} />}
303+
tick={<YAxisTicks formatter={dimension?.formatter} />}
307304
tickLine={index < 1}
308305
axisLine={index < 1}
309306
yAxisId={index}
@@ -328,8 +325,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
328325
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
329326
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
330327
barSize={element.width}
331-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
332-
// @ts-ignore
333328
onClick={onDataPointClickInternal}
334329
isAnimationActive={!noAnimation}
335330
onAnimationStart={handleBarAnimationStart}
@@ -353,8 +348,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
353348
);
354349
})}
355350
{!noLegend && (
356-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
357-
// @ts-ignore
358351
<Legend
359352
verticalAlign={chartConfig.legendPosition}
360353
align={chartConfig.legendHorizontalAlign}
@@ -377,7 +370,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
377370
cursor={tooltipFillOpacity}
378371
formatter={tooltipValueFormatter}
379372
contentStyle={tooltipContentStyle}
380-
labelFormatter={labelFormatter}
373+
labelFormatter={tooltipLabelFormatter}
381374
{...tooltipConfig}
382375
/>
383376
)}

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

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
196196
chartConfig?.secondYAxis?.dataKey,
197197
);
198198

199-
const labelFormatter = useLabelFormatter(primaryDimension);
199+
const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
200200

201201
const dataKeys = sortedMeasures.map(({ accessor }) => accessor);
202202
const colorSecondY = chartConfig.secondYAxis
@@ -256,7 +256,6 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
256256
const measureAxisProps = {
257257
axisLine: chartConfig.yAxisVisible,
258258
tickLine: tickLineConfig,
259-
tickFormatter: primaryMeasure?.formatter,
260259
interval: 0,
261260
};
262261

@@ -311,7 +310,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
311310

312311
if (layout === 'vertical') {
313312
axisProps.type = 'category';
314-
axisProps.tick = <YAxisTicks config={dimension} />;
313+
axisProps.tick = <YAxisTicks formatter={dimension?.formatter} />;
315314
axisProps.yAxisId = index;
316315
axisProps.width = yAxisWidth;
317316
AxisComponent = YAxis;
@@ -320,7 +319,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
320319
axisProps.minTickGap = isBigDataSet ? undefined : -10;
321320
} else {
322321
axisProps.dataKey = dimension.accessor;
323-
axisProps.tick = <XAxisTicks config={dimension} />;
322+
axisProps.tick = <XAxisTicks formatter={dimension?.formatter} />;
324323
axisProps.xAxisId = index;
325324
axisProps.height = xAxisHeights[index];
326325
AxisComponent = XAxis;
@@ -335,7 +334,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
335334
yAxisId="primary"
336335
width={yAxisWidth}
337336
orientation={isRTL ? 'right' : 'left'}
338-
tick={<YAxisTicks config={primaryMeasure} />}
337+
tick={<YAxisTicks formatter={primaryMeasure?.formatter} />}
339338
{...chartConfig.yAxisConfig}
340339
/>
341340
)}
@@ -345,7 +344,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
345344
reversed={isRTL}
346345
xAxisId="primary"
347346
type="number"
348-
tick={<XAxisTicks config={primaryMeasure} />}
347+
tick={<XAxisTicks formatter={primaryMeasure?.formatter} />}
349348
{...chartConfig.xAxisConfig}
350349
/>
351350
)}
@@ -357,7 +356,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
357356
}}
358357
tick={
359358
<YAxisTicks
360-
config={secondaryMeasure}
359+
formatter={secondaryMeasure?.formatter}
361360
secondYAxisConfig={{
362361
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
363362
}}
@@ -366,8 +365,6 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
366365
tickLine={{
367366
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
368367
}}
369-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
370-
// @ts-ignore
371368
label={{
372369
value: chartConfig.secondYAxis.name,
373370
offset: 2,
@@ -388,7 +385,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
388385
}}
389386
tick={
390387
<XAxisTicks
391-
config={secondaryMeasure}
388+
formatter={secondaryMeasure?.formatter}
392389
secondYAxisConfig={{
393390
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
394391
}}
@@ -397,8 +394,6 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
397394
tickLine={{
398395
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
399396
}}
400-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
401-
// @ts-ignore
402397
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
403398
orientation="top"
404399
interval={0}
@@ -420,19 +415,16 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
420415
label={referenceLine?.label}
421416
/>
422417
)}
423-
{/*ToDo: remove conditional rendering once `active` is working again (https://github.com/recharts/recharts/issues/2703)*/}
424418
{tooltipConfig?.active !== false && (
425419
<Tooltip
426420
cursor={tooltipFillOpacity}
427421
formatter={tooltipValueFormatter}
428422
contentStyle={tooltipContentStyle}
429-
labelFormatter={labelFormatter}
423+
labelFormatter={tooltipLabelFormatter}
430424
{...tooltipConfig}
431425
/>
432426
)}
433427
{!noLegend && (
434-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
435-
// @ts-ignore
436428
<Legend
437429
verticalAlign={chartConfig.legendPosition}
438430
align={chartConfig.legendHorizontalAlign}

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

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,8 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
180180
chartConfig?.secondYAxis?.dataKey,
181181
);
182182

183-
const labelFormatter = useLabelFormatter(primaryDimension);
183+
const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
184+
184185
const [componentRef, chartRef] = useSyncRef<any>(ref);
185186

186187
const dataKeys = measures.map(({ accessor }) => accessor);
@@ -260,7 +261,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
260261
dataKey={dimension.accessor}
261262
xAxisId={index}
262263
interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
263-
tick={<XAxisTicks config={dimension} />}
264+
tick={<XAxisTicks formatter={dimension?.formatter} />}
264265
tickLine={index < 1}
265266
axisLine={index < 1}
266267
height={xAxisHeights[index]}
@@ -276,7 +277,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
276277
tickLine={tickLineConfig}
277278
yAxisId="left"
278279
interval={0}
279-
tick={<YAxisTicks config={primaryMeasure} />}
280+
tick={<YAxisTicks formatter={primaryMeasure?.formatter} />}
280281
width={yAxisWidth}
281282
{...chartConfig.yAxisConfig}
282283
/>
@@ -288,7 +289,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
288289
}}
289290
tick={
290291
<YAxisTicks
291-
config={secondaryMeasure}
292+
formatter={secondaryMeasure?.formatter}
292293
secondYAxisConfig={{
293294
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
294295
}}
@@ -297,8 +298,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
297298
tickLine={{
298299
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
299300
}}
300-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
301-
// @ts-ignore
302301
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
303302
orientation={isRTL === true ? 'left' : 'right'}
304303
yAxisId="right"
@@ -321,8 +320,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
321320
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
322321
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
323322
barSize={element.width}
324-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
325-
// @ts-ignore
326323
onClick={onDataPointClickInternal}
327324
isAnimationActive={!noAnimation}
328325
onAnimationStart={handleBarAnimationStart}
@@ -346,8 +343,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
346343
);
347344
})}
348345
{!noLegend && (
349-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
350-
// @ts-ignore
351346
<Legend
352347
verticalAlign={chartConfig.legendPosition}
353348
align={chartConfig.legendHorizontalAlign}
@@ -365,13 +360,12 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
365360
label={referenceLine?.label}
366361
/>
367362
)}
368-
{/*ToDo: remove conditional rendering once `active` is working again (https://github.com/recharts/recharts/issues/2703)*/}
369363
{tooltipConfig?.active !== false && (
370364
<Tooltip
371365
cursor={tooltipFillOpacity}
372366
formatter={tooltipValueFormatter}
373367
contentStyle={tooltipContentStyle}
374-
labelFormatter={labelFormatter}
368+
labelFormatter={tooltipLabelFormatter}
375369
{...tooltipConfig}
376370
/>
377371
)}

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

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
197197
chartConfig?.secondYAxis?.dataKey,
198198
);
199199

200-
const labelFormatter = useLabelFormatter(primaryDimension);
200+
const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
201201

202202
const dataKeys = measures.map(({ accessor }) => accessor);
203203
const colorSecondY = chartConfig.secondYAxis
@@ -262,7 +262,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
262262
const measureAxisProps = {
263263
axisLine: chartConfig.yAxisVisible,
264264
tickLine: tickLineConfig,
265-
tickFormatter: primaryMeasure?.formatter,
266265
interval: 0,
267266
};
268267

@@ -317,14 +316,14 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
317316
axisProps.type = 'category';
318317
axisProps.visible = false;
319318
axisProps.hide = !chartConfig.yAxisVisible;
320-
axisProps.tick = <YAxisTicks config={dimension} />;
319+
axisProps.tick = <YAxisTicks formatter={dimension?.formatter} />;
321320
axisProps.yAxisId = index;
322321
axisProps.width = chartConfig.yAxisWidth ?? yAxisWidth;
323322
AxisComponent = YAxis;
324323
axisProps.orientation = isRTL ? 'right' : 'left';
325324
} else {
326325
axisProps.dataKey = dimension.accessor;
327-
axisProps.tick = <XAxisTicks config={dimension} />;
326+
axisProps.tick = <XAxisTicks formatter={dimension?.formatter} />;
328327
axisProps.hide = !chartConfig.xAxisVisible;
329328
axisProps.xAxisId = index;
330329
axisProps.height = xAxisHeights[index];
@@ -340,7 +339,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
340339
yAxisId="primary"
341340
width={chartConfig.yAxisWidth ?? yAxisWidth}
342341
orientation={isRTL ? 'right' : 'left'}
343-
tick={chartConfig.yAxisLabelsVisible ? <YAxisTicks config={primaryMeasure} /> : false}
342+
tick={chartConfig.yAxisLabelsVisible ? <YAxisTicks formatter={primaryMeasure?.formatter} /> : false}
344343
{...chartConfig.yAxisConfig}
345344
/>
346345
)}
@@ -350,7 +349,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
350349
reversed={isRTL}
351350
xAxisId="primary"
352351
type="number"
353-
tick={<XAxisTicks config={primaryMeasure} />}
352+
tick={<XAxisTicks formatter={primaryMeasure?.formatter} />}
354353
{...chartConfig.xAxisConfig}
355354
/>
356355
)}
@@ -363,7 +362,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
363362
}}
364363
tick={
365364
<YAxisTicks
366-
config={secondaryMeasure}
365+
formatter={secondaryMeasure?.formatter}
367366
secondYAxisConfig={{
368367
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
369368
}}
@@ -372,8 +371,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
372371
tickLine={{
373372
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
374373
}}
375-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
376-
// @ts-ignore
377374
label={{
378375
value: chartConfig.secondYAxis.name,
379376
offset: 2,
@@ -394,7 +391,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
394391
}}
395392
tick={
396393
<XAxisTicks
397-
config={secondaryMeasure}
394+
formatter={secondaryMeasure?.formatter}
398395
secondYAxisConfig={{
399396
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
400397
}}
@@ -403,8 +400,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
403400
tickLine={{
404401
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
405402
}}
406-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
407-
// @ts-ignore
408403
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
409404
orientation="top"
410405
interval={0}
@@ -424,19 +419,16 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
424419
label={referenceLine?.label}
425420
/>
426421
)}
427-
{/*ToDo: remove conditional rendering once `active` is working again (https://github.com/recharts/recharts/issues/2703)*/}
428422
{tooltipConfig?.active !== false && (
429423
<Tooltip
430424
cursor={tooltipFillOpacity}
431425
formatter={tooltipValueFormatter}
432426
contentStyle={tooltipContentStyle}
433-
labelFormatter={labelFormatter}
427+
labelFormatter={tooltipLabelFormatter}
434428
{...tooltipConfig}
435429
/>
436430
)}
437431
{!noLegend && (
438-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
439-
// @ts-ignore
440432
<Legend
441433
verticalAlign={chartConfig.legendPosition}
442434
align={chartConfig.legendHorizontalAlign}

0 commit comments

Comments
 (0)