ui-v2: match tile / chart designs (#2633)

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

@@ -1,7 +1,12 @@
 import React from 'react';
 import { useTimelineStyles } from '../../hooks/useTimelineStyles.ts';
-import { ChartConfig, ChartContainer } from "@/components/ui/chart.tsx";
-import { BarChart, Bar, LineChart, Line, ResponsiveContainer, Tooltip } from 'recharts';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { BarChart, Bar, LineChart, Line, CartesianGrid, XAxis, ResponsiveContainer } from 'recharts';
 
 interface ChartTileProps {
   title: string;
@@ -27,17 +32,14 @@ export default function ChartTile({
   // Convert the data array to the format expected by recharts
   const chartData = data.map((value, index) => ({
     value,
-    index: `Point ${index + 1}`
+    point: `P${index + 1}`
   }));
 
-  // Chart configuration
+  // Chart configuration with proper color variables
   const chartConfig = {
     value: {
       label: title,
-      theme: {
-        light: variant === 'line' ? '#0B54DE' : '#4CAF50',
-        dark: variant === 'line' ? '#00CAF7' : '#4CAF50'
-      }
+      color: variant === 'line' ? 'var(--chart-2)' : 'var(--chart-1)'
     }
   } satisfies ChartConfig;
 
@@ -45,54 +47,94 @@ export default function ChartTile({
     <div 
       className={`
         flex flex-col justify-between
-        w-[320px] h-[380px] 
+        w-[320px] min-h-[380px] 
         ${contentCardStyle}
         rounded-[18px]
         relative
         overflow-hidden
         transition-all duration-200
         hover:scale-[1.02]
+        bg-background-default text-text-default
       `}
     >
       {/* Header section with icon */}
       <div className="p-4 space-y-4">
-        <div className="w-6 h-6">
+        <div className="w-6 h-6 text-text-default">
           {icon}
         </div>
 
         <div>
-          <div className="text-gray-600 dark:text-white/40 text-sm mb-1">{title}</div>
-          <div className="text-gray-900 dark:text-white text-2xl font-semibold">
+          <div className="text-text-muted text-sm mb-1">{title}</div>
+          <div className="text-text-default text-2xl font-semibold">
             {value}
-            {trend && <span className="ml-1 text-sm">{trend}</span>}
+            {trend && <span className="ml-1 text-sm text-text-muted">{trend}</span>}
           </div>
         </div>
       </div>
 
       {/* Chart Container */}
-      <div className="w-full h-[160px] px-4">
-        <ChartContainer config={chartConfig}>
-          {variant === 'line' ? (
-            <LineChart data={chartData}>
-              <Line
-                type="monotone"
-                dataKey="value"
-                stroke="var(--color-value)"
-                strokeWidth={2}
-                dot={{ fill: 'var(--color-value)', r: 4 }}
-              />
-              <Tooltip />
-            </LineChart>
-          ) : (
-            <BarChart data={chartData}>
-              <Bar
-                dataKey="value"
-                fill="var(--color-value)"
-                radius={[4, 4, 0, 0]}
-              />
-              <Tooltip />
-            </BarChart>
-          )}
+      <div className="w-full h-[200px] px-4 pb-6">
+        <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"
+        >
+          <ResponsiveContainer width="100%" height="100%">
+            {variant === 'line' ? (
+              <LineChart data={chartData} margin={{ top: 10, right: 10, bottom: 0, left: -20 }}>
+                <CartesianGrid vertical={false} className="stroke-border/50" />
+                <XAxis
+                  dataKey="point"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  height={40}
+                  tick={{ fill: 'var(--text-muted)' }}
+                />
+                <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"
+                    />
+                  }
+                />
+                <Line
+                  type="monotone"
+                  dataKey="value"
+                  stroke="var(--chart-2)"
+                  strokeWidth={2}
+                  dot={{ fill: 'var(--chart-2)', r: 4 }}
+                />
+              </LineChart>
+            ) : (
+              <BarChart data={chartData} margin={{ top: 10, right: 10, bottom: 0, left: 10 }}>
+                <CartesianGrid vertical={false} className="stroke-border/50" />
+                <XAxis
+                  dataKey="point"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  height={40}
+                  tick={{ fill: 'var(--text-muted)' }}
+                  interval={0}
+                />
+                <ChartTooltip
+                  cursor={false}
+                  content={
+                    <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}
+                />
+              </BarChart>
+            )}
+          </ResponsiveContainer>
         </ChartContainer>
       </div>
     </div>