55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
|
import React from "react";
|
||
|
|
import {
|
||
|
|
PieChart,
|
||
|
|
Pie,
|
||
|
|
Cell,
|
||
|
|
ResponsiveContainer,
|
||
|
|
} from "recharts";
|
||
|
|
|
||
|
|
interface GaugeProps {
|
||
|
|
value: number;
|
||
|
|
color: string;
|
||
|
|
label: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Gauge: React.FC<GaugeProps> = ({ value, color, label }) => {
|
||
|
|
const data = [{ value: value }, { value: 100 - value }];
|
||
|
|
return (
|
||
|
|
<div className="bg-white p-8 rounded-3xl border border-slate-100">
|
||
|
|
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-6">
|
||
|
|
{label}
|
||
|
|
</h4>
|
||
|
|
<div className="w-full h-40 relative">
|
||
|
|
<ResponsiveContainer width="100%" height="100%">
|
||
|
|
<PieChart>
|
||
|
|
<Pie
|
||
|
|
data={data}
|
||
|
|
startAngle={180}
|
||
|
|
endAngle={0}
|
||
|
|
innerRadius={55}
|
||
|
|
outerRadius={75}
|
||
|
|
paddingAngle={0}
|
||
|
|
dataKey="value"
|
||
|
|
stroke="none"
|
||
|
|
>
|
||
|
|
<Cell fill={color} />
|
||
|
|
<Cell fill="#f1f5f9" />
|
||
|
|
</Pie>
|
||
|
|
</PieChart>
|
||
|
|
</ResponsiveContainer>
|
||
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center pt-10">
|
||
|
|
<span className="text-3xl font-black text-[#002147]">{value}%</span>
|
||
|
|
<span className="text-[10px] font-bold text-slate-400 uppercase">
|
||
|
|
Meta
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Gauge;
|
||
|
|
|
||
|
|
|
||
|
|
|