@cardenelabs/cdl 0.40.2 → 0.40.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.2",
+  "version": "0.40.3",
   "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

@@ -65,10 +65,43 @@ export function ChartGaugeNode({
 
   const 名前の級 = 14;
   const 数値の級 = 13;
-  /** 内訳の 1 件が縦に使う高さ (印 + 名前 + 数値) */
-  const 内訳の高さ = 56;
+  /** 内訳の 1 段が縦に使う高さ (印 + 名前 + 数値) */
+  const 段の高さ = 56;
   /** 弧と内訳の間 */
   const 弧と内訳の間 = 16;
+  /** 色の印の幅と、区画どうしの間 */
+  const 印の幅 = 30;
+  const 区画の間 = 12;
+
+  /**
+   * 内訳の割付 (cdl#731)。
+   *
+   * **件数で等分するだけでは足りない**。 名前は区画に収まるまで切り詰めていたが数値は
+   * そのままだったので、件数が増えると数字が隣へはみ出してくっついた
+   * (実測で件数 10 から重なり始め、12 で 10 組)。
+   *
+   * 区画の幅を **中身から決めて**、1 行に置ける件数を出す。 余りは次の段へ送る。
+   * 段が増えたぶん弧は低くなる = 弧の高さは残りから決めているので自動で縮む。
+   *
+   * 級を下げて 1 行に収める案は採らない = 件数 12 では級 7.7 が要り、この repo が
+   * 他の図で使っている下限の 9 を下回る。
+   */
+  const 内訳の数値 = data.map((d) => `${実値表記(d.value)}  ${割合表記(d.value / total)}`);
+
+  /**
+   * 内訳 1 件が横に要る幅。 数値の行と色の印の広い方に、区画どうしの間を足す。
+   *
+   * **印の幅が広い方になる入力は組めない** = 数値の行は最も短い形 (`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 内訳の段数 = Math.ceil(Math.max(data.length, 1) / 行の件数);
+  const 内訳の高さ = 段の高さ * 内訳の段数;
 
   /**
    * 弧の外半径。
@@ -123,8 +156,8 @@ export function ChartGaugeNode({
   const 合計の級 = Math.max(11, Math.round(級の候補));
   const 見出しの級 = Math.max(9, Math.round(合計の級 * 0.38));
 
-  /** 内訳 1 件あたりの幅。 等分して左から並べる */
-  const 内訳の幅 = 使える幅 / Math.max(data.length, 1);
+  /** 内訳 1 件あたりの幅。 1 行に置く件数で等分する */
+  const 内訳の幅 = 使える幅 / 行の件数;
   const 内訳のy = cy + 弧と内訳の間;
 
   /** 弧がどこまで伸びたか (0..1、 cdl#715)。 畳み方は `draw-progress.ts` が持つ */
@@ -207,22 +240,34 @@ export function ChartGaugeNode({
         字は区画の左端に揃える。 中央揃えにすると名前の長さで位置が動き、 縦の列が揃わない。
       */}
       {data.map((d, idx) => {
-        const x = PAD_SIDE + 内訳の幅 * idx;
-        const 数値 = `${実値表記(d.value)}  ${割合表記(d.value / total)}`;
+        const 列 = idx % 行の件数;
+        const 段 = Math.floor(idx / 行の件数);
+        const x = PAD_SIDE + 内訳の幅 * 列;
+        const y = 内訳のy + 段の高さ * 段;
+        /** 区画に収まる字幅。 名前も数値も同じ幅で切る */
+        const 収まる幅 = 内訳の幅 - 区画の間;
         return (
           <g key={`legend-${idx}`} data-cdl-role="chart-gauge-item">
-            <rect x={x} y={内訳のy} width={30} height={4} rx={2} fill={arcColor(d.tone, idx)} />
+            <rect
+              x={x}
+              y={y}
+              width={Math.max(4, Math.min(印の幅, 収まる幅))}
+              height={4}
+              rx={2}
+              fill={arcColor(d.tone, idx)}
+            />
             <text
               x={x}
-              y={内訳のy + 26}
+              y={y + 26}
               fontSize={名前の級}
               fontWeight={700}
               fill="var(--cdl-text, #1a1f2a)"
             >
-              {切り詰める(d.label ?? "", 内訳の幅 - 12, 名前の級)}
+              {切り詰める(d.label ?? "", 収まる幅, 名前の級)}
             </text>
-            <text x={x} y={内訳のy + 46} fontSize={数値の級} fill="var(--cdl-text-dim, #5a6270)">
-              {数値}
+            {/* **数値も切り詰める** = 切らないと隣の区画の字とくっつく (cdl#731) */}
+            <text x={x} y={y + 46} fontSize={数値の級} fill="var(--cdl-text-dim, #5a6270)">
+              {切り詰める(内訳の数値[idx] ?? "", 収まる幅, 数値の級)}
             </text>
           </g>
         );