@cardenelabs/cdl 0.40.4 → 0.40.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.4",
+  "version": "0.40.5",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/kinds/chart-gauge.tsx

@@ -86,21 +86,85 @@ export function ChartGaugeNode({
    * 級を下げて 1 行に収める案は採らない = 件数 12 では級 7.7 が要り、この repo が
    * 他の図で使っている下限の 9 を下回る。
    */
-  const 内訳の数値 = data.map((d) => `${実値表記(d.value)}  ${割合表記(d.value / total)}`);
+  /** 内訳 1 件の数値の行 (実値と割合) */
+  const 数値の行 = (d: { value: number }): string =>
+    `${実値表記(d.value)}  ${割合表記(d.value / total)}`;
 
   /**
-   * 内訳 1 件が横に要る幅。 数値の行と色の印の広い方に、区画どうしの間を足す。
+   * 件の並びから、1 行に置ける件数と段数を出す。
    *
-   * **印の幅が広い方になる入力は組めない** = 数値の行は最も短い形 (`1  50%`) でも級 13 で
+   * **印が広い方になる入力は組めない** = 数値の行は最も短い形 (`1  50%`) でも級 13 で
    * 幅 56.7 あり、印の 30 を必ず上回る。 件数 0 の図で `Math.max` の引数が空になるのを
    * 防ぐ下限として置いている。 万一この関係が崩れても印は区画に合わせて縮む (下の `Math.min`)。
    */
-  const 件に要る幅 = Math.max(印の幅, ...内訳の数値.map((t) => textWidth(t, 数値の級))) + 区画の間;
-  const 行の件数 = Math.min(
-    Math.max(1, Math.floor(使える幅 / Math.max(件に要る幅, 1))),
-    Math.max(data.length, 1),
+  const 割り付ける = (件たち: typeof data): { 行の件数: number; 段数: number } => {
+    const 幅 = Math.max(印の幅, ...件たち.map((d) => textWidth(数値の行(d), 数値の級))) + 区画の間;
+    const 行の件数 = Math.min(
+      Math.max(1, Math.floor(使える幅 / Math.max(幅, 1))),
+      Math.max(件たち.length, 1),
+    );
+    return { 行の件数, 段数: Math.ceil(Math.max(件たち.length, 1) / 行の件数) };
+  };
+
+  /**
+   * 段の数の上限 (cdl#735)。
+   *
+   * 段が増えると弧に残る高さが尽き、**合計の字が内訳の名前より小さくなる**。 この種別は
+   * 合計を大きく見せるために作ったので、主役が入れ替わると図の意味が変わる
+   * (実測で件数 22 から合計 13 に対し名前 14、件数 30 では合計が弧の穴から 9.3 はみ出した)。
+   *
+   * 弧に残す高さを先に確保し、そこから置ける段数を逆算する。 下限 48 は
+   * 「合計の級が名前の級 14 を上回る」 ことから決めた = 縦から決まる級は半径の 0.3224 倍
+   * (内半径 0.62 × 0.52) なので、14 を超えるには半径 43.4 が要る。
+   */
+  const 弧に残す高さ = 48;
+  const 置ける段数 = Math.max(
+    1,
+    Math.floor((使える高さ - 弧に残す高さ - 弧と内訳の間) / 段の高さ),
   );
-  const 内訳の段数 = Math.ceil(Math.max(data.length, 1) / 行の件数);
+
+  /**
+   * 入り切らない件を末尾 1 件に畳む。 合計は変えない = 畳んだ件の値を足して持たせる。
+   *
+   * 弧も同じ並びで描く = 内訳と扇が食い違うと、どの色がどの件かを読めなくなる。
+   */
+  const 畳む = (残す件数: number): typeof data => {
+    if (残す件数 >= data.length) return data;
+    const 前 = data.slice(0, Math.max(0, 残す件数 - 1));
+    const 残り = data.slice(Math.max(0, 残す件数 - 1));
+    const 値 = 残り.reduce((acc, d) => acc + d.value, 0);
+    // 前の時点の値は畳めない (どの件のものか決まらない) ので落とす。
+    // 読めなかった値が 1 件でもあれば、畳んだ件も読めなかった扱いにする
+    const 読めない = 残り.some((d) => d.unresolved);
+    const 畳んだ: (typeof data)[number] = {
+      ...残り[0]!,
+      label: "その他",
+      value: 値,
+      previous: undefined,
+      ...(読めない ? { unresolved: true as const } : { unresolved: undefined }),
+    };
+    return [...前, 畳んだ];
+  };
+
+  /**
+   * 段が上限に収まるまで畳む。
+   *
+   * 畳むと数値の行が変わるので、1 行に置ける件数も変わりうる。 畳んだ結果で割り付け直し、
+   * それでも収まらなければもう一度畳む。 **元の並びから畳む** = 畳んだ件を再び畳むと
+   * 「その他」 が入れ子になる。
+   */
+  const 出す件たち = ((): typeof data => {
+    let 件たち = data;
+    for (let i = 0; i < 4; i++) {
+      const { 行の件数, 段数 } = 割り付ける(件たち);
+      if (段数 <= 置ける段数) return 件たち;
+      件たち = 畳む(Math.max(1, 置ける段数 * 行の件数));
+    }
+    return 件たち;
+  })();
+
+  const 内訳の数値 = 出す件たち.map((d) => 数値の行(d));
+  const { 行の件数, 段数: 内訳の段数 } = 割り付ける(出す件たち);
   const 内訳の高さ = 段の高さ * 内訳の段数;
 
   /**
@@ -119,7 +183,7 @@ export function ChartGaugeNode({
   const cy = PAD_TOP + radius;
 
   let cumFrac = 0;
-  const slices = data.map((d) => {
+  const slices = 出す件たち.map((d) => {
     const frac = d.value / total;
     // 9 時 (π) から 3 時 (2π) へ、 上を通って進む
     const a0 = Math.PI + cumFrac * Math.PI;
@@ -139,17 +203,24 @@ export function ChartGaugeNode({
   /**
    * 合計の字の級。
    *
-   * **内側の空きに収める**。 弧の内側は半径 `内半径` の半円で、中央に置ける横幅は
-   * `内半径 * 2`、縦は `内半径` しかない。 桁数で必要な幅が変わるため、
-   * 実際の文字列を `textWidth` で測って逆算する。
+   * **内側の空きに収める**。 弧の内側は半径 `内半径` の半円で、中央に置ける広さは
+   * 高さによって変わる。 桁数で必要な幅が変わるため、実際の文字列を `textWidth` で
+   * 測って逆算する。
+   *
+   * **上の角で測る** (cdl#735)。 中心の高さの横幅 (`内半径 * 2`) で測ると、
+   * 字は中心より上に置かれるぶんだけ穴からはみ出す (実測で桁の多い合計が 3.8 出た)。
+   * 字の上端は `cy - 級 * 1.25` (置く高さ `級 * 0.5` + 字の高さ `級 * 0.75`) なので、
+   * 上の角が円に入る条件は `(単位幅 * 級 / 2)^2 + (1.25 * 級)^2 <= 内半径^2`。
+   * 級について解くと下の式になる。
    *
-   * 縦は見出し (「合計」) の行も入るので、2 行ぶんが半円の高さに収まる比で切る。
+   * 縦は見出し (「合計」) の行も入るので、2 行ぶんが半円の高さに収まる比で別に切る。
    */
   const 合計の文字 = 実値表記(Math.round(total));
-  const 横の上限 = 内半径 * 2 * 0.86;
+  /** 級 1 あたりの字幅 */
+  const 単位幅 = Math.max(textWidth(合計の文字, 100), 1) / 100;
   const 級の候補 = Math.min(
-    // 横 = 実際の字幅から逆算する
-    (横の上限 / Math.max(textWidth(合計の文字, 100), 1)) * 100,
+    // 横 = 字の上の角が内側の円に入る大きさ
+    内半径 / Math.sqrt((単位幅 / 2) ** 2 + 1.25 ** 2),
     // 縦 = 合計 1 行 + 見出し 1 行が内側の高さに収まる比
     内半径 * 0.52,
   );
@@ -239,7 +310,7 @@ export function ChartGaugeNode({
 
         字は区画の左端に揃える。 中央揃えにすると名前の長さで位置が動き、 縦の列が揃わない。
       */}
-      {data.map((d, idx) => {
+      {出す件たち.map((d, idx) => {
         const 列 = idx % 行の件数;
         const 段 = Math.floor(idx / 行の件数);
         const x = PAD_SIDE + 内訳の幅 * 列;