Skip to content

Commit 9b2e929

Browse files
Lukas742Lukas742
committed
feat(charts): update recharts to v3
1 parent b0cdc29 commit 9b2e929

File tree

13 files changed

+116
-104
lines changed

13 files changed

+116
-104
lines changed

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,18 @@ export const WithDataLabels: Story = {
8686

8787
export const WithFormatter: Story = {
8888
args: {
89-
dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
89+
dimensions: [
90+
{
91+
accessor: 'name',
92+
formatter: (element) => {
93+
//todo: remove once issue has been fixed (should never be number in this case)
94+
if (typeof element === 'string') {
95+
return element.slice(0, 3);
96+
}
97+
return element;
98+
},
99+
},
100+
],
90101
measures: [
91102
{
92103
accessor: 'users',

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

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
YAxis,
1818
} from 'recharts';
1919
import type { YAxisProps } from 'recharts';
20-
import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
2120
import { useCancelAnimationFallback } from '../../hooks/useCancelAnimationFallback.js';
2221
import { useChartMargin } from '../../hooks/useChartMargin.js';
2322
import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
@@ -48,12 +47,6 @@ const measureDefaults = {
4847
opacity: 1,
4948
};
5049

51-
const valueAccessor =
52-
(attribute) =>
53-
({ payload }) => {
54-
return getValueByDataKey(payload, attribute);
55-
};
56-
5750
interface MeasureConfig extends IChartMeasure {
5851
/**
5952
* Bar Width
@@ -284,8 +277,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
284277
tickLine={{
285278
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
286279
}}
287-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
288-
// @ts-ignore
289280
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
290281
orientation="top"
291282
interval={0}
@@ -328,16 +319,13 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
328319
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
329320
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
330321
barSize={element.width}
331-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
332-
// @ts-ignore
333322
onClick={onDataPointClickInternal}
334323
isAnimationActive={!noAnimation}
335324
onAnimationStart={handleBarAnimationStart}
336325
onAnimationEnd={handleBarAnimationEnd}
337326
>
338327
<LabelList
339-
data={dataset}
340-
valueAccessor={valueAccessor(element.accessor)}
328+
dataKey={element.accessor}
341329
content={<ChartDataLabel config={element} chartType="bar" position={'insideRight'} />}
342330
/>
343331
{dataset.map((data, i) => {
@@ -353,8 +341,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
353341
);
354342
})}
355343
{!noLegend && (
356-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
357-
// @ts-ignore
358344
<Legend
359345
verticalAlign={chartConfig.legendPosition}
360346
align={chartConfig.legendHorizontalAlign}
@@ -371,7 +357,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
371357
label={referenceLine?.label}
372358
/>
373359
)}
374-
{/*ToDo: remove conditional rendering once `active` is working again (https://github.com/recharts/recharts/issues/2703)*/}
375360
{tooltipConfig?.active !== false && (
376361
<Tooltip
377362
cursor={tooltipFillOpacity}

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,18 @@ export const Default: Story = {};
5252
export const WithCustomSize: Story = {
5353
args: {
5454
layout: 'vertical',
55-
dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
55+
dimensions: [
56+
{
57+
accessor: 'name',
58+
formatter: (element) => {
59+
//todo: remove once issue has been fixed (should never be number in this case)
60+
if (typeof element === 'string') {
61+
return element.slice(0, 3);
62+
}
63+
return element;
64+
},
65+
},
66+
],
5667
measures: [
5768
{
5869
accessor: 'users',

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -431,8 +431,6 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
431431
/>
432432
)}
433433
{!noLegend && (
434-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
435-
// @ts-ignore
436434
<Legend
437435
verticalAlign={chartConfig.legendPosition}
438436
align={chartConfig.legendHorizontalAlign}

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

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
YAxis,
1818
} from 'recharts';
1919
import type { YAxisProps } from 'recharts';
20-
import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
2120
import { useCancelAnimationFallback } from '../../hooks/useCancelAnimationFallback.js';
2221
import { useChartMargin } from '../../hooks/useChartMargin.js';
2322
import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
@@ -116,12 +115,6 @@ const measureDefaults = {
116115
opacity: 1,
117116
};
118117

119-
const valueAccessor =
120-
(attribute) =>
121-
({ payload }) => {
122-
return getValueByDataKey(payload, attribute);
123-
};
124-
125118
/**
126119
* A `ColumnChart` is a data visualization where each category is represented by a rectangle, with the height of the rectangle being proportional to the values being plotted.
127120
*/
@@ -310,6 +303,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
310303
measures.map((element, index) => {
311304
return (
312305
<Column
306+
// todo: multiple `yAxisId`s cause the Cartesian Grid to break
313307
yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
314308
stackId={element.stackId}
315309
fillOpacity={element.opacity}
@@ -321,16 +315,13 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
321315
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
322316
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
323317
barSize={element.width}
324-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
325-
// @ts-ignore
326318
onClick={onDataPointClickInternal}
327319
isAnimationActive={!noAnimation}
328320
onAnimationStart={handleBarAnimationStart}
329321
onAnimationEnd={handleBarAnimationEnd}
330322
>
331323
<LabelList
332-
data={dataset}
333-
valueAccessor={valueAccessor(element.accessor)}
324+
dataKey={element.accessor}
334325
content={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
335326
/>
336327
{dataset.map((data, i) => {
@@ -346,8 +337,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
346337
);
347338
})}
348339
{!noLegend && (
349-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
350-
// @ts-ignore
351340
<Legend
352341
verticalAlign={chartConfig.legendPosition}
353342
align={chartConfig.legendHorizontalAlign}

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

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
YAxis,
2020
} from 'recharts';
2121
import type { YAxisProps } from 'recharts';
22-
import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
2322
import { useChartMargin } from '../../hooks/useChartMargin.js';
2423
import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
2524
import { useLegendItemClick } from '../../hooks/useLegendItemClick.js';
@@ -204,12 +203,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
204203
? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
205204
: 0;
206205

207-
const valueAccessor =
208-
(attribute) =>
209-
({ payload }) => {
210-
return getValueByDataKey(payload, attribute);
211-
};
212-
213206
const onDataPointClickInternal = (payload, eventOrIndex, event) => {
214207
if (typeof onDataPointClick === 'function') {
215208
if (typeof eventOrIndex === 'number') {
@@ -435,8 +428,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
435428
/>
436429
)}
437430
{!noLegend && (
438-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
439-
// @ts-ignore
440431
<Legend
441432
verticalAlign={chartConfig.legendPosition}
442433
align={chartConfig.legendHorizontalAlign}
@@ -510,8 +501,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
510501
{element.type === 'bar' && (
511502
<>
512503
<LabelList
513-
data={dataset}
514-
valueAccessor={valueAccessor(element.accessor)}
504+
dataKey={element.accessor}
515505
content={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
516506
/>
517507
{dataset.map((data, i) => {

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
265265
orientation={isRTL === true ? 'right' : 'left'}
266266
axisLine={chartConfig.yAxisVisible}
267267
tickLine={tickLineConfig}
268+
// todo: multiple `yAxisId`s cause the Cartesian Grid to break
268269
yAxisId="left"
269270
tickFormatter={primaryMeasure?.formatter}
270271
interval={0}
@@ -320,8 +321,6 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
320321
);
321322
})}
322323
{!noLegend && (
323-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
324-
// @ts-ignore
325324
<Legend
326325
verticalAlign={chartConfig.legendPosition}
327326
align={chartConfig.legendHorizontalAlign}

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { CSSProperties } from 'react';
66
import { cloneElement, forwardRef, isValidElement, useCallback, useMemo } from 'react';
77
import {
88
Cell,
9+
Curve,
910
Label as RechartsLabel,
1011
Legend,
1112
Pie,
@@ -253,8 +254,10 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
253254
(props) => {
254255
const hideDataLabel =
255256
typeof measure.hideDataLabel === 'function' ? measure.hideDataLabel(props) : measure.hideDataLabel;
256-
if (hideDataLabel || chartConfig.activeSegment === props.index) return null;
257-
return Pie.renderLabelLineItem({}, props, undefined);
257+
if (hideDataLabel || chartConfig.activeSegment === props.index) {
258+
return null;
259+
}
260+
return <Curve {...props} type="linear" className={'recharts-pie-label-line'} />;
258261
},
259262
[chartConfig.activeSegment, measure.hideDataLabel],
260263
);
@@ -311,7 +314,6 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
311314
isAnimationActive={!noAnimation}
312315
labelLine={renderLabelLine}
313316
label={dataLabel}
314-
activeIndex={chartConfig.activeSegment}
315317
activeShape={chartConfig.activeSegment != null && renderActiveShape}
316318
rootTabIndex={-1}
317319
>
@@ -335,14 +337,17 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
335337
{...tooltipConfig}
336338
/>
337339
)}
340+
{chartConfig.activeSegment && (
341+
// tooltip that only renders the active shape
342+
<Tooltip trigger="click" defaultIndex={chartConfig.activeSegment} active={false} />
343+
)}
338344
{!noLegend && (
339-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
340-
// @ts-ignore
341345
<Legend
342346
verticalAlign={chartConfig.legendPosition}
343347
align={chartConfig.legendHorizontalAlign}
344348
onClick={onItemLegendClick}
345349
wrapperStyle={legendWrapperStyle}
350+
itemSorter={'dataKey'}
346351
{...chartConfig.legendConfig}
347352
/>
348353
)}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ import LegendStory from '../../resources/LegendConfig.mdx';
2525

2626
<Canvas of={ComponentStories.WithCustomColor} />
2727

28-
### With Data Labels
28+
### Without Data Labels
2929

30-
<Canvas of={ComponentStories.WithDataLabels} />
30+
<Canvas of={ComponentStories.WithoutDataLabels} />
3131

3232
### Polygon
3333

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

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import { complexDataSet, legendConfig, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
2+
import { legendConfig, radarChartDataset, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
33
import { RadarChart } from './RadarChart.js';
44

55
const meta = {
@@ -9,27 +9,23 @@ const meta = {
99
dimensions: [
1010
{
1111
accessor: 'name',
12-
formatter: (d) => `${d} 2019`,
1312
},
1413
],
1514
measures: [
1615
{
17-
accessor: 'users',
18-
label: 'Users',
19-
formatter: (val) => val.toLocaleString(),
16+
accessor: 'alpha',
17+
label: 'Alpha Series',
2018
},
2119
{
22-
accessor: 'sessions',
23-
label: 'Active Sessions',
24-
formatter: (val) => `${val} sessions`,
25-
hideDataLabel: true,
20+
accessor: 'beta',
21+
label: 'Beta Series',
2622
},
2723
{
28-
accessor: 'volume',
29-
label: 'Vol.',
24+
accessor: 'gamma',
25+
label: 'Gamma Series',
3026
},
3127
],
32-
dataset: complexDataSet,
28+
dataset: radarChartDataset,
3329
},
3430
argTypes: {
3531
dataset: {
@@ -51,39 +47,30 @@ export const WithCustomColor: Story = {
5147
},
5248
};
5349

54-
export const WithDataLabels: Story = {
50+
export const WithoutDataLabels: Story = {
5551
args: {
56-
dimensions: [{ accessor: 'name' }],
5752
measures: [
5853
{
59-
accessor: 'users',
54+
accessor: 'alpha',
55+
label: 'Alpha Series',
56+
hideDataLabel: true,
6057
},
6158
{
62-
accessor: 'sessions',
59+
accessor: 'beta',
60+
label: 'Beta Series',
61+
hideDataLabel: true,
6362
},
6463
{
65-
accessor: 'volume',
64+
accessor: 'gamma',
65+
label: 'Gamma Series',
66+
hideDataLabel: true,
6667
},
6768
],
6869
},
6970
};
7071

7172
export const Polygon: Story = {
7273
args: {
73-
dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
74-
measures: [
75-
{
76-
accessor: 'users',
77-
formatter: (element) => `${element / 10}`,
78-
label: 'number of users',
79-
},
80-
{
81-
accessor: 'sessions',
82-
},
83-
{
84-
accessor: 'volume',
85-
},
86-
],
8774
chartConfig: { polarGridType: 'polygon' },
8875
},
8976
};

0 commit comments

Comments
 (0)