@adminiumjs/charts 0.1.0-rc.1

package/dist/utils/stats.js

@@ -0,0 +1,82 @@
+/**
+ * In-package stats helpers (~60 LOC) so @adminium/charts never pulls d3-array
+ * (workplan/04-widget-registry.md §7 — only d3-scale and d3-shape are allowed
+ * as math dependencies).
+ */
+/** Min/max of a numeric iterable, ignoring NaN. Returns null when empty. */
+export function extent(values) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const v of values) {
+        if (Number.isNaN(v))
+            continue;
+        if (v < min)
+            min = v;
+        if (v > max)
+            max = v;
+    }
+    return min <= max ? [min, max] : null;
+}
+/** d3-style tick step: powers of 10 refined by 1/2/5. Always > 0. */
+export function tickStep(start, stop, count) {
+    const span = Math.abs(stop - start);
+    if (span === 0 || count <= 0)
+        return 1;
+    const rawStep = span / count;
+    const power = Math.floor(Math.log10(rawStep));
+    const error = rawStep / 10 ** power;
+    const factor = error >= Math.sqrt(50) ? 10 : error >= Math.sqrt(10) ? 5 : error >= Math.SQRT2 ? 2 : 1;
+    return factor * 10 ** power;
+}
+/** Round, human-friendly tick values covering [min, max] (endpoints included). */
+export function niceTicks(min, max, count = 4) {
+    if (min === max)
+        return [min];
+    const step = tickStep(min, max, count);
+    const start = Math.floor(min / step) * step;
+    const stop = Math.ceil(max / step) * step;
+    const ticks = [];
+    // Guard float drift with a half-step epsilon.
+    for (let v = start; v <= stop + step / 2; v += step) {
+        ticks.push(Math.abs(v) < step * 1e-10 ? 0 : Number(v.toPrecision(12)));
+    }
+    return ticks;
+}
+/** Linear-interpolated quantile over an ASCENDING-sorted array; p in [0, 1]. */
+export function quantileSorted(sorted, p) {
+    const n = sorted.length;
+    if (n === 0)
+        return null;
+    if (p <= 0 || n === 1)
+        return sorted[0] ?? null;
+    if (p >= 1)
+        return sorted[n - 1] ?? null;
+    const i = (n - 1) * p;
+    const lo = Math.floor(i);
+    const a = sorted[lo] ?? 0;
+    const b = sorted[lo + 1] ?? a;
+    return a + (b - a) * (i - lo);
+}
+/** Equal-width histogram bins over the data extent. */
+export function bins(values, binCount = 10) {
+    const domain = extent(values);
+    if (domain === null || binCount <= 0)
+        return [];
+    const [min, max] = domain;
+    const width = (max - min) / binCount || 1;
+    const out = Array.from({ length: binCount }, (_, i) => ({
+        x0: min + i * width,
+        x1: min + (i + 1) * width,
+        count: 0,
+    }));
+    for (const v of values) {
+        if (Number.isNaN(v))
+            continue;
+        const i = Math.min(binCount - 1, Math.max(0, Math.floor((v - min) / width)));
+        const bin = out[i];
+        if (bin)
+            bin.count += 1;
+    }
+    return out;
+}
+//# sourceMappingURL=stats.js.map

package/dist/utils/stats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats.js","sourceRoot":"","sources":["../../src/utils/stats.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@adminiumjs/charts",
+  "version": "0.1.0-rc.1",
+  "license": "AGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MoSofi/Adminium.git",
+    "directory": "packages/charts"
+  },
+  "homepage": "https://adminium.dev",
+  "bugs": "https://github.com/MoSofi/Adminium/issues",
+  "type": "module",
+  "description": "SVG chart primitives (d3-scale/d3-shape math only)",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "dependencies": {
+    "@adminium/tokens": "npm:@adminiumjs/tokens@0.1.0-rc.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "react": "^19.1.0"
+  },
+  "files": [
+    "dist",
+    "src/styles.css"
+  ]
+}

package/src/styles.css

