[OPIK-5223][FE]: kpi cards; (#6013)

* init kpi cards;

* finish kpi cards and graph;

* refactor;

* eslint issues;

* baz review comments;

* eslint issues;

* revert endtime;

---------

Co-authored-by: aadereiko <aliaksandr@comet.com>

Author: aadereiko

apps/opik-frontend/src/api/projects/useProjectKpiCards.ts

@@ -0,0 +1,63 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, { PROJECTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
+import { Filters } from "@/types/filters";
+import { processFilters } from "@/lib/filters";
+
+export type KpiEntityType = "traces" | "spans" | "threads";
+
+export type KpiMetricType = "count" | "errors" | "avg_duration" | "total_cost";
+
+export type KpiMetric = {
+  type: KpiMetricType;
+  current_value: number | null;
+  previous_value: number | null;
+};
+
+export type KpiCardResponse = {
+  stats: KpiMetric[];
+};
+
+type UseProjectKpiCardsParams = {
+  projectId: string;
+  entityType: KpiEntityType;
+  filters?: Filters;
+  intervalStart?: string;
+  intervalEnd?: string;
+};
+
+const getProjectKpiCards = async (
+  { signal }: QueryFunctionContext,
+  {
+    projectId,
+    entityType,
+    filters,
+    intervalStart,
+    intervalEnd,
+  }: UseProjectKpiCardsParams,
+) => {
+  const processedFilters = processFilters(filters);
+
+  const { data } = await api.post<KpiCardResponse>(
+    `${PROJECTS_REST_ENDPOINT}${projectId}/kpi-cards`,
+    {
+      entity_type: entityType,
+      ...processedFilters,
+      ...(intervalStart && { interval_start: intervalStart }),
+      ...(intervalEnd && { interval_end: intervalEnd }),
+    },
+    { signal },
+  );
+
+  return data;
+};
+
+export default function useProjectKpiCards(
+  params: UseProjectKpiCardsParams,
+  options?: QueryConfig<KpiCardResponse>,
+) {
+  return useQuery({
+    queryKey: ["project-kpi-cards", params],
+    queryFn: (context) => getProjectKpiCards(context, params),
+    ...options,
+  });
+}

apps/opik-frontend/src/api/projects/useProjectMetric.ts

@@ -20,6 +20,11 @@ export enum METRIC_NAME_TYPE {
   SPAN_DURATION = "SPAN_DURATION",
   SPAN_FEEDBACK_SCORES = "SPAN_FEEDBACK_SCORES",
   SPAN_TOKEN_USAGE = "SPAN_TOKEN_USAGE",
+  TRACE_AVERAGE_DURATION = "TRACE_AVERAGE_DURATION",
+  SPAN_AVERAGE_DURATION = "SPAN_AVERAGE_DURATION",
+  THREAD_AVERAGE_DURATION = "THREAD_AVERAGE_DURATION",
+  TRACE_ERROR_RATE = "TRACE_ERROR_RATE",
+  SPAN_ERROR_RATE = "SPAN_ERROR_RATE",
 }
 
 export enum INTERVAL_TYPE {

apps/opik-frontend/src/main.scss

@@ -87,6 +87,7 @@
     --chart-purple: #945fcf;
     --chart-pink: #ed4a7b;
     --chart-orange: #fb9341;
+    --chart-teal: #12a4b4;
 
     /* Template icon colors */
     --template-icon-metrics: #5899da;
@@ -353,6 +354,7 @@
     --chart-purple: #945fcf;
     --chart-pink: #ed4a7b;
     --chart-orange: #fb9341;
+    --chart-teal: #12a4b4;
 
     /* Template icon colors - Dark Mode */
     --template-icon-metrics: #5899da;

apps/opik-frontend/src/v2/pages-shared/dashboards/widgets/ProjectMetricsWidget/MetricChart/MetricBarChart.tsx

@@ -23,6 +23,7 @@ interface MetricBarChartProps {
   isPending: boolean;
   labelActions?: Record<string, LegendLabelAction>;
   isAggregateTotal?: boolean;
+  showLegend?: boolean;
 }
 
 const MetricBarChart: React.FunctionComponent<MetricBarChartProps> = ({
@@ -35,6 +36,7 @@ const MetricBarChart: React.FunctionComponent<MetricBarChartProps> = ({
   data,
   labelActions,
   isAggregateTotal = false,
+  showLegend = true,
 }) => {
   const renderChartTooltipHeader = useCallback(
     ({ payload }: ChartTooltipRenderHeaderArguments) => {
@@ -83,7 +85,7 @@ const MetricBarChart: React.FunctionComponent<MetricBarChartProps> = ({
       customYTickFormatter={customYTickFormatter}
       renderTooltipValue={renderValue}
       renderTooltipHeader={renderChartTooltipHeader}
-      showLegend
+      showLegend={showLegend}
       labelActions={labelActions}
     />
   );

apps/opik-frontend/src/v2/pages-shared/dashboards/widgets/ProjectMetricsWidget/MetricChart/MetricChartContainer.tsx

@@ -58,7 +58,10 @@ interface MetricContainerChartProps {
   getLabelAction?: (label: string) => LegendLabelAction | undefined;
   isAggregateTotal?: boolean;
   customEmptyState?: React.ReactNode;
+  customLoadingState?: React.ReactNode;
   logsSource?: LOGS_SOURCE;
+  showLegend?: boolean;
+  colorMap?: Record<string, string>;
 }
 
 const customColorMap = {
@@ -100,7 +103,10 @@ const MetricContainerChart = ({
   getLabelAction,
   isAggregateTotal = false,
   customEmptyState,
+  customLoadingState,
   logsSource,
+  showLegend = true,
+  colorMap,
 }: MetricContainerChartProps) => {
   const { data: response, isPending } = useProjectMetric(
     {
@@ -175,7 +181,7 @@ const MetricContainerChart = ({
     return data.every((record) => lines.every((line) => isNil(record[line])));
   }, [data, lines, isPending]);
 
-  const config = useChartConfig(lines, labelsMap, customColorMap);
+  const config = useChartConfig(lines, labelsMap, colorMap ?? customColorMap);
 
   const labelActions = useMemo(() => {
     if (!getLabelAction) return undefined;
@@ -194,26 +200,37 @@ const MetricContainerChart = ({
 
   const CHART = METRIC_CHART_TYPE[chartType];
 
-  const chartContent = noData ? (
-    customEmptyState || (
-      <NoData
-        className="h-[var(--chart-height)] min-h-32 text-light-slate"
-        message="No data to show"
+  const getChartContent = () => {
+    if (isPending && customLoadingState) return customLoadingState;
+
+    if (noData) {
+      return (
+        customEmptyState || (
+          <NoData
+            className="h-[var(--chart-height)] min-h-32 text-light-slate"
+            message="No data to show"
+          />
+        )
+      );
+    }
+
+    return (
+      <CHART
+        config={config}
+        interval={interval}
+        renderValue={renderValue}
+        customYTickFormatter={customYTickFormatter}
+        chartId={chartId}
+        isPending={isPending}
+        data={data}
+        labelActions={labelActions}
+        isAggregateTotal={isAggregateTotal}
+        showLegend={showLegend}
       />
-    )
-  ) : (
-    <CHART
-      config={config}
-      interval={interval}
-      renderValue={renderValue}
-      customYTickFormatter={customYTickFormatter}
-      chartId={chartId}
-      isPending={isPending}
-      data={data}
-      labelActions={labelActions}
-      isAggregateTotal={isAggregateTotal}
-    />
-  );
+    );
+  };
+
+  const chartContent = getChartContent();
 
   if (chartOnly) return chartContent;
 

apps/opik-frontend/src/v2/pages-shared/dashboards/widgets/ProjectMetricsWidget/MetricChart/MetricLineChart.tsx

@@ -23,6 +23,7 @@ interface MetricLineChartProps {
   isPending: boolean;
   labelActions?: Record<string, LegendLabelAction>;
   isAggregateTotal?: boolean;
+  showLegend?: boolean;
 }
 
 const MetricLineChart: React.FunctionComponent<MetricLineChartProps> = ({
@@ -35,6 +36,7 @@ const MetricLineChart: React.FunctionComponent<MetricLineChartProps> = ({
   data,
   labelActions,
   isAggregateTotal = false,
+  showLegend = true,
 }) => {
   const renderChartTooltipHeader = useCallback(
     ({ payload }: ChartTooltipRenderHeaderArguments) => {
@@ -83,7 +85,7 @@ const MetricLineChart: React.FunctionComponent<MetricLineChartProps> = ({
       customYTickFormatter={customYTickFormatter}
       renderTooltipValue={renderValue}
       renderTooltipHeader={renderChartTooltipHeader}
-      showLegend
+      showLegend={showLegend}
       showArea
       connectNulls
       labelActions={labelActions}

apps/opik-frontend/src/v2/pages-shared/traces/MetricsSummary/MetricCard.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { ArrowUp, ArrowDown, LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { PercentageTrendType } from "@/shared/PercentageTrend/PercentageTrend";
+
+const computePercentageChange = (
+  current: number | null,
+  previous: number | null,
+): number | undefined => {
+  if (current === null && previous === null) return undefined;
+  const c = current ?? 0;
+  const p = previous ?? 0;
+  if (p === 0) return c === 0 ? 0 : c > 0 ? Infinity : -Infinity;
+  if (c === 0) return -100;
+  return ((c - p) / p) * 100;
+};
+
+export type MetricCardProps = {
+  icon: LucideIcon;
+  label: string;
+  value: string;
+  currentRaw?: number | null;
+  previousRaw?: number | null;
+  trend: PercentageTrendType;
+  selected?: boolean;
+  onClick?: () => void;
+  className?: string;
+};
+
+const MetricCard: React.FC<MetricCardProps> = ({
+  icon: Icon,
+  label,
+  value,
+  currentRaw,
+  previousRaw,
+  trend,
+  selected = false,
+  onClick,
+  className,
+}) => {
+  const percentage = computePercentageChange(
+    currentRaw ?? null,
+    previousRaw ?? null,
+  );
+
+  const renderChange = () => {
+    if (percentage === undefined || !isFinite(percentage)) return null;
+    if (percentage === 0) {
+      return <span className="text-xs text-light-slate">No changes</span>;
+    }
+
+    const isUp = percentage > 0;
+    const isBetter = trend === "direct" ? isUp : !isUp;
+    const ChangeIcon = isUp ? ArrowUp : ArrowDown;
+    const colorClass = selected
+      ? isBetter
+        ? "text-primary"
+        : "text-chart-red"
+      : "text-muted-slate";
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center gap-1 text-xs font-medium",
+          colorClass,
+        )}
+      >
+        <ChangeIcon className="size-3" />
+        {`${Math.abs(percentage).toFixed(1)}%`}
+      </span>
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex h-11 cursor-pointer items-center justify-between border px-4 transition-colors [&:not(:last-child)]:-mr-px",
+        selected ? "bg-background" : "bg-soft-background hover:bg-background",
+        className,
+      )}
+      onClick={onClick}
+    >
+      <div className="flex items-center gap-3">
+        <Icon className="size-4 shrink-0 text-muted-slate" />
+        <div className="flex items-center gap-2">
+          <span
+            className={cn(
+              "comet-body-s",
+              selected ? "text-foreground" : "text-muted-slate",
+            )}
+          >
+            {label}
+          </span>
+          <span
+            className={cn(
+              "comet-body-s",
+              selected ? "text-foreground" : "text-muted-slate",
+              value === "N/A" && "comet-body-xs text-light-slate",
+            )}
+          >
+            {value}
+          </span>
+          {renderChange()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MetricCard;