@cardenelabs/cdl 0.40.2 → 0.40.4

package/CHANGELOG.md

@@ -5,6 +5,45 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.40.4] - 2026-09-07
+
+### Fixed
+
+- **値の動きが始まった瞬間に終わって見えるのを直した** (#736)
+
+  段 (phase) の値を動かす動き (`tween`) は既定の曲線 `easeOutQuint` を通っており、
+  **動きが前半に寄りすぎていた**。 段の長さ 1.2 秒の折れ線で測ると、動きの 9 割が
+  最初の 0.449 秒で終わり、残りの 0.75 秒はほとんど止まって見える (半分に達するのが
+  段の 13.1% の時点)。 段を長くしても形は変わらず、止まって見える時間だけが伸びた。
+
+  既定を `easeOut` (`cubic-bezier(0, 0, 0.58, 1)`) にゆるめた。 半分に達するのが
+  34.2% の時点になり、段の終わりまで動き続ける。
+
+  線を引く動き (`draw`) は今までどおり曲線を通らない (#711)。 ペンの速さは一定である
+  ほど「1 つずつ現れる」 が読めるため。
+
+  曲線を差し替える口 (`TimelineOptions.easing`) は今までどおり開いている。
+
+## [0.40.3] - 2026-09-07
+
+### Fixed
+
+- **半円ゲージの内訳の数字が隣とくっつくのを直した** (#731)
+
+  下段の内訳は件数で横に等分し、**名前だけを区画に収まるまで切り詰めて数値はそのまま**
+  置いていた。 件数が増えると数字が隣の区画へはみ出し、`10  5.4%11  5.9%` のように
+  くっついて読めなかった。 実測で件数 10 から重なり始め、12 で 10 組、24 で 43 組。
+
+  **区画の幅を中身から決める**。 数値の行が要る幅に区画どうしの間を足したものを 1 件の
+  幅とし、枠に何件置けるかを出す。 入り切らない件は次の段へ送る。 段が増えたぶん弧は
+  低くなる = 弧の高さは内訳を取り分けた残りから決めているので自動で縮む。
+
+  **数値も名前と同じ幅で切り詰める**。 1 行 1 件しか置けない細い枠では折り返せないため、
+  切り詰めだけが最後の受けになる。 色の印も区画より広いときは区画に合わせて縮む。
+
+  級を下げて 1 行に収める案は採らない = 件数 12 では級 7.7 が要り、この repo が他の図で
+  使っている下限の 9 を下回る。
+
 ## [0.40.2] - 2026-09-07
 
 ### Fixed
@@ -1823,7 +1862,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.2...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.4...HEAD
+[0.40.4]: https://github.com/cardene777/cdl/compare/v0.40.3...v0.40.4
+[0.40.3]: https://github.com/cardene777/cdl/compare/v0.40.2...v0.40.3
 [0.40.2]: https://github.com/cardene777/cdl/compare/v0.40.1...v0.40.2
 [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

package/dist/index.cjs

@@ -14134,7 +14134,7 @@ function cubicBezier(x1, y1, x2, y2) {
     return sampleCurveY(solveCurveX(t));
   };
 }
-var easeOutQuint = cubicBezier(0.22, 1, 0.36, 1);
+var easeOut = cubicBezier(0, 0, 0.58, 1);
 function clamp01(value) {
   if (value < 0) return 0;
   if (value > 1) return 1;
@@ -14179,7 +14179,7 @@ var Timeline = class {
       throw new Error("Timeline requires at least one phase");
     }
     this.phases = phases;
-    this.easing = options.easing ?? easeOutQuint;
+    this.easing = options.easing ?? easeOut;
     this.loop = options.loop ?? false;
     this.autoAdvanceMsOverride = options.autoAdvanceMs;
     this.phaseHoldMs = options.phaseHoldMs ?? 0;
@@ -24888,8 +24888,18 @@ function ChartGaugeNode({
   const \u4F7F\u3048\u308B\u5E452 = node.w - PAD_SIDE * 2;
   const \u540D\u524D\u306E\u7D1A = 14;
   const \u6570\u5024\u306E\u7D1A = 13;
-  const \u5185\u8A33\u306E\u9AD8\u3055 = 56;
+  const \u6BB5\u306E\u9AD8\u3055 = 56;
   const \u5F27\u3068\u5185\u8A33\u306E\u9593 = 16;
+  const \u5370\u306E\u5E452 = 30;
+  const \u533A\u753B\u306E\u9593 = 12;
+  const \u5185\u8A33\u306E\u6570\u5024 = data.map((d) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u8868\u8A18(d.value / total)}`);
+  const \u4EF6\u306B\u8981\u308B\u5E45 = Math.max(\u5370\u306E\u5E452, ...\u5185\u8A33\u306E\u6570\u5024.map((t) => textWidth(t, \u6570\u5024\u306E\u7D1A))) + \u533A\u753B\u306E\u9593;
+  const \u884C\u306E\u4EF6\u6570 = Math.min(
+    Math.max(1, Math.floor(\u4F7F\u3048\u308B\u5E452 / Math.max(\u4EF6\u306B\u8981\u308B\u5E45, 1))),
+    Math.max(data.length, 1)
+  );
+  const \u5185\u8A33\u306E\u6BB5\u6570 = Math.ceil(Math.max(data.length, 1) / \u884C\u306E\u4EF6\u6570);
+  const \u5185\u8A33\u306E\u9AD8\u3055 = \u6BB5\u306E\u9AD8\u3055 * \u5185\u8A33\u306E\u6BB5\u6570;
   const \u5F27\u306B\u4F7F\u3048\u308B\u9AD8\u3055 = \u4F7F\u3048\u308B\u9AD8\u3055 - \u5185\u8A33\u306E\u9AD8\u3055 - \u5F27\u3068\u5185\u8A33\u306E\u9593;
   const radius = Math.max(24, Math.min(\u5F27\u306B\u4F7F\u3048\u308B\u9AD8\u3055, \u4F7F\u3048\u308B\u5E452 / 2));
   const \u5185\u534A\u5F84 = radius * 0.62;
@@ -24918,7 +24928,7 @@ function ChartGaugeNode({
   );
   const \u5408\u8A08\u306E\u7D1A = Math.max(11, Math.round(\u7D1A\u306E\u5019\u88DC));
   const \u898B\u51FA\u3057\u306E\u7D1A = Math.max(9, Math.round(\u5408\u8A08\u306E\u7D1A * 0.38));
-  const \u5185\u8A33\u306E\u5E45 = \u4F7F\u3048\u308B\u5E452 / Math.max(data.length, 1);
+  const \u5185\u8A33\u306E\u5E45 = \u4F7F\u3048\u308B\u5E452 / \u884C\u306E\u4EF6\u6570;
   const \u5185\u8A33\u306Ey = cy + \u5F27\u3068\u5185\u8A33\u306E\u9593;
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u5207\u308A\u629C\u304Did = `cdl-gauge-draw-${react.useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
@@ -24976,22 +24986,35 @@ function ChartGaugeNode({
       }
     ),
     data.map((d, idx) => {
-      const x = PAD_SIDE + \u5185\u8A33\u306E\u5E45 * idx;
-      const \u6570\u5024 = `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u8868\u8A18(d.value / total)}`;
+      const \u5217 = idx % \u884C\u306E\u4EF6\u6570;
+      const \u6BB5 = Math.floor(idx / \u884C\u306E\u4EF6\u6570);
+      const x = PAD_SIDE + \u5185\u8A33\u306E\u5E45 * \u5217;
+      const y = \u5185\u8A33\u306Ey + \u6BB5\u306E\u9AD8\u3055 * \u6BB5;
+      const \u53CE\u307E\u308B\u5E45 = \u5185\u8A33\u306E\u5E45 - \u533A\u753B\u306E\u9593;
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: \u5185\u8A33\u306Ey, width: 30, height: 4, rx: 2, fill: arcColor(d.tone, idx) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x,
+            y,
+            width: Math.max(4, Math.min(\u5370\u306E\u5E452, \u53CE\u307E\u308B\u5E45)),
+            height: 4,
+            rx: 2,
+            fill: arcColor(d.tone, idx)
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
             x,
-            y: \u5185\u8A33\u306Ey + 26,
+            y: y + 26,
             fontSize: \u540D\u524D\u306E\u7D1A,
             fontWeight: 700,
             fill: "var(--cdl-text, #1a1f2a)",
-            children: \u5207\u308A\u8A70\u3081\u308B(d.label ?? "", \u5185\u8A33\u306E\u5E45 - 12, \u540D\u524D\u306E\u7D1A)
+            children: \u5207\u308A\u8A70\u3081\u308B(d.label ?? "", \u53CE\u307E\u308B\u5E45, \u540D\u524D\u306E\u7D1A)
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("text", { x, y: \u5185\u8A33\u306Ey + 46, fontSize: \u6570\u5024\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u6570\u5024 })
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x, y: y + 46, fontSize: \u6570\u5024\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u5207\u308A\u8A70\u3081\u308B(\u5185\u8A33\u306E\u6570\u5024[idx] ?? "", \u53CE\u307E\u308B\u5E45, \u6570\u5024\u306E\u7D1A) })
       ] }, `legend-${idx}`);
     })
   ] });