@cardenelabs/cdl 0.14.0 → 0.16.0

package/src/kinds/chart-stacked-bar.tsx

@@ -0,0 +1,272 @@
+import { type JSX } from "react";
+import type { LaidNode, Tone } from "../types";
+import { TONE, chartSeriesColor } from "../render/tone";
+import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
+import { textWidth } from "./text-width";
+
+/**
+ * chart-stacked-bar kind ... 1 本の帯を割合で区切り、時点を並べて変化を見せる図 (cdl#551)。
+ *
+ * ## 何のための種別か
+ *
+ * `chart-pie` は 1 時点の内訳しか描けない。 段が進んで値が動くと前の姿は消えるので、
+ * 「昨年と今年で構成比がどう変わったか」 は読み手の記憶に頼ることになる。
+ * 扇の角度は近い値の比較にも弱い (45% と 39% は目測で見分けが付かない)。
+ *
+ * 帯を割合で区切れば **長さで比べられる**。 帯を縦に並べれば時点間の変化がそのまま見える。
+ *
+ * ## 前の時点は datum の `previous` で持つ
+ *
+ * 節を時点ごとに置く案は採らない = 図表は「1 節に datum 配列を持ち、種別が全 datum を描く」
+ * 構造で揃っており、節を増やすと配置と組み立て器の両方が別経路になる。
+ *
+ * 1 件でも `previous` を持てば帯が 2 本になる。 持たない図は今までどおり 1 本。
+ *
+ * ## 区画の字は入る時だけ描く
+ *
+ * 細い区画に字を詰めると隣の区画へはみ出して、どちらの値か読めなくなる。
+ * 入らない区画は字を描かず、名前は下の一覧が受け持つ。
+ */
+
+/** 区画に割合を描くために要る幅。 これ未満の区画は字を描かない */
+export const SLICE_MIN_W_FOR_TEXT = 44;
+
+/** 区画に実数も描くために要る幅 (割合の分より広い) */
+export const SLICE_MIN_W_FOR_VALUE = 84;
+
+export function ChartStackedBarNode({
+  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 帯たち = 帯の並び(data);
+
+  const PAD = 24;
+  const 名前の級 = 13;
+  const 区画の級 = 12;
+  const 時点の級 = 13;
+  /** 時点の名前を置く左の幅 */
+  const 時点の幅 =
+    Math.max(0, ...帯たち.map((b) => textWidth(b.名前, 時点の級))) + (帯たち.length > 1 ? 16 : 0);
+  const 帯の左 = PAD + 時点の幅;
+  const 帯の幅 = Math.max(40, node.w - 帯の左 - PAD);
+  const 帯の高さ = 44;
+  const 帯の間 = 20;
+  /** 下に置く一覧の 1 行 */
+  const 一覧の高さ = 26;
+
+  const 全体の高さ = 帯たち.length * 帯の高さ + (帯たち.length - 1) * 帯の間 + 16 + 一覧の高さ;
+  const 上端 = Math.max(PAD, (node.h - 全体の高さ) / 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}
+      />
+
+      {帯たち.map((帯, 段) => {
+        const y = 上端 + 段 * (帯の高さ + 帯の間);
+        let 左 = 帯の左;
+        return (
+          <g key={`bar-${段}`} data-cdl-role="chart-stacked-bar-row">
+            {/* 時点の名前。 帯が 1 本だけの図では描かない (比べる相手がいない) */}
+            {帯たち.length > 1 && (
+              <text
+                data-cdl-role="chart-stacked-bar-period"
+                x={PAD}
+                y={y + 帯の高さ / 2 + 4}
+                fontSize={時点の級}
+                fontWeight={700}
+                fill="var(--cdl-text-dim, #5a6270)"
+              >
+                {帯.名前}
+              </text>
+            )}
+
+            {帯.区画.map((s, idx) => {
+              const w = 帯の幅 * s.割合;
+              const x = 左;
+              左 += w;
+              const 色 = 印の色(s.tone, idx);
+              return (
+                <g key={`slice-${idx}`}>
+                  <rect
+                    data-cdl-role="chart-stacked-bar-slice"
+                    data-cdl-unresolved={s.unresolved ? "true" : undefined}
+                    x={x}
+                    y={y}
+                    width={Math.max(0, w)}
+                    height={帯の高さ}
+                    fill={色}
+                  />
+                  {/*
+                    区画の字。 **入る時だけ描く** = 細い区画に詰めると隣へはみ出して
+                    どちらの値か読めなくなる。 名前は下の一覧が受け持つ
+                  */}
+                  {w >= SLICE_MIN_W_FOR_TEXT && (
+                    <text
+                      data-cdl-role="chart-stacked-bar-slice-text"
+                      x={x + w / 2}
+                      y={y + 帯の高さ / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4)}
+                      fontSize={区画の級}
+                      fontWeight={700}
+                      textAnchor="middle"
+                      fill="#ffffff"
+                    >
+                      {割合表記(s.割合)}
+                    </text>
+                  )}
+                  {w >= SLICE_MIN_W_FOR_VALUE && (
+                    <text
+                      data-cdl-role="chart-stacked-bar-slice-value"
+                      x={x + w / 2}
+                      y={y + 帯の高さ / 2 + 13}
+                      fontSize={区画の級 - 1}
+                      textAnchor="middle"
+                      fill="#ffffff"
+                      fillOpacity={0.85}
+                    >
+                      {実値表記(s.実値)}
+                    </text>
+                  )}
+                </g>
+              );
+            })}
+          </g>
+        );
+      })}
+
+      {/* 一覧。 区画に字が入らなかった件もここで名前と色が引ける */}
+      {一覧の並び(data, 帯の左, node.w - PAD, 名前の級).map(({ d, idx, x, 行 }) => {
+        const y =
+          上端 + 帯たち.length * (帯の高さ + 帯の間) - 帯の間 + 16 + 一覧の高さ / 2 + 行 * 一覧の高さ;
+        return (
+          <g key={`legend-${idx}`} data-cdl-role="chart-stacked-bar-legend">
+            <rect x={x} y={y - 5} width={10} height={10} rx={2} fill={印の色(d.tone, idx)} />
+            <text
+              x={x + 16}
+              y={y + 4}
+              fontSize={名前の級}
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {d.label}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+/** 1 本の帯 */
+export type 帯 = {
+  名前: string;
+  区画: Array<{ 割合: number; 実値: number; tone?: Tone; unresolved?: true }>;
+};
+
+/**
+ * datum を帯の並びに畳む。
+ *
+ * **1 件でも `previous` を持てば 2 本になる**。 持たない件はその時点で 0 として扱う =
+ * 件を落とすと帯ごとに区画の数が変わり、上下で色の並びが対応しなくなる。
+ *
+ * 並びは 前 → 今 の順。 上から下へ読むと時間が進む。
+ */
+export function 帯の並び(data: readonly ResolvedChartDatum[]): 帯[] {
+  const 前あり = data.some((d) => d.previous !== undefined);
+  const 今 = 帯を組む("今", data, (d) => d.value);
+  if (!前あり) return [今];
+  return [帯を組む("前", data, (d) => d.previous ?? 0), 今];
+}
+
+function 帯を組む(
+  名前: string,
+  data: readonly ResolvedChartDatum[],
+  取る: (d: ResolvedChartDatum) => number,
+): 帯 {
+  const 値 = data.map((d) => Math.max(0, 取る(d)));
+  const 合計 = 値.reduce((a, v) => a + v, 0);
+  return {
+    名前,
+    区画: data.map((d, i) => ({
+      // 合計 0 の帯は区画を持たない (0 で割らない)。 幅 0 の区画として並べる
+      割合: 合計 > 0 ? 値[i]! / 合計 : 0,
+      実値: 値[i]!,
+      tone: d.tone,
+      ...(d.unresolved ? { unresolved: true as const } : {}),
+    })),
+  };
+}
+
+/** 実値の表記。 桁区切りを入れる (他の図表と揃える) */
+function 実値表記(v: number): string {
+  return Number.isInteger(v)
+    ? v.toLocaleString("en-US")
+    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+
+/** 取り分の表記。 整数のとき小数を出さない (他の図表と揃える) */
+function 割合表記(frac: number): string {
+  const v = Math.round(frac * 1000) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
+
+/** 区画の色。 明示した色が優先され、無ければ図表の系列の色を順に配る */
+function 印の色(tone: Tone | undefined, idx: number): string {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}
+
+/** 一覧の 1 件が横に使う幅 (色の印 + 間 + 名前) と、件どうしの間 */
+const 印から名前まで = 16;
+const 件の間 = 10;
+
+/**
+ * 一覧の並び。 **枠に入らなくなったら行を変える** (#568)。
+ *
+ * 折り返さないと、名前が長い図を細い枠で描いた時に右へ流れて箱の外へ出る
+ * (実測で 260 幅の枠に 3 件を並べて 16 はみ出した)。
+ *
+ * 名前は切らない。 折り返しで収まるなら、切って読めなくするより行を増やす方がよい。
+ * 1 件だけで既に入らない場合は、その 1 件を置いてから次へ折り返す = 空の行を作らない。
+ *
+ * @param 左 一覧が始まる x
+ * @param 右端 これを超えたら折り返す x (箱の内側の右端)
+ */
+export function 一覧の並び(
+  data: readonly ResolvedChartDatum[],
+  左: number,
+  右端: number,
+  級: number,
+): Array<{ d: ResolvedChartDatum; idx: number; x: number; 行: number }> {
+  const out: Array<{ d: ResolvedChartDatum; idx: number; x: number; 行: number }> = [];
+  let x = 左;
+  let 行 = 0;
+  data.forEach((d, idx) => {
+    const 幅 = 印から名前まで + textWidth(d.label ?? "", 級);
+    // 行の先頭では折り返さない = 折り返しても同じ位置に戻るだけで、空の行が増える
+    if (x > 左 && x + 幅 > 右端) {
+      行 += 1;
+      x = 左;
+    }
+    out.push({ d, idx, x, 行 });
+    x += 幅 + 件の間;
+  });
+  return out;
+}

package/src/kinds/chart-stat.tsx

@@ -0,0 +1,231 @@
+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-stat kind ... 数値そのものを主役にする図 (cdl#553)。
+ *
+ * ## 何のための種別か
+ *
+ * 既存の図表はどれも **形で比率を測る** 作りで、数値は名札や凡例に小さく添える。
+ * 「今月の売上は 4,500」 のように **数値を読ませたい** 場面では、形が主役だと数値が小さすぎる。
+ *
+ * `chart-bar` で 1 件だけ描く形も試せるが、棒が 1 本の図になり、比べる相手が無いのに軸と
+ * 目盛が出る。
+ *
+ * ## 数値をいちばん大きく組む
+ *
+ * 件ごとに区画を割り、名前 / 数値 / 割合を縦に積む。 **数値の字を名前より大きくする** のが
+ * この種別の中身で、大小が逆転したら別の図になる。
+ *
+ * ## 弧は輪郭だけの細い線にする
+ *
+ * 比率は補助として添える。 面で塗ると数値より目立ち、主役が入れ替わる。
+ * 弧は 12 時から時計回りに伸びる (`chart-pie` / `chart-radial` と起点を揃えている)。
+ */
+export function ChartStatNode({
+  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 区画 = 区画の割付(node.w, node.h, data.length);
+
+  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}
+      />
+
+      {data.map((d, idx) => {
+        const 枠 = 区画.枠(idx);
+        const frac = total > 0 ? d.value / total : 0;
+        const 色 = 印の色(d.tone, idx);
+        const 数値 = 実値表記(d.value);
+        // 数値は区画に収まるまで小さくする。 収まらないまま描くと隣の区画へはみ出す
+        const 数値の級 = 収める級(数値, 枠.w - 区画.余白 * 2, 区画.数値の級, 区画.名前の級 + 1);
+        return (
+          <g key={`stat-${idx}`} data-cdl-role="chart-stat-item" transform={`translate(${枠.x} ${枠.y})`}>
+            {/* 仕切り。 1 件だけの図では引かない (仕切る相手がいない) */}
+            {idx > 0 && (
+              <line
+                data-cdl-role="chart-stat-divider"
+                x1={0}
+                y1={区画.余白}
+                x2={0}
+                y2={枠.h - 区画.余白}
+                stroke="var(--cdl-divider, #d4d4d8)"
+                strokeWidth={1}
+              />
+            )}
+
+            <text
+              data-cdl-role="chart-stat-label"
+              x={枠.w / 2}
+              y={区画.名前のy}
+              fontSize={区画.名前の級}
+              fontWeight={700}
+              textAnchor="middle"
+              fill="var(--cdl-text-dim, #5a6270)"
+            >
+              {d.label}
+            </text>
+
+            <text
+              data-cdl-role="chart-stat-value"
+              data-cdl-unresolved={d.unresolved ? "true" : undefined}
+              x={枠.w / 2}
+              y={区画.数値のy}
+              fontSize={数値の級}
+              fontWeight={700}
+              textAnchor="middle"
+              fill={色}
+            >
+              {数値}
+            </text>
+
+            {/*
+              比率の弧。 **輪郭だけの細い線** で描く = 面で塗ると数値より目立ち、
+              「数値が主役」 というこの種別の中身が崩れる
+            */}
+            <circle
+              data-cdl-role="chart-stat-track"
+              cx={枠.w / 2}
+              cy={区画.弧のy}
+              r={区画.弧の半径}
+              fill="none"
+              stroke="var(--cdl-divider, #d4d4d8)"
+              strokeWidth={区画.弧の太さ}
+              strokeOpacity={0.5}
+            />
+            {frac > 0 && (
+              <path
+                data-cdl-role="chart-stat-arc"
+                d={弧の道(枠.w / 2, 区画.弧のy, 区画.弧の半径, Math.min(frac, 0.9999))}
+                fill="none"
+                stroke={色}
+                strokeWidth={区画.弧の太さ}
+                strokeLinecap="round"
+              />
+            )}
+
+            <text
+              data-cdl-role="chart-stat-share"
+              x={枠.w / 2}
+              y={区画.割合のy}
+              fontSize={区画.割合の級}
+              textAnchor="middle"
+              fill="var(--cdl-text-dim, #5a6270)"
+            >
+              {割合表記(frac)}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+/**
+ * 区画の割付。
+ *
+ * 件数で横に等分する。 **縦の位置は件数に依らない** = 件数が変わると数値の高さが動く形に
+ * すると、同じ図を並べた時に数値の行が揃わない。
+ */
+function 区画の割付(w: number, h: number, 件数: number) {
+  const 余白 = 20;
+  const 幅 = 件数 > 0 ? w / 件数 : w;
+  const 名前の級 = 14;
+  /** 数値の級。 **名前より大きい** のがこの種別の中身 */
+  const 数値の級 = 40;
+  const 割合の級 = 12;
+  const 弧の半径 = 20;
+  const 弧の太さ = 4;
+
+  // 上から 名前 / 数値 / 弧 / 割合 の順に積む。 中身の高さを出してから縦中央に寄せる
+  const 中身の高さ = 名前の級 + 12 + 数値の級 + 16 + 弧の半径 * 2 + 8 + 割合の級;
+  const 上端 = Math.max(余白, (h - 中身の高さ) / 2);
+
+  const 名前のy = 上端 + 名前の級;
+  const 数値のy = 名前のy + 12 + 数値の級 * 0.78;
+  const 弧のy = 数値のy + 16 + 弧の半径;
+  const 割合のy = 弧のy + 弧の半径 + 8 + 割合の級;
+
+  return {
+    余白,
+    名前の級,
+    数値の級,
+    割合の級,
+    弧の半径,
+    弧の太さ,
+    名前のy,
+    数値のy,
+    弧のy,
+    割合のy,
+    枠: (idx: number) => ({ x: 幅 * idx, y: 0, w: 幅, h }),
+  };
+}
+
+/**
+ * 字が幅に収まる級を返す。 収まらなければ下限まで縮める。
+ *
+ * 下限を名前の級より大きく取るのは、縮めた結果 **数値が名前より小さくなる** と、この種別の
+ * 中身 (数値が主役) が崩れるため。 下限でも入らない場合は入らないまま描く = 勝手に字を
+ * 落とすと数値が別の値に読める。
+ */
+export function 収める級(字: string, 使える幅: number, 初期: number, 下限: number): number {
+  let 級 = 初期;
+  while (級 > 下限 && textWidth(字, 級) > 使える幅) 級 -= 1;
+  return 級;
+}
+
+/**
+ * 12 時から時計回りに `割合` ぶん伸びる弧の道 (線で描く)。
+ *
+ * **1 周ちょうどは弧で表せない** (始点と終点が同じ点になり向きが決まらない) ため、
+ * 呼出側でわずかに欠かして渡す。
+ */
+function 弧の道(cx: number, cy: number, r: number, 割合: number): string {
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + 割合 * Math.PI * 2;
+  const large = 割合 > 0.5 ? 1 : 0;
+  const p = (a: number) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
+  return `M ${p(a0)} A ${r} ${r} 0 ${large} 1 ${p(a1)}`;
+}
+
+/** 実値の表記。 桁区切りを入れる (`chart-pie` / `chart-radial` と揃える) */
+export function 実値表記(v: number): string {
+  return Number.isInteger(v)
+    ? v.toLocaleString("en-US")
+    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+
+/** 取り分の表記。 整数のとき小数を出さない (`chart-pie` / `chart-radial` と揃える) */
+function 割合表記(frac: number): string {
+  const v = Math.round(frac * 1000) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
+
+/** 印の色。 明示した色が優先され、無ければ図表の系列の色を順に配る */
+function 印の色(tone: Tone | undefined, idx: number): string {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}

package/src/kinds/chart-waffle.tsx

@@ -0,0 +1,197 @@
+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-waffle kind ... 100 個の印で割合を **数えて確かめられる** 図 (cdl#552)。
+ *
+ * ## 何のための種別か
+ *
+ * `chart-pie` は角度、`chart-bar` は長さで割合を示すが、どちらも **目測** になる。
+ * 「だいたい 4 割」 までは読めても、正確な値は凡例や名札の数字に頼ることになる。
+ * 図そのものから値を確かめられないため、図と数字が食い違っていても読み手は気付けない。
+ *
+ * 1 個を 1% に割り当てた印を 100 個並べれば、**数えれば正確に分かる**。
+ *
+ * ## 印の数の合計は常に 100 になる
+ *
+ * 割合をそれぞれ四捨五入すると合計が 100 からずれる (33.3% が 3 件で 99、
+ * 16.7% が 6 件で 102)。 ずれたまま描くと **印が余る / 足りない** 図になり、
+ * 「数えて確かめられる」 という存在理由が消える。
+ *
+ * `印の割付` が最大剰余法で配る = まず切り捨てで配り、余った分を小数部の大きい件から 1 個ずつ
+ * 足す。 合計は定義上ちょうど 100 になる。
+ */
+
+/** 印の総数。 1 個 = 1% にするための値で、変えると「数えれば分かる」 が成り立たない */
+export const WAFFLE_TOTAL = 100;
+
+/** 1 行に並べる印の数。 `WAFFLE_TOTAL` の平方根 = 正方形に並ぶ */
+export const WAFFLE_COLS = 10;
+
+/**
+ * 割合を印の数へ配る (最大剰余法)。
+ *
+ * **合計は必ず `WAFFLE_TOTAL` になる**。 それぞれを四捨五入する形では合計がずれ、
+ * 印が余る / 足りない図になる。
+ *
+ * 余りは小数部の大きい件から配る。 同じ小数部が並んだ時は **元の並び順で先の件** に配る =
+ * 並べ替えが安定していないと、同じ入力から違う図が出る。
+ */
+export function 印の割付(値: readonly number[]): number[] {
+  const 合計 = 値.reduce((a, v) => a + Math.max(0, v), 0);
+  if (合計 <= 0) return 値.map(() => 0);
+
+  const 生 = 値.map((v) => (Math.max(0, v) / 合計) * WAFFLE_TOTAL);
+  const 配分 = 生.map((v) => Math.floor(v));
+  let 余り = WAFFLE_TOTAL - 配分.reduce((a, v) => a + v, 0);
+
+  const 順 = 生
+    .map((v, i) => ({ i, 小数部: v - Math.floor(v) }))
+    // 小数部の大きい順。 同じなら元の並びで先の件が勝つ (同じ入力から同じ図を出すため)。
+    //
+    // **並び順の指定は変異試験で覆えない**。 `Array.prototype.sort` は ES2019 以降 安定と
+    // 定められており、比較が 0 を返した時点で元の並びが保たれる = `|| a.i - b.i` を外しても
+    // 結果が変わらない (実測で 25 件とも通った)。 意図を読み手に残すために書いている。
+    .sort((a, b) => b.小数部 - a.小数部 || a.i - b.i);
+
+  for (let k = 0; 余り > 0; k = (k + 1) % 順.length) {
+    const i = 順[k]!.i;
+    配分[i] = (配分[i] ?? 0) + 1;
+    余り -= 1;
+  }
+  return 配分;
+}
+
+export function ChartWaffleNode({
+  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 配分 = 印の割付(data.map((d) => d.value));
+
+  const PAD = 20;
+  const 名前の級 = 14;
+  const 数値の級 = 13;
+  const 行の高さ = 40;
+  const 一覧と格子の間 = 28;
+  const 印の幅 = 18;
+
+  const 数値の文字 = data.map((d, i) => `${実値表記(d.value)}  ${配分[i] ?? 0}%`);
+  /** 一覧の幅。 中身から決める = 割り当てを固定すると使わない分が死ぬ (cdl#542) */
+  const 一覧の幅 =
+    印の幅 +
+    Math.max(
+      0,
+      ...data.map((d, i) =>
+        Math.max(textWidth(d.label ?? "", 名前の級), textWidth(数値の文字[i] ?? "", 数値の級)),
+      ),
+    );
+
+  const 使える高さ = node.h - PAD * 2;
+  const 格子に使える幅 = node.w - PAD * 2 - 一覧の幅 - 一覧と格子の間;
+  /** 升の 1 辺。 縦横の小さい方に収める (格子は正方形) */
+  const 升 = Math.max(4, Math.min(使える高さ, 格子に使える幅) / WAFFLE_COLS);
+  const 印 = 升 * 0.78;
+  const 格子の左 = PAD + 一覧の幅 + 一覧と格子の間;
+  const 格子の上 = PAD + (使える高さ - 升 * WAFFLE_COLS) / 2;
+
+  /** 印 1 個ごとの持ち主。 上の行から左詰めで配る = 読む向きと同じで数えやすい */
+  const 持ち主: number[] = [];
+  配分.forEach((n, idx) => {
+    for (let k = 0; k < n; k++) 持ち主.push(idx);
+  });
+
+  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}
+      />
+
+      {/*
+        印。 **必ず 100 個描く** = 持ち主のいない印も地の色で描く。 描かないと
+        「全体のうちどれだけか」 の分母が消え、棒グラフと同じ図になる
+      */}
+      {Array.from({ length: WAFFLE_TOTAL }, (_, k) => {
+        const 行 = Math.floor(k / WAFFLE_COLS);
+        const 列 = k % WAFFLE_COLS;
+        const owner = 持ち主[k];
+        return (
+          <rect
+            key={`cell-${k}`}
+            data-cdl-role="chart-waffle-cell"
+            data-cdl-waffle-owner={owner === undefined ? "" : String(owner)}
+            x={格子の左 + 升 * 列 + (升 - 印) / 2}
+            y={格子の上 + 升 * 行 + (升 - 印) / 2}
+            width={印}
+            height={印}
+            rx={2}
+            fill={owner === undefined ? "var(--cdl-divider, #d4d4d8)" : 印の色(data[owner]!.tone, owner)}
+            fillOpacity={owner === undefined ? 0.35 : 1}
+          />
+        );
+      })}
+
+      {/* 一覧。 印の数をそのまま出す = 図を数えた結果と突き合わせられる */}
+      {data.map((d, idx) => {
+        const y = 一覧の始まり + 行の高さ * idx;
+        return (
+          <g key={`item-${idx}`} data-cdl-role="chart-waffle-item">
+            <rect x={PAD} y={y - 11} width={4} height={22} rx={2} fill={印の色(d.tone, idx)} />
+            <text
+              x={PAD + 印の幅}
+              y={y + 1}
+              fontSize={名前の級}
+              fontWeight={700}
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {d.label}
+            </text>
+            <text
+              data-cdl-role="chart-waffle-count"
+              data-cdl-unresolved={d.unresolved ? "true" : undefined}
+              x={PAD + 印の幅}
+              y={y + 20}
+              fontSize={数値の級}
+              fill="var(--cdl-text-dim, #5a6270)"
+            >
+              {数値の文字[idx]}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+/** 実値の表記。 桁区切りを入れる (他の図表と揃える) */
+function 実値表記(v: number): string {
+  return Number.isInteger(v)
+    ? v.toLocaleString("en-US")
+    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+
+/** 印の色。 明示した色が優先され、無ければ図表の系列の色を順に配る */
+function 印の色(tone: Tone | undefined, idx: number): string {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}