Skip to content

Commit 889af5d

Browse files
Lukas742Lukas742
committed
refactor XAxisTicks and YAxisTicks 
1 parent 56f6791 commit 889af5d

File tree

11 files changed

+40
-81
lines changed

11 files changed

+40
-81
lines changed

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -258,11 +258,9 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
258258
<XAxis
259259
interval={0}
260260
type="number"
261-
//todo why two times formatter? once in `tick` once in `tickFormatter`
262-
tick={<XAxisTicks config={primaryMeasure} />}
261+
tick={<XAxisTicks formatter={primaryMeasure.formatter} />}
263262
axisLine={chartConfig.xAxisVisible}
264263
tickLine={tickLineConfig}
265-
tickFormatter={primaryMeasure?.formatter}
266264
height={xAxisHeight}
267265
reversed={isRTL}
268266
{...chartConfig.xAxisConfig}
@@ -276,7 +274,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
276274
}}
277275
tick={
278276
<XAxisTicks
279-
config={secondaryMeasure}
277+
formatter={secondaryMeasure?.formatter}
280278
secondYAxisConfig={{
281279
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
282280
}}
@@ -285,8 +283,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
285283
tickLine={{
286284
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
287285
}}
288-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
289-
// @ts-ignore
290286
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
291287
orientation="top"
292288
interval={0}
@@ -304,7 +300,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
304300
type="category"
305301
key={dimension.reactKey}
306302
dataKey={dimension.accessor}
307-
tick={<YAxisTicks config={dimension} />}
303+
tick={<YAxisTicks formatter={dimension?.formatter} />}
308304
tickLine={index < 1}
309305
axisLine={index < 1}
310306
yAxisId={index}
@@ -329,8 +325,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
329325
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
330326
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
331327
barSize={element.width}
332-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
333-
// @ts-ignore
334328
onClick={onDataPointClickInternal}
335329
isAnimationActive={!noAnimation}
336330
onAnimationStart={handleBarAnimationStart}
@@ -354,8 +348,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
354348
);
355349
})}
356350
{!noLegend && (
357-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
358-
// @ts-ignore
359351
<Legend
360352
verticalAlign={chartConfig.legendPosition}
361353
align={chartConfig.legendHorizontalAlign}

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -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,7 +415,6 @@ 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}
@@ -431,8 +425,6 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
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: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
261261
dataKey={dimension.accessor}
262262
xAxisId={index}
263263
interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
264-
tick={<XAxisTicks config={dimension} />}
264+
tick={<XAxisTicks formatter={dimension?.formatter} />}
265265
tickLine={index < 1}
266266
axisLine={index < 1}
267267
height={xAxisHeights[index]}
@@ -277,7 +277,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
277277
tickLine={tickLineConfig}
278278
yAxisId="left"
279279
interval={0}
280-
tick={<YAxisTicks config={primaryMeasure} />}
280+
tick={<YAxisTicks formatter={primaryMeasure?.formatter} />}
281281
width={yAxisWidth}
282282
{...chartConfig.yAxisConfig}
283283
/>
@@ -289,7 +289,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
289289
}}
290290
tick={
291291
<YAxisTicks
292-
config={secondaryMeasure}
292+
formatter={secondaryMeasure?.formatter}
293293
secondYAxisConfig={{
294294
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
295295
}}
@@ -298,8 +298,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
298298
tickLine={{
299299
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
300300
}}
301-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
302-
// @ts-ignore
303301
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
304302
orientation={isRTL === true ? 'left' : 'right'}
305303
yAxisId="right"
@@ -322,8 +320,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
322320
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
323321
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
324322
barSize={element.width}
325-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
326-
// @ts-ignore
327323
onClick={onDataPointClickInternal}
328324
isAnimationActive={!noAnimation}
329325
onAnimationStart={handleBarAnimationStart}
@@ -347,8 +343,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
347343
);
348344
})}
349345
{!noLegend && (
350-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
351-
// @ts-ignore
352346
<Legend
353347
verticalAlign={chartConfig.legendPosition}
354348
align={chartConfig.legendHorizontalAlign}
@@ -366,7 +360,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
366360
label={referenceLine?.label}
367361
/>
368362
)}
369-
{/*ToDo: remove conditional rendering once `active` is working again (https://github.com/recharts/recharts/issues/2703)*/}
370363
{tooltipConfig?.active !== false && (
371364
<Tooltip
372365
cursor={tooltipFillOpacity}

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -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,7 +419,6 @@ 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}
@@ -435,8 +429,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
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}

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
250250
dataKey={dimension.accessor}
251251
xAxisId={index}
252252
interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
253-
tick={<XAxisTicks config={dimension} />}
253+
tick={<XAxisTicks formatter={dimension?.formatter} />}
254254
tickLine={index < 1}
255255
axisLine={index < 1}
256256
height={chartConfig.xAxisVisible ? xAxisHeights[index] : 0}
@@ -266,9 +266,8 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
266266
axisLine={chartConfig.yAxisVisible}
267267
tickLine={tickLineConfig}
268268
yAxisId="left"
269-
tickFormatter={primaryMeasure?.formatter}
270269
interval={0}
271-
tick={chartConfig.yAxisTicksVisible && <YAxisTicks config={primaryMeasure} />}
270+
tick={chartConfig.yAxisTicksVisible && <YAxisTicks formatter={primaryMeasure?.formatter} />}
272271
width={yAxisWidth}
273272
{...chartConfig.yAxisConfig}
274273
/>
@@ -280,7 +279,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
280279
}}
281280
tick={
282281
<YAxisTicks
283-
config={secondaryMeasure}
282+
formatter={secondaryMeasure?.formatter}
284283
secondYAxisConfig={{
285284
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
286285
}}
@@ -289,8 +288,6 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
289288
tickLine={{
290289
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
291290
}}
292-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
293-
// @ts-ignore
294291
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
295292
orientation={isRTL === true ? 'left' : 'right'}
296293
yAxisId="right"
@@ -306,8 +303,6 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
306303
key={element.reactKey}
307304
name={element.label ?? element.accessor}
308305
strokeOpacity={element.opacity}
309-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
310-
// @ts-ignore
311306
label={isBigDataSet ? false : <ChartDataLabel config={element} chartType="line" position="top" />}
312307
type="monotone"
313308
dataKey={element.accessor}
@@ -320,8 +315,6 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
320315
);
321316
})}
322317
{!noLegend && (
323-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
324-
// @ts-ignore
325318
<Legend
326319
verticalAlign={chartConfig.legendPosition}
327320
align={chartConfig.legendHorizontalAlign}

0 commit comments

Comments
 (0)