feat(FE-316): Add Uniformity page components

2026-05-24 15:25:46 +00:00 · 2025-12-23 16:09:29 +07:00
parent 035482accc
commit 398282b3bf
4 changed files with 365 additions and 0 deletions
@@ -0,0 +1,164 @@
+import {
+  Bar,
+  BarChart,
+  Rectangle,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import Card from '@/components/Card';
+
+interface Payload {
+  value?: number;
+  name?: string;
+  dataKey?: string | number;
+}
+
+interface CustomTooltipProps {
+  active?: boolean;
+  payload?: readonly Payload[];
+  label?: string | number;
+}
+
+const UniformityChart = () => {
+  // #region Sample data
+  const data = [
+    {
+      name: '48-52',
+      uv: 80,
+    },
+    {
+      name: '52-56',
+      uv: 120,
+    },
+    {
+      name: '56-60',
+      uv: 160,
+    },
+    {
+      name: '60-64',
+      uv: 200,
+    },
+    {
+      name: '64-68',
+      uv: 160,
+    },
+    {
+      name: '68-72',
+      uv: 120,
+    },
+    {
+      name: '72-76',
+      uv: 80,
+    },
+    {
+      name: '76-80',
+      uv: 120,
+    },
+    {
+      name: '84-88',
+      uv: 160,
+    },
+    {
+      name: '88-92',
+      uv: 200,
+    },
+    {
+      name: '92-96',
+      uv: 160,
+    },
+  ];
+
+  const margin = {
+    top: 20,
+    right: 30,
+    left: 20,
+    bottom: 5,
+  };
+  // #endregion
+
+  function getIntroOfPage(label: string): string {
+    if (label === 'Page A') {
+      return "Page A is about men's clothing";
+    }
+    if (label === 'Page B') {
+      return "Page B is about women's dress";
+    }
+    if (label === 'Page C') {
+      return "Page C is about women's bag";
+    }
+    if (label === 'Page D') {
+      return 'Page D is about household goods';
+    }
+    if (label === 'Page E') {
+      return 'Page E is about food';
+    }
+    if (label === 'Page F') {
+      return 'Page F is about baby food';
+    }
+    return '';
+  }
+
+  function CustomTooltip({ payload, label, active }: CustomTooltipProps) {
+    if (active && payload && payload.length && label !== undefined) {
+      const labelStr = String(label);
+      return (
+        <div className='border border-[#d88488] bg-white p-2.5 rounded shadow-sm'>
+          <p className='m-0 font-bold'>{`${labelStr} : ${payload[0].value}`}</p>
+          <p className='m-0'>{getIntroOfPage(labelStr)}</p>
+          <p className='m-0 border-t border-dashed border-[#f5f5f5]'>
+            Anything you want can be displayed here.
+          </p>
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  return (
+    <section className='w-full grid grid-cols-1 xl:grid-cols-4 gap-4'>
+      <Card
+        title='Performance Overview'
+        variant='bordered'
+        className={{ wrapper: 'xl:col-span-3 w-full', body: 'h-96' }}
+      >
+        <div className='w-full h-full flex items-center justify-center'>
+          <ResponsiveContainer width='100%' height={300}>
+            <BarChart data={data} margin={margin} barGap={20}>
+              <XAxis dataKey='name' />
+              <YAxis />
+              <Tooltip content={CustomTooltip} />
+              <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>
+        </div>
+      </Card>
+      <Card
+        variant='bordered'
+        title='Weekly Performance'
+        className={{ wrapper: 'xl:col-span-1 w-full' }}
+      >
+        <div className='h-80 flex items-center justify-center text-gray-400'>
+          Weekly Performance Content
+        </div>
+      </Card>
+    </section>
+  );
+};
+
+export default UniformityChart;