@cardenelabs/cdl 0.40.7 → 0.40.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.7",
+  "version": "0.40.8",
   "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/axis-ticks.ts

@@ -0,0 +1,32 @@
+/**
+ * 目盛りの刻みを、人が読む数から選ぶ (cdl#751)。
+ *
+ * `1 / 2 / 2.5 / 5` に 10 の累乗を掛けた中から、目盛りが目安の本数前後になるものを取る。
+ * 範囲をそのまま本数で割ると `680 / 4 = 170` のような数が目盛りに出て、
+ * 機械が割った数字に見える。
+ *
+ * **棒と折れ線が同じ規則を持つのでここに 1 つだけ置く**。 図ごとに書くと、片方だけ直した
+ * 時に目盛りの出方がずれる (実際に棒を直した cdl#747 で 2 箇所になった)。
+ * 図どうしに上下関係を作らないため、どちらの図でもない場所に置く。
+ *
+ * **天井と床の決め方はここに持たない**。 折れ線は床も動かし、棒は床が必ず 0 で、
+ * 規則が違う。 共有するのは刻みの選び方だけ。
+ */
+
+/**
+ * 刻みを 1 つ選ぶ。
+ *
+ * @param 範囲 縦軸が受け持つ幅。 折れ線は `最大 - 最小`、棒は最小が 0 なので `最大`
+ * @param 目安の本数 目盛りを何本くらい引きたいか
+ * @returns 刻み。 **範囲か本数が 0 以下なら 0 を返す** = 刻みを決められないことを
+ *   0 で表し、呼ぶ側がその図に合った逃げ方を選ぶ (`rules/quality.md` の
+ *   「判定できなかったことを値に潰さない」 に合わせ、勝手に 1 を返さない)
+ */
+export function 目盛りの刻み(範囲: number, 目安の本数: number): number {
+  if (!(範囲 > 0) || !(目安の本数 > 0)) return 0;
+  const 粗い = 範囲 / 目安の本数;
+  const 桁 = 10 ** Math.floor(Math.log10(粗い));
+  const 正規 = 粗い / 桁;
+  const 候補 = 正規 <= 1 ? 1 : 正規 <= 2 ? 2 : 正規 <= 2.5 ? 2.5 : 正規 <= 5 ? 5 : 10;
+  return 候補 * 桁;
+}

package/src/kinds/chart-bar.tsx

@@ -2,23 +2,7 @@ import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { resolveChartData } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
-
-/**
- * 目盛りの刻みを、人が読む数から選ぶ (cdl#747)。
- *
- * `1 / 2 / 2.5 / 5` に 10 の累乗を掛けた中から、目盛りが目安の本数前後になるものを取る。
- * 最大値をそのまま割ると `680 / 4 = 170` のような数が目盛りに出て、機械が割った数字に見える。
- *
- * 最大が 0 以下の図では刻みを決められないので 0 を返す (呼ぶ側が今までの割り方に落ちる)。
- */
-export function 目盛りの刻み(最大: number, 目安の本数: number): number {
-  if (!(最大 > 0) || !(目安の本数 > 0)) return 0;
-  const 粗い = 最大 / 目安の本数;
-  const 桁 = 10 ** Math.floor(Math.log10(粗い));
-  const 正規 = 粗い / 桁;
-  const 候補 = 正規 <= 1 ? 1 : 正規 <= 2 ? 2 : 正規 <= 2.5 ? 2.5 : 正規 <= 5 ? 5 : 10;
-  return 候補 * 桁;
-}
+import { 目盛りの刻み } from "./axis-ticks";
 
 /**
  * その数を書き切るのに要る小数の桁数。
@@ -32,6 +16,16 @@ function 小数の桁(n: number): number {
   return Math.min(20, Math.max(0, 小数部 - Number(指数)));
 }
 
+/**
+ * 字の大きさ (cdl#753)。
+ *
+ * **値札を軸の名前より大きくする** = 値札は棒の上に載る数そのもので、
+ * 軸の名前は目盛りの側にある。 折れ線 (`chart-line.tsx`) と同じ組にしてある。
+ * 2 図で揃っていることは検査が実物から読んで確かめる (`chart-label-rank.test.tsx`)。
+ */
+const 値札の級 = 12;
+const 軸の名前の級 = 11;
+
 /** 刻みの倍数を足し込んだ時に出る誤差 (`0.1 * 3 = 0.30000000000000004`) を落とす */
 const 桁で丸める = (v: number, 桁: number): number => Number(v.toFixed(桁));
 
