@cardenelabs/cdl 0.14.0 → 0.15.0

package/src/kinds/chart-pie.tsx

@@ -1,17 +1,43 @@
 import { useId, type JSX } from "react";
 import type { LaidNode, Tone } from "../types";
-import { TONE } from "../render/tone";
+import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
+import { textWidth } from "./text-width";
 
 /**
  * chart-pie kind ... 1 node に datum 配列 (chartData) を保持し、 SVG path arc で円グラフ描画する。
- * layout は node bbox 内側の左半分に円を配置、 右半分に凡例 (label + %) を stack 表示する。
+ *
+ * ## 幅は中身から配る (cdl#542)
+ *
+ * 以前は左半分が円、 右半分が凡例の固定だった。 凡例は名札と割合しか置かないので割り当ての
+ * 一部しか使わず、 **横長の枠では右が大きく空いたまま円が小さいまま** になっていた
+ * (実測 = 枠 929×465 で右の空白 369px = 幅の 39.7%、 円の面積比 24.9%)。
+ *
+ * 凡例の幅を `textWidth` で中身から見積もり、 残りを円に渡す。 円と凡例をまとめて枠の中央に
+ * 置くので、 枠が横長でも縦長でも余りが左右に均等に散る。
+ *
+ * ## 名札は扇のそばに置く (cdl#548)
+ *
+ * 凡例を右に置いていた間、 **扇と凡例で目線が往復** していた。 ある扇が何を指すかを知るために
+ * 凡例まで目を移し、 戻って次の扇を見ることになる。 実数はどこにも出ていなかった。
+ *
+ * 同じ repo の折れ線と並べて測ると差が出る = 折れ線は 目盛 / 補助線 / 実値 / 印の意匠 /
+ * 桁区切り の 5 層を持つのに対し、 円は塗り分けた塊と凡例しか持たない。
+ *
+ * **扇の外へ引き出し線を伸ばし、 名前と実数と割合をその場に置く**。 折れ線が各点に値を
+ * 書いているのと同じ考え方で、 凡例は無くなる。
+ *
+ * ## 中央を抜いて合計を置く (cdl#548)
+ *
+ * 折れ線の縦軸が全体の尺度を示しているのに対応する。 円の中央は元から何も置けない場所で、
+ * そこに合計が入ると「部分の合計は全体」 が図の中で閉じる。
+ *
  * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび扇の角度が追随する。
  *
  * phase の `draw` にこの node の id が載っている間は、 円が 12 時から時計回りに開く (cdl#516)。
- * 開き方は扇形の切り抜き (`clipPath`) で、 各扇の `d` は進みに関わらず実値のまま。
- * 凡例はその扇が開き始めた時に出る。
+ * 開き方は扇形の切り抜き (`clipPath`) で、 各扇の `d` は **進みに関わらず実値のまま**。
+ * 名札はその扇が開き始めた時に出る。
  */
 export function ChartPieNode({
   node,
@@ -38,10 +64,62 @@ export function ChartPieNode({
 
   const PAD_TOP = 20;
   const PAD_BOTTOM = 20;
+  /** 枠の内側に残す左右の余白 */
+  const PAD_SIDE = 20;
   const chartAreaH = node.h - PAD_TOP - PAD_BOTTOM;
-  const pieAreaW = node.w * 0.5;
-  const radius = Math.min(pieAreaW, chartAreaH) / 2 - 12;
-  const cx = pieAreaW / 2;
+
+  const 名札の級 = 14;
+  const 数値の級 = 13;
+
+  /** 円の縁から引き出し線が折れるまで */
+  const 引き出し = 18;
+  /** 折れてから字が始まるまで */
+  const 字までの間 = 26;
+  /**
+   * 名札が折れ点から縦に張り出す量。
+   *
+   * 名前は `折れy - 3` の位置に級 14 で置くので上へ約 17、数値は `折れy + 15` に級 13 で
+   * 置くので下へ約 19 伸びる。 大きい方を採る = 上下どちらに出ても収まる。
+   */
+  const 名札の縦の張り出し = 20;
+
+  const 割合の文字 = data.map((d) => 割合表記(d.value / total));
+  const 数値の文字 = data.map((d, i) => `${実値表記(d.value)}  ${割合の文字[i]}`);
+
+  /**
+   * 名札 1 つが横に使う幅。 **中身から決める** = 割り当てを固定すると使わない分が死ぬ
+   * (cdl#542 で凡例について踏んだのと同じ)。
+   *
+   * 名前の行と数値の行のうち長い方を採る。 短い方に合わせると長い行が枠から出る。
+   */
+  const 名札幅 = Math.max(
+    0,
+    ...data.map((d, i) =>
+      Math.max(textWidth(d.label ?? "", 名札の級), textWidth(数値の文字[i] ?? "", 数値の級)),
+    ),
+  );
+
+  /**
+   * 円の半径。 **名札が枠に収まる上限** を縦と横それぞれから出し、小さい方を採る。
+   *
+   * 名札は扇の向きに応じて円の四方へ出るので、どちらの向きに出ても収まる必要がある。
+   * 縦は `引き出し + 字の張り出し`、横は `引き出し + 字までの間 + 名札幅` を半径の外に残す。
+   *
+   * **#542 の時より円は小さくなる**。 あちらは名札が右にしか出なかったので、上下と左に
+   * 場所を取る必要が無かった。 その代わり凡例まで目を移す必要があり、実数も出ていない。
+   * 円の大きさと引き換えに情報の層を増やす判断で、円は依然として枠の高さの 8 割を使う。
+   *
+   * 残りが負や極小になる形 (枠が細い / 名前が長い) では円が消えるため下限を置き、潰れるより
+   * 名札が枠から少しはみ出す側に倒す = 円が消えると図として意味を失う。
+   */
+  const 縦から = chartAreaH / 2 - 引き出し - 名札の縦の張り出し;
+  const 横から = (node.w - PAD_SIDE * 2) / 2 - 引き出し - 字までの間 - 名札幅;
+  const radius = Math.max(24, Math.min(縦から, 横から));
+  /** 中央を抜く半径。 合計を置ける広さを残しつつ、輪が細くなりすぎない比 */
+  const 内半径 = radius * 0.58;
+
+  /** 円は枠の中央に置く。 名札が左右へ均等に出る */
+  const cx = node.w / 2;
   const cy = PAD_TOP + chartAreaH / 2;
 
   let cumAngle = -Math.PI / 2;
@@ -60,21 +138,28 @@ export function ChartPieNode({
     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 ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} Z`;
-    return { d, frac, path, startFrac };
+    // 外周を時計回りに描き、内周を逆向きに戻って閉じる = 中央が抜けた輪になる
+    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, 中央角 };
   });
 
   /** 円がどこまで開いたか (0..1、 cdl#516)。 畳み方は `draw-progress.ts` が持つ */
   const 開き = 進みを畳む(drawing, progress);
   // SVG の id は document 全体の名前空間。 node id ではなく instance id で分ける
   const 切り抜きid = `cdl-pie-draw-${instanceId}`;
+  const 影id = `cdl-pie-shadow-${instanceId}`;
   /** その扇が開き始めたか。 開き始めた扇の凡例だけを出す */
   const 開き始めた = (startFrac: number): boolean => !drawing || 開き > 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;
 
   return (
     <g transform={`translate(${x0} ${y0})`}>
@@ -89,18 +174,22 @@ export function ChartPieNode({
         stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
         strokeWidth={active ? 3 : 1.25}
       />
-      {drawing && (
-        <defs>
+      <defs>
+        {drawing && (
           <clipPath id={切り抜きid}>{扇形の切り抜き(cx, cy, radius + 2, 開き)}</clipPath>
-        </defs>
-      )}
+        )}
+        {/* 輪を地から浮かせる。 塗りだけだと図が紙に印刷されたように平坦に見える */}
+        <filter id={影id} x="-20%" y="-20%" width="140%" height="140%">
+          <feDropShadow dx="0" dy="6" stdDeviation="10" floodColor="#0b1220" floodOpacity="0.16" />
+        </filter>
+      </defs>
       {/*
         **扇の `d` は触らない** (cdl#516)。 進みで再計算すると、扇の形から取り分を測る
         利用側が進みの途中で別の値を読む。 見える範囲だけを切り抜きで変える。
 
         描く指定が無い図には包みも `clip-path` も足さない = 既存の図の DOM を変えない
       */}
-      <g {...(drawing ? { clipPath: `url(#${切り抜きid})` } : {})}>
+      <g {...(drawing ? { clipPath: `url(#${切り抜きid})` } : {})} filter={`url(#${影id})`}>
         {slices.map((s, idx) => (
           <path
             key={`slice-${idx}`}
@@ -108,48 +197,87 @@ export function ChartPieNode({
             data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
             d={s.path}
             fill={sliceColor(s.d.tone, idx)}
-            fillOpacity={active ? 0.95 : 0.85}
+            /*
+              **半透明にしない** (cdl#548)。 地の色が透けて系列の色が濁る = 選んだ色と
+              画面に出る色が違う。 強調は色そのもので付ける。
+
+              区切りは線ではなく **地の色の余白** で取る。 線だと扇どうしが分断されて
+              見え、輪が 1 つの量に見えなくなる
+            */
             stroke="var(--cdl-node-fill, #ffffff)"
-            strokeWidth={1.5}
+            strokeWidth={3}
+            strokeLinejoin="round"
           />
         ))}
       </g>
 
+      {/* 中央の合計。 部分の合計は全体、 が図の中で閉じる (cdl#548) */}
+      <text
+        x={cx}
+        y={cy - 2}
+        textAnchor="middle"
+        fontSize={Math.round(radius * 0.26)}
+        fontWeight={600}
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {実値表記(Math.round(total))}
+      </text>
+      <text
+        x={cx}
+        y={cy + Math.round(radius * 0.2)}
+        textAnchor="middle"
+        fontSize={Math.round(radius * 0.12)}
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
+        合計
+      </text>
+
       {/*
-        行の位置は `idx` から決まる。 いまの開き方は必ず先頭からの連続なので、開いた扇だけを
-        `filter` で抜いても位置は同じになる (変異試験で実測 = 差が出ない)。
+        扇のそばの名札 (cdl#548)。 開き始めた扇だけを出す。
 
-        それでも `idx` を保つ形で書くのは、位置の計算が抜き方に依存しないため。 開く順が
-        先頭からでなくなった時に、この場所を直し忘れても位置がずれない
+        引き出し線は 円の縁 → 外へ真っすぐ → 字の手前で水平 の 3 点で折る。 水平で終える
+        のは、字の並びが扇の向きに引きずられないため = 傾いた線の先に字を置くと行が揃わない。
       */}
-      {slices.map((s, idx) => !開き始めた(s.startFrac) ? null : (
-        <g key={`legend-${idx}`} transform={`translate(${legendX} ${legendStartY + idx * legendGap})`}>
-          <rect
-            x={0}
-            y={-8}
-            width={14}
-            height={14}
-            rx={3}
-            fill={sliceColor(s.d.tone, idx)}
-          />
-          <text
-            x={20}
-            y={2}
-            fontSize={12}
-            fill="var(--cdl-text, #1a1f2a)"
-          >
-            {s.d.label}
-          </text>
-          <text
-            x={20}
-            y={16}
-            fontSize={11}
-            fill="var(--cdl-text-dim, #5a6270)"
-          >
-            {(s.frac * 100).toFixed(1)}%
-          </text>
-        </g>
-      ))}
+      {slices.map((s, idx) => {
+        if (!開き始めた(s.startFrac)) return null;
+        const 右 = Math.cos(s.中央角) >= 0;
+        const 縁x = cx + radius * Math.cos(s.中央角);
+        const 縁y = cy + radius * Math.sin(s.中央角);
+        const 折れx = cx + (radius + 引き出し) * Math.cos(s.中央角);
+        const 折れy = cy + (radius + 引き出し) * Math.sin(s.中央角);
+        const 字x = 折れx + (右 ? 字までの間 : -字までの間);
+        return (
+          <g key={`callout-${idx}`}>
+            <path
+              d={`M ${縁x} ${縁y} L ${折れx} ${折れy} L ${字x - (右 ? 6 : -6)} ${折れy}`}
+              fill="none"
+              stroke="var(--cdl-divider, #d4d4d8)"
+              strokeWidth={1}
+            />
+            {/* 起点の点。 どの扇から伸びた線かを色で示す */}
+            <circle cx={縁x} cy={縁y} r={3} fill={sliceColor(s.d.tone, idx)} />
+            <text
+              x={字x}
+              y={折れy - 3}
+              textAnchor={右 ? "start" : "end"}
+              fontSize={名札の級}
+              fontWeight={600}
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {s.d.label}
+            </text>
+            <text
+              x={字x}
+              y={折れy + 15}
+              textAnchor={右 ? "start" : "end"}
+              fontSize={数値の級}
+              fill="var(--cdl-text-dim, #5a6270)"
+            >
+              {数値の文字[idx]}
+            </text>
+          </g>
+        );
+      })}
     </g>
   );
 }
@@ -171,9 +299,42 @@ function 扇形の切り抜き(cx: number, cy: number, r: number, 開き: number
   return <path d={d} />;
 }
 
-const FALLBACK_ORDER: Tone[] = ["accent", "teal", "warning", "success", "info", "error"];
+/**
+ * 実値の表記 (cdl#548)。
+ *
+ * **桁区切りを入れる**。 同じ repo の折れ線が各点の値を `1,342` の形で置いており、そちらと
+ * 揃える。 4 桁を超えると区切りの有無で読む速さが変わる。
+ *
+ * 小数は 1 桁までに丸める。 図に置く数なので、桁を尽くすより並びが揃う方が読みやすい。
+ */
+function 実値表記(v: number): string {
+  return Number.isInteger(v)
+    ? v.toLocaleString("en-US")
+    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
 
+/**
+ * 取り分の表記 (cdl#542)。
+ *
+ * **整数のとき小数を出さない**。 `toFixed(1)` 固定だと 3 件とも `45.0%` のように無駄な
+ * `.0` が付き、桁が増えて読みにくい。 小数を持つ時だけ 1 桁出す。
+ *
+ * 丸めた結果が整数になる形 (`0.4499` → `45.0`) も整数として出す = 丸めた後の値で判定する。
+ */
+function 割合表記(frac: number): string {
+  const v = Math.round(frac * 1000) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
+
+/**
+ * 扇の色 (cdl#546)。
+ *
+ * 色を明示しない datum には **図表の系列専用の色** (`CHART_SERIES`) を順に配る。
+ * 以前は意味付きの色 (`TONE`) を使い回しており、並べて見分ける前提で選ばれていない色が
+ * 混ざっていた (経緯は `render/tone.ts`)。
+ */
 function sliceColor(tone: Tone | undefined, idx: number): string {
+  // 明示した色が優先される = 「この扇は異常」 を示したい図はそのまま書ける
   if (tone) return TONE[tone];
-  return TONE[FALLBACK_ORDER[idx % FALLBACK_ORDER.length]!];
+  return chartSeriesColor(idx);
 }

package/src/kinds/chart-radial.tsx

@@ -0,0 +1,210 @@
+import { type JSX } from "react";
+import type { LaidNode, Tone } from "../types";
+import { TONE, chartSeriesColor } from "../render/tone";
+import { resolveChartData } from "../render/payload-binding";
+import { textWidth } from "./text-width";
+
+/**
+ * chart-radial kind ... 1 件を 1 本の弧にして内側から重ね、 長さで比べる図 (cdl#550)。
+ *
+ * ## 何のための種別か
+ *
+ * 割合を示す図は `chart-pie` だけで、 扇の **角度** で比べる形になる。 角度の目測は長さの
+ * 目測より外れやすく、 40% と 45% のような近い値は見分けが付かない。
+ *
+ * `chart-bar` は長さで比べられるが、 **全体に対する割合** という感覚を持たない。 棒の長さは
+ * 最大値に対する比率で、 100% がどこかを示さない。
+ *
+ * ## 全周を 100% とする
+ *
+ * 各弧の背後に全周の軌道を敷き、 その上に取り分ぶんの弧を重ねる。 軌道があることで
+ * 「あとどれだけで一周か」 が見え、 棒グラフに無い「全体に対する割合」 が出る。
+ *
+ * 弧は 12 時から時計回りに伸びる。 円グラフと起点を揃えている。
+ *
+ * ## 名前は左に縦へ揃える
+ *
+ * 弧のそばに置くと、 内側の弧ほど場所が狭くなって字が入らない。 左端に縦へ並べると件数が
+ * 増えても一覧性が落ちず、 弧の並び順と行の並び順が対応する。
+ */
+export function ChartRadialNode({
+  node,
+  active,
+  stateValues = {},
+}: {
+  node: LaidNode;
+  active: boolean;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
+  const x0 = node.cx - node.w / 2;
+  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 PAD = 20;
+  const 使える高さ = node.h - PAD * 2;
+  const 名前の級 = 14;
+  const 数値の級 = 13;
+  /** 一覧の 1 行が縦に使う高さ */
+  const 行の高さ = 42;
+  /** 一覧と弧の間 */
+  const 一覧と弧の間 = 28;
+
+  const 数値の文字 = data.map((d) => `${実値表記(d.value)}  ${割合表記(d.value / total)}`);
+  /** 一覧の幅。 **中身から決める** = 割り当てを固定すると使わない分が死ぬ (cdl#542) */
+  const 一覧の幅 =
+    印の幅 +
+    Math.max(
+      0,
+      ...data.map((d, i) =>
+        Math.max(textWidth(d.label ?? "", 名前の級), textWidth(数値の文字[i] ?? "", 数値の級)),
+      ),
+    );
+
+  /**
+   * いちばん外の弧の半径。
+   *
+   * 弧は内側へ `帯の幅 + 帯の間` ずつ縮んで重なるので、 件数ぶんの厚みが要る。 高さと、
+   * 一覧を引いた残り幅の小さい方に収める。
+   */
+  const 弧に使える幅 = node.w - PAD * 2 - 一覧の幅 - 一覧と弧の間;
+  const 外半径 = Math.max(24, Math.min(使える高さ / 2, 弧に使える幅 / 2));
+
+  /**
+   * 帯 1 本の太さと間。
+   *
+   * **件数から決める**。 太さを固定すると、 件数が増えた時に内側の弧が中心を突き抜ける。
+   * いちばん内側の弧が半径の 3 割を残す形で割り付ける。
+   */
+  const 使える厚み = 外半径 * 0.7;
+  const 帯1本 = 使える厚み / Math.max(data.length, 1);
+  const 帯の幅 = 帯1本 * 0.66;
+
+  const 弧のcx = PAD + 一覧の幅 + 一覧と弧の間 + 外半径;
+  const cy = PAD + 使える高さ / 2;
+
+  const rings = data.map((d, idx) => {
+    const frac = d.value / total;
+    const 中心半径 = 外半径 - 帯1本 * idx - 帯1本 / 2;
+    return {
+      d,
+      frac,
+      中心半径,
+      // 軌道は全周。 1 周ちょうどは弧で表せないので、 わずかに欠かして描く
+      軌道: 弧の道(弧のcx, cy, 中心半径, 帯の幅, 0.9999),
+      取り分: frac <= 0 ? null : 弧の道(弧のcx, cy, 中心半径, 帯の幅, Math.min(frac, 0.9999)),
+    };
+  });
+
+  const 一覧の始まり = PAD + (使える高さ - 行の高さ * data.length) / 2 + 行の高さ / 2;
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <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}
+      />
+
+      {/*
+        軌道。 **全周を敷く** = これが無いと「あとどれだけで一周か」 が読めず、 棒グラフと
+        同じ「最大値に対する比率」 の図になる。 この種別の存在理由に直結する。
+      */}
+      {rings.map((r, idx) => (
+        <path
+          key={`track-${idx}`}
+          data-cdl-role="chart-radial-track"
+          d={r.軌道}
+          fill="var(--cdl-divider, #d4d4d8)"
+          fillOpacity={0.28}
+        />
+      ))}
+
+      {rings.map((r, idx) =>
+        r.取り分 === null ? null : (
+          <path
+            key={`arc-${idx}`}
+            data-cdl-role="chart-radial-arc"
+            data-cdl-unresolved={r.d.unresolved ? "true" : undefined}
+            d={r.取り分}
+            fill={arcColor(r.d.tone, idx)}
+          />
+        ),
+      )}
+
+      {/* 一覧。 行の並びが弧の並び (外から内へ) と対応する */}
+      {data.map((d, idx) => {
+        const y = 一覧の始まり + 行の高さ * idx;
+        return (
+          <g key={`item-${idx}`} data-cdl-role="chart-radial-item">
+            <rect x={PAD} y={y - 11} width={4} height={22} rx={2} fill={arcColor(d.tone, idx)} />
+            <text
+              x={PAD + 印の幅}
+              y={y + 1}
+              fontSize={名前の級}
+              fontWeight={700}
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {d.label}
+            </text>
+            <text
+              x={PAD + 印の幅}
+              y={y + 20}
+              fontSize={数値の級}
+              fill="var(--cdl-text-dim, #5a6270)"
+            >
+              {数値の文字[idx]}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+/** 一覧の色の印と、字が始まるまでの幅 */
+const 印の幅 = 18;
+
+/**
+ * 12 時から時計回りに `割合` ぶん伸びる帯の道。
+ *
+ * 外周を時計回りに描き、 内周を逆向きに戻って閉じる。 **1 周ちょうどは扇形で表せない**
+ * (始点と終点が同じ点になり弧の向きが決まらない) ため、 呼出側でわずかに欠かして渡す。
+ */
+function 弧の道(cx: number, cy: number, 中心半径: number, 幅: number, 割合: number): string {
+  const 外 = 中心半径 + 幅 / 2;
+  const 内 = Math.max(0.5, 中心半径 - 幅 / 2);
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + 割合 * Math.PI * 2;
+  const large = 割合 > 0.5 ? 1 : 0;
+  const p = (r: number, a: number) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
+  return (
+    `M ${p(外, a0)} A ${外} ${外} 0 ${large} 1 ${p(外, a1)} ` +
+    `L ${p(内, a1)} A ${内} ${内} 0 ${large} 0 ${p(内, a0)} Z`
+  );
+}
+
+/** 実値の表記。 桁区切りを入れる (`chart-pie` と揃える) */
+function 実値表記(v: number): string {
+  return Number.isInteger(v)
+    ? v.toLocaleString("en-US")
+    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+
+/** 取り分の表記。 整数のとき小数を出さない (`chart-pie` と揃える) */
+function 割合表記(frac: number): string {
+  const v = Math.round(frac * 1000) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
+
+/** 弧の色。 明示した色が優先され、 無ければ図表の系列の色を順に配る */
+function arcColor(tone: Tone | undefined, idx: number): string {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}