@cardenelabs/cdl 0.40.8 → 0.40.10

package/CHANGELOG.md

@@ -5,6 +5,51 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.40.10] - 2026-09-08
+
+### Fixed
+
+- **`chart-stat` が受け取った前の時点の値を描くようにした** (#763)
+
+  記法は datum に `previous` を書けて解決の処理も通していたのに、数値を主役にする図だけが
+  読んでいなかった。 書き手からは「前の値も見せたくて書いた」 のに、絵は何も変わらなかった。
+
+  数値の下に 1 行添える。 呼び方は積み上げの帯 (`chart-stacked-bar`) と揃えた。
+
+  ```
+        解約率        <- 名前
+          24          <- 数値 (主役)
+        前 38         <- 足した行
+  ```
+
+  | 図 | 前の行 | 縦の位置 |
+  |---|---|---|
+  | `previous` を書いた | 出る (`chart-stat-previous`) | 行のぶん中身が高くなる |
+  | 書いていない | 出さない | 変わらない |
+
+  **`0` は値として描く**。 `undefined` と同じに扱うと、前が 0 だった件だけ黙って消える。
+  一部の件だけ前を持つ図では、行の位置を件ごとにずらさず揃える。
+
+  字は名前と同じ級までにする。 数値より大きくすると「数値が主役」 というこの種別の中身が
+  入れ替わる。
+
+## [0.40.9] - 2026-09-08
+
+### Fixed
+
+- **件が 1 つの `chart-stat` に意味のない `100%` と全周の弧を出さなくした** (#759)
+
+  割合は「この図に載っている全件の合計に対する取り分」 なので、件が 1 つだと分母が
+  自分自身になり必ず `100%` になる。 値が動いても割合は動かない。
+
+  | 件数 | 名前 / 数値 | 割合の字 / 弧 / 下地 |
+  |---|---|---|
+  | 1 | 出る | 出さない |
+  | 2 以上 | 出る | 出る (変わらず) |
+
+  判定は件数で行う。 `割合 === 1` で判定すると、件が 2 つ以上でも片方が 0 の図まで消える。
+  その図の `100%` は「他が 0 で自分が全部」 という読みが成立する。
+
 ## [0.40.8] - 2026-09-08
 
 ### Changed
@@ -1987,7 +2032,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.8...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.10...HEAD
+[0.40.10]: https://github.com/cardene777/cdl/compare/v0.40.9...v0.40.10
+[0.40.9]: https://github.com/cardene777/cdl/compare/v0.40.8...v0.40.9
 [0.40.8]: https://github.com/cardene777/cdl/compare/v0.40.7...v0.40.8
 [0.40.7]: https://github.com/cardene777/cdl/compare/v0.40.6...v0.40.7
 [0.40.6]: https://github.com/cardene777/cdl/compare/v0.40.5...v0.40.6

package/dist/index.cjs

@@ -25229,7 +25229,9 @@ function ChartStatNode({
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
-  const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length);
+  const \u524D\u3092\u51FA\u3059 = data.some((d) => d.previous !== void 0);
+  const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length, \u524D\u3092\u51FA\u3059);
+  const \u5272\u5408\u3092\u51FA\u3059 = data.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -25251,109 +25253,140 @@ function ChartStatNode({
       const \u8272 = \u5370\u306E\u8272(d.tone, idx);
       const \u6570\u5024 = \u5B9F\u5024\u8868\u8A18(d.value);
       const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A02.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
-      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
-        idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            "data-cdl-role": "chart-stat-divider",
-            x1: 0,
-            y1: \u533A\u753B.\u4F59\u767D,
-            x2: 0,
-            y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
-            stroke: "var(--cdl-divider, #d4d4d8)",
-            strokeWidth: 1
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            "data-cdl-role": "chart-stat-label",
-            x: \u67A02.w / 2,
-            y: \u533A\u753B.\u540D\u524D\u306Ey,
-            fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
-            fontWeight: 700,
-            textAnchor: "middle",
-            fill: "var(--cdl-text-dim, #5a6270)",
-            children: d.label
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            "data-cdl-role": "chart-stat-value",
-            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
-            x: \u67A02.w / 2,
-            y: \u533A\u753B.\u6570\u5024\u306Ey,
-            fontSize: \u6570\u5024\u306E\u7D1A,
-            fontWeight: 700,
-            textAnchor: "middle",
-            fill: \u8272,
-            children: \u6570\u5024
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            "data-cdl-role": "chart-stat-track",
-            cx: \u67A02.w / 2,
-            cy: \u533A\u753B.\u5F27\u306Ey,
-            r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
-            fill: "none",
-            stroke: "var(--cdl-divider, #d4d4d8)",
-            strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
-            strokeOpacity: 0.5
-          }
-        ),
-        frac > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            "data-cdl-role": "chart-stat-arc",
-            d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
-            fill: "none",
-            stroke: \u8272,
-            strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            "data-cdl-role": "chart-stat-share",
-            x: \u67A02.w / 2,
-            y: \u533A\u753B.\u5272\u5408\u306Ey,
-            fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
-            textAnchor: "middle",
-            fill: "var(--cdl-text-dim, #5a6270)",
-            children: \u5272\u5408\u8868\u8A18(frac)
-          }
-        )
-      ] }, `stat-${idx}`);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "g",
+        {
+          "data-cdl-role": "chart-stat-item",
+          transform: `translate(${\u67A02.x} ${\u67A02.y})`,
+          children: [
+            idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                "data-cdl-role": "chart-stat-divider",
+                x1: 0,
+                y1: \u533A\u753B.\u4F59\u767D,
+                x2: 0,
+                y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
+                stroke: "var(--cdl-divider, #d4d4d8)",
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                "data-cdl-role": "chart-stat-label",
+                x: \u67A02.w / 2,
+                y: \u533A\u753B.\u540D\u524D\u306Ey,
+                fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
+                fontWeight: 700,
+                textAnchor: "middle",
+                fill: "var(--cdl-text-dim, #5a6270)",
+                children: d.label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                "data-cdl-role": "chart-stat-value",
+                "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+                x: \u67A02.w / 2,
+                y: \u533A\u753B.\u6570\u5024\u306Ey,
+                fontSize: \u6570\u5024\u306E\u7D1A,
+                fontWeight: 700,
+                textAnchor: "middle",
+                fill: \u8272,
+                children: \u6570\u5024
+              }
+            ),
+            d.previous !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                "data-cdl-role": "chart-stat-previous",
+                "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+                x: \u67A02.w / 2,
+                y: \u533A\u753B.\u524D\u306Ey,
+                fontSize: \u53CE\u3081\u308B\u7D1A(
+                  `\u524D ${\u5B9F\u5024\u8868\u8A18(d.previous)}`,
+                  \u67A02.w - \u533A\u753B.\u4F59\u767D * 2,
+                  \u533A\u753B.\u524D\u306E\u7D1A,
+                  8
+                ),
+                textAnchor: "middle",
+                fill: "var(--cdl-text-dim, #5a6270)",
+                children: `\u524D ${\u5B9F\u5024\u8868\u8A18(d.previous)}`
+              }
+            ),
+            \u5272\u5408\u3092\u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                "data-cdl-role": "chart-stat-track",
+                cx: \u67A02.w / 2,
+                cy: \u533A\u753B.\u5F27\u306Ey,
+                r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
+                fill: "none",
+                stroke: "var(--cdl-divider, #d4d4d8)",
+                strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
+                strokeOpacity: 0.5
+              }
+            ),
+            \u5272\u5408\u3092\u51FA\u3059 && frac > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                "data-cdl-role": "chart-stat-arc",
+                d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
+                fill: "none",
+                stroke: \u8272,
+                strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
+                strokeLinecap: "round"
+              }
+            ),
+            \u5272\u5408\u3092\u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                "data-cdl-role": "chart-stat-share",
+                x: \u67A02.w / 2,
+                y: \u533A\u753B.\u5272\u5408\u306Ey,
+                fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
+                textAnchor: "middle",
+                fill: "var(--cdl-text-dim, #5a6270)",
+                children: \u5272\u5408\u8868\u8A18(frac)
+              }
+            )
+          ]
+        },
+        `stat-${idx}`
+      );
     })
   ] });
 }