@@ -80,6 +74,7 @@ export function ChartBarNode({
    * 最大値をそのまま使うと 0 が 5 つ並ぶ縦軸になり、何も読めない。
    */
   const 天井のもと = vMax > 0 ? vMax : 1;
+  // 棒は床が必ず 0 なので、範囲 = 天井のもと
   const 刻み = 目盛りの刻み(天井のもと, 目盛りの目安);
   const 刻みの桁 = 小数の桁(刻み);
   /**
@@ -213,7 +208,7 @@ export function ChartBarNode({
               data-cdl-role="chart-bar-value"
               x={bx + barW / 2}
               y={見えている頭 - 8}
-              fontSize={12}
+              fontSize={値札の級}
               fontWeight={600}
               textAnchor="middle"
               fill="var(--cdl-text, #1a1f2a)"
@@ -224,7 +219,7 @@ export function ChartBarNode({
               data-cdl-role="chart-bar-label"
               x={bx + barW / 2}
               y={PAD_TOP + canvasH + 18}
-              fontSize={11}
+              fontSize={軸の名前の級}
               textAnchor="middle"
               fill="var(--cdl-text-dim, #5a6270)"
             >

package/src/kinds/chart-line.tsx

@@ -2,9 +2,24 @@ import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { resolveChartData } from "../render/payload-binding";
 import { 進みを畳む, 伸ばすdash } from "./draw-progress";
+import { 目盛りの刻み } from "./axis-ticks";
 
 export type ChartLineScale = { min: number; max: number; ticks: number[] };
 
+/** 縦軸に引きたい目盛りの本数の目安 */
+const 目盛りの目安 = 4;
+
+/**
+ * 字の大きさ (cdl#753)。
+ *
+ * **値札を軸の名前より大きくする** = 値札は印の上に載る数そのもので、
+ * 軸の名前は目盛りの側にある。 棒グラフ (`chart-bar.tsx`) と同じ組にしてある。
+ * 凡例を持つ図 (半円ゲージ / 同心の弧 / 100 個の印 / 内訳の帯) は
+ * 名前が行を見分ける鍵になるので逆の順で、そちらは揃えない。
+ */
+const 値札の級 = 12;
+const 軸の名前の級 = 11;
+
 const 数を書く = (value: number): string =>
   value.toLocaleString("en-US", { maximumFractionDigits: 12 });
 
@@ -17,14 +32,13 @@ export function 折れ線の目盛(values: readonly number[]): ChartLineScale {
     rawMax += room;
   }
 
-  const roughStep = (rawMax - rawMin) / 4;
-  const power = 10 ** Math.floor(Math.log10(roughStep));
-  const fraction = roughStep / power;
-  const niceFraction =
-    fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;
-  const step = niceFraction * power;
+  // 折れ線は床も動かすので、範囲 = 最大 - 最小。 直前の広げ方で必ず正になる
+  const step = 目盛りの刻み(rawMax - rawMin, 目盛りの目安);
   const min = Math.floor(rawMin / step) * step;
   const max = Math.ceil(rawMax / step) * step;
+  // 刻みが決まらない入力 (値が数でない) では `tickCount` が数にならず、
+  // 目盛りは空になる。 **この空を守りの分岐で作らない** = 同じものを 2 通りで作ると、
+  // 片方を外しても検査が落ちず、要るのか要らないのか判らなくなる (cdl#751 の変異試験で実測)
   const tickCount = Math.round((max - min) / step);
   const ticks = Array.from({ length: tickCount + 1 }, (_, i) => {
     const value = min + step * i;
@@ -165,6 +179,7 @@ export function ChartLineNode({
             opacity={0.65}
           />
           <text
+            data-cdl-role="chart-line-tick"
             x={PAD_LEFT - 8}
             y={t.y + 4}
             fontSize={11}
@@ -254,7 +269,7 @@ export function ChartLineNode({
               data-cdl-role="chart-line-value"
               x={cx}
               y={labelY}
-              fontSize={11}
+              fontSize={値札の級}
               fontWeight={600}
               textAnchor="middle"
               fill="var(--cdl-text, #1a1f2a)"
@@ -309,9 +324,10 @@ export function ChartLineNode({
           <g key={`pt-${idx}`} data-cdl-unresolved={d.unresolved ? "true" : undefined}>
             {点と値}
             <text
+              data-cdl-role="chart-line-label"
               x={cx}
               y={PAD_TOP + canvasH + 20}
-              fontSize={12}
+              fontSize={軸の名前の級}
               textAnchor="middle"
               fill="var(--cdl-text-dim, #5a6270)"
             >