@alpic-ai/ui 0.0.0-dev.g37dab1d → 0.0.0-dev.g380fab7

package/src/stories/line-chart.stories.tsx

@@ -0,0 +1,146 @@
+import type { Story } from "@ladle/react";
+
+import { ChartCard } from "../components/chart-card";
+import { GridFx } from "../components/grid-fx";
+import { LineChart } from "../components/line-chart";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Line Chart" };
+
+const mulberry32 = (seed: number) => () => {
+  seed |= 0;
+  seed = (seed + 0x6d2b79f5) | 0;
+  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+};
+
+const hourLabel = (index: number, length: number) =>
+  `${String(Math.round((index / (length - 1)) * 24)).padStart(2, "0")}:00`;
+
+const genSeries = (seed: number, scale: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  let value = scale * 0.6;
+  return Array.from({ length }, (_, index) => {
+    value = Math.max(scale * 0.12, value + (rnd() - 0.46) * scale * 0.18);
+    return { t: hourLabel(index, length), v: Math.round(value * (1 + Math.sin(index / 5) * 0.16)) };
+  });
+};
+
+const genLatency = (seed: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  let p50 = 240;
+  let p95 = 720;
+  return Array.from({ length }, (_, index) => {
+    p50 = Math.max(120, p50 + (rnd() - 0.48) * 40);
+    p95 = Math.max(p50 + 200, p95 + (rnd() - 0.46) * 120);
+    return { t: hourLabel(index, length), p50: Math.round(p50), p95: Math.round(p95 * (index === 19 ? 1.7 : 1)) };
+  });
+};
+
+const genCompare = (seed: number) => {
+  const rnd = mulberry32(seed);
+  const length = 30;
+  let claude = 60;
+  let chatgpt = 80;
+  return Array.from({ length }, (_, index) => {
+    claude = Math.max(20, claude + (rnd() - 0.42) * 14);
+    chatgpt = Math.max(20, chatgpt + (rnd() - 0.5) * 12);
+    return { t: hourLabel(index, length), claude: Math.round(claude), chatgpt: Math.round(chatgpt) };
+  });
+};
+
+const tokens = genSeries(11, 84000);
+const latency = genLatency(31);
+const compare = genCompare(23);
+
+const nf = (value: number) => value.toLocaleString("en-US");
+const fmtK = (value: number) => (value >= 1000 ? `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}k` : `${value}`);
+const ms = (value: number) => `${value}ms`;
+
+const tokensSpark = tokens.map((row) => row.v);
+const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : best));
+
+export const AllVariants: Story = () => (
+  <div className="chart-canvas mx-auto max-w-[1600px] p-8">
+    <GridFx />
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+      <ChartCard
+        palette="cyan"
+        accent="left"
+        kicker="Last 24h"
+        title="Sessions"
+        description="Full-width · left accent"
+        className="md:col-span-2 xl:col-span-3"
+      >
+        <LineChart
+          data={compare}
+          index="t"
+          series={[
+            { key: "claude", name: "Claude" },
+            { key: "chatgpt", name: "ChatGPT" },
+          ]}
+          lastValueLabel
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Output tokens" description="Single series · value flags">
+        <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} sparkline={tokensSpark} />
+        <LineChart data={tokens} index="t" series={[{ key: "v", name: "tokens" }]} valueFlags valueFormatter={fmtK} />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="Last 24h" title="Request latency" description="p50 vs p95 · SLA band + peak">
+        <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
+        <LineChart
+          data={latency}
+          index="t"
+          series={[
+            { key: "p50", name: "p50" },
+            { key: "p95", name: "p95", dashed: true, color: "#9b5de5" },
+          ]}
+          referenceLine={{ y: 1000, label: "SLA 1s", band: true }}
+          markers={[{ x: latencyPeak.t, y: latencyPeak.p95, label: "peak", color: "#9b5de5" }]}
+          legend
+          valueFormatter={ms}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 24h" title="Sessions" description="Claude vs ChatGPT · last values">
+        <LineChart
+          data={compare}
+          index="t"
+          series={[
+            { key: "claude", name: "Claude" },
+            { key: "chatgpt", name: "ChatGPT" },
+          ]}
+          lastValueLabel
+          legend
+          valueFormatter={nf}
+        />
+      </ChartCard>
+
+      <ChartCard palette="cyan" kicker="Last 24h" title="Throughput" description="Dots · stepped curve">
+        <LineChart
+          data={tokens}
+          index="t"
+          series={[{ key: "v", name: "tokens" }]}
+          curve="step"
+          dots
+          valueFormatter={fmtK}
+        />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} loading />
+      </ChartCard>
+
+      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} />
+      </ChartCard>
+    </div>
+  </div>
+);

package/src/stories/stat.stories.tsx

@@ -0,0 +1,64 @@
+import type { Story } from "@ladle/react";
+
+import { ChartContainer } from "../components/chart-container";
+import { Stat } from "../components/stat";
+
+export default { title: "Charts/Stat" };
+
+const mulberry32 = (seed: number) => () => {
+  seed |= 0;
+  seed = (seed + 0x6d2b79f5) | 0;
+  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+};
+
+const spark = (seed: number, length = 24) => {
+  const rnd = mulberry32(seed);
+  let value = 40;
+  return Array.from({ length }, () => {
+    value = Math.max(8, value + (rnd() - 0.45) * 16);
+    return Math.round(value);
+  });
+};
+
+const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div className="flex flex-col gap-1.5">
+    <p className="type-text-xs font-medium text-subtle-foreground">{label}</p>
+    {children}
+  </div>
+);
+
+export const AllVariants: Story = () => (
+  <div className="grid max-w-3xl grid-cols-2 gap-8">
+    <Row label="Value + unit">
+      <Stat value="48,231" unit="sessions · 24h" />
+    </Row>
+
+    <Row label="Positive delta (up = good)">
+      <Stat value="1.4M" unit="tokens · 24h" delta={{ value: 8.1, direction: "up" }} />
+    </Row>
+
+    <Row label="Negative delta (down = bad)">
+      <Stat value="312" unit="errors · 24h" delta={{ value: 14.2, direction: "up", invert: true }} />
+    </Row>
+
+    <Row label="Inverted: latency down = good">
+      <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
+    </Row>
+
+    <Row label="With sparkline">
+      <Stat value="48,231" unit="sessions · 24h" delta={{ value: 12.4, direction: "up" }} sparkline={spark(7)} />
+    </Row>
+
+    <Row label="Custom delta label">
+      <Stat value="312" unit="errors · 24h" delta={{ value: 0, direction: "up", invert: true, label: "burst 16:00" }} />
+    </Row>
+
+    <Row label="Cyan palette (sparkline lead)">
+      <ChartContainer palette="cyan">
+        <Stat value="9,204" unit="tasks · 24h" delta={{ value: 22, direction: "up" }} sparkline={spark(53)} />
+      </ChartContainer>
+    </Row>
+  </div>
+);

package/src/styles/tokens.css

@@ -4,6 +4,7 @@
   --font-sans: "Inter", system-ui, sans-serif;
   --font-display: "Inter", sans-serif;
   --font-body: "Inter", sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
   --color-background: #ffffff; /* Figma: bg-primary */
   --color-foreground: #121e1e; /* Figma: fg-primary */
@@ -446,6 +447,68 @@
   }
 }
 
+/* ─── Chart canvas — control-room atmosphere for analytics surfaces ───────────
+   Apply `.chart-canvas` to a dashboard/page container holding chart cards: a
+   dotted grid faded from the top, plus a dual brand glow in dark mode. The grid
+   is masked away so it never bleeds into the cards stacked above it. */
+
+.chart-canvas {
+  position: relative;
+  isolation: isolate;
+}
+
+.chart-canvas::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    linear-gradient(var(--color-sidebar-border) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-sidebar-border) 1px, transparent 1px);
+  background-size:
+    46px 46px,
+    46px 46px;
+  opacity: 0.65;
+  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
+  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
+}
+
+.dark .chart-canvas::before {
+  background-image:
+    radial-gradient(
+      900px 480px at 78% -8%,
+      color-mix(in oklab, var(--color-cta-accent) 12%, transparent),
+      transparent 60%
+    ),
+    radial-gradient(820px 520px at 8% 4%, color-mix(in oklab, var(--color-primary) 12%, transparent), transparent 60%),
+    linear-gradient(var(--color-sidebar-border) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-sidebar-border) 1px, transparent 1px);
+  background-size:
+    100% 100%,
+    100% 100%,
+    46px 46px,
+    46px 46px;
+  opacity: 0.6;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .chart-rise {
+    animation: chart-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  }
+}
+
+@keyframes chart-rise {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* ─── Typography ──────────────────────────────────────────────────────────── */
 
 :root {