@cardenelabs/cdl 0.40.3 → 0.40.5

package/dist/react.js

@@ -40,7 +40,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;
@@ -85,7 +85,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;
@@ -12391,13 +12391,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));
@@ -12405,7 +12438,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;
@@ -12418,10 +12451,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
   );
@@ -12484,7 +12517,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;