From b57a0fcc9066877bbd4f8768428ea811c958422b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 24 Dec 2025 11:44:29 +0700
Subject: [PATCH] feat(FE-316): Add gradient fill and refine bar chart axes

---
 .../uniformity/chart/UniformityBarChart.tsx   | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/uniformity/chart/UniformityBarChart.tsx b/src/components/pages/uniformity/chart/UniformityBarChart.tsx
index 4dc80835..e44388c1 100644
--- a/src/components/pages/uniformity/chart/UniformityBarChart.tsx
+++ b/src/components/pages/uniformity/chart/UniformityBarChart.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Bar,
   BarChart,
-  Legend,
+  CartesianGrid,
   Rectangle,
   ResponsiveContainer,
   Tooltip,
@@ -66,8 +66,17 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
       className='min-h-[300px] xl:min-h-[350px]'
     >
       <BarChart data={data} margin={margin} barGap={20}>
+        <defs>
+          <linearGradient id='activeBarGradient' x1='0' y1='0' x2='0' y2='1'>
+            <stop offset='0%' stopColor='#0069E0' stopOpacity={0.01} />
+            <stop offset='40%' stopColor='#0069E0' stopOpacity={1} />
+            <stop offset='100%' stopColor='#0069E0' stopOpacity={1} />
+          </linearGradient>
+        </defs>
         <XAxis
           dataKey='name'
+          axisLine={false}
+          tickLine={false}
           label={{
             value: 'Body Weight Range',
             position: 'insideBottom',
@@ -76,6 +85,8 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
           }}
         />
         <YAxis
+          axisLine={false}
+          tickLine={false}
           label={{
             value: 'Number of Birds',
             angle: -90,
@@ -89,6 +100,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
             width: '200px',
           }}
         />
+        <CartesianGrid vertical={false} />
         <Bar
           name='Birds'
           dataKey='uv'
@@ -98,8 +110,9 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
           radius={[25, 25, 0, 0]}
           activeBar={
             <Rectangle
-              fill='#0069E0'
-              stroke='#0069E0'
+              fill='url(#activeBarGradient)'
+              stroke='#18181B'
+              strokeWidth={0}
               radius={[25, 25, 0, 0]}
             />
           }