@cardenelabs/cdl 0.40.3 → 0.40.5

package/CHANGELOG.md

@@ -5,6 +5,46 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.40.5] - 2026-09-07
+
+### Fixed
+
+- **内訳が多い半円ゲージで合計が主役でなくなるのを直した** (#735)
+
+  段を折り返すようにした (#732) 結果、件数が増えると弧に残る高さが尽き、**合計の字が
+  内訳の名前より小さくなっていた**。 実測で件数 22 から合計 13 に対し名前 14、
+  件数 30 では合計が弧の内側の穴から 4.9 はみ出し、件数 40 では 10.2 はみ出した。
+  この種別は合計を大きく見せるために作ったので、主役が入れ替わると図の意味が変わる。
+
+  弧に残す高さ (48) を先に確保し、そこから置ける段数を逆算する。 入り切らない件は
+  末尾 1 件に「その他」 として畳み、**合計の値は変えない** = 畳んだ件の値を足して持たせる。
+  弧も同じ並びで描くので、扇と内訳が食い違わない。
+
+  合計の級の決め方も直した。 中心の高さの横幅で測っていたため、字が中心より上に置かれる
+  ぶんだけ穴からはみ出していた。 字の上の角が穴の円に入る大きさを解いて決める。
+
+  件数 12 以下の図は段の数も弧の半径も今までと同じ (実測で 1 段が半径 128.96、
+  2 段が 94.24 で前後一致)。
+
+## [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
@@ -1843,7 +1883,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.3...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.5...HEAD
+[0.40.5]: https://github.com/cardene777/cdl/compare/v0.40.4...v0.40.5
+[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

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;
@@ -24892,13 +24892,46 @@ function ChartGaugeNode({
   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 \u6570\u5024\u306E\u884C = (d) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u8868\u8A18(d.value / total)}`;
+  const \u5272\u308A\u4ED8\u3051\u308B = (\u4EF6\u305F\u3061) => {
+    const \u5E45 = Math.max(\u5370\u306E\u5E452, ...\u4EF6\u305F\u3061.map((d) => textWidth(\u6570\u5024\u306E\u884C(d), \u6570\u5024\u306E\u7D1A))) + \u533A\u753B\u306E\u9593;
+    const \u884C\u306E\u4EF6\u65702 = Math.min(
+      Math.max(1, Math.floor(\u4F7F\u3048\u308B\u5E452 / Math.max(\u5E45, 1))),
+      Math.max(\u4EF6\u305F\u3061.length, 1)
+    );
+    return { \u884C\u306E\u4EF6\u6570: \u884C\u306E\u4EF6\u65702, \u6BB5\u6570: Math.ceil(Math.max(\u4EF6\u305F\u3061.length, 1) / \u884C\u306E\u4EF6\u65702) };
+  };
+  const \u5F27\u306B\u6B8B\u3059\u9AD8\u3055 = 48;
+  const \u7F6E\u3051\u308B\u6BB5\u6570 = Math.max(
+    1,
+    Math.floor((\u4F7F\u3048\u308B\u9AD8\u3055 - \u5F27\u306B\u6B8B\u3059\u9AD8\u3055 - \u5F27\u3068\u5185\u8A33\u306E\u9593) / \u6BB5\u306E\u9AD8\u3055)
   );
-  const \u5185\u8A33\u306E\u6BB5\u6570 = Math.ceil(Math.max(data.length, 1) / \u884C\u306E\u4EF6\u6570);
+  const \u7573\u3080 = (\u6B8B\u3059\u4EF6\u6570) => {
+    if (\u6B8B\u3059\u4EF6\u6570 >= data.length) return data;
+    const \u524D = data.slice(0, Math.max(0, \u6B8B\u3059\u4EF6\u6570 - 1));
+    const \u6B8B\u308A = data.slice(Math.max(0, \u6B8B\u3059\u4EF6\u6570 - 1));
+    const \u5024 = \u6B8B\u308A.reduce((acc, d) => acc + d.value, 0);
+    const \u8AAD\u3081\u306A\u3044 = \u6B8B\u308A.some((d) => d.unresolved);
+    const \u7573\u3093\u3060 = {
+      ...\u6B8B\u308A[0],
+      label: "\u305D\u306E\u4ED6",
+      value: \u5024,
+      previous: void 0,
+      ...\u8AAD\u3081\u306A\u3044 ? { unresolved: true } : { unresolved: void 0 }
+    };
+    return [...\u524D, \u7573\u3093\u3060];
+  };
+  const \u51FA\u3059\u4EF6\u305F\u3061 = (() => {
+    let \u4EF6\u305F\u3061 = data;
+    for (let i = 0; i < 4; i++) {
+      const { \u884C\u306E\u4EF6\u6570: \u884C\u306E\u4EF6\u65702, \u6BB5\u6570 } = \u5272\u308A\u4ED8\u3051\u308B(\u4EF6\u305F\u3061);
+      if (\u6BB5\u6570 <= \u7F6E\u3051\u308B\u6BB5\u6570) return \u4EF6\u305F\u3061;
+      \u4EF6\u305F\u3061 = \u7573\u3080(Math.max(1, \u7F6E\u3051\u308B\u6BB5\u6570 * \u884C\u306E\u4EF6\u65702));
+    }
+    return \u4EF6\u305F\u3061;
+  })();
+  const \u5185\u8A33\u306E\u6570\u5024 = \u51FA\u3059\u4EF6\u305F\u3061.map((d) => \u6570\u5024\u306E\u884C(d));
+  const { \u884C\u306E\u4EF6\u6570, \u6BB5\u6570: \u5185\u8A33\u306E\u6BB5\u6570 } = \u5272\u308A\u4ED8\u3051\u308B(\u51FA\u3059\u4EF6\u305F\u3061);
   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));
@@ -24906,7 +24939,7 @@ function ChartGaugeNode({
   const cx = node.w / 2;
   const cy = PAD_TOP2 + radius;
   let cumFrac = 0;
-  const slices = data.map((d) => {
+  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;
@@ -24919,10 +24952,10 @@ function ChartGaugeNode({
     return { d, frac, path };
   });
   const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
-  const \u6A2A\u306E\u4E0A\u9650 = \u5185\u534A\u5F84 * 2 * 0.86;
+  const \u5358\u4F4D\u5E45 = Math.max(textWidth(\u5408\u8A08\u306E\u6587\u5B57, 100), 1) / 100;
   const \u7D1A\u306E\u5019\u88DC = Math.min(
-    // 横 = 実際の字幅から逆算する
-    \u6A2A\u306E\u4E0A\u9650 / Math.max(textWidth(\u5408\u8A08\u306E\u6587\u5B57, 100), 1) * 100,
+    // 横 = 字の上の角が内側の円に入る大きさ
+    \u5185\u534A\u5F84 / Math.sqrt((\u5358\u4F4D\u5E45 / 2) ** 2 + 1.25 ** 2),
     // 縦 = 合計 1 行 + 見出し 1 行が内側の高さに収まる比
     \u5185\u534A\u5F84 * 0.52
   );
@@ -24985,7 +25018,7 @@ function ChartGaugeNode({
         children: "\u5408\u8A08"
       }
     ),
-    data.map((d, idx) => {
+    \u51FA\u3059\u4EF6\u305F\u3061.map((d, idx) => {
       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;