@cardenelabs/cdl 0.39.0 → 0.40.1

package/CHANGELOG.md

@@ -5,6 +5,47 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.40.1] - 2026-09-07
+
+### Fixed
+
+- **傾き図で同じ値の系列の名札が重なって読めなくなるのを直した** (#723)
+
+  `chart-slope` は名札 (値と名前) を点と同じ縦の位置に置いていたので、値が同じ / 近い
+  系列が 2 件以上あると同じ場所に印字されていた。 実測で 59 と 59 の 2 件が完全に重なり、
+  値は太字が二重に乗った染み、名前は 2 つの語が重なった判読不能な塊になっていた。
+  完全一致でなくても起きる = 59 と 60 の差は 3.55 しかなく、字の高さ 14 に対して足りない。
+
+  **動かすのは名札だけ**。 点と線は真の位置に残す = 位置をずらすと、書いていない差を
+  絵が主張することになる (同順位を段でずらさない判断と同じ理由、#707)。 同じ値の点は
+  重なったままで、どの名札がどの系列かは名前の色が担う (#698)。
+
+  重なった連なりは **元の位置の平均を中心にして** 間隔ぶんずつ均等に置き直す。
+  上から順に押し下げるだけだと塊が片側へ寄り、点との対応が遠くなる。
+
+  枠に入り切らない件数の図では、どれか 1 つを枠の外へ出さず全部を等間隔に詰める。
+
+## [0.40.0] - 2026-09-07
+
+### Added
+
+- **100 個の印も段の `draw` で 1 個ずつ埋まるようにした** (#719)
+
+  `chart-waffle` は上の行から左詰めで印を配る図なので、埋まる順もそのまま読む向きになる。
+
+  **切り抜きでは表せない**。 弧の 3 種 (#715) は切り抜きで隠したが、この図に当てると
+  升の途中が斜めや半分で切れる = 1 個 = 1% の印が半分だけ出て、数えられない図になる。
+
+  代わりに **塗りだけを変える**。 印は 100 個とも最初から描き、進みまで届いていない印を
+  持ち主のいない印と同じ地の色にする。 升の位置と大きさ、`data-cdl-waffle-owner` の
+  持ち主の欄はどちらも進みで変わらない。
+
+  左の一覧 (名前と印の数) は最初から全部出す。 この図は「数えて確かめられる」 ことが
+  存在理由で、一覧はその答え合わせの表になる。
+
+  これで図表で動きを持たないのは 指標 (`chart-stat`) と 四象限 (`quadrant-matrix`) の
+  2 つになった。 どちらも長さも順序も持たないため対象外のまま。
+
 ## [0.39.0] - 2026-09-07
 
 ### Added
@@ -1760,7 +1801,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.39.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.1...HEAD
+[0.40.1]: https://github.com/cardene777/cdl/compare/v0.40.0...v0.40.1
+[0.40.0]: https://github.com/cardene777/cdl/compare/v0.39.0...v0.40.0
 [0.39.0]: https://github.com/cardene777/cdl/compare/v0.38.0...v0.39.0
 [0.38.0]: https://github.com/cardene777/cdl/compare/v0.37.0...v0.38.0
 [0.37.0]: https://github.com/cardene777/cdl/compare/v0.36.0...v0.37.0

package/SPEC.md

@@ -149,6 +149,7 @@ phase でも線を引き直すことになる。
 | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
 | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
 | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
+| `chart-waffle` | 左上 | 印が読む向きに 1 個ずつ埋まる | 一覧は最初から出る |
 
 対応種別の一覧は `validate.ts` の `DRAW_KINDS` が持ち、 知らせの文面もそこから組み立てる。
 

package/dist/index.cjs

@@ -20811,7 +20811,8 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
   "funnel-stages",
   "chart-gauge",
   "chart-radial",
-  "chart-stacked-bar"
+  "chart-stacked-bar",
+  "chart-waffle"
 ]);
 var KINDS = new Set(NODE_KINDS);
 var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
@@ -25262,7 +25263,9 @@ function \u5370\u306E\u5272\u4ED8(\u5024) {
 function ChartWaffleNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -25291,6 +25294,7 @@ function ChartWaffleNode({
   \u914D\u5206.forEach((n, idx) => {
     for (let k = 0; k < n; k++) \u6301\u3061\u4E3B.push(idx);
   });
+  const \u57CB\u307E\u3063\u305F = Math.round(\u9032\u307F\u3092\u7573\u3080(drawing, progress) * WAFFLE_TOTAL);
   const \u4E00\u89A7\u306E\u59CB\u307E\u308A = PAD + (\u4F7F\u3048\u308B\u9AD8\u3055 - \u884C\u306E\u9AD8\u3055 * data.length) / 2 + \u884C\u306E\u9AD8\u3055 / 2;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -25311,6 +25315,7 @@ function ChartWaffleNode({
       const \u884C = Math.floor(k / WAFFLE_COLS);
       const \u5217 = k % WAFFLE_COLS;
       const owner = \u6301\u3061\u4E3B[k];
+      const \u57CB\u307E\u3063\u3066\u3044\u308B = owner !== void 0 && k < \u57CB\u307E\u3063\u305F;
       return /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
         {
@@ -25321,8 +25326,8 @@ function ChartWaffleNode({
           width: \u5370,
           height: \u5370,
           rx: 2,
-          fill: owner === void 0 ? "var(--cdl-divider, #d4d4d8)" : \u5370\u306E\u82722(data[owner].tone, owner),
-          fillOpacity: owner === void 0 ? 0.35 : 1
+          fill: \u57CB\u307E\u3063\u3066\u3044\u308B ? \u5370\u306E\u82722(data[owner].tone, owner) : "var(--cdl-divider, #d4d4d8)",
+          fillOpacity: \u57CB\u307E\u3063\u3066\u3044\u308B ? 1 : 0.35
         },
         `cell-${k}`
       );
@@ -25523,6 +25528,36 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
   return out;
 }
 var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
+function \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u771F\u306Ey, \u9593\u9694, \u4E0A\u9650, \u4E0B\u9650) {
+  const \u4EF6\u6570 = \u771F\u306Ey.length;
+  if (\u4EF6\u6570 === 0) return [];
+  const \u4E26\u3073 = \u771F\u306Ey.map((y, i) => ({ y, i })).sort((a, b) => a.y - b.y || a.i - b.i);
+  const \u7D50\u679C = new Array(\u4EF6\u6570);
+  if (\u9593\u9694 * (\u4EF6\u6570 - 1) > \u4E0B\u9650 - \u4E0A\u9650) {
+    \u4E26\u3073.forEach((e, k) => {
+      \u7D50\u679C[e.i] = \u4EF6\u6570 > 1 ? \u4E0A\u9650 + (\u4E0B\u9650 - \u4E0A\u9650) / (\u4EF6\u6570 - 1) * k : (\u4E0A\u9650 + \u4E0B\u9650) / 2;
+    });
+    return \u7D50\u679C;
+  }
+  const \u584A\u305F\u3061 = [];
+  \u4E26\u3073.forEach((e, k) => {
+    \u584A\u305F\u3061.push({ \u5408\u8A08: e.y - \u9593\u9694 * k, \u4EF6\u6570: 1 });
+    while (\u584A\u305F\u3061.length >= 2) {
+      const \u5F8C = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 1];
+      const \u524D = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 2];
+      if (\u524D.\u5408\u8A08 / \u524D.\u4EF6\u6570 <= \u5F8C.\u5408\u8A08 / \u5F8C.\u4EF6\u6570) break;
+      \u584A\u305F\u3061.splice(\u584A\u305F\u3061.length - 2, 2, { \u5408\u8A08: \u524D.\u5408\u8A08 + \u5F8C.\u5408\u8A08, \u4EF6\u6570: \u524D.\u4EF6\u6570 + \u5F8C.\u4EF6\u6570 });
+    }
+  });
+  const \u307B\u3069\u3044\u305F = [];
+  \u584A\u305F\u3061.forEach((\u584A) => {
+    const \u5E73\u5747 = \u584A.\u5408\u8A08 / \u584A.\u4EF6\u6570;
+    for (let j = 0; j < \u584A.\u4EF6\u6570; j++) \u307B\u3069\u3044\u305F.push(\u5E73\u5747 + \u9593\u9694 * \u307B\u3069\u3044\u305F.length);
+  });
+  const \u305A\u308C = Math.max(0, \u4E0A\u9650 - \u307B\u3069\u3044\u305F[0]) - Math.max(0, \u307B\u3069\u3044\u305F[\u4EF6\u6570 - 1] - \u4E0B\u9650);
+  \u4E26\u3073.forEach((e, k) => \u7D50\u679C[e.i] = \u307B\u3069\u3044\u305F[k] + \u305A\u308C);
+  return \u7D50\u679C;
+}
 function ChartSlopeNode({
   node,
   active,
@@ -25588,6 +25623,15 @@ function ChartSlopeNode({
   const \u53F3\u8EF8x = \u524D\u3042\u308A ? Math.min(node.w - PAD, Math.max(node.w - PAD - \u53F3\u306E\u4F59\u767D, node.w / 2 + \u7DDA\u306E\u6700\u5C0F\u5E45 / 2)) : \u5DE6\u8EF8x;
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u53F3\u3092\u51FA\u3059 = !drawing || \u4F38\u3073 >= 1;
+  const \u5DE6\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
+    (s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u524D\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u524D)
+  );
+  const \u53F3\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
+    (s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u4ECA\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u4ECA)
+  );
+  const \u540D\u672D\u306E\u884C = Math.max(\u5024\u306E\u7D1A, \u540D\u524D\u306E\u7D1A) + 4;
+  const \u5DE6\u306E\u540D\u672Dy = \u524D\u3042\u308A ? \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u5DE6\u306E\u70B9y, \u540D\u672D\u306E\u884C, \u4E0A\u7AEF, \u4E0B\u7AEF) : \u5DE6\u306E\u70B9y;
+  const \u53F3\u306E\u540D\u672Dy = \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u53F3\u306E\u70B9y, \u540D\u672D\u306E\u884C, \u4E0A\u7AEF, \u4E0B\u7AEF);
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -25645,8 +25689,10 @@ function ChartSlopeNode({
       )
     ] }),
     \u7CFB\u5217\u305F\u3061.map((s, i) => {
-      const \u5DE6y = \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u524D\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u524D);
-      const \u53F3y = \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u4ECA\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u4ECA);
+      const \u5DE6y = \u5DE6\u306E\u70B9y[i];
+      const \u53F3y = \u53F3\u306E\u70B9y[i];
+      const \u5DE6\u672Dy = \u5DE6\u306E\u540D\u672Dy[i];
+      const \u53F3\u672Dy = \u53F3\u306E\u540D\u672Dy[i];
       const \u672A\u89E3\u6C7A = s.\u672A\u89E3\u6C7A ? "true" : void 0;
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
         \u524D\u3042\u308A && /* @__PURE__ */ jsxRuntime.jsx(
@@ -25690,7 +25736,7 @@ function ChartSlopeNode({
             {
               "data-cdl-role": "chart-slope-value",
               x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
-              y: \u5DE6y + 5,
+              y: \u5DE6\u672Dy + 5,
               textAnchor: "end",
               fontSize: \u5024\u306E\u7D1A,
               fontWeight: 600,
@@ -25703,7 +25749,7 @@ function ChartSlopeNode({
             {
               "data-cdl-role": "chart-slope-name",
               x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067 - \u5DE6\u5024\u5E45 - \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
-              y: \u5DE6y + 5,
+              y: \u5DE6\u672Dy + 5,
               textAnchor: "end",
               fontSize: \u540D\u524D\u306E\u7D1A,
               fill: s.\u8272,
@@ -25715,7 +25761,7 @@ function ChartSlopeNode({
           {
             "data-cdl-role": "chart-slope-name",
             x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
-            y: \u53F3y + 5,
+            y: \u53F3\u672Dy + 5,
             textAnchor: "end",
             fontSize: \u540D\u524D\u306E\u7D1A,
             fill: s.\u8272,
@@ -25728,7 +25774,7 @@ function ChartSlopeNode({
             {
               "data-cdl-role": \u5F62 === "delta" ? "chart-slope-delta" : "chart-slope-value",
               x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
-              y: \u53F3y + 5,
+              y: \u53F3\u672Dy + 5,
               fontSize: \u5024\u306E\u7D1A,
               fontWeight: 600,
               fill: "var(--cdl-text, #1a1f2a)",
@@ -25740,7 +25786,7 @@ function ChartSlopeNode({
             {
               "data-cdl-role": "chart-slope-name",
               x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
-              y: \u53F3y + 5,
+              y: \u53F3\u672Dy + 5,
               fontSize: \u540D\u524D\u306E\u7D1A,
               fill: s.\u8272,
               children: s.\u540D\u524D
@@ -30470,7 +30516,16 @@ function CdlNodeView({
           }
         );
       case "chart-waffle":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartWaffleNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartWaffleNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-stat":
         return /* @__PURE__ */ jsxRuntime.jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
       case "chart-radial":