@cardenelabs/cdl 0.40.2 → 0.40.3

package/dist/react.js

@@ -12387,8 +12387,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;
@@ -12417,7 +12427,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-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
@@ -12475,22 +12485,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__ */ jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
-        /* @__PURE__ */ jsx("rect", { x, y: \u5185\u8A33\u306Ey, width: 30, height: 4, rx: 2, fill: arcColor(d.tone, idx) }),
+        /* @__PURE__ */ 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__ */ 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__ */ jsx("text", { x, y: \u5185\u8A33\u306Ey + 46, fontSize: \u6570\u5024\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u6570\u5024 })
+        /* @__PURE__ */ 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}`);
     })
   ] });