@cardenelabs/cdl 0.38.0 → 0.39.0

package/dist/react.cjs

@@ -9526,7 +9526,10 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
   "mind-map",
   "tree-hierarchy",
   "gantt-timeline",
-  "funnel-stages"
+  "funnel-stages",
+  "chart-gauge",
+  "chart-radial",
+  "chart-stacked-bar"
 ]);
 var KINDS = new Set(NODE_KINDS);
 var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
@@ -11855,6 +11858,15 @@ function interpolateColor(template, stateValues, fallback) {
   if (!template) return fallback;
   return interpolate(template, stateValues);
 }
+function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D, \u8D77\u70B9 = -Math.PI / 2, \u5168\u5468 = Math.PI * 2) {
+  if (\u958B\u304D <= 0) return null;
+  if (\u958B\u304D >= 1 && \u5168\u5468 >= Math.PI * 2) return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r });
+  const a0 = \u8D77\u70B9;
+  const a1 = a0 + Math.min(1, \u958B\u304D) * \u5168\u5468;
+  const large = a1 - a0 > Math.PI ? 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 });
+}
 
 // src/kinds/chart-number.ts
 function \u5B9F\u5024\u8868\u8A18(v) {
@@ -12302,15 +12314,6 @@ function \u8F2A\u306E\u9053(cx, cy, R, r, a0, a1) {
   const large = a1 - a0 > Math.PI ? 1 : 0;
   return `M ${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)} L ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} A ${r} ${r} 0 ${large} 0 ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} Z`;
 }
-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 });
-}
 function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
   return chartSeriesColor(idx);
@@ -12318,7 +12321,9 @@ function sliceColor(tone, idx) {
 function ChartGaugeNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -12363,6 +12368,21 @@ function ChartGaugeNode({
   const \u898B\u51FA\u3057\u306E\u7D1A = Math.max(9, Math.round(\u5408\u8A08\u306E\u7D1A * 0.38));
   const \u5185\u8A33\u306E\u5E45 = \u4F7F\u3048\u308B\u5E452 / Math.max(data.length, 1);
   const \u5185\u8A33\u306Ey = cy + \u5F27\u3068\u5185\u8A33\u306E\u9593;
+  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-gauge-draw-${react.useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const \u5F27\u305F\u3061 = slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      "data-cdl-role": "chart-gauge-arc",
+      "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+      d: s.path,
+      fill: arcColor(s.d.tone, idx),
+      stroke: "var(--cdl-node-fill, #ffffff)",
+      strokeWidth: 3,
+      strokeLinejoin: "round"
+    },
+    `arc-${idx}`
+  ));
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -12378,19 +12398,8 @@ function ChartGaugeNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        "data-cdl-role": "chart-gauge-arc",
-        "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
-        d: s.path,
-        fill: arcColor(s.d.tone, idx),
-        stroke: "var(--cdl-node-fill, #ffffff)",
-        strokeWidth: 3,
-        strokeLinejoin: "round"
-      },
-      `arc-${idx}`
-    )),
+    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, \u4F38\u3073, Math.PI, Math.PI) }) }),
+    drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u5F27\u305F\u3061 }) : \u5F27\u305F\u3061,
     /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -12455,7 +12464,9 @@ function arcColor(tone, idx) {
 function ChartRadialNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -12494,6 +12505,20 @@ function ChartRadialNode({
     };
   });
   const \u4E00\u89A7\u306E\u59CB\u307E\u308A = PAD + (\u4F7F\u3048\u308B\u9AD8\u3055 - \u884C\u306E\u9AD8\u3055 * data.length) / 2 + \u884C\u306E\u9AD8\u3055 / 2;
+  const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-radial-draw-${react.useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const \u53D6\u308A\u5206\u305F\u3061 = rings.map(
+    (r, idx) => r.\u53D6\u308A\u5206 === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        "data-cdl-role": "chart-radial-arc",
+        "data-cdl-unresolved": r.d.unresolved ? "true" : void 0,
+        d: r.\u53D6\u308A\u5206,
+        fill: arcColor2(r.d.tone, idx)
+      },
+      `arc-${idx}`
+    )
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -12519,18 +12544,8 @@ function ChartRadialNode({
       },
       `track-${idx}`
     )),
