Skip to content

Commit f25c4cb

Browse files
renovate[bot]tomaszpacior
renovate[bot]
and
tomaszpacior
authored
fix(deps): update dependency recharts to v3 (#297)
* fix(deps): update dependency recharts to v3 * fix(deps): update dependency recharts to v3 * fix(deps): update dependency recharts to v3 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: tomaszpacior <[email protected]>
1 parent a927422 commit f25c4cb

File tree

8 files changed

+305
-199
lines changed

8 files changed

+305
-199
lines changed

‎package-lock.json‎

Lines changed: 142 additions & 87 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
"markdown-to-jsx": "^8.0.0",
7070
"react-day-picker": "^9.11.3",
7171
"react-indiana-drag-scroll": "^2.2.1",
72-
"recharts": "^2.15.4",
72+
"recharts": "^3.6.0",
7373
"swiper": "^12.0.3",
7474
"tailwind-merge": "^3.4.0",
7575
"tailwindcss-animate": "^1.0.7",

‎packages/ui/src/components/Chart/ChartRoundedBar/ChartRoundedBar.stories.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import type { Meta, StoryObj } from '@storybook/nextjs';
22
import React from 'react';
33
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
4-
import { Props as BarProps } from 'recharts/types/cartesian/Bar';
54

65
import { ChartRoundedBar } from './ChartRoundedBar';
76
import { ChartRoundedBarProps } from './ChartRoundedBar.types';
87

9-
const meta = {
8+
type BarProps = React.ComponentProps<typeof Bar>;
9+
10+
const meta: Meta<typeof ChartRoundedBar> = {
1011
title: 'Components/Chart/ChartRoundedBar',
1112
component: ChartRoundedBar,
1213
tags: ['autodocs'],
1314
parameters: {
1415
layout: 'centered',
1516
},
16-
} satisfies Meta<typeof ChartRoundedBar>;
17+
};
1718

1819
export default meta;
1920

@@ -71,13 +72,11 @@ const ChartRoundedBarExample = ({ data }: { data: ChartRoundedBarProps[] }) => {
7172
};
7273

7374
export const Default: Story = {
74-
// @ts-expect-error args are not needed as there is a render function
7575
args: {},
7676
render: () => <ChartRoundedBarExample data={sampleChartData} />,
7777
};
7878

7979
export const WithSingleSegment: Story = {
80-
// @ts-expect-error args are not needed as there is a render function
8180
args: {},
8281
render: () => (
8382
<ChartRoundedBarExample
@@ -109,7 +108,6 @@ export const WithSingleSegment: Story = {
109108
};
110109

111110
export const WithZeroValues: Story = {
112-
// @ts-expect-error args are not needed as there is a render function
113111
args: {},
114112
render: () => (
115113
<ChartRoundedBarExample

‎packages/ui/src/components/Chart/ChartRoundedBar/ChartRoundedBar.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { FC } from 'react';
2-
import { Props } from 'recharts/types/cartesian/Bar';
2+
import { Bar } from 'recharts';
33

44
import { ChartRoundedBarProps } from './ChartRoundedBar.types';
55

6-
export const ChartRoundedBar: FC<Props & ChartRoundedBarProps> = (props) => {
6+
type BarProps = React.ComponentProps<typeof Bar>;
7+
8+
export const ChartRoundedBar: FC<BarProps & ChartRoundedBarProps> = (props) => {
79
const {
810
x: xString,
911
y: yString,

‎packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.tsx‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,28 +16,33 @@ export const ChartTooltip: React.FC<ChartTooltipProps> = ({ type = 'number', act
1616
<div className="rounded-md bg-background p-2 border">
1717
<div className="flex flex-col gap-2">
1818
{payload
19-
.map((item, index) => (
20-
<div key={`${item.name}-${index}`} className="flex flex-row justify-between gap-2">
21-
<div className="flex items-center gap-2">
22-
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
23-
<rect x="0" y="0" width="12" height="12" fill={item?.color} rx="4" ry="4" />
24-
</svg>
25-
<Typography variant="small">{`${item?.name} :`}</Typography>
19+
.map(
20+
(
21+
item: { name?: string; value?: number | string; color?: string; unit?: string },
22+
index: number,
23+
) => (
24+
<div key={`${item.name}-${index}`} className="flex flex-row justify-between gap-2">
25+
<div className="flex items-center gap-2">
26+
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
27+
<rect x="0" y="0" width="12" height="12" fill={item?.color} rx="4" ry="4" />
28+
</svg>
29+
<Typography variant="small">{`${item?.name} :`}</Typography>
30+
</div>
31+
<Typography variant="small" className="text-right">
32+
{type === 'price' ? (
33+
<Price
34+
price={{
35+
value: Number(item.value),
36+
currency: item.unit as Models.Price.Currency,
37+
}}
38+
/>
39+
) : (
40+
item.value
41+
)}
42+
</Typography>
2643
</div>
27-
<Typography variant="small" className="text-right">
28-
{type === 'price' ? (
29-
<Price
30-
price={{
31-
value: Number(item.value),
32-
currency: item.unit as Models.Price.Currency,
33-
}}
34-
/>
35-
) : (
36-
item.value
37-
)}
38-
</Typography>
39-
</div>
40-
))
44+
),
45+
)
4146
.reverse()}
4247
</div>
4348
</div>

‎packages/ui/src/components/Chart/ChartTooltip/ChartTooltip.types.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,13 @@ import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipCont
33

44
export interface ChartTooltipProps extends TooltipProps<ValueType, NameType> {
55
type?: 'price' | 'number';
6+
active?: boolean;
7+
payload?: Array<{
8+
name?: string;
9+
value?: number | string;
10+
color?: string;
11+
unit?: string;
12+
dataKey?: string;
13+
payload?: unknown;
14+
}>;
615
}

‎packages/ui/src/elements/chart.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ export const LineChart: Story = {
6565
<CartesianGrid strokeDasharray="3 3" />
6666
<XAxis dataKey="name" />
6767
<YAxis />
68-
<Tooltip content={<ChartTooltipContent />} />
69-
<Legend content={<ChartLegendContent />} />
68+
<Tooltip content={<ChartTooltipContent active={false} payload={[]} />} />
69+
<Legend content={<ChartLegendContent payload={[]} />} />
7070
<Line type="monotone" dataKey="sales" stroke="#8884d8" activeDot={{ r: 8 }} />
7171
<Line type="monotone" dataKey="revenue" stroke="#82ca9d" />
7272
</LineChartComponent>
@@ -87,8 +87,8 @@ export const BarChart: Story = {
8787
<CartesianGrid strokeDasharray="3 3" />
8888
<XAxis dataKey="name" />
8989
<YAxis />
90-
<Tooltip content={<ChartTooltipContent />} />
91-
<Legend content={<ChartLegendContent />} />
90+
<Tooltip content={<ChartTooltipContent active={false} payload={[]} />} />
91+
<Legend content={<ChartLegendContent payload={[]} />} />
9292
<Bar dataKey="sales" fill="#8884d8" />
9393
<Bar dataKey="revenue" fill="#82ca9d" />
9494
</BarChartComponent>

‎packages/ui/src/elements/chart.tsx‎

Lines changed: 115 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -90,15 +90,28 @@ ${colorConfig
9090

9191
const ChartTooltip = RechartsPrimitive.Tooltip;
9292

93-
type ChartTooltipContentProps = React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
94-
React.ComponentProps<'div'> & {
95-
hideLabel?: boolean;
96-
hideIndicator?: boolean;
97-
indicator?: 'line' | 'dot' | 'dashed';
98-
nameKey?: string;
99-
labelKey?: string;
100-
ref?: React.Ref<HTMLDivElement>;
101-
};
93+
type ChartTooltipContentProps = React.ComponentProps<'div'> & {
94+
active?: boolean;
95+
payload?: Array<{
96+
name?: string;
97+
value?: number | string;
98+
color?: string;
99+
dataKey?: string;
100+
payload?: unknown;
101+
fill?: string;
102+
}>;
103+
label?: string | number;
104+
labelFormatter?: (value: unknown, payload: Array<unknown>) => React.ReactNode;
105+
formatter?: (value: unknown, name: string, item: unknown, index: number, payload: unknown) => React.ReactNode;
106+
hideLabel?: boolean;
107+
hideIndicator?: boolean;
108+
indicator?: 'line' | 'dot' | 'dashed';
109+
nameKey?: string;
110+
labelKey?: string;
111+
color?: string;
112+
labelClassName?: string;
113+
ref?: React.Ref<HTMLDivElement>;
114+
};
102115
const ChartTooltipContent = ({
103116
active,
104117
payload,
@@ -157,83 +170,107 @@ const ChartTooltipContent = ({
157170
>
158171
{!nestLabel ? tooltipLabel : null}
159172
<div className="grid gap-1.5">
160-
{payload.map((item, index) => {
161-
const key = `${nameKey || item.name || item.dataKey || 'value'}`;
162-
const itemConfig = getPayloadConfigFromPayload(config, item, key);
163-
const indicatorColor = color || item.payload.fill || item.color;
164-
165-
return (
166-
<div
167-
key={item.dataKey}
168-
className={cn(
169-
'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
170-
indicator === 'dot' && 'items-center',
171-
)}
172-
>
173-
{formatter && item?.value !== undefined && item.name ? (
174-
formatter(item.value, item.name, item, index, item.payload)
175-
) : (
176-
<>
177-
{itemConfig?.icon ? (
178-
<itemConfig.icon />
179-
) : (
180-
!hideIndicator && (
181-
<div
182-
className={cn(
183-
'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
184-
{
185-
'h-2.5 w-2.5': indicator === 'dot',
186-
'w-1': indicator === 'line',
187-
'w-0 border-[1.5px] border-dashed bg-transparent':
188-
indicator === 'dashed',
189-
'my-0.5': nestLabel && indicator === 'dashed',
190-
},
191-
)}
192-
style={
193-
{
194-
'--color-bg': indicatorColor,
195-
'--color-border': indicatorColor,
196-
} as React.CSSProperties
197-
}
198-
/>
199-
)
200-
)}
201-
<div
202-
className={cn(
203-
'flex flex-1 justify-between leading-none',
204-
nestLabel ? 'items-end' : 'items-center',
173+
{payload.map(
174+
(
175+
item: {
176+
name?: string;
177+
value?: number | string;
178+
color?: string;
179+
dataKey?: string;
180+
payload?: unknown;
181+
fill?: string;
182+
},
183+
index: number,
184+
) => {
185+
const key = `${nameKey || item.name || item.dataKey || 'value'}`;
186+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
187+
const payloadFill =
188+
item.payload && typeof item.payload === 'object' && 'fill' in item.payload
189+
? (item.payload as { fill?: string }).fill
190+
: undefined;
191+
const indicatorColor = color || payloadFill || item.color;
192+
193+
return (
194+
<div
195+
key={item.dataKey}
196+
className={cn(
197+
'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
198+
indicator === 'dot' && 'items-center',
199+
)}
200+
>
201+
{formatter && item?.value !== undefined && item.name ? (
202+
formatter(item.value, item.name, item, index, item.payload)
203+
) : (
204+
<>
205+
{itemConfig?.icon ? (
206+
<itemConfig.icon />
207+
) : (
208+
!hideIndicator && (
209+
<div
210+
className={cn(
211+
'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
212+
{
213+
'h-2.5 w-2.5': indicator === 'dot',
214+
'w-1': indicator === 'line',
215+
'w-0 border-[1.5px] border-dashed bg-transparent':
216+
indicator === 'dashed',
217+
'my-0.5': nestLabel && indicator === 'dashed',
218+
},
219+
)}
220+
style={
221+
{
222+
'--color-bg': indicatorColor,
223+
'--color-border': indicatorColor,
224+
} as React.CSSProperties
225+
}
226+
/>
227+
)
205228
)}
206-
>
207-
<div className="grid gap-1.5">
208-
{nestLabel ? tooltipLabel : null}
209-
<span className="text-muted-foreground">
210-
{itemConfig?.label || item.name}
211-
</span>
229+
<div
230+
className={cn(
231+
'flex flex-1 justify-between leading-none',
232+
nestLabel ? 'items-end' : 'items-center',
233+
)}
234+
>
235+
<div className="grid gap-1.5">
236+
{nestLabel ? tooltipLabel : null}
237+
<span className="text-muted-foreground">
238+
{itemConfig?.label || item.name}
239+
</span>
240+
</div>
241+
{item.value !== undefined && (
242+
<span className="font-mono font-medium tabular-nums text-foreground">
243+
{typeof item.value === 'number'
244+
? item.value.toLocaleString()
245+
: String(item.value)}
246+
</span>
247+
)}
212248
</div>
213-
{item.value && (
214-
<span className="font-mono font-medium tabular-nums text-foreground">
215-
{item.value.toLocaleString()}
216-
</span>
217-
)}
218-
</div>
219-
</>
220-
)}
221-
</div>
222-
);
223-
})}
249+
</>
250+
)}
251+
</div>
252+
);
253+
},
254+
)}
224255
</div>
225256
</div>
226257
);
227258
};
228259

229260
const ChartLegend = RechartsPrimitive.Legend;
230261

231-
type ChartLegendContentProps = React.ComponentProps<'div'> &
232-
Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
233-
hideIcon?: boolean;
234-
nameKey?: string;
235-
ref?: React.Ref<HTMLDivElement>;
236-
};
262+
type ChartLegendContentProps = React.ComponentProps<'div'> & {
263+
payload?: Array<{
264+
value?: string;
265+
dataKey?: string;
266+
type?: string;
267+
id?: string;
268+
}>;
269+
verticalAlign?: 'top' | 'bottom';
270+
hideIcon?: boolean;
271+
nameKey?: string;
272+
ref?: React.Ref<HTMLDivElement>;
273+
};
237274
const ChartLegendContent = ({
238275
className,
239276
hideIcon = false,
@@ -257,7 +294,7 @@ const ChartLegendContent = ({
257294
className,
258295
)}
259296
>
260-
{payload.map((item) => {
297+
{payload.map((item: { value?: string; dataKey?: string; type?: string; id?: string; color?: string }) => {
261298
const key = `${nameKey || item.dataKey || 'value'}`;
262299
const itemConfig = getPayloadConfigFromPayload(config, item, key);
263300

0 commit comments

Comments
 (0)