@icen.ai/ui 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // package.json
 var package_default = {
   name: "@icen.ai/ui",
-  version: "0.3.0",
+  version: "0.4.0",
   description: "Icen Design System \u2014 \u8BBE\u8BA1 tokens\uFF086 \u9884\u8BBE \xD7 \u660E\u6697\uFF09\u3001\u65E0\u6846\u67B6\u7EC4\u4EF6 CSS \u4E0E\u884C\u4E3A JS",
   repository: {
     type: "git",
@@ -2057,6 +2057,192 @@ function renderLine(el, opts) {
   wrap.append(svg, labelsRow(labels.slice(-7)));
   el.appendChild(wrap);
 }
+function renderArea(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const n = Math.min(opts.labels.length, opts.values.length);
+  if (n === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const labels = opts.labels.slice(0, n);
+  const values = opts.values.slice(0, n);
+  const width = 360;
+  const height = 150;
+  const pad = 14;
+  const max = Math.max(...values, 1);
+  const tone = toneVar(opts.tone);
+  const points = values.map((value, i) => ({
+    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
+    y: height - pad - value / max * (height - pad * 2),
+    value,
+    label: labels[i] ?? ""
+  }));
+  const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
+  const last = points[points.length - 1];
+  const first = points[0];
+  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+  const gradientId = `icen-chart-area-${++lineGradientSeq}`;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-area";
+  const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
+  const defs = svgEl("defs", {});
+  const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
+  gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.5" }));
+  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.05" }));
+  defs.appendChild(gradient);
+  svg.appendChild(defs);
+  for (let i = 0; i < 4; i++) {
+    const y = pad + i * (height - pad * 2) / 3;
+    svg.appendChild(svgEl("line", {
+      x1: String(pad),
+      x2: String(width - pad),
+      y1: String(y),
+      y2: String(y),
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1"
+    }));
+  }
+  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+  svg.appendChild(svgEl("path", {
+    d: line,
+    fill: "none",
+    stroke: tone,
+    "stroke-width": "1.5",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }));
+  for (const p of points) {
+    const title = svgEl("title", {});
+    title.textContent = `${p.label}: ${fmt(opts, p.value)}`;
+    const inv = svgEl("circle", {
+      cx: p.x.toFixed(1),
+      cy: p.y.toFixed(1),
+      r: "2",
+      fill: "transparent"
+    });
+    inv.appendChild(title);
+    svg.appendChild(inv);
+  }
+  wrap.append(svg, labelsRow(labels.slice(-7)));
+  el.appendChild(wrap);
+}
+function renderRadar(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const axes = opts.axes;
+  const n = axes.length;
+  if (n < 3 || opts.series.length === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  let maxVal = opts.max ?? 0;
+  if (opts.max == null) {
+    for (const s of opts.series) {
+      for (let i = 0; i < n; i++) maxVal = Math.max(maxVal, s.values[i] ?? 0);
+    }
+    maxVal = niceCeil(maxVal);
+  }
+  if (maxVal <= 0) maxVal = 1;
+  const size = 200;
+  const cx = size / 2;
+  const cy = size / 2;
+  const radius = 78;
+  const levels = Math.max(2, opts.levels ?? 4);
+  const angleOf = (i) => -Math.PI / 2 + i * 2 * Math.PI / n;
+  const pointAt = (i, r) => ({
+    x: cx + r * Math.cos(angleOf(i)),
+    y: cy + r * Math.sin(angleOf(i))
+  });
+  const wrap = document.createElement("div");
+  wrap.className = "chart-radar";
+  const svg = svgEl("svg", { viewBox: `0 0 ${size} ${size}`, role: "img" });
+  for (let lv = 1; lv <= levels; lv++) {
+    const r = radius * lv / levels;
+    const pts = Array.from({ length: n }, (_, i) => {
+      const p = pointAt(i, r);
+      return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
+    }).join(" ");
+    svg.appendChild(svgEl("polygon", {
+      points: pts,
+      fill: "none",
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1",
+      "stroke-dasharray": lv === levels ? "0" : "3 2"
+    }));
+  }
+  for (let i = 0; i < n; i++) {
+    const edge = pointAt(i, radius);
+    svg.appendChild(svgEl("line", {
+      x1: String(cx),
+      y1: String(cy),
+      x2: edge.x.toFixed(1),
+      y2: edge.y.toFixed(1),
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1"
+    }));
+    const labelP = pointAt(i, radius + 14);
+    const txt = svgEl("text", {
+      x: labelP.x.toFixed(1),
+      y: labelP.y.toFixed(1),
+      "text-anchor": "middle",
+      "dominant-baseline": "middle",
+      "font-size": "9",
+      fill: "var(--token-text-muted)"
+    });
+    txt.textContent = axes[i] ?? "";
+    svg.appendChild(txt);
+  }
+  const legend = document.createElement("div");
+  legend.className = "chart-legend";
+  for (const s of opts.series) {
+    const tone = toneVar(s.tone);
+    const pts = Array.from({ length: n }, (_, i) => {
+      const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
+      const p = pointAt(i, v / maxVal * radius);
+      return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
+    }).join(" ");
+    const polyFill = svgEl("polygon", {
+      points: pts,
+      fill: tone,
+      "fill-opacity": "0.16",
+      stroke: tone,
+      "stroke-width": "2",
+      "stroke-linejoin": "round"
+    });
+    const title = svgEl("title", {});
+    title.textContent = `${s.name}: ${s.values.map((v) => fmt(opts, v)).join(" / ")}`;
+    polyFill.appendChild(title);
+    svg.appendChild(polyFill);
+    for (let i = 0; i < n; i++) {
+      const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
+      const p = pointAt(i, v / maxVal * radius);
+      svg.appendChild(svgEl("circle", {
+        cx: p.x.toFixed(1),
+        cy: p.y.toFixed(1),
+        r: "2.5",
+        fill: "var(--token-card)",
+        stroke: tone,
+        "stroke-width": "1.5"
+      }));
+    }
+    legend.appendChild(legendItem(s.name, "", s.tone));
+  }
+  wrap.append(svg, legend);
+  el.appendChild(wrap);
+}
+function niceCeil(v) {
+  if (v <= 0) return 1;
+  const exp = Math.floor(Math.log10(v));
+  const base = Math.pow(10, exp);
+  const frac = v / base;
+  let nice;
+  if (frac <= 1) nice = 1;
+  else if (frac <= 2) nice = 2;
+  else if (frac <= 5) nice = 5;
+  else nice = 10;
+  return nice * base;
+}
 function isoDate(d) {
   const m = String(d.getMonth() + 1).padStart(2, "0");
   const day = String(d.getDate()).padStart(2, "0");
@@ -2348,11 +2534,13 @@ export {
   openModal,
   openPopover,
   registerContextMenu,
+  renderArea,
   renderDonut,
   renderGauge,
   renderHBar,
   renderHeatmap,
   renderLine,
+  renderRadar,
   renderSparkline,
   renderStack,
   renderVBar,

package/dist/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@icen.ai/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "tokens": [
     "colors.css",
     "style-profiles.css",
@@ -14,6 +14,15 @@
     "breadcrumb",
     "btn",
     "card",
+    "chart-area",
+    "chart-bar",
+    "chart-gauge",
+    "chart-heatmap",
+    "chart-line",
+    "chart-pie",
+    "chart-radar",
+    "chart-sparkline",
+    "chart-stack",
     "charts",
     "content",
     "datatable",
@@ -84,9 +93,6 @@
     "stat": {
       "css": "stat.css"
     },
-    "table": {
-      "css": "table.css"
-    },
     "toast": {
       "css": "toast.css",
       "behavior": "toast",
@@ -158,21 +164,6 @@
     "empty": {
       "css": "empty.css"
     },
-    "alert": {
-      "css": "feedback.css"
-    },
-    "result": {
-      "css": "feedback.css"
-    },
-    "progress": {
-      "css": "feedback.css"
-    },
-    "spinner": {
-      "css": "feedback.css"
-    },
-    "skeleton": {
-      "css": "feedback.css"
-    },
     "avatar": {
       "css": "media.css"
     },
@@ -209,8 +200,32 @@
       "behavior": "carousel",
       "init": "initCarousel"
     },
+    "table": {
+      "css": "table.css"
+    },
+    "datatable": {
+      "css": "datatable.css",
+      "extraCss": [
+        "menu.css"
+      ],
+      "behavior": "datatable",
+      "exports": [
+        "createTable"
+      ]
+    },
     "charts": {
       "css": "charts.css",
+      "extraCss": [
+        "chart-line.css",
+        "chart-bar.css",
+        "chart-pie.css",
+        "chart-radar.css",
+        "chart-heatmap.css",
+        "chart-area.css",
+        "chart-stack.css",
+        "chart-gauge.css",
+        "chart-sparkline.css"
+      ],
       "behavior": "charts",
       "exports": [
         "renderVBar",
@@ -218,21 +233,119 @@
         "renderStack",
         "renderDonut",
         "renderLine",
+        "renderArea",
+        "renderRadar",
         "renderHeatmap",
         "renderSparkline",
         "renderGauge"
       ]
     },
-    "datatable": {
-      "css": "datatable.css",
+    "chart-line": {
+      "css": "chart-line.css",
       "extraCss": [
-        "menu.css"
+        "charts.css"
       ],
-      "behavior": "datatable",
+      "behavior": "charts",
       "exports": [
-        "createTable"
+        "renderLine"
+      ]
+    },
+    "chart-bar": {
+      "css": "chart-bar.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderVBar",
+        "renderHBar"
+      ]
+    },
+    "chart-pie": {
+      "css": "chart-pie.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderDonut"
       ]
     },
+    "chart-radar": {
+      "css": "chart-radar.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderRadar"
+      ]
+    },
+    "chart-heatmap": {
+      "css": "chart-heatmap.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderHeatmap"
+      ]
+    },
+    "chart-area": {
+      "css": "chart-area.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderArea"
+      ]
+    },
+    "chart-stack": {
+      "css": "chart-stack.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderStack"
+      ]
+    },
+    "chart-gauge": {
+      "css": "chart-gauge.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderGauge"
+      ]
+    },
+    "chart-sparkline": {
+      "css": "chart-sparkline.css",
+      "extraCss": [
+        "charts.css"
+      ],
+      "behavior": "charts",
+      "exports": [
+        "renderSparkline"
+      ]
+    },
+    "alert": {
+      "css": "feedback.css"
+    },
+    "result": {
+      "css": "feedback.css"
+    },
+    "progress": {
+      "css": "feedback.css"
+    },
+    "spinner": {
+      "css": "feedback.css"
+    },
+    "skeleton": {
+      "css": "feedback.css"
+    },
     "nav": {
       "css": "nav.css",
       "behavior": "nav",