@cardenelabs/cdl 0.10.0 → 0.11.0

package/dist/react.cjs

@@ -4886,6 +4886,7 @@ function nodeTemplateTexts(node) {
 
 // src/validate.ts
 var TONES2 = new Set(TONES);
+var DRAW_KINDS = /* @__PURE__ */ new Set(["chart-line", "chart-bar", "chart-pie"]);
 var KINDS = new Set(NODE_KINDS);
 var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
 function validate(diag) {
@@ -5003,8 +5004,10 @@ function validate(diag) {
         continue;
       }
       const kind = diag.nodes.find((n) => n.id === id)?.kind;
-      if (kind !== "chart-line") {
-        warnings.push(`phase "${p.id}" \u306E draw "${id}" \u306F kind "${kind}" \u3067\u3001 \u5DE6\u304B\u3089\u63CF\u304F\u52D5\u304D\u3092\u6301\u305F\u306A\u3044 (\u5BFE\u8C61\u306F chart-line)`);
+      if (!DRAW_KINDS.has(String(kind))) {
+        warnings.push(
+          `phase "${p.id}" \u306E draw "${id}" \u306F kind "${kind}" \u3067\u3001 \u8D77\u70B9\u304B\u3089\u63CF\u304F\u52D5\u304D\u3092\u6301\u305F\u306A\u3044 (\u5BFE\u8C61\u306F ${[...DRAW_KINDS].join(" / ")})`
+        );
       }
     }
     for (const t of p.tweens) {
@@ -6769,8 +6772,11 @@ function ChartLineNode({
 function ChartPieNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
+  const instanceId = react.useId().replace(/[^A-Za-z0-9_-]/g, "");
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
@@ -6783,20 +6789,26 @@ function ChartPieNode({
   const cx = pieAreaW / 2;
   const cy = PAD_TOP + chartAreaH / 2;
   let cumAngle = -Math.PI / 2;
+  let cumFrac = 0;
   const slices = data.map((d) => {
     const frac = d.value / total;
     const angle = frac * Math.PI * 2;
     const a0 = cumAngle;
     const a1 = cumAngle + angle;
     cumAngle = a1;
+    const startFrac = cumFrac;
+    cumFrac += frac;
     const x1 = cx + radius * Math.cos(a0);
     const y1 = cy + radius * Math.sin(a0);
     const x2 = cx + radius * Math.cos(a1);
     const y2 = cy + radius * Math.sin(a1);
     const large = angle > Math.PI ? 1 : 0;
     const path = `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} Z`;
-    return { d, frac, path };
+    return { d, frac, path, startFrac };
   });
+  const \u958B\u304D = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
+  const \u958B\u304D\u59CB\u3081\u305F = (startFrac) => !drawing || \u958B\u304D > startFrac;
   const legendX = pieAreaW + 8;
   const legendGap = Math.min(28, chartAreaH / Math.max(data.length, 1));
   const legendStartY = PAD_TOP + (chartAreaH - legendGap * data.length) / 2 + legendGap / 2;
@@ -6815,7 +6827,8 @@ function ChartPieNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, radius + 2, \u958B\u304D) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, children: slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         "data-cdl-role": "chart-pie-slice",
@@ -6827,8 +6840,8 @@ function ChartPieNode({
         strokeWidth: 1.5
       },
       `slice-${idx}`
-    )),
-    slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${legendX} ${legendStartY + idx * legendGap})`, children: [
+    )) }),
+    slices.map((s, idx) => !\u958B\u304D\u59CB\u3081\u305F(s.startFrac) ? null : /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${legendX} ${legendStartY + idx * legendGap})`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
         {
@@ -6866,6 +6879,15 @@ function ChartPieNode({
     ] }, `legend-${idx}`))
   ] });
 }
+function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
+  if (\u958B\u304D <= 0) return null;
+  if (\u958B\u304D >= 1) return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r });
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + \u958B\u304D * Math.PI * 2;
+  const large = \u958B\u304D > 0.5 ? 1 : 0;
+  const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
+  return /* @__PURE__ */ jsxRuntime.jsx("path", { d });
+}
 var FALLBACK_ORDER = ["accent", "teal", "warning", "success", "info", "error"];
 function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
@@ -6874,7 +6896,9 @@ function sliceColor(tone, idx) {
 function ChartBarNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -6897,6 +6921,8 @@ function ChartBarNode({
     const v = vMax * i / gridCount;
     return { y: yAt(v), value: v };
   });
+  const \u4F38\u3073 = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  const \u6A2A\u8EF8\u306Ey = PAD_TOP + canvasH;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -6953,26 +6979,28 @@ function ChartBarNode({
       const bx = xAt(idx);
       const by = yAt(d.value);
       const bh = PAD_TOP + canvasH - by;
+      const \u898B\u3048\u3066\u3044\u308B\u982D = \u6A2A\u8EF8\u306Ey - (\u6A2A\u8EF8\u306Ey - by) * \u4F38\u3073;
+      const \u68D2 = /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          "data-cdl-role": "chart-bar",
+          "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+          x: bx,
+          y: by,
+          width: barW,
+          height: bh,
+          rx: 2,
+          fill: "var(--cdl-tone-accent, #2d6a8f)",
+          fillOpacity: 0.9
+        }
+      );
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "rect",
-          {
-            "data-cdl-role": "chart-bar",
-            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
-            x: bx,
-            y: by,
-            width: barW,
-            height: bh,
-            rx: 2,
-            fill: "var(--cdl-tone-accent, #2d6a8f)",
-            fillOpacity: 0.9
-          }
-        ),
+        drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(0 ${\u6A2A\u8EF8\u306Ey}) scale(1 ${\u4F38\u3073}) translate(0 ${-\u6A2A\u8EF8\u306Ey})`, children: \u68D2 }) : \u68D2,
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
             x: bx + barW / 2,
-            y: by - 6,
+            y: \u898B\u3048\u3066\u3044\u308B\u982D - 6,
             fontSize: 11,
             textAnchor: "middle",
             fill: "var(--cdl-text, #1a1f2a)",
@@ -12287,9 +12315,27 @@ function CdlNodeView({
           }
         );
       case "chart-pie":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartPieNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartPieNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-bar":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartBarNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartBarNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "gantt-timeline":
         return /* @__PURE__ */ jsxRuntime.jsx(GanttNode, { node: resolvedNode, active, stateValues });
       case "mind-map":