From 5ef444f8183603fbea9c24bdeebac25e4900bdc8 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sat, 12 Oct 2024 22:23:55 +0800
Subject: [PATCH] style: ChartTooltip

---
 .../(main)/ClientComponents/NetworkChart.tsx        |  6 +++---
 components/ui/chart.tsx                             | 13 ++++++++++---
 lib/utils.ts                                        |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
index d39c257..0039331 100644
--- a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
+++ b/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"}
-                  className="gap-2"
+                  indicator={"line"}
                   labelKey="created_at"
-                  labelClassName="text-muted-foreground"
                   labelFormatter={(_, payload) => {
                     return formatTime(payload[0].payload.created_at);
                   }}
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
index 48b4d7e..0cc3d7f 100644
--- a/components/ui/chart.tsx
+++ b/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">
-                          {item.value.toLocaleString()}
+                        <span
+                          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>
diff --git a/lib/utils.ts b/lib/utils.ts
index 6df8955..a65328d 100644
--- a/lib/utils.ts
+++ b/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}`;