@cardenelabs/cdl 0.34.0 → 0.35.0

package/package.json

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

@@ -3,6 +3,7 @@ import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-gauge kind ... 上半分の弧で内訳を示し、 合計を主役に置く図 (cdl#549)。
@@ -217,23 +218,6 @@ function 切り詰める(s: string, 上限: number, 級: number): string {
   return `${out}…`;
 }
 
-/**
- * 実値の表記。 桁区切りを入れる (`chart-pie` と揃える)。
- *
- * 小数は 1 桁までに丸める。 図に置く数なので、 桁を尽くすより並びが揃う方が読みやすい。
- */
-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];

package/src/kinds/chart-number.ts

@@ -1,11 +1,11 @@
 /**
- * 図表に置く数の表記 (cdl#688)。
+ * 図表に置く数の表記 (cdl#688 / cdl#689)。
  *
- * **同じ表記を種別ごとに書き写さない**。 いま `実値表記` は 7 つの種別に同じ本体で置かれて
- * おり、片方だけ直せば図によって桁区切りの有無が変わる。 新しい種別はここから取る。
+ * **同じ表記を種別ごとに書き写さない**。 書き写すと片方だけ直した時に、図によって桁区切りの
+ * 有無や小数の桁が変わる。 数を字にする種別はここから取る。
  *
- * 既存の 7 つをここへ寄せるのは #689 で行う = 種別を新設する変更と、既にある種別の
- * 内部を組み替える変更を 1 つの取り込みに混ぜない。
+ * 寄せる前は各種別が私物の写しを持ち、「`chart-pie` と揃える」 というコメントで揃いを人の目に
+ * 委ねていた。 揃っているかは目で確かめるものではなく、1 つしか無いことで保証する。
  */
 
 /**
@@ -18,3 +18,16 @@ export function 実値表記(v: number): string {
     ? v.toLocaleString("en-US")
     : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
 }
+
+/**
+ * 取り分の表記 (cdl#542)。
+ *
+ * **整数のとき小数を出さない**。 `toFixed(1)` 固定だと 3 件とも `45.0%` のように無駄な
+ * `.0` が付き、桁が増えて読みにくい。 小数を持つ時だけ 1 桁出す。
+ *
+ * 丸めた結果が整数になる形 (`0.4499` → `45.0`) も整数として出す = 丸めた後の値で判定する。
+ */
+export function 割合表記(frac: number): string {
+  const v = Math.round(frac * 1000) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}

package/src/kinds/chart-pie.tsx

@@ -4,6 +4,7 @@ import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
 import { textWidth } from "./text-width";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-pie kind ... 1 node に datum 配列 (chartData) を保持し、 SVG path arc で円グラフ描画する。
@@ -702,33 +703,6 @@ function 扇形の切り抜き(cx: number, cy: number, r: number, 開き: number
   return <path d={d} />;
 }
 
-/**
- * 実値の表記 (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)。
  *

package/src/kinds/chart-radial.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-radial kind ... 1 件を 1 本の弧にして内側から重ね、 長さで比べる図 (cdl#550)。
@@ -190,19 +191,6 @@ function 弧の道(cx: number, cy: number, 中心半径: number, 幅: number,
   );
 }
 
-/** 実値の表記。 桁区切りを入れる (`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];

package/src/kinds/chart-slope.tsx

@@ -42,6 +42,14 @@ import { 進みを畳む, 伸ばすdash } from "./draw-progress";
  * 値と名前は **別の役割** で出す (`chart-slope-value` / `chart-slope-name`、cdl#693)。
  * 1 つにまとめると使う側が値だけに字体を当てられず、寸法を記録する側も 2 つの大きさを
  * 1 行に潰す。 他の図表 (`chart-stat` / `chart-stacked-bar`) も字を役割で分けている。
+ *
+ * ## 名前は線と同じ色で描く (cdl#698)
+ *
+ * 名前も値も同じ淡い色にすると、名前と線を突き合わせるのに線を目で辿ることになる。
+ * 交差を読ませる図なので、交差した先を追う作業が読み手に残ってしまう。
+ *
+ * 色を持たせるのは **名前だけ**。 値は太字の濃い色のままにして、数の読み比べを保つ。
+ * identity は色が、量は字が担う。
  */
 
 /** 線を引くのに最低限要る横幅。 名札が長い図でもこれだけは残す */
@@ -166,7 +174,9 @@ export function ChartSlopeNode({
           x2={x}
           y2={下端 + 6}
           stroke="var(--cdl-divider, #d4d4d8)"
-          strokeWidth={1}
+          // 太さ 1 の罫では柱に見えず、時点の見出しだけが宙に浮く。
+          // 系列の線 (2.5) より細いまま、柱として立つ太さにする
+          strokeWidth={2}
         />
       ))}
 
@@ -257,7 +267,7 @@ export function ChartSlopeNode({
                   y={左y + 5}
                   textAnchor="end"
                   fontSize={名前の級}
-                  fill="var(--cdl-text-dim, #5a6270)"
+                  fill={s.色}
                 >
                   {s.名前}
                 </text>
@@ -269,7 +279,7 @@ export function ChartSlopeNode({
                 y={右y + 5}
                 textAnchor="end"
                 fontSize={名前の級}
-                fill="var(--cdl-text-dim, #5a6270)"
+                fill={s.色}
               >
                 {s.名前}
               </text>
@@ -293,7 +303,7 @@ export function ChartSlopeNode({
                     x={右軸x + 軸から値まで + 右値幅 + 値から名前まで}
                     y={右y + 5}
                     fontSize={名前の級}
-                    fill="var(--cdl-text-dim, #5a6270)"
+                    fill={s.色}
                   >
                     {s.名前}
                   </text>

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

@@ -3,6 +3,7 @@ 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";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-stacked-bar kind ... 1 本の帯を割合で区切り、時点を並べて変化を見せる図 (cdl#551)。
@@ -214,19 +215,6 @@ function 帯を組む(
   };
 }
 
-/** 実値の表記。 桁区切りを入れる (他の図表と揃える) */
-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];

package/src/kinds/chart-stat.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-stat kind ... 数値そのものを主役にする図 (cdl#553)。
@@ -211,19 +212,6 @@ function 弧の道(cx: number, cy: number, r: number, 割合: number): string {
   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];

package/src/kinds/chart-waffle.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
+import { 実値表記 } from "./chart-number";
 
 /**
  * chart-waffle kind ... 100 個の印で割合を **数えて確かめられる** 図 (cdl#552)。
@@ -183,13 +184,6 @@ export function ChartWaffleNode({
   );
 }
 
-/** 実値の表記。 桁区切りを入れる (他の図表と揃える) */
-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];