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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy