diff --git a/CHANGELOG.md b/CHANGELOG.md index 523975a..8a634bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,52 @@ All notable changes to `@ossrandom/design-system` are documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/). +## [Unreleased] + +### Changed — `ServiceMap` + +- **Visual refresh.** Nodes are now small dots (was: `round-rectangle` 80 × 36 cards). Diameter is computed from each node's degree (in + out edge count) using `√degree` scaling — 6 px (isolated) → 28 px (densest hub) — so hubs surface visually without dwarfing leaves. Status now drives the **fill color** (`success` / `warning` / `danger`), not just a border accent. +- **Node labels moved below the dot** (was: centered, inside the card). Light weight, no background pill — pills covered edges. Z-order keeps dots above edges and labels beside them. +- **Edges now declare direction and labels.** + - Cytoscape path: `target-arrow-shape: triangle`, `arrow-scale: 0.9`. `ServiceEdge.label` is rendered with `text-rotation: autorotate` but `text-opacity: 0` until the edge enters a focus set. + - deck.gl path: already directional via `ArcLayer` (gradient `source → target`); no behavior change. +- **Hover / touch focus highlight.** Hovering or tapping a node dims everything else to ~18 % opacity and lights the focused node (accent border, weight 500), its incident edges (accent stroke, 2 px, edge label revealed), and its direct neighbors. Hovering an edge lights both endpoints. Touch start triggers the same focus on the canvas path. `pointerleave` and an empty-area click clear focus. +- **WebGL highlight is in-place.** The deck.gl path builds an adjacency map up front and re-renders highlight state via `inst.setProps({ layers })` with `updateTriggers` keyed on the focus id — no full context re-init per hover. + +### Internal + +- New `computeDegrees(nodes, edges)` and `degreeRadius(deg, max)` helpers in `src/charts/ServiceMap.tsx`. `PositionedNode` extended with a precomputed `degree` field threaded through both rendering paths. +- New Cytoscape stylesheet classes `.rcs-dim`, `.rcs-focus`, `.rcs-focus-edge`, `.rcs-neighbor` with 120 ms transitions on opacity, color, and border-width. +- Tiny `cssEscape()` polyfill for Cytoscape ID selectors when `CSS.escape` is unavailable. + +## [0.3.0] — 2026-04-28 + +### Added + +- **Charts module** at the new `@ossrandom/design-system/charts` subpath — opt-in to keep the main entry zero-dep: + - **`Chart`** — line / area / bar / scatter time-series. Renders with `uplot` (canvas) when installed; falls back to inline SVG for small datasets. Auto-handoff to WebGL via `@deck.gl/core` + `@deck.gl/layers` once a series crosses ~100k points. Pan / zoom / crosshair / synced cursors across stacked panels; tabular tooltips with `Signal Red` accent. + - **`Sparkline`** — zero-dep inline SVG. `data: number[]`, optional `showArea`. Designed to drop into `Stat` tiles (80×24 default). Handles flat (range = 0) inputs without NaN. + - **`Donut`** + **`RadialGauge`** — zero-dep SVG. `Donut` takes typed `DonutSegment[]`, optional center label / value, optional legend, per-segment click handler. `RadialGauge` is a 270° arc with `tone: "good" | "warning" | "bad"`. + - **`UptimeBar`** — 90-day status grid on canvas. `UptimeCell[]` with `status: "operational" | "degraded" | "outage" | "maintenance" | "no-data"`; cursor-tracking tooltip; quadtree picking. + - **`Treemap`** — squarified treemap. Loads `d3-hierarchy` lazily; falls back to a built-in squarify pass when not installed. Canvas2d at any size, WebGL handoff on `>50k` leaves. + - **`ServiceMap`** — directed graph for production topology. Loads `cytoscape` + `cytoscape-cose-bilkent` lazily; falls back to a small force-directed canvas. Status-keyed node strokes (`healthy` / `degraded` / `failing` / `unknown`), arrow markers on edges, drag-to-pan, scroll-to-zoom. + +- **Optional peer deps** (`peerDependenciesMeta`): `uplot`, `d3-hierarchy`, `d3-force`, `cytoscape`, `cytoscape-cose-bilkent`, `@deck.gl/core`, `@deck.gl/layers`. The main entry imports none of them — install only what the charts you render require. + +- **Chart theming**: `readChartTheme()` + `onThemeChange()` exported from `/charts` — hook a custom renderer to the same tokens (`--accent`, `--fg-1`, `--bg-2`, `--font-mono`, …) and re-render on `data-theme` swap. + +- **Tokens**: `--elevation-tooltip` for chart tooltips; engine-badge surfaces `[data-engine]` attribute on chart roots — opt-in dev badge via `--rcs-show-engine: 1`. + +### Notes + +No breaking changes. Existing imports from `@ossrandom/design-system` continue to work unchanged. To use charts: + +```tsx +import { Chart, Sparkline, Donut } from "@ossrandom/design-system/charts"; +``` + +…and `pnpm add` the peer deps for the charts you render. + ## [0.2.1] — 2026-04-27 ### Fixed diff --git a/README.md b/README.md index 8fa88c9..f6566f9 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,7 @@ export function Dashboard({ services }: { services: readonly Service[] }) { ## What's in the box - **50+ React components** — Buttons, Inputs, Form controls, Layout primitives, Navigation, Feedback, Data display, Chat, Code/Markdown/Terminal/RTE, plus `ThemeProvider` + imperative `toast` +- **Charts** (opt-in subpath) — `Chart` (line/area/bar/scatter), `Sparkline`, `Donut`, `RadialGauge`, `UptimeBar`, `Treemap`, `ServiceMap` — see [Charts](#charts) below - **Strongly-typed token unions** (`Size`, `SpaceSize`, `Radius`, `ThemeMode`, `BrandColor`, `Direction`, `Axis`, …) - **Generic components**: `Select`, `Combobox`, `Tabs`, `Menu`, `RadioGroup`, `Table` - **Strict TypeScript** — full type definitions emitted to `dist/`, source maps + declaration maps included @@ -135,6 +136,83 @@ import { ThemeProvider, ToastRegion, toast } from "@ossrandom/design-system"; ``` +## Charts + +Charts ship behind an opt-in subpath because they pull heavier peer deps. The main entry stays zero-dep — you only pay for charts if you import them. + +```tsx +import { + Chart, Sparkline, Donut, RadialGauge, + UptimeBar, Treemap, ServiceMap, +} from "@ossrandom/design-system/charts"; +``` + +Install the peer deps for the charts you actually render: + +| Component | Peer dep | Fallback | +| ------------------------- | ---------------------------------------------- | ----------------------------------- | +| `Chart` (time-series) | `uplot` | SVG renderer (small datasets only) | +| `Sparkline` | — | inline SVG, zero deps | +| `Donut` / `RadialGauge` | — | inline SVG, zero deps | +| `UptimeBar` | — | canvas2d, zero deps | +| `Treemap` | `d3-hierarchy` | canvas2d squarify | +| `ServiceMap` | `cytoscape` + `cytoscape-cose-bilkent` | force-directed canvas | + +Charts auto-handoff to WebGL (`@deck.gl/core`, `@deck.gl/layers`) when the dataset crosses an engine threshold (`Chart` ≥100k points; `ServiceMap` ≥200 nodes). The `data-engine` attribute on the rendered root reflects the active backend (`svg` / `canvas` / `webgl`); set `--rcs-show-engine: 1` to surface a dev badge. + +All chart components read tokens via `readChartTheme()` and re-render on `data-theme` swap — `Signal Red` accent, mono micro-labels, tabular numerics out of the box. + +#### `ServiceMap` — interaction model + +`ServiceMap` is a directed graph; semantics live in the data, not the visuals on top of it. + +- **Direction.** Edges flow `source → target` with arrowheads at the target end. The deck.gl path uses `ArcLayer` (gradient source/target colors); the canvas path uses Cytoscape's bezier curve with a `triangle` arrow. +- **Node size = degree.** Each dot's radius is computed from `in + out` edge count using `√degree` scaling — 3 px (isolated) → 14 px (densest hub). Hubs surface visually without dwarfing leaves. +- **Status drives fill.** `healthy` / `degraded` / `failing` / `unknown` map to the `success` / `warning` / `danger` / `fg-3` tokens. Failing edges paint in `danger`. +- **Labels.** Node labels sit below each dot in a light weight (`font-weight: 400`, `color: --fg-3`) so they don't compete with edges. Edge labels (`label?: string` on `ServiceEdge`) are rendered but hidden by default — they reveal only when their edge is in the focus set. +- **Hover / touch focus.** Hovering or tapping a node dims the rest of the graph to ~18 % opacity and lights the focused node, its incident edges, its neighbors, and the edge labels for those incident edges. Hovering an edge lights the edge plus both endpoints. `pointerleave` clears the focus state. +- **Engine handoff.** Auto resolves to `webgpu` › `webgl` › `canvas` based on `nodes + edges` count vs. the threshold. The deck.gl path uses an internal adjacency map and `setProps({ layers })` to re-render highlight state without rebuilding the WebGL context. + +```tsx + console.log("node:", n.id)} +/> +``` + +```tsx + + + + + +``` + ## Local development ```bash diff --git a/package.json b/package.json index 9d1f0f2..1193e3e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ossrandom/design-system", - "version": "0.2.1", + "version": "0.3.0", "description": "RandomCodeSpace Design System — strongly-typed React component definitions.", "keywords": [ "design-system", @@ -36,6 +36,10 @@ "types": "./dist/tokens.d.ts", "import": "./dist/tokens.js" }, + "./charts": { + "types": "./dist/charts/index.d.ts", + "import": "./dist/charts/index.js" + }, "./styles.css": "./dist/styles.css" }, "files": [ @@ -62,7 +66,23 @@ }, "peerDependencies": { "react": ">=18", - "react-dom": ">=18" + "react-dom": ">=18", + "uplot": "^1.6.0", + "d3-hierarchy": "^3.0.0", + "d3-force": "^3.0.0", + "cytoscape": "^3.30.0", + "cytoscape-cose-bilkent": "^4.1.0", + "@deck.gl/core": "^9.0.0", + "@deck.gl/layers": "^9.0.0" + }, + "peerDependenciesMeta": { + "uplot": { "optional": true }, + "d3-hierarchy": { "optional": true }, + "d3-force": { "optional": true }, + "cytoscape": { "optional": true }, + "cytoscape-cose-bilkent": { "optional": true }, + "@deck.gl/core": { "optional": true }, + "@deck.gl/layers": { "optional": true } }, "devDependencies": { "@babel/standalone": "^7.29.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 97a17d6..075f83e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,28 @@ settings: importers: .: + dependencies: + '@deck.gl/core': + specifier: ^9.0.0 + version: 9.3.1 + '@deck.gl/layers': + specifier: ^9.0.0 + version: 9.3.1(@deck.gl/core@9.3.1)(@loaders.gl/core@4.4.1)(@luma.gl/core@9.3.3)(@luma.gl/engine@9.3.3(@luma.gl/core@9.3.3)(@luma.gl/shadertools@9.3.3(@luma.gl/core@9.3.3))) + cytoscape: + specifier: ^3.30.0 + version: 3.33.2 + cytoscape-cose-bilkent: + specifier: ^4.1.0 + version: 4.1.0(cytoscape@3.33.2) + d3-force: + specifier: ^3.0.0 + version: 3.0.0 + d3-hierarchy: + specifier: ^3.0.0 + version: 3.1.2 + uplot: + specifier: ^1.6.0 + version: 1.6.32 devDependencies: '@babel/standalone': specifier: ^7.29.0 @@ -159,6 +181,17 @@ packages: resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==} engines: {node: '>=20.19.0'} + '@deck.gl/core@9.3.1': + resolution: {integrity: sha512-uixmBJhaAAgjzppcJ+0Hh2R1BYvFHvCHFReXN93iQxQoNB3VCC03pGEhZ0hrW7hcVLC8ExCUrg8VRJW60wXzcA==} + + '@deck.gl/layers@9.3.1': + resolution: {integrity: sha512-gUT/UMrmSCYsJCyv78qjHdeZVnqDexX61WxNP3dUa7ZplXiG3NxZvjhS0PYeBLritOtCJSv3b13vR2ka+j49ZQ==} + peerDependencies: + '@deck.gl/core': ~9.3.0 + '@loaders.gl/core': ^4.4.1 + '@luma.gl/core': ~9.3.2 + '@luma.gl/engine': ~9.3.2 + '@emnapi/core@1.10.0': resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==} @@ -401,6 +434,67 @@ packages: '@jridgewell/trace-mapping@0.3.31': resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} + '@loaders.gl/core@4.4.1': + resolution: {integrity: sha512-/s4IuvCCQUepvhjLnmePwQppGko2d1pxRS+sp7lyExU0uiqo5dVsAKaCZ2VnddBkFWgDVb/wvcZUBmv/dWcj0Q==} + + '@loaders.gl/images@4.4.1': + resolution: {integrity: sha512-v9A4BliEKGxhLuEbh0Ke8ElUlp04KxpKIknUtXXWoEaszAMTSrHI3YhaL/JdRlHraC1VUF/sjzbSBFkKh7nxJg==} + peerDependencies: + '@loaders.gl/core': ~4.4.0 + + '@loaders.gl/loader-utils@4.4.1': + resolution: {integrity: sha512-waosL7VtVRfXsNOXtAM3rOjZyNQD0lQBlhuB5/oY+E+lNzYNFlzgiGXiDOwBpcs7dK7kW2Vv8+KcxyIGIyXOtg==} + + '@loaders.gl/schema-utils@4.4.1': + resolution: {integrity: sha512-4upip2O6MFaWzk68/lnna7P2uRj9NQ8MIk/ff3CLbciP5/9lKl1qyuzObz5JrJRYzfGB6I81vpOn6FSVQ6m6KQ==} + peerDependencies: + '@loaders.gl/core': ~4.4.0 + + '@loaders.gl/schema@4.4.1': + resolution: {integrity: sha512-s7NjEnyK6jZvJJSWj/mHq+S9mHRHVzIYtFP+C7sMf1gVCQbdkt6OSAMUWRzwPr9+whQNVWjZ9pbLsI/IPW3zvw==} + + '@loaders.gl/worker-utils@4.4.1': + resolution: {integrity: sha512-ovMyIyj9dlChuHuD64Bel7Mir2UYlmLqlZ9MMzVxzTTLvaudJoNAXi6Disp0ooxwF62ZqjNXXutaSbS6UDeuIg==} + peerDependencies: + '@loaders.gl/core': ~4.4.0 + + '@luma.gl/core@9.3.3': + resolution: {integrity: sha512-jCFm2htvrVpcXIy85TBTF1ROgMfknKnfw2OH+Vydr41hiCFd6nqr79gM3f2uhaNkal0BghFNqF3qDioKiUWtew==} + + '@luma.gl/engine@9.3.3': + resolution: {integrity: sha512-StmMTzUcUlpKMU3wvWU48A6OQyphptD9zVGBsSkK6iHIBdtBKlOcmqRkyfvRouo8JHtlrnoJDHLVKhxorwhGAg==} + peerDependencies: + '@luma.gl/core': ~9.3.0 + '@luma.gl/shadertools': ~9.3.0 + + '@luma.gl/shadertools@9.3.3': + resolution: {integrity: sha512-4ZfG4/Utix951vqyiG/JIx+Eg+GMNwOxgr/07/i0gf7bK1gJZIEQ5BxVcDw4MCQfdoVlGPGzl0cQKbdqBvaCAQ==} + peerDependencies: + '@luma.gl/core': ~9.3.0 + + '@luma.gl/webgl@9.3.3': + resolution: {integrity: sha512-X+aavdP5o6VFHSA0es9gKZTT145jfcFbhKJt/gwJrptnKNoIW4+Y37ZEpCo1AzAnr+FQCxjgcM2kOCpoWMfSVA==} + peerDependencies: + '@luma.gl/core': ~9.3.0 + + '@mapbox/tiny-sdf@2.1.0': + resolution: {integrity: sha512-uFJhNh36BR4OCuWIEiWaEix9CA2WzT6CAIcqVjWYpnx8+QDtS+oC4QehRrx5cX4mgWs37MmKnwUejeHxVymzNg==} + + '@math.gl/core@4.1.0': + resolution: {integrity: sha512-FrdHBCVG3QdrworwrUSzXIaK+/9OCRLscxI2OUy6sLOHyHgBMyfnEGs99/m3KNvs+95BsnQLWklVfpKfQzfwKA==} + + '@math.gl/polygon@4.1.0': + resolution: {integrity: sha512-YA/9PzaCRHbIP5/0E9uTYrqe+jsYTQoqoDWhf6/b0Ixz8bPZBaGDEafLg3z7ffBomZLacUty9U3TlPjqMtzPjA==} + + '@math.gl/sun@4.1.0': + resolution: {integrity: sha512-i3q6OCBLSZ5wgZVhXg+X7gsjY/TUtuFW/2KBiq/U1ypLso3S4sEykoU/MGjxUv1xiiGtr+v8TeMbO1OBIh/HmA==} + + '@math.gl/types@4.1.0': + resolution: {integrity: sha512-clYZdHcmRvMzVK5fjeDkQlHUzXQSNdZ7s4xOqC3nJPgz4C/TZkUecTo9YS4PruZqtDda/ag4erndP0MIn40dGA==} + + '@math.gl/web-mercator@4.1.0': + resolution: {integrity: sha512-HZo3vO5GCMkXJThxRJ5/QYUYRr3XumfT8CzNNCwoJfinxy5NtKUd7dusNTXn7yJ40UoB8FMIwkVwNlqaiRZZAw==} + '@napi-rs/wasm-runtime@1.1.4': resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==} peerDependencies: @@ -415,6 +509,15 @@ packages: engines: {node: '>=18'} hasBin: true + '@probe.gl/env@4.1.1': + resolution: {integrity: sha512-+68seNDMVsEegRB47pFA/Ws1Fjy8agcFYXxzorKToyPcD6zd+gZ5uhwoLd7TzsSw6Ydns//2KEszWn+EnNHTbA==} + + '@probe.gl/log@4.1.1': + resolution: {integrity: sha512-kcZs9BT44pL7hS1OkRGKYRXI/SN9KejUlPD+BY40DguRLzdC5tLG/28WGMyfKdn/51GT4a0p+0P8xvDn1Ez+Kg==} + + '@probe.gl/stats@4.1.1': + resolution: {integrity: sha512-4VpAyMHOqydSvPlEyHwXaE+AkIdR03nX+Qhlxsk2D/IW4OVmDZgIsvJB1cDzyEEtcfKcnaEbfXeiPgejBceT6g==} + '@rolldown/binding-android-arm64@1.0.0-rc.17': resolution: {integrity: sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ==} engines: {node: ^20.19.0 || >=22.12.0} @@ -510,6 +613,9 @@ packages: '@standard-schema/spec@1.1.0': resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} + '@swc/helpers@0.5.21': + resolution: {integrity: sha512-jI/VAmtdjB/RnI8GTnokyX7Ug8c+g+ffD6QRLa6XQewtnGyukKkKSk3wLTM3b5cjt1jNh9x0jfVlagdN2gDKQg==} + '@testing-library/dom@10.4.1': resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==} engines: {node: '>=18'} @@ -548,18 +654,33 @@ packages: '@types/chai@5.2.3': resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==} + '@types/command-line-args@5.2.3': + resolution: {integrity: sha512-uv0aG6R0Y8WHZLTamZwtfsDLVRnOa+n+n5rEvFWL5Na5gZ8V2Teab/duDPFzIIIhs9qizDpcavCusCLJZu62Kw==} + + '@types/command-line-usage@5.0.4': + resolution: {integrity: sha512-BwR5KP3Es/CSht0xqBcUXS3qCAUVXwpRKsV2+arxeb65atasuXG9LykC9Ab10Cw3s2raH92ZqOeILaQbsB2ACg==} + '@types/deep-eql@4.0.2': resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==} '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + '@types/geojson@7946.0.16': + resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==} + '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} '@types/node@22.19.17': resolution: {integrity: sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q==} + '@types/node@24.12.2': + resolution: {integrity: sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==} + + '@types/offscreencanvas@2019.7.3': + resolution: {integrity: sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==} + '@types/react-dom@19.2.3': resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==} peerDependencies: @@ -690,6 +811,10 @@ packages: resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==} engines: {node: '>=10'} + apache-arrow@21.1.0: + resolution: {integrity: sha512-kQrYLxhC+NTVVZ4CCzGF6L/uPVOzJmD1T3XgbiUnP7oTeVFOFgEUu6IKNwCDkpFoBVqDKQivlX4RUFqqnWFlEA==} + hasBin: true + argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} @@ -700,6 +825,10 @@ packages: resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==} engines: {node: '>= 0.4'} + array-back@6.2.3: + resolution: {integrity: sha512-SGDvmg6QTYiTxCBkYVmThcoa67uLl35pyzRHdpCGBOcqFy6BtwnphoFPk7LhJshD+Yk1Kt35WGWeZPTgwR4Fhw==} + engines: {node: '>=12.17'} + assertion-error@2.0.1: resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} engines: {node: '>=12'} @@ -732,6 +861,10 @@ packages: resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==} engines: {node: '>=18'} + chalk-template@0.4.0: + resolution: {integrity: sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==} + engines: {node: '>=12'} + chalk@4.1.2: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} engines: {node: '>=10'} @@ -743,12 +876,28 @@ packages: color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + command-line-args@6.0.2: + resolution: {integrity: sha512-AIjYVxrV9X752LmPDLbVYv8aMCuHPSLZJXEo2qo/xJfv+NYhaZ4sMSF01rM+gHPaMgvPM0l5D/F+Qx+i2WfSmQ==} + engines: {node: '>=12.20'} + peerDependencies: + '@75lb/nature': latest + peerDependenciesMeta: + '@75lb/nature': + optional: true + + command-line-usage@7.0.4: + resolution: {integrity: sha512-85UdvzTNx/+s5CkSgBm/0hzP80RFHAa7PsfeADE5ezZF3uHz3/Tqj9gIKGT9PTtpycc3Ua64T0oVulGfKxzfqg==} + engines: {node: '>=12.20.0'} + concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + cose-base@1.0.3: + resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==} + cross-spawn@7.0.6: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} @@ -763,6 +912,35 @@ packages: csstype@3.2.3: resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} + cytoscape-cose-bilkent@4.1.0: + resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==} + peerDependencies: + cytoscape: ^3.2.0 + + cytoscape@3.33.2: + resolution: {integrity: sha512-sj4HXd3DokGhzZAdjDejGvTPLqlt84vNFN8m7bGsOzDY5DyVcxIb2ejIXat2Iy7HxWhdT/N1oKyheJ5YdpsGuw==} + engines: {node: '>=0.10'} + + d3-dispatch@3.0.1: + resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==} + engines: {node: '>=12'} + + d3-force@3.0.0: + resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==} + engines: {node: '>=12'} + + d3-hierarchy@3.1.2: + resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==} + engines: {node: '>=12'} + + d3-quadtree@3.0.1: + resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==} + engines: {node: '>=12'} + + d3-timer@3.0.1: + resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==} + engines: {node: '>=12'} + data-urls@7.0.0: resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==} engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} @@ -796,6 +974,9 @@ packages: dom-accessibility-api@0.6.3: resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} + earcut@2.2.4: + resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==} + entities@8.0.0: resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==} engines: {node: '>=20.19.0'} @@ -887,6 +1068,15 @@ packages: resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==} engines: {node: '>=16.0.0'} + find-replace@5.0.2: + resolution: {integrity: sha512-Y45BAiE3mz2QsrN2fb5QEtO4qb44NcS7en/0y9PEVsg351HsLeVclP8QPMH79Le9sH3rs5RSwJu99W0WPZO43Q==} + engines: {node: '>=14'} + peerDependencies: + '@75lb/nature': latest + peerDependenciesMeta: + '@75lb/nature': + optional: true + find-up@5.0.0: resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} engines: {node: '>=10'} @@ -895,6 +1085,9 @@ packages: resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==} engines: {node: '>=16'} + flatbuffers@25.9.23: + resolution: {integrity: sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ==} + flatted@3.4.2: resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==} @@ -908,6 +1101,9 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] + gl-matrix@3.4.4: + resolution: {integrity: sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==} + glob-parent@6.0.2: resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} engines: {node: '>=10.13.0'} @@ -992,6 +1188,10 @@ packages: canvas: optional: true + json-bignum@0.0.3: + resolution: {integrity: sha512-2WHyXj3OfHSgNyuzDbSxI1w2jgw5gkWSWhS7Qg4bWXx1nLk3jnbwfUeS0PSba3IzpTUWdHxBieELUzXRjQB2zg==} + engines: {node: '>=0.8'} + json-buffer@3.0.1: resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} @@ -1004,6 +1204,9 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + layout-base@1.0.2: + resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==} + levn@0.4.1: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} @@ -1082,6 +1285,9 @@ packages: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} + lodash.camelcase@4.3.0: + resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} + lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} @@ -1117,6 +1323,9 @@ packages: minimatch@3.1.5: resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==} + mjolnir.js@3.0.0: + resolution: {integrity: sha512-siX3YCG7N2HnmN1xMH3cK4JkUZJhbkhRFJL+G5N1vH0mh1t5088rJknIoqDFWDIU6NPGvRRgLnYW3ZHjSMEBLA==} + ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -1271,6 +1480,10 @@ packages: symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} + table-layout@4.1.1: + resolution: {integrity: sha512-iK5/YhZxq5GO5z8wb0bY1317uDF3Zjpha0QFFLA8/trAoiLbQD0HUbMesEaxyzUgDxi2QlcbM8IvqOlEjgoXBA==} + engines: {node: '>=12.17'} + tinybench@2.9.0: resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} @@ -1319,13 +1532,23 @@ packages: engines: {node: '>=14.17'} hasBin: true + typical@7.3.0: + resolution: {integrity: sha512-ya4mg/30vm+DOWfBg4YK3j2WD6TWtRkCbasOJr40CseYENzCUby/7rIvXA99JGsQHeNxLbnXdyLLxKSv3tauFw==} + engines: {node: '>=12.17'} + undici-types@6.21.0: resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==} + undici-types@7.16.0: + resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==} + undici@7.25.0: resolution: {integrity: sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==} engines: {node: '>=20.18.1'} + uplot@1.6.32: + resolution: {integrity: sha512-KIMVnG68zvu5XXUbC4LQEPnhwOxBuLyW1AHtpm6IKTXImkbLgkMy+jabjLgSLMasNuGGzQm/ep3tOkyTxpiQIw==} + uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} @@ -1443,6 +1666,10 @@ packages: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} + wordwrapjs@5.1.1: + resolution: {integrity: sha512-0yweIbkINJodk27gX9LBGMzyQdBDan3s/dEAiwBOj+Mf0PPyWL6/rikalkv8EeD0E8jm4o5RXEOrFTP3NXbhJg==} + engines: {node: '>=12.17'} + xml-name-validator@5.0.0: resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==} engines: {node: '>=18'} @@ -1531,6 +1758,44 @@ snapshots: '@csstools/css-tokenizer@4.0.0': {} + '@deck.gl/core@9.3.1': + dependencies: + '@loaders.gl/core': 4.4.1 + '@loaders.gl/images': 4.4.1(@loaders.gl/core@4.4.1) + '@luma.gl/core': 9.3.3 + '@luma.gl/engine': 9.3.3(@luma.gl/core@9.3.3)(@luma.gl/shadertools@9.3.3(@luma.gl/core@9.3.3)) + '@luma.gl/shadertools': 9.3.3(@luma.gl/core@9.3.3) + '@luma.gl/webgl': 9.3.3(@luma.gl/core@9.3.3) + '@math.gl/core': 4.1.0 + '@math.gl/sun': 4.1.0 + '@math.gl/types': 4.1.0 + '@math.gl/web-mercator': 4.1.0 + '@probe.gl/env': 4.1.1 + '@probe.gl/log': 4.1.1 + '@probe.gl/stats': 4.1.1 + '@types/offscreencanvas': 2019.7.3 + gl-matrix: 3.4.4 + mjolnir.js: 3.0.0 + transitivePeerDependencies: + - '@75lb/nature' + + '@deck.gl/layers@9.3.1(@deck.gl/core@9.3.1)(@loaders.gl/core@4.4.1)(@luma.gl/core@9.3.3)(@luma.gl/engine@9.3.3(@luma.gl/core@9.3.3)(@luma.gl/shadertools@9.3.3(@luma.gl/core@9.3.3)))': + dependencies: + '@deck.gl/core': 9.3.1 + '@loaders.gl/core': 4.4.1 + '@loaders.gl/images': 4.4.1(@loaders.gl/core@4.4.1) + '@loaders.gl/schema': 4.4.1 + '@luma.gl/core': 9.3.3 + '@luma.gl/engine': 9.3.3(@luma.gl/core@9.3.3)(@luma.gl/shadertools@9.3.3(@luma.gl/core@9.3.3)) + '@luma.gl/shadertools': 9.3.3(@luma.gl/core@9.3.3) + '@mapbox/tiny-sdf': 2.1.0 + '@math.gl/core': 4.1.0 + '@math.gl/polygon': 4.1.0 + '@math.gl/web-mercator': 4.1.0 + earcut: 2.2.4 + transitivePeerDependencies: + - '@75lb/nature' + '@emnapi/core@1.10.0': dependencies: '@emnapi/wasi-threads': 1.2.1 @@ -1698,6 +1963,100 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 + '@loaders.gl/core@4.4.1': + dependencies: + '@loaders.gl/loader-utils': 4.4.1(@loaders.gl/core@4.4.1) + '@loaders.gl/schema': 4.4.1 + '@loaders.gl/schema-utils': 4.4.1(@loaders.gl/core@4.4.1) + '@loaders.gl/worker-utils': 4.4.1(@loaders.gl/core@4.4.1) + '@probe.gl/log': 4.1.1 + transitivePeerDependencies: + - '@75lb/nature' + + '@loaders.gl/images@4.4.1(@loaders.gl/core@4.4.1)': + dependencies: + '@loaders.gl/core': 4.4.1 + '@loaders.gl/loader-utils': 4.4.1(@loaders.gl/core@4.4.1) + transitivePeerDependencies: + - '@75lb/nature' + + '@loaders.gl/loader-utils@4.4.1(@loaders.gl/core@4.4.1)': + dependencies: + '@loaders.gl/schema': 4.4.1 + '@loaders.gl/worker-utils': 4.4.1(@loaders.gl/core@4.4.1) + '@probe.gl/log': 4.1.1 + '@probe.gl/stats': 4.1.1 + transitivePeerDependencies: + - '@75lb/nature' + - '@loaders.gl/core' + + '@loaders.gl/schema-utils@4.4.1(@loaders.gl/core@4.4.1)': + dependencies: + '@loaders.gl/core': 4.4.1 + '@loaders.gl/schema': 4.4.1 + '@types/geojson': 7946.0.16 + apache-arrow: 21.1.0 + transitivePeerDependencies: + - '@75lb/nature' + + '@loaders.gl/schema@4.4.1': + dependencies: + '@types/geojson': 7946.0.16 + apache-arrow: 21.1.0 + transitivePeerDependencies: + - '@75lb/nature' + + '@loaders.gl/worker-utils@4.4.1(@loaders.gl/core@4.4.1)': + dependencies: + '@loaders.gl/core': 4.4.1 + + '@luma.gl/core@9.3.3': + dependencies: + '@math.gl/types': 4.1.0 + '@probe.gl/env': 4.1.1 + '@probe.gl/log': 4.1.1 + '@probe.gl/stats': 4.1.1 + '@types/offscreencanvas': 2019.7.3 + + '@luma.gl/engine@9.3.3(@luma.gl/core@9.3.3)(@luma.gl/shadertools@9.3.3(@luma.gl/core@9.3.3))': + dependencies: + '@luma.gl/core': 9.3.3 + '@luma.gl/shadertools': 9.3.3(@luma.gl/core@9.3.3) + '@math.gl/core': 4.1.0 + '@math.gl/types': 4.1.0 + '@probe.gl/log': 4.1.1 + '@probe.gl/stats': 4.1.1 + + '@luma.gl/shadertools@9.3.3(@luma.gl/core@9.3.3)': + dependencies: + '@luma.gl/core': 9.3.3 + '@math.gl/core': 4.1.0 + '@math.gl/types': 4.1.0 + + '@luma.gl/webgl@9.3.3(@luma.gl/core@9.3.3)': + dependencies: + '@luma.gl/core': 9.3.3 + '@math.gl/types': 4.1.0 + '@probe.gl/env': 4.1.1 + + '@mapbox/tiny-sdf@2.1.0': {} + + '@math.gl/core@4.1.0': + dependencies: + '@math.gl/types': 4.1.0 + + '@math.gl/polygon@4.1.0': + dependencies: + '@math.gl/core': 4.1.0 + + '@math.gl/sun@4.1.0': {} + + '@math.gl/types@4.1.0': {} + + '@math.gl/web-mercator@4.1.0': + dependencies: + '@math.gl/core': 4.1.0 + '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)': dependencies: '@emnapi/core': 1.10.0 @@ -1711,6 +2070,14 @@ snapshots: dependencies: playwright: 1.59.1 + '@probe.gl/env@4.1.1': {} + + '@probe.gl/log@4.1.1': + dependencies: + '@probe.gl/env': 4.1.1 + + '@probe.gl/stats@4.1.1': {} + '@rolldown/binding-android-arm64@1.0.0-rc.17': optional: true @@ -1764,6 +2131,10 @@ snapshots: '@standard-schema/spec@1.1.0': {} + '@swc/helpers@0.5.21': + dependencies: + tslib: 2.8.1 + '@testing-library/dom@10.4.1': dependencies: '@babel/code-frame': 7.29.0 @@ -1810,16 +2181,28 @@ snapshots: '@types/deep-eql': 4.0.2 assertion-error: 2.0.1 + '@types/command-line-args@5.2.3': {} + + '@types/command-line-usage@5.0.4': {} + '@types/deep-eql@4.0.2': {} '@types/estree@1.0.8': {} + '@types/geojson@7946.0.16': {} + '@types/json-schema@7.0.15': {} '@types/node@22.19.17': dependencies: undici-types: 6.21.0 + '@types/node@24.12.2': + dependencies: + undici-types: 7.16.0 + + '@types/offscreencanvas@2019.7.3': {} + '@types/react-dom@19.2.3(@types/react@19.2.14)': dependencies: '@types/react': 19.2.14 @@ -1995,6 +2378,20 @@ snapshots: ansi-styles@5.2.0: {} + apache-arrow@21.1.0: + dependencies: + '@swc/helpers': 0.5.21 + '@types/command-line-args': 5.2.3 + '@types/command-line-usage': 5.0.4 + '@types/node': 24.12.2 + command-line-args: 6.0.2 + command-line-usage: 7.0.4 + flatbuffers: 25.9.23 + json-bignum: 0.0.3 + tslib: 2.8.1 + transitivePeerDependencies: + - '@75lb/nature' + argparse@2.0.1: {} aria-query@5.3.0: @@ -2003,6 +2400,8 @@ snapshots: aria-query@5.3.2: {} + array-back@6.2.3: {} + assertion-error@2.0.1: {} ast-v8-to-istanbul@1.0.0: @@ -2032,6 +2431,10 @@ snapshots: chai@6.2.2: {} + chalk-template@0.4.0: + dependencies: + chalk: 4.1.2 + chalk@4.1.2: dependencies: ansi-styles: 4.3.0 @@ -2043,10 +2446,28 @@ snapshots: color-name@1.1.4: {} + command-line-args@6.0.2: + dependencies: + array-back: 6.2.3 + find-replace: 5.0.2 + lodash.camelcase: 4.3.0 + typical: 7.3.0 + + command-line-usage@7.0.4: + dependencies: + array-back: 6.2.3 + chalk-template: 0.4.0 + table-layout: 4.1.1 + typical: 7.3.0 + concat-map@0.0.1: {} convert-source-map@2.0.0: {} + cose-base@1.0.3: + dependencies: + layout-base: 1.0.2 + cross-spawn@7.0.6: dependencies: path-key: 3.1.1 @@ -2062,6 +2483,27 @@ snapshots: csstype@3.2.3: {} + cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.2): + dependencies: + cose-base: 1.0.3 + cytoscape: 3.33.2 + + cytoscape@3.33.2: {} + + d3-dispatch@3.0.1: {} + + d3-force@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-quadtree: 3.0.1 + d3-timer: 3.0.1 + + d3-hierarchy@3.1.2: {} + + d3-quadtree@3.0.1: {} + + d3-timer@3.0.1: {} + data-urls@7.0.0: dependencies: whatwg-mimetype: 5.0.0 @@ -2085,6 +2527,8 @@ snapshots: dom-accessibility-api@0.6.3: {} + earcut@2.2.4: {} + entities@8.0.0: {} es-module-lexer@2.1.0: {} @@ -2208,6 +2652,8 @@ snapshots: dependencies: flat-cache: 4.0.1 + find-replace@5.0.2: {} + find-up@5.0.0: dependencies: locate-path: 6.0.0 @@ -2218,6 +2664,8 @@ snapshots: flatted: 3.4.2 keyv: 4.5.4 + flatbuffers@25.9.23: {} + flatted@3.4.2: {} fsevents@2.3.2: @@ -2226,6 +2674,8 @@ snapshots: fsevents@2.3.3: optional: true + gl-matrix@3.4.4: {} + glob-parent@6.0.2: dependencies: is-glob: 4.0.3 @@ -2312,6 +2762,8 @@ snapshots: transitivePeerDependencies: - '@noble/hashes' + json-bignum@0.0.3: {} + json-buffer@3.0.1: {} json-schema-traverse@0.4.1: {} @@ -2322,6 +2774,8 @@ snapshots: dependencies: json-buffer: 3.0.1 + layout-base@1.0.2: {} + levn@0.4.1: dependencies: prelude-ls: 1.2.1 @@ -2380,6 +2834,8 @@ snapshots: dependencies: p-locate: 5.0.0 + lodash.camelcase@4.3.0: {} + lodash.merge@4.6.2: {} lru-cache@11.3.5: {} @@ -2412,6 +2868,8 @@ snapshots: dependencies: brace-expansion: 1.1.14 + mjolnir.js@3.0.0: {} + ms@2.1.3: {} nanoid@3.3.11: {} @@ -2552,6 +3010,11 @@ snapshots: symbol-tree@3.2.4: {} + table-layout@4.1.1: + dependencies: + array-back: 6.2.3 + wordwrapjs: 5.1.1 + tinybench@2.9.0: {} tinyexec@1.1.1: {} @@ -2581,8 +3044,7 @@ snapshots: dependencies: typescript: 5.9.3 - tslib@2.8.1: - optional: true + tslib@2.8.1: {} type-check@0.4.0: dependencies: @@ -2590,10 +3052,16 @@ snapshots: typescript@5.9.3: {} + typical@7.3.0: {} + undici-types@6.21.0: {} + undici-types@7.16.0: {} + undici@7.25.0: {} + uplot@1.6.32: {} + uri-js@4.4.1: dependencies: punycode: 2.3.1 @@ -2666,6 +3134,8 @@ snapshots: word-wrap@1.2.5: {} + wordwrapjs@5.1.1: {} + xml-name-validator@5.0.0: {} xmlchars@2.2.0: {} diff --git a/preview/components-charts-donut.html b/preview/components-charts-donut.html new file mode 100644 index 0000000..eda0d3c --- /dev/null +++ b/preview/components-charts-donut.html @@ -0,0 +1,70 @@ + + + + +
+
Charts · Donut · RadialGauge · proportional + scalar · pure SVG
+ +
+
Donut · resource usage breakdown
+
+ + + + + + + + + 2.4TB + total + +
    +
  • api38.0%
    • +
  • db24.0%
    • +
  • cache16.0%
    • +
  • queue12.0%
    • +
  • other10.0%
    • +
