refactor(FE): Highlight ideal ranges in Uniformity charts

src/components/pages/production/uniformity/UniformityChart.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import Card from '@/components/Card';
 import UniformityBarChart from '@/components/pages/production/uniformity/chart/UniformityBarChart';
 import UniformityGaugeChart from '@/components/pages/production/uniformity/chart/UniformityGaugeChart';
 import UniformityBarChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton';
 import UniformityGaugeChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton';
+import { UniformityDetailItem } from '@/types/api/production/uniformity';
 
 interface BarChartData {
   name: string;
   uv: number;
+  isIdeal?: boolean;
 }
 
 interface GaugeChartData {
@@ -19,9 +21,18 @@ interface GaugeChartData {
   totalValue?: number;
 }
 
-const UniformityChart = () => {
+interface UniformityChartProps {
-  // TODO: Replace with actual API call
+  barChartData?: BarChartData[];
-  const barChartData: BarChartData[] = [
+  gaugeChartData?: GaugeChartData;
+  uniformityDetails?: UniformityDetailItem[];
+}
+
+const UniformityChart = ({
+  barChartData: initialBarChartData,
+  gaugeChartData: initialGaugeChartData,
+  uniformityDetails,
+}: UniformityChartProps) => {
+  const defaultBarChartData: BarChartData[] = [
     {
       name: '48-52',
       uv: 80,
@@ -68,16 +79,7 @@ const UniformityChart = () => {
     },
   ];
 
-  // TODO: Replace with actual API call
+  const defaultGaugeChartData: GaugeChartData = {
-  // const gaugeChartData: GaugeChartData = {
-  //   value: 0,
-  //   label: '',
-  //   week: 'Week 2',
-  //   currentValue: 512,
-  //   totalValue: 1024,
-  // };
-
-  const gaugeChartData: GaugeChartData = {
     value: 52,
     label: 'Uniformity',
     week: 'Week 2',
@@ -85,6 +87,48 @@ const UniformityChart = () => {
     totalValue: 1024,
   };
 
+  const defaultUniformityDetails: UniformityDetailItem[] = [
+    { id: 1, weight: 61, range: 'Ideal' },
+    { id: 2, weight: 62, range: 'Ideal' },
+    { id: 3, weight: 63, range: 'Ideal' },
+    { id: 4, weight: 64, range: 'Ideal' },
+    { id: 5, weight: 65, range: 'Ideal' },
+    { id: 6, weight: 66, range: 'Ideal' },
+    { id: 7, weight: 67, range: 'Ideal' },
+  ];
+
+  const detailsToUse = uniformityDetails || defaultUniformityDetails;
+
+  const barChartData = useMemo(() => {
+    const dataToProcess = initialBarChartData || defaultBarChartData;
+
+    if (!detailsToUse || detailsToUse.length === 0) {
+      return dataToProcess;
+    }
+
+    return dataToProcess.map((bar) => {
+      const rangeMatch = bar.name.match(/(\d+)-(\d+)/);
+      if (!rangeMatch) return bar;
+
+      const minWeight = parseInt(rangeMatch[1], 10);
+      const maxWeight = parseInt(rangeMatch[2], 10);
+
+      const hasIdealWeight = detailsToUse.some((detail) => {
+        const weight = detail.weight;
+        return (
+          detail.range === 'Ideal' && weight >= minWeight && weight <= maxWeight
+        );
+      });
+
+      return {
+        ...bar,
+        isIdeal: hasIdealWeight,
+      };
+    });
+  }, [initialBarChartData, detailsToUse]);
+
+  const gaugeChartData = initialGaugeChartData || defaultGaugeChartData;
+
   return (
     <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4'>
       <Card
@@ -103,7 +147,7 @@ const UniformityChart = () => {
           )}
         </div>
       </Card>
-      {gaugeChartData.value === 0 ? (
+      {gaugeChartData && gaugeChartData.value === 0 ? (
         <Card
           variant='bordered'
           title='Weekly Performance ⓘ'
@@ -114,7 +158,7 @@ const UniformityChart = () => {
         >
           <UniformityGaugeChartSkeleton />
         </Card>
-      ) : (
+      ) : gaugeChartData ? (
         <Card
           variant='bordered'
           title='Weekly Performance ⓘ'
@@ -131,7 +175,7 @@ const UniformityChart = () => {
             totalValue={gaugeChartData.totalValue}
           />
         </Card>
-      )}
+      ) : null}
     </section>
   );
 };

src/components/pages/production/uniformity/chart/UniformityBarChart.tsx

@@ -3,6 +3,7 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
+  Cell,
   Rectangle,
   ResponsiveContainer,
   Tooltip,
@@ -25,6 +26,7 @@ interface CustomTooltipProps {
 interface BarChartData {
   name: string;
   uv: number;
+  isIdeal?: boolean;
 }
 
 interface UniformityBarChartProps {
@@ -105,9 +107,6 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
         <Bar
           name='Birds'
           dataKey='uv'
-          fill='#FFFFFF'
-          stroke='#DDD'
-          strokeWidth={2}
           radius={[25, 25, 0, 0]}
           activeBar={
             <Rectangle
@@ -117,7 +116,16 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
               radius={[25, 25, 0, 0]}
             />
           }
-        />
+        >
+          {data.map((entry, index) => (
+            <Cell
+              key={`cell-${index}`}
+              fill={entry.isIdeal ? 'url(#activeBarGradient)' : '#FFFFFF'}
+              stroke={entry.isIdeal ? '#18181B' : '#DDD'}
+              strokeWidth={entry.isIdeal ? 0 : 2}
+            />
+          ))}
+        </Bar>
       </BarChart>
     </ResponsiveContainer>
   );