-    rings.map(
-      (r, idx) => r.\u53D6\u308A\u5206 === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          "data-cdl-role": "chart-radial-arc",
-          "data-cdl-unresolved": r.d.unresolved ? "true" : void 0,
-          d: r.\u53D6\u308A\u5206,
-          fill: arcColor2(r.d.tone, idx)
-        },
-        `arc-${idx}`
-      )
-    ),
+    drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(\u5F27\u306Ecx, cy, \u5916\u534A\u5F84 + \u5E2F\u306E\u5E45, \u958B\u304D) }) }),
+    drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u53D6\u308A\u5206\u305F\u3061 }) : \u53D6\u308A\u5206\u305F\u3061,
     data.map((d, idx) => {
       const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-radial-item", children: [
@@ -12853,7 +12868,9 @@ var SLICE_MIN_W_FOR_VALUE = 84;
 function ChartStackedBarNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -12871,6 +12888,8 @@ function ChartStackedBarNode({
   const \u4E00\u89A7\u306E\u9AD8\u3055 = 26;
   const \u5168\u4F53\u306E\u9AD8\u3055 = \u5E2F\u305F\u3061.length * \u5E2F\u306E\u9AD8\u3055 + (\u5E2F\u305F\u3061.length - 1) * \u5E2F\u306E\u9593 + 16 + \u4E00\u89A7\u306E\u9AD8\u3055;
   const \u4E0A\u7AEF = Math.max(PAD, (node.h - \u5168\u4F53\u306E\u9AD8\u3055) / 2);
+  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-stacked-bar-draw-${react.useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -12886,6 +12905,7 @@ function ChartStackedBarNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
+    drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: \u5E2F\u306E\u5DE6 + \u5E2F\u306E\u5E45 * \u4F38\u3073, height: node.h }) }) }),
     \u5E2F\u305F\u3061.map((\u5E2F, \u6BB5) => {
       const y = \u4E0A\u7AEF + \u6BB5 * (\u5E2F\u306E\u9AD8\u3055 + \u5E2F\u306E\u9593);
       let \u5DE6 = \u5E2F\u306E\u5DE6;
@@ -12902,68 +12922,62 @@ function ChartStackedBarNode({
             children: \u5E2F.\u540D\u524D
           }
         ),
-        \u5E2F.\u533A\u753B.map((s, idx) => {
-          const w = \u5E2F\u306E\u5E45 * s.\u5272\u5408;
-          const x = \u5DE6;
-          \u5DE6 += w;
-          const \u8272 = \u5370\u306E\u82723(s.tone, idx);
-          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "rect",
-              {
-                "data-cdl-role": "chart-stacked-bar-slice",
-                "data-cdl-unresolved": s.unresolved ? "true" : void 0,
-                x,
-                y,
-                width: Math.max(0, w),
-                height: \u5E2F\u306E\u9AD8\u3055,
-                fill: \u8272
-              }
-            ),
-            w >= SLICE_MIN_W_FOR_TEXT && /* @__PURE__ */ jsxRuntime.jsx(
-              "text",
-              {
-                "data-cdl-role": "chart-stacked-bar-slice-text",
-                x: x + w / 2,
-                y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4),
-                fontSize: \u533A\u753B\u306E\u7D1A,
-                fontWeight: 700,
-                textAnchor: "middle",
-                fill: "#ffffff",
-                children: \u5272\u5408\u8868\u8A18(s.\u5272\u5408)
-              }
-            ),
-            w >= SLICE_MIN_W_FOR_VALUE && /* @__PURE__ */ jsxRuntime.jsx(
-              "text",
-              {
-                "data-cdl-role": "chart-stacked-bar-slice-value",
-                x: x + w / 2,
-                y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + 13,
-                fontSize: \u533A\u753B\u306E\u7D1A - 1,
-                textAnchor: "middle",
-                fill: "#ffffff",
-                fillOpacity: 0.85,
-                children: \u5B9F\u5024\u8868\u8A18(s.\u5B9F\u5024)
-              }
-            )
-          ] }, `slice-${idx}`);
-        })
+        (() => {
+          const \u533A\u753B\u305F\u3061 = \u5E2F.\u533A\u753B.map((s, idx) => {
+            const w = \u5E2F\u306E\u5E45 * s.\u5272\u5408;
+            const x = \u5DE6;
+            \u5DE6 += w;
+            const \u8272 = \u5370\u306E\u82723(s.tone, idx);
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  "data-cdl-role": "chart-stacked-bar-slice",
+                  "data-cdl-unresolved": s.unresolved ? "true" : void 0,
+                  x,
+                  y,
+                  width: Math.max(0, w),
+                  height: \u5E2F\u306E\u9AD8\u3055,
+                  fill: \u8272
+                }
+              ),
+              w >= SLICE_MIN_W_FOR_TEXT && /* @__PURE__ */ jsxRuntime.jsx(
+                "text",
+                {
+                  "data-cdl-role": "chart-stacked-bar-slice-text",
+                  x: x + w / 2,
+                  y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4),
+                  fontSize: \u533A\u753B\u306E\u7D1A,
+                  fontWeight: 700,
+                  textAnchor: "middle",
+                  fill: "#ffffff",
+                  children: \u5272\u5408\u8868\u8A18(s.\u5272\u5408)
+                }
+              ),
+              w >= SLICE_MIN_W_FOR_VALUE && /* @__PURE__ */ jsxRuntime.jsx(
+                "text",
+                {
+                  "data-cdl-role": "chart-stacked-bar-slice-value",
+                  x: x + w / 2,
+                  y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + 13,
+                  fontSize: \u533A\u753B\u306E\u7D1A - 1,
+                  textAnchor: "middle",
+                  fill: "#ffffff",
+                  fillOpacity: 0.85,
+                  children: \u5B9F\u5024\u8868\u8A18(s.\u5B9F\u5024)
+                }
+              )
+            ] }, `slice-${idx}`);
+          });
+          return drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u533A\u753B\u305F\u3061 }) : \u533A\u753B\u305F\u3061;
+        })()
       ] }, `bar-${\u6BB5}`);
     }),
     \u4E00\u89A7\u306E\u4E26\u3073(data, \u5E2F\u306E\u5DE6, node.w - PAD, \u540D\u524D\u306E\u7D1A).map(({ d, idx, x, \u884C }) => {
       const y = \u4E0A\u7AEF + \u5E2F\u305F\u3061.length * (\u5E2F\u306E\u9AD8\u3055 + \u5E2F\u306E\u9593) - \u5E2F\u306E\u9593 + 16 + \u4E00\u89A7\u306E\u9AD8\u3055 / 2 + \u884C * \u4E00\u89A7\u306E\u9AD8\u3055;
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stacked-bar-legend", children: [
         /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: y - 5, width: 10, height: 10, rx: 2, fill: \u5370\u306E\u82723(d.tone, idx) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: x + 16,
-            y: y + 4,
-            fontSize: \u540D\u524D\u306E\u7D1A,
-            fill: "var(--cdl-text, #1a1f2a)",
-            children: d.label
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + 16, y: y + 4, fontSize: \u540D\u524D\u306E\u7D1A, fill: "var(--cdl-text, #1a1f2a)", children: d.label })
       ] }, `legend-${idx}`);
     })
   ] });
@@ -17924,9 +17938,27 @@ function CdlNodeView({
           }
         );
       case "chart-gauge":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartGaugeNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartGaugeNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-stacked-bar":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartStackedBarNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartStackedBarNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-slope":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ChartSlopeNode,
@@ -17943,7 +17975,16 @@ function CdlNodeView({
       case "chart-stat":
         return /* @__PURE__ */ jsxRuntime.jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
       case "chart-radial":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartRadialNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartRadialNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-bar":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ChartBarNode,