@cardenelabs/cdl 0.40.9 → 0.40.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.9",
+  "version": "0.40.11",
   "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-bar.tsx

@@ -67,13 +67,19 @@ export function ChartBarNode({
   const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
 
   const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
+  /**
+   * 縦軸を決める元になる高さ。 **前の時点も含める** (cdl#767)。
+   * 含めないと、前が今より大きい件で印が枠の外へ出る。
+   */
+  const 軸のもと =
+    data.length > 0 ? Math.max(vMax, ...data.map((d) => d.previous ?? 0)) : vMax;
 
   const 目盛りの目安 = 4;
   /**
    * 目盛りを引く元の高さ。 値が 0 以下しか無い図 (と値を読めない図) では 1 を使う =
    * 最大値をそのまま使うと 0 が 5 つ並ぶ縦軸になり、何も読めない。
    */
-  const 天井のもと = vMax > 0 ? vMax : 1;
+  const 天井のもと = 軸のもと > 0 ? 軸のもと : 1;
   // 棒は床が必ず 0 なので、範囲 = 天井のもと
   const 刻み = 目盛りの刻み(天井のもと, 目盛りの目安);
   const 刻みの桁 = 小数の桁(刻み);
@@ -193,6 +199,37 @@ export function ChartBarNode({
             fillOpacity={濃さ(d.value)}
           />
         );
+        /**
+         * 前の時点の印 (cdl#767)。
+         *
+         * **重ねた棒ではなく線にする** = 同じ幅の棒を後ろに置くと、前 < 今 の件では
+         * 今の棒に完全に隠れて何も見えない。 線なら前後どちらでも見える。
+         *
+         * **棒より少し広く引く** = 棒と同じ幅だと、前と今が同じ値の時に棒の頭と
+         * 重なって 1 本に見える。 左右にはみ出させて別のものだと分かる形にする。
+         *
+         * **伸びの包みに入れない** = 印は「どこから動いたか」 を示す目盛りで、
+         * 棒と一緒に伸びると比べる相手が動いてしまう。
+         *
+         * **件ごとに出す**。 円グラフ (cdl#679) は書かない件を 0 として扱うが、あちらは
+         * 輪の内外で色の並びを対応させる必要があるため。 棒の印は 1 本ずつ独立しており、
+         * 書かない件に 0 の印を引くと「前は 0 だった」 と読めてしまう。
+         */
+        const 印のはみ出し = Math.min(barW * 0.18, 8);
+        const 前の印 =
+          d.previous === undefined ? null : (
+            <line
+              data-cdl-role="chart-bar-previous"
+              data-cdl-unresolved={d.unresolved ? "true" : undefined}
+              x1={bx - 印のはみ出し}
+              y1={yAt(Math.max(0, d.previous))}
+              x2={bx + barW + 印のはみ出し}
+              y2={yAt(Math.max(0, d.previous))}
+              stroke="var(--cdl-text-mute, #8a8678)"
+              strokeWidth={1.5}
+              strokeDasharray="5 3"
+            />
+          );
         return (
           <g key={`bar-${idx}`}>
             {/* 描く指定が無い図には包みを足さない = 既存の図の DOM を 1 要素も変えない */}
@@ -203,6 +240,7 @@ export function ChartBarNode({
             ) : (
               棒
             )}
+            {前の印}
             {/* 値のほうが読ませたい数。 横軸の名前より大きく太くする (cdl#747) */}
             <text
               data-cdl-role="chart-bar-value"

package/src/kinds/chart-gauge.tsx

@@ -182,22 +182,60 @@ export function ChartGaugeNode({
   /** 弧の中心。 上半分だけを描くので、 中心は弧の下端に来る */
   const cy = PAD_TOP + radius;
 
+  /**
+   * 前の時点を書いた件があるか (cdl#767)。
+   *
+   * **1 件でも書けば輪が 2 つになる**。 持たない件は前の時点で 0 として扱う =
+   * 件を落とすと内外で色の並びが対応しなくなる (円グラフ cdl#679 と同じ判断)。
+   *
+   * 半円は **針を持つ図ではなく、半分の円グラフ** (件を積んで合計を中央に出す形) なので、
+   * 棒や弧のような 1 件 1 本の印ではなく輪にする。
+   */
+  const 前あり = 出す件たち.some((d) => d.previous !== undefined);
+  const 前の値 = 出す件たち.map((d) => Math.max(0, d.previous ?? 0));
+  const 前の合計 = 前の値.reduce((acc, v) => acc + v, 0);
+
+  /**
+   * 輪の割り付け。 **前を書かない図では今の輪を 1 mm も動かさない** =
+   * 書いていない図の DOM を変えない。
+   *
+   * 前を書いた図では、帯を 内 (前) と 外 (今) に分ける。 並びは 前 → 今、
+   * すなわち 内 → 外 で円グラフ (cdl#679) と揃える。
+   */
+  const 帯 = radius - 内半径;
+  const 今の内半径 = 前あり ? 内半径 + 帯 * 0.42 : 内半径;
+  const 前の内半径 = 内半径;
+  const 前の外半径 = 内半径 + 帯 * 0.32;
+
+  /** 9 時 (π) から 3 時 (2π) へ、 上を通って進む扇 1 つ分の道 */
+  const 扇の道 = (a0: number, a1: number, 内: number, 外: number): string => {
+    const 外1 = 極(cx, cy, 外, a0);
+    const 外2 = 極(cx, cy, 外, a1);
+    const 内2 = 極(cx, cy, 内, a1);
+    const 内1 = 極(cx, cy, 内, a0);
+    // 半円の中では 1 つの扇が半周を超えないため、 大きい弧の指定は常に 0
+    return (
+      `M ${外1.x} ${外1.y} A ${外} ${外} 0 0 1 ${外2.x} ${外2.y} ` +
+      `L ${内2.x} ${内2.y} A ${内} ${内} 0 0 0 ${内1.x} ${内1.y} Z`
+    );
+  };
+
   let cumFrac = 0;
   const slices = 出す件たち.map((d) => {
     const frac = d.value / total;
-    // 9 時 (π) から 3 時 (2π) へ、 上を通って進む
     const a0 = Math.PI + cumFrac * Math.PI;
     const a1 = a0 + frac * Math.PI;
     cumFrac += frac;
-    const 外1 = 極(cx, cy, radius, a0);
-    const 外2 = 極(cx, cy, radius, a1);
-    const 内2 = 極(cx, cy, 内半径, a1);
-    const 内1 = 極(cx, cy, 内半径, a0);
-    // 半円の中では 1 つの扇が半周を超えないため、 大きい弧の指定は常に 0
-    const path =
-      `M ${外1.x} ${外1.y} A ${radius} ${radius} 0 0 1 ${外2.x} ${外2.y} ` +
-      `L ${内2.x} ${内2.y} A ${内半径} ${内半径} 0 0 0 ${内1.x} ${内1.y} Z`;
-    return { d, frac, path };
+    return { d, frac, path: 扇の道(a0, a1, 今の内半径, radius) };
+  });
+
+  let 前のcum = 0;
+  const 前の扇たち = 出す件たち.map((d, idx) => {
+    const frac = 前の合計 > 0 ? (前の値[idx] ?? 0) / 前の合計 : 0;
+    const a0 = Math.PI + 前のcum * Math.PI;
+    const a1 = a0 + frac * Math.PI;
+    前のcum += frac;
+    return { d, frac, path: 扇の道(a0, a1, 前の内半径, 前の外半径) };
   });
 
   /**
@@ -249,6 +287,28 @@ export function ChartGaugeNode({
     />
   ));
 
+  /**
+   * 前の時点の輪 (cdl#767)。 **書かない図では 1 要素も出さない**。
+   *
+   * 今の輪と同じ色の並びで、内側に細く置く。 区切りの余白は今の輪より細くする =
+   * 帯そのものが細いので、同じ太さで抜くと扇が分断されて見える。
+   */
+  const 前の弧たち = 前あり
+    ? 前の扇たち.map((s, idx) => (
+        <path
+          key={`prev-arc-${idx}`}
+          data-cdl-role="chart-gauge-previous"
+          data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
+          d={s.path}
+          fill={arcColor(s.d.tone, idx)}
+          fillOpacity={0.45}
+          stroke="var(--cdl-node-fill, #ffffff)"
+          strokeWidth={1.5}
+          strokeLinejoin="round"
+        />
+      ))
+    : null;
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -277,7 +337,17 @@ export function ChartGaugeNode({
         </defs>
       )}
       {/* 描く指定が無い図には包みを足さず、 従来の DOM 構造を保つ */}
-      {drawing ? <g clipPath={`url(#${切り抜きid})`}>{弧たち}</g> : 弧たち}
+      {drawing ? (
+        <g clipPath={`url(#${切り抜きid})`}>
+          {前の弧たち}
+          {弧たち}
+        </g>
+      ) : (
+        <>
+          {前の弧たち}
+          {弧たち}
+        </>
+      )}
 
       {/*
         合計。 この種別の主役なので図の中でいちばん大きい字にするが、 **弧の内側に収める**。

package/src/kinds/chart-radial.tsx

@@ -103,9 +103,15 @@ export function ChartRadialNode({
   const rings = data.map((d, idx) => {
     const frac = d.value / total;
     const 中心半径 = 外半径 - 帯1本 * idx - 帯1本 / 2;
+    /**
+     * 前の時点の取り分 (cdl#767)。 **今の合計で割る** = 前の合計は書けないので、
+     * 「今の全体で見ると前はどこにいたか」 を示す印になる。
+     */
+    const 前の割合 = d.previous === undefined ? null : Math.max(0, d.previous) / total;
     return {
       d,
       frac,
+      前の割合,
       中心半径,
       // 軌道は全周。 1 周ちょうどは弧で表せないので、 わずかに欠かして描く
       軌道: 弧の道(弧のcx, cy, 中心半径, 帯の幅, 0.9999),
@@ -173,6 +179,31 @@ export function ChartRadialNode({
       {/* 描く指定が無い図には包みを足さず、 従来の DOM 構造を保つ */}
       {drawing ? <g clipPath={`url(#${切り抜きid})`}>{取り分たち}</g> : 取り分たち}
 
+      {/*
+        前の時点の印 (cdl#767)。
+
+        **弧ではなく帯を横切る線にする** = 同じ帯に薄い弧を重ねると、前 < 今 の件では
+        今の弧に完全に隠れて何も見えない。 線なら前後どちらでも見える。
+
+        **切り抜きに入れない** = 印は「どこから動いたか」 を示す目盛りで、弧と一緒に
+        開くと比べる相手が動いてしまう。
+
+        **件ごとに出す**。 書かない件に 0 の印を置くと「前は 0 だった」 と読めてしまう。
+      */}
+      {rings.map((r, idx) =>
+        r.前の割合 === null ? null : (
+          <line
+            key={`prev-${idx}`}
+            data-cdl-role="chart-radial-previous"
+            data-cdl-unresolved={r.d.unresolved ? "true" : undefined}
+            {...帯を横切る印(弧のcx, cy, r.中心半径, 帯の幅, Math.min(r.前の割合, 0.9999))}
+            stroke="var(--cdl-text-mute, #8a8678)"
+            strokeWidth={2}
+            strokeLinecap="round"
+          />
+        ),
+      )}
+
       {/* 一覧。 行の並びが弧の並び (外から内へ) と対応する */}
       {data.map((d, idx) => {
         const y = 一覧の始まり + 行の高さ * idx;
@@ -225,6 +256,34 @@ function 弧の道(cx: number, cy: number, 中心半径: number, 幅: number,
   );
 }
 
+/**
+ * 帯を横切る印の両端 (cdl#767)。
+ *
+ * `弧の道` と同じ起点 (12 時) と向き (時計回り) を使う = 印と弧が別の角度を指すと、
+ * どちらが正しいのか読み手に決められない。
+ *
+ * **帯より少し長く引く** = 帯と同じ長さだと、前と今が同じ割合の時に弧の端と重なって
+ * 区別が付かない。 内外へはみ出させて別のものだと分かる形にする。
+ */
+function 帯を横切る印(
+  cx: number,
+  cy: number,
+  中心半径: number,
+  幅: number,
+  割合: number,
+): { x1: number; y1: number; x2: number; y2: number } {
+  const はみ出し = Math.min(幅 * 0.3, 5);
+  const 外 = 中心半径 + 幅 / 2 + はみ出し;
+  const 内 = Math.max(0.5, 中心半径 - 幅 / 2 - はみ出し);
+  const a = -Math.PI / 2 + 割合 * Math.PI * 2;
+  return {
+    x1: cx + 内 * Math.cos(a),
+    y1: cy + 内 * Math.sin(a),
+    x2: cx + 外 * Math.cos(a),
+    y2: cy + 外 * Math.sin(a),
+  };
+}
+
 /** 弧の色。 明示した色が優先され、 無ければ図表の系列の色を順に配る */
 function arcColor(tone: Tone | undefined, idx: number): string {
   if (tone) return TONE[tone];

package/src/kinds/chart-stat.tsx

@@ -18,8 +18,13 @@ import { 実値表記, 割合表記 } from "./chart-number";
  *
  * ## 数値をいちばん大きく組む
  *
- * 件ごとに区画を割り、名前 / 数値 / 割合を縦に積む。 **数値の字を名前より大きくする** のが
- * この種別の中身で、大小が逆転したら別の図になる。
+ * 件ごとに区画を割り、名前 / 数値 / 前の時点 / 割合を縦に積む。 **数値の字を名前より大きくする**
+ * のがこの種別の中身で、大小が逆転したら別の図になる。
+ *
+ * ## 前の時点は書いた図にだけ足す (cdl#763)
+ *
+ * `previous` を書いた図では数値の下に前の値を 1 行添える。 書いていない図では 1 行も足さず、
+ * 縦の位置も変えない = 前の値と関係の無い図の見た目を動かさない。
  *
  * ## 弧は輪郭だけの細い線にする
  *
@@ -40,7 +45,15 @@ export function ChartStatNode({
   const data = resolveChartData(node.chartData ?? [], stateValues);
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
 
-  const 区画 = 区画の割付(node.w, node.h, data.length);
+  /**
+   * 前の時点を出すか (cdl#763)。
+   *
+   * **図の単位で決める**。 件ごとに決めると、一部だけ前を持つ図で行の位置が件ごとに
+   * ずれる。 縦の位置は件数に依らないという既存の割付の考えに揃える。
+   */
+  const 前を出す = data.some((d) => d.previous !== undefined);
+
+  const 区画 = 区画の割付(node.w, node.h, data.length, 前を出す);
 
   /**
    * 割合を出すか (cdl#759)。
@@ -119,6 +132,29 @@ export function ChartStatNode({
               {数値}
             </text>
 
+            {/*
+              前の時点の値 (cdl#763)。 **`0` は値なので描く** = `undefined` と区別しないと、
+              前が 0 だった件だけ黙って消える。 呼び方は積み上げの帯と揃える
+            */}
+            {d.previous !== undefined && (
+              <text
+                data-cdl-role="chart-stat-previous"
+                data-cdl-unresolved={d.unresolved ? "true" : undefined}
+                x={枠.w / 2}
+                y={区画.前のy}
+                fontSize={収める級(
+                  `前 ${実値表記(d.previous)}`,
+                  枠.w - 区画.余白 * 2,
+                  区画.前の級,
+                  8,
+                )}
+                textAnchor="middle"
+                fill="var(--cdl-text-dim, #5a6270)"
+              >
+                {`前 ${実値表記(d.previous)}`}
+              </text>
+            )}
+
             {/*
               比率の弧。 **輪郭だけの細い線** で描く = 面で塗ると数値より目立ち、
               「数値が主役」 というこの種別の中身が崩れる
@@ -171,34 +207,47 @@ export function ChartStatNode({
  * 件数で横に等分する。 **縦の位置は件数に依らない** = 件数が変わると数値の高さが動く形に
  * すると、同じ図を並べた時に数値の行が揃わない。
  */
-function 区画の割付(w: number, h: number, 件数: number) {
+function 区画の割付(w: number, h: number, 件数: number, 前を出す: boolean) {
   const 余白 = 20;
   const 幅 = 件数 > 0 ? w / 件数 : w;
   const 名前の級 = 14;
   /** 数値の級。 **名前より大きい** のがこの種別の中身 */
   const 数値の級 = 40;
+  /** 前の時点の級。 名前と同じにする = 数値より大きくすると主役が入れ替わる (cdl#763) */
+  const 前の級 = 名前の級;
   const 割合の級 = 12;
   const 弧の半径 = 20;
   const 弧の太さ = 4;
 
-  // 上から 名前 / 数値 / 弧 / 割合 の順に積む。 中身の高さを出してから縦中央に寄せる
-  const 中身の高さ = 名前の級 + 12 + 数値の級 + 16 + 弧の半径 * 2 + 8 + 割合の級;
+  /**
+   * 前の行が使う縦の量 (cdl#763)。
+   *
+   * **前を持たない図では 0 にする**。 足すと既存の図で数値の位置が上へずれる =
+   * 前の値と関係の無い図の見た目が変わる。
+   */
+  const 前の高さ = 前を出す ? 8 + 前の級 : 0;
+
+  // 上から 名前 / 数値 / 前 / 弧 / 割合 の順に積む。 中身の高さを出してから縦中央に寄せる
+  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 + 前の級;
+  const 弧のy = 数値のy + 前の高さ + 16 + 弧の半径;
   const 割合のy = 弧のy + 弧の半径 + 8 + 割合の級;
 
   return {
     余白,
     名前の級,
     数値の級,
+    前の級,
     割合の級,
     弧の半径,
     弧の太さ,
     名前のy,
     数値のy,
+    前のy,
     弧のy,
     割合のy,
     枠: (idx: number) => ({ x: 幅 * idx, y: 0, w: 幅, h }),