@cardenelabs/cdl 0.40.9 → 0.40.11

package/CHANGELOG.md

@@ -5,6 +5,65 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.40.11] - 2026-09-09
+
+### Fixed
+
+- **棒 / 弧 / 半円 が受け取った前の時点の値を描くようにした** (#767)
+
+  `previous` を読むのは円 / 内訳の帯 / 2 時点の線 / 数値ひとつの図の 4 種だけで、残る
+  3 種は **受け取っておきながら 1 度も読んでいなかった**。 数値ひとつの図で同じ抜けを
+  直したのが `#763` で、そちらは画面に出る文字の数の記録が落ちて初めて見つかっている。
+
+  下流の見本帳が 49 組を描き比べて残りを洗い出した。
+
+  | 種別 | 置き方 | 役割名 |
+  |---|---|---|
+  | 棒 | 棒の上に、前の高さを指す印を 1 本引く | `chart-bar-previous` |
+  | 弧 | 弧の帯を横切る印を、前の割合の角度に置く | `chart-radial-previous` |
+  | 半円 | 内側に前の内訳の輪を 1 本足す | `chart-gauge-previous` |
+
+  **薄い色で後ろに重ねる形は採らない**。 前が今より小さい件で今の形に完全に隠れ、1 px も
+  見えなくなる。 棒と弧は 1 件が 1 本なので印を引き、半円は件を積んで合計を出す図
+  (半分の円グラフ) なので円グラフ (`#679`) と同じく内側の輪にする。
+
+  棒は縦軸の天井を前の時点まで含めて決めるようにした。 含めないと、前が今より大きい件で
+  印が枠の外へ出る。
+
+  書かない図では役割を 1 つも出さず、半円の輪の太さも変わらない。
+
+  対象外が 4 つある。 折れ線の `previous` (横軸そのものが時の流れで、点ごとの前の時点は
+  線の中に既にある)、100 個の印の `previous` (印が 200 個になり 100 個で読む前提が崩れる)、
+  折れ線の `tone` (線は 1 本 1 色)、棒の `tone` (`#747` が 1 色 + 濃さと決めた形)。
+
+## [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
@@ -2004,7 +2063,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.9...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.11...HEAD
+[0.40.11]: https://github.com/cardene777/cdl/compare/v0.40.10...v0.40.11
+[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

package/dist/index.cjs

@@ -24961,18 +24961,35 @@ function ChartGaugeNode({
   const \u5185\u534A\u5F84 = radius * 0.62;
   const cx = node.w / 2;
   const cy = PAD_TOP2 + radius;
+  const \u524D\u3042\u308A = \u51FA\u3059\u4EF6\u305F\u3061.some((d) => d.previous !== void 0);
+  const \u524D\u306E\u5024 = \u51FA\u3059\u4EF6\u305F\u3061.map((d) => Math.max(0, d.previous ?? 0));
+  const \u524D\u306E\u5408\u8A08 = \u524D\u306E\u5024.reduce((acc, v) => acc + v, 0);
+  const \u5E2F = radius - \u5185\u534A\u5F84;
+  const \u4ECA\u306E\u5185\u534A\u5F84 = \u524D\u3042\u308A ? \u5185\u534A\u5F84 + \u5E2F * 0.42 : \u5185\u534A\u5F84;
+  const \u524D\u306E\u5185\u534A\u5F84 = \u5185\u534A\u5F84;
+  const \u524D\u306E\u5916\u534A\u5F84 = \u5185\u534A\u5F84 + \u5E2F * 0.32;
+  const \u6247\u306E\u9053 = (a0, a1, \u5185, \u5916) => {
+    const \u59161 = \u6975(cx, cy, \u5916, a0);
+    const \u59162 = \u6975(cx, cy, \u5916, a1);
+    const \u51852 = \u6975(cx, cy, \u5185, a1);
+    const \u51851 = \u6975(cx, cy, \u5185, a0);
+    return `M ${\u59161.x} ${\u59161.y} A ${\u5916} ${\u5916} 0 0 1 ${\u59162.x} ${\u59162.y} L ${\u51852.x} ${\u51852.y} A ${\u5185} ${\u5185} 0 0 0 ${\u51851.x} ${\u51851.y} Z`;
+  };
   let cumFrac = 0;
   const slices = \u51FA\u3059\u4EF6\u305F\u3061.map((d) => {
     const frac = d.value / total;
     const a0 = Math.PI + cumFrac * Math.PI;
     const a1 = a0 + frac * Math.PI;
     cumFrac += frac;
-    const \u59161 = \u6975(cx, cy, radius, a0);
-    const \u59162 = \u6975(cx, cy, radius, a1);
-    const \u51852 = \u6975(cx, cy, \u5185\u534A\u5F84, a1);
-    const \u51851 = \u6975(cx, cy, \u5185\u534A\u5F84, a0);
-    const path = `M ${\u59161.x} ${\u59161.y} A ${radius} ${radius} 0 0 1 ${\u59162.x} ${\u59162.y} L ${\u51852.x} ${\u51852.y} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 0 0 ${\u51851.x} ${\u51851.y} Z`;
-    return { d, frac, path };
+    return { d, frac, path: \u6247\u306E\u9053(a0, a1, \u4ECA\u306E\u5185\u534A\u5F84, radius) };
+  });
+  let \u524D\u306Ecum = 0;
+  const \u524D\u306E\u6247\u305F\u3061 = \u51FA\u3059\u4EF6\u305F\u3061.map((d, idx) => {
+    const frac = \u524D\u306E\u5408\u8A08 > 0 ? (\u524D\u306E\u5024[idx] ?? 0) / \u524D\u306E\u5408\u8A08 : 0;
+    const a0 = Math.PI + \u524D\u306Ecum * Math.PI;
+    const a1 = a0 + frac * Math.PI;
+    \u524D\u306Ecum += frac;
+    return { d, frac, path: \u6247\u306E\u9053(a0, a1, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5916\u534A\u5F84) };
   });
   const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
   const \u5358\u4F4D\u5E45 = Math.max(textWidth(\u5408\u8A08\u306E\u6587\u5B57, 100), 1) / 100;
@@ -25001,6 +25018,20 @@ function ChartGaugeNode({
     },
     `arc-${idx}`
   ));
+  const \u524D\u306E\u5F27\u305F\u3061 = \u524D\u3042\u308A ? \u524D\u306E\u6247\u305F\u3061.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      "data-cdl-role": "chart-gauge-previous",
+      "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+      d: s.path,
+      fill: arcColor(s.d.tone, idx),
+      fillOpacity: 0.45,
+      stroke: "var(--cdl-node-fill, #ffffff)",
+      strokeWidth: 1.5,
+      strokeLinejoin: "round"
+    },
+    `prev-arc-${idx}`
+  )) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -25017,7 +25048,13 @@ function ChartGaugeNode({
       }
     ),
     drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, radius + 2, \u4F38\u3073, Math.PI, Math.PI) }) }),
