feat: trace stats chart (#1017)

* feat: add traces statistics chart

* feat: fix comments

* feat: update colors

* feat: type array

* feat: add colors

* feat: remove max value, and response check

* feat: update compact date range filter

* feat: refactor

* fix: comments

* feat: parametrize

* feat: fix comments

* feat: unify component

* feat: refactor absolute date range filter

* feat: add validation

* feat: fix realtime

Author: olzhik11

frontend/app/api/projects/[projectId]/traces/stats/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest } from "next/server";
+import { prettifyError, ZodError } from "zod/v4";
+
+import { parseUrlParams } from "@/lib/actions/common/utils";
+import { getTraceStats, GetTraceStatsSchema } from "@/lib/actions/traces/stats";
+
+export async function GET(req: NextRequest, props: { params: Promise<{ projectId: string }> }): Promise<Response> {
+  const params = await props.params;
+  const projectId = params.projectId;
+
+  const parseResult = parseUrlParams(req.nextUrl.searchParams, GetTraceStatsSchema.omit({ projectId: true }));
+
+  if (!parseResult.success) {
+    return Response.json({ error: prettifyError(parseResult.error) }, { status: 400 });
+  }
+
+  try {
+    const result = await getTraceStats({ ...parseResult.data, projectId });
+    return Response.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return Response.json(
+      { error: error instanceof Error ? error.message : "Failed to fetch trace stats." },
+      { status: 500 }
+    );
+  }
+}

frontend/app/globals.css

@@ -41,6 +41,9 @@
   --color-destructive: hsl(var(--destructive));
   --color-destructive-foreground: hsl(var(--destructive-foreground));
 
+  --color-success-bright: hsl(var(--success-bright));
+  --color-destructive-bright: hsl(var(--destructive-bright));
+
   --color-muted: hsl(var(--muted));
   --color-muted-foreground: hsl(var(--muted-foreground));
 
@@ -116,9 +119,11 @@
 
     --destructive: 0 60% 50%;
     --destructive-foreground: 210 40% 98%;
+    --destructive-bright: 0 72% 60%;
 
     --success: 142.1 76.2% 36.3%;
     --success-foreground: 355.7 100% 97.3%;
+    --success-bright: 158 64% 52%;
 
     --border: 240 6% 18%;
     --input: 240 6% 18%;

frontend/components/chart-builder/charts/utils.ts

@@ -1,3 +1,4 @@
+import { scaleUtc } from "d3-scale";
 import { format, isValid, parseISO } from "date-fns";
 import { isNil } from "lodash";
 
@@ -16,27 +17,24 @@ export const chartColors = [
   "hsl(var(--chart-5))",
 ];
 
