@cardenelabs/cdl 0.38.0 → 0.40.0

package/CHANGELOG.md

@@ -5,6 +5,47 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.40.0] - 2026-09-07
+
+### Added
+
+- **100 個の印も段の `draw` で 1 個ずつ埋まるようにした** (#719)
+
+  `chart-waffle` は上の行から左詰めで印を配る図なので、埋まる順もそのまま読む向きになる。
+
+  **切り抜きでは表せない**。 弧の 3 種 (#715) は切り抜きで隠したが、この図に当てると
+  升の途中が斜めや半分で切れる = 1 個 = 1% の印が半分だけ出て、数えられない図になる。
+
+  代わりに **塗りだけを変える**。 印は 100 個とも最初から描き、進みまで届いていない印を
+  持ち主のいない印と同じ地の色にする。 升の位置と大きさ、`data-cdl-waffle-owner` の
+  持ち主の欄はどちらも進みで変わらない。
+
+  左の一覧 (名前と印の数) は最初から全部出す。 この図は「数えて確かめられる」 ことが
+  存在理由で、一覧はその答え合わせの表になる。
+
+  これで図表で動きを持たないのは 指標 (`chart-stat`) と 四象限 (`quadrant-matrix`) の
+  2 つになった。 どちらも長さも順序も持たないため対象外のまま。
+
+## [0.39.0] - 2026-09-07
+
+### Added
+
+- **弧と帯で量を表す 3 種も段の `draw` で起点から現れるようにした** (#715)
+
+  半円ゲージ (`chart-gauge`) は 9 時から上を通って 3 時へ弧が伸び、放射 (`chart-radial`) は
+  各輪が 12 時から時計回りに開き、積層帯 (`chart-stacked-bar`) は左から帯が伸びる。
+
+  どれも「量を長さで表す」 図なので、起点と伸びる向きが図の意味から決まる。 それまで
+  `draw` が効く種別は 9 つで、この 3 種は書いても何も起きなかった (実測で 6 秒間、
+  半円ゲージの弧の `d` が一度も変わらなかった)。 見本帳に並べると動く図と動かない図が混ざる。
+
+  **切り抜くのは量を表す形だけ**。 放射の軌道 (全周の薄い輪) は「あとどれだけで一周か」 を
+  示す枠なので最初から出す。 半円ゲージの合計の字は主役なので、左から半分ずつ現れると読めない。
+  積層帯の区画の字だけは区画と一緒に切り抜く (字は区画の上に乗っているため)。
+
+  形を表す属性は今までどおり触らない。 弧の `d` と区画の `width` は進みに関わらず実値で、
+  見える範囲だけが変わる。 `draw` を書かない図の絵は 1 文字も変わらない。
+
 ## [0.38.0] - 2026-09-07
 
 ### Fixed
@@ -1740,7 +1781,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.38.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.0...HEAD
+[0.40.0]: https://github.com/cardene777/cdl/compare/v0.39.0...v0.40.0
+[0.39.0]: https://github.com/cardene777/cdl/compare/v0.38.0...v0.39.0
 [0.38.0]: https://github.com/cardene777/cdl/compare/v0.37.0...v0.38.0
 [0.37.0]: https://github.com/cardene777/cdl/compare/v0.36.0...v0.37.0
 [0.36.0]: https://github.com/cardene777/cdl/compare/v0.35.0...v0.36.0

package/SPEC.md

@@ -140,11 +140,16 @@ phase でも線を引き直すことになる。
 | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
 | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
 | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+| `chart-slope` | 左の軸 | 線が右の軸へ伸びる | 右の値は線が右の軸に着いた時 |
 | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
 | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
 | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
 | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
 | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+| `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
+| `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
+| `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
+| `chart-waffle` | 左上 | 印が読む向きに 1 個ずつ埋まる | 一覧は最初から出る |
 
 対応種別の一覧は `validate.ts` の `DRAW_KINDS` が持ち、 知らせの文面もそこから組み立てる。
 
@@ -155,7 +160,8 @@ phase でも線を引き直すことになる。
 
 **枝が複数ある種別は段ごとに順に伸ばす** (`mind-map` / `tree-hierarchy`)。 深さを等分し、
 中心 / 根に近い段から順に伸ばす。 全部を同時に伸ばすと、離れた枝が宙に浮いたまま伸びる。
-進みの畳み方と dash の当て方は `kinds/draw-progress.ts` が SSOT。
+進みの畳み方と dash の当て方は `kinds/draw-progress.ts` が、 弧で量を表す図の切り抜きは
+`kinds/draw-arc.tsx` が SSOT。
 
 `draw` を書かない図は従来どおり全体を描き、 DOM に属性も要素も足さない。
 

package/dist/index.cjs

@@ -20808,7 +20808,11 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
   "mind-map",
   "tree-hierarchy",
   "gantt-timeline",
-  "funnel-stages"
+  "funnel-stages",
+  "chart-gauge",
+  "chart-radial",
+  "chart-stacked-bar",
+  "chart-waffle"
 ]);
 var KINDS = new Set(NODE_KINDS);
 var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
@@ -24354,6 +24358,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) {
@@ -24801,15 +24814,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);
@@ -24817,7 +24821,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;
@@ -24862,6 +24868,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",
@@ -24877,19 +24898,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",
       {
@@ -24954,7 +24964,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;
@@ -24993,6 +25005,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",
@@ -25018,18 +25044,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: [
@@ -25247,7 +25263,9 @@ function \u5370\u306E\u5272\u4ED8(\u5024) {
 function ChartWaffleNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -25276,6 +25294,7 @@ function ChartWaffleNode({
   \u914D\u5206.forEach((n, idx) => {
     for (let k = 0; k < n; k++) \u6301\u3061\u4E3B.push(idx);
   });
+  const \u57CB\u307E\u3063\u305F = Math.round(\u9032\u307F\u3092\u7573\u3080(drawing, progress) * WAFFLE_TOTAL);
   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;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -25296,6 +25315,7 @@ function ChartWaffleNode({
       const \u884C = Math.floor(k / WAFFLE_COLS);
       const \u5217 = k % WAFFLE_COLS;
       const owner = \u6301\u3061\u4E3B[k];
+      const \u57CB\u307E\u3063\u3066\u3044\u308B = owner !== void 0 && k < \u57CB\u307E\u3063\u305F;
       return /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
         {
@@ -25306,8 +25326,8 @@ function ChartWaffleNode({
           width: \u5370,
           height: \u5370,
           rx: 2,
-          fill: owner === void 0 ? "var(--cdl-divider, #d4d4d8)" : \u5370\u306E\u82722(data[owner].tone, owner),
-          fillOpacity: owner === void 0 ? 0.35 : 1
+          fill: \u57CB\u307E\u3063\u3066\u3044\u308B ? \u5370\u306E\u82722(data[owner].tone, owner) : "var(--cdl-divider, #d4d4d8)",
+          fillOpacity: \u57CB\u307E\u3063\u3066\u3044\u308B ? 1 : 0.35
         },
         `cell-${k}`
       );
@@ -25352,7 +25372,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;
@@ -25370,6 +25392,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",
@@ -25385,6 +25409,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;
@@ -25401,68 +25426,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}`);
     })
   ] });
@@ -30423,9 +30442,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,
@@ -30438,11 +30475,29 @@ function CdlNodeView({
           }
         );
       case "chart-waffle":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartWaffleNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartWaffleNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       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,