-function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570) {
+function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570, \u524D\u3092\u51FA\u3059) {
   const \u4F59\u767D = 20;
   const \u5E45 = \u4EF6\u6570 > 0 ? w / \u4EF6\u6570 : w;
   const \u540D\u524D\u306E\u7D1A = 14;
   const \u6570\u5024\u306E\u7D1A = 40;
+  const \u524D\u306E\u7D1A = \u540D\u524D\u306E\u7D1A;
   const \u5272\u5408\u306E\u7D1A = 12;
   const \u5F27\u306E\u534A\u5F84 = 20;
   const \u5F27\u306E\u592A\u3055 = 4;
-  const \u4E2D\u8EAB\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u7D1A + 12 + \u6570\u5024\u306E\u7D1A + 16 + \u5F27\u306E\u534A\u5F84 * 2 + 8 + \u5272\u5408\u306E\u7D1A;
+  const \u524D\u306E\u9AD8\u3055 = \u524D\u3092\u51FA\u3059 ? 8 + \u524D\u306E\u7D1A : 0;
+  const \u4E2D\u8EAB\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u7D1A + 12 + \u6570\u5024\u306E\u7D1A + \u524D\u306E\u9AD8\u3055 + 16 + \u5F27\u306E\u534A\u5F84 * 2 + 8 + \u5272\u5408\u306E\u7D1A;
   const \u4E0A\u7AEF = Math.max(\u4F59\u767D, (h - \u4E2D\u8EAB\u306E\u9AD8\u3055) / 2);
   const \u540D\u524D\u306Ey = \u4E0A\u7AEF + \u540D\u524D\u306E\u7D1A;
   const \u6570\u5024\u306Ey = \u540D\u524D\u306Ey + 12 + \u6570\u5024\u306E\u7D1A * 0.78;
-  const \u5F27\u306Ey = \u6570\u5024\u306Ey + 16 + \u5F27\u306E\u534A\u5F84;
+  const \u524D\u306Ey = \u6570\u5024\u306Ey + 8 + \u524D\u306E\u7D1A;
+  const \u5F27\u306Ey = \u6570\u5024\u306Ey + \u524D\u306E\u9AD8\u3055 + 16 + \u5F27\u306E\u534A\u5F84;
   const \u5272\u5408\u306Ey = \u5F27\u306Ey + \u5F27\u306E\u534A\u5F84 + 8 + \u5272\u5408\u306E\u7D1A;
   return {
     \u4F59\u767D,
     \u540D\u524D\u306E\u7D1A,
     \u6570\u5024\u306E\u7D1A,
+    \u524D\u306E\u7D1A,
     \u5272\u5408\u306E\u7D1A,
     \u5F27\u306E\u534A\u5F84,
     \u5F27\u306E\u592A\u3055,
     \u540D\u524D\u306Ey,
     \u6570\u5024\u306Ey,
+    \u524D\u306Ey,
     \u5F27\u306Ey,
     \u5272\u5408\u306Ey,
     \u67A0: (idx) => ({ x: \u5E45 * idx, y: 0, w: \u5E45, h })