-const tryFormatAsDate = (value: any, formatPattern: string = "M/dd"): string => {
-  const toUtcString = (str: string) => (str.includes("T") && !str.endsWith("Z") ? str + "Z" : str);
-
-  const parseValue = (val: any) =>
-    val instanceof Date
-      ? val
-      : typeof val === "string"
-        ? parseISO(toUtcString(val))
-        : typeof val === "number"
-          ? new Date(val)
-          : null;
-
+const tryFormatAsDate = (value: string | number | Date, formatPattern: string = "M/dd"): string => {
   try {
-    const date = parseValue(value);
+    const date =
+      value instanceof Date
+        ? value
+        : typeof value === "string"
+          ? parseISO(value.includes("T") && !value.endsWith("Z") ? value + "Z" : value)
+          : typeof value === "number"
+            ? new Date(value)
+            : null;
+
     return date && isValid(date) ? format(date, formatPattern) : String(value);
   } catch {
     return String(value);
   }
 };
 
-const getOptimalDateFormat = (data: Record<string, any>[], dataKey: string): string => {
+const getOptimalDateFormat = (data: Record<string, unknown>[], dataKey: string): string => {
   try {
     const dates = data
       .map((row) => {
@@ -45,7 +43,7 @@ const getOptimalDateFormat = (data: Record<string, any>[], dataKey: string): str
           if (typeof value === "string" && value.includes("T")) {
             return parseISO(value);
           }
-          return new Date(value);
+          return new Date(value as string | number | Date);
         } catch {
           return null;
         }
@@ -69,15 +67,15 @@ const getOptimalDateFormat = (data: Record<string, any>[], dataKey: string): str
   }
 };
 
-export const createAxisFormatter = (data: Record<string, any>[], dataKey: string) => {
+export const createAxisFormatter = (data: Record<string, unknown>[], dataKey: string) => {
   const dateFormat = getOptimalDateFormat(data, dataKey);
 
-  return (value: any) => {
+  return (value: string | number | Date) => {
     if (typeof value === "number") {
       return numberFormatter.format(value);
     }
 
-    if (typeof value === "string") {
+    if (typeof value === "string" || value instanceof Date) {
       const dateFormatted = tryFormatAsDate(value, dateFormat);
       if (dateFormatted !== value) {
         return dateFormatted;
@@ -88,6 +86,38 @@ export const createAxisFormatter = (data: Record<string, any>[], dataKey: string
   };
 };
 
+export const selectNiceTicksFromData = (
+  dataTimestamps: string[],
+  targetTickCount: number = 8
+): { ticks: string[]; formatter: (value: string) => string } | null => {
+  if (dataTimestamps.length === 0) return null;
+
+  const toUtc = (s: string) => (s.includes("T") && !s.endsWith("Z") ? s + "Z" : s);
+
+  const startDate = new Date(toUtc(dataTimestamps[0]));
+  const endDate = new Date(toUtc(dataTimestamps[dataTimestamps.length - 1]));
+
+  if (!isValid(startDate) || !isValid(endDate)) return null;
+
+  const scale = scaleUtc().domain([startDate, endDate]);
+  const idealTicks = scale.ticks(targetTickCount);
+  const formatTick = scale.tickFormat();
+
+  const findClosestTimestamp = (targetTime: number) =>
+    dataTimestamps.reduce((closest, current) => {
+      const closestDiff = Math.abs(new Date(toUtc(closest)).getTime() - targetTime);
+      const currentDiff = Math.abs(new Date(toUtc(current)).getTime() - targetTime);
+      return currentDiff < closestDiff ? current : closest;
+    });
+
+  const tickLabels = new Map(idealTicks.map((tick) => [findClosestTimestamp(tick.getTime()), formatTick(tick)]));
+
+  return {
+    ticks: Array.from(tickLabels.keys()),
+    formatter: (value: string) => tickLabels.get(value) || value,
+  };
+};
+
 export const generateChartConfig = (columns: string[]): ChartConfig =>
   columns.reduce((config, columnName, index) => {
     config[columnName] = {

frontend/components/traces/spans-table/columns.tsx

@@ -1,6 +1,5 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { capitalize } from "lodash";
-import { Check, X } from "lucide-react";
 
 import ClientTimestampFormatter from "@/components/client-timestamp-formatter";
 import SpanTypeIcon, { createSpanTypeIcon } from "@/components/traces/span-type-icon";
@@ -10,7 +9,7 @@ import JsonTooltip from "@/components/ui/json-tooltip.tsx";
 import Mono from "@/components/ui/mono";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { SpanRow, SpanType } from "@/lib/traces/types";
-import { TIME_SECONDS_FORMAT } from "@/lib/utils";
+import { cn, TIME_SECONDS_FORMAT } from "@/lib/utils";
 
 const format = new Intl.NumberFormat("en-US", {
   style: "currency",
@@ -95,18 +94,18 @@ export const filters: ColumnFilter[] = [
 export const columns: ColumnDef<SpanRow, any>[] = [
   {
     cell: (row) => (
-      <div className="flex h-full justify-center items-center w-10">
-        {row.getValue() === "error" ? (
-          <X className="self-center text-destructive" size={18} />
-        ) : (
-          <Check className="text-success" size={18} />
-        )}
-      </div>
+      <div
+        className={cn("min-h-6 w-1.5 rounded-[2.5px] bg-success-bright", {
+          "bg-destructive-bright": row.getValue() === "error",
+          "": row.getValue() === "info", // temporary color values
+          "bg-yellow-400": row.getValue() === "warning", // temporary color values
+        })}
+      />
     ),
     accessorKey: "status",
-    header: "Status",
+    header: () => <div />,
     id: "status",
-    size: 70,
+    size: 40,
   },
   {
     cell: (row) => <Mono>{row.getValue()}</Mono>,

frontend/components/traces/traces-chart/bar.tsx

@@ -0,0 +1,58 @@
+import { isNil } from "lodash";
+import React from "react";
+
+import { chartConfig } from "@/components/traces/traces-chart/utils.ts";
+import { TracesStatsDataPoint } from "@/lib/actions/traces/stats.ts";
+
+interface CustomBarProps {
+  fill?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  payload?: TracesStatsDataPoint;
+}
+
+const MIN_BAR_HEIGHT = 3;
+
+// custom shape for rounded bars
+const RoundedBar = (props: CustomBarProps) => {
+  const { fill, x, y, width, height = 0, payload } = props;
+
+  if (isNil(x) || isNil(y) || isNil(width) || !fill || !payload) return <></>;
+
+  const isSuccess = fill === chartConfig.successCount.color;
+  const hasSuccess = payload.successCount > 0;
+  const hasError = payload.errorCount > 0;
+
+  if (isSuccess && !hasSuccess) return <></>;
+  if (!isSuccess && !hasError) return <></>;
+
+  const hasBoth = hasSuccess && hasError;
+
+  const barHeight = height > 0 && height < MIN_BAR_HEIGHT ? MIN_BAR_HEIGHT : height;
+  const barY = barHeight > height ? y - (barHeight - height) : y;
+
+  const radius = isSuccess ? (hasBoth ? [0, 0, 4, 4] : [4, 4, 4, 4]) : hasBoth ? [4, 4, 0, 0] : [4, 4, 4, 4];
+
+  const [tl, tr, br, bl] = radius;
+
+  return (
+    <path
+      d={`
+        M ${x} ${barY + tl}
+        Q ${x} ${barY}, ${x + tl} ${barY}
+        L ${x + width - tr} ${barY}
+        Q ${x + width} ${barY}, ${x + width} ${barY + tr}
+        L ${x + width} ${barY + barHeight - br}
+        Q ${x + width} ${barY + barHeight}, ${x + width - br} ${barY + barHeight}
+        L ${x + bl} ${barY + barHeight}
+        Q ${x} ${barY + barHeight}, ${x} ${barY + barHeight - bl}
+        Z
+      `}
+      fill={fill}
+    />
+  );
+};
+
+export default RoundedBar;