@alpic-ai/ui 0.0.0-dev.g19c2d9f → 0.0.0-dev.g1a5d5ed

package/src/components/heatmap-chart.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { HEAT_EMPTY, heatColor, heatRamp } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import { useChartContext } from "./chart-container";
+
+export interface HeatmapChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  xKey: string;
+  yKey: string;
+  dataKey?: string;
+  variant?: "square" | "dot";
+  palette?: ChartPaletteName;
+  xLabels?: readonly string[];
+  yLabels?: readonly string[];
+  showAllXLabels?: boolean;
+  highlightPeak?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  xTickFormatter?: (label: string) => string;
+  yTickFormatter?: (label: string) => string;
+  tooltipMetrics?: ReadonlyArray<{ key: string; label: string; format?: (value: number) => string }>;
+  ariaLabel?: string;
+  className?: string;
+}
+
+type CellRecord = Record<string, string | number | null | undefined>;
+
+interface HoverState {
+  x: number;
+  y: number;
+  rowLabel: string;
+  colLabel: string;
+  value: number;
+  record: CellRecord | null;
+}
+
+const PLACEHOLDER_HEIGHT = 168;
+// viewBox units — the SVG scales to the container width, so these stay squares.
+const CELL = 22;
+const GAP = 3;
+const PAD = { left: 36, top: 18, right: 6, bottom: 6 };
+const MAX_X_TICKS = 13;
+// Dots never fully vanish at zero and never quite touch their neighbours at peak.
+const DOT_MIN = 0.42;
+const DOT_RANGE = 0.52;
+const TOOLTIP_OFFSET = 14;
+const TOOLTIP_WIDTH = 150;
+const TOOLTIP_HEIGHT = 64;
+
+// Unambiguous composite key — labels may themselves contain hyphens, spaces, etc.
+const pairKey = (rowLabel: string, colLabel: string) => JSON.stringify([rowLabel, colLabel]);
+
+const uniqueInOrder = (values: readonly string[]) => {
+  const seen = new Set<string>();
+  const ordered: string[] = [];
+  for (const value of values) {
+    if (!seen.has(value)) {
+      seen.add(value);
+      ordered.push(value);
+    }
+  }
+  return ordered;
+};
+
+function HeatmapChart({
+  data,
+  xKey,
+  yKey,
+  dataKey = "value",
+  variant = "square",
+  palette,
+  xLabels,
+  yLabels,
+  showAllXLabels = false,
+  highlightPeak = true,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  xTickFormatter,
+  yTickFormatter,
+  tooltipMetrics,
+  ariaLabel = "Activity heatmap",
+  className,
+}: HeatmapChartProps) {
+  const { paletteName, theme } = useChartContext(palette);
+  const [hovered, setHovered] = React.useState<HoverState | null>(null);
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const layout = React.useMemo(() => {
+    const columns = xLabels ? [...xLabels] : uniqueInOrder(data.map((row) => String(row[xKey] ?? "")));
+    const rows = yLabels ? [...yLabels] : uniqueInOrder(data.map((row) => String(row[yKey] ?? "")));
+    const valueAt = new Map<string, number>();
+    const recordAt = new Map<string, CellRecord>();
+    for (const row of data) {
+      const key = pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? ""));
+      valueAt.set(key, Number(row[dataKey]) || 0);
+      recordAt.set(key, row);
+    }
+    let maxValue = 0;
+    let peakKey = "";
+    const cells = rows.flatMap((rowLabel, rowIndex) =>
+      columns.map((colLabel, colIndex) => {
+        const key = pairKey(rowLabel, colLabel);
+        const value = valueAt.get(key) ?? 0;
+        if (value > maxValue) {
+          maxValue = value;
+          peakKey = key;
+        }
+        return { rowLabel, colLabel, rowIndex, colIndex, value, record: recordAt.get(key) ?? null };
+      }),
+    );
+    return { columns, rows, cells, maxValue, peakKey };
+  }, [data, xKey, yKey, dataKey, xLabels, yLabels]);
+
+  const { columns, rows, cells, maxValue, peakKey } = layout;
+  const isEmpty = columns.length === 0 || rows.length === 0 || maxValue <= 0;
+
+  if (loading) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
+          className,
+        )}
+        style={{ minHeight: PLACEHOLDER_HEIGHT }}
+      >
+        <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+        loading…
+      </div>
+    );
+  }
+
+  if (isEmpty) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
+          className,
+        )}
+        style={{ minHeight: PLACEHOLDER_HEIGHT }}
+      >
+        no data in range
+      </div>
+    );
+  }
+
+  const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
+  const totalWidth = PAD.left + columns.length * CELL + (columns.length - 1) * GAP + PAD.right;
+  const totalHeight = PAD.top + rows.length * CELL + (rows.length - 1) * GAP + PAD.bottom;
+  const xStride = showAllXLabels ? 1 : Math.ceil(columns.length / MAX_X_TICKS);
+  const cellX = (col: number) => PAD.left + col * (CELL + GAP);
+  const cellY = (row: number) => PAD.top + row * (CELL + GAP);
+  const formatX = (label: string) => (xTickFormatter ? xTickFormatter(label) : label);
+  const formatY = (label: string) => (yTickFormatter ? yTickFormatter(label) : label);
+
+  // The tooltip follows the cursor; rendered through a portal so a transformed/
+  // clipped ancestor (e.g. the card's mount animation + overflow-hidden) can't
+  // shift or trim it. Flip near the viewport edges.
+  const tooltipLeft =
+    hovered && hovered.x + TOOLTIP_OFFSET + TOOLTIP_WIDTH > window.innerWidth
+      ? hovered.x - TOOLTIP_OFFSET - TOOLTIP_WIDTH
+      : (hovered?.x ?? 0) + TOOLTIP_OFFSET;
+  const tooltipTop =
+    hovered && hovered.y + TOOLTIP_OFFSET + TOOLTIP_HEIGHT > window.innerHeight
+      ? hovered.y - TOOLTIP_OFFSET - TOOLTIP_HEIGHT
+      : (hovered?.y ?? 0) + TOOLTIP_OFFSET;
+
+  return (
+    <div data-slot="heatmap-chart" className={cn("w-full", className)}>
+      <div className="overflow-x-auto">
+        <svg
+          viewBox={`0 0 ${totalWidth} ${totalHeight}`}
+          className="block min-w-[480px]"
+          style={{ width: "100%", height: "auto" }}
+          role="img"
+          aria-label={ariaLabel}
+          onMouseLeave={() => setHovered(null)}
+        >
+          {columns.map((label, col) =>
+            col % xStride === 0 ? (
+              <text
+                key={`x-${label}`}
+                x={cellX(col) + CELL / 2}
+                y={PAD.top - 7}
+                textAnchor="middle"
+                className="fill-quaternary-foreground font-mono text-[8.5px]"
+              >
+                {formatX(label)}
+              </text>
+            ) : null,
+          )}
+          {rows.map((label, row) => (
+            <text
+              key={`y-${label}`}
+              x={PAD.left - 8}
+              y={cellY(row) + CELL / 2 + 3}
+              textAnchor="end"
+              className="fill-quaternary-foreground font-mono text-[8.5px]"
+            >
+              {formatY(label)}
+            </text>
+          ))}
+          {cells.map((cell) => {
+            const fraction = cell.value / maxValue;
+            const fill = heatColor(ramp, fraction);
+            const key = pairKey(cell.rowLabel, cell.colLabel);
+            const isPeak = highlightPeak && key === peakKey;
+            if (variant === "dot") {
+              return (
+                <circle
+                  key={key}
+                  cx={cellX(cell.colIndex) + CELL / 2}
+                  cy={cellY(cell.rowIndex) + CELL / 2}
+                  r={(CELL / 2) * (DOT_MIN + DOT_RANGE * fraction)}
+                  fill={fill}
+                  stroke={isPeak ? theme.foreground : undefined}
+                  strokeWidth={isPeak ? 1.4 : undefined}
+                />
+              );
+            }
+            return (
+              <rect
+                key={key}
+                x={cellX(cell.colIndex)}
+                y={cellY(cell.rowIndex)}
+                width={CELL}
+                height={CELL}
+                rx={2.5}
+                fill={fill}
+                stroke={isPeak ? theme.foreground : undefined}
+                strokeWidth={isPeak ? 1.4 : undefined}
+              />
+            );
+          })}
+          {/* Transparent hit layer over the full pitch so every cell — and the gaps
+              between dots — registers hover uniformly. */}
+          {cells.map((cell) => (
+            // biome-ignore lint/a11y/noStaticElementInteractions: decorative hover tooltip; all values are visible on the cells
+            <rect
+              key={`hit-${pairKey(cell.rowLabel, cell.colLabel)}`}
+              x={cellX(cell.colIndex)}
+              y={cellY(cell.rowIndex)}
+              width={CELL + GAP}
+              height={CELL + GAP}
+              fill="transparent"
+              onMouseMove={(event) =>
+                setHovered({
+                  x: event.clientX,
+                  y: event.clientY,
+                  rowLabel: cell.rowLabel,
+                  colLabel: cell.colLabel,
+                  value: cell.value,
+                  record: cell.record,
+                })
+              }
+            />
+          ))}
+        </svg>
+      </div>
+
+      {mounted &&
+        hovered &&
+        createPortal(
+          <div
+            className="pointer-events-none fixed z-50 min-w-[130px] rounded-lg border border-border bg-popover px-3 py-2.5 text-popover-foreground shadow-lg"
+            style={{ left: tooltipLeft, top: tooltipTop }}
+          >
+            <p className="mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider">
+              {formatY(hovered.rowLabel)} · {formatX(hovered.colLabel)}
+            </p>
+            {tooltipMetrics && tooltipMetrics.length > 0 ? (
+              <div className="flex flex-col gap-1">
+                {tooltipMetrics.map((metric) => {
+                  const raw = hovered.record ? Number(hovered.record[metric.key]) || 0 : 0;
+                  const isActive = metric.key === dataKey;
+                  return (
+                    <div key={metric.key} className="flex items-center justify-between gap-4 text-text-xs">
+                      <span className="inline-flex items-center gap-2 text-muted-foreground">
+                        <span
+                          aria-hidden
+                          className="size-2 shrink-0 rounded-[2px]"
+                          style={{
+                            background: isActive ? heatColor(ramp, hovered.value / maxValue) : theme.mutedForeground,
+                            opacity: isActive ? 1 : 0.35,
+                          }}
+                        />
+                        {metric.label}
+                      </span>
+                      <span
+                        className={cn(
+                          "font-mono tabular-nums",
+                          isActive ? "font-semibold text-foreground" : "text-muted-foreground",
+                        )}
+                      >
+                        {(metric.format ?? valueFormatter)(raw)}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="flex items-center justify-between gap-4 text-text-xs">
+                <span className="inline-flex items-center gap-2 text-muted-foreground">
+                  <span
+                    aria-hidden
+                    className="size-2 shrink-0 rounded-[2px]"
+                    style={{ background: heatColor(ramp, hovered.value / maxValue) }}
+                  />
+                  activity
+                </span>
+                <span className="font-mono font-semibold tabular-nums text-foreground">
+                  {valueFormatter(hovered.value)}
+                </span>
+              </div>
+            )}
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+}
+
+export { HeatmapChart };

package/src/components/line-chart.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import * as React from "react";
+import {
+  CartesianGrid,
+  LabelList,
+  Line,
+  LineChart as RechartsLineChart,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { type ChartSeries, makeXAxisTick, resolveSeries } from "../lib/chart";
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import type { ChartMarker } from "./area-chart";
+import { useChartContext } from "./chart-container";
+import { ChartLegend } from "./chart-legend";
+import { ChartTooltipContent } from "./chart-tooltip";
+
+const CURVE_TYPE = { monotone: "monotone", linear: "linear", step: "stepAfter" } as const;
+
+export interface LineChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  series: ChartSeries[];
+  curve?: keyof typeof CURVE_TYPE;
+  legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
+  valueFlags?: boolean;
+  dots?: boolean;
+  height?: number;
+  yAxisWidth?: number;
+  palette?: ChartPaletteName;
+  referenceLine?: { y: number; label?: string; band?: boolean };
+  markers?: ChartMarker[];
+  lastValueLabel?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+
+function LineChart({
+  data,
+  index,
+  series,
+  curve = "monotone",
+  legend = false,
+  legendAlign = "left",
+  valueFlags = false,
+  dots = false,
+  height = 200,
+  yAxisWidth = 48,
+  palette,
+  referenceLine,
+  markers,
+  lastValueLabel = false,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  className,
+}: LineChartProps) {
+  const { palette: paletteColors, theme } = useChartContext(palette);
+  const reducedMotion = useReducedMotion();
+  const animated = !reducedMotion;
+
+  const resolved = resolveSeries(series, paletteColors, theme);
+
+  const numericMax = React.useMemo(() => {
+    let max = 0;
+    for (const row of data) {
+      for (const entry of series) {
+        const value = Number(row[entry.key]);
+        if (Number.isFinite(value) && value > max) {
+          max = value;
+        }
+      }
+    }
+    return max;
+  }, [data, series]);
+
+  const curveType = CURVE_TYPE[curve];
+  const margin = { top: markers?.length ? 18 : 8, right: lastValueLabel ? 56 : 8, bottom: 2, left: 0 };
+
+  const axis = {
+    stroke: theme.border,
+    tick: { fill: theme.axisForeground, fontSize: 10, fontFamily: theme.fontMono },
+    tickLine: false as const,
+    axisLine: { stroke: theme.border, strokeOpacity: 0.6 },
+  };
+
+  const legendItems = resolved.map((entry) => ({ name: entry.name, color: entry.color, dashed: entry.dashed }));
+
+  const activeDotFor = (entry: (typeof resolved)[number]) =>
+    valueFlags
+      ? (dotProps: { cx?: number; cy?: number; value?: number | string }) => {
+          if (dotProps.cx == null || dotProps.cy == null) {
+            return <g />;
+          }
+          return (
+            <g>
+              <circle
+                cx={dotProps.cx}
+                cy={dotProps.cy}
+                r={3.5}
+                fill={entry.color}
+                stroke={theme.card}
+                strokeWidth={2}
+              />
+              <text
+                x={dotProps.cx}
+                y={dotProps.cy - 8}
+                textAnchor="middle"
+                fill={entry.color}
+                fontFamily={theme.fontMono}
+                fontSize={10}
+                style={{ fontVariantNumeric: "tabular-nums" }}
+              >
+                {valueFormatter(Number(dotProps.value ?? 0))}
+              </text>
+            </g>
+          );
+        }
+      : { r: 3.5, fill: entry.color, stroke: theme.card, strokeWidth: 2 };
+
+  const renderLastLabel =
+    (color: string) =>
+    (props: {
+      x?: string | number;
+      y?: string | number;
+      value?: string | number | boolean | Array<string | number | boolean> | null;
+      index?: number;
+    }) => {
+      if (props.index !== data.length - 1 || props.x == null || props.y == null) {
+        return null;
+      }
+      return (
+        <text
+          x={Number(props.x) + 6}
+          y={Number(props.y)}
+          dy={3}
+          fill={color}
+          fontFamily={theme.fontMono}
+          fontSize={10}
+          textAnchor="start"
+          style={{ fontVariantNumeric: "tabular-nums" }}
+        >
+          {valueFormatter(Number(props.value ?? 0))}
+        </text>
+      );
+    };
+
+  const isEmpty = data.length === 0 || resolved.length === 0;
+
+  return (
+    <div data-slot="line-chart" className={cn("flex w-full flex-col gap-3", className)}>
+      <div className="w-full" style={{ height }}>
+        {loading ? (
+          <div className="flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs">
+            <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+            loading…
+          </div>
+        ) : isEmpty ? (
+          <div className="flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs">
+            no data in range
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
+            <RechartsLineChart data={data as Record<string, string | number>[]} margin={margin}>
+              <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
+              <XAxis
+                dataKey={index}
+                {...axis}
+                tick={makeXAxisTick(theme)}
+                interval="preserveStartEnd"
+                minTickGap={44}
+              />
+              <YAxis
+                {...axis}
+                width={yAxisWidth}
+                domain={["auto", "auto"]}
+                tickFormatter={(value: number) => valueFormatter(value)}
+              />
+              <Tooltip
+                offset={12}
+                allowEscapeViewBox={{ x: false, y: false }}
+                cursor={{ stroke: theme.axisForeground, strokeWidth: 1, strokeDasharray: "3 3" }}
+                content={<ChartTooltipContent valueFormatter={valueFormatter} labelFormatter={labelFormatter} />}
+              />
+              {referenceLine?.band && (
+                <ReferenceArea
+                  y1={referenceLine.y}
+                  y2={numericMax}
+                  fill={theme.warning}
+                  fillOpacity={0.06}
+                  ifOverflow="extendDomain"
+                />
+              )}
+              {referenceLine && (
+                <ReferenceLine
+                  y={referenceLine.y}
+                  stroke={theme.warning}
+                  strokeDasharray="4 4"
+                  strokeOpacity={0.6}
+                  label={
+                    referenceLine.label
+                      ? {
+                          value: referenceLine.label,
+                          fill: theme.warning,
+                          fontSize: 9,
+                          fontFamily: theme.fontMono,
+                          position: "insideBottomRight",
+                        }
+                      : undefined
+                  }
+                />
+              )}
+
+              {resolved.map((entry) => (
+                <Line
+                  key={entry.key}
+                  type={curveType}
+                  dataKey={entry.key}
+                  name={entry.name}
+                  stroke={entry.color}
+                  strokeWidth={entry.dashed ? 2 : 1.8}
+                  strokeDasharray={entry.dashed ? "5 3" : undefined}
+                  dot={dots ? { r: 2.5, fill: entry.color, strokeWidth: 0 } : false}
+                  activeDot={activeDotFor(entry)}
+                  isAnimationActive={animated}
+                  animationDuration={650}
+                  animationEasing="ease-out"
+                >
+                  {lastValueLabel && <LabelList dataKey={entry.key} content={renderLastLabel(entry.color)} />}
+                </Line>
+              ))}
+
+              {markers?.map((marker) => (
+                <ReferenceDot
+                  key={`${marker.x}-${marker.y}`}
+                  x={marker.x}
+                  y={marker.y}
+                  r={3.5}
+                  fill={marker.color ?? theme.foreground}
+                  stroke={theme.card}
+                  strokeWidth={2}
+                  label={
+                    marker.label
+                      ? {
+                          value: marker.label,
+                          fill: marker.color ?? theme.foreground,
+                          fontSize: 9,
+                          fontFamily: theme.fontMono,
+                          position: "top",
+                        }
+                      : undefined
+                  }
+                />
+              ))}
+            </RechartsLineChart>
+          </ResponsiveContainer>
+        )}
+      </div>
+
+      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
+    </div>
+  );
+}
+
+export { LineChart };