@cardenelabs/cdl 0.31.1 → 0.32.0

package/CHANGELOG.md

@@ -5,6 +5,14 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.32.0] - 2026-09-07
+
+### Added
+
+- **円グラフで datum の `previous` を内側の輪として描けるようになった** (#680)
+- **円グラフの名札で割合を主役にした** (#683)。 1 行目が割合 (級 19 の太字)、2 行目が名前 (級 12)。 実数は割合と違う数になる図でだけ 2 行目に添える
+- **円グラフの見せ方を記法から選べるようになった** (#684)。 `chartPieForm` に `arcs` (系列ごとに 1 本の弧) と `table` (図と表を左右に据える) を書ける。 欄を書かない図は今までどおりの輪
+
 ## [0.31.1] - 2026-09-06
 
 ### Fixed
@@ -1621,7 +1629,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.31.1...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.32.0...HEAD
+[0.32.0]: https://github.com/cardene777/cdl/compare/v0.31.1...v0.32.0
 [0.31.1]: https://github.com/cardene777/cdl/compare/v0.31.0...v0.31.1
 [0.31.0]: https://github.com/cardene777/cdl/compare/v0.30.3...v0.31.0
 [0.30.3]: https://github.com/cardene777/cdl/compare/v0.30.2...v0.30.3

package/README.md

@@ -244,6 +244,46 @@ state placeholder は node の `title` / `subtitle` / `eyebrow` / `value` 内で
 
 phase 切替に連動して `status: idle` → `status: running` のように描画される。
 
+## 2 時点の構成比
+
+`chart-pie` と `chart-stacked-bar` は datum の `previous` で前の時点を受け取る。
+`previous` を 1 件でも書くと、書かない datum も前の時点では 0 として扱うため、系列の色と
+並びが時点間で対応する。
+
+```ts
+.node("share", {
+  lane: "l",
+  stack: 0,
+  kind: "chart-pie",
+  chartData: [
+    { label: "Web", previous: 45, value: 30 },
+    { label: "Mobile", previous: 35, value: 45 },
+    { label: "API", value: 25 },
+  ],
+})
+```
+
+`chart-pie` は前を内側、今を外側の輪で描き、名札には `45 → 30  30%` の形で今の割合を添える。
+`chart-stacked-bar` は前から今の順に帯を並べる。`previous` を書かない図は、どちらも今だけを描く。
+3 時点以上は持たない。
+
+## 円グラフの見せ方
+
+`chart-pie` は `chartPieForm` で見せ方を選ぶ。 欄を書かない図は `ring` と同じ。
+
+| 値 | 形 | 向くもの |
+|---|---|---|
+| `ring` (既定) | 輪を扇に切り分け、外へ引き出し線を伸ばして名札を置く | 内訳の割合をひとめで見せる |
+| `arcs` | 系列ごとに 1 本の弧を置き、割合を角度ではなく弧の長さで読む | 合計が 100 にならない図 (系列ごとの達成率など) |
+| `table` | 輪を左に寄せ、右に 名前 / 割合 / 実数 の 3 列の表を組む | 割合と実数の両方を読ませたい図 |
+
+```ts
+.node("share", { lane: "l", stack: 0, kind: "chart-pie", chartPieForm: "arcs", chartData: [...] })
+```
+
+型の外の値を書いた図は `ring` として描く。 `previous` が効くのは `ring` だけで、
+他の形では内側の輪を描かない。
+
 ## CdlDiagramView props
 
 ```ts

package/dist/index.cjs

@@ -15920,10 +15920,10 @@ function countEdgeCrossings(edges, warnAt = 3) {
           if (isNearAny(p, a.ends, SAME_POINT_TOL) || isNearAny(p, b.ends, SAME_POINT_TOL))
             continue;
           if (\u5171\u6709\u5074.length > 0) {
-            const \u67A0 = Math.min(MAX_CHECKS - checks, MAX_CHECKS_PER_PAIR - pairChecks);
-            const \u4E88\u7B97 = { \u6B8B\u308A: Math.max(0, \u67A0) };
+            const \u67A02 = Math.min(MAX_CHECKS - checks, MAX_CHECKS_PER_PAIR - pairChecks);
+            const \u4E88\u7B97 = { \u6B8B\u308A: Math.max(0, \u67A02) };
             const \u5224\u5B9A = mergesTowardShared(a.flat, b.flat, p, \u5171\u6709\u5074, MERGE_TOL, \u4E88\u7B97);
-            const \u4F7F\u3063\u305F = Math.max(0, \u67A0) - \u4E88\u7B97.\u6B8B\u308A;
+            const \u4F7F\u3063\u305F = Math.max(0, \u67A02) - \u4E88\u7B97.\u6B8B\u308A;
             checks += \u4F7F\u3063\u305F;
             pairChecks += \u4F7F\u3063\u305F;
             if (\u5224\u5B9A === "merged") continue;
@@ -24343,52 +24343,52 @@ function ChartPieNode({
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
+  const \u524D\u3042\u308A = data.some((d) => d.previous !== void 0);
+  const \u4ECA\u306E\u5024 = data.map((d) => Math.max(0, d.value));
+  const \u524D\u306E\u5024 = data.map((d) => Math.max(0, d.previous ?? 0));
+  const \u4ECA\u306E\u5408\u8A08 = \u4ECA\u306E\u5024.reduce((acc, value) => acc + value, 0);
+  const \u524D\u306E\u5408\u8A08 = \u524D\u306E\u5024.reduce((acc, value) => acc + value, 0);
+  const \u4ECA\u306E\u5272\u5408 = \u524D\u3042\u308A ? \u4ECA\u306E\u5024.map((value) => \u4ECA\u306E\u5408\u8A08 > 0 ? value / \u4ECA\u306E\u5408\u8A08 : 0) : data.map((d) => d.value / total);
+  const \u524D\u306E\u5272\u5408 = \u524D\u306E\u5024.map((value) => \u524D\u306E\u5408\u8A08 > 0 ? value / \u524D\u306E\u5408\u8A08 : 0);
+  const \u5F62 = node.chartPieForm === "arcs" || node.chartPieForm === "table" ? node.chartPieForm : "ring";
   const PAD_TOP2 = 20;
   const PAD_BOTTOM2 = 20;
   const PAD_SIDE = 20;
   const chartAreaH = node.h - PAD_TOP2 - PAD_BOTTOM2;
-  const \u540D\u672D\u306E\u7D1A = 14;
-  const \u6570\u5024\u306E\u7D1A = 13;
+  const \u5272\u5408\u306E\u7D1A = 19;
+  const \u540D\u524D\u306E\u7D1A = 12;
   const \u5F15\u304D\u51FA\u3057 = 18;
   const \u5B57\u307E\u3067\u306E\u9593 = 26;
   const \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057 = 20;
-  const \u5272\u5408\u306E\u6587\u5B57 = data.map((d) => \u5272\u5408\u8868\u8A18(d.value / total));
-  const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u306E\u6587\u5B57[i]}`);
+  const \u5272\u5408\u306E\u6587\u5B57 = \u4ECA\u306E\u5272\u5408.map(\u5272\u5408\u8868\u8A18);
+  const \u540D\u524D\u306E\u6587\u5B57 = data.map((d, i) => {
+    const \u540D = d.label ?? "";
+    if (\u524D\u3042\u308A) return `${\u540D}  ${\u5B9F\u5024\u8868\u8A18(\u524D\u306E\u5024[i])} \u2192 ${\u5B9F\u5024\u8868\u8A18(\u4ECA\u306E\u5024[i])}`;
+    return `${\u5B9F\u5024\u8868\u8A18(d.value)}%` === \u5272\u5408\u306E\u6587\u5B57[i] ? \u540D : `${\u540D}  ${\u5B9F\u5024\u8868\u8A18(d.value)}`;
+  });
+  if (\u5F62 !== "ring") {
+    const \u5171\u901A = { node, active, data, \u5272\u5408: \u4ECA\u306E\u5272\u5408, x0, y0, drawing, progress, instanceId };
+    return \u5F62 === "arcs" ? \u5F27\u306E\u5F62(\u5171\u901A) : \u8868\u306E\u5F62(\u5171\u901A);
+  }
   const \u540D\u672D\u5E45 = Math.max(
     0,
     ...data.map(
-      (d, i) => Math.max(textWidth(d.label ?? "", \u540D\u672D\u306E\u7D1A), textWidth(\u6570\u5024\u306E\u6587\u5B57[i] ?? "", \u6570\u5024\u306E\u7D1A))
+      (_d, i) => Math.max(
+        textWidth(\u5272\u5408\u306E\u6587\u5B57[i] ?? "", \u5272\u5408\u306E\u7D1A),
+        textWidth(\u540D\u524D\u306E\u6587\u5B57[i] ?? "", \u540D\u524D\u306E\u7D1A)
+      )
     )
   );
   const \u7E26\u304B\u3089 = chartAreaH / 2 - \u5F15\u304D\u51FA\u3057 - \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057;
   const \u6A2A\u304B\u3089 = (node.w - PAD_SIDE * 2) / 2 - \u5F15\u304D\u51FA\u3057 - \u5B57\u307E\u3067\u306E\u9593 - \u540D\u672D\u5E45;
   const radius = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
-  const \u5185\u534A\u5F84 = radius * 0.58;
+  const \u5916\u306E\u5185\u534A\u5F84 = radius * (\u524D\u3042\u308A ? 0.75 : 0.58);
+  const \u524D\u306E\u5916\u534A\u5F84 = radius * 0.67;
+  const \u524D\u306E\u5185\u534A\u5F84 = radius * 0.42;
   const cx = node.w / 2;
   const cy = PAD_TOP2 + 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 x3 = cx + \u5185\u534A\u5F84 * Math.cos(a1);
-    const y3 = cy + \u5185\u534A\u5F84 * Math.sin(a1);
-    const x4 = cx + \u5185\u534A\u5F84 * Math.cos(a0);
-    const y4 = cy + \u5185\u534A\u5F84 * Math.sin(a0);
-    const large = angle > Math.PI ? 1 : 0;
-    const path = `M ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 ${large} 0 ${x4} ${y4} Z`;
-    const \u4E2D\u592E\u89D2 = (a0 + a1) / 2;
-    return { d, frac, path, startFrac, \u4E2D\u592E\u89D2 };
-  });
+  const \u524D\u306Eslices = \u524D\u3042\u308A ? \u8F2A\u3092\u7D44\u3080(data, cx, cy, \u524D\u306E\u5916\u534A\u5F84, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5272\u5408) : [];
+  const slices = \u8F2A\u3092\u7D44\u3080(data, cx, cy, radius, \u5916\u306E\u5185\u534A\u5F84, \u4ECA\u306E\u5272\u5408);
   const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
   const \u5F71id = `cdl-pie-shadow-${instanceId}`;
@@ -24412,19 +24412,34 @@ function ChartPieNode({
       drawing && /* @__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("filter", { id: \u5F71id, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsxRuntime.jsx("feDropShadow", { dx: "0", dy: "6", stdDeviation: "10", floodColor: "#0b1220", floodOpacity: "0.16" }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, filter: `url(#${\u5F71id})`, children: slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        "data-cdl-role": "chart-pie-slice",
-        "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
-        d: s.path,
-        fill: sliceColor(s.d.tone, idx),
-        stroke: "var(--cdl-node-fill, #ffffff)",
-        strokeWidth: 3,
-        strokeLinejoin: "round"
-      },
-      `slice-${idx}`
-    )) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, filter: `url(#${\u5F71id})`, children: [
+      \u524D\u306Eslices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          "data-cdl-role": "chart-pie-slice-previous",
+          "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+          d: s.path,
+          fill: sliceColor(s.d.tone, idx),
+          stroke: "var(--cdl-node-fill, #ffffff)",
+          strokeWidth: 3,
+          strokeLinejoin: "round"
+        },
+        `slice-previous-${idx}`
+      )),
+      slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          "data-cdl-role": "chart-pie-slice",
+          "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+          d: s.path,
+          fill: sliceColor(s.d.tone, idx),
+          stroke: "var(--cdl-node-fill, #ffffff)",
+          strokeWidth: 3,
+          strokeLinejoin: "round"
+        },
+        `slice-${idx}`
+      ))
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -24434,7 +24449,7 @@ function ChartPieNode({
         fontSize: Math.round(radius * 0.26),
         fontWeight: 600,
         fill: "var(--cdl-text, #1a1f2a)",
-        children: \u5B9F\u5024\u8868\u8A18(Math.round(total))
+        children: \u5B9F\u5024\u8868\u8A18(Math.round(\u524D\u3042\u308A ? \u4ECA\u306E\u5408\u8A08 : total))
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -24471,12 +24486,12 @@ function ChartPieNode({
           "text",
           {
             x: \u5B57x,
-            y: \u6298\u308Cy - 3,
+            y: \u6298\u308Cy - 1,
             textAnchor: \u53F3 ? "start" : "end",
-            fontSize: \u540D\u672D\u306E\u7D1A,
+            fontSize: \u5272\u5408\u306E\u7D1A,
             fontWeight: 600,
             fill: "var(--cdl-text, #1a1f2a)",
-            children: s.d.label
+            children: \u5272\u5408\u306E\u6587\u5B57[idx]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -24485,15 +24500,275 @@ function ChartPieNode({
             x: \u5B57x,
             y: \u6298\u308Cy + 15,
             textAnchor: \u53F3 ? "start" : "end",
-            fontSize: \u6570\u5024\u306E\u7D1A,
+            fontSize: \u540D\u524D\u306E\u7D1A,
             fill: "var(--cdl-text-dim, #5a6270)",
-            children: \u6570\u5024\u306E\u6587\u5B57[idx]
+            children: \u540D\u524D\u306E\u6587\u5B57[idx]
           }
         )
       ] }, `callout-${idx}`);
     })
   ] });
 }
+function \u8F2A\u3092\u7D44\u3080(data, cx, cy, \u5916\u534A\u5F84, \u5185\u534A\u5F84, \u5272\u5408) {
+  let cumAngle = -Math.PI / 2;
+  let cumFrac = 0;
+  return data.map((d, idx) => {
+    const frac = \u5272\u5408[idx] ?? 0;
+    const angle = frac * Math.PI * 2;
+    const a0 = cumAngle;
+    const a1 = cumAngle + angle;
+    cumAngle = a1;
+    const startFrac = cumFrac;
+    cumFrac += frac;
+    const x1 = cx + \u5916\u534A\u5F84 * Math.cos(a0);
+    const y1 = cy + \u5916\u534A\u5F84 * Math.sin(a0);
+    const x2 = cx + \u5916\u534A\u5F84 * Math.cos(a1);
+    const y2 = cy + \u5916\u534A\u5F84 * Math.sin(a1);
+    const x3 = cx + \u5185\u534A\u5F84 * Math.cos(a1);
+    const y3 = cy + \u5185\u534A\u5F84 * Math.sin(a1);
+    const x4 = cx + \u5185\u534A\u5F84 * Math.cos(a0);
+    const y4 = cy + \u5185\u534A\u5F84 * Math.sin(a0);
+    const large = angle > Math.PI ? 1 : 0;
+    const path = `M ${x1} ${y1} A ${\u5916\u534A\u5F84} ${\u5916\u534A\u5F84} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 ${large} 0 ${x4} ${y4} Z`;
+    return { d, frac, path, startFrac, \u4E2D\u592E\u89D2: (a0 + a1) / 2 };
+  });
+}
+function \u67A0(node, active) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      "data-cdl-role": "node-body",
+      x: 0,
+      y: 0,
+      width: node.w,
+      height: node.h,
+      rx: 16,
+      fill: "var(--cdl-node-fill, #ffffff)",
+      stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
+      strokeWidth: active ? 3 : 1.25
+    }
+  );
+}
+function \u5F27\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing, progress }) {
+  const PAD = 20;
+  const \u540D\u524D\u306E\u7D1A = 14;
+  const \u5272\u5408\u306E\u7D1A = 24;
+  const \u5370\u304B\u3089\u540D\u524D\u307E\u30672 = 18;
+  const \u540D\u524D\u304B\u3089\u5272\u5408\u307E\u3067 = 24;
+  const \u5272\u5408\u306E\u6587\u5B57 = \u5272\u5408.map(\u5272\u5408\u8868\u8A18);
+  const \u4E00\u89A7\u5E45 = 10 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672 + Math.max(0, ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A))) + \u540D\u524D\u304B\u3089\u5272\u5408\u307E\u3067 + Math.max(0, ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A)));
+  const \u7E26\u304B\u3089 = (node.h - PAD * 2) / 2;
+  const \u6A2A\u304B\u3089 = (node.w - PAD * 2 - \u4E00\u89A7\u5E45 - 28) / 2;
+  const R = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
+  const cx = PAD + R;
+  const cy = node.h / 2;
+  const \u7A74 = R * 0.34;
+  const \u523B\u307F = (R - \u7A74) / Math.max(1, data.length);
+  const \u592A\u3055 = Math.max(3, \u523B\u307F * 0.6);
+  const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u4E00\u89A7\u5DE6 = node.w - PAD - \u4E00\u89A7\u5E45;
+  const \u884C\u306E\u9593 = Math.min(56, (node.h - PAD * 2) / Math.max(1, data.length));
+  const \u4E00\u89A7\u4E0A = node.h / 2 - \u884C\u306E\u9593 * (data.length - 1) / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
+    \u67A0(node, active),
+    data.map((d, idx) => {
+      const r = R - \u592A\u3055 / 2 - idx * \u523B\u307F;
+      if (r <= \u592A\u3055 / 2) return null;
+      const \u53D6\u308A\u5206 = (\u5272\u5408[idx] ?? 0) * (drawing ? \u958B\u304D : 1);
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            "data-cdl-role": "chart-pie-arc-track",
+            cx,
+            cy,
+            r,
+            fill: "none",
+            stroke: "var(--cdl-divider, #d4d4d8)",
+            strokeWidth: \u592A\u3055
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            "data-cdl-role": "chart-pie-arc",
+            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+            d: \u5F27\u306E\u9053(cx, cy, r, \u53D6\u308A\u5206),
+            fill: "none",
+            stroke: sliceColor(d.tone, idx),
+            strokeWidth: \u592A\u3055,
+            strokeLinecap: "round"
+          }
+        )
+      ] }, `arc-${idx}`);
+    }),
+    data.map((d, idx) => {
+      const y = \u4E00\u89A7\u4E0A + \u884C\u306E\u9593 * idx;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: \u4E00\u89A7\u5DE6,
+            y: y - 9,
+            width: 10,
+            height: 10,
+            rx: 2,
+            fill: sliceColor(d.tone, idx)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: \u4E00\u89A7\u5DE6 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672,
+            y,
+            fontSize: \u540D\u524D\u306E\u7D1A,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: d.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: node.w - PAD,
+            y: y + 4,
+            textAnchor: "end",
+            fontSize: \u5272\u5408\u306E\u7D1A,
+            fontWeight: 600,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: \u5272\u5408\u306E\u6587\u5B57[idx]
+          }
+        )
+      ] }, `row-${idx}`);
+    })
+  ] });
+}
+function \u8868\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing, progress, instanceId }) {
+  const PAD = 20;
+  const \u898B\u51FA\u3057\u306E\u7D1A = 11;
+  const \u540D\u524D\u306E\u7D1A = 15;
+  const \u5272\u5408\u306E\u7D1A = 17;
+  const \u5B9F\u6570\u306E\u7D1A = 15;
+  const \u5370\u304B\u3089\u540D\u524D\u307E\u30672 = 18;
+  const \u5272\u5408\u306E\u6587\u5B57 = \u5272\u5408.map(\u5272\u5408\u8868\u8A18);
+  const \u5B9F\u6570\u306E\u6587\u5B57 = data.map((d) => \u5B9F\u5024\u8868\u8A18(d.value));
+  const \u540D\u524D\u5E45 = Math.max(0, ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A)));
+  const \u5272\u5408\u5E45 = Math.max(textWidth("\u5272\u5408", \u898B\u51FA\u3057\u306E\u7D1A), ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A)));
+  const \u5B9F\u6570\u5E45 = Math.max(textWidth("\u5024", \u898B\u51FA\u3057\u306E\u7D1A), ...\u5B9F\u6570\u306E\u6587\u5B57.map((t) => textWidth(t, \u5B9F\u6570\u306E\u7D1A)));
+  const \u8868\u5E45 = 10 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672 + \u540D\u524D\u5E45 + 28 + \u5272\u5408\u5E45 + 24 + \u5B9F\u6570\u5E45;
+  const \u7E26\u304B\u3089 = (node.h - PAD * 2) / 2;
+  const \u6A2A\u304B\u3089 = (node.w - PAD * 2 - \u8868\u5E45 - 28) / 2;
+  const R = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
+  const \u5185\u534A\u5F84 = R * 0.58;
+  const cx = PAD + R;
+  const cy = node.h / 2;
+  const \u8868\u5DE6 = node.w - PAD - \u8868\u5E45;
+  const \u53F3\u7AEF = node.w - PAD;
+  const \u5272\u5408\u53F3 = \u53F3\u7AEF - \u5B9F\u6570\u5E45 - 24;
+  const \u884C\u306E\u9593 = Math.min(52, (node.h - PAD * 2 - 40) / Math.max(1, data.length));
+  const \u898B\u51FA\u3057\u306Ey = node.h / 2 - \u884C\u306E\u9593 * data.length / 2 - 14;
+  const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
+  const \u958B\u304D\u59CB\u3081\u305F = (\u59CB\u307E\u308A) => !drawing || \u958B\u304D > \u59CB\u307E\u308A;
+  let \u89D2 = -Math.PI / 2;
+  let \u7D2F\u8A08 = 0;
+  const \u6247\u305F\u3061 = data.map((d, idx) => {
+    const frac = \u5272\u5408[idx] ?? 0;
+    const a0 = \u89D2;
+    const a1 = \u89D2 + frac * Math.PI * 2;
+    \u89D2 = a1;
+    const \u59CB\u307E\u308A = \u7D2F\u8A08;
+    \u7D2F\u8A08 += frac;
+    return { d, idx, \u59CB\u307E\u308A, path: \u8F2A\u306E\u9053(cx, cy, R, \u5185\u534A\u5F84, a0, a1) };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
+    \u67A0(node, active),
+    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, R + 2, \u958B\u304D) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, children: \u6247\u305F\u3061.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        "data-cdl-role": "chart-pie-slice",
+        "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+        d: s.path,
+        fill: sliceColor(s.d.tone, s.idx),
+        stroke: "var(--cdl-node-fill, #ffffff)",
+        strokeWidth: 3,
+        strokeLinejoin: "round"
+      },
+      `slice-${s.idx}`
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy - 2,
+        textAnchor: "middle",
+        fontSize: Math.round(R * 0.26),
+        fontWeight: 600,
+        fill: "var(--cdl-text, #1a1f2a)",
+        children: \u5B9F\u5024\u8868\u8A18(Math.round(data.reduce((acc, d) => acc + d.value, 0)))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + Math.round(R * 0.2),
+        textAnchor: "middle",
+        fontSize: Math.round(R * 0.12),
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: "\u5408\u8A08"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u8868\u5DE6, y: \u898B\u51FA\u3057\u306Ey, fontSize: \u898B\u51FA\u3057\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: "\u5185\u8A33" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u5272\u5408\u53F3, y: \u898B\u51FA\u3057\u306Ey, textAnchor: "end", fontSize: \u898B\u51FA\u3057\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: "\u5272\u5408" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u53F3\u7AEF, y: \u898B\u51FA\u3057\u306Ey, textAnchor: "end", fontSize: \u898B\u51FA\u3057\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: "\u5024" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        "data-cdl-role": "chart-pie-table-rule",
+        x1: \u8868\u5DE6,
+        y1: \u898B\u51FA\u3057\u306Ey + 10,
+        x2: \u53F3\u7AEF,
+        y2: \u898B\u51FA\u3057\u306Ey + 10,
+        stroke: "var(--cdl-text, #1a1f2a)",
+        strokeWidth: 1.2
+      }
+    ),
+    \u6247\u305F\u3061.map((s) => {
+      if (!\u958B\u304D\u59CB\u3081\u305F(s.\u59CB\u307E\u308A)) return null;
+      const y = \u898B\u51FA\u3057\u306Ey + 40 + \u884C\u306E\u9593 * s.idx;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: \u8868\u5DE6, y: y - 10, width: 10, height: 10, rx: 2, fill: sliceColor(s.d.tone, s.idx) }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u8868\u5DE6 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672, y, fontSize: \u540D\u524D\u306E\u7D1A, fill: "var(--cdl-text, #1a1f2a)", children: s.d.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u5272\u5408\u53F3, y, textAnchor: "end", fontSize: \u5272\u5408\u306E\u7D1A, fontWeight: 600, fill: "var(--cdl-text, #1a1f2a)", children: \u5272\u5408\u306E\u6587\u5B57[s.idx] }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u53F3\u7AEF, y, textAnchor: "end", fontSize: \u5B9F\u6570\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u5B9F\u6570\u306E\u6587\u5B57[s.idx] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            "data-cdl-role": "chart-pie-table-rule",
+            x1: \u8868\u5DE6,
+            y1: y + 16,
+            x2: \u53F3\u7AEF,
+            y2: y + 16,
+            stroke: "var(--cdl-divider, #d4d4d8)",
+            strokeWidth: 1
+          }
+        )
+      ] }, `row-${s.idx}`);
+    })
+  ] });
+}
+function \u5F27\u306E\u9053(cx, cy, r, \u53D6\u308A\u5206) {
+  const \u5B9F\u52B9 = Math.max(0, Math.min(0.9999, \u53D6\u308A\u5206));
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + \u5B9F\u52B9 * Math.PI * 2;
+  const large = \u5B9F\u52B9 > 0.5 ? 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)}`;
+}
+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 });
@@ -24695,8 +24970,8 @@ function ChartRadialNode({
       frac,
       \u4E2D\u5FC3\u534A\u5F84,
       // 軌道は全周。 1 周ちょうどは弧で表せないので、 わずかに欠かして描く
-      \u8ECC\u9053: \u5F27\u306E\u9053(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
-      \u53D6\u308A\u5206: frac <= 0 ? null : \u5F27\u306E\u9053(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, Math.min(frac, 0.9999))
+      \u8ECC\u9053: \u5F27\u306E\u90532(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
+      \u53D6\u308A\u5206: frac <= 0 ? null : \u5F27\u306E\u90532(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, Math.min(frac, 0.9999))
     };
   });
   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;
@@ -24767,7 +25042,7 @@ function ChartRadialNode({
   ] });
 }
 var \u5370\u306E\u5E45 = 18;
-function \u5F27\u306E\u9053(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
+function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
   const \u5916 = \u4E2D\u5FC3\u534A\u5F84 + \u5E45 / 2;
   const \u5185 = Math.max(0.5, \u4E2D\u5FC3\u534A\u5F84 - \u5E45 / 2);
   const a0 = -Math.PI / 2;
@@ -24813,12 +25088,12 @@ function ChartStatNode({
       }
     ),
     data.map((d, idx) => {
-      const \u67A0 = \u533A\u753B.\u67A0(idx);
+      const \u67A02 = \u533A\u753B.\u67A0(idx);
       const frac = total > 0 ? d.value / total : 0;
       const \u8272 = \u5370\u306E\u8272(d.tone, idx);
       const \u6570\u5024 = \u5B9F\u5024\u8868\u8A184(d.value);
-      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A0.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
-      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A0.x} ${\u67A0.y})`, children: [
+      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A02.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
         idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           "line",
           {
@@ -24826,7 +25101,7 @@ function ChartStatNode({
             x1: 0,
             y1: \u533A\u753B.\u4F59\u767D,
             x2: 0,
-            y2: \u67A0.h - \u533A\u753B.\u4F59\u767D,
+            y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
             stroke: "var(--cdl-divider, #d4d4d8)",
             strokeWidth: 1
           }
@@ -24835,7 +25110,7 @@ function ChartStatNode({
           "text",
           {
             "data-cdl-role": "chart-stat-label",
-            x: \u67A0.w / 2,
+            x: \u67A02.w / 2,
             y: \u533A\u753B.\u540D\u524D\u306Ey,
             fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
             fontWeight: 700,
@@ -24849,7 +25124,7 @@ function ChartStatNode({
           {
             "data-cdl-role": "chart-stat-value",
             "data-cdl-unresolved": d.unresolved ? "true" : void 0,
-            x: \u67A0.w / 2,
+            x: \u67A02.w / 2,
             y: \u533A\u753B.\u6570\u5024\u306Ey,
             fontSize: \u6570\u5024\u306E\u7D1A,
             fontWeight: 700,
@@ -24862,7 +25137,7 @@ function ChartStatNode({
           "circle",
           {
             "data-cdl-role": "chart-stat-track",
-            cx: \u67A0.w / 2,
+            cx: \u67A02.w / 2,
             cy: \u533A\u753B.\u5F27\u306Ey,
             r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
             fill: "none",
@@ -24875,7 +25150,7 @@ function ChartStatNode({
           "path",
           {
             "data-cdl-role": "chart-stat-arc",
-            d: \u5F27\u306E\u90532(\u67A0.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
+            d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
             fill: "none",
             stroke: \u8272,
             strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
@@ -24886,7 +25161,7 @@ function ChartStatNode({
           "text",
           {
             "data-cdl-role": "chart-stat-share",
-            x: \u67A0.w / 2,
+            x: \u67A02.w / 2,
             y: \u533A\u753B.\u5272\u5408\u306Ey,
             fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
             textAnchor: "middle",
@@ -24931,7 +25206,7 @@ function \u53CE\u3081\u308B\u7D1A(\u5B57, \u4F7F\u3048\u308B\u5E452, \u521D\u671
   while (\u7D1A > \u4E0B\u9650 && textWidth(\u5B57, \u7D1A) > \u4F7F\u3048\u308B\u5E452) \u7D1A -= 1;
   return \u7D1A;
 }
-function \u5F27\u306E\u90532(cx, cy, r, \u5272\u5408) {
+function \u5F27\u306E\u90533(cx, cy, r, \u5272\u5408) {
   const a0 = -Math.PI / 2;
   const a1 = a0 + \u5272\u5408 * Math.PI * 2;
   const large = \u5272\u5408 > 0.5 ? 1 : 0;