Merge branch 'main' into cloudflare

app/[locale]/(main)/ClientComponents/NetworkChart.tsx

@@ -246,12 +246,12 @@ export function NetworkChart({
               tickFormatter={(value) => `${value}ms`}
             />
             <ChartTooltip
+              cursor={false}
+              defaultIndex={1}
               content={
                 <ChartTooltipContent
-                  indicator={"dot"}
+                  indicator={"line"}
-                  className="gap-2"
                   labelKey="created_at"
-                  labelClassName="text-muted-foreground"
                   labelFormatter={(_, payload) => {
                     return formatTime(payload[0].payload.created_at);
                   }}

components/ui/chart.tsx

@@ -178,7 +178,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          "grid min-w-[8rem] items-start gap-1.5 rounded-sm border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
           className,
         )}
       >
@@ -238,8 +238,15 @@ const ChartTooltipContent = React.forwardRef<
                         </span>
                       </div>
                       {item.value && (
-                        <span className="ml-2 font-mono font-medium tabular-nums text-foreground">
+                        <span
-                          {item.value.toLocaleString()}
+                          className={cn(
+                            "ml-2 font-mono font-medium tabular-nums text-foreground",
+                            payload.length === 1 && "-ml-9",
+                          )}
+                        >
+                          {typeof item.value === "number"
+                            ? item.value.toFixed(3).toLocaleString()
+                            : item.value}
                         </span>
                       )}
                     </div>

lib/utils.ts

@@ -103,7 +103,7 @@ export function formatTime(timestamp: number): string {
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
   const day = date.getDate();
-  const hours = date.getHours();
+  const hours = date.getHours().toString().padStart(2, "0");
   const minutes = date.getMinutes().toString().padStart(2, "0");
   const seconds = date.getSeconds().toString().padStart(2, "0");
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;