ui-v2 cleanup (#2701)

ui-v2/src/components/tiles/ChartTile.tsx

@@ -1,50 +1,53 @@
-import React from 'react';
+import { ReactElement, ReactNode } from 'react';
+
+import { BarChart, Bar, LineChart, Line, CartesianGrid, XAxis } from 'recharts';
+
 import { useTimelineStyles } from '../../hooks/useTimelineStyles.ts';
+
 import {
   ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart";
-import { BarChart, Bar, LineChart, Line, CartesianGrid, XAxis } from 'recharts';
+} from '@/components/ui/chart';
 
 interface ChartTileProps {
   title: string;
   value: string;
   trend?: string;
   data: number[];
-  icon: React.ReactNode;
+  icon: ReactNode;
   variant?: 'line' | 'bar';
   date?: Date;
 }
 
-export default function ChartTile({ 
-  title, 
-  value, 
-  trend, 
-  data, 
+export default function ChartTile({
+  title,
+  value,
+  trend,
+  data,
   icon,
   variant = 'line',
-  date 
-}: ChartTileProps) {
+  date,
+}: ChartTileProps): ReactElement {
   const { contentCardStyle } = useTimelineStyles(date);
-  
+
   // Convert the data array to the format expected by recharts
   const chartData = data.map((value, index) => ({
     value,
-    point: `P${index + 1}`
+    point: `P${index + 1}`,
   }));
 
   // Chart configuration with proper color variables
   const chartConfig = {
     value: {
       label: title,
-      color: variant === 'line' ? 'var(--chart-2)' : 'var(--chart-1)'
-    }
+      color: variant === 'line' ? 'var(--chart-2)' : 'var(--chart-1)',
+    },
   } satisfies ChartConfig;
 
   return (
-    <div 
+    <div
       className={`
         flex flex-col justify-between
         w-[320px] min-h-[380px] 
@@ -59,30 +62,30 @@ export default function ChartTile({
     >
       {/* Header section with icon */}
       <div className="p-4 space-y-4">
-        <div className="w-6 h-6 text-text-default dark:text-white">
-          {icon}
-        </div>
+        <div className="w-6 h-6 text-text-default dark:text-white">{icon}</div>
 
         <div>
           <div className="text-text-muted dark:text-white/60 text-sm mb-1">{title}</div>
           <div className="text-text-default dark:text-white text-2xl font-semibold">
             {value}
-            {trend && <span className="ml-1 text-sm text-text-muted dark:text-white/60">{trend}</span>}
+            {trend && (
+              <span className="ml-1 text-sm text-text-muted dark:text-white/60">{trend}</span>
+            )}
           </div>
         </div>
       </div>
 
       {/* Chart Container */}
       <div className="w-full h-[200px] px-4 pb-6">
-        <ChartContainer 
+        <ChartContainer
           config={chartConfig}
           className="[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-tooltip-wrapper]:!pointer-events-none"
         >
           {variant === 'line' ? (
-            <LineChart 
-              width={288} 
-              height={162} 
-              data={chartData} 
+            <LineChart
+              width={288}
+              height={162}
+              data={chartData}
               margin={{ top: 10, right: 10, bottom: 0, left: -20 }}
             >
               <CartesianGrid vertical={false} className="stroke-border/50" />
@@ -96,9 +99,7 @@ export default function ChartTile({
               />
               <ChartTooltip
                 content={
-                  <ChartTooltipContent 
-                    className="border-border/50 bg-background-default text-text-default min-w-[180px] [&_.flex.flex-1]:gap-4 [&_.flex.flex-1>span]:whitespace-nowrap"
-                  />
+                  <ChartTooltipContent className="border-border/50 bg-background-default text-text-default min-w-[180px] [&_.flex.flex-1]:gap-4 [&_.flex.flex-1>span]:whitespace-nowrap" />
                 }
               />
               <Line
@@ -110,10 +111,10 @@ export default function ChartTile({
               />
             </LineChart>
           ) : (
-            <BarChart 
-              width={288} 
-              height={162} 
-              data={chartData} 
+            <BarChart
+              width={288}
+              height={162}
+              data={chartData}
               margin={{ top: 10, right: 10, bottom: 0, left: 10 }}
             >
               <CartesianGrid vertical={false} className="stroke-border/50" />
@@ -129,18 +130,13 @@ export default function ChartTile({
               <ChartTooltip
                 cursor={false}
                 content={
-                  <ChartTooltipContent 
+                  <ChartTooltipContent
                     indicator="dashed"
                     className="border-border/50 bg-background-default text-text-default min-w-[180px] [&_.flex.flex-1]:gap-4 [&_.flex.flex-1>span]:whitespace-nowrap"
                   />
                 }
               />
-              <Bar
-                dataKey="value"
-                fill="var(--chart-1)"
-                radius={4}
-                maxBarSize={32}
-              />
+              <Bar dataKey="value" fill="var(--chart-1)" radius={4} maxBarSize={32} />
             </BarChart>
           )}
         </ChartContainer>