bifrost/ui/app/workspace/dashboard/components/charts/logVolumeChart.tsx

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