Add PieChart Component and Adjust Design for Responsiveness, Remove Dark Mode Toggle (#66)

* ✨ feat: integrate owned cards management and enhance user experience in collection overview

* ✨ feat: add percentage bar chart and enhance overview with owned cards data

* ✨ feat: refactor PercentageBarChart component for improved readability and maintainability

* ✨ feat: rename PercentageBarChart to BarChart and add footer support; introduce new PieChart component

* ✨ feat: enhance BarChart and PieChart components with improved styling and animations; update Overview layout for better visual consistency

* ✨ feat: temporarily disable ModeToggle component

* ✨ feat: redesign Overview page layout for logout users

Author: RubenJavierBachoAlarcon

frontend/src/components/BarChart.tsx

@@ -0,0 +1,71 @@
+'use client'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { Bar, BarChart, CartesianGrid } from 'recharts'
+
+//Example of a percentage bar chart configuration
+/* const chartData = [
+    { packName: "Pack1", percentage: 0.1, fill: "#FF5733" }, // Color aleatorio
+    { packName: "Pack2", percentage: 0.5, fill: "#33FF57" }, // Color aleatorio
+    { packName: "Pack3", percentage: 0.8, fill: "#3357FF" }, // Color aleatorio
+]
+
+const chartConfig = {
+    Pack1: {
+        label: "Pack 1",
+        color: "hsl(var(--chart-1))",
+    },
+    Pack2: {
+        label: "Pack 2",
+        color: "hsl(var(--chart-2))",
+    },
+    Pack3: {
+        label: "Pack 3",
+        color: "hsl(var(--chart-3))",
+    },
+} satisfies ChartConfig */
+
+interface PercentageBarChartProps {
+  data: { packName: string; percentage: number; fill: string }[]
+  config: ChartConfig
+  footer?: string
+}
+
+interface CustomTooltipContentProps {
+  payload: { value: number; key: string }[]
+  active: boolean
+}
+
+const CustomTooltipContent = (props: CustomTooltipContentProps) => {
+  const { payload, active } = props
+  if (active && payload && payload.length) {
+    const newPayload = payload.map((entry) => {
+      return {
+        ...entry,
+        value: `${entry.value * 100}%`,
+      }
+    })
+    return <ChartTooltipContent {...props} payload={newPayload} />
+  }
+  return null
+}
+
+export function BarChartComponent({ data, config, footer }: PercentageBarChartProps) {
+  return (
+    <Card className="border-2 border-solid border-gray-500 rounded-4xl">
+      <CardHeader className="text-center text-balance">
+        <CardTitle>Probability getting new card</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={config}>
+          <BarChart accessibilityLayer data={data}>
+            <CartesianGrid vertical={false} />
+            <ChartTooltip cursor={false} content={<CustomTooltipContent payload={[]} active={false} />} />
+            <Bar dataKey="percentage" strokeWidth={2} radius={8} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col flex-1 items-center gap-2">{footer}</CardFooter>
+    </Card>
+  )
+}

frontend/src/components/PieChart.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import { Label, Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+
+interface PieChartComponentProps {
+  data: { packName: string; percentage: number; fill: string }[]
+  config: ChartConfig
+  title?: string
+  description?: string
+  footer?: string
+}
+
+export function PieChartComponent({ data, config, title, description, footer }: PieChartComponentProps) {
+  const totalPercentage = React.useMemo(() => {
+    return data.reduce((acc, curr) => acc + curr.percentage, 0)
+  }, [data])
+
+  return (
+    <Card className="flex flex-col h-full border-2 border-solid border-gray-500 rounded-4xl">
+      <CardHeader className="items-center pb-0 text-balance text-center">
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer config={config} className="mx-auto aspect-square max-h-[250px]">
+          <PieChart>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Pie data={data} dataKey="percentage" nameKey="packName" innerRadius={60} strokeWidth={5}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                    return (
+                      <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                        <tspan x={viewBox.cx} y={viewBox.cy} className="fill-white text-3xl font-bold">
+                          {totalPercentage.toLocaleString()}
+                        </tspan>
+                        <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-white">
+                          Cards
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">{footer}</div>
+      </CardFooter>
+    </Card>
+  )
+}

frontend/src/components/ui/Header.tsx

@@ -1,4 +1,3 @@
-import { ModeToggle } from '@/components/mode-toggle'
 import { Button } from '@/components/ui/button'
 import { NavigationMenu, NavigationMenuLink, NavigationMenuList } from '@/components/ui/navigation-menu'
 
@@ -100,7 +99,7 @@ export const Header: FC<Props> = ({ user, setUser }) => (
           </Dialog>
         )}
 
-        <ModeToggle />
+        {/* <ModeToggle /> */}
       </div>
     </header>
   </>

frontend/src/components/ui/card.tsx

@@ -3,14 +3,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
-      className,
-    )}
-    {...props}
-  />
+  <div ref={ref} className={cn('rounded-xl border bg-white text-neutral-950 shadow dark:bg-neutral-950 dark:text-neutral-50', className)} {...props} />
 ))
 Card.displayName = 'Card'
 
@@ -30,7 +23,7 @@ const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
 CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  <div ref={ref} className={cn('p-6 pt-0 content-center', className)} {...props} />
 ))
 CardContent.displayName = 'CardContent'
 

frontend/src/components/ui/chart.tsx

@@ -45,7 +45,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-square justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-white/70 [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className,
         )}
         {...props}
@@ -179,16 +179,16 @@ const ChartTooltipContent = React.forwardRef<
                     ) : (
                       !hideIndicator && (
                         <div
-                          className={cn('shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]', {
+                          className={cn('shrink-0 rounded-[2px] bg-[var(--color-bg)] border-[var(--color-border)]', {
                             'h-2.5 w-2.5': indicator === 'dot',
                             'w-1': indicator === 'line',
                             'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
                             'my-0.5': nestLabel && indicator === 'dashed',
                           })}
                           style={
                             {
-                              '--color-bg': indicatorColor,
-                              '--color-border': indicatorColor,
+                              '--color-bg': indicatorColor || '#EDC12A',
+                              '--color-border': indicatorColor || '#EDC12A',
                             } as React.CSSProperties
                           }
                         />

frontend/src/index.css

@@ -6,9 +6,27 @@
 @layer base {
   :root {
     --radius: 0.5rem;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   }
+
   .dark body {
     background-color: #000;
     color: #fff;
   }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in-up {
+    animation: fadeInUp 0.4s ease-out;
+  }
 }