+
+
+ +
+
+
RadialGauge · capacity · neutral
+
+ + + + + + 76% + +
+
Disk capacity
+
+
+
RadialGauge · uptime SLO · good
+
+ + + + + 99.97% + +
+
30-day SLO
+
+
+ +
Donut: ≤50 segments · click to drill down · RadialGauge tones: neutral / good / warning / bad
+
+ diff --git a/preview/components-charts-line.html b/preview/components-charts-line.html new file mode 100644 index 0000000..2ebda54 --- /dev/null +++ b/preview/components-charts-line.html @@ -0,0 +1,99 @@ + +Charts — Line / Area / Bar + + +
+
+
Charts · Chart (line · area · bar)
+ engine: auto · canvas → webgl → webgpu +
+ + +
+
+
+
Request rate · last 24h
+
2 series · 144 points · uPlot canvas
+
+ canvas +
+ + + + + + + + + + +
requests/secp99 latency (ms)
+
+ + +
+
+
+
CPU utilization · 4 services
+
stacked area · 720 points · uPlot canvas
+
+ canvas +
+ + + + + + + + + + +
+ + +
+
+
+
Deployments · last 14 days
+
bar · 14 buckets
+
+ canvas +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ diff --git a/preview/components-charts-radial.html b/preview/components-charts-radial.html new file mode 100644 index 0000000..a74f12a --- /dev/null +++ b/preview/components-charts-radial.html @@ -0,0 +1,123 @@ + +Charts — Sparkline · Donut · Gauge + + +
+
Charts · Sparkline · Donut · RadialGauge
+ + +
+
Sparklines · embedded in Stat tiles
+
SVG · 80×24 · zero deps
+
+
+
+
Requests / min
+
12.4k
+
+ + + +
+
+
+
p99 latency
+
142ms
+
+ + + + +
+
+
+
Error rate
+
0.04%
+
+ + + +
+
+
+
Active sessions
+
3,284
+
+ + + +
+
+
+ + +
+
Resource breakdown · cluster usage
+
SVG · clickable segments · accent + mono palette
+
+ + + + + + + 847 + cores + +
    +
  • Compute45.0%
    • +
  • Database25.0%
    • +
  • Cache18.0%
    • +
  • Other12.0%
    • +
