@cardenelabs/cdl 0.40.8 → 0.40.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.8",
+  "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,27 @@ 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)。
+   *
+   * 割合は **この図に載っている全件の合計に対する取り分** なので、件が 1 つだと分母が
+   * 自分自身になり必ず `100%` になる。 値が動いても割合は動かない。 数値を主役にする
+   * 種別で、主役の隣に何も伝えない数と輪を常に出すことになる。
+   *
+   * **判定は件数で行う**。 `割合 === 1` で判定すると、件が 2 つ以上でも片方が 0 の図まで
+   * 消える。 その図の `100%` は「他が 0 で自分が全部」 という読みが成立する。
+   */
+  const 割合を出す = data.length > 1;
 
   return (
     <g transform={`translate(${x0} ${y0})`}>
@@ -64,7 +89,11 @@ export function ChartStatNode({
         // 数値は区画に収まるまで小さくする。 収まらないまま描くと隣の区画へはみ出す
         const 数値の級 = 収める級(数値, 枠.w - 区画.余白 * 2, 区画.数値の級, 区画.名前の級 + 1);
         return (
-          <g key={`stat-${idx}`} data-cdl-role="chart-stat-item" transform={`translate(${枠.x} ${枠.y})`}>
+          <g
+            key={`stat-${idx}`}
+            data-cdl-role="chart-stat-item"
+            transform={`translate(${枠.x} ${枠.y})`}
+          >
             {/* 仕切り。 1 件だけの図では引かない (仕切る相手がいない) */}
             {idx > 0 && (
               <line
@@ -103,21 +132,46 @@ 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>
+            )}
+
             {/*
               比率の弧。 **輪郭だけの細い線** で描く = 面で塗ると数値より目立ち、
               「数値が主役」 というこの種別の中身が崩れる
             */}
-            <circle
-              data-cdl-role="chart-stat-track"
-              cx={枠.w / 2}
-              cy={区画.弧のy}
-              r={区画.弧の半径}
-              fill="none"
-              stroke="var(--cdl-divider, #d4d4d8)"
-              strokeWidth={区画.弧の太さ}
-              strokeOpacity={0.5}
-            />
-            {frac > 0 && (
+            {割合を出す && (
+              <circle
+                data-cdl-role="chart-stat-track"
+                cx={枠.w / 2}
+                cy={区画.弧のy}
+                r={区画.弧の半径}
+                fill="none"
+                stroke="var(--cdl-divider, #d4d4d8)"
+                strokeWidth={区画.弧の太さ}
+                strokeOpacity={0.5}
+              />
+            )}
+            {割合を出す && frac > 0 && (
               <path
                 data-cdl-role="chart-stat-arc"
                 d={弧の道(枠.w / 2, 区画.弧のy, 区画.弧の半径, Math.min(frac, 0.9999))}
@@ -128,16 +182,18 @@ export function ChartStatNode({
               />
             )}
 
-            <text
-              data-cdl-role="chart-stat-share"
-              x={枠.w / 2}
-              y={区画.割合のy}
-              fontSize={区画.割合の級}
-              textAnchor="middle"
-              fill="var(--cdl-text-dim, #5a6270)"
-            >
-              {割合表記(frac)}
-            </text>
+            {割合を出す && (
+              <text
+                data-cdl-role="chart-stat-share"
+                x={枠.w / 2}
+                y={区画.割合のy}
+                fontSize={区画.割合の級}
+                textAnchor="middle"
+                fill="var(--cdl-text-dim, #5a6270)"
+              >
+                {割合表記(frac)}
+              </text>
+            )}
           </g>
         );
       })}
@@ -151,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 }),