@cardenelabs/cdl 0.40.0 → 0.40.2

package/dist/index.js

@@ -24356,6 +24356,38 @@ function interpolateColor(template, stateValues, fallback) {
   if (!template) return fallback;
   return interpolate(template, stateValues);
 }
+
+// src/kinds/label-stack.ts
+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 \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D, \u8D77\u70B9 = -Math.PI / 2, \u5168\u5468 = Math.PI * 2) {
   if (\u958B\u304D <= 0) return null;
   if (\u958B\u304D >= 1 && \u5168\u5468 >= Math.PI * 2) return /* @__PURE__ */ jsx("circle", { cx, cy, r });
@@ -24436,6 +24468,26 @@ function ChartPieNode({
   const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
   const \u5F71id = `cdl-pie-shadow-${instanceId}`;
   const \u958B\u304D\u59CB\u3081\u305F = (startFrac) => !drawing || \u958B\u304D > startFrac;
+  const \u540D\u672D\u306E\u884C = \u5272\u5408\u306E\u7D1A + \u540D\u524D\u306E\u7D1A + 3;
+  const \u540D\u672D\u306E\u5074 = slices.map((s) => Math.cos(s.\u4E2D\u592E\u89D2) >= 0);
+  const \u540D\u672D\u306E\u771F\u306Ey = slices.map((s) => cy + (radius + \u5F15\u304D\u51FA\u3057) * Math.sin(s.\u4E2D\u592E\u89D2));
+  const \u540D\u672D\u306Ey = (() => {
+    const \u51FA\u3059 = [...\u540D\u672D\u306E\u771F\u306Ey];
+    for (const \u5074 of [true, false]) {
+      const \u756A\u53F7 = \u540D\u672D\u306E\u5074.flatMap((\u53F3, i) => \u53F3 === \u5074 ? [i] : []);
+      if (\u756A\u53F7.length === 0) continue;
+      const \u76F4\u3057\u305F = \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(
+        \u756A\u53F7.map((i) => \u540D\u672D\u306E\u771F\u306Ey[i]),
+        \u540D\u672D\u306E\u884C,
+        PAD_TOP2 + \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057,
+        node.h - PAD_BOTTOM2 - \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057
+      );
+      \u756A\u53F7.forEach((i, k) => \u51FA\u3059[i] = \u76F4\u3057\u305F[k]);
+    }
+    return \u51FA\u3059;
+  })();
+  const \u8098\u306Ex = (\u53F3) => cx + (\u53F3 ? 1 : -1) * (radius + \u5F15\u304D\u51FA\u3057);
+  const \u5B57\u306Ex = (\u53F3) => \u8098\u306Ex(\u53F3) + (\u53F3 ? \u5B57\u307E\u3067\u306E\u9593 : -\u5B57\u307E\u3067\u306E\u9593);
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -24508,12 +24560,12 @@ function ChartPieNode({
     ),
     slices.map((s, idx) => {
       if (!\u958B\u304D\u59CB\u3081\u305F(s.startFrac)) return null;
-      const \u53F3 = Math.cos(s.\u4E2D\u592E\u89D2) >= 0;
+      const \u53F3 = \u540D\u672D\u306E\u5074[idx];
       const \u7E01x = cx + radius * Math.cos(s.\u4E2D\u592E\u89D2);
       const \u7E01y = cy + radius * Math.sin(s.\u4E2D\u592E\u89D2);
-      const \u6298\u308Cx = cx + (radius + \u5F15\u304D\u51FA\u3057) * Math.cos(s.\u4E2D\u592E\u89D2);
-      const \u6298\u308Cy = cy + (radius + \u5F15\u304D\u51FA\u3057) * Math.sin(s.\u4E2D\u592E\u89D2);
-      const \u5B57x = \u6298\u308Cx + (\u53F3 ? \u5B57\u307E\u3067\u306E\u9593 : -\u5B57\u307E\u3067\u306E\u9593);
+      const \u6298\u308Cx = \u8098\u306Ex(\u53F3);
+      const \u6298\u308Cy = \u540D\u672D\u306Ey[idx];
+      const \u5B57x = \u5B57\u306Ex(\u53F3);
       return /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx(
           "path",
@@ -25591,6 +25643,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__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -25648,8 +25709,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__ */ jsxs("g", { children: [
         \u524D\u3042\u308A && /* @__PURE__ */ jsx(
@@ -25693,7 +25756,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,
@@ -25706,7 +25769,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,
@@ -25718,7 +25781,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,
@@ -25731,7 +25794,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)",
@@ -25743,7 +25806,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