@cardenelabs/cdl 0.31.1 → 0.33.0

package/src/kinds/chart-pie.tsx

@@ -1,7 +1,7 @@
 import { useId, type JSX } from "react";
-import type { LaidNode, Tone } from "../types";
+import type { ChartPieForm, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
-import { resolveChartData } from "../render/payload-binding";
+import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
 import { textWidth } from "./text-width";
 
@@ -35,6 +35,13 @@ import { textWidth } from "./text-width";
  *
  * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび扇の角度が追随する。
  *
+ * ## 前の時点を内側の輪に重ねる (cdl#679)
+ *
+ * **1 件でも `previous` を持てば輪が 2 つになる**。 持たない件は前の時点で 0 として扱う =
+ * 件を落とすと内外で色の並びが対応しなくなる。
+ *
+ * 並びは 前 → 今、すなわち 内 → 外。 3 時点以上は持たない。
+ *
  * phase の `draw` にこの node の id が載っている間は、 円が 12 時から時計回りに開く (cdl#516)。
  * 開き方は扇形の切り抜き (`clipPath`) で、 各扇の `d` は **進みに関わらず実値のまま**。
  * 名札はその扇が開き始めた時に出る。
@@ -61,6 +68,24 @@ export 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 前あり = data.some((d) => d.previous !== undefined);
+  const 今の値 = data.map((d) => Math.max(0, d.value));
+  const 前の値 = data.map((d) => Math.max(0, d.previous ?? 0));
+  const 今の合計 = 今の値.reduce((acc, value) => acc + value, 0);
+  const 前の合計 = 前の値.reduce((acc, value) => acc + value, 0);
+  // `previous` を書かない図は、既存の扇の `d` を 1 byte も変えない。
+  const 今の割合 = 前あり
+    ? 今の値.map((value) => (今の合計 > 0 ? value / 今の合計 : 0))
+    : data.map((d) => d.value / total);
+  const 前の割合 = 前の値.map((value) => (前の合計 > 0 ? value / 前の合計 : 0));
+
+  /**
+   * 見せ方 (cdl#684)。 **型の外の値は `ring` に落とす** = 見せ方が決まらないより、
+   * 既定の形が出る方がよい (`rules` の「判定できなかったことを値に潰さない」 は判定の話で、
+   * ここは描くか描かないかなので安全側 = 描ける形へ倒す)。
+   */
+  const 形: ChartPieForm =
+    node.chartPieForm === "arcs" || node.chartPieForm === "table" ? node.chartPieForm : "ring";
 
   const PAD_TOP = 20;
   const PAD_BOTTOM = 20;
@@ -68,8 +93,16 @@ export function ChartPieNode({
   const PAD_SIDE = 20;
   const chartAreaH = node.h - PAD_TOP - PAD_BOTTOM;
 
-  const 名札の級 = 14;
-  const 数値の級 = 13;
+  /**
+   * 名札の 2 行の級 (cdl#682)。
+   *
+   * **割合を主役にする**。 扇の大きさは値で決まるのに、以前は名前が級 14 の太字、
+   * 値が級 13 の薄い色で、字の重みと図の重みが逆を向いていた。
+   *
+   * 名前は縁の色の点で扇と既に結ばれているので、従に落として困らない。
+   */
+  const 割合の級 = 19;
+  const 名前の級 = 12;
 
   /** 円の縁から引き出し線が折れるまで */
   const 引き出し = 18;
@@ -78,24 +111,45 @@ export function ChartPieNode({
   /**
    * 名札が折れ点から縦に張り出す量。
    *
-   * 名前は `折れy - 3` の位置に級 14 で置くので上へ約 17、数値は `折れy + 15` に級 13 で
-   * 置くので下へ約 19 伸びる。 大きい方を採る = 上下どちらに出ても収まる。
+   * 割合は `折れy - 1` の位置に級 19 で置くので上へ約 15、名前は `折れy + 15` に級 12 で
+   * 置くので下へ約 18 伸びる。 大きい方を採る = 上下どちらに出ても収まる。
    */
   const 名札の縦の張り出し = 20;
 
-  const 割合の文字 = data.map((d) => 割合表記(d.value / total));
-  const 数値の文字 = data.map((d, i) => `${実値表記(d.value)}  ${割合の文字[i]}`);
+  const 割合の文字 = 今の割合.map(割合表記);
+  /**
+   * 名札の 2 行目 (cdl#682)。 名前を置き、**割合と違う数になる時だけ** 実数を添える。
+   *
+   * 合計が 100 の図では実値と割合が同じ数になる。 以前は `30  30%` と 2 度出ており、
+   * SVG は続く空白を 1 つに畳むので `30 30%` と描かれて、どこまでが実数か読めなかった。
+   *
+   * 判定は **表記どうしの比較** で行う。 合計を別に数えると、丸めた後で一致する形
+   * (`44.96` が `45%` になる等) を取りこぼす。
+   */
+  const 名前の文字 = data.map((d, i) => {
+    const 名 = d.label ?? "";
+    if (前あり) return `${名}  ${実値表記(前の値[i]!)} → ${実値表記(今の値[i]!)}`;
+    return `${実値表記(d.value)}%` === 割合の文字[i] ? 名 : `${名}  ${実値表記(d.value)}`;
+  });
+
+  if (形 !== "ring") {
+    const 共通 = { node, active, data, 割合: 今の割合, x0, y0, drawing, progress, instanceId };
+    return 形 === "arcs" ? 弧の形(共通) : 表の形(共通);
+  }
 
   /**
    * 名札 1 つが横に使う幅。 **中身から決める** = 割り当てを固定すると使わない分が死ぬ
    * (cdl#542 で凡例について踏んだのと同じ)。
    *
-   * 名前の行と数値の行のうち長い方を採る。 短い方に合わせると長い行が枠から出る。
+   * 割合の行と名前の行のうち長い方を採る。 短い方に合わせると長い行が枠から出る。
    */
   const 名札幅 = Math.max(
     0,
-    ...data.map((d, i) =>
-      Math.max(textWidth(d.label ?? "", 名札の級), textWidth(数値の文字[i] ?? "", 数値の級)),
+    ...data.map((_d, i) =>
+      Math.max(
+        textWidth(割合の文字[i] ?? "", 割合の級),
+        textWidth(名前の文字[i] ?? "", 名前の級),
+      ),
     ),
   );
 
@@ -115,42 +169,17 @@ export function ChartPieNode({
   const 縦から = chartAreaH / 2 - 引き出し - 名札の縦の張り出し;
   const 横から = (node.w - PAD_SIDE * 2) / 2 - 引き出し - 字までの間 - 名札幅;
   const radius = Math.max(24, Math.min(縦から, 横から));
-  /** 中央を抜く半径。 合計を置ける広さを残しつつ、輪が細くなりすぎない比 */
-  const 内半径 = radius * 0.58;
+  /** 中央を抜く半径。 2 輪では前の時点との間にも余白を残す */
+  const 外の内半径 = radius * (前あり ? 0.75 : 0.58);
+  const 前の外半径 = radius * 0.67;
+  const 前の内半径 = radius * 0.42;
 
   /** 円は枠の中央に置く。 名札が左右へ均等に出る */
   const cx = node.w / 2;
   const cy = PAD_TOP + chartAreaH / 2;
 
-  let cumAngle = -Math.PI / 2;
-  /** その扇が始まるまでの取り分の累計。 開き始めたかの判定に使う (cdl#516) */
-  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 + 内半径 * Math.cos(a1);
-    const y3 = cy + 内半径 * Math.sin(a1);
-    const x4 = cx + 内半径 * Math.cos(a0);
-    const y4 = cy + 内半径 * 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 ${内半径} ${内半径} 0 ${large} 0 ${x4} ${y4} Z`;
-    /** 引き出し線の起点。 扇の真ん中の向き */
-    const 中央角 = (a0 + a1) / 2;
-    return { d, frac, path, startFrac, 中央角 };
-  });
+  const 前のslices = 前あり ? 輪を組む(data, cx, cy, 前の外半径, 前の内半径, 前の割合) : [];
+  const slices = 輪を組む(data, cx, cy, radius, 外の内半径, 今の割合);
 
   /** 円がどこまで開いたか (0..1、 cdl#516)。 畳み方は `draw-progress.ts` が持つ */
   const 開き = 進みを畳む(drawing, progress);
@@ -190,6 +219,18 @@ export function ChartPieNode({
         描く指定が無い図には包みも `clip-path` も足さない = 既存の図の DOM を変えない
       */}
       <g {...(drawing ? { clipPath: `url(#${切り抜きid})` } : {})} filter={`url(#${影id})`}>
+        {前のslices.map((s, idx) => (
+          <path
+            key={`slice-previous-${idx}`}
+            data-cdl-role="chart-pie-slice-previous"
+            data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
+            d={s.path}
+            fill={sliceColor(s.d.tone, idx)}
+            stroke="var(--cdl-node-fill, #ffffff)"
+            strokeWidth={3}
+            strokeLinejoin="round"
+          />
+        ))}
         {slices.map((s, idx) => (
           <path
             key={`slice-${idx}`}
@@ -220,7 +261,7 @@ export function ChartPieNode({
         fontWeight={600}
         fill="var(--cdl-text, #1a1f2a)"
       >
-        {実値表記(Math.round(total))}
+        {実値表記(Math.round(前あり ? 今の合計 : total))}
       </text>
       <text
         x={cx}
@@ -256,25 +297,365 @@ export function ChartPieNode({
             />
             {/* 起点の点。 どの扇から伸びた線かを色で示す */}
             <circle cx={縁x} cy={縁y} r={3} fill={sliceColor(s.d.tone, idx)} />
+            {/* 1 行目は割合。 読ませたい数を大きく置く (cdl#682) */}
             <text
               x={字x}
-              y={折れy - 3}
+              y={折れy - 1}
               textAnchor={右 ? "start" : "end"}
-              fontSize={名札の級}
+              fontSize={割合の級}
               fontWeight={600}
               fill="var(--cdl-text, #1a1f2a)"
             >
-              {s.d.label}
+              {割合の文字[idx]}
             </text>
             <text
               x={字x}
               y={折れy + 15}
               textAnchor={右 ? "start" : "end"}
-              fontSize={数値の級}
+              fontSize={名前の級}
               fill="var(--cdl-text-dim, #5a6270)"
             >
-              {数値の文字[idx]}
+              {名前の文字[idx]}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+type PieSlice = {
+  d: ResolvedChartDatum;
+  frac: number;
+  path: string;
+  startFrac: number;
+  中央角: number;
+};
+
+/** 半径と取り分から、12 時始まり・時計回りの 1 輪を組む。 */
+function 輪を組む(
+  data: readonly ResolvedChartDatum[],
+  cx: number,
+  cy: number,
+  外半径: number,
+  内半径: number,
+  割合: readonly number[],
+): PieSlice[] {
+  let cumAngle = -Math.PI / 2;
+  /** その扇が始まるまでの取り分の累計。 開き始めたかの判定に使う (cdl#516) */
+  let cumFrac = 0;
+  return data.map((d, idx) => {
+    const frac = 割合[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 + 外半径 * Math.cos(a0);
+    const y1 = cy + 外半径 * Math.sin(a0);
+    const x2 = cx + 外半径 * Math.cos(a1);
+    const y2 = cy + 外半径 * Math.sin(a1);
+    const x3 = cx + 内半径 * Math.cos(a1);
+    const y3 = cy + 内半径 * Math.sin(a1);
+    const x4 = cx + 内半径 * Math.cos(a0);
+    const y4 = cy + 内半径 * Math.sin(a0);
+    const large = angle > Math.PI ? 1 : 0;
+    // 外周を時計回りに描き、内周を逆向きに戻って閉じる = 中央が抜けた輪になる
+    const path =
+      `M ${x1} ${y1} A ${外半径} ${外半径} 0 ${large} 1 ${x2} ${y2} ` +
+      `L ${x3} ${y3} A ${内半径} ${内半径} 0 ${large} 0 ${x4} ${y4} Z`;
+    return { d, frac, path, startFrac, 中央角: (a0 + a1) / 2 };
+  });
+}
+
+/** `ring` 以外の見せ方が受け取るもの */
+type 形の引数 = {
+  node: LaidNode;
+  active: boolean;
+  data: ResolvedChartDatum[];
+  /** その系列の取り分 (0..1)。 並びは `data` と同じ */
+  割合: number[];
+  x0: number;
+  y0: number;
+  drawing: boolean;
+  progress: number;
+  instanceId: string;
+};
+
+/** 3 つの見せ方が共通で持つ枠 (cdl#684) */
+function 枠(node: LaidNode, active: boolean): JSX.Element {
+  return (
+    <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}
+    />
+  );
+}
+
+/**
+ * `arcs` = 系列ごとに 1 本の弧 (cdl#684)。
+ *
+ * 円を切り分けないので、**割合を角度ではなく弧の長さで読む**。 長さの比較は角度の比較より
+ * 速く、合計が 100 にならない図 (系列ごとの達成率を並べる等) でも形が壊れない。
+ *
+ * 背後に同じ太さの薄い輪を敷いて全体 (100%) を示す = 弧だけだと「どこまでで 1 周か」 が
+ * 図から消える。
+ *
+ * 中心に合計は置かない。 弧は合計を形で示さないので、置くと形と数が食い違う。
+ */
+function 弧の形({ node, active, data, 割合, x0, y0, drawing, progress }: 形の引数): JSX.Element {
+  const PAD = 20;
+  const 名前の級 = 14;
+  const 割合の級 = 24;
+  const 印から名前まで = 18;
+  const 名前から割合まで = 24;
+
+  const 割合の文字 = 割合.map(割合表記);
+  const 一覧幅 =
+    10 +
+    印から名前まで +
+    Math.max(0, ...data.map((d) => textWidth(d.label ?? "", 名前の級))) +
+    名前から割合まで +
+    Math.max(0, ...割合の文字.map((t) => textWidth(t, 割合の級)));
+
+  const 縦から = (node.h - PAD * 2) / 2;
+  const 横から = (node.w - PAD * 2 - 一覧幅 - 28) / 2;
+  const R = Math.max(24, Math.min(縦から, 横から));
+  const cx = PAD + R;
+  const cy = node.h / 2;
+
+  /**
+   * 弧 1 本の太さと、外から内への刻み。
+   *
+   * **中心に穴を残す** = 内側まで詰めると、いちばん内の弧が円に潰れて長さを読めなくなる
+   * (実測で外半径 140 / 3 本のとき、穴を残さない配り方では内の弧の半径が 37 に対し
+   * 太さが 30 になった)。 穴は外半径の 34%。
+   *
+   * 太さは刻みの 60% にして、弧と弧の間に地を残す。
+   */
+  const 穴 = R * 0.34;
+  const 刻み = (R - 穴) / Math.max(1, data.length);
+  const 太さ = Math.max(3, 刻み * 0.6);
+
+  const 開き = 進みを畳む(drawing, progress);
+
+  const 一覧左 = node.w - PAD - 一覧幅;
+  const 行の間 = Math.min(56, (node.h - PAD * 2) / Math.max(1, data.length));
+  const 一覧上 = node.h / 2 - (行の間 * (data.length - 1)) / 2;
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      {枠(node, active)}
+      {data.map((d, idx) => {
+        const r = R - 太さ / 2 - idx * 刻み;
+        if (r <= 太さ / 2) return null;
+        /** 描いている間は弧も同じ進みで伸びる = 3 本が揃って回る */
+        const 取り分 = (割合[idx] ?? 0) * (drawing ? 開き : 1);
+        return (
+          <g key={`arc-${idx}`}>
+            <circle
+              data-cdl-role="chart-pie-arc-track"
+              cx={cx}
+              cy={cy}
+              r={r}
+              fill="none"
+              stroke="var(--cdl-divider, #d4d4d8)"
+              strokeWidth={太さ}
+            />
+            <path
+              data-cdl-role="chart-pie-arc"
+              data-cdl-unresolved={d.unresolved ? "true" : undefined}
+              d={弧の道(cx, cy, r, 取り分)}
+              fill="none"
+              stroke={sliceColor(d.tone, idx)}
+              strokeWidth={太さ}
+              strokeLinecap="round"
+            />
+          </g>
+        );
+      })}
+      {data.map((d, idx) => {
+        const y = 一覧上 + 行の間 * idx;
+        return (
+          <g key={`row-${idx}`}>
+            <rect
+              x={一覧左}
+              y={y - 9}
+              width={10}
+              height={10}
+              rx={2}
+              fill={sliceColor(d.tone, idx)}
+            />
+            <text
+              x={一覧左 + 印から名前まで}
+              y={y}
+              fontSize={名前の級}
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {d.label}
+            </text>
+            <text
+              x={node.w - PAD}
+              y={y + 4}
+              textAnchor="end"
+              fontSize={割合の級}
+              fontWeight={600}
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {割合の文字[idx]}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+/**
+ * `table` = 図と表を左右に据える (cdl#684)。
+ *
+ * 割合と実数の両方を表で読ませる。 件数や金額の図で、割合だけでは足りない時に効く。
+ *
+ * 引き出し線を引かない = 対応は表の色の印が担う。 線と表を両方置くと、同じ対応を
+ * 2 つの仕掛けで示すことになる。
+ */
+function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, instanceId }: 形の引数): JSX.Element {
+  const PAD = 20;
+  const 見出しの級 = 11;
+  const 名前の級 = 15;
+  const 割合の級 = 17;
+  const 実数の級 = 15;
+  const 印から名前まで = 18;
+
+  const 割合の文字 = 割合.map(割合表記);
+  const 実数の文字 = data.map((d) => 実値表記(d.value));
+  const 名前幅 = Math.max(0, ...data.map((d) => textWidth(d.label ?? "", 名前の級)));
+  const 割合幅 = Math.max(textWidth("割合", 見出しの級), ...割合の文字.map((t) => textWidth(t, 割合の級)));
+  const 実数幅 = Math.max(textWidth("値", 見出しの級), ...実数の文字.map((t) => textWidth(t, 実数の級)));
+  const 表幅 = 10 + 印から名前まで + 名前幅 + 28 + 割合幅 + 24 + 実数幅;
+
+  const 縦から = (node.h - PAD * 2) / 2;
+  const 横から = (node.w - PAD * 2 - 表幅 - 28) / 2;
+  const R = Math.max(24, Math.min(縦から, 横から));
+  const 内半径 = R * 0.58;
+  const cx = PAD + R;
+  const cy = node.h / 2;
+
+  const 表左 = node.w - PAD - 表幅;
+  const 右端 = node.w - PAD;
+  const 割合右 = 右端 - 実数幅 - 24;
+
+  const 行の間 = Math.min(52, (node.h - PAD * 2 - 40) / Math.max(1, data.length));
+  const 見出しのy = node.h / 2 - (行の間 * data.length) / 2 - 14;
+
+  const 開き = 進みを畳む(drawing, progress);
+  const 切り抜きid = `cdl-pie-draw-${instanceId}`;
+  const 開き始めた = (始まり: number): boolean => !drawing || 開き > 始まり;
+
+  let 角 = -Math.PI / 2;
+  let 累計 = 0;
+  const 扇たち = data.map((d, idx) => {
+    const frac = 割合[idx] ?? 0;
+    const a0 = 角;
+    const a1 = 角 + frac * Math.PI * 2;
+    角 = a1;
+    const 始まり = 累計;
+    累計 += frac;
+    return { d, idx, 始まり, path: 輪の道(cx, cy, R, 内半径, a0, a1) };
+  });
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      {枠(node, active)}
+      {drawing && (
+        <defs>
+          <clipPath id={切り抜きid}>{扇形の切り抜き(cx, cy, R + 2, 開き)}</clipPath>
+        </defs>
+      )}
+      <g {...(drawing ? { clipPath: `url(#${切り抜きid})` } : {})}>
+        {扇たち.map((s) => (
+          <path
+            key={`slice-${s.idx}`}
+            data-cdl-role="chart-pie-slice"
+            data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
+            d={s.path}
+            fill={sliceColor(s.d.tone, s.idx)}
+            stroke="var(--cdl-node-fill, #ffffff)"
+            strokeWidth={3}
+            strokeLinejoin="round"
+          />
+        ))}
+      </g>
+      <text
+        x={cx}
+        y={cy - 2}
+        textAnchor="middle"
+        fontSize={Math.round(R * 0.26)}
+        fontWeight={600}
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {実値表記(Math.round(data.reduce((acc, d) => acc + d.value, 0)))}
+      </text>
+      <text
+        x={cx}
+        y={cy + Math.round(R * 0.2)}
+        textAnchor="middle"
+        fontSize={Math.round(R * 0.12)}
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
+        合計
+      </text>
+      <text x={表左} y={見出しのy} fontSize={見出しの級} fill="var(--cdl-text-dim, #5a6270)">
+        内訳
+      </text>
+      <text x={割合右} y={見出しのy} textAnchor="end" fontSize={見出しの級} fill="var(--cdl-text-dim, #5a6270)">
+        割合
+      </text>
+      <text x={右端} y={見出しのy} textAnchor="end" fontSize={見出しの級} fill="var(--cdl-text-dim, #5a6270)">
+        値
+      </text>
+      <line
+        data-cdl-role="chart-pie-table-rule"
+        x1={表左}
+        y1={見出しのy + 10}
+        x2={右端}
+        y2={見出しのy + 10}
+        stroke="var(--cdl-text, #1a1f2a)"
+        strokeWidth={1.2}
+      />
+      {扇たち.map((s) => {
+        if (!開き始めた(s.始まり)) return null;
+        const y = 見出しのy + 40 + 行の間 * s.idx;
+        return (
+          <g key={`row-${s.idx}`}>
+            <rect x={表左} y={y - 10} width={10} height={10} rx={2} fill={sliceColor(s.d.tone, s.idx)} />
+            <text x={表左 + 印から名前まで} y={y} fontSize={名前の級} fill="var(--cdl-text, #1a1f2a)">
+              {s.d.label}
+            </text>
+            <text x={割合右} y={y} textAnchor="end" fontSize={割合の級} fontWeight={600} fill="var(--cdl-text, #1a1f2a)">
+              {割合の文字[s.idx]}
+            </text>
+            <text x={右端} y={y} textAnchor="end" fontSize={実数の級} fill="var(--cdl-text-dim, #5a6270)">
+              {実数の文字[s.idx]}
             </text>
+            <line
+              data-cdl-role="chart-pie-table-rule"
+              x1={表左}
+              y1={y + 16}
+              x2={右端}
+              y2={y + 16}
+              stroke="var(--cdl-divider, #d4d4d8)"
+              strokeWidth={1}
+            />
           </g>
         );
       })}
@@ -282,6 +663,28 @@ export function ChartPieNode({
   );
 }
 
+/** 12 時から時計回りに、取り分ぶんの弧を引く道 (cdl#684) */
+function 弧の道(cx: number, cy: number, r: number, 取り分: number): string {
+  const 実効 = Math.max(0, Math.min(0.9999, 取り分));
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + 実効 * Math.PI * 2;
+  const large = 実効 > 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)}`
+  );
+}
+
+/** 中央が抜けた扇 1 枚の道。 外周を時計回りに描き、内周を逆向きに戻って閉じる */
+function 輪の道(cx: number, cy: number, R: number, r: number, a0: number, a1: number): string {
+  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`
+  );
+}
 
 /**
  * 12 時から時計回りに開く扇形 (cdl#516)。 円を切り抜く形に使う。