dashboard: add dark mode

apps/dashboard/src/components/report/chart/ChartAnimation.tsx

@@ -25,7 +25,7 @@ export const ChartAnimationContainer = (
   <div
     {...props}
     className={cn(
-      'rounded-md border border-border bg-white p-8',
+      'rounded-md border border-border bg-background p-8',
       props.className
     )}
   />

apps/dashboard/src/components/report/chart/MetricCard.tsx

@@ -84,7 +84,10 @@ export function MetricCard({
         <div className="flex items-center justify-between gap-2">
           <div className="flex min-w-0 items-center gap-2 text-left font-medium">
             <ColorSquare>{serie.event.id}</ColorSquare>
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+            <span
+              role="heading"
+              className="overflow-hidden text-ellipsis whitespace-nowrap"
+            >
               {serie.name || serie.event.displayName || serie.event.name}
             </span>
           </div>

apps/dashboard/src/components/report/chart/ReportBarChart.tsx

@@ -39,9 +39,10 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
           <div
             key={serie.name}
             className={cn(
-              'relative flex w-full flex-1 items-center gap-4 overflow-hidden rounded px-2 py-3 even:bg-slate-50',
-              '[&_[role=progressbar]]:shadow-sm [&_[role=progressbar]]:even:bg-white',
-              isClickable && 'cursor-pointer hover:!bg-slate-100'
+              'relative flex w-full flex-1 items-center gap-4 overflow-hidden rounded px-2 py-3 even:bg-slate-50 dark:even:bg-slate-100',
+              '[&_[role=progressbar]]:shadow-sm [&_[role=progressbar]]:even:bg-background',
+              isClickable &&
+                'cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-50'
             )}
             {...(isClickable ? { onClick: () => onClick(serie) } : {})}
           >

apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx

@@ -39,7 +39,7 @@ export function ReportChartTooltip({
   const hidden = sorted.slice(limit);
 
   return (
-    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
+    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-background p-3 text-sm shadow-xl">
       {visible.map((item, index) => {
         // If we have a <Cell /> component, payload can be nested
         const payload = item.payload.payload ?? item.payload;

apps/dashboard/src/components/report/chart/ReportLineChart.tsx

@@ -50,6 +50,11 @@ export function ReportLineChart({
       <ResponsiveContainer>
         {({ width, height }) => (
           <LineChart width={width} height={height} data={rechartData}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              horizontal={true}
+              vertical={false}
+            />
             {references.map((ref) => (
               <ReferenceLine
                 key={ref.id}
@@ -65,11 +70,6 @@ export function ReportLineChart({
                 fontSize={10}
               />
             ))}
-            <CartesianGrid
-              strokeDasharray="3 3"
-              horizontal={true}
-              vertical={false}
-            />
             <YAxis
               width={getYAxisWidth(data.metrics.max)}
               fontSize={12}

apps/dashboard/src/components/report/chart/index.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { TriangleIcon } from 'lucide-react';
+
 import type { IChartInput } from '@openpanel/validation';
 
 import { Funnel } from '../funnel';
@@ -12,7 +15,18 @@ export const ChartSwitch = withChartProivder(function ChartSwitch(
   props: ReportChartProps
 ) {
   if (props.chartType === 'funnel') {
-    return <Funnel {...props} />;
+    return (
+      <>
+        <Alert>
+          <TriangleIcon className="h-4 w-4" />
+          <AlertTitle>Keep in mind</AlertTitle>
+          <AlertDescription>
+            Funnel chart is still experimental and might not work as expected.
+          </AlertDescription>
+        </Alert>
+        <Funnel {...props} />
+      </>
+    );
   }
 
   return <Chart {...props} />;