163 lines
6.3 KiB
TypeScript
163 lines
6.3 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
ResponsiveContainer,
|
|
AreaChart,
|
|
Area,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
} from "recharts";
|
|
import millify from "millify";
|
|
import Select from "@/components/Select";
|
|
import Icon from "@/components/Icon";
|
|
|
|
import { data } from "./data";
|
|
|
|
const durationOptions = [
|
|
{ id: 1, name: "Last 7 days" },
|
|
{ id: 2, name: "Last 14 days" },
|
|
{ id: 3, name: "Last 21 days" },
|
|
];
|
|
|
|
const Chart = ({}) => {
|
|
const [duration, setDuration] = useState(durationOptions[0]);
|
|
|
|
const formatterYAxis = (value: number) => {
|
|
if (value === 0) {
|
|
return "$0";
|
|
}
|
|
return `$${millify(value, {
|
|
lowercase: false,
|
|
})}`;
|
|
};
|
|
|
|
const CustomTooltip = ({ payload }: { payload: { value: number }[] }) => {
|
|
if (payload && payload.length) {
|
|
return (
|
|
<div className="p-1.5 bg-strong-950 rounded-md text-label-xs text-white-0">
|
|
Bitcoin : ${payload[0].value}
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
return (
|
|
<div className="">
|
|
<div className="border border-soft-200 px-4.5 py-3 rounded-lg max-md:px-3">
|
|
<div className="flex items-center mb-2">
|
|
<div className="mr-auto text-h6">Bitcoin</div>
|
|
<div className="flex">
|
|
<Select
|
|
className=""
|
|
classButton="rounded-r-none max-md:rounded-lg"
|
|
value={duration}
|
|
onChange={setDuration}
|
|
options={durationOptions}
|
|
/>
|
|
<div className="flex items-center gap-2 pl-2 pr-4 border-l-0 rounded-r-xl border border-stroke-soft-200 text-label-sm text-sub-600 max-md:hidden">
|
|
<Icon className="fill-sub-600" name="calendar" />
|
|
Oct 16 - Oct 22 2025
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<div className="text-h5 max-md:text-[1.5rem]">$94,112</div>
|
|
<div className="flex items-center text-label-xs text-[#009934]">
|
|
<Icon
|
|
className="-rotate-90 !size-4 fill-[#009934]"
|
|
name="arrow"
|
|
/>
|
|
12%
|
|
</div>
|
|
<div className="text-label-sm text-soft-400 max-md:hidden">
|
|
vs last Week
|
|
</div>
|
|
</div>
|
|
<div className="h-44 -ml-3">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart
|
|
width={730}
|
|
height={250}
|
|
data={data}
|
|
margin={{ top: 10, right: 5, left: 0, bottom: 0 }}
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
id="color"
|
|
x1="0"
|
|
y1="0"
|
|
x2="0"
|
|
y2="1"
|
|
>
|
|
<stop
|
|
offset="0%"
|
|
stopColor="#335CFF"
|
|
stopOpacity={0.12}
|
|
/>
|
|
<stop
|
|
offset="95%"
|
|
stopColor="#335CFF"
|
|
stopOpacity={0}
|
|
/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid
|
|
vertical={false}
|
|
strokeDasharray="5 2"
|
|
stroke="var(--stroke-soft-200)"
|
|
strokeOpacity={0.5}
|
|
/>
|
|
<XAxis
|
|
dataKey="name"
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tick={{
|
|
fontSize: "0.875rem",
|
|
fill: "var(--text-soft-400)",
|
|
}}
|
|
height={32}
|
|
dy={8}
|
|
/>
|
|
<YAxis
|
|
tickFormatter={formatterYAxis}
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tick={{
|
|
fontSize: "0.875rem",
|
|
fill: "var(--text-soft-400)",
|
|
}}
|
|
/>
|
|
<Tooltip
|
|
content={<CustomTooltip payload={[]} />}
|
|
cursor={{
|
|
stroke: "var(--strong-950)",
|
|
strokeDasharray: "5 5",
|
|
}}
|
|
/>
|
|
<Area
|
|
type="linear"
|
|
dataKey="tp"
|
|
stroke="#335CFF"
|
|
strokeWidth={2}
|
|
fillOpacity={1}
|
|
fill="url(#color)"
|
|
dot={false}
|
|
activeDot={{
|
|
r: 5,
|
|
fill: "var(--strong-950)",
|
|
stroke: "var(--white-0)",
|
|
strokeWidth: 2,
|
|
}}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Chart;
|