first commit
This commit is contained in:
Beyhan Oğur
219
ui/app/workspace/dashboard/components/charts/logVolumeChart.tsx
Normal file
219
ui/app/workspace/dashboard/components/charts/logVolumeChart.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
import type { LogsHistogramResponse } from "@/lib/types/logs";
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import {
|
||||
CHART_COLORS,
|
||||
formatFullTimestamp,
|
||||
formatTimestamp,
|
||||
} from "../../utils/chartUtils";
|
||||
import { ChartErrorBoundary } from "./chartErrorBoundary";
|
||||
import type { ChartType } from "./chartTypeToggle";
|
||||
|
||||
interface LogVolumeChartProps {
|
||||
data: LogsHistogramResponse | null;
|
||||
chartType: ChartType;
|
||||
startTime: number;
|
||||
endTime: number;
|
||||
}
|
||||
|
||||
type LogVolumeDataPoint = {
|
||||
timestamp: string;
|
||||
count: number;
|
||||
success: number;
|
||||
error: number;
|
||||
index: number;
|
||||
formattedTime: string;
|
||||
};
|
||||
|
||||
interface CustomTooltipProps {
|
||||
active?: boolean;
|
||||
payload?: Array<{ payload?: LogVolumeDataPoint }>;
|
||||
}
|
||||
|
||||
function CustomTooltip({ active, payload }: CustomTooltipProps) {
|
||||
if (!active || !payload || !payload.length) return null;
|
||||
|
||||
const data = payload[0]?.payload;
|
||||
if (!data) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div className="mb-1 text-xs text-zinc-500">
|
||||
{formatFullTimestamp(data.timestamp)}
|
||||
</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-500" />
|
||||
<span className="text-zinc-600 dark:text-zinc-400">Success</span>
|
||||
</span>
|
||||
<span className="font-medium text-emerald-600 dark:text-emerald-400">
|
||||
{data.success.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-2 w-2 rounded-full bg-red-500" />
|
||||
<span className="text-zinc-600 dark:text-zinc-400">Error</span>
|
||||
</span>
|
||||
<span className="font-medium text-red-600 dark:text-red-400">
|
||||
{data.error.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LogVolumeChart({
|
||||
data,
|
||||
chartType,
|
||||
startTime,
|
||||
endTime,
|
||||
}: LogVolumeChartProps) {
|
||||
const chartData = useMemo(() => {
|
||||
if (!data?.buckets || !data.bucket_size_seconds) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return data.buckets.map((bucket, index) => ({
|
||||
...bucket,
|
||||
index,
|
||||
formattedTime: formatTimestamp(
|
||||
bucket.timestamp,
|
||||
data.bucket_size_seconds,
|
||||
),
|
||||
}));
|
||||
}, [data]);
|
||||
|
||||
if (!data?.buckets || chartData.length === 0) {
|
||||
return (
|
||||
<div className="text-muted-foreground flex h-full items-center justify-center text-sm">
|
||||
No data available
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const commonProps = {
|
||||
data: chartData,
|
||||
margin: { top: 6, right: 4, left: 12, bottom: 0 },
|
||||
};
|
||||
|
||||
return (
|
||||
<ChartErrorBoundary
|
||||
resetKey={`${startTime}-${endTime}-${chartData.length}`}
|
||||
>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
{chartType === "bar" ? (
|
||||
<BarChart {...commonProps} barCategoryGap={1}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
className="stroke-zinc-200 dark:stroke-zinc-700"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="index"
|
||||
type="number"
|
||||
domain={[-0.5, chartData.length - 0.5]}
|
||||
tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(idx) =>
|
||||
chartData[Math.round(idx)]?.formattedTime || ""
|
||||
}
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 11, className: "fill-zinc-500" }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
width={56}
|
||||
tickFormatter={(v) => v.toLocaleString()}
|
||||
domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
|
||||
allowDataOverflow={false}
|
||||
/>
|
||||
<Tooltip
|
||||
content={<CustomTooltip />}
|
||||
cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }}
|
||||
/>
|
||||
<Bar
|
||||
isAnimationActive={false}
|
||||
dataKey="success"
|
||||
stackId="requests"
|
||||
fill={CHART_COLORS.success}
|
||||
fillOpacity={0.9}
|
||||
radius={[0, 0, 0, 0]}
|
||||
barSize={30}
|
||||
/>
|
||||
<Bar
|
||||
isAnimationActive={false}
|
||||
dataKey="error"
|
||||
stackId="requests"
|
||||
fill={CHART_COLORS.error}
|
||||
fillOpacity={0.9}
|
||||
radius={[2, 2, 0, 0]}
|
||||
barSize={30}
|
||||
/>
|
||||
</BarChart>
|
||||
) : (
|
||||
<AreaChart {...commonProps}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
className="stroke-zinc-200 dark:stroke-zinc-700"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="index"
|
||||
type="number"
|
||||
domain={[-0.5, chartData.length - 0.5]}
|
||||
tick={{ fontSize: 11, className: "fill-zinc-500" }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(idx) =>
|
||||
chartData[Math.round(idx)]?.formattedTime || ""
|
||||
}
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 11, className: "fill-zinc-500" }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
width={56}
|
||||
tickFormatter={(v) => v.toLocaleString()}
|
||||
domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
|
||||
allowDataOverflow={false}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="success"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.success}
|
||||
fill={CHART_COLORS.success}
|
||||
fillOpacity={0.7}
|
||||
/>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
type="monotone"
|
||||
dataKey="error"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.error}
|
||||
fill={CHART_COLORS.error}
|
||||
fillOpacity={0.7}
|
||||
/>
|
||||
</AreaChart>
|
||||
)}
|
||||
</ResponsiveContainer>
|
||||
</ChartErrorBoundary>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user