npm - @wizeworks/silicaui-charts - Versions diffs - 0.55.0 → 0.57.0 - Mend

@wizeworks/silicaui-charts 0.55.0 → 0.57.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -11,6 +11,54 @@ function readVar(cs, name, fallback) {
   const v = cs.getPropertyValue(name).trim();
   return v || fallback;
 }
+var SERIES_COUNT = 6;
+function parseOklch(value) {
+  const open = value.indexOf("(");
+  const close = value.lastIndexOf(")");
+  if (!value.trim().startsWith("oklch") || open < 0 || close < open) return null;
+  const parts = value.slice(open + 1, close).replace(/%/g, " ").split(/[\s,/]+/).filter(Boolean).map(Number);
+  const [L, C, h] = parts;
+  if (L === void 0 || C === void 0 || h === void 0) return null;
+  if (Number.isNaN(L) || Number.isNaN(C) || Number.isNaN(h)) return null;
+  return { L, C, h };
+}
+var RESERVED_ARC = 22;
+function hueGap(a, b) {
+  const d = Math.abs((a % 360 + 360) % 360 - (b % 360 + 360) % 360);
+  return Math.min(d, 360 - d);
+}
+function spreadHues(startHue, reserved, count) {
+  const free = [];
+  for (let h = 0; h < 360; h++) {
+    if (reserved.every((r) => hueGap(h, r) > RESERVED_ARC)) free.push(h);
+  }
+  if (free.length < count) {
+    return Array.from({ length: count }, (_, i) => (startHue + i * 360 / count) % 360);
+  }
+  let from = 0;
+  let best = 999;
+  for (let i = 0; i < free.length; i++) {
+    const g = hueGap(free[i], startHue);
+    if (g < best) {
+      best = g;
+      from = i;
+    }
+  }
+  const stride = free.length / count;
+  return Array.from({ length: count }, (_, i) => free[(from + Math.round(i * stride)) % free.length]);
+}
+function categoricalPalette(primary, reservedHues) {
+  const base = parseOklch(primary);
+  if (!base) return null;
+  const L = Math.min(92, Math.max(38, base.L));
+  const C = Math.max(0.08, Math.min(0.2, base.C));
+  const hues = spreadHues(base.h, reservedHues, SERIES_COUNT);
+  return hues.map((h, i) => {
+    if (i === 0) return primary;
+    const l = Math.min(94, Math.max(34, L + (i % 2 === 0 ? -6 : 6)));
+    return `oklch(${Math.round(l * 10) / 10}% ${Math.round(C * 1e3) / 1e3} ${Math.round(h)})`;
+  });
+}
 function buildSilicaEChartsTheme(el) {
   const root = el ?? (typeof document !== "undefined" ? document.documentElement : null);
   if (!root || typeof getComputedStyle === "undefined") {
@@ -20,15 +68,10 @@ function buildSilicaEChartsTheme(el) {
   const base100 = readVar(cs, "--color-base-100", "#ffffff");
   const base300 = readVar(cs, "--color-base-300", "#e5e7eb");
   const content = readVar(cs, "--color-base-content", "#1f2937");
-  const palette = [
-    "--color-primary",
-    "--color-secondary",
-    "--color-accent",
-    "--color-info",
-    "--color-success",
-    "--color-warning",
-    "--color-error"
-  ].map((n) => readVar(cs, n, "")).filter(Boolean);
+  const primary = readVar(cs, "--color-primary", "");
+  const reservedHues = ["--color-success", "--color-warning", "--color-error"].map((n) => parseOklch(readVar(cs, n, ""))).filter((c) => c !== null).map((c) => c.h);
+  const palette = categoricalPalette(primary, reservedHues) ?? // Fallback, for a theme whose primary is not an `oklch()` value.
+  ["--color-primary", "--color-secondary", "--color-accent", "--color-info", "--color-success", "--color-warning", "--color-error"].map((n) => readVar(cs, n, "")).filter(Boolean);
   const faint = (pct) => `color-mix(in oklab, ${content} ${pct}%, transparent)`;
   const label = faint(70);
   const axisLine = faint(22);
@@ -51,6 +94,15 @@ function buildSilicaEChartsTheme(el) {
       borderColor: base300,
       borderWidth: 1,
       textStyle: { color: content },
+      // Keep the tooltip inside the chart's own box.
+      //
+      // ECharts places it beside the cursor and lets it run off the edge. On a
+      // 278px-wide chart on a phone that clipped the SERIES NAMES off the left --
+      // "Kaiho Line" read as "o Line", "Pacific Bridge" as "c Bridge" -- which is
+      // the one thing the tooltip exists to say. Measured on a 360px screen
+      // (P07 act 9). A tooltip that leaves its container is never what anyone
+      // wanted, so this is a default rather than an option.
+      confine: true,
       axisPointer: {
         lineStyle: { color: axisLine },
         crossStyle: { color: axisLine },

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/theme.ts","../src/chart.tsx","../src/sparkline.tsx"],"names":["Chart","React2","Sparkline","jsx"],"mappings":";;;;;;;;AAcA,SAAS,OAAA,CAAQ,EAAA,EAAyB,IAAA,EAAc,QAAA,EAA0B;AAChF,EAAA,MAAM,CAAA,GAAI,EAAA,CAAG,gBAAA,CAAiB,IAAI,EAAE,IAAA,EAAK;AACzC,EAAA,OAAO,CAAA,IAAK,QAAA;AACd;AAMO,SAAS,wBACd,EAAA,EACyB;AACzB,EAAA,MAAM,OACJ,EAAA,KAAO,OAAO,QAAA,KAAa,WAAA,GAAc,SAAS,eAAA,GAAkB,IAAA,CAAA;AAGtE,EAAA,IAAI,CAAC,IAAA,IAAQ,OAAO,gBAAA,KAAqB,WAAA,EAAa;AACpD,IAAA,OAAO,EAAE,iBAAiB,aAAA,EAAc;AAAA,EAC1C;AAEA,EAAA,MAAM,EAAA,GAAK,iBAAiB,IAAI,CAAA;AAChC,EAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,EAAA,EAAI,kBAAA,EAAoB,SAAS,CAAA;AACzD,EAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,EAAA,EAAI,kBAAA,EAAoB,SAAS,CAAA;AACzD,EAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,EAAA,EAAI,sBAAA,EAAwB,SAAS,CAAA;AAE7D,EAAA,MAAM,OAAA,GAAU;AAAA,IACd,iBAAA;AAAA,IACA,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,CACG,GAAA,CAAI,CAAC,CAAA,KAAM,OAAA,CAAQ,EAAA,EAAI,CAAA,EAAG,EAAE,CAAC,CAAA,CAC7B,MAAA,CAAO,OAAO,CAAA;AAIjB,EAAA,MAAM,QAAQ,CAAC,GAAA,KACb,CAAA,oBAAA,EAAuB,OAAO,IAAI,GAAG,CAAA,eAAA,CAAA;AACvC,EAAA,MAAM,KAAA,GAAQ,MAAM,EAAE,CAAA;AACtB,EAAA,MAAM,QAAA,GAAW,MAAM,EAAE,CAAA;AACzB,EAAA,MAAM,SAAA,GAAY,MAAM,CAAC,CAAA;AAEzB,EAAA,MAAM,IAAA,GAAO;AAAA,IACX,QAAA,EAAU,EAAE,IAAA,EAAM,IAAA,EAAM,WAAW,EAAE,KAAA,EAAO,UAAS,EAAE;AAAA,IACvD,QAAA,EAAU,EAAE,IAAA,EAAM,IAAA,EAAM,WAAW,EAAE,KAAA,EAAO,UAAS,EAAE;AAAA,IACvD,SAAA,EAAW,EAAE,KAAA,EAAO,KAAA,EAAM;AAAA,IAC1B,SAAA,EAAW,EAAE,IAAA,EAAM,IAAA,EAAM,WAAW,EAAE,KAAA,EAAO,WAAU,EAAE;AAAA,IACzD,SAAA,EAAW,EAAE,IAAA,EAAM,KAAA;AAAM,GAC3B;AAEA,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,OAAA,CAAQ,MAAA,GAAS,OAAA,GAAU,MAAA;AAAA,IAClC,eAAA,EAAiB,aAAA;AAAA,IACjB,SAAA,EAAW,EAAE,KAAA,EAAO,OAAA,EAAQ;AAAA,IAC5B,KAAA,EAAO,EAAE,SAAA,EAAW,EAAE,KAAA,EAAO,OAAA,EAAQ,EAAG,YAAA,EAAc,EAAE,KAAA,EAAO,KAAA,EAAM,EAAE;AAAA,IACvE,QAAQ,EAAE,SAAA,EAAW,EAAE,KAAA,EAAO,OAAM,EAAE;AAAA,IACtC,OAAA,EAAS;AAAA,MACP,eAAA,EAAiB,OAAA;AAAA,MACjB,WAAA,EAAa,OAAA;AAAA,MACb,WAAA,EAAa,CAAA;AAAA,MACb,SAAA,EAAW,EAAE,KAAA,EAAO,OAAA,EAAQ;AAAA,MAC5B,WAAA,EAAa;AAAA,QACX,SAAA,EAAW,EAAE,KAAA,EAAO,QAAA,EAAS;AAAA,QAC7B,UAAA,EAAY,EAAE,KAAA,EAAO,QAAA,EAAS;AAAA,QAC9B,WAAA,EAAa,EAAE,KAAA,EAAO,KAAA,CAAM,CAAC,CAAA;AAAE;AACjC,KACF;AAAA,IACA,IAAA,EAAM,EAAE,WAAA,EAAa,OAAA,EAAS,cAAc,IAAA,EAAK;AAAA,IACjD,YAAA,EAAc,IAAA;AAAA,IACd,SAAA,EAAW,IAAA;AAAA,IACX,OAAA,EAAS,IAAA;AAAA,IACT,QAAA,EAAU,IAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ,QAAA;AAAA,MACR,UAAA,EAAY,CAAA;AAAA,MACZ,SAAA,EAAW,EAAE,KAAA,EAAO,CAAA,EAAE;AAAA,MACtB,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,GAAA,EAAK,EAAE,SAAA,EAAW,EAAE,YAAA,EAAc,CAAC,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,EAAE,EAAE;AAAA,IACjD,GAAA,EAAK;AAAA,MACH,SAAA,EAAW,EAAE,WAAA,EAAa,OAAA,EAAS,aAAa,CAAA,EAAE;AAAA,MAClD,KAAA,EAAO,EAAE,KAAA,EAAO,OAAA;AAAQ,KAC1B;AAAA,IACA,OAAA,EAAS,EAAE,UAAA,EAAY,EAAA;AAAG,GAC5B;AACF;AClEO,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA,CAAuC,SAASA,MAAAA,CACzE;AAAA,EACE,MAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,QAAA,GAAW,QAAA;AAAA,EACX,MAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YAAA,EACA;AACA,EAAA,MAAM,KAAK,cAAA,EAAe;AAC1B,EAAA,MAAM,YAAA,GAAqB,aAA8B,IAAI,CAAA;AAC7D,EAAA,MAAM,QAAA,GAAiB,aAA+B,IAAI,CAAA;AAC1D,EAAA,MAAM,SAAA,GAAkB,aAAO,MAAM,CAAA;AACrC,EAAA,SAAA,CAAU,OAAA,GAAU,MAAA;AAIpB,EAAA,MAAM,YAAY,CAAA,OAAA,EAAgB,KAAA,CAAA,KAAA,GAAQ,OAAA,CAAQ,iBAAA,EAAmB,EAAE,CAAC,CAAA,CAAA;AAGxE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAU,eAAS,CAAC,CAAA;AAElD,EAAA,MAAM,OAAA,GAAgB,KAAA,CAAA,WAAA;AAAA,IACpB,CAAC,IAAA,KAAgC;AAC/B,MAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,MAAA,IAAI,OAAO,YAAA,KAAiB,UAAA,EAAY,YAAA,CAAa,IAAI,CAAA;AAAA,WAAA,IAChD,YAAA,eAA2B,OAAA,GAAU,IAAA;AAAA,IAChD,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAGA,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACnC,IAAA,MAAM,OAAO,MAAM,YAAA,CAAa,CAAC,CAAA,KAAM,IAAI,CAAC,CAAA;AAC5C,IAAA,MAAM,OAAO,QAAA,CAAS,eAAA;AACtB,IAAA,MAAM,EAAA,GAAK,IAAI,gBAAA,CAAiB,IAAI,CAAA;AACpC,IAAA,EAAA,CAAG,QAAQ,IAAA,EAAM;AAAA,MACf,UAAA,EAAY,IAAA;AAAA,MACZ,eAAA,EAAiB,CAAC,YAAA,EAAc,OAAA,EAAS,OAAO;AAAA,KACjD,CAAA;AACD,IAAA,MAAM,EAAA,GAAK,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA;AAC3D,IAAA,EAAA,CAAG,gBAAA,CAAiB,UAAU,IAAI,CAAA;AAClC,IAAA,OAAO,MAAM;AACX,MAAA,EAAA,CAAG,UAAA,EAAW;AACd,MAAA,EAAA,CAAG,mBAAA,CAAoB,UAAU,IAAI,CAAA;AAAA,IACvC,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAGL,EAAM,gBAAU,MAAM;AACpB,IAAA,MAAM,KAAK,YAAA,CAAa,OAAA;AACxB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAQ,OAAA,CAAA,aAAA,CAAc,SAAA,EAAW,uBAAA,CAAwB,EAAE,CAAC,CAAA;AAC5D,IAAA,MAAM,QAAgB,OAAA,CAAA,IAAA,CAAK,EAAA,EAAI,SAAA,EAAW,EAAE,UAAU,CAAA;AACtD,IAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AACnB,IAAA,SAAA,CAAU,UAAU,KAAK,CAAA;AACzB,IAAA,MAAM,KAAK,IAAI,cAAA,CAAe,MAAM,KAAA,CAAM,QAAQ,CAAA;AAClD,IAAA,EAAA,CAAG,QAAQ,EAAE,CAAA;AACb,IAAA,OAAO,MAAM;AACX,MAAA,EAAA,CAAG,UAAA,EAAW;AACd,MAAA,KAAA,CAAM,OAAA,EAAQ;AACd,MAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,IACrB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,QAAA,EAAU,SAAS,CAAC,CAAA;AAGnC,EAAM,gBAAU,MAAM;AACpB,IAAA,QAAA,CAAS,OAAA,EAAS,SAAA,CAAU,MAAA,EAAQ,QAAQ,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,MAAA,EAAQ,QAAA,EAAU,SAAS,CAAC,CAAA;AAGhC,EAAM,gBAAU,MAAM;AACpB,IAAA,MAAM,QAAQ,QAAA,CAAS,OAAA;AACvB,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,IAAI,OAAA,QAAe,WAAA,EAAY;AAAA,eACpB,WAAA,EAAY;AAAA,EACzB,CAAA,EAAG,CAAC,OAAA,EAAS,SAAS,CAAC,CAAA;AAEvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,SAAA,EAAW,EAAA,CAAG,EAAA,CAAG,OAAO,GAAG,SAAS,CAAA;AAAA,MACpC,OAAO,EAAE,KAAA,EAAO,QAAQ,MAAA,EAAQ,OAAA,EAAS,GAAG,KAAA,EAAM;AAAA,MACjD,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;ACtGM,IAAM,SAAA,GAAkBC,KAAA,CAAA,UAAA;AAAA,EAC7B,SAASC,UAAAA,CACP,EAAE,IAAA,EAAM,IAAA,GAAO,QAAQ,IAAA,GAAO,KAAA,EAAO,KAAA,EAAO,OAAA,GAAU,OAAO,MAAA,EAAQ,KAAA,EAAO,GAAG,IAAA,IAC/E,GAAA,EACA;AACA,IAAA,MAAM,MAAA,GAAeD,KAAA,CAAA,OAAA;AAAA,MACnB,OAAO;AAAA,QACL,IAAA,EAAM,EAAE,IAAA,EAAM,CAAA,EAAG,OAAO,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAE;AAAA,QAC7C,KAAA,EAAO;AAAA,UACL,IAAA,EAAM,UAAA;AAAA,UACN,IAAA,EAAM,KAAA;AAAA,UACN,aAAa,IAAA,KAAS,KAAA;AAAA,UACtB,MAAM,MAAA,IAAU,IAAA,CAAK,IAAI,CAAC,CAAA,EAAG,MAAM,CAAC;AAAA,SACtC;AAAA,QACA,OAAO,EAAE,IAAA,EAAM,SAAS,IAAA,EAAM,KAAA,EAAO,OAAO,IAAA,EAAK;AAAA,QACjD,OAAA,EAAS,OAAA,GACL,EAAE,OAAA,EAAS,MAAA,EAAQ,aAAa,EAAE,IAAA,EAAM,MAAA,EAAO,EAAE,GACjD,MAAA;AAAA,QACJ,MAAA,EAAQ;AAAA,UACN;AAAA,YACE,IAAA;AAAA,YACA,IAAA;AAAA,YACA,MAAA,EAAQ,MAAA;AAAA,YACR,QAAQ,IAAA,KAAS,MAAA;AAAA,YACjB,SAAA,EAAW,EAAE,KAAA,EAAO,CAAA,EAAE;AAAA,YACtB,WAAW,IAAA,IAAQ,IAAA,KAAS,SAAS,EAAE,OAAA,EAAS,MAAK,GAAI,MAAA;AAAA,YACzD,SAAA,EAAW,KAAA,GAAQ,EAAE,KAAA,EAAM,GAAI,MAAA;AAAA,YAC/B,cAAA,EAAgB,IAAA,KAAS,KAAA,GAAQ,KAAA,GAAQ;AAAA;AAC3C;AACF,OACF,CAAA;AAAA,MACA,CAAC,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,KAAA,EAAO,SAAS,MAAM;AAAA,KAC3C;AAEA,IAAA,uBACEE,GAAAA,CAAC,KAAA,EAAA,EAAM,GAAA,EAAU,MAAA,EAAgB,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAA,EAAQ,GAAG,KAAA,EAAM,EAAI,GAAG,IAAA,EAAM,CAAA;AAAA,EAEpF;AACF","file":"index.js","sourcesContent":["/*\n Builds an Apache ECharts theme from the live Silica design tokens.\n \n ECharts bakes its theme in at `init()` time and reads plain color strings, not\n * CSS variables — so we resolve the current `--color-` custom properties off a\n live element with `getComputedStyle` and hand ECharts concrete values. Because\n * we read from a real element, a prefixed / nested-theme subtree (a client site\n * embedded in the platform shell) yields that subtree's palette, and the\n * `<Chart>` wrapper re-runs this whenever the ambient theme flips light↔dark.\n \n The resolved values may be `oklch(…)` / `color-mix(…)` strings; modern canvas\n * and SVG renderers accept those directly.\n /\n\nfunction readVar(cs: CSSStyleDeclaration, name: string, fallback: string): string {\n const v = cs.getPropertyValue(name).trim();\n return v \|\| fallback;\n}\n\n/\n @param el - element to read tokens from; defaults to `document.documentElement`.\n * @returns an ECharts theme object (safe to pass to `echarts.registerTheme`).\n /\nexport function buildSilicaEChartsTheme(\n el?: HTMLElement \| null,\n): Record<string, unknown> {\n const root =\n el ?? (typeof document !== \"undefined\" ? document.documentElement : null);\n\n // No DOM (SSR): a neutral, transparent theme so nothing crashes.\n if (!root \|\| typeof getComputedStyle === \"undefined\") {\n return { backgroundColor: \"transparent\" };\n }\n\n const cs = getComputedStyle(root);\n const base100 = readVar(cs, \"--color-base-100\", \"#ffffff\");\n const base300 = readVar(cs, \"--color-base-300\", \"#e5e7eb\");\n const content = readVar(cs, \"--color-base-content\", \"#1f2937\");\n\n const palette = [\n \"--color-primary\",\n \"--color-secondary\",\n \"--color-accent\",\n \"--color-info\",\n \"--color-success\",\n \"--color-warning\",\n \"--color-error\",\n ]\n .map((n) => readVar(cs, n, \"\"))\n .filter(Boolean);\n\n // Translucent washes of the text color for axes/gridlines — oklab, never oklch\n // (oklch rotates hue toward 0° when mixing with transparent → tinted grey).\n const faint = (pct: number) =>\n `color-mix(in oklab, ${content} ${pct}%, transparent)`;\n const label = faint(70);\n const axisLine = faint(22);\n const splitLine = faint(9);\n\n const axis = {\n axisLine: { show: true, lineStyle: { color: axisLine } },\n axisTick: { show: true, lineStyle: { color: axisLine } },\n axisLabel: { color: label },\n splitLine: { show: true, lineStyle: { color: splitLine } },\n splitArea: { show: false },\n };\n\n return {\n color: palette.length ? palette : undefined,\n backgroundColor: \"transparent\",\n textStyle: { color: content },\n title: { textStyle: { color: content }, subtextStyle: { color: label } },\n legend: { textStyle: { color: label } },\n tooltip: {\n backgroundColor: base100,\n borderColor: base300,\n borderWidth: 1,\n textStyle: { color: content },\n axisPointer: {\n lineStyle: { color: axisLine },\n crossStyle: { color: axisLine },\n shadowStyle: { color: faint(6) },\n },\n },\n grid: { borderColor: base300, containLabel: true },\n categoryAxis: axis,\n valueAxis: axis,\n logAxis: axis,\n timeAxis: axis,\n line: {\n symbol: \"circle\",\n symbolSize: 7,\n lineStyle: { width: 2 },\n smooth: false,\n },\n bar: { itemStyle: { borderRadius: [4, 4, 0, 0] } },\n pie: {\n itemStyle: { borderColor: base100, borderWidth: 2 },\n label: { color: content },\n },\n scatter: { symbolSize: 10 },\n };\n}\n","import as React from \"react\";\nimport * as echarts from \"echarts\";\nimport type { EChartsOption } from \"echarts\";\nimport { cx, useSilicaClass } from \"@wizeworks/silicaui-react\";\nimport { buildSilicaEChartsTheme } from \"./theme\";\n\n/** The live ECharts instance type (whatever `echarts.init` returns). /\nexport type EChartsInstance = ReturnType<typeof echarts.init>;\n\nexport interface ChartProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n /* The ECharts option (series, axes, tooltip, legend, …) — full ECharts API. /\n option: EChartsOption;\n /* Replace the whole option instead of merging on update. Default `true`. /\n notMerge?: boolean;\n /* Toggle ECharts' built-in loading spinner. /\n loading?: boolean;\n /* Renderer backend. Default `\"canvas\"`. /\n renderer?: \"canvas\" \| \"svg\";\n /* Called with the instance right after it's created (and after each re-init). /\n onInit?: (chart: EChartsInstance) => void;\n}\n\n/\n A thin, fully-featured wrapper over Apache ECharts that auto-themes to the\n * active Silica tokens.\n \n ECharts owns all rendering; Silica supplies the palette. The chart re-reads\n * the tokens (and re-inits, since ECharts themes are fixed at `init`) whenever\n * the ambient theme changes — a `data-theme` flip on `<html>` or an OS\n * light/dark switch — so charts track the rest of the UI automatically. It also\n * resizes with its container via a `ResizeObserver`.\n \n Give the container a height (defaults to 20rem); ECharts cannot measure a\n * zero-height box.\n /\nexport const Chart = React.forwardRef<HTMLDivElement, ChartProps>(function Chart(\n {\n option,\n notMerge = true,\n loading = false,\n renderer = \"canvas\",\n onInit,\n className,\n style,\n ...rest\n },\n forwardedRef,\n) {\n const sc = useSilicaClass();\n const containerRef = React.useRef<HTMLDivElement \| null>(null);\n const chartRef = React.useRef<EChartsInstance \| null>(null);\n const onInitRef = React.useRef(onInit);\n onInitRef.current = onInit;\n\n // A DOM-safe, stable theme name unique to this instance so concurrent charts\n // don't clobber one another's registered theme.\n const themeName = `silica-${React.useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n // Bumped whenever the ambient Silica theme changes → forces a re-init below.\n const [themeTick, setThemeTick] = React.useState(0);\n\n const setRefs = React.useCallback(\n (node: HTMLDivElement \| null) => {\n containerRef.current = node;\n if (typeof forwardedRef === \"function\") forwardedRef(node);\n else if (forwardedRef) forwardedRef.current = node;\n },\n [forwardedRef],\n );\n\n // Watch for theme changes: attribute flips on <html> + OS scheme changes.\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n const bump = () => setThemeTick((t) => t + 1);\n const html = document.documentElement;\n const mo = new MutationObserver(bump);\n mo.observe(html, {\n attributes: true,\n attributeFilter: [\"data-theme\", \"class\", \"style\"],\n });\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n mq.addEventListener(\"change\", bump);\n return () => {\n mo.disconnect();\n mq.removeEventListener(\"change\", bump);\n };\n }, []);\n\n // Create / recreate the chart instance (re-runs on theme change).\n React.useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n echarts.registerTheme(themeName, buildSilicaEChartsTheme(el));\n const chart = echarts.init(el, themeName, { renderer });\n chartRef.current = chart;\n onInitRef.current?.(chart);\n const ro = new ResizeObserver(() => chart.resize());\n ro.observe(el);\n return () => {\n ro.disconnect();\n chart.dispose();\n chartRef.current = null;\n };\n }, [themeName, renderer, themeTick]);\n\n // Push option updates.\n React.useEffect(() => {\n chartRef.current?.setOption(option, notMerge);\n }, [option, notMerge, themeTick]);\n\n // Loading overlay.\n React.useEffect(() => {\n const chart = chartRef.current;\n if (!chart) return;\n if (loading) chart.showLoading();\n else chart.hideLoading();\n }, [loading, themeTick]);\n\n return (\n <div\n ref={setRefs}\n className={cx(sc(\"chart\"), className)}\n style={{ width: \"100%\", height: \"20rem\", ...style }}\n {...rest}\n />\n );\n});\n","import as React from \"react\";\nimport type { EChartsOption } from \"echarts\";\nimport { Chart } from \"./chart\";\nimport type { ChartProps } from \"./chart\";\n\nexport interface SparklineProps extends Omit<ChartProps, \"option\"> {\n /** The series values. /\n data: number[];\n /* `\"line\"` (default) or `\"bar\"`. /\n type?: \"line\" \| \"bar\";\n /* Fill under a line sparkline. /\n area?: boolean;\n /* Series color. Defaults to the Silica primary via the theme palette. /\n color?: string;\n /* Show a tooltip on hover. Default `false` — sparklines are glanceable. /\n tooltip?: boolean;\n /* Optional category labels (used only in the tooltip). /\n labels?: (string \| number)[];\n}\n\n/\n A compact, axis-less trend line/bar for inline metrics (KPI cards, table\n * cells). It builds the ECharts option for you and renders through {@link Chart},\n * so it inherits Silica theming and container-resize behavior.\n */\nexport const Sparkline = React.forwardRef<HTMLDivElement, SparklineProps>(\n function Sparkline(\n { data, type = \"line\", area = false, color, tooltip = false, labels, style, ...rest },\n ref,\n ) {\n const option = React.useMemo<EChartsOption>(\n () => ({\n grid: { left: 1, right: 1, top: 3, bottom: 3 },\n xAxis: {\n type: \"category\",\n show: false,\n boundaryGap: type === \"bar\",\n data: labels ?? data.map((_, i) => i),\n },\n yAxis: { type: \"value\", show: false, scale: true },\n tooltip: tooltip\n ? { trigger: \"axis\", axisPointer: { type: \"line\" } }\n : undefined,\n series: [\n {\n type,\n data,\n symbol: \"none\",\n smooth: type === \"line\",\n lineStyle: { width: 2 },\n areaStyle: area && type === \"line\" ? { opacity: 0.18 } : undefined,\n itemStyle: color ? { color } : undefined,\n barCategoryGap: type === \"bar\" ? \"30%\" : undefined,\n } as never,\n ],\n }),\n [data, type, area, color, tooltip, labels],\n );\n\n return (\n <Chart ref={ref} option={option} style={{ height: \"3rem\", ...style }} {...rest} />\n );\n },\n);\n"]}
1	+ {"version":3,"sources":["../src/theme.ts","../src/chart.tsx","../src/sparkline.tsx"],"names":["Chart","React2","Sparkline","jsx"],"mappings":"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","file":"index.js","sourcesContent":["/*\n Builds an Apache ECharts theme from the live Silica design tokens.\n \n ECharts bakes its theme in at `init()` time and reads plain color strings, not\n * CSS variables — so we resolve the current `--color-` custom properties off a\n live element with `getComputedStyle` and hand ECharts concrete values. Because\n * we read from a real element, a prefixed / nested-theme subtree (a client site\n * embedded in the platform shell) yields that subtree's palette, and the\n * `<Chart>` wrapper re-runs this whenever the ambient theme flips light↔dark.\n \n The resolved values may be `oklch(…)` / `color-mix(…)` strings; modern canvas\n * and SVG renderers accept those directly.\n /\n\nfunction readVar(cs: CSSStyleDeclaration, name: string, fallback: string): string {\n const v = cs.getPropertyValue(name).trim();\n return v \|\| fallback;\n}\n\n/\n A CATEGORICAL series palette: N colours a person can tell apart.\n \n NOT the semantic roles, which is what this used to be\n * (`primary, secondary, accent, info, success, warning, error`). Two reasons,\n * both found by measuring a real four-line chart — see\n * docs/personas/issues/087.\n \n The roles mean things. `success` is green because something is good and\n * `error` is red because something is wrong. Handing them to series 5 and 7\n * tells an operations room that the fifth shipping line is fine and the seventh\n * is in trouble — a sentence nobody wrote and nobody can unsee.\n \n And the roles do not spread. A theme that declares one brand colour has\n * its `secondary`/`accent`/`info` derived from that colour, so four series came\n * out inside a 44-degree arc of a 360-degree wheel, two of them 13 degrees\n * apart. On a wall screen at the end of a dark room that is the same colour\n * twice.\n \n So the palette is built instead of borrowed: anchor on the theme's own\n * `primary` — series one still looks like the brand — and walk the hue wheel\n * from there, nudging lightness alternately so neighbours differ in more than\n * hue alone (which is what a person with a colour-vision deficiency reads).\n \n A theme whose `primary` is not an `oklch()` value falls back to the old role\n * list, because guessing a hue out of `color-mix()` or a named colour would be\n * worse than a palette that is merely narrow.\n /\n/\n Six, not eight.\n \n Once `success`, `warning` and `error` are off limits (see `RESERVED_ARC`),\n * about 228 of the 360 degrees are left. Eight series across 228 degrees is 28\n * degrees apart -- measurably distinguishable, but only three degrees above the\n * bar, which is no margin at all for a theme whose brand colour sits somewhere\n * else. Six is 38 degrees apart.\n \n The seventh series repeats the first, and that is the better failure: a\n * repeated colour is obviously wrong, while two series 28 degrees apart are\n * quietly confusable, which is the exact defect this palette was built to fix\n * (issue 087). A chart with seven categories needs a different design, not a\n * seventh colour.\n /\nconst SERIES_COUNT = 6;\n\nfunction parseOklch(value: string): { L: number; C: number; h: number } \| null {\n const open = value.indexOf(\"(\");\n const close = value.lastIndexOf(\")\");\n if (!value.trim().startsWith(\"oklch\") \|\| open < 0 \|\| close < open) return null;\n const parts = value\n .slice(open + 1, close)\n .replace(/%/g, \" \")\n .split(/[\\s,/]+/)\n .filter(Boolean)\n .map(Number);\n const [L, C, h] = parts;\n if (L === undefined \|\| C === undefined \|\| h === undefined) return null;\n if (Number.isNaN(L) \|\| Number.isNaN(C) \|\| Number.isNaN(h)) return null;\n return { L, C, h };\n}\n\n/\n How wide a berth to give `success`, `warning` and `error`, in degrees either\n * side of each.\n \n A categorical series is a NAME, not a judgement. Walking the whole hue wheel\n * for eight distinguishable colours necessarily walks through the reds and the\n * ambers, and a shipping line painted two degrees from the theme's own \"this is\n * critical\" red is saying something nobody wrote. Found on the Kaiho dashboard,\n * where colour is supposed to mean exactly one thing: how late a ship is.\n * (P07, docs/personas/issues/094.)\n /\nconst RESERVED_ARC = 22;\n\n/* Shortest distance between two hue angles, in degrees. /\nfunction hueGap(a: number, b: number): number {\n const d = Math.abs(((a % 360) + 360) % 360 - (((b % 360) + 360) % 360));\n return Math.min(d, 360 - d);\n}\n\n/\n Hue angles for the series, evenly spread over the part of the wheel that is\n * not already spoken for.\n \n The reserved hues come from the THEME, not from a constant: a theme is free to\n * make its `error` orange, and then orange is what has to be avoided.\n /\nfunction spreadHues(startHue: number, reserved: number[], count: number): number[] {\n const free: number[] = [];\n for (let h = 0; h < 360; h++) {\n if (reserved.every((r) => hueGap(h, r) > RESERVED_ARC)) free.push(h);\n }\n // Every hue reserved (a theme with roles all over the wheel): fall back to an\n // even spread rather than returning nothing.\n if (free.length < count) {\n return Array.from({ length: count }, (_, i) => (startHue + (i 360) / count) % 360);\n }\n // Start walking from wherever the brand colour sits, so series two follows\n // series one round the wheel rather than jumping to an arbitrary origin.\n let from = 0;\n let best = 999;\n for (let i = 0; i < free.length; i++) {\n const g = hueGap(free[i]!, startHue);\n if (g < best) {\n best = g;\n from = i;\n }\n }\n const stride = free.length / count;\n return Array.from({ length: count }, (_, i) => free[(from + Math.round(i * stride)) % free.length]!);\n}\n\nfunction categoricalPalette(primary: string, reservedHues: number[]): string[] \| null {\n const base = parseOklch(primary);\n if (!base) return null;\n // Keep the theme's own weight: a dark theme's primary is light and a light\n // theme's is dark, and the series have to sit on that theme's surface.\n const L = Math.min(92, Math.max(38, base.L));\n const C = Math.max(0.08, Math.min(0.2, base.C));\n const hues = spreadHues(base.h, reservedHues, SERIES_COUNT);\n return hues.map((h, i) => {\n if (i === 0) return primary;\n // Alternate the lightness a little, so adjacent series differ on a second\n // axis as well as hue.\n const l = Math.min(94, Math.max(34, L + (i % 2 === 0 ? -6 : 6)));\n return `oklch(${Math.round(l * 10) / 10}% ${Math.round(C * 1000) / 1000} ${Math.round(h)})`;\n });\n}\n\n/*\n @param el - element to read tokens from; defaults to `document.documentElement`.\n * @returns an ECharts theme object (safe to pass to `echarts.registerTheme`).\n /\nexport function buildSilicaEChartsTheme(\n el?: HTMLElement \| null,\n): Record<string, unknown> {\n const root =\n el ?? (typeof document !== \"undefined\" ? document.documentElement : null);\n\n // No DOM (SSR): a neutral, transparent theme so nothing crashes.\n if (!root \|\| typeof getComputedStyle === \"undefined\") {\n return { backgroundColor: \"transparent\" };\n }\n\n const cs = getComputedStyle(root);\n const base100 = readVar(cs, \"--color-base-100\", \"#ffffff\");\n const base300 = readVar(cs, \"--color-base-300\", \"#e5e7eb\");\n const content = readVar(cs, \"--color-base-content\", \"#1f2937\");\n\n const primary = readVar(cs, \"--color-primary\", \"\");\n // What colour already MEANS in this theme, so the series can stay off it.\n const reservedHues = [\"--color-success\", \"--color-warning\", \"--color-error\"]\n .map((n) => parseOklch(readVar(cs, n, \"\")))\n .filter((c): c is { L: number; C: number; h: number } => c !== null)\n .map((c) => c.h);\n const palette =\n categoricalPalette(primary, reservedHues) ??\n // Fallback, for a theme whose primary is not an `oklch()` value.\n [\"--color-primary\", \"--color-secondary\", \"--color-accent\", \"--color-info\", \"--color-success\", \"--color-warning\", \"--color-error\"]\n .map((n) => readVar(cs, n, \"\"))\n .filter(Boolean);\n\n // Translucent washes of the text color for axes/gridlines — oklab, never oklch\n // (oklch rotates hue toward 0° when mixing with transparent → tinted grey).\n const faint = (pct: number) =>\n `color-mix(in oklab, ${content} ${pct}%, transparent)`;\n const label = faint(70);\n const axisLine = faint(22);\n const splitLine = faint(9);\n\n const axis = {\n axisLine: { show: true, lineStyle: { color: axisLine } },\n axisTick: { show: true, lineStyle: { color: axisLine } },\n axisLabel: { color: label },\n splitLine: { show: true, lineStyle: { color: splitLine } },\n splitArea: { show: false },\n };\n\n return {\n color: palette.length ? palette : undefined,\n backgroundColor: \"transparent\",\n textStyle: { color: content },\n title: { textStyle: { color: content }, subtextStyle: { color: label } },\n legend: { textStyle: { color: label } },\n tooltip: {\n backgroundColor: base100,\n borderColor: base300,\n borderWidth: 1,\n textStyle: { color: content },\n // Keep the tooltip inside the chart's own box.\n //\n // ECharts places it beside the cursor and lets it run off the edge. On a\n // 278px-wide chart on a phone that clipped the SERIES NAMES off the left --\n // \"Kaiho Line\" read as \"o Line\", \"Pacific Bridge\" as \"c Bridge\" -- which is\n // the one thing the tooltip exists to say. Measured on a 360px screen\n // (P07 act 9). A tooltip that leaves its container is never what anyone\n // wanted, so this is a default rather than an option.\n confine: true,\n axisPointer: {\n lineStyle: { color: axisLine },\n crossStyle: { color: axisLine },\n shadowStyle: { color: faint(6) },\n },\n },\n grid: { borderColor: base300, containLabel: true },\n categoryAxis: axis,\n valueAxis: axis,\n logAxis: axis,\n timeAxis: axis,\n line: {\n symbol: \"circle\",\n symbolSize: 7,\n lineStyle: { width: 2 },\n smooth: false,\n },\n bar: { itemStyle: { borderRadius: [4, 4, 0, 0] } },\n pie: {\n itemStyle: { borderColor: base100, borderWidth: 2 },\n label: { color: content },\n },\n scatter: { symbolSize: 10 },\n };\n}\n","import as React from \"react\";\nimport * as echarts from \"echarts\";\nimport type { EChartsOption } from \"echarts\";\nimport { cx, useSilicaClass } from \"@wizeworks/silicaui-react\";\nimport { buildSilicaEChartsTheme } from \"./theme\";\n\n/** The live ECharts instance type (whatever `echarts.init` returns). /\nexport type EChartsInstance = ReturnType<typeof echarts.init>;\n\nexport interface ChartProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n /* The ECharts option (series, axes, tooltip, legend, …) — full ECharts API. /\n option: EChartsOption;\n /* Replace the whole option instead of merging on update. Default `true`. /\n notMerge?: boolean;\n /* Toggle ECharts' built-in loading spinner. /\n loading?: boolean;\n /* Renderer backend. Default `\"canvas\"`. /\n renderer?: \"canvas\" \| \"svg\";\n /* Called with the instance right after it's created (and after each re-init). /\n onInit?: (chart: EChartsInstance) => void;\n}\n\n/\n A thin, fully-featured wrapper over Apache ECharts that auto-themes to the\n * active Silica tokens.\n \n ECharts owns all rendering; Silica supplies the palette. The chart re-reads\n * the tokens (and re-inits, since ECharts themes are fixed at `init`) whenever\n * the ambient theme changes — a `data-theme` flip on `<html>` or an OS\n * light/dark switch — so charts track the rest of the UI automatically. It also\n * resizes with its container via a `ResizeObserver`.\n \n Give the container a height (defaults to 20rem); ECharts cannot measure a\n * zero-height box.\n /\nexport const Chart = React.forwardRef<HTMLDivElement, ChartProps>(function Chart(\n {\n option,\n notMerge = true,\n loading = false,\n renderer = \"canvas\",\n onInit,\n className,\n style,\n ...rest\n },\n forwardedRef,\n) {\n const sc = useSilicaClass();\n const containerRef = React.useRef<HTMLDivElement \| null>(null);\n const chartRef = React.useRef<EChartsInstance \| null>(null);\n const onInitRef = React.useRef(onInit);\n onInitRef.current = onInit;\n\n // A DOM-safe, stable theme name unique to this instance so concurrent charts\n // don't clobber one another's registered theme.\n const themeName = `silica-${React.useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n // Bumped whenever the ambient Silica theme changes → forces a re-init below.\n const [themeTick, setThemeTick] = React.useState(0);\n\n const setRefs = React.useCallback(\n (node: HTMLDivElement \| null) => {\n containerRef.current = node;\n if (typeof forwardedRef === \"function\") forwardedRef(node);\n else if (forwardedRef) forwardedRef.current = node;\n },\n [forwardedRef],\n );\n\n // Watch for theme changes: attribute flips on <html> + OS scheme changes.\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n const bump = () => setThemeTick((t) => t + 1);\n const html = document.documentElement;\n const mo = new MutationObserver(bump);\n mo.observe(html, {\n attributes: true,\n attributeFilter: [\"data-theme\", \"class\", \"style\"],\n });\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n mq.addEventListener(\"change\", bump);\n return () => {\n mo.disconnect();\n mq.removeEventListener(\"change\", bump);\n };\n }, []);\n\n // Create / recreate the chart instance (re-runs on theme change).\n React.useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n echarts.registerTheme(themeName, buildSilicaEChartsTheme(el));\n const chart = echarts.init(el, themeName, { renderer });\n chartRef.current = chart;\n onInitRef.current?.(chart);\n const ro = new ResizeObserver(() => chart.resize());\n ro.observe(el);\n return () => {\n ro.disconnect();\n chart.dispose();\n chartRef.current = null;\n };\n }, [themeName, renderer, themeTick]);\n\n // Push option updates.\n React.useEffect(() => {\n chartRef.current?.setOption(option, notMerge);\n }, [option, notMerge, themeTick]);\n\n // Loading overlay.\n React.useEffect(() => {\n const chart = chartRef.current;\n if (!chart) return;\n if (loading) chart.showLoading();\n else chart.hideLoading();\n }, [loading, themeTick]);\n\n return (\n <div\n ref={setRefs}\n className={cx(sc(\"chart\"), className)}\n style={{ width: \"100%\", height: \"20rem\", ...style }}\n {...rest}\n />\n );\n});\n","import as React from \"react\";\nimport type { EChartsOption } from \"echarts\";\nimport { Chart } from \"./chart\";\nimport type { ChartProps } from \"./chart\";\n\nexport interface SparklineProps extends Omit<ChartProps, \"option\"> {\n /** The series values. /\n data: number[];\n /* `\"line\"` (default) or `\"bar\"`. /\n type?: \"line\" \| \"bar\";\n /* Fill under a line sparkline. /\n area?: boolean;\n /* Series color. Defaults to the Silica primary via the theme palette. /\n color?: string;\n /* Show a tooltip on hover. Default `false` — sparklines are glanceable. /\n tooltip?: boolean;\n /* Optional category labels (used only in the tooltip). /\n labels?: (string \| number)[];\n}\n\n/\n A compact, axis-less trend line/bar for inline metrics (KPI cards, table\n * cells). It builds the ECharts option for you and renders through {@link Chart},\n * so it inherits Silica theming and container-resize behavior.\n */\nexport const Sparkline = React.forwardRef<HTMLDivElement, SparklineProps>(\n function Sparkline(\n { data, type = \"line\", area = false, color, tooltip = false, labels, style, ...rest },\n ref,\n ) {\n const option = React.useMemo<EChartsOption>(\n () => ({\n grid: { left: 1, right: 1, top: 3, bottom: 3 },\n xAxis: {\n type: \"category\",\n show: false,\n boundaryGap: type === \"bar\",\n data: labels ?? data.map((_, i) => i),\n },\n yAxis: { type: \"value\", show: false, scale: true },\n tooltip: tooltip\n ? { trigger: \"axis\", axisPointer: { type: \"line\" } }\n : undefined,\n series: [\n {\n type,\n data,\n symbol: \"none\",\n smooth: type === \"line\",\n lineStyle: { width: 2 },\n areaStyle: area && type === \"line\" ? { opacity: 0.18 } : undefined,\n itemStyle: color ? { color } : undefined,\n barCategoryGap: type === \"bar\" ? \"30%\" : undefined,\n } as never,\n ],\n }),\n [data, type, area, color, tooltip, labels],\n );\n\n return (\n <Chart ref={ref} option={option} style={{ height: \"3rem\", ...style }} {...rest} />\n );\n },\n);\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@wizeworks/silicaui-charts",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Silica UI charts — Apache ECharts wrapped and auto-themed to Silica's design tokens.",
   "type": "module",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "react-dom": "^19.0.0",
     "tsup": "^8.3.0",
     "typescript": "^5.6.0",
-    "@wizeworks/silicaui-react": "0.55.0"
+    "@wizeworks/silicaui-react": "0.57.0"
   },
   "keywords": [
     "react",