From ba6defa87ccdf0acd1eaa7b2fdf2ecfb0619a234 Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Fri, 21 Nov 2025 06:03:34 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Add=20request=20by=20day=20chart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../auditLogs/queryRequestAnalytics.ts        |  1 +
 src/components/LogAnalyticsData.tsx           | 52 ++++---------------
 src/components/ui/chart.tsx                   | 20 +++++--
 3 files changed, 28 insertions(+), 45 deletions(-)

diff --git a/server/routers/auditLogs/queryRequestAnalytics.ts b/server/routers/auditLogs/queryRequestAnalytics.ts
index adf5db4a..796ec5ed 100644
--- a/server/routers/auditLogs/queryRequestAnalytics.ts
+++ b/server/routers/auditLogs/queryRequestAnalytics.ts
@@ -121,6 +121,7 @@ async function query(query: Q) {
             totalCount: sql<number>`COUNT(*)`.as("total_count")
         })
         .from(requestAuditLog)
+        .where(and(baseConditions))
         .groupBy(groupByDayFunction)
         .orderBy(groupByDayFunction);
 
diff --git a/src/components/LogAnalyticsData.tsx b/src/components/LogAnalyticsData.tsx
index 9cc980b9..8c4b9566 100644
--- a/src/components/LogAnalyticsData.tsx
+++ b/src/components/LogAnalyticsData.tsx
@@ -347,6 +347,9 @@ function RequestChart(props: RequestChartProps) {
     });
 
     const chartConfig = {
+        day: {
+            label: t("requestsByDay")
+        },
         blockedCount: {
             label: t("blocked"),
             color: "var(--chart-5)"
@@ -367,49 +370,14 @@ function RequestChart(props: RequestChartProps) {
                 <ChartTooltip
                     content={
                         <ChartTooltipContent
-                            hideLabel
-                            formatter={(value, name, item, index) => {
+                            indicator="dot"
+                            labelFormatter={(value, payload) => {
                                 const formattedDate = new Date(
-                                    item.payload.day
+                                    payload[0].payload.day
                                 ).toLocaleDateString(navigator.language, {
                                     dateStyle: "medium"
                                 });
-
-                                const value_str = numberFormatter.format(
-                                    value as number
-                                );
-
-                                const config =
-                                    chartConfig[
-                                        name as keyof typeof chartConfig
-                                    ];
-
-                                return (
-                                    <div className="flex gap-2 items-start text-sm flex-col w-full">
-                                        {index === 0 && (
-                                            <span>{formattedDate}</span>
-                                        )}
-
-                                        <div className="ml-auto flex items-baseline justify-between gap-4 self-stretch w-full font-mono font-medium tabular-nums text-card-foreground text-xs">
-                                            <div className="flex gap-1 items-center">
-                                                <div
-                                                    className="size-2.5 flex-none rounded-[2px] bg-(--color-bg)"
-                                                    style={
-                                                        {
-                                                            "--color-bg": `var(--color-${name})`
-                                                        } as React.CSSProperties
-                                                    }
-                                                />
-                                                <span className="text-muted-foreground">
-                                                    {config.label}
-                                                </span>
-                                            </div>
-                                            <div className="flex gap-0.5">
-                                                <span>{value_str}</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                );
+                                return formattedDate;
                             }}
                         />
                     }
@@ -486,13 +454,15 @@ function RequestChart(props: RequestChartProps) {
                 <Area
                     dataKey="allowedCount"
                     stroke="var(--color-allowedCount)"
-                    fill="url(#fillAllowed)"
+                    strokeWidth={2}
+                    fill="transparent"
                     radius={4}
                 />
                 <Area
                     dataKey="blockedCount"
                     stroke="var(--color-blockedCount)"
-                    fill="url(#fillBlocked)"
+                    strokeWidth={2}
+                    fill="transparent"
                     radius={4}
                 />
             </AreaChart>
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 76f339f0..58d6a270 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -180,7 +180,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-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
                     className
                 )}
             >
@@ -190,6 +190,7 @@ const ChartTooltipContent = React.forwardRef<
                         .filter((item) => item.type !== "none")
                         .map((item, index) => {
                             const key = `${nameKey || item.name || item.dataKey || "value"}`;
+
                             const itemConfig = getPayloadConfigFromPayload(
                                 config,
                                 item,
@@ -224,7 +225,7 @@ const ChartTooltipContent = React.forwardRef<
                                                 !hideIndicator && (
                                                     <div
                                                         className={cn(
-                                                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                                                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                                                             {
                                                                 "h-2.5 w-2.5":
                                                                     indicator ===
@@ -254,7 +255,7 @@ const ChartTooltipContent = React.forwardRef<
                                             )}
                                             <div
                                                 className={cn(
-                                                    "flex flex-1 justify-between leading-none",
+                                                    "flex flex-1 justify-between leading-none gap-2",
                                                     nestLabel
                                                         ? "items-end"
                                                         : "items-center"
@@ -271,7 +272,18 @@ const ChartTooltipContent = React.forwardRef<
                                                 </div>
                                                 {item.value && (
                                                     <span className="font-mono font-medium tabular-nums text-foreground">
-                                                        {item.value.toLocaleString()}
+                                                        {!isNaN(
+                                                            item.value as number
+                                                        )
+                                                            ? new Intl.NumberFormat(
+                                                                  navigator.language,
+                                                                  {
+                                                                      maximumFractionDigits: 0
+                                                                  }
+                                                              ).format(
+                                                                  item.value as number
+                                                              )
+                                                            : item.value.toLocaleString()}
                                                     </span>
                                                 )}
                                             </div>