refactor(FE-316): Extract Uniformity charts into components

2026-05-25 07:45:47 +00:00 · 2025-12-23 18:52:05 +07:00
parent 5dd64b9907
commit 0774200aa5
3 changed files with 230 additions and 171 deletions
@@ -0,0 +1,91 @@
+import React from 'react';
+import {
+  Bar,
+  BarChart,
+  Rectangle,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+interface Payload {
+  value?: number;
+  name?: string;
+  dataKey?: string | number;
+}
+
+interface CustomTooltipProps {
+  active?: boolean;
+  payload?: readonly Payload[];
+  label?: string | number;
+}
+
+interface BarChartData {
+  name: string;
+  uv: number;
+}
+
+interface UniformityBarChartProps {
+  data: BarChartData[];
+}
+
+function CustomTooltip({ payload, label, active }: CustomTooltipProps) {
+  if (active && payload && payload.length && label !== undefined) {
+    const labelStr = String(label);
+    return (
+      <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
+        <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
+        <div className='flex items-center gap-2 mt-2 justify-between'>
+          <div className='flex items-center gap-2'>
+            <div className='w-5 h-5 bg-[#0069E0] rounded-md'></div>
+            {payload[0].value} of Birds
+          </div>
+          <span>{labelStr}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
+  const margin = {
+    top: 20,
+    right: 30,
+    left: 20,
+    bottom: 5,
+  };
+
+  return (
+    <ResponsiveContainer width='100%' height={300}>
+      <BarChart data={data} margin={margin} barGap={20}>
+        <XAxis dataKey='name' />
+        <YAxis />
+        <Tooltip
+          content={CustomTooltip}
+          wrapperStyle={{
+            width: '200px',
+          }}
+        />
+        <Bar
+          dataKey='uv'
+          fill='#FFFFFF'
+          stroke='#DDD'
+          strokeWidth={2}
+          radius={[25, 25, 0, 0]}
+          activeBar={
+            <Rectangle
+              fill='#0069E0'
+              stroke='#0069E0'
+              radius={[25, 25, 0, 0]}
+            />
+          }
+        />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default UniformityBarChart;