From 9d40aece30be28209a2c826c991aabdc648258dc Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@shootify.io>
Date: Mon, 24 Nov 2025 18:42:13 +0100
Subject: [PATCH] Refactor chart components for improved formatting and import
 optimization

- Consolidated `recharts` imports for `BarChart`, `AreaChart`, and `LineChart` components.
- Reformatted inline styles for tooltips and axis elements to enhance readability and maintain consistency.
- Applied minor cleanups for improved project code styling.
---
 .../charts/OrganizationDistributionChart.tsx  | 30 ++++++++--------
 .../charts/RegistrationActivityChart.tsx      | 34 +++++++++++--------
 .../src/components/charts/UserGrowthChart.tsx | 31 ++++++++++++-----
 3 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/charts/OrganizationDistributionChart.tsx b/frontend/src/components/charts/OrganizationDistributionChart.tsx
index f0a280a..3f283a1 100644
--- a/frontend/src/components/charts/OrganizationDistributionChart.tsx
+++ b/frontend/src/components/charts/OrganizationDistributionChart.tsx
@@ -5,17 +5,7 @@
 
 'use client';
 
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-  Rectangle,
-} from 'recharts';
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import { ChartCard } from './ChartCard';
 import { CHART_PALETTES } from '@/lib/chart-colors';
 
@@ -44,11 +34,21 @@ const CustomTooltip = ({ active, payload }: any) => {
           backdropFilter: 'blur(8px)',
         }}
       >
-        <p style={{ color: 'hsl(var(--popover-foreground))', margin: 0, fontSize: '14px', fontWeight: 600 }}>
+        <p
+          style={{
+            color: 'hsl(var(--popover-foreground))',
+            margin: 0,
+            fontSize: '14px',
+            fontWeight: 600,
+          }}
+        >
           {payload[0].payload.name}
         </p>
         <p style={{ color: 'hsl(var(--muted-foreground))', margin: '4px 0 0 0', fontSize: '13px' }}>
-          Members: <span style={{ fontWeight: 600, color: 'hsl(var(--popover-foreground))' }}>{payload[0].value}</span>
+          Members:{' '}
+          <span style={{ fontWeight: 600, color: 'hsl(var(--popover-foreground))' }}>
+            {payload[0].value}
+          </span>
         </p>
       </div>
     );
@@ -86,9 +86,7 @@ export function OrganizationDistributionChart({
               textAnchor="end"
               style={{ fill: 'var(--muted-foreground)', fontSize: '12px' }}
             />
-            <YAxis
-              style={{ fill: 'var(--muted-foreground)', fontSize: '12px' }}
-            />
+            <YAxis style={{ fill: 'var(--muted-foreground)', fontSize: '12px' }} />
             <Tooltip content={<CustomTooltip />} />
             <Bar
               dataKey="value"
diff --git a/frontend/src/components/charts/RegistrationActivityChart.tsx b/frontend/src/components/charts/RegistrationActivityChart.tsx
index 3d36a18..c30fb34 100644
--- a/frontend/src/components/charts/RegistrationActivityChart.tsx
+++ b/frontend/src/components/charts/RegistrationActivityChart.tsx
@@ -6,14 +6,14 @@
 'use client';
 
 import {
-  AreaChart,
   Area,
+  AreaChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
 } from 'recharts';
 import { ChartCard } from './ChartCard';
 import { CHART_PALETTES } from '@/lib/chart-colors';
@@ -29,7 +29,7 @@ interface RegistrationActivityChartProps {
   error?: string | null;
 }
 
-// Custom tooltip with proper theme colors  
+// Custom tooltip with proper theme colors
 const CustomTooltip = ({ active, payload }: any) => {
   if (active && payload && payload.length) {
     return (
@@ -41,10 +41,19 @@ const CustomTooltip = ({ active, payload }: any) => {
           padding: '8px 12px',
         }}
       >
-        <p style={{ color: 'hsl(var(--popover-foreground))', margin: 0, fontSize: '13px', fontWeight: 600 }}>
+        <p
+          style={{
+            color: 'hsl(var(--popover-foreground))',
+            margin: 0,
+            fontSize: '13px',
+            fontWeight: 600,
+          }}
+        >
           {payload[0].payload.date}
         </p>
-        <p style={{ color: 'hsl(var(--popover-foreground))', margin: '4px 0 0 0', fontSize: '12px' }}>
+        <p
+          style={{ color: 'hsl(var(--popover-foreground))', margin: '4px 0 0 0', fontSize: '12px' }}
+        >
           New Registrations: {payload[0].value}
         </p>
       </div>
@@ -83,13 +92,8 @@ export function RegistrationActivityChart({
               </linearGradient>
             </defs>
             <CartesianGrid strokeDasharray="3 3" style={{ stroke: 'var(--muted)', opacity: 0.2 }} />
-            <XAxis
-              dataKey="date"
-              style={{ fill: 'var(--muted-foreground)', fontSize: '12px' }}
-            />
-            <YAxis
-              style={{ fill: 'var(--muted-foreground)', fontSize: '12px' }}
-            />
+            <XAxis dataKey="date" style={{ fill: 'var(--muted-foreground)', fontSize: '12px' }} />
+            <YAxis style={{ fill: 'var(--muted-foreground)', fontSize: '12px' }} />
             <Tooltip content={<CustomTooltip />} />
             <Legend
               wrapperStyle={{
diff --git a/frontend/src/components/charts/UserGrowthChart.tsx b/frontend/src/components/charts/UserGrowthChart.tsx
index 27929dc..40fe2c7 100644
--- a/frontend/src/components/charts/UserGrowthChart.tsx
+++ b/frontend/src/components/charts/UserGrowthChart.tsx
@@ -8,14 +8,14 @@
 import { ChartCard } from './ChartCard';
 import { CHART_PALETTES } from '@/lib/chart-colors';
 import {
-  ResponsiveContainer,
-  LineChart,
+  CartesianGrid,
+  Legend,
   Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
 } from 'recharts';
 
 export interface UserGrowthData {
@@ -42,14 +42,29 @@ const CustomTooltip = ({ active, payload }: any) => {
           padding: '8px 12px',
         }}
       >
-        <p style={{ color: 'hsl(var(--popover-foreground))', margin: 0, fontSize: '13px', fontWeight: 600 }}>
+        <p
+          style={{
+            color: 'hsl(var(--popover-foreground))',
+            margin: 0,
+            fontSize: '13px',
+            fontWeight: 600,
+          }}
+        >
           {payload[0].payload.date}
         </p>
-        <p style={{ color: 'hsl(var(--popover-foreground))', margin: '4px 0 0 0', fontSize: '12px' }}>
+        <p
+          style={{ color: 'hsl(var(--popover-foreground))', margin: '4px 0 0 0', fontSize: '12px' }}
+        >
           Total Users: {payload[0].value}
         </p>
         {payload[1] && (
-          <p style={{ color: 'hsl(var(--popover-foreground))', margin: '2px 0 0 0', fontSize: '12px' }}>
+          <p
+            style={{
+              color: 'hsl(var(--popover-foreground))',
+              margin: '2px 0 0 0',
+              fontSize: '12px',
+            }}
+          >
             Active Users: {payload[1].value}
           </p>
         )}