@@ -0,0 +1,205 @@
+/* @adminium/charts — structural + motion classes.
+   Colors and @keyframes come from @adminium/tokens (viz.css / motion.css);
+   this file only wires them to chart elements. Logical properties only.
+   Custom properties set from JSX (the sanctioned '--*' style escape hatch):
+     --adm-grow     0|1  bar entrance scale (pairs with tokens' nb-grow policy)
+     --adm-fade     0|1  path/arc entrance opacity
+     --adm-stagger  <time> per-element entrance delay
+     --adm-dot      <color> legend swatch color
+   Reduced motion: the hooks render final state immediately AND tokens'
+   motion.css zeroes animation/transition durations globally. */
+
+.adm-chart {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+}
+
+.adm-chart-svg {
+  display: block;
+}
+
+/* Visually-hidden slot for the accessible table fallback. */
+.adm-chart-sr {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Entrance: bars grow from the baseline (nb-grow-style scale transition). */
+.adm-chart-grow {
+  transform: scale(1, var(--adm-grow, 1));
+  transform-box: fill-box;
+  transform-origin: 50% 100%;
+  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
+  transition-delay: var(--adm-stagger, 0s);
+}
+
+/* Entrance: paths, arcs and markers fade in. */
+.adm-chart-fade {
+  opacity: var(--adm-fade, 1);
+  transition: opacity 0.6s ease;
+  transition-delay: var(--adm-stagger, 0s);
+}
+
+/* SVG text styling (SVG presentation attrs can't carry var() font stacks). */
+.adm-chart-axis-label {
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 10px;
+  font-weight: 600;
+  fill: var(--fg-subtle);
+}
+
+.adm-chart-num {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+.adm-chart-gridline {
+  stroke: var(--border);
+  stroke-width: 1;
+}
+
+.adm-chart-tooltip-bg {
+  fill: var(--surface);
+  stroke: var(--border-strong);
+  stroke-width: 1;
+}
+
+.adm-chart-tooltip-label {
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 10px;
+  font-weight: 600;
+  fill: var(--fg-muted);
+}
+
+.adm-chart-tooltip-value {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+  font-size: 11px;
+  font-weight: 700;
+  fill: var(--fg);
+}
+
+/* Donut: ring + legend side by side; mirrors under dir="rtl" automatically. */
+.adm-donut {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.adm-donut-center-value {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+  font-size: 21px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  fill: var(--fg);
+}
+
+.adm-donut-center-label {
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 10.5px;
+  font-weight: 600;
+  fill: var(--fg-subtle);
+}
+
+.adm-donut-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-inline-size: 8rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.adm-donut-legend-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--fg-muted);
+}
+
+.adm-donut-legend-dot {
+  flex: none;
+  inline-size: 8px;
+  block-size: 8px;
+  border-radius: 999px;
+  background: var(--adm-dot, var(--viz-1));
+}
+
+.adm-donut-legend-value {
+  margin-inline-start: auto;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  color: var(--fg);
+}
+
+/* Sparkline: inline micro-chart for KPI cards, table cells, list rows. */
+.adm-spark {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* --- Bars & ranking group (04-T09) ------------------------------------------
+   In-SVG sans label with NO fill so the fill presentation attribute controls
+   color (e.g. on-segment labels use var(--surface) for contrast); plus the
+   shared horizontal-bar legend. Reuses the sanctioned --adm-dot custom prop
+   and the --adm-legend-cols column count set from JSX. */
+.adm-chart-label {
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.adm-stacked {
+  display: block;
+  inline-size: 100%;
+}
+
+.adm-legend {
+  display: grid;
+  grid-template-columns: repeat(var(--adm-legend-cols, 2), minmax(0, 1fr));
+  gap: 6px 16px;
+  margin: 10px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.adm-legend-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-inline-size: 0;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fg-muted);
+}
+
+.adm-legend-dot {
+  flex: none;
+  inline-size: 8px;
+  block-size: 8px;
+  border-radius: 3px;
+  background: var(--adm-dot, var(--viz-1));
+}
+
+.adm-legend-value {
+  margin-inline-start: auto;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  color: var(--fg);
+}