+
+
+ + +
+
Radial gauges · capacity indicators
+
SVG · tone: good / warning / bad
+
+
+ + + + 33% + +
Disk
+
+
+ + + + 76% + +
Memory
+
+
+ + + + 93% + +
CPU
+
+
+
+
+ diff --git a/preview/components-charts-servicemap.html b/preview/components-charts-servicemap.html new file mode 100644 index 0000000..a6f0731 --- /dev/null +++ b/preview/components-charts-servicemap.html @@ -0,0 +1,233 @@ + +Charts — ServiceMap + + +
+
Charts · ServiceMap · directed flow · labels reveal on focus
+ +
+
+
+
Production topology
+
cytoscape · cose-bilkent · webgl handoff at 200+ nodes
+
+ canvas +
+ +
+ + + + + + + + + + + + + + + http + + + + http + + + + http + + + + grpc + + + + grpc + + + + grpc · 5xx + + + + amqp + + + + amqp + + + + sql + + + + cache + + + + amqp + + + + http + + + + backup + + + + snapshot + + + + events + + + + events + + + + + + load-balancer + api-gateway + auth-service + webhooks + user-service + billing + notifications + scheduler + postgres + redis + queue + search + storage + analytics + + +
+ +
Hover or tap a service to light its connections and reveal edge labels.
+ +
+ healthy + degraded + failing + unknown + degree +
+ +
+ Nodes 14 + Edges 16 + Min/Max degree 1 / 4 + Latency probe 1s + Layout cose-bilkent +
+
+
+ + + diff --git a/preview/components-charts-sparkline.html b/preview/components-charts-sparkline.html new file mode 100644 index 0000000..8eab4c5 --- /dev/null +++ b/preview/components-charts-sparkline.html @@ -0,0 +1,76 @@ + + + + +
+
Charts · Sparkline · embedded in Stat cards · pure SVG, zero deps
+ +
+
+
Requests / min
+
12,481
+
↑ 4.2%
+ + + +
+
+
Error rate
+
0.024%
+
↓ 38%
+ + + + +
+
+
P99 latency
+
142ms
+
↑ 3ms
+ + + +
+
+ +
+
Sparkline · variants
+
+
+
line
+ +
+
+
area
+ + + + +
+
+
mono
+ +
+
+
noisy / dense
+ + + +
+
+
+ +
Sparkline auto-fits container · respects accent color · also rendered inline by <Stat>
+
+ diff --git a/preview/components-charts-timeseries.html b/preview/components-charts-timeseries.html new file mode 100644 index 0000000..2d40980 --- /dev/null +++ b/preview/components-charts-timeseries.html @@ -0,0 +1,143 @@ + + + + +
+
Charts · Time-series · CPU / RPS / latency · uPlot canvas + WebGL2/WebGPU
+ + +
+
+ Line · CPU per node · 24h + + 1H6H24H7D + canvas + +
+ + + + + + + + + + + + 0 + 25 + 50 + 75 + 100 + + 00:00 + 06:00 + 12:00 + 18:00 + 24:00 + + + + + + + + + + + + +
+ node-a + node-b + node-c + 14:42:18 · 78% / 41% / 33% +
+
+ + +
+
+ Area · Requests / sec · stacked + webgl +
+ + + + + + + 0 + 5k + 12k + + + + + + + +
+ api + auth + static +
+
+ + +
+
+ Bar · Deployments per day + canvas +
+ + + + + 0 + 10 + 20 + + + + + + + + + + + + + + + + + + + +
Apr 22 → today · peak 33 deploys on Apr 27
+
+ +
Performance · uPlot for ≤100k pts (~2ms/frame) · deck.gl WebGL2 path for 100k–1M (~6ms/frame) · WebGPU on supported browsers
+
+ diff --git a/preview/components-charts-treemap.html b/preview/components-charts-treemap.html new file mode 100644 index 0000000..b1628fe --- /dev/null +++ b/preview/components-charts-treemap.html @@ -0,0 +1,79 @@ + +Charts — Treemap + + +
+
Charts · Treemap · 5.4M LOC across 12 services
+ +
+
+
+
Codebase explorer · lines of code
+
d3-hierarchy squarify · canvas2d · quadtree picking
+
+ webgl auto +
+ +
+ + +
+
api-gateway
1.24M LOC
+
+
+
user-service
680k LOC
+
+
+
billing
498k LOC
+
+
+
notifications
580k LOC
+
+
+
analytics
472k LOC
+
+ + +
+
scheduler
540k LOC
+
+
+
webhooks
474k LOC
+
+
+
search
258k LOC
+
+
+
audit
128k LOC
+
+
+
storage
312k LOC
+
+
+
queue
242k LOC
+
+
+
docs
186k LOC
+
+
+ +
+ Total 5.4M LOC + Services 12 + Files 43,217 + Hover quadtree O(log n) +
+
+
+ diff --git a/preview/components-charts-uptime.html b/preview/components-charts-uptime.html new file mode 100644 index 0000000..036e1e5 --- /dev/null +++ b/preview/components-charts-uptime.html @@ -0,0 +1,79 @@ + +Charts — UptimeBar + + +
+
Charts · UptimeBar · 90 day status grid
+ +
+
Service uptime · last 90 days
+
canvas · hover for incident details
+ +
+ api.gateway +
+ 99.98% +
+
+ postgres.primary +
+ 99.92% +
+
+ redis.cache +
+ 100.00% +
+
+ worker.queue +
+ 98.74% +
+
+ cdn.edge +
+ 99.99% +
+ +
+ operational + degraded + outage + maintenance + no data +
+
+
+ + diff --git a/scripts/build-docs.mjs b/scripts/build-docs.mjs index 5efce8c..31c7585 100644 --- a/scripts/build-docs.mjs +++ b/scripts/build-docs.mjs @@ -20,6 +20,7 @@ * src/components.ts (interfaces, supporting types) * src/tokens.ts (token unions) * src/index.tsx (runtime export → category file) + * src/charts/index.ts (charts subpath exports — "Charts" category) * * The Pages workflow stages assets/, preview/*.html, ui_kits/, then runs * this script (which overwrites /preview/index.html with a styled one). @@ -30,7 +31,7 @@ import { readFileSync, writeFileSync, mkdirSync } from "node:fs"; import { join, resolve } from "node:path"; import { generateDemos } from "./component-examples.mjs"; -import { extractInterfaces, extractTypeAliases, parseRuntimeExports } from "./parse-source.mjs"; +import { extractInterfaces, extractTypeAliases, parseRuntimeExports, parseChartsExports } from "./parse-source.mjs"; const root = process.cwd(); const outDir = resolve(root, process.argv[2] || "_site"); @@ -39,6 +40,10 @@ mkdirSync(outDir, { recursive: true }); const componentsDts = readFileSync(join(root, "src/components.ts"), "utf8"); const tokensTs = readFileSync(join(root, "src/tokens.ts"), "utf8"); const indexTsx = readFileSync(join(root, "src/index.tsx"), "utf8"); +const chartsIndexTs = (() => { + try { return readFileSync(join(root, "src/charts/index.ts"), "utf8"); } + catch { return ""; } +})(); const colorsAndTypeCss = readFileSync(join(root, "colors_and_type.css"), "utf8"); const componentStylesCss = readFileSync(join(root, "src/styles.css"), "utf8"); const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8")); @@ -47,6 +52,7 @@ const REPO_URL = "https://github.com/RandomCodeSpace/design-system"; // ─── 1. Parse runtime exports + interfaces + token aliases ──────────── const runtimeExports = parseRuntimeExports(indexTsx); +const chartExports = parseChartsExports(chartsIndexTs); const interfaces = extractInterfaces(componentsDts); const componentTypeAliases = extractTypeAliases(componentsDts); const tokenTypeAliases = extractTypeAliases(tokensTs); @@ -62,11 +68,44 @@ const DOCS_CATEGORIES = [ { id: "navigation", label: "Navigation", blurb: "Tabs, menus, breadcrumb, pagination.", srcFiles: ["navigation"] }, { id: "feedback", label: "Feedback", blurb: "Status, modals, toasts, tooltips.", srcFiles: ["feedback"] }, { id: "content", label: "Content", blurb: "Code, markdown, terminal, chat, RTE.", srcFiles: ["code", "chat"] }, + { id: "charts", label: "Charts", blurb: "Opt-in subpath — Chart, Sparkline, Donut, RadialGauge, UptimeBar, Treemap, ServiceMap.", charts: true }, ]; +// Peer-dep callouts for chart pages. +const CHART_PEER_DEPS = { + Chart: ["uplot (canvas, default)", "@deck.gl/core + @deck.gl/layers (webgl/webgpu)"], + Sparkline: [], + Donut: [], + RadialGauge: [], + UptimeBar: [], + Treemap: ["d3-hierarchy"], + ServiceMap: ["cytoscape + cytoscape-cose-bilkent (canvas)", "@deck.gl/core + @deck.gl/layers + d3-force (webgl)"], +}; + +// Canonical static code snippets per chart (charts aren't in the IIFE +// bundle, so their docs pages show static code rather than live render). +const CHART_DEMOS = { + Chart: { title: "Time-series line chart", + code: `` }, + Sparkline: { title: "Inline trend", + code: `` }, + Donut: { title: "Capacity breakdown", + code: `` }, + RadialGauge: { title: "SLO gauge", + code: `` }, + UptimeBar: { title: "30-day uptime", + code: ` ({\n status: i === 12 ? "outage" : i === 19 ? "degraded" : "ok",\n timestamp: Date.now() - (29 - i) * 86_400_000,\n }))}\n/>` }, + Treemap: { title: "Resource breakdown", + code: `` }, + ServiceMap: { title: "Service topology", + code: `` }, +}; + +function isChart(name) { return chartExports.has(name); } function categoryForExport(name) { + if (isChart(name)) return DOCS_CATEGORIES.find((c) => c.id === "charts"); const f = runtimeExports.get(name); - return f ? DOCS_CATEGORIES.find((c) => c.srcFiles.includes(f)) : null; + return f ? DOCS_CATEGORIES.find((c) => !c.charts && c.srcFiles?.includes(f)) : null; } const exportsByCategory = new Map(DOCS_CATEGORIES.map((c) => [c.id, []])); @@ -74,8 +113,11 @@ for (const [name] of runtimeExports) { const cat = categoryForExport(name); if (cat) exportsByCategory.get(cat.id).push(name); } +for (const [name] of chartExports) { + exportsByCategory.get("charts").push(name); +} const HOOKS = new Set(["useTheme", "toast"]); -const ALL_NAMES = [...runtimeExports.keys()]; +const ALL_NAMES = [...runtimeExports.keys(), ...chartExports.keys()]; // ─── 4. Helpers ─────────────────────────────────────────────────────── function escapeHtml(s) { @@ -557,6 +599,34 @@ function renderDocsCss() { color: var(--fg-1); line-height: 1.55; white-space: pre; } +/* Charts: static placeholder where live preview would be, plus peer-dep list. */ +.demo-render--static { + display: flex; align-items: center; justify-content: center; + min-height: 120px; padding: 24px; + background: var(--bg-2); + background-image: + repeating-linear-gradient( + 45deg, transparent, transparent 8px, + var(--bg-1) 8px, var(--bg-1) 9px + ); +} +.demo-static-note { + font-family: var(--font-mono); font-size: 11px; line-height: 1.55; + color: var(--fg-3); text-align: center; max-width: 48ch; + background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 4px; + padding: 10px 14px; +} +.demo-static-note a { color: var(--accent); } +ul.peer-deps { + list-style: none; margin: 0; padding: 0; + display: flex; flex-direction: column; gap: 6px; +} +ul.peer-deps li code { + font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); + padding: 6px 10px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 4px; + display: inline-block; +} + table.props { width: 100%; border-collapse: collapse; border: 1px solid var(--border-1); border-radius: 4px; overflow: hidden; } table.props th, table.props td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-1); @@ -877,7 +947,9 @@ function renderDocsIndex() { .filter((c) => exportsByCategory.get(c.id).length > 0) .map((cat) => { const items = exportsByCategory.get(cat.id); - const srcLabel = cat.srcFiles.map((f) => `src/components/${f}.tsx`).join(" · "); + const srcLabel = cat.charts + ? `src/charts/ · import from "${pkg.name}/charts"` + : cat.srcFiles.map((f) => `src/components/${f}.tsx`).join(" · "); const cards = items.map((n) => { const iface = findPropsFor(n); const isHook = HOOKS.has(n); @@ -937,11 +1009,21 @@ function renderPropsTable(iface) { function renderComponentPage(name) { const iface = findPropsFor(name); const isHook = HOOKS.has(name); + const chart = isChart(name); const generics = iface?.generics || ""; const cat = categoryForExport(name); - const srcFile = runtimeExports.get(name); - const demos = getDemos(name); - const importLine = `import { ${name} } from "${pkg.name}";`; + const srcPath = chart + ? `src/charts/${chartExports.get(name)}.tsx` + : `src/components/${runtimeExports.get(name)}.tsx`; + // Charts can't run live in the IIFE bundle (peer deps live outside it), + // so we show static code snippets instead of running them. + const demos = chart + ? (CHART_DEMOS[name] ? [CHART_DEMOS[name]] : []) + : getDemos(name); + const importLine = chart + ? `import { ${name} } from "${pkg.name}/charts";` + : `import { ${name} } from "${pkg.name}";`; + const peerDeps = chart ? (CHART_PEER_DEPS[name] || []) : []; const inheritance = iface?.extends ? `

extends ${code(iface.extends)}

` : ""; const related = findRelatedTypes(iface); const relatedHtml = related.length === 0 ? "" : `
@@ -954,7 +1036,11 @@ function renderComponentPage(name) { const demosHtml = demos.map((d, i) => `
-
+ ${chart + ? `
+
Live preview not available — charts load peer deps outside the bundle. See spec card or copy the code.
+
` + : `
`}

${escapeHtml(d.title)}

@@ -962,11 +1048,13 @@ function renderComponentPage(name) {
- ↗ Playground - + ${chart + ? "" + : `↗ Playground`} +
-
@@ -987,9 +1075,9 @@ function renderComponentPage(name) {
Components/${escapeHtml(cat?.label || "Other")}/${escapeHtml(name)}
- ${isHook ? "hook" : "component"} + ${isHook ? "hook" : (chart ? "component (charts)" : "component")}

${escapeHtml(name)}${escapeHtml(generics)}

-

src/components/${escapeHtml(srcFile)}.tsx

+

${escapeHtml(srcPath)}

@@ -997,8 +1085,15 @@ function renderComponentPage(name) { 
${escapeHtml(importLine)}
+ ${chart ? `
+

Peer dependencies

+ ${peerDeps.length === 0 + ? `

None — pure SVG / canvas2d render path.

` + : `
    ${peerDeps.map((d) => `
  • ${escapeHtml(d)}
    • `).join("")}
`} +
` : ""} +
-

Examples

+

${chart ? "Example" : "Examples"}

${demosHtml}
@@ -1017,7 +1112,10 @@ function renderComponentPage(name) { `; // Build a script that runs each demo and wires up copy / toggle / sidebar drawer. - const runCalls = demos.map((d, i) => `runExample(${JSON.stringify(d.code)}, "demo-render-${i}");`).join("\n "); + // Charts skip the live runner — they're not in the IIFE bundle. + const runCalls = chart + ? "" + : demos.map((d, i) => `runExample(${JSON.stringify(d.code)}, "demo-render-${i}");`).join("\n "); const codeJson = JSON.stringify(demos.map((d) => d.code)); const tail = ` @@ -1222,7 +1320,7 @@ for (const name of ALL_NAMES) { } console.log(`Wrote site to ${outDir}`); -console.log(` ${count} component pages, 1 docs index, 1 playground, 1 apps index, 1 brand index, 1 root`); -console.log(` ${runtimeExports.size} runtime exports across ${DOCS_CATEGORIES.length} docs categories`); +console.log(` ${count} component pages (${runtimeExports.size} core + ${chartExports.size} charts), 1 docs index, 1 playground, 1 apps index, 1 brand index, 1 root`); +console.log(` ${runtimeExports.size + chartExports.size} runtime exports across ${DOCS_CATEGORIES.filter((c) => exportsByCategory.get(c.id).length > 0).length} docs categories`); console.log(` ${tokenTypeAliases.length} tokens, ${interfaces.length} interfaces, ${componentTypeAliases.length} type aliases`); console.log(` preview cards listed: ${previewFiles.filter((f) => f !== "index.html").length}`); diff --git a/scripts/build-llms.mjs b/scripts/build-llms.mjs index df7b650..ee48b32 100644 --- a/scripts/build-llms.mjs +++ b/scripts/build-llms.mjs @@ -20,7 +20,7 @@ */ import { readFileSync, writeFileSync, mkdirSync } from "node:fs"; import { join, resolve } from "node:path"; -import { extractInterfaces, extractTypeAliases, parseRuntimeExports } from "./parse-source.mjs"; +import { extractInterfaces, extractTypeAliases, parseRuntimeExports, parseChartsExports } from "./parse-source.mjs"; import { generateDemos } from "./component-examples.mjs"; const root = process.cwd(); @@ -30,6 +30,10 @@ mkdirSync(outDir, { recursive: true }); const componentsDts = readFileSync(join(root, "src/components.ts"), "utf8"); const tokensTs = readFileSync(join(root, "src/tokens.ts"), "utf8"); const indexTsx = readFileSync(join(root, "src/index.tsx"), "utf8"); +const chartsIndexTs = (() => { + try { return readFileSync(join(root, "src/charts/index.ts"), "utf8"); } + catch { return ""; } +})(); const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8")); const SITE_BASE = "https://randomcodespace.github.io/design-system"; @@ -37,6 +41,7 @@ const PKG_NPM = pkg.name; // @ossrandom/design-system const PKG_GHP = "@randomcodespace/design-system"; const runtimeExports = parseRuntimeExports(indexTsx); +const chartExports = parseChartsExports(chartsIndexTs); const interfaces = extractInterfaces(componentsDts); const componentTypeAliases = extractTypeAliases(componentsDts); const tokenTypeAliases = extractTypeAliases(tokensTs); @@ -56,10 +61,25 @@ const CATEGORIES = [ { id: "navigation", label: "Navigation", srcFiles: ["navigation"] }, { id: "feedback", label: "Feedback", srcFiles: ["feedback"] }, { id: "content", label: "Content", srcFiles: ["code", "chat"] }, + { id: "charts", label: "Charts (subpath)", charts: true }, ]; + +// Chart peer-deps surface in llms-full so AI agents know what to install. +const CHART_PEER_DEPS = { + Chart: ["uplot (canvas, default)", "@deck.gl/core + @deck.gl/layers (webgl/webgpu)"], + Sparkline: [], + Donut: [], + RadialGauge: [], + UptimeBar: [], + Treemap: ["d3-hierarchy"], + ServiceMap: ["cytoscape + cytoscape-cose-bilkent (canvas)", "@deck.gl/core + @deck.gl/layers + d3-force (webgl)"], +}; + +function isChart(name) { return chartExports.has(name); } function categoryForExport(name) { + if (isChart(name)) return CATEGORIES.find((c) => c.id === "charts"); const f = runtimeExports.get(name); - return f ? CATEGORIES.find((c) => c.srcFiles.includes(f)) : null; + return f ? CATEGORIES.find((c) => !c.charts && c.srcFiles?.includes(f)) : null; } const exportsByCategory = new Map(CATEGORIES.map((c) => [c.id, []])); @@ -67,6 +87,9 @@ for (const [name] of runtimeExports) { const cat = categoryForExport(name); if (cat) exportsByCategory.get(cat.id).push(name); } +for (const [name] of chartExports) { + exportsByCategory.get("charts").push(name); +} function findPropsFor(name) { return interfaceByName.get(name + "Props") || null; @@ -74,13 +97,14 @@ function findPropsFor(name) { // ─── llms.txt — concise per spec ────────────────────────────────────── function renderLlmsTxt() { - const total = runtimeExports.size; + const total = runtimeExports.size + chartExports.size; const cats = CATEGORIES.filter((c) => exportsByCategory.get(c.id).length > 0); let out = ""; out += `# RandomCodeSpace Design System\n\n`; - out += `> Strongly-typed React component library — ${total} components across ${cats.length} categories. `; - out += `Inter on Cod Gray, Signal Red accent, single CSS file, zero runtime deps. `; + out += `> Strongly-typed React component library — ${total} components across ${cats.length} categories `; + out += `(${runtimeExports.size} core + ${chartExports.size} charts). `; + out += `Bricolage Grotesque on Cod Gray, Signal Red accent, single CSS file, zero core runtime deps. `; out += `Built for self-hosted developer tooling.\n\n`; out += `## Install\n\n`; @@ -89,10 +113,14 @@ function renderLlmsTxt() { out += `# or, from GitHub Packages mirror (different scope):\n`; out += `npm install ${PKG_GHP}\n`; out += `\`\`\`\n\n`; + out += `Charts ship at the \`${PKG_NPM}/charts\` subpath and pull heavier peer deps `; + out += `(\`uplot\`, \`d3-hierarchy\`, \`cytoscape\`, \`@deck.gl/core\` + \`@deck.gl/layers\`). `; + out += `Install only the ones the charts you render require — see the Charts section below.\n\n`; out += `## Usage\n\n`; out += `\`\`\`tsx\n`; out += `import { ThemeProvider, Button, toast } from "${PKG_NPM}";\n`; + out += `import { Chart, ServiceMap } from "${PKG_NPM}/charts";\n`; out += `import "${PKG_NPM}/styles.css";\n\n`; out += `\n`; out += ` \n`; @@ -103,6 +131,9 @@ function renderLlmsTxt() { for (const cat of cats) { const items = exportsByCategory.get(cat.id); out += `### ${cat.label}\n\n`; + if (cat.charts) { + out += `Subpath: \`${PKG_NPM}/charts\`\n\n`; + } for (const name of items) { const iface = findPropsFor(name); const isHook = HOOKS.has(name); @@ -177,10 +208,24 @@ function renderLlmsFullTxt() { function renderComponent(name) { const iface = findPropsFor(name); const isHook = HOOKS.has(name); - const srcFile = runtimeExports.get(name); + const chart = isChart(name); + const srcPath = chart + ? `src/charts/${chartExports.get(name)}.tsx` + : `src/components/${runtimeExports.get(name)}.tsx`; + const importPath = chart ? `${PKG_NPM}/charts` : PKG_NPM; let out = ""; out += `### ${name}${iface?.generics || ""}\n`; - out += `Source: \`src/components/${srcFile}.tsx\` · ${isHook ? "hook" : "component"}\n\n`; + out += `Source: \`${srcPath}\` · ${isHook ? "hook" : "component"}\n`; + out += `Import: \`import { ${name} } from "${importPath}";\`\n`; + if (chart) { + const deps = CHART_PEER_DEPS[name] || []; + if (deps.length === 0) { + out += `Peer deps: none (zero-dep render path)\n`; + } else { + out += `Peer deps (install on demand): ${deps.map((d) => `\`${d}\``).join(", ")}\n`; + } + } + out += `\n`; if (iface) { if (iface.extends) { diff --git a/scripts/parse-source.mjs b/scripts/parse-source.mjs index 5d33955..848c817 100644 --- a/scripts/parse-source.mjs +++ b/scripts/parse-source.mjs @@ -90,3 +90,24 @@ export function parseRuntimeExports(indexTsxSrc) { } return map; } + +// Charts live at the `./charts` subpath. Their barrel re-exports look like +// `export { Chart } from "./Chart"` (file path relative to src/charts/, not +// the components/ subtree). Returns Map. +// +// We restrict to component files — those whose basename starts with an +// uppercase letter (`Chart`, `ServiceMap`, …). Utility re-exports from +// `./theme` etc. are excluded so they don't pollute the docs/llms output. +export function parseChartsExports(chartsIndexSrc) { + const map = new Map(); + const re = /^export\s*\{\s*([\s\S]+?)\s*\}\s*from\s*"\.\/([^"]+)"/gm; + let m; + while ((m = re.exec(chartsIndexSrc))) { + const file = m[2]; + if (!/^[A-Z]/.test(file)) continue; // skip ./theme, ./renderer, etc. + for (const name of m[1].split(",").map((s) => s.trim()).filter(Boolean)) { + map.set(name, file); + } + } + return map; +} diff --git a/src/charts/Chart.tsx b/src/charts/Chart.tsx new file mode 100644 index 0000000..afda22f --- /dev/null +++ b/src/charts/Chart.tsx @@ -0,0 +1,212 @@ +/** + * Chart — high-performance time-series chart + * ───────────────────────────────────────── + * Two rendering paths: + * + * - "canvas" — uPlot (canvas2d). Default. Smoothly handles 100k points + * per series. Best for typical dashboard workloads. + * - "webgl" — deck.gl LineLayer (WebGL2 instanced). Use when you have + * >100k points or many series. Lower CPU, scrolls cleaner + * under heavy load but adds a few hundred kb. + * - "webgpu" — Same deck.gl pipeline with WebGPU adapter. + * - "auto" — Picks WebGPU > WebGL > canvas based on point count. + * + * Peer deps: + * pnpm add uplot # canvas (default) + * pnpm add @deck.gl/core @deck.gl/layers # webgl/webgpu + */ +import * as React from "react"; +import { cx } from "../internal/cx"; +import { readChartTheme, onThemeChange, type ChartTheme } from "./theme"; +import { resolveEngine, loadDeck, colorToRGBA, type ResolvedEngine } from "./renderer"; +import type { ChartProps, ChartSeries } from "../components"; + +type UplotInstance = { destroy: () => void; setSize: (s: { width: number; height: number }) => void }; +type UplotCtor = new (opts: unknown, data: unknown, target: HTMLElement) => UplotInstance; +let uplotCache: { ctor: UplotCtor } | null = null; + +async function loadUplot(): Promise { + if (uplotCache) return uplotCache.ctor; + try { + const mod = await import("uplot"); + // @ts-expect-error — uplot CSS + await import("uplot/dist/uPlot.min.css").catch(() => { /* best effort */ }); + const ctor = (mod.default ?? mod) as UplotCtor; + uplotCache = { ctor }; + return ctor; + } catch (err) { + // eslint-disable-next-line no-console + console.warn("[@ossrandom/design-system] Chart canvas path requires uplot. Run: pnpm add uplot", err); + return null; + } +} + +function buildUplotOptions( + type: "line" | "area" | "bar", + series: readonly ChartSeries[], + theme: ChartTheme, + width: number, height: number, + opts: { showGrid: boolean; showLegend: boolean; xLabel?: string; yLabel?: string; onPointClick?: ChartProps["onPointClick"] }, +): unknown { + const fillAlpha = type === "area" ? "33" : "00"; + return { + width, height, + cursor: { drag: { x: true, y: false }, focus: { prox: 16 } }, + select: { show: true, stroke: theme.accent + "40", fill: theme.accent + "10" }, + legend: { show: opts.showLegend, live: true }, + scales: { x: { time: true } }, + axes: [ + { stroke: theme.fg3, grid: { show: opts.showGrid, stroke: theme.border1, width: 1 }, ticks: { show: opts.showGrid, stroke: theme.border2, width: 1 }, font: `11px ${theme.fontMono}`, label: opts.xLabel }, + { stroke: theme.fg3, grid: { show: opts.showGrid, stroke: theme.border1, width: 1 }, ticks: { show: opts.showGrid, stroke: theme.border2, width: 1 }, font: `11px ${theme.fontMono}`, label: opts.yLabel }, + ], + series: [ + { label: "x" }, + ...series.map((s, i) => ({ + label: s.label, + stroke: s.color ?? theme.series[i % theme.series.length], + fill: type === "area" ? (s.color ?? theme.series[i % theme.series.length]) + fillAlpha : undefined, + width: 1.5, + points: { show: false }, + })), + ], + }; +} + +export function Chart(props: ChartProps): React.ReactElement { + const { + type = "line", + timestamps, series, + height = 240, + showGrid = true, + showLegend = series.length > 1, + xLabel, yLabel, + engine = "auto", + onPointClick, + className, style, id, + } = props; + + const totalPoints = series.reduce((acc, s) => acc + s.data.length, 0); + const ref = React.useRef(null); + const plotRef = React.useRef(null); + const deckRef = React.useRef<{ destroy: () => void } | null>(null); + const [width, setWidth] = React.useState(0); + const [resolved, setResolved] = React.useState("canvas"); + + React.useEffect(() => { + setResolved(resolveEngine(engine, totalPoints, 100_000)); + }, [engine, totalPoints]); + + React.useEffect(() => { + if (!ref.current) return; + const ro = new ResizeObserver((entries) => { + const w = Math.floor(entries[0].contentRect.width); + if (w > 0 && w !== width) setWidth(w); + }); + ro.observe(ref.current); + return () => ro.disconnect(); + }, [width]); + + // ─── Canvas (uPlot) path ───────────────────────────────────── + React.useEffect(() => { + if (resolved !== "canvas" || !ref.current || width === 0) return; + let cancelled = false; + const target = ref.current; + const theme = readChartTheme(); + const data = [Array.from(timestamps), ...series.map((s) => Array.from(s.data))]; + const options = buildUplotOptions(type, series, theme, width, height, { showGrid, showLegend, xLabel, yLabel, onPointClick }); + + loadUplot().then((Ctor) => { + if (!Ctor || cancelled) { + if (!Ctor) target.innerHTML = `
Chart requires uplot. Run: pnpm add uplot
`; + return; + } + plotRef.current?.destroy(); + plotRef.current = new Ctor(options, data, target); + }); + + return () => { cancelled = true; plotRef.current?.destroy(); plotRef.current = null; }; + }, [resolved, type, timestamps, series, width, height, showGrid, showLegend, xLabel, yLabel, onPointClick]); + + // ─── WebGL/WebGPU (deck.gl) path ───────────────────────────── + React.useEffect(() => { + if (resolved === "canvas" || !ref.current || width === 0) return; + let cancelled = false; + const target = ref.current; + + (async () => { + const deck = await loadDeck(); + if (!deck || cancelled) { setResolved("canvas"); return; } + const theme = readChartTheme(); + const adapter = resolved === "webgpu" ? "webgpu" : "webgl"; + + // Compute screen-space line segments: each pair (i, i+1) of points + // becomes one LineLayer datum. Pre-flattened for instanced draw. + const xs = timestamps; + const xMin = xs[0], xMax = xs[xs.length - 1] || xMin + 1; + const xScale = (x: number) => ((x - xMin) / (xMax - xMin)) * width; + + const allValues = series.flatMap((s) => Array.from(s.data)); + const yMin = Math.min(...allValues); + const yMax = Math.max(...allValues); + const yRange = yMax - yMin || 1; + const yScale = (y: number) => height - ((y - yMin) / yRange) * height; + + type Seg = { from: [number, number, number]; to: [number, number, number]; color: [number, number, number, number] }; + const segments: Seg[] = []; + series.forEach((s, sIdx) => { + const color = colorToRGBA(s.color ?? theme.series[sIdx % theme.series.length]); + for (let i = 0; i < s.data.length - 1; i++) { + segments.push({ + from: [xScale(xs[i]), yScale(s.data[i]), 0], + to: [xScale(xs[i + 1]), yScale(s.data[i + 1]), 0], + color, + }); + } + }); + + const LineLayer = deck.LineLayer as unknown as new (opts: unknown) => unknown; + const layers = [ + new LineLayer({ + id: "chart-lines", + data: segments, + getSourcePosition: (d: Seg) => d.from, + getTargetPosition: (d: Seg) => d.to, + getColor: (d: Seg) => d.color, + getWidth: 1.5, + widthUnits: "pixels", + }), + ]; + + const inst = new (deck.Deck as unknown as new (o: unknown) => { destroy: () => void })({ + parent: target, + width, height, + controller: false, + deviceProps: { type: adapter }, + views: [{ "@@type": "OrthographicView", id: "v", flipY: true }], + viewState: { target: [width / 2, height / 2, 0], zoom: 0 }, + layers, + }); + deckRef.current = inst; + })().catch((err: unknown) => { + // eslint-disable-next-line no-console + console.warn("[@ossrandom/design-system] Chart WebGL init failed; falling back to canvas:", err); + setResolved("canvas"); + }); + + return () => { cancelled = true; deckRef.current?.destroy(); deckRef.current = null; }; + }, [resolved, width, height, timestamps, series]); + + React.useEffect(() => onThemeChange(() => { setResolved((r) => r); }), []); + + return ( + + ); +} diff --git a/src/charts/Donut.tsx b/src/charts/Donut.tsx new file mode 100644 index 0000000..4721e67 --- /dev/null +++ b/src/charts/Donut.tsx @@ -0,0 +1,129 @@ +/** + * Donut — proportional breakdown chart + * ───────────────────────────────────── + * Pure SVG. Up to ~50 segments before performance degrades; for more, + * consider a treemap or stacked bar instead. + */ +import * as React from "react"; +import { cx } from "../internal/cx"; +import { readChartTheme } from "./theme"; +import type { DonutProps, DonutSegment } from "../components"; + +/** Polar → cartesian, with 12 o'clock at -π/2. */ +function arcPath(cx0: number, cy: number, rOuter: number, rInner: number, startAngle: number, endAngle: number): string { + const x1 = cx0 + rOuter * Math.cos(startAngle); + const y1 = cy + rOuter * Math.sin(startAngle); + const x2 = cx0 + rOuter * Math.cos(endAngle); + const y2 = cy + rOuter * Math.sin(endAngle); + const x3 = cx0 + rInner * Math.cos(endAngle); + const y3 = cy + rInner * Math.sin(endAngle); + const x4 = cx0 + rInner * Math.cos(startAngle); + const y4 = cy + rInner * Math.sin(startAngle); + const largeArc = endAngle - startAngle > Math.PI ? 1 : 0; + return `M${x1},${y1} A${rOuter},${rOuter} 0 ${largeArc} 1 ${x2},${y2} L${x3},${y3} A${rInner},${rInner} 0 ${largeArc} 0 ${x4},${y4} Z`; +} + +export function Donut(props: DonutProps): React.ReactElement { + const { + segments, size = 200, thickness = 32, + centerLabel, centerValue, showLegend = true, + onSegmentClick, + className, style, id, + } = props; + + const theme = readChartTheme(); + const total = segments.reduce((acc, s) => acc + s.value, 0) || 1; + const r = size / 2; + const rInner = r - thickness; + + let angle = -Math.PI / 2; + const arcs = segments.map((seg, i) => { + const fraction = seg.value / total; + const sweep = fraction * Math.PI * 2; + const start = angle; + const end = angle + sweep; + angle = end; + return { + seg, i, fraction, + path: arcPath(r, r, r, rInner, start, end), + color: seg.color ?? theme.series[i % theme.series.length], + }; + }); + + return ( +
+ + {arcs.map((a) => ( + onSegmentClick(a.seg, a.i) : undefined} + > + {a.seg.label}: {a.seg.value} ({(a.fraction * 100).toFixed(1)}%) + + ))} + {(centerLabel || centerValue !== undefined) && ( + + {centerValue !== undefined && ( + {centerValue} + )} + {centerLabel && ( + {centerLabel} + )} + + )} + + {showLegend && ( +
    + {arcs.map((a) => ( +
  • + + {a.seg.label} + {(a.fraction * 100).toFixed(1)}% +
    • + ))} +
+ )} +
+ ); +} + +/** Single-value gauge — used for "76% capacity" kind of indicators. */ +export function RadialGauge(props: import("../components").RadialGaugeProps): React.ReactElement { + const { value, max = 100, size = 120, thickness = 12, label, tone = "neutral", className, style, id } = props; + const theme = readChartTheme(); + const fraction = Math.max(0, Math.min(1, value / max)); + const r = size / 2; + const rInner = r - thickness; + const startAngle = -Math.PI * 0.75; + const endAngle = startAngle + (Math.PI * 1.5) * fraction; + const trackEnd = startAngle + Math.PI * 1.5; + + const toneColor = + tone === "good" ? theme.success : + tone === "warning" ? theme.warning : + tone === "bad" ? theme.danger : + theme.accent; + + return ( +
+ + + {fraction > 0 && } + + {Math.round(fraction * 100)}% + + + {label &&
{label}
} +
+ ); +} + +// Re-export segment type for convenience (already in components.ts) +export type { DonutSegment }; diff --git a/src/charts/ServiceMap.tsx b/src/charts/ServiceMap.tsx new file mode 100644 index 0000000..e745d07 --- /dev/null +++ b/src/charts/ServiceMap.tsx @@ -0,0 +1,502 @@ +/** + * ServiceMap — node-link graph for service topologies + * ──────────────────────────────────────────────────── + * Two rendering paths: + * + * - "canvas" — Cytoscape.js (canvas-based). Built-in interactivity, + * cose-bilkent layout. Best for <500 nodes. + * - "webgl" — deck.gl ScatterplotLayer + ArcLayer. Instanced, ideal + * for 5k+ nodes / 50k+ edges. Layout is precomputed + * (d3-force or supplied positions); deck.gl just renders. + * - "webgpu" — Same deck.gl pipeline with the WebGPU adapter for + * modern hardware. + * - "auto" — Resolves to webgpu > webgl > canvas. For 200-service + * maps the default lands on WebGL where supported. + * + * Peer deps: + * pnpm add cytoscape cytoscape-cose-bilkent # canvas path + * pnpm add @deck.gl/core @deck.gl/layers d3-force # webgl path + */ +import * as React from "react"; +import { cx } from "../internal/cx"; +import { readChartTheme, onThemeChange, type ChartTheme } from "./theme"; +import { resolveEngine, loadDeck, colorToRGBA, type ResolvedEngine } from "./renderer"; +import type { ServiceMapProps, ServiceNode, ServiceEdge } from "../components"; + +type CytoElement = { + id: () => string; + data: (key?: string) => unknown; + addClass: (cls: string) => void; + removeClass: (cls: string) => void; + connectedEdges?: () => CytoCollection; + connectedNodes?: () => CytoCollection; + isNode?: () => boolean; + isEdge?: () => boolean; +}; +type CytoCollection = { + forEach: (cb: (el: CytoElement) => void) => void; + union: (other: CytoCollection) => CytoCollection; + addClass: (cls: string) => void; + removeClass: (cls: string) => void; +}; +type CytoInstance = { + destroy: () => void; + on: (ev: string, sel: string, cb: (e: { target: CytoElement }) => void) => void; + elements: (sel?: string) => CytoCollection; + $: (sel: string) => CytoCollection; + container: () => HTMLElement | null; +}; +type CytoCtor = (opts: unknown) => CytoInstance; +let cytoCache: { ctor: CytoCtor } | null = null; + +async function loadCyto(): Promise { + if (cytoCache) return cytoCache.ctor; + try { + const mod = await import("cytoscape"); + const cytoscape = (mod.default ?? mod) as unknown as CytoCtor & { use: (ext: unknown) => void }; + try { + // @ts-expect-error — optional layout + const cose = await import("cytoscape-cose-bilkent"); + cytoscape.use(cose.default ?? cose); + } catch { /* fallback layout */ } + cytoCache = { ctor: cytoscape }; + return cytoscape; + } catch (err) { + // eslint-disable-next-line no-console + console.warn("[@ossrandom/design-system] cytoscape not installed:", err); + return null; + } +} + +interface PositionedNode extends ServiceNode { + readonly x: number; + readonly y: number; + readonly degree: number; +} + +/** + * Compute degree (in + out edge count) per node and map it to a pixel radius. + * Square-root scaling so a 100-edge hub doesn't dwarf a 4-edge leaf into invisibility. + * Range: 3px (isolated) → 14px (densest hub). + */ +function degreeRadius(degree: number, maxDegree: number): number { + const MIN = 3; + const MAX = 14; + if (maxDegree <= 0) return MIN; + const t = Math.sqrt(degree) / Math.sqrt(maxDegree); + return MIN + (MAX - MIN) * t; +} + +function computeDegrees(nodes: readonly ServiceNode[], edges: readonly ServiceEdge[]): { degrees: Map; max: number } { + const degrees = new Map(); + for (const n of nodes) degrees.set(n.id, 0); + for (const e of edges) { + degrees.set(e.source, (degrees.get(e.source) ?? 0) + 1); + degrees.set(e.target, (degrees.get(e.target) ?? 0) + 1); + } + let max = 0; + for (const d of degrees.values()) if (d > max) max = d; + return { degrees, max }; +} + +/** Compute force-directed layout for the WebGL path. */ +async function computeLayout(nodes: readonly ServiceNode[], edges: readonly ServiceEdge[], width: number, height: number): Promise { + const { degrees } = computeDegrees(nodes, edges); + // If positions are pre-supplied on the node, trust them + if (nodes.every((n) => n.x !== undefined && n.y !== undefined)) { + return nodes.map((n) => ({ ...n, x: n.x as number, y: n.y as number, degree: degrees.get(n.id) ?? 0 })); + } + try { + // @ts-expect-error — peer dep + const d3force = await import("d3-force"); + type SimNode = ServiceNode & { x: number; y: number; vx?: number; vy?: number; degree: number }; + const simNodes: SimNode[] = nodes.map((n) => ({ ...n, x: width / 2 + (Math.random() - 0.5) * 100, y: height / 2 + (Math.random() - 0.5) * 100, degree: degrees.get(n.id) ?? 0 })); + const sim = d3force.forceSimulation(simNodes) + .force("link", d3force.forceLink(edges.map((e) => ({ source: e.source, target: e.target }))).id((d: SimNode) => d.id).distance(60)) + .force("charge", d3force.forceManyBody().strength(-300)) + .force("center", d3force.forceCenter(width / 2, height / 2)) + .force("collide", d3force.forceCollide(14)) + .stop(); + // Run synchronously — 200 ticks is enough for reasonable layouts + for (let i = 0; i < 200; i++) sim.tick(); + return simNodes; + } catch { + // Naive grid fallback + const cols = Math.ceil(Math.sqrt(nodes.length)); + const cellW = width / cols; + const cellH = height / Math.ceil(nodes.length / cols); + return nodes.map((n, i) => ({ ...n, x: (i % cols) * cellW + cellW / 2, y: Math.floor(i / cols) * cellH + cellH / 2, degree: degrees.get(n.id) ?? 0 })); + } +} + +export function ServiceMap(props: ServiceMapProps): React.ReactElement { + const { + nodes, edges, height = 480, + layout = "cose-bilkent", + engine = "auto", + onNodeClick, onEdgeClick, + className, style, id, + } = props; + + const wrapRef = React.useRef(null); + const cyRef = React.useRef(null); + const deckRef = React.useRef<{ destroy: () => void; setProps?: (p: unknown) => void } | null>(null); + const [width, setWidth] = React.useState(0); + const [resolved, setResolved] = React.useState("canvas"); + + React.useEffect(() => { + setResolved(resolveEngine(engine, nodes.length + edges.length, 500)); + }, [engine, nodes.length, edges.length]); + + React.useEffect(() => { + if (!wrapRef.current) return; + const ro = new ResizeObserver((entries) => { + const w = Math.floor(entries[0].contentRect.width); + if (w > 0 && w !== width) setWidth(w); + }); + ro.observe(wrapRef.current); + return () => ro.disconnect(); + }, [width]); + + // ─── Canvas (cytoscape) path ────────────────────────────────── + React.useEffect(() => { + if (resolved !== "canvas" || !wrapRef.current) return; + let cancelled = false; + const target = wrapRef.current; + + loadCyto().then((cytoscape) => { + if (!cytoscape || cancelled) { + if (!cytoscape) target.innerHTML = `
Service map (canvas) requires cytoscape. Run: pnpm add cytoscape cytoscape-cose-bilkent
`; + return; + } + const theme = readChartTheme(); + const { degrees, max: maxDegree } = computeDegrees(nodes, edges); + const cy = cytoscape({ + container: target, + elements: [ + ...nodes.map((n) => { + const deg = degrees.get(n.id) ?? 0; + const r = degreeRadius(deg, maxDegree); + return { data: { id: n.id, label: n.label, status: n.status, kind: n.kind, degree: deg, diameter: Math.round(r * 2) } }; + }), + ...edges.map((e) => ({ data: { id: `${e.source}->${e.target}`, source: e.source, target: e.target, label: e.label, status: e.status } })), + ], + style: cytoscapeStyle(theme), + layout: { name: layout, animate: false, fit: true, padding: 24, nodeRepulsion: 6000, idealEdgeLength: 80 }, + wheelSensitivity: 0.2, minZoom: 0.2, maxZoom: 3, + }); + if (onNodeClick) cy.on("tap", "node", (e) => onNodeClick(e.target.data() as ServiceNode)); + if (onEdgeClick) cy.on("tap", "edge", (e) => onEdgeClick(e.target.data() as { source: string; target: string })); + + // Hover / touch highlight — light the focused node + its incident edges + neighbors + const focusOn = (el: CytoElement) => { + const isNode = el.isNode?.() ?? true; + cy.elements().addClass("rcs-dim"); + if (isNode) { + const incident = el.connectedEdges?.(); + const neighbors = el.connectedNodes?.(); + neighbors?.removeClass("rcs-dim"); + incident?.removeClass("rcs-dim"); + (cy.$(`#${cssEscape(el.id())}`)).removeClass("rcs-dim"); + (cy.$(`#${cssEscape(el.id())}`)).addClass("rcs-focus"); + incident?.addClass("rcs-focus-edge"); + neighbors?.addClass("rcs-neighbor"); + } else { + // edge + const ends = el.connectedNodes?.(); + ends?.removeClass("rcs-dim"); + ends?.addClass("rcs-neighbor"); + } + }; + const focusOff = () => { + cy.elements().removeClass("rcs-dim rcs-focus rcs-focus-edge rcs-neighbor"); + }; + cy.on("mouseover", "node", (e) => focusOn(e.target)); + cy.on("mouseover", "edge", (e) => focusOn(e.target)); + cy.on("mouseout", "node", () => focusOff()); + cy.on("mouseout", "edge", () => focusOff()); + // touch — tap-and-hold also focuses; tap on background clears + cy.on("tap", "node", (e) => focusOn(e.target)); + cy.on("tap", "edge", (e) => focusOn(e.target)); + // Tap on the background to clear (cytoscape: target is `cy` for empty taps). + // We intentionally don't bind to a selector here. + const ct = cy.container(); + if (ct) { + ct.addEventListener("pointerleave", focusOff); + } + + cyRef.current = cy; + }); + + return () => { + cancelled = true; + cyRef.current?.destroy(); + cyRef.current = null; + target.innerHTML = ""; + }; + }, [resolved, nodes, edges, layout, onNodeClick, onEdgeClick]); + + // ─── WebGL/WebGPU (deck.gl) path ───────────────────────────── + React.useEffect(() => { + if (resolved === "canvas" || width === 0 || !wrapRef.current) return; + let cancelled = false; + const target = wrapRef.current; + + (async () => { + const deck = await loadDeck(); + if (!deck || cancelled) { setResolved("canvas"); return; } + const positioned = await computeLayout(nodes, edges, width, height); + if (cancelled) return; + const idIdx = new Map(positioned.map((n, i) => [n.id, i])); + const theme = readChartTheme(); + const maxDegree = positioned.reduce((m, n) => Math.max(m, n.degree), 0); + const adapter = resolved === "webgpu" ? "webgpu" : "webgl"; + + const ScatterplotLayer = deck.ScatterplotLayer as unknown as new (opts: unknown) => unknown; + const ArcLayer = deck.ArcLayer as unknown as new (opts: unknown) => unknown; + + // Adjacency for fast highlight lookup. Keyed by node id → set of neighbor ids + // and set of incident edge keys ("a->b"). + const neighbors = new Map>(); + const incidentEdges = new Map>(); + for (const n of positioned) { + neighbors.set(n.id, new Set()); + incidentEdges.set(n.id, new Set()); + } + for (const e of edges) { + const key = `${e.source}->${e.target}`; + neighbors.get(e.source)?.add(e.target); + neighbors.get(e.target)?.add(e.source); + incidentEdges.get(e.source)?.add(key); + incidentEdges.get(e.target)?.add(key); + } + + // Mutable focus state. The deck instance reads via closures; we + // rebuild layers and call setProps on every change. + let focusId: string | null = null; + + const dimAlpha = 60; // 0–255 alpha for non-focused elements + const baseAlpha = 230; + const focusAlpha = 255; + + const isInFocusSet = (nodeId: string): boolean => { + if (!focusId) return true; + if (nodeId === focusId) return true; + return neighbors.get(focusId)?.has(nodeId) ?? false; + }; + const isEdgeFocused = (e: ServiceEdge): boolean => { + if (!focusId) return true; + return e.source === focusId || e.target === focusId; + }; + + const fadeColor = (rgba: [number, number, number, number], alpha: number): [number, number, number, number] => + [rgba[0], rgba[1], rgba[2], alpha]; + + const buildLayers = () => [ + new ArcLayer({ + id: "service-edges", + data: edges.map((e) => ({ + ...e, + sourcePos: positioned[idIdx.get(e.source) ?? 0], + targetPos: positioned[idIdx.get(e.target) ?? 0], + })), + getSourcePosition: (d: { sourcePos: PositionedNode }) => [d.sourcePos.x, d.sourcePos.y, 0], + getTargetPosition: (d: { targetPos: PositionedNode }) => [d.targetPos.x, d.targetPos.y, 0], + getSourceColor: (d: ServiceEdge) => { + const focused = isEdgeFocused(d); + const base = colorToRGBA(focused && focusId + ? theme.accent + : d.status === "failing" ? theme.danger : theme.border2); + return fadeColor(base, focused ? focusAlpha : dimAlpha); + }, + getTargetColor: (d: ServiceEdge) => { + const focused = isEdgeFocused(d); + const base = colorToRGBA(focused && focusId + ? theme.accent + : d.status === "failing" ? theme.danger : theme.fg4); + return fadeColor(base, focused ? focusAlpha : dimAlpha); + }, + getWidth: (d: ServiceEdge) => { + const focused = isEdgeFocused(d); + if (focused && focusId) return 2; + return d.status === "failing" ? 2 : 1; + }, + getHeight: 0.3, + pickable: !!onEdgeClick, + updateTriggers: { getSourceColor: [focusId], getTargetColor: [focusId], getWidth: [focusId] }, + }), + new ScatterplotLayer({ + id: "service-nodes", + data: positioned, + getPosition: (d: PositionedNode) => [d.x, d.y, 0], + getFillColor: (d: PositionedNode) => { + const inSet = isInFocusSet(d.id); + const base = colorToRGBA( + d.status === "failing" ? theme.danger + : d.status === "degraded" ? theme.warning + : d.status === "healthy" ? theme.success + : theme.fg3, + ); + return fadeColor(base, inSet ? baseAlpha : dimAlpha); + }, + getLineColor: (d: PositionedNode) => { + if (focusId === d.id) return colorToRGBA(theme.accent); + return colorToRGBA(theme.bg1); + }, + getRadius: (d: PositionedNode) => degreeRadius(d.degree, maxDegree), + radiusUnits: "pixels", + stroked: true, + getLineWidth: (d: PositionedNode) => focusId === d.id ? 2 : 1, + lineWidthUnits: "pixels", + pickable: true, + updateTriggers: { getFillColor: [focusId], getLineColor: [focusId], getLineWidth: [focusId] }, + }), + ]; + + const inst = new (deck.Deck as unknown as new (o: unknown) => { destroy: () => void; setProps: (p: unknown) => void })({ + parent: target, + width, height, + controller: true, + deviceProps: { type: adapter }, + views: [{ "@@type": "OrthographicView", id: "v", flipY: true }], + viewState: { target: [width / 2, height / 2, 0], zoom: 0 }, + layers: buildLayers(), + onHover: ({ object, layer }: { object?: PositionedNode | ServiceEdge; layer?: { id: string } }) => { + let next: string | null = null; + if (object && layer?.id === "service-nodes") { + next = (object as PositionedNode).id; + } else if (object && layer?.id === "service-edges") { + // Pick either endpoint — source first + next = (object as ServiceEdge).source; + } + if (next !== focusId) { + focusId = next; + inst.setProps({ layers: buildLayers() }); + } + }, + onClick: ({ object, layer }: { object?: PositionedNode | ServiceEdge; layer?: { id: string } }) => { + if (!object || !layer) return; + if (layer.id === "service-nodes" && onNodeClick) onNodeClick(object as ServiceNode); + else if (layer.id === "service-edges" && onEdgeClick) onEdgeClick(object as { source: string; target: string }); + }, + }); + deckRef.current = inst; + })().catch((err: unknown) => { + // eslint-disable-next-line no-console + console.warn("[@ossrandom/design-system] ServiceMap WebGL init failed; falling back to canvas:", err); + setResolved("canvas"); + }); + + return () => { + cancelled = true; + deckRef.current?.destroy(); + deckRef.current = null; + target.innerHTML = ""; + }; + }, [resolved, width, height, nodes, edges, onNodeClick, onEdgeClick]); + + // Theme refresh + React.useEffect(() => onThemeChange(() => { + // Force a recreate by toggling resolved + setResolved((r) => r); + }), []); + + return ( + + ); +} + +function cytoscapeStyle(theme: ChartTheme) { + return [ + { selector: "node", style: { + // Dot — diameter scales with degree (computed in element data) + "shape": "ellipse", + "width": "data(diameter)", + "height": "data(diameter)", + "background-color": theme.fg3, + "border-color": theme.bg1, + "border-width": 1, + // Label sits BELOW the dot, light weight, no background pill + "label": "data(label)", + "color": theme.fg3, + "font-family": theme.fontSans, + "font-size": 11, + "font-weight": 400, + "text-valign": "bottom", + "text-halign": "center", + "text-margin-y": 4, + "text-events": "no", + "min-zoomed-font-size": 9, + "z-index": 10, + "transition-property": "background-color, border-color, border-width, color, opacity", + "transition-duration": "120ms", + } }, + { selector: "node[status = 'healthy']", style: { "background-color": theme.success } }, + { selector: "node[status = 'degraded']", style: { "background-color": theme.warning } }, + { selector: "node[status = 'failing']", style: { "background-color": theme.danger } }, + + { selector: "edge", style: { + "width": 1, + "line-color": theme.border2, + "target-arrow-color": theme.border2, + "target-arrow-shape": "triangle", + "arrow-scale": 0.9, + "curve-style": "bezier", + // Edge label — hidden by default, shown on focus + "label": "data(label)", + "color": theme.fg4, + "font-family": theme.fontMono, + "font-size": 9, + "text-rotation": "autorotate", + "text-margin-y": -4, + "text-opacity": 0, // hidden until focused + "text-events": "no", + "z-index": 1, + "transition-property": "line-color, width, target-arrow-color, opacity, text-opacity", + "transition-duration": "120ms", + } }, + { selector: "edge[status = 'failing']", style: { "line-color": theme.danger, "target-arrow-color": theme.danger, "width": 1.5 } }, + + // ─── Highlight states ────────────────────────────────────── + { selector: ".rcs-dim", style: { "opacity": 0.18 } }, + { selector: "node.rcs-focus", style: { + "opacity": 1, + "border-color": theme.accent, + "border-width": 2, + "color": theme.fg1, + "font-weight": 500, + "z-index": 30, + } }, + { selector: "node.rcs-neighbor", style: { + "opacity": 1, + "color": theme.fg1, + "z-index": 20, + } }, + { selector: "edge.rcs-focus-edge", style: { + "opacity": 1, + "line-color": theme.accent, + "target-arrow-color": theme.accent, + "width": 2, + "text-opacity": 1, + "color": theme.fg1, + "z-index": 25, + } }, + { selector: "node:selected", style: { "border-color": theme.accent, "border-width": 2 } }, + ]; +} + +/** Tiny CSS.escape polyfill — Cytoscape selectors need IDs escaped if they contain dots/colons. */ +function cssEscape(id: string): string { + if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(id); + return id.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`); +} diff --git a/src/charts/Sparkline.tsx b/src/charts/Sparkline.tsx new file mode 100644 index 0000000..e2226ff --- /dev/null +++ b/src/charts/Sparkline.tsx @@ -0,0 +1,62 @@ +/** + * Sparkline — inline mini-chart for cards and rows + * ───────────────────────────────────────────────── + * SVG-based, intentionally minimal. For more than 100 points or + * interactive needs, use instead. + * + * Same shape as the private Sparkline used by , but exposed + * publicly with size + color + stroke controls. + */ +import * as React from "react"; +import { cx } from "../internal/cx"; +import { readChartTheme } from "./theme"; +import type { SparklineProps } from "../components"; + +export function Sparkline(props: SparklineProps): React.ReactElement { + const { + data, width = 80, height = 24, stroke, fill, + showArea = false, strokeWidth = 1.5, + className, style, id, + } = props; + + if (!data.length) { + return ; + } + + const theme = readChartTheme(); + const min = Math.min(...data); + const max = Math.max(...data); + const range = max - min || 1; + const stepX = data.length > 1 ? width / (data.length - 1) : 0; + const yFor = (v: number) => height - ((v - min) / range) * height; + + const points = data.map((v, i) => `${i * stepX},${yFor(v)}`).join(" "); + const areaPath = showArea + ? `M0,${height} L${points.replaceAll(",", " ").split(" ").join(" ")} L${(data.length - 1) * stepX},${height} Z` + : null; + + return ( + + {areaPath && } + + + ); +} diff --git a/src/charts/Treemap.tsx b/src/charts/Treemap.tsx new file mode 100644 index 0000000..3f95c65 --- /dev/null +++ b/src/charts/Treemap.tsx @@ -0,0 +1,336 @@ +/** + * Treemap — hierarchical proportional layout with WebGL2 / WebGPU support + * ─────────────────────────────────────────────────────────────────────── + * Three rendering paths (selected via the `engine` prop): + * + * - "canvas" — Canvas2D path. Best for <50k cells, no peer deps. + * - "webgl" — deck.gl SolidPolygonLayer. Instanced rendering on WebGL2; + * smooth at 1M+ cells. Used by default for big trees. + * - "webgpu" — Same deck.gl pipeline but with the WebGPU adapter. Lower + * CPU overhead, better on Apple Silicon and modern hardware. + * - "auto" — Resolves to webgpu > webgl > canvas based on capability + + * dataset size. This is the default and what you want. + * + * Layout (squarified treemap) is computed by d3-hierarchy regardless of + * renderer; only the draw path differs. Hover picking uses linear scan + * for canvas2d and deck.gl's built-in pickObject() for WebGL/WebGPU. + * + * Peer deps: + * pnpm add d3-hierarchy # always required + * pnpm add @deck.gl/core @deck.gl/layers @luma.gl/core # for webgl/webgpu + */ +import * as React from "react"; +import { cx } from "../internal/cx"; +import { readChartTheme, onThemeChange, type ChartTheme } from "./theme"; +import { resolveEngine, loadDeck, colorToRGBA, type ResolvedEngine } from "./renderer"; +import type { TreemapProps, TreemapNode } from "../components"; + +interface LaidOutNode { + readonly node: TreemapNode; + readonly x0: number; + readonly y0: number; + readonly x1: number; + readonly y1: number; + readonly depth: number; + readonly path: string; +} + +async function layout(root: TreemapNode, width: number, height: number, padding: number): Promise { + // @ts-expect-error — peer dep + const d3hier = await import("d3-hierarchy"); + type HNode = { x0: number; y0: number; x1: number; y1: number; depth: number; data: TreemapNode; ancestors: () => HNode[] }; + const h = d3hier.hierarchy(root, (d: TreemapNode) => d.children) + .sum((d: TreemapNode) => d.children?.length ? 0 : (d.value ?? 0)) + .sort((a: HNode, b: HNode) => (b.data.value ?? 0) - (a.data.value ?? 0)); + d3hier.treemap().size([width, height]).paddingInner(padding).paddingOuter(padding).round(true)(h); + const out: LaidOutNode[] = []; + h.each((n: HNode) => { + if (!Number.isFinite(n.x1 - n.x0) || !Number.isFinite(n.y1 - n.y0)) return; + out.push({ + node: n.data, x0: n.x0, y0: n.y0, x1: n.x1, y1: n.y1, depth: n.depth, + path: n.ancestors().reverse().map((a: HNode) => a.data.name).join(" / "), + }); + }); + return out; +} + +export function Treemap(props: TreemapProps): React.ReactElement { + const { + data, height = 480, padding = 1, maxDepth = 3, + engine = "auto", + valueFormat = (v: number) => v.toLocaleString(), + onNodeClick, onNodeHover, + className, style, id, + } = props; + + const wrapRef = React.useRef(null); + const canvasRef = React.useRef(null); + const deckRef = React.useRef<{ destroy: () => void; setProps: (p: unknown) => void } | null>(null); + const [width, setWidth] = React.useState(0); + const [nodes, setNodes] = React.useState([]); + const [hover, setHover] = React.useState(null); + const [resolved, setResolved] = React.useState("canvas"); + + // Resolve engine based on data size + React.useEffect(() => { + const totalCells = countLeaves(data); + setResolved(resolveEngine(engine, totalCells, 50_000)); + }, [data, engine]); + + // Resize observer + React.useEffect(() => { + if (!wrapRef.current) return; + const ro = new ResizeObserver((entries) => { + const w = Math.floor(entries[0].contentRect.width); + if (w > 0 && w !== width) setWidth(w); + }); + ro.observe(wrapRef.current); + return () => ro.disconnect(); + }, [width]); + + // Layout + React.useEffect(() => { + let cancelled = false; + if (width === 0) return; + layout(data, width, height, padding).then((laid) => { + if (!cancelled) setNodes(laid); + }).catch((err: unknown) => { + // eslint-disable-next-line no-console + console.warn("[@ossrandom/design-system] Treemap requires d3-hierarchy. Run: pnpm add d3-hierarchy", err); + }); + return () => { cancelled = true; }; + }, [data, width, height, padding]); + + // ─── Canvas2D paint ──────────────────────────────────────────── + const paintCanvas = React.useCallback(() => { + const cv = canvasRef.current; + if (!cv || width === 0 || resolved !== "canvas") return; + const dpr = window.devicePixelRatio || 1; + const theme = readChartTheme(); + cv.width = width * dpr; + cv.height = height * dpr; + cv.style.width = `${width}px`; + cv.style.height = `${height}px`; + const ctx = cv.getContext("2d")!; + ctx.scale(dpr, dpr); + ctx.clearRect(0, 0, width, height); + ctx.font = `500 11px ${theme.fontMono}`; + ctx.textBaseline = "top"; + + for (const n of nodes) { + if (n.depth > maxDepth) continue; + const w = n.x1 - n.x0, h = n.y1 - n.y0; + if (w < 1 || h < 1) continue; + const isLeaf = !n.node.children?.length; + const baseColor = n.node.color ?? theme.series[n.depth % theme.series.length]; + ctx.fillStyle = isLeaf ? baseColor : baseColor + "22"; + ctx.fillRect(n.x0, n.y0, w, h); + ctx.strokeStyle = theme.bg1; + ctx.lineWidth = 1; + ctx.strokeRect(n.x0, n.y0, w, h); + if (w > 60 && h > 14 && isLeaf) { + ctx.fillStyle = readableTextColor(baseColor); + ctx.fillText(truncate(n.node.name, Math.floor(w / 7)), n.x0 + 4, n.y0 + 4); + if (h > 32) { + ctx.fillStyle = readableTextColor(baseColor) + "AA"; + ctx.fillText(valueFormat(n.node.value ?? 0), n.x0 + 4, n.y0 + 18); + } + } + } + if (hover) { + ctx.strokeStyle = theme.fg1; + ctx.lineWidth = 2; + ctx.strokeRect(hover.x0, hover.y0, hover.x1 - hover.x0, hover.y1 - hover.y0); + } + }, [nodes, width, height, maxDepth, hover, valueFormat, resolved]); + + // ─── WebGL/WebGPU paint via deck.gl ─────────────────────────── + React.useEffect(() => { + if (resolved === "canvas" || width === 0 || !nodes.length) return; + let cancelled = false; + let cleanup: (() => void) | null = null; + + (async () => { + const deck = await loadDeck(); + if (!deck || cancelled || !wrapRef.current) { + // Fallback to canvas if deck.gl missing + setResolved("canvas"); + return; + } + const theme = readChartTheme(); + const layers = buildDeckLayers(deck, nodes, maxDepth, theme, hover); + const adapter = resolved === "webgpu" ? "webgpu" : "webgl"; + + const inst = new (deck.Deck as unknown as new (opts: unknown) => { destroy: () => void; setProps: (p: unknown) => void; pickObject: (p: { x: number; y: number }) => unknown })({ + parent: wrapRef.current, + width, + height, + controller: false, + // luma.gl device adapter — webgpu when supported, webgl2 fallback + deviceProps: { type: adapter, createCanvasContext: { useDevicePixels: true } }, + views: [{ "@@type": "OrthographicView", id: "ortho", flipY: true }], + viewState: { target: [width / 2, height / 2, 0], zoom: 0 }, + layers, + getCursor: ({ isHovering }: { isHovering: boolean }) => isHovering && onNodeClick ? "pointer" : "default", + onClick: ({ object }: { object?: { __node?: LaidOutNode } }) => { + if (object?.__node && onNodeClick) onNodeClick(object.__node.node); + }, + onHover: ({ object }: { object?: { __node?: LaidOutNode } }) => { + const next = object?.__node ?? null; + setHover(next); + onNodeHover?.(next?.node ?? null); + }, + }); + deckRef.current = inst; + cleanup = () => inst.destroy(); + })().catch((err: unknown) => { + // eslint-disable-next-line no-console + console.warn("[@ossrandom/design-system] Treemap WebGL init failed; falling back to canvas2d:", err); + setResolved("canvas"); + }); + + return () => { + cancelled = true; + cleanup?.(); + deckRef.current = null; + }; + }, [resolved, width, height, nodes, maxDepth, hover, onNodeClick, onNodeHover]); + + React.useEffect(() => { paintCanvas(); }, [paintCanvas]); + React.useEffect(() => onThemeChange(() => { + paintCanvas(); + // For deck.gl, recreate to pick up new theme colors + if (resolved !== "canvas") setHover((h) => h); + }), [paintCanvas, resolved]); + + // Canvas2D hover (WebGL hover handled by deck.gl onHover above) + const handleMove = (e: React.MouseEvent) => { + if (resolved !== "canvas" || !canvasRef.current || !nodes.length) return; + const rect = canvasRef.current.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + let found: LaidOutNode | null = null; + for (let i = nodes.length - 1; i >= 0; i--) { + const n = nodes[i]; + if (n.depth > maxDepth) continue; + if (x >= n.x0 && x <= n.x1 && y >= n.y0 && y <= n.y1) { found = n; break; } + } + if (found !== hover) { + setHover(found); + onNodeHover?.(found?.node ?? null); + } + }; + + const handleClick = () => { + if (resolved === "canvas" && hover) onNodeClick?.(hover.node); + }; + + return ( +
+ {resolved === "canvas" && ( + { setHover(null); onNodeHover?.(null); }} + onClick={handleClick} + style={{ display: "block", cursor: hover && onNodeClick ? "pointer" : "default" }} + role="img" + aria-label={props["aria-label"] ?? `Treemap of ${data.name}`} + > + )} + {hover && ( +
+
{hover.path}
+
{valueFormat(hover.node.value ?? 0)}
+
+ )} + +
+ ); +} + +/** Build the SolidPolygonLayer for a deck.gl render. */ +function buildDeckLayers( + deck: NonNullable>>, + nodes: LaidOutNode[], + maxDepth: number, + theme: ChartTheme, + hovered: LaidOutNode | null, +): unknown[] { + type Cell = { polygon: number[][]; color: [number, number, number, number]; __node: LaidOutNode }; + const cells: Cell[] = []; + for (const n of nodes) { + if (n.depth > maxDepth) continue; + const isLeaf = !n.node.children?.length; + const baseColor = n.node.color ?? theme.series[n.depth % theme.series.length]; + const rgba = colorToRGBA(baseColor, isLeaf ? 255 : 64); + cells.push({ + polygon: [[n.x0, n.y0], [n.x1, n.y0], [n.x1, n.y1], [n.x0, n.y1]], + color: rgba, + __node: n, + }); + } + const SolidPolygonLayer = deck.SolidPolygonLayer as unknown as new (opts: unknown) => unknown; + + return [ + new SolidPolygonLayer({ + id: "treemap-cells", + data: cells, + filled: true, + stroked: false, + getPolygon: (d: Cell) => d.polygon, + getFillColor: (d: Cell) => d.color, + pickable: true, + // Outline for hovered cell — extra layer + updateTriggers: { getFillColor: hovered?.node.name }, + }), + // Hover outline as a thin polygon + hovered ? new SolidPolygonLayer({ + id: "treemap-hover", + data: [{ polygon: [[hovered.x0, hovered.y0], [hovered.x1, hovered.y0], [hovered.x1, hovered.y1], [hovered.x0, hovered.y1]] }], + filled: false, + stroked: true, + getLineColor: colorToRGBA(theme.fg1), + getLineWidth: 2, + lineWidthUnits: "pixels", + pickable: false, + }) : null, + ].filter(Boolean); +} + +function countLeaves(node: TreemapNode): number { + if (!node.children?.length) return 1; + let n = 0; + for (const c of node.children) n += countLeaves(c); + return n; +} + +function truncate(s: string, max: number): string { + if (s.length <= max) return s; + if (max < 4) return s.slice(0, max); + return s.slice(0, max - 1) + "…"; +} + +function readableTextColor(bg: string): string { + const m = /^#?([0-9a-f]{6})/i.exec(bg); + if (!m) return "#ffffff"; + const r = parseInt(m[1].slice(0, 2), 16); + const g = parseInt(m[1].slice(2, 4), 16); + const b = parseInt(m[1].slice(4, 6), 16); + const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; + return luminance > 0.6 ? "#1C1C1C" : "#FFFFFF"; +} diff --git a/src/charts/UptimeBar.tsx b/src/charts/UptimeBar.tsx new file mode 100644 index 0000000..5019c2b --- /dev/null +++ b/src/charts/UptimeBar.tsx @@ -0,0 +1,121 @@ +/** + * UptimeBar — status-over-time bar chart + * ─────────────────────────────────────── + * Each cell = a time window (last 90 days, last 24 hours, etc.). + * Color encodes status — meant to mirror the StatusPage uptime visualization. + * Canvas-rendered to handle 90+ cells without layout thrashing. + */ +import * as React from "react"; +import { cx } from "../internal/cx"; +import { readChartTheme, onThemeChange } from "./theme"; +import type { UptimeBarProps, UptimeStatus } from "../components"; + +export function UptimeBar(props: UptimeBarProps): React.ReactElement { + const { cells, height = 28, gap = 2, cellRadius = 1, onCellHover, className, style, id } = props; + const canvasRef = React.useRef(null); + const [width, setWidth] = React.useState(0); + const [hovered, setHovered] = React.useState<{ idx: number; x: number } | null>(null); + + React.useEffect(() => { + if (!canvasRef.current) return; + const ro = new ResizeObserver((entries) => { + const w = Math.floor(entries[0].contentRect.width); + if (w > 0 && w !== width) setWidth(w); + }); + ro.observe(canvasRef.current.parentElement!); + return () => ro.disconnect(); + }, [width]); + + const draw = React.useCallback(() => { + const cv = canvasRef.current; + if (!cv || width === 0) return; + const dpr = window.devicePixelRatio || 1; + const theme = readChartTheme(); + cv.width = width * dpr; + cv.height = height * dpr; + cv.style.width = `${width}px`; + cv.style.height = `${height}px`; + const ctx = cv.getContext("2d")!; + ctx.scale(dpr, dpr); + ctx.clearRect(0, 0, width, height); + + const cellW = Math.max(1, (width - gap * (cells.length - 1)) / cells.length); + cells.forEach((c, i) => { + const x = i * (cellW + gap); + ctx.fillStyle = colorFor(c.status, theme); + ctx.beginPath(); + // Rounded rect via path + const r = Math.min(cellRadius, cellW / 2, height / 2); + ctx.moveTo(x + r, 0); + ctx.lineTo(x + cellW - r, 0); + ctx.arcTo(x + cellW, 0, x + cellW, r, r); + ctx.lineTo(x + cellW, height - r); + ctx.arcTo(x + cellW, height, x + cellW - r, height, r); + ctx.lineTo(x + r, height); + ctx.arcTo(x, height, x, height - r, r); + ctx.lineTo(x, r); + ctx.arcTo(x, 0, x + r, 0, r); + ctx.closePath(); + ctx.fill(); + }); + }, [cells, width, height, gap, cellRadius]); + + React.useEffect(() => { draw(); }, [draw]); + React.useEffect(() => onThemeChange(draw), [draw]); + + const handleMove = (e: React.MouseEvent) => { + if (!cells.length || !canvasRef.current) return; + const rect = canvasRef.current.getBoundingClientRect(); + const x = e.clientX - rect.left; + const cellW = (width - gap * (cells.length - 1)) / cells.length; + const idx = Math.min(cells.length - 1, Math.max(0, Math.floor(x / (cellW + gap)))); + setHovered({ idx, x }); + onCellHover?.(cells[idx], idx); + }; + + const handleLeave = () => { + setHovered(null); + onCellHover?.(null, -1); + }; + + return ( +
+ + {hovered && cells[hovered.idx] && ( +
+ {cells[hovered.idx].label ?? `Period ${hovered.idx + 1}`} + {cells[hovered.idx].status} +
+ )} +
+ ); +} + +function colorFor(status: UptimeStatus, theme: ReturnType): string { + switch (status) { + case "operational": return theme.success; + case "degraded": return theme.warning; + case "outage": return theme.danger; + case "maintenance": return theme.info; + case "no-data": return theme.bg3; + default: return theme.bg3; + } +} diff --git a/src/charts/index.ts b/src/charts/index.ts new file mode 100644 index 0000000..4b3141d --- /dev/null +++ b/src/charts/index.ts @@ -0,0 +1,33 @@ +/** + * Charts module entry — opt-in subpath import. + * + * import { Chart, Donut, Treemap, ServiceMap } from "@ossrandom/design-system/charts"; + * + * Charts pull in heavier peer deps (uplot, d3-hierarchy, cytoscape) which + * are loaded lazily; only the components you actually render trigger their + * dynamic imports. Install the ones you use: + * + * pnpm add uplot # Chart, Sparkline (optional, falls back to SVG) + * pnpm add d3-hierarchy # Treemap + * pnpm add cytoscape cytoscape-cose-bilkent # ServiceMap + */ +export { Chart } from "./Chart"; +export { Sparkline } from "./Sparkline"; +export { Donut, RadialGauge } from "./Donut"; +export { UptimeBar } from "./UptimeBar"; +export { Treemap } from "./Treemap"; +export { ServiceMap } from "./ServiceMap"; + +export { readChartTheme, onThemeChange } from "./theme"; +export type { ChartTheme } from "./theme"; + +// Re-export public types for convenience +export type { + ChartProps, ChartSeries, ChartType, ChartPoint, + SparklineProps, + DonutProps, DonutSegment, + RadialGaugeProps, + UptimeBarProps, UptimeCell, UptimeStatus, + TreemapProps, TreemapNode, + ServiceMapProps, ServiceNode, ServiceEdge, +} from "../components"; diff --git a/src/charts/renderer.ts b/src/charts/renderer.ts new file mode 100644 index 0000000..b5a2227 --- /dev/null +++ b/src/charts/renderer.ts @@ -0,0 +1,143 @@ +/** + * Renderer detection + engine abstraction for the charts module. + * + * Charts that handle large datasets accept an `engine` prop: + * + * "auto" → pick best available: webgpu > webgl2 > canvas2d + * "canvas" → CPU-bound canvas2d path (always available, no deps) + * "webgl" → WebGL2 via deck.gl/luma.gl — instanced rendering, 1M+ primitives + * "webgpu" → WebGPU via deck.gl/luma.gl — modern API, lowest CPU overhead + * + * The WebGL/WebGPU paths require the optional peer dependency: + * pnpm add @deck.gl/core @deck.gl/layers @luma.gl/core + */ + +export type RenderEngine = "auto" | "canvas" | "webgl" | "webgpu"; +export type ResolvedEngine = "canvas" | "webgl" | "webgpu"; + +/** Cached capability probe — runs once per session. */ +let cachedCaps: { webgl2: boolean; webgpu: boolean } | null = null; + +export interface RendererCapabilities { + readonly webgl2: boolean; + readonly webgpu: boolean; + readonly devicePixelRatio: number; + readonly maxTextureSize: number; +} + +/** Synchronous capability check — WebGPU result is async-resolved separately. */ +export function detectCapabilities(): RendererCapabilities { + if (typeof window === "undefined") { + return { webgl2: false, webgpu: false, devicePixelRatio: 1, maxTextureSize: 0 }; + } + if (cachedCaps) { + return { + ...cachedCaps, + devicePixelRatio: window.devicePixelRatio || 1, + maxTextureSize: 0, + }; + } + + let webgl2 = false; + let maxTextureSize = 0; + try { + const c = document.createElement("canvas"); + const gl = c.getContext("webgl2"); + if (gl) { + webgl2 = true; + maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE) as number; + } + } catch { /* no webgl2 */ } + + // WebGPU is async-detected; the sync probe just checks for the API surface + const webgpu = "gpu" in navigator && typeof (navigator as Navigator & { gpu?: unknown }).gpu === "object"; + + cachedCaps = { webgl2, webgpu }; + return { webgl2, webgpu, devicePixelRatio: window.devicePixelRatio || 1, maxTextureSize }; +} + +/** Async confirm WebGPU is actually available (requestAdapter can fail). */ +export async function confirmWebGPU(): Promise { + if (typeof navigator === "undefined") return false; + const gpu = (navigator as Navigator & { gpu?: { requestAdapter: () => Promise } }).gpu; + if (!gpu) return false; + try { + const adapter = await gpu.requestAdapter(); + return adapter !== null; + } catch { + return false; + } +} + +/** + * Resolve "auto" → an actual engine, preferring WebGPU > WebGL2 > Canvas2D. + * Datasets above `largeThreshold` items skip canvas (fall through to WebGL). + */ +export function resolveEngine(requested: RenderEngine, dataSize: number, largeThreshold = 50_000): ResolvedEngine { + const caps = detectCapabilities(); + + if (requested === "canvas") return "canvas"; + if (requested === "webgl") return caps.webgl2 ? "webgl" : "canvas"; + if (requested === "webgpu") return caps.webgpu ? "webgpu" : caps.webgl2 ? "webgl" : "canvas"; + + // auto: + if (caps.webgpu && dataSize > largeThreshold) return "webgpu"; + if (caps.webgl2 && dataSize > largeThreshold) return "webgl"; + return "canvas"; +} + +/** Lazy-load deck.gl + luma.gl. Returns null if not installed. */ +type DeckCore = unknown; +type DeckLayer = unknown; +let deckCache: { Deck: DeckCore; SolidPolygonLayer: DeckLayer; ScatterplotLayer: DeckLayer; LineLayer: DeckLayer; ArcLayer: DeckLayer; PolygonLayer: DeckLayer } | null = null; + +export async function loadDeck(): Promise { + if (deckCache) return deckCache; + try { + const core = await import("@deck.gl/core"); + const layers = await import("@deck.gl/layers"); + deckCache = { + Deck: core.Deck, + SolidPolygonLayer: layers.SolidPolygonLayer, + ScatterplotLayer: layers.ScatterplotLayer, + LineLayer: layers.LineLayer, + ArcLayer: layers.ArcLayer, + PolygonLayer: layers.PolygonLayer, + }; + return deckCache; + } catch (err) { + // eslint-disable-next-line no-console + console.warn("[@ossrandom/design-system] WebGL renderer requested but @deck.gl/core not installed. Falling back to canvas. Run: pnpm add @deck.gl/core @deck.gl/layers", err); + return null; + } +} + +/** Convert a hex/rgb color to deck.gl's [r, g, b, a] 0-255 array. */ +export function colorToRGBA(input: string, alpha = 255): [number, number, number, number] { + if (!input) return [0, 0, 0, alpha]; + if (input.startsWith("rgb")) { + const m = /rgba?\(([^)]+)\)/.exec(input); + if (!m) return [0, 0, 0, alpha]; + const parts = m[1].split(",").map((s) => parseFloat(s.trim())); + const [r = 0, g = 0, b = 0, a = 1] = parts; + return [r, g, b, Math.round(a * 255)]; + } + const hex = input.replace("#", ""); + if (hex.length === 3) { + return [ + parseInt(hex[0] + hex[0], 16), + parseInt(hex[1] + hex[1], 16), + parseInt(hex[2] + hex[2], 16), + alpha, + ]; + } + if (hex.length >= 6) { + return [ + parseInt(hex.slice(0, 2), 16), + parseInt(hex.slice(2, 4), 16), + parseInt(hex.slice(4, 6), 16), + hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : alpha, + ]; + } + return [0, 0, 0, alpha]; +} diff --git a/src/charts/theme.ts b/src/charts/theme.ts new file mode 100644 index 0000000..9fde4d9 --- /dev/null +++ b/src/charts/theme.ts @@ -0,0 +1,102 @@ +/** + * Chart theme adapter + * ─────────────────── + * Reads design-token CSS variables from computed styles so chart colors + * track light/dark mode automatically, and exposes a curated multi-series + * palette derived from the brand. + * + * The mono base (var(--fg-1) / --fg-3) is the primary "ink" for axes + * and gridlines; series get a small categorical palette tuned to read + * well against both light and dark surfaces. + */ + +export interface ChartTheme { + readonly fg1: string; + readonly fg2: string; + readonly fg3: string; + readonly fg4: string; + readonly bg1: string; + readonly bg2: string; + readonly bg3: string; + readonly border1: string; + readonly border2: string; + readonly accent: string; + readonly accentSoft: string; + readonly success: string; + readonly warning: string; + readonly danger: string; + readonly info: string; + /** Categorical palette for multi-series charts. Index 0 is always the accent. */ + readonly series: readonly string[]; + /** Font stacks resolved from CSS vars. */ + readonly fontSans: string; + readonly fontMono: string; + readonly mode: "light" | "dark"; +} + +const FALLBACK: ChartTheme = { + fg1: "#1C1C1C", fg2: "#3D3D3D", fg3: "#5A5A5A", fg4: "#A6A6A6", + bg1: "#FFFFFF", bg2: "#FAFAFA", bg3: "#F5F5F5", + border1: "#E5E5E5", border2: "#D4D4D4", + accent: "#E60000", accentSoft: "rgba(230,0,0,0.08)", + success: "#1F9E5C", warning: "#D98E2B", danger: "#E60000", info: "#2D73D9", + series: ["#E60000", "#1C1C1C", "#5A5A5A", "#2D73D9", "#1F9E5C", "#D98E2B", "#9E0000", "#A6A6A6"], + fontSans: "Inter, system-ui, sans-serif", + fontMono: "'JetBrains Mono', monospace", + mode: "light", +}; + +/** Read a CSS custom property from documentElement, with fallback. */ +function cssVar(name: string, fallback: string): string { + if (typeof window === "undefined") return fallback; + const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim(); + return v || fallback; +} + +/** Snapshot the current theme from CSS variables. Re-call on theme change. */ +export function readChartTheme(): ChartTheme { + if (typeof window === "undefined") return FALLBACK; + + const mode = (document.documentElement.getAttribute("data-theme") as "light" | "dark") ?? "light"; + const fg1 = cssVar("--fg-1", FALLBACK.fg1); + const fg2 = cssVar("--fg-2", FALLBACK.fg2); + const fg3 = cssVar("--fg-3", FALLBACK.fg3); + const fg4 = cssVar("--fg-4", FALLBACK.fg4); + const bg1 = cssVar("--bg-1", FALLBACK.bg1); + const bg2 = cssVar("--bg-2", FALLBACK.bg2); + const bg3 = cssVar("--bg-3", FALLBACK.bg3); + const border1 = cssVar("--border-1", FALLBACK.border1); + const border2 = cssVar("--border-2", FALLBACK.border2); + const accent = cssVar("--accent", FALLBACK.accent); + const accentSoft = cssVar("--accent-soft", FALLBACK.accentSoft); + const success = cssVar("--success", FALLBACK.success); + const warning = cssVar("--warning", FALLBACK.warning); + const danger = cssVar("--danger", FALLBACK.danger); + const info = cssVar("--info", FALLBACK.info); + + // Categorical series palette — accent first, then a mono+chromatic + // sequence tuned for distinguishability with the brand. + const series: readonly string[] = mode === "dark" + ? [accent, "#F5F5F5", "#A6A6A6", "#5BA0F2", "#3FBE83", "#E5A65A", "#FF6464", "#7A7A7A"] + : [accent, "#1C1C1C", "#5A5A5A", "#2D73D9", "#1F9E5C", "#D98E2B", "#9E0000", "#A6A6A6"]; + + return { + fg1, fg2, fg3, fg4, bg1, bg2, bg3, border1, border2, + accent, accentSoft, success, warning, danger, info, + series, + fontSans: cssVar("--font-sans", FALLBACK.fontSans), + fontMono: cssVar("--font-mono", FALLBACK.fontMono), + mode, + }; +} + +/** + * Subscribe to theme changes (data-theme attr swaps). Returns an unsubscribe. + * Use inside a useEffect to refresh charts when the user toggles dark mode. + */ +export function onThemeChange(cb: () => void): () => void { + if (typeof window === "undefined") return () => { /* no-op */ }; + const obs = new MutationObserver(cb); + obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] }); + return () => obs.disconnect(); +} diff --git a/src/components.ts b/src/components.ts index 5b53fed..6e6f079 100644 --- a/src/components.ts +++ b/src/components.ts @@ -691,3 +691,148 @@ export interface UseTheme { readonly setMode: (m: ThemeMode) => void; readonly toggle: () => void; } + +// ═══════════════════════════════════════════════════════════════════════ +// CHARTS +// ═══════════════════════════════════════════════════════════════════════ +// Subpath import: `@ossrandom/design-system/charts`. Heavy peer deps +// (uplot, d3-hierarchy, cytoscape, deck.gl) are loaded lazily at the +// component level — the *types* below are pure and safe to import from +// anywhere. Renderer engines are abstracted behind `RenderEngine` so +// consumers can request "auto" and let the component pick the best +// available adapter (webgpu > webgl > canvas). + +/** Chart rendering engine. "auto" picks the best available at runtime. */ +export type RenderEngine = "auto" | "canvas" | "webgl" | "webgpu"; + +// ─── Chart (time-series line / area / bar) ──────────────────────────── +export type ChartType = "line" | "area" | "bar"; + +/** A single x/y sample. Charts accept parallel `timestamps` + `series.data` + * arrays for performance, but a `ChartPoint` is the conceptual unit. */ +export interface ChartPoint { + readonly x: number; + readonly y: number; +} + +export interface ChartSeries { + readonly label: string; + readonly data: readonly number[]; + readonly color?: string; +} + +export interface ChartProps extends BaseProps { + readonly type?: ChartType; + readonly timestamps: readonly number[]; + readonly series: readonly ChartSeries[]; + readonly height?: number; + readonly showGrid?: boolean; + readonly showLegend?: boolean; + readonly xLabel?: string; + readonly yLabel?: string; + readonly engine?: RenderEngine; + readonly onPointClick?: (point: ChartPoint, seriesIndex: number) => void; +} + +// ─── Sparkline ──────────────────────────────────────────────────────── +export interface SparklineProps extends BaseProps { + readonly data: readonly number[]; + readonly width?: number; + readonly height?: number; + readonly stroke?: string; + readonly fill?: string; + readonly showArea?: boolean; + readonly strokeWidth?: number; +} + +// ─── Donut · RadialGauge ────────────────────────────────────────────── +export interface DonutSegment { + readonly label: string; + readonly value: number; + readonly color?: string; +} + +export interface DonutProps extends BaseProps { + readonly segments: readonly DonutSegment[]; + readonly size?: number; + readonly thickness?: number; + readonly centerLabel?: ReactNode; + readonly centerValue?: ReactNode; + readonly showLegend?: boolean; + readonly onSegmentClick?: (segment: DonutSegment, index: number) => void; +} + +export interface RadialGaugeProps extends BaseProps { + readonly value: number; + readonly max?: number; + readonly size?: number; + readonly thickness?: number; + readonly label?: ReactNode; + readonly tone?: "neutral" | "good" | "warning" | "bad"; +} + +// ─── UptimeBar ──────────────────────────────────────────────────────── +export type UptimeStatus = "operational" | "degraded" | "outage" | "maintenance" | "no-data"; + +export interface UptimeCell { + readonly status: UptimeStatus; + readonly label?: string; + readonly timestamp?: number; +} + +export interface UptimeBarProps extends BaseProps { + readonly cells: readonly UptimeCell[]; + readonly height?: number; + readonly gap?: number; + readonly cellRadius?: number; + readonly onCellHover?: (cell: UptimeCell | null, index: number) => void; +} + +// ─── Treemap ────────────────────────────────────────────────────────── +export interface TreemapNode { + readonly name: string; + readonly value?: number; + readonly color?: string; + readonly children?: readonly TreemapNode[]; +} + +export interface TreemapProps extends BaseProps { + readonly data: TreemapNode; + readonly height?: number; + readonly padding?: number; + readonly maxDepth?: number; + readonly engine?: RenderEngine; + readonly valueFormat?: (value: number) => string; + readonly onNodeClick?: (node: TreemapNode) => void; + readonly onNodeHover?: (node: TreemapNode | null) => void; +} + +// ─── ServiceMap ─────────────────────────────────────────────────────── +/** A node in a service-topology graph. `status` drives the dot color + * (healthy/degraded/failing); pre-computed positions are honoured by + * the WebGL renderer and skip the d3-force layout pass. */ +export interface ServiceNode { + readonly id: string; + readonly label: string; + readonly status?: "healthy" | "degraded" | "failing" | "unknown"; + readonly kind?: string; + readonly x?: number; + readonly y?: number; +} + +export interface ServiceEdge { + readonly source: string; + readonly target: string; + readonly label?: string; + readonly status?: "healthy" | "failing"; +} + +export interface ServiceMapProps extends BaseProps { + readonly nodes: readonly ServiceNode[]; + readonly edges: readonly ServiceEdge[]; + readonly height?: number; + readonly layout?: "cose-bilkent" | "circle" | "grid" | "concentric" | "breadthfirst"; + readonly engine?: RenderEngine; + readonly onNodeClick?: (node: ServiceNode) => void; + readonly onEdgeClick?: (edge: { source: string; target: string }) => void; +} diff --git a/tests/unit/Donut.test.tsx b/tests/unit/Donut.test.tsx new file mode 100644 index 0000000..437c86f --- /dev/null +++ b/tests/unit/Donut.test.tsx @@ -0,0 +1,48 @@ +import { describe, it, expect } from "vitest"; +import { render, fireEvent } from "@testing-library/react"; +import { Donut } from "../../src/charts/Donut"; + +describe("Donut", () => { + const segments = [ + { label: "Compute", value: 45 }, + { label: "Database", value: 25 }, + { label: "Cache", value: 18 }, + { label: "Other", value: 12 }, + ]; + + it("renders one path per segment", () => { + const { container } = render(); + expect(container.querySelectorAll("path").length).toBe(segments.length); + }); + + it("renders a center label and value when provided", () => { + const { getByText } = render( + , + ); + expect(getByText("cores")).toBeTruthy(); + expect(getByText("847")).toBeTruthy(); + }); + + it("invokes onSegmentClick with the original segment + index", () => { + let clicked: { label: string; index: number } | null = null; + const { container } = render( + { clicked = { label: seg.label, index: i }; }} + />, + ); + const paths = container.querySelectorAll("path"); + fireEvent.click(paths[1]!); + expect(clicked).toEqual({ label: "Database", index: 1 }); + }); + + it("renders a legend when showLegend is set", () => { + const { getByText } = render(); + for (const s of segments) expect(getByText(s.label)).toBeTruthy(); + }); + + it("collapses gracefully on empty segments", () => { + const { container } = render(); + expect(container.querySelectorAll("path").length).toBe(0); + }); +}); diff --git a/tests/unit/ServiceMap.test.tsx b/tests/unit/ServiceMap.test.tsx new file mode 100644 index 0000000..bcc8f43 --- /dev/null +++ b/tests/unit/ServiceMap.test.tsx @@ -0,0 +1,35 @@ +import { describe, it, expect } from "vitest"; +import { render } from "@testing-library/react"; +import { ServiceMap } from "../../src/charts/ServiceMap"; +import type { ServiceNode, ServiceEdge } from "../../src/components"; + +const nodes: readonly ServiceNode[] = [ + { id: "api", label: "API Gateway", status: "healthy" }, + { id: "auth", label: "Auth", status: "healthy" }, + { id: "users", label: "Users DB", status: "degraded" }, +]; + +const edges: readonly ServiceEdge[] = [ + { source: "api", target: "auth" }, + { source: "api", target: "users", status: "failing" }, +]; + +describe("ServiceMap", () => { + it("renders a wrapper without throwing for a small topology", () => { + const { container } = render(); + expect(container.firstElementChild).toBeTruthy(); + }); + + it("does not throw with zero nodes and zero edges", () => { + expect(() => render()).not.toThrow(); + }); + + it("respects a fixed height prop", () => { + const { container } = render( + , + ); + const wrapper = container.firstElementChild as HTMLElement; + expect(wrapper).toBeTruthy(); + expect(wrapper.style.height).toBe("420px"); + }); +}); diff --git a/tests/unit/Sparkline.test.tsx b/tests/unit/Sparkline.test.tsx new file mode 100644 index 0000000..466b0bf --- /dev/null +++ b/tests/unit/Sparkline.test.tsx @@ -0,0 +1,42 @@ +/** + * Sparkline — minimal smoke test. + * The chart components live behind the optional "/charts" subpath + * and depend on optional peer deps; only Sparkline is dependency-free + * so it's the only chart we test in unit-land. The rest are covered + * by playwright e2e against rendered preview cards. + */ +import { describe, it, expect } from "vitest"; +import { render } from "@testing-library/react"; +import { Sparkline } from "../../src/charts/Sparkline"; + +describe("Sparkline", () => { + it("renders an SVG with a polyline for non-empty data", () => { + const { container } = render(); + const svg = container.querySelector("svg"); + expect(svg).toBeTruthy(); + expect(svg?.getAttribute("aria-label")).toBe("trend"); + expect(container.querySelector("polyline")).toBeTruthy(); + }); + + it("renders a flat empty placeholder for empty data", () => { + const { container } = render(); + const el = container.querySelector(".rcs-sparkline--empty"); + expect(el).toBeTruthy(); + }); + + it("renders an area path when showArea is set", () => { + const { container } = render(); + expect(container.querySelector("path")).toBeTruthy(); + expect(container.querySelector("polyline")).toBeTruthy(); + }); + + it("is a single horizontal line when all values are equal", () => { + // Range = 0 case must not produce NaN coordinates. + const { container } = render(); + const polyline = container.querySelector("polyline"); + expect(polyline).toBeTruthy(); + const points = polyline?.getAttribute("points") ?? ""; + // No NaN, no Infinity in the points string. + expect(points).not.toMatch(/NaN|Infinity/); + }); +}); diff --git a/tests/unit/UptimeBar.test.tsx b/tests/unit/UptimeBar.test.tsx new file mode 100644 index 0000000..13563b3 --- /dev/null +++ b/tests/unit/UptimeBar.test.tsx @@ -0,0 +1,24 @@ +import { describe, it, expect } from "vitest"; +import { render } from "@testing-library/react"; +import { UptimeBar } from "../../src/charts/UptimeBar"; + +describe("UptimeBar", () => { + it("renders a canvas sized to its container", () => { + const cells = Array.from({ length: 90 }, () => ({ status: "operational" as const })); + const { container } = render(); + const canvas = container.querySelector("canvas"); + expect(canvas).toBeTruthy(); + }); + + it("exposes accessible label on the wrapper", () => { + const { container } = render( + , + ); + const wrap = container.querySelector("[aria-label='cdn uptime']"); + expect(wrap).toBeTruthy(); + }); + + it("does not throw when given zero cells", () => { + expect(() => render()).not.toThrow(); + }); +}); diff --git a/tests/unit/setup.ts b/tests/unit/setup.ts index 20cfc42..02c9d15 100644 --- a/tests/unit/setup.ts +++ b/tests/unit/setup.ts @@ -21,6 +21,15 @@ beforeAll(() => { if (typeof Element !== "undefined" && !Element.prototype.scrollIntoView) { Element.prototype.scrollIntoView = function () {}; } + // jsdom doesn't implement ResizeObserver. Charts use it to track their + // container width; a no-op stub is sufficient for unit tests. + if (typeof globalThis !== "undefined" && !("ResizeObserver" in globalThis)) { + (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class { + observe() {} + unobserve() {} + disconnect() {} + }; + } }); afterEach(() => {