Skip to content

Commit 1bcfdee

Browse files
yethranayehyethranayeh
committed
update charts
1 parent 040bc03 commit 1bcfdee

File tree

1 file changed

+76
-59
lines changed

1 file changed

+76
-59
lines changed

‎src/pages/charts/ExchangeChartView.tsx‎

Lines changed: 76 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { useMemo, useState } from "react";
22
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
3+
import { isAfter, sub } from "date-fns";
34

4-
import { ChartConfig, ChartContainer } from "@/components/shadcn/Chart";
5-
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/shadcn/Select";
65
import { useCurrencyMapData } from "@/hooks/useCurrencyMap";
76
import { convert } from "@/utils/convert";
7+
88
import { Currency } from "@/components/Currency";
9-
import { isAfter, sub } from "date-fns";
10-
import { currencies } from "@/constant";
119
import { Label } from "@/components/shadcn/Label";
10+
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/shadcn/Chart";
11+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/shadcn/Select";
12+
13+
import { currencies } from "@/constant";
1214

1315
function getCssVarSafeString(unsafe: string) {
1416
return unsafe.replaceAll(" ", "").replaceAll("'", "");
@@ -42,6 +44,13 @@ export function ExchangeChartView() {
4244
return { ...res, date: data.meta.createdAt };
4345
});
4446

47+
const filteredCurrencies = currencies.filter(
48+
(c) =>
49+
filteredData.filter((data) => Object.keys(data).includes(getCssVarSafeString(c))).length > 1 &&
50+
c !== selected &&
51+
c !== "Mirror of Kalandra"
52+
);
53+
4554
const chartConfig = useMemo(() => {
4655
const config: Record<string, { label: CurrencyKey; color: string }> = {};
4756

@@ -103,62 +112,70 @@ export function ExchangeChartView() {
103112
</div>
104113

105114
<div className='grid grid-cols-1 gap-y-8 ml-[-40px] md:grid-cols-2 xl:grid-cols-3'>
106-
{currencies
107-
.filter(
108-
(c) =>
109-
filteredData.some((data) => Object.keys(data).includes(getCssVarSafeString(c))) &&
110-
c !== selected &&
111-
c !== "Mirror of Kalandra"
112-
)
113-
.map((currency) => {
114-
const cssSafeName = getCssVarSafeString(currency);
115-
116-
return (
117-
<div key={currency} className='flex flex-col items-center gap-4'>
118-
<div className='pl-6'>
119-
<Currency name={chartConfig[cssSafeName].label} />
120-
</div>
121-
<ChartContainer config={chartConfig} className='aspect-auto h-[140px] w-full border-dashed'>
122-
<AreaChart data={filteredData}>
123-
<defs>
124-
<linearGradient key={cssSafeName} id={`fill${cssSafeName}`} x1='0' y1='0' x2='0' y2='1'>
125-
<stop offset='5%' stopColor={`var(--color-${cssSafeName}, crimson)`} stopOpacity={0.8} />
126-
<stop offset='95%' stopColor={`var(--color-${cssSafeName}, crimson)`} stopOpacity={0.1} />
127-
</linearGradient>
128-
</defs>
129-
130-
<CartesianGrid vertical={false} />
131-
132-
<XAxis
133-
dataKey='date'
134-
tickLine={false}
135-
axisLine={false}
136-
tickMargin={8}
137-
minTickGap={32}
138-
tickFormatter={(value) => {
139-
const date = new Date(value);
140-
return date.toLocaleDateString("en-US", {
141-
month: "short",
142-
day: "numeric"
143-
});
144-
}}
145-
/>
146-
147-
<YAxis tickLine={false} axisLine={false} tickMargin={2} tickCount={4} />
148-
149-
<Area
150-
key={cssSafeName}
151-
dataKey={cssSafeName}
152-
type='basis'
153-
fill={`url(#fill${cssSafeName})`}
154-
stroke={`var(--color-${cssSafeName}, #ff3960)`}
155-
stackId='a'
156-
/>
157-
</AreaChart>
158-
</ChartContainer>
115+
{filteredCurrencies.map((currency) => {
116+
const cssSafeName = getCssVarSafeString(currency);
117+
118+
return (
119+
<div key={currency} className='flex flex-col items-center gap-4'>
120+
<div className='pl-6'>
121+
<Currency name={chartConfig[cssSafeName].label} />
159122
</div>
160-
);
161-
})}
123+
<ChartContainer config={chartConfig} className='aspect-auto h-[140px] w-full border-dashed'>
124+
<AreaChart data={filteredData}>
125+
<defs>
126+
<linearGradient key={cssSafeName} id={`fill${cssSafeName}`} x1='0' y1='0' x2='0' y2='1'>
127+
<stop offset='5%' stopColor={`var(--color-${cssSafeName}, crimson)`} stopOpacity={0.8} />
128+
<stop offset='95%' stopColor={`var(--color-${cssSafeName}, crimson)`} stopOpacity={0.1} />
129+
</linearGradient>
130+
</defs>
131+
132+
<CartesianGrid vertical={false} />
133+
134+
<XAxis
135+
dataKey='date'
136+
tickLine={false}
137+
axisLine={false}
138+
tickMargin={8}
139+
minTickGap={32}
140+
tickFormatter={(value) => {
141+
const date = new Date(value);
142+
return date.toLocaleDateString("en-US", {
143+
month: "short",
144+
day: "numeric"
145+
});
146+
}}
147+
/>
148+
149+
<YAxis tickLine={false} axisLine={false} tickMargin={2} tickCount={4} />
150+
151+
<Area
152+
dot
153+
dataKey={cssSafeName}
154+
type='monotone'
155+
fill={`url(#fill${cssSafeName})`}
156+
stroke={`var(--color-${cssSafeName}, #ff3960)`}
157+
/>
158+
159+
<ChartTooltip
160+
content={
161+
<ChartTooltipContent
162+
labelFormatter={(v) => {
163+
const date = new Date(v);
164+
return date.toLocaleDateString("en-US", {
165+
month: "short",
166+
day: "numeric",
167+
hour: "numeric",
168+
minute: "numeric"
169+
});
170+
}}
171+
/>
172+
}
173+
/>
174+
</AreaChart>
175+
</ChartContainer>
176+
</div>
177+
);
178+
})}
162179
</div>
163180
</div>
164181
);

0 commit comments

Comments
 (0)