@cardenelabs/cdl 0.40.8 → 0.40.9

package/package.json

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

@@ -42,6 +42,18 @@ export function ChartStatNode({
 
   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})`}>
       <rect
@@ -64,7 +76,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
@@ -107,17 +123,19 @@ export function ChartStatNode({
               比率の弧。 **輪郭だけの細い線** で描く = 面で塗ると数値より目立ち、
               「数値が主役」 というこの種別の中身が崩れる
             */}
-            <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 +146,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>
         );
       })}