mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-07 20:19:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

✨Add request by day chart

Browse Source
This commit is contained in:
Fred KISSIE
2025-11-21 06:03:34 +01:00
parent 887a0ef574
commit ba6defa87c
3 changed files with 28 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
server/routers/auditLogs/queryRequestAnalytics.ts
View File

@@ -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);

52
src/components/LogAnalyticsData.tsx
View File

@@ -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>

20
src/components/ui/chart.tsx
View File

@@ -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>