@cardenelabs/cdl 0.40.9 → 0.40.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.9",
+  "version": "0.40.10",
   "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-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 }),