-    drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u5F27\u305F\u3061 }) : \u5F27\u305F\u3061,
+    drawing ? /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: [
+      \u524D\u306E\u5F27\u305F\u3061,
+      \u5F27\u305F\u3061
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      \u524D\u306E\u5F27\u305F\u3061,
+      \u5F27\u305F\u3061
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -25126,9 +25163,11 @@ function ChartRadialNode({
   const rings = data.map((d, idx) => {
     const frac = d.value / total;
     const \u4E2D\u5FC3\u534A\u5F84 = \u5916\u534A\u5F84 - \u5E2F1\u672C * idx - \u5E2F1\u672C / 2;
+    const \u524D\u306E\u5272\u5408 = d.previous === void 0 ? null : Math.max(0, d.previous) / total;
     return {
       d,
       frac,
+      \u524D\u306E\u5272\u5408,
       \u4E2D\u5FC3\u534A\u5F84,
       // 軌道は全周。 1 周ちょうどは弧で表せないので、 わずかに欠かして描く
       \u8ECC\u9053: \u5F27\u306E\u90532(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
@@ -25177,6 +25216,20 @@ function ChartRadialNode({
     )),
     drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(\u5F27\u306Ecx, cy, \u5916\u534A\u5F84 + \u5E2F\u306E\u5E45, \u958B\u304D) }) }),
     drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u53D6\u308A\u5206\u305F\u3061 }) : \u53D6\u308A\u5206\u305F\u3061,
+    rings.map(
+      (r, idx) => r.\u524D\u306E\u5272\u5408 === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          "data-cdl-role": "chart-radial-previous",
+          "data-cdl-unresolved": r.d.unresolved ? "true" : void 0,
+          ...\u5E2F\u3092\u6A2A\u5207\u308B\u5370(\u5F27\u306Ecx, cy, r.\u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, Math.min(r.\u524D\u306E\u5272\u5408, 0.9999)),
+          stroke: "var(--cdl-text-mute, #8a8678)",
+          strokeWidth: 2,
+          strokeLinecap: "round"
+        },
+        `prev-${idx}`
+      )
+    ),
     data.map((d, idx) => {
       const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-radial-item", children: [
@@ -25216,6 +25269,18 @@ function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5
   const p = (r, a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
   return `M ${p(\u5916, a0)} A ${\u5916} ${\u5916} 0 ${large} 1 ${p(\u5916, a1)} L ${p(\u5185, a1)} A ${\u5185} ${\u5185} 0 ${large} 0 ${p(\u5185, a0)} Z`;
 }
+function \u5E2F\u3092\u6A2A\u5207\u308B\u5370(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
+  const \u306F\u307F\u51FA\u3057 = Math.min(\u5E45 * 0.3, 5);
+  const \u5916 = \u4E2D\u5FC3\u534A\u5F84 + \u5E45 / 2 + \u306F\u307F\u51FA\u3057;
+  const \u5185 = Math.max(0.5, \u4E2D\u5FC3\u534A\u5F84 - \u5E45 / 2 - \u306F\u307F\u51FA\u3057);
+  const a = -Math.PI / 2 + \u5272\u5408 * Math.PI * 2;
+  return {
+    x1: cx + \u5185 * Math.cos(a),
+    y1: cy + \u5185 * Math.sin(a),
+    x2: cx + \u5916 * Math.cos(a),
+    y2: cy + \u5916 * Math.sin(a)
+  };
+}
 function arcColor2(tone, idx) {
   if (tone) return TONE[tone];
   return chartSeriesColor(idx);
@@ -25229,7 +25294,8 @@ 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(
@@ -25297,6 +25363,24 @@ function ChartStatNode({
                 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",
               {
@@ -25340,29 +25424,34 @@ function ChartStatNode({
     })
   ] });
 }
-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 })
@@ -25942,8 +26031,9 @@ function ChartBarNode({
   const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
   const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
   const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
+  const \u8EF8\u306E\u3082\u3068 = data.length > 0 ? Math.max(vMax, ...data.map((d) => d.previous ?? 0)) : vMax;
   const \u76EE\u76DB\u308A\u306E\u76EE\u5B892 = 4;
-  const \u5929\u4E95\u306E\u3082\u3068 = vMax > 0 ? vMax : 1;
+  const \u5929\u4E95\u306E\u3082\u3068 = \u8EF8\u306E\u3082\u3068 > 0 ? \u8EF8\u306E\u3082\u3068 : 1;
   const \u523B\u307F = \u76EE\u76DB\u308A\u306E\u523B\u307F(\u5929\u4E95\u306E\u3082\u3068, \u76EE\u76DB\u308A\u306E\u76EE\u5B892);
   const \u523B\u307F\u306E\u6841 = \u5C0F\u6570\u306E\u6841(\u523B\u307F);
   const \u5929\u4E95 = \u6841\u3067\u4E38\u3081\u308B(Math.ceil(\u5929\u4E95\u306E\u3082\u3068 / \u523B\u307F - 1e-9) * \u523B\u307F, \u523B\u307F\u306E\u6841);
@@ -26036,8 +26126,24 @@ function ChartBarNode({
           fillOpacity: \u6FC3\u3055(d.value)
         }
       );
+      const \u5370\u306E\u306F\u307F\u51FA\u3057 = Math.min(barW * 0.18, 8);
+      const \u524D\u306E\u5370 = d.previous === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          "data-cdl-role": "chart-bar-previous",
+          "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+          x1: bx - \u5370\u306E\u306F\u307F\u51FA\u3057,
+          y1: yAt(Math.max(0, d.previous)),
+          x2: bx + barW + \u5370\u306E\u306F\u307F\u51FA\u3057,
+          y2: yAt(Math.max(0, d.previous)),
+          stroke: "var(--cdl-text-mute, #8a8678)",
+          strokeWidth: 1.5,
+          strokeDasharray: "5 3"
+        }
+      );
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
         drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(0 ${\u6A2A\u8EF8\u306Ey}) scale(1 ${\u4F38\u3073}) translate(0 ${-\u6A2A\u8EF8\u306Ey})`, children: \u68D2 }) : \u68D2,
+        \u524D\u306E\u5370,
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {