@cardenelabs/cdl 0.31.1 → 0.33.0

package/dist/react.cjs

@@ -579,6 +579,7 @@ var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
   "chart-stat",
   "chart-waffle",
   "chart-stacked-bar",
+  "chart-slope",
   "gantt-timeline",
   "mind-map",
   "funnel-stages",
@@ -2314,8 +2315,10 @@ var NODE_KINDS = [
   "chart-radial",
   "chart-stat",
   // chart-stacked-bar は帯を割合で区切り時点を並べる形 (cdl#551)
+  // chart-slope は 2 時点を直線でつなぎ増減と順位の入れ替わりを見せる形 (cdl#688)
   "chart-waffle",
   "chart-stacked-bar",
+  "chart-slope",
   // Timeline / Mind 系 (2、 CAR-994 Phase B) ... 1 node に payload 配列、 SVG geometry render
   "gantt-timeline",
   "mind-map",
@@ -4450,6 +4453,7 @@ var GRID_ALIGNED_KINDS = /* @__PURE__ */ new Set([
   "chart-stat",
   "chart-waffle",
   "chart-stacked-bar",
+  "chart-slope",
   "funnel-stages",
   "quadrant-matrix"
 ]);
@@ -4908,10 +4912,10 @@ function countEdgeCrossings(edges, warnAt = 3) {
           if (isNearAny(p, a.ends, SAME_POINT_TOL) || isNearAny(p, b.ends, SAME_POINT_TOL))
             continue;
           if (\u5171\u6709\u5074.length > 0) {
-            const \u67A0 = Math.min(MAX_CHECKS - checks, MAX_CHECKS_PER_PAIR - pairChecks);
-            const \u4E88\u7B97 = { \u6B8B\u308A: Math.max(0, \u67A0) };
+            const \u67A02 = Math.min(MAX_CHECKS - checks, MAX_CHECKS_PER_PAIR - pairChecks);
+            const \u4E88\u7B97 = { \u6B8B\u308A: Math.max(0, \u67A02) };
             const \u5224\u5B9A = mergesTowardShared(a.flat, b.flat, p, \u5171\u6709\u5074, MERGE_TOL, \u4E88\u7B97);
-            const \u4F7F\u3063\u305F = Math.max(0, \u67A0) - \u4E88\u7B97.\u6B8B\u308A;
+            const \u4F7F\u3063\u305F = Math.max(0, \u67A02) - \u4E88\u7B97.\u6B8B\u308A;
             checks += \u4F7F\u3063\u305F;
             pairChecks += \u4F7F\u3063\u305F;
             if (\u5224\u5B9A === "merged") continue;
@@ -6786,6 +6790,8 @@ var TOKENS = {
     "chart-waffle": { w: 640, h: 320 },
     // 帯を最大 2 本 + 下に一覧。 縦は帯 2 本ぶんで足りる (cdl#551)
     "chart-stacked-bar": { w: 640, h: 320 },
+    // 左右 2 本の縦軸と、その外に名札。 縦は系列が縦に並ぶぶん要る (cdl#688)
+    "chart-slope": { w: 640, h: 360 },
     // Timeline / Mind 系 (CAR-994 Phase B)
     "gantt-timeline": { w: 720, h: 360 },
     "mind-map": { w: 720, h: 480 },
@@ -9499,6 +9505,7 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
   "chart-line",
   "chart-bar",
   "chart-pie",
+  "chart-slope",
   "journey-map",
   "mind-map",
   "tree-hierarchy",
@@ -11844,52 +11851,52 @@ function ChartPieNode({
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
+  const \u524D\u3042\u308A = data.some((d) => d.previous !== void 0);
+  const \u4ECA\u306E\u5024 = data.map((d) => Math.max(0, d.value));
+  const \u524D\u306E\u5024 = data.map((d) => Math.max(0, d.previous ?? 0));
+  const \u4ECA\u306E\u5408\u8A08 = \u4ECA\u306E\u5024.reduce((acc, value) => acc + value, 0);
+  const \u524D\u306E\u5408\u8A08 = \u524D\u306E\u5024.reduce((acc, value) => acc + value, 0);
+  const \u4ECA\u306E\u5272\u5408 = \u524D\u3042\u308A ? \u4ECA\u306E\u5024.map((value) => \u4ECA\u306E\u5408\u8A08 > 0 ? value / \u4ECA\u306E\u5408\u8A08 : 0) : data.map((d) => d.value / total);
+  const \u524D\u306E\u5272\u5408 = \u524D\u306E\u5024.map((value) => \u524D\u306E\u5408\u8A08 > 0 ? value / \u524D\u306E\u5408\u8A08 : 0);
+  const \u5F62 = node.chartPieForm === "arcs" || node.chartPieForm === "table" ? node.chartPieForm : "ring";
   const PAD_TOP2 = 20;
   const PAD_BOTTOM2 = 20;
   const PAD_SIDE = 20;
   const chartAreaH = node.h - PAD_TOP2 - PAD_BOTTOM2;
-  const \u540D\u672D\u306E\u7D1A = 14;
-  const \u6570\u5024\u306E\u7D1A = 13;
+  const \u5272\u5408\u306E\u7D1A = 19;
+  const \u540D\u524D\u306E\u7D1A = 12;
   const \u5F15\u304D\u51FA\u3057 = 18;
   const \u5B57\u307E\u3067\u306E\u9593 = 26;
   const \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057 = 20;
-  const \u5272\u5408\u306E\u6587\u5B57 = data.map((d) => \u5272\u5408\u8868\u8A18(d.value / total));
-  const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u306E\u6587\u5B57[i]}`);
+  const \u5272\u5408\u306E\u6587\u5B57 = \u4ECA\u306E\u5272\u5408.map(\u5272\u5408\u8868\u8A18);
+  const \u540D\u524D\u306E\u6587\u5B57 = data.map((d, i) => {
+    const \u540D = d.label ?? "";
+    if (\u524D\u3042\u308A) return `${\u540D}  ${\u5B9F\u5024\u8868\u8A18(\u524D\u306E\u5024[i])} \u2192 ${\u5B9F\u5024\u8868\u8A18(\u4ECA\u306E\u5024[i])}`;
+    return `${\u5B9F\u5024\u8868\u8A18(d.value)}%` === \u5272\u5408\u306E\u6587\u5B57[i] ? \u540D : `${\u540D}  ${\u5B9F\u5024\u8868\u8A18(d.value)}`;
+  });
+  if (\u5F62 !== "ring") {
+    const \u5171\u901A = { node, active, data, \u5272\u5408: \u4ECA\u306E\u5272\u5408, x0, y0, drawing, progress, instanceId };
+    return \u5F62 === "arcs" ? \u5F27\u306E\u5F62(\u5171\u901A) : \u8868\u306E\u5F62(\u5171\u901A);
+  }
   const \u540D\u672D\u5E45 = Math.max(
     0,
     ...data.map(
-      (d, i) => Math.max(textWidth(d.label ?? "", \u540D\u672D\u306E\u7D1A), textWidth(\u6570\u5024\u306E\u6587\u5B57[i] ?? "", \u6570\u5024\u306E\u7D1A))
+      (_d, i) => Math.max(
+        textWidth(\u5272\u5408\u306E\u6587\u5B57[i] ?? "", \u5272\u5408\u306E\u7D1A),
+        textWidth(\u540D\u524D\u306E\u6587\u5B57[i] ?? "", \u540D\u524D\u306E\u7D1A)
+      )
     )
   );
   const \u7E26\u304B\u3089 = chartAreaH / 2 - \u5F15\u304D\u51FA\u3057 - \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057;
   const \u6A2A\u304B\u3089 = (node.w - PAD_SIDE * 2) / 2 - \u5F15\u304D\u51FA\u3057 - \u5B57\u307E\u3067\u306E\u9593 - \u540D\u672D\u5E45;
   const radius = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
-  const \u5185\u534A\u5F84 = radius * 0.58;
+  const \u5916\u306E\u5185\u534A\u5F84 = radius * (\u524D\u3042\u308A ? 0.75 : 0.58);
+  const \u524D\u306E\u5916\u534A\u5F84 = radius * 0.67;
+  const \u524D\u306E\u5185\u534A\u5F84 = radius * 0.42;
   const cx = node.w / 2;
   const cy = PAD_TOP2 + chartAreaH / 2;
-  let cumAngle = -Math.PI / 2;
-  let cumFrac = 0;
-  const slices = data.map((d) => {
-    const frac = d.value / total;
-    const angle = frac * Math.PI * 2;
-    const a0 = cumAngle;
-    const a1 = cumAngle + angle;
-    cumAngle = a1;
-    const startFrac = cumFrac;
-    cumFrac += frac;
-    const x1 = cx + radius * Math.cos(a0);
-    const y1 = cy + radius * Math.sin(a0);
-    const x2 = cx + radius * Math.cos(a1);
-    const y2 = cy + radius * Math.sin(a1);
-    const x3 = cx + \u5185\u534A\u5F84 * Math.cos(a1);
-    const y3 = cy + \u5185\u534A\u5F84 * Math.sin(a1);
-    const x4 = cx + \u5185\u534A\u5F84 * Math.cos(a0);
-    const y4 = cy + \u5185\u534A\u5F84 * Math.sin(a0);
-    const large = angle > Math.PI ? 1 : 0;
-    const path = `M ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 ${large} 0 ${x4} ${y4} Z`;
-    const \u4E2D\u592E\u89D2 = (a0 + a1) / 2;
-    return { d, frac, path, startFrac, \u4E2D\u592E\u89D2 };
-  });
+  const \u524D\u306Eslices = \u524D\u3042\u308A ? \u8F2A\u3092\u7D44\u3080(data, cx, cy, \u524D\u306E\u5916\u534A\u5F84, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5272\u5408) : [];
+  const slices = \u8F2A\u3092\u7D44\u3080(data, cx, cy, radius, \u5916\u306E\u5185\u534A\u5F84, \u4ECA\u306E\u5272\u5408);
   const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
   const \u5F71id = `cdl-pie-shadow-${instanceId}`;
@@ -11913,19 +11920,34 @@ function ChartPieNode({
       drawing && /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, radius + 2, \u958B\u304D) }),
       /* @__PURE__ */ jsxRuntime.jsx("filter", { id: \u5F71id, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsxRuntime.jsx("feDropShadow", { dx: "0", dy: "6", stdDeviation: "10", floodColor: "#0b1220", floodOpacity: "0.16" }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, filter: `url(#${\u5F71id})`, children: slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        "data-cdl-role": "chart-pie-slice",
-        "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
-        d: s.path,
-        fill: sliceColor(s.d.tone, idx),
-        stroke: "var(--cdl-node-fill, #ffffff)",
-        strokeWidth: 3,
-        strokeLinejoin: "round"
-      },
-      `slice-${idx}`
-    )) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, filter: `url(#${\u5F71id})`, children: [
+      \u524D\u306Eslices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          "data-cdl-role": "chart-pie-slice-previous",
+          "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+          d: s.path,
+          fill: sliceColor(s.d.tone, idx),
+          stroke: "var(--cdl-node-fill, #ffffff)",
+          strokeWidth: 3,
+          strokeLinejoin: "round"
+        },
+        `slice-previous-${idx}`
+      )),
+      slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          "data-cdl-role": "chart-pie-slice",
+          "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+          d: s.path,
+          fill: sliceColor(s.d.tone, idx),
+          stroke: "var(--cdl-node-fill, #ffffff)",
+          strokeWidth: 3,
+          strokeLinejoin: "round"
+        },
+        `slice-${idx}`
+      ))
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -11935,7 +11957,7 @@ function ChartPieNode({
         fontSize: Math.round(radius * 0.26),
         fontWeight: 600,
         fill: "var(--cdl-text, #1a1f2a)",
-        children: \u5B9F\u5024\u8868\u8A18(Math.round(total))
+        children: \u5B9F\u5024\u8868\u8A18(Math.round(\u524D\u3042\u308A ? \u4ECA\u306E\u5408\u8A08 : total))
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -11972,12 +11994,12 @@ function ChartPieNode({
           "text",
           {
             x: \u5B57x,
-            y: \u6298\u308Cy - 3,
+            y: \u6298\u308Cy - 1,
             textAnchor: \u53F3 ? "start" : "end",
-            fontSize: \u540D\u672D\u306E\u7D1A,
+            fontSize: \u5272\u5408\u306E\u7D1A,
             fontWeight: 600,
             fill: "var(--cdl-text, #1a1f2a)",
-            children: s.d.label
+            children: \u5272\u5408\u306E\u6587\u5B57[idx]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -11986,15 +12008,275 @@ function ChartPieNode({
             x: \u5B57x,
             y: \u6298\u308Cy + 15,
             textAnchor: \u53F3 ? "start" : "end",
-            fontSize: \u6570\u5024\u306E\u7D1A,
+            fontSize: \u540D\u524D\u306E\u7D1A,
             fill: "var(--cdl-text-dim, #5a6270)",
-            children: \u6570\u5024\u306E\u6587\u5B57[idx]
+            children: \u540D\u524D\u306E\u6587\u5B57[idx]
           }
         )
       ] }, `callout-${idx}`);
     })
   ] });
 }
+function \u8F2A\u3092\u7D44\u3080(data, cx, cy, \u5916\u534A\u5F84, \u5185\u534A\u5F84, \u5272\u5408) {
+  let cumAngle = -Math.PI / 2;
+  let cumFrac = 0;
+  return data.map((d, idx) => {
+    const frac = \u5272\u5408[idx] ?? 0;
+    const angle = frac * Math.PI * 2;
+    const a0 = cumAngle;
+    const a1 = cumAngle + angle;
+    cumAngle = a1;
+    const startFrac = cumFrac;
+    cumFrac += frac;
+    const x1 = cx + \u5916\u534A\u5F84 * Math.cos(a0);
+    const y1 = cy + \u5916\u534A\u5F84 * Math.sin(a0);
+    const x2 = cx + \u5916\u534A\u5F84 * Math.cos(a1);
+    const y2 = cy + \u5916\u534A\u5F84 * Math.sin(a1);
+    const x3 = cx + \u5185\u534A\u5F84 * Math.cos(a1);
+    const y3 = cy + \u5185\u534A\u5F84 * Math.sin(a1);
+    const x4 = cx + \u5185\u534A\u5F84 * Math.cos(a0);
+    const y4 = cy + \u5185\u534A\u5F84 * Math.sin(a0);
+    const large = angle > Math.PI ? 1 : 0;
+    const path = `M ${x1} ${y1} A ${\u5916\u534A\u5F84} ${\u5916\u534A\u5F84} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 ${large} 0 ${x4} ${y4} Z`;
+    return { d, frac, path, startFrac, \u4E2D\u592E\u89D2: (a0 + a1) / 2 };
+  });
+}
+function \u67A0(node, active) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      "data-cdl-role": "node-body",
+      x: 0,
+      y: 0,
+      width: node.w,
+      height: node.h,
+      rx: 16,
+      fill: "var(--cdl-node-fill, #ffffff)",
+      stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
+      strokeWidth: active ? 3 : 1.25
+    }
+  );
+}
+function \u5F27\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing, progress }) {
+  const PAD = 20;
+  const \u540D\u524D\u306E\u7D1A = 14;
+  const \u5272\u5408\u306E\u7D1A = 24;
+  const \u5370\u304B\u3089\u540D\u524D\u307E\u30672 = 18;
+  const \u540D\u524D\u304B\u3089\u5272\u5408\u307E\u3067 = 24;
+  const \u5272\u5408\u306E\u6587\u5B57 = \u5272\u5408.map(\u5272\u5408\u8868\u8A18);
+  const \u4E00\u89A7\u5E45 = 10 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672 + Math.max(0, ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A))) + \u540D\u524D\u304B\u3089\u5272\u5408\u307E\u3067 + Math.max(0, ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A)));
+  const \u7E26\u304B\u3089 = (node.h - PAD * 2) / 2;
+  const \u6A2A\u304B\u3089 = (node.w - PAD * 2 - \u4E00\u89A7\u5E45 - 28) / 2;
+  const R = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
+  const cx = PAD + R;
+  const cy = node.h / 2;
+  const \u7A74 = R * 0.34;
+  const \u523B\u307F = (R - \u7A74) / Math.max(1, data.length);
+  const \u592A\u3055 = Math.max(3, \u523B\u307F * 0.6);
+  const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u4E00\u89A7\u5DE6 = node.w - PAD - \u4E00\u89A7\u5E45;
+  const \u884C\u306E\u9593 = Math.min(56, (node.h - PAD * 2) / Math.max(1, data.length));
+  const \u4E00\u89A7\u4E0A = node.h / 2 - \u884C\u306E\u9593 * (data.length - 1) / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
+    \u67A0(node, active),
+    data.map((d, idx) => {
+      const r = R - \u592A\u3055 / 2 - idx * \u523B\u307F;
+      if (r <= \u592A\u3055 / 2) return null;
+      const \u53D6\u308A\u5206 = (\u5272\u5408[idx] ?? 0) * (drawing ? \u958B\u304D : 1);
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            "data-cdl-role": "chart-pie-arc-track",
+            cx,
+            cy,
+            r,
+            fill: "none",
+            stroke: "var(--cdl-divider, #d4d4d8)",
+            strokeWidth: \u592A\u3055
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            "data-cdl-role": "chart-pie-arc",
+            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+            d: \u5F27\u306E\u9053(cx, cy, r, \u53D6\u308A\u5206),
+            fill: "none",
+            stroke: sliceColor(d.tone, idx),
+            strokeWidth: \u592A\u3055,
+            strokeLinecap: "round"
+          }
+        )
+      ] }, `arc-${idx}`);
+    }),
+    data.map((d, idx) => {
+      const y = \u4E00\u89A7\u4E0A + \u884C\u306E\u9593 * idx;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: \u4E00\u89A7\u5DE6,
+            y: y - 9,
+            width: 10,
+            height: 10,
+            rx: 2,
+            fill: sliceColor(d.tone, idx)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: \u4E00\u89A7\u5DE6 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672,
+            y,
+            fontSize: \u540D\u524D\u306E\u7D1A,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: d.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: node.w - PAD,
+            y: y + 4,
+            textAnchor: "end",
+            fontSize: \u5272\u5408\u306E\u7D1A,
+            fontWeight: 600,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: \u5272\u5408\u306E\u6587\u5B57[idx]
+          }
+        )
+      ] }, `row-${idx}`);
+    })
+  ] });
+}
+function \u8868\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing, progress, instanceId }) {
+  const PAD = 20;
+  const \u898B\u51FA\u3057\u306E\u7D1A = 11;
+  const \u540D\u524D\u306E\u7D1A = 15;
+  const \u5272\u5408\u306E\u7D1A = 17;
+  const \u5B9F\u6570\u306E\u7D1A = 15;
+  const \u5370\u304B\u3089\u540D\u524D\u307E\u30672 = 18;
+  const \u5272\u5408\u306E\u6587\u5B57 = \u5272\u5408.map(\u5272\u5408\u8868\u8A18);
+  const \u5B9F\u6570\u306E\u6587\u5B57 = data.map((d) => \u5B9F\u5024\u8868\u8A18(d.value));
+  const \u540D\u524D\u5E45 = Math.max(0, ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A)));
+  const \u5272\u5408\u5E45 = Math.max(textWidth("\u5272\u5408", \u898B\u51FA\u3057\u306E\u7D1A), ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A)));
+  const \u5B9F\u6570\u5E45 = Math.max(textWidth("\u5024", \u898B\u51FA\u3057\u306E\u7D1A), ...\u5B9F\u6570\u306E\u6587\u5B57.map((t) => textWidth(t, \u5B9F\u6570\u306E\u7D1A)));
+  const \u8868\u5E45 = 10 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672 + \u540D\u524D\u5E45 + 28 + \u5272\u5408\u5E45 + 24 + \u5B9F\u6570\u5E45;
+  const \u7E26\u304B\u3089 = (node.h - PAD * 2) / 2;
+  const \u6A2A\u304B\u3089 = (node.w - PAD * 2 - \u8868\u5E45 - 28) / 2;
+  const R = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
+  const \u5185\u534A\u5F84 = R * 0.58;
+  const cx = PAD + R;
+  const cy = node.h / 2;
+  const \u8868\u5DE6 = node.w - PAD - \u8868\u5E45;
+  const \u53F3\u7AEF = node.w - PAD;
+  const \u5272\u5408\u53F3 = \u53F3\u7AEF - \u5B9F\u6570\u5E45 - 24;
+  const \u884C\u306E\u9593 = Math.min(52, (node.h - PAD * 2 - 40) / Math.max(1, data.length));
+  const \u898B\u51FA\u3057\u306Ey = node.h / 2 - \u884C\u306E\u9593 * data.length / 2 - 14;
+  const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
+  const \u958B\u304D\u59CB\u3081\u305F = (\u59CB\u307E\u308A) => !drawing || \u958B\u304D > \u59CB\u307E\u308A;
+  let \u89D2 = -Math.PI / 2;
+  let \u7D2F\u8A08 = 0;
+  const \u6247\u305F\u3061 = data.map((d, idx) => {
+    const frac = \u5272\u5408[idx] ?? 0;
+    const a0 = \u89D2;
+    const a1 = \u89D2 + frac * Math.PI * 2;
+    \u89D2 = a1;
+    const \u59CB\u307E\u308A = \u7D2F\u8A08;
+    \u7D2F\u8A08 += frac;
+    return { d, idx, \u59CB\u307E\u308A, path: \u8F2A\u306E\u9053(cx, cy, R, \u5185\u534A\u5F84, a0, a1) };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
+    \u67A0(node, active),
+    drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, R + 2, \u958B\u304D) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, children: \u6247\u305F\u3061.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        "data-cdl-role": "chart-pie-slice",
+        "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+        d: s.path,
+        fill: sliceColor(s.d.tone, s.idx),
+        stroke: "var(--cdl-node-fill, #ffffff)",
+        strokeWidth: 3,
+        strokeLinejoin: "round"
+      },
+      `slice-${s.idx}`
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy - 2,
+        textAnchor: "middle",
+        fontSize: Math.round(R * 0.26),
+        fontWeight: 600,
+        fill: "var(--cdl-text, #1a1f2a)",
+        children: \u5B9F\u5024\u8868\u8A18(Math.round(data.reduce((acc, d) => acc + d.value, 0)))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + Math.round(R * 0.2),
+        textAnchor: "middle",
+        fontSize: Math.round(R * 0.12),
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: "\u5408\u8A08"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u8868\u5DE6, y: \u898B\u51FA\u3057\u306Ey, fontSize: \u898B\u51FA\u3057\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: "\u5185\u8A33" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u5272\u5408\u53F3, y: \u898B\u51FA\u3057\u306Ey, textAnchor: "end", fontSize: \u898B\u51FA\u3057\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: "\u5272\u5408" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u53F3\u7AEF, y: \u898B\u51FA\u3057\u306Ey, textAnchor: "end", fontSize: \u898B\u51FA\u3057\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: "\u5024" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        "data-cdl-role": "chart-pie-table-rule",
+        x1: \u8868\u5DE6,
+        y1: \u898B\u51FA\u3057\u306Ey + 10,
+        x2: \u53F3\u7AEF,
+        y2: \u898B\u51FA\u3057\u306Ey + 10,
+        stroke: "var(--cdl-text, #1a1f2a)",
+        strokeWidth: 1.2
+      }
+    ),
+    \u6247\u305F\u3061.map((s) => {
+      if (!\u958B\u304D\u59CB\u3081\u305F(s.\u59CB\u307E\u308A)) return null;
+      const y = \u898B\u51FA\u3057\u306Ey + 40 + \u884C\u306E\u9593 * s.idx;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: \u8868\u5DE6, y: y - 10, width: 10, height: 10, rx: 2, fill: sliceColor(s.d.tone, s.idx) }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u8868\u5DE6 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672, y, fontSize: \u540D\u524D\u306E\u7D1A, fill: "var(--cdl-text, #1a1f2a)", children: s.d.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u5272\u5408\u53F3, y, textAnchor: "end", fontSize: \u5272\u5408\u306E\u7D1A, fontWeight: 600, fill: "var(--cdl-text, #1a1f2a)", children: \u5272\u5408\u306E\u6587\u5B57[s.idx] }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: \u53F3\u7AEF, y, textAnchor: "end", fontSize: \u5B9F\u6570\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u5B9F\u6570\u306E\u6587\u5B57[s.idx] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            "data-cdl-role": "chart-pie-table-rule",
+            x1: \u8868\u5DE6,
+            y1: y + 16,
+            x2: \u53F3\u7AEF,
+            y2: y + 16,
+            stroke: "var(--cdl-divider, #d4d4d8)",
+            strokeWidth: 1
+          }
+        )
+      ] }, `row-${s.idx}`);
+    })
+  ] });
+}
+function \u5F27\u306E\u9053(cx, cy, r, \u53D6\u308A\u5206) {
+  const \u5B9F\u52B9 = Math.max(0, Math.min(0.9999, \u53D6\u308A\u5206));
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + \u5B9F\u52B9 * Math.PI * 2;
+  const large = \u5B9F\u52B9 > 0.5 ? 1 : 0;
+  return `M ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)}`;
+}
+function \u8F2A\u306E\u9053(cx, cy, R, r, a0, a1) {
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  return `M ${cx + R * Math.cos(a0)} ${cy + R * Math.sin(a0)} A ${R} ${R} 0 ${large} 1 ${cx + R * Math.cos(a1)} ${cy + R * Math.sin(a1)} L ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} A ${r} ${r} 0 ${large} 0 ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} Z`;
+}
 function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
   if (\u958B\u304D <= 0) return null;
   if (\u958B\u304D >= 1) return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r });
@@ -12196,8 +12478,8 @@ function ChartRadialNode({
       frac,
       \u4E2D\u5FC3\u534A\u5F84,
       // 軌道は全周。 1 周ちょうどは弧で表せないので、 わずかに欠かして描く
-      \u8ECC\u9053: \u5F27\u306E\u9053(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
-      \u53D6\u308A\u5206: frac <= 0 ? null : \u5F27\u306E\u9053(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, Math.min(frac, 0.9999))
+      \u8ECC\u9053: \u5F27\u306E\u90532(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
+      \u53D6\u308A\u5206: frac <= 0 ? null : \u5F27\u306E\u90532(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, Math.min(frac, 0.9999))
     };
   });
   const \u4E00\u89A7\u306E\u59CB\u307E\u308A = PAD + (\u4F7F\u3048\u308B\u9AD8\u3055 - \u884C\u306E\u9AD8\u3055 * data.length) / 2 + \u884C\u306E\u9AD8\u3055 / 2;
@@ -12268,7 +12550,7 @@ function ChartRadialNode({
   ] });
 }
 var \u5370\u306E\u5E45 = 18;
-function \u5F27\u306E\u9053(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
+function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
   const \u5916 = \u4E2D\u5FC3\u534A\u5F84 + \u5E45 / 2;
   const \u5185 = Math.max(0.5, \u4E2D\u5FC3\u534A\u5F84 - \u5E45 / 2);
   const a0 = -Math.PI / 2;
@@ -12314,12 +12596,12 @@ function ChartStatNode({
       }
     ),
     data.map((d, idx) => {
-      const \u67A0 = \u533A\u753B.\u67A0(idx);
+      const \u67A02 = \u533A\u753B.\u67A0(idx);
       const frac = total > 0 ? d.value / total : 0;
       const \u8272 = \u5370\u306E\u8272(d.tone, idx);
       const \u6570\u5024 = \u5B9F\u5024\u8868\u8A184(d.value);
-      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A0.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
-      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A0.x} ${\u67A0.y})`, children: [
+      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A02.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
         idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           "line",
           {
@@ -12327,7 +12609,7 @@ function ChartStatNode({
             x1: 0,
             y1: \u533A\u753B.\u4F59\u767D,
             x2: 0,
-            y2: \u67A0.h - \u533A\u753B.\u4F59\u767D,
+            y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
             stroke: "var(--cdl-divider, #d4d4d8)",
             strokeWidth: 1
           }
@@ -12336,7 +12618,7 @@ function ChartStatNode({
           "text",
           {
             "data-cdl-role": "chart-stat-label",
-            x: \u67A0.w / 2,
+            x: \u67A02.w / 2,
             y: \u533A\u753B.\u540D\u524D\u306Ey,
             fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
             fontWeight: 700,
@@ -12350,7 +12632,7 @@ function ChartStatNode({
           {
             "data-cdl-role": "chart-stat-value",
             "data-cdl-unresolved": d.unresolved ? "true" : void 0,
-            x: \u67A0.w / 2,
+            x: \u67A02.w / 2,
             y: \u533A\u753B.\u6570\u5024\u306Ey,
             fontSize: \u6570\u5024\u306E\u7D1A,
             fontWeight: 700,
@@ -12363,7 +12645,7 @@ function ChartStatNode({
           "circle",
           {
             "data-cdl-role": "chart-stat-track",
-            cx: \u67A0.w / 2,
+            cx: \u67A02.w / 2,
             cy: \u533A\u753B.\u5F27\u306Ey,
             r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
             fill: "none",
@@ -12376,7 +12658,7 @@ function ChartStatNode({
           "path",
           {
             "data-cdl-role": "chart-stat-arc",
-            d: \u5F27\u306E\u90532(\u67A0.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
+            d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
             fill: "none",
             stroke: \u8272,
             strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
@@ -12387,7 +12669,7 @@ function ChartStatNode({
           "text",
           {
             "data-cdl-role": "chart-stat-share",
-            x: \u67A0.w / 2,
+            x: \u67A02.w / 2,
             y: \u533A\u753B.\u5272\u5408\u306Ey,
             fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
             textAnchor: "middle",
@@ -12432,7 +12714,7 @@ function \u53CE\u3081\u308B\u7D1A(\u5B57, \u4F7F\u3048\u308B\u5E452, \u521D\u671
   while (\u7D1A > \u4E0B\u9650 && textWidth(\u5B57, \u7D1A) > \u4F7F\u3048\u308B\u5E452) \u7D1A -= 1;
   return \u7D1A;
 }
-function \u5F27\u306E\u90532(cx, cy, r, \u5272\u5408) {
+function \u5F27\u306E\u90533(cx, cy, r, \u5272\u5408) {
   const a0 = -Math.PI / 2;
   const a1 = a0 + \u5272\u5408 * Math.PI * 2;
   const large = \u5272\u5408 > 0.5 ? 1 : 0;
@@ -12740,6 +13022,238 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
   });
   return out;
 }
+
+// src/kinds/chart-number.ts
+function \u5B9F\u5024\u8868\u8A187(v) {
+  return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
+function ChartSlopeNode({
+  node,
+  active,
+  stateValues = {},
+  drawing = false,
+  progress = 1
+}) {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const data = resolveChartData(node.chartData ?? [], stateValues);
+  const PAD = 24;
+  const \u6642\u70B9\u306E\u7D1A = 12;
+  const \u5024\u306E\u7D1A = 14;
+  const \u540D\u524D\u306E\u4E0A\u9650\u7D1A = 13;
+  const \u540D\u524D\u306E\u4E0B\u9650\u7D1A = 9;
+  const \u8EF8\u304B\u3089\u5024\u307E\u3067 = 10;
+  const \u5024\u304B\u3089\u540D\u524D\u307E\u3067 = 8;
+  const \u524D\u3042\u308A = data.some((d) => d.previous !== void 0);
+  const \u7CFB\u5217\u305F\u3061 = data.map((d, i) => ({
+    \u540D\u524D: d.label ?? "",
+    // 前を持たない件は 0 から立ち上げる。 件を落とすと左右で系列の数が変わり、色の並びが
+    // 対応しなくなる (`chart-stacked-bar` と同じ判断)
+    \u524D: d.previous ?? 0,
+    \u4ECA: d.value,
+    \u8272: \u5370\u306E\u82724(d.tone, i),
+    \u672A\u89E3\u6C7A: d.unresolved === true
+  }));
+  const \u5168\u90E8\u306E\u5024 = \u524D\u3042\u308A ? \u7CFB\u5217\u305F\u3061.flatMap((s) => [s.\u524D, s.\u4ECA]) : \u7CFB\u5217\u305F\u3061.map((s) => s.\u4ECA);
+  const \u6700\u5C0F = \u5168\u90E8\u306E\u5024.length > 0 ? Math.min(...\u5168\u90E8\u306E\u5024) : 0;
+  const \u6700\u5927 = \u5168\u90E8\u306E\u5024.length > 0 ? Math.max(...\u5168\u90E8\u306E\u5024) : 0;
+  const \u5C3A\u306E\u5E45 = \u6700\u5927 - \u6700\u5C0F;
+  const \u4E0A\u7AEF = PAD + (\u524D\u3042\u308A ? \u6642\u70B9\u306E\u7D1A + 12 : 0) + 6;
+  const \u4E0B\u7AEF = Math.max(\u4E0A\u7AEF + 10, node.h - PAD - 6);
+  const y\u3092\u53D6\u308B = (v) => \u5C3A\u306E\u5E45 > 0 ? \u4E0B\u7AEF - (v - \u6700\u5C0F) / \u5C3A\u306E\u5E45 * (\u4E0B\u7AEF - \u4E0A\u7AEF) : (\u4E0A\u7AEF + \u4E0B\u7AEF) / 2;
+  const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A187(s.\u524D));
+  const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A187(s.\u4ECA));
+  const \u5DE6\u5024\u5E45 = Math.max(0, ...\u5DE6\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
+  const \u53F3\u5024\u5E45 = Math.max(0, ...\u53F3\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
+  const \u540D\u524D\u306B\u4F7F\u3048\u308B = Math.max(
+    0,
+    (node.w - PAD * 2 - \u7DDA\u306E\u6700\u5C0F\u5E45 - (\u5DE6\u5024\u5E45 + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067) - (\u53F3\u5024\u5E45 + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067)) / 2
+  );
+  const \u540D\u524D\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A2(\u7CFB\u5217\u305F\u3061.map((s) => s.\u540D\u524D), \u540D\u524D\u306B\u4F7F\u3048\u308B, \u540D\u524D\u306E\u4E0A\u9650\u7D1A, \u540D\u524D\u306E\u4E0B\u9650\u7D1A);
+  const \u540D\u524D\u5E45 = Math.min(
+    \u540D\u524D\u306B\u4F7F\u3048\u308B,
+    Math.max(0, ...\u7CFB\u5217\u305F\u3061.map((s) => textWidth(s.\u540D\u524D, \u540D\u524D\u306E\u7D1A)))
+  );
+  const \u5DE6\u306E\u4F59\u767D = \u540D\u524D\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067 + \u5DE6\u5024\u5E45 + \u8EF8\u304B\u3089\u5024\u307E\u3067;
+  const \u53F3\u306E\u4F59\u767D = \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067 + \u540D\u524D\u5E45;
+  const \u5DE6\u8EF8x = \u524D\u3042\u308A ? Math.max(PAD, Math.min(PAD + \u5DE6\u306E\u4F59\u767D, node.w / 2 - \u7DDA\u306E\u6700\u5C0F\u5E45 / 2)) : Math.max(PAD, Math.min(node.w / 2, node.w - PAD));
+  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;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        "data-cdl-role": "node-body",
+        x: 0,
+        y: 0,
+        width: node.w,
+        height: node.h,
+        rx: 16,
+        fill: "var(--cdl-node-fill, #ffffff)",
+        stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
+        strokeWidth: active ? 3 : 1.25
+      }
+    ),
+    (\u524D\u3042\u308A ? [\u5DE6\u8EF8x, \u53F3\u8EF8x] : [\u5DE6\u8EF8x]).map((x, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        "data-cdl-role": "chart-slope-axis",
+        x1: x,
+        y1: \u4E0A\u7AEF - 6,
+        x2: x,
+        y2: \u4E0B\u7AEF + 6,
+        stroke: "var(--cdl-divider, #d4d4d8)",
+        strokeWidth: 1
+      },
+      `axis-${i}`
+    )),
+    \u524D\u3042\u308A && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          "data-cdl-role": "chart-slope-period",
+          x: \u5DE6\u8EF8x,
+          y: PAD + \u6642\u70B9\u306E\u7D1A,
+          textAnchor: "middle",
+          fontSize: \u6642\u70B9\u306E\u7D1A,
+          fontWeight: 700,
+          fill: "var(--cdl-text-dim, #5a6270)",
+          children: "\u524D"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          "data-cdl-role": "chart-slope-period",
+          x: \u53F3\u8EF8x,
+          y: PAD + \u6642\u70B9\u306E\u7D1A,
+          textAnchor: "middle",
+          fontSize: \u6642\u70B9\u306E\u7D1A,
+          fontWeight: 700,
+          fill: "var(--cdl-text-dim, #5a6270)",
+          children: "\u4ECA"
+        }
+      )
+    ] }),
+    \u7CFB\u5217\u305F\u3061.map((s, i) => {
+      const \u5DE6y = y\u3092\u53D6\u308B(s.\u524D);
+      const \u53F3y = y\u3092\u53D6\u308B(s.\u4ECA);
+      const \u672A\u89E3\u6C7A = s.\u672A\u89E3\u6C7A ? "true" : void 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        \u524D\u3042\u308A && /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            "data-cdl-role": "chart-slope-line",
+            "data-cdl-unresolved": \u672A\u89E3\u6C7A,
+            d: `M ${\u5DE6\u8EF8x} ${\u5DE6y} L ${\u53F3\u8EF8x} ${\u53F3y}`,
+            fill: "none",
+            stroke: s.\u8272,
+            strokeWidth: 2.5,
+            strokeLinecap: "round",
+            ...\u4F38\u3070\u3059dash(drawing, \u4F38\u3073)
+          }
+        ),
+        \u524D\u3042\u308A && /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            "data-cdl-role": "chart-slope-dot",
+            "data-cdl-unresolved": \u672A\u89E3\u6C7A,
+            cx: \u5DE6\u8EF8x,
+            cy: \u5DE6y,
+            r: 4,
+            fill: s.\u8272
+          }
+        ),
+        \u53F3\u3092\u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            "data-cdl-role": "chart-slope-dot",
+            "data-cdl-unresolved": \u672A\u89E3\u6C7A,
+            cx: \u53F3\u8EF8x,
+            cy: \u53F3y,
+            r: 4,
+            fill: s.\u8272
+          }
+        ),
+        \u524D\u3042\u308A ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              "data-cdl-role": "chart-slope-label",
+              x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
+              y: \u5DE6y + 5,
+              textAnchor: "end",
+              fontSize: \u5024\u306E\u7D1A,
+              fontWeight: 600,
+              fill: "var(--cdl-text, #1a1f2a)",
+              children: \u5DE6\u306E\u5B57[i]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              "data-cdl-role": "chart-slope-label",
+              x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067 - \u5DE6\u5024\u5E45 - \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
+              y: \u5DE6y + 5,
+              textAnchor: "end",
+              fontSize: \u540D\u524D\u306E\u7D1A,
+              fill: "var(--cdl-text-dim, #5a6270)",
+              children: s.\u540D\u524D
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            "data-cdl-role": "chart-slope-label",
+            x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
+            y: \u53F3y + 5,
+            textAnchor: "end",
+            fontSize: \u540D\u524D\u306E\u7D1A,
+            fill: "var(--cdl-text-dim, #5a6270)",
+            children: s.\u540D\u524D
+          }
+        ),
+        \u53F3\u3092\u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              "data-cdl-role": "chart-slope-label",
+              x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
+              y: \u53F3y + 5,
+              fontSize: \u5024\u306E\u7D1A,
+              fontWeight: 600,
+              fill: "var(--cdl-text, #1a1f2a)",
+              children: \u53F3\u306E\u5B57[i]
+            }
+          ),
+          \u524D\u3042\u308A && /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              "data-cdl-role": "chart-slope-label",
+              x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
+              y: \u53F3y + 5,
+              fontSize: \u540D\u524D\u306E\u7D1A,
+              fill: "var(--cdl-text-dim, #5a6270)",
+              children: s.\u540D\u524D
+            }
+          )
+        ] })
+      ] }, `slope-${i}`);
+    })
+  ] });
+}
+function \u5370\u306E\u82724(tone, idx) {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}
+function \u53CE\u3081\u308B\u7D1A2(\u540D\u524D\u305F\u3061, \u5E45, \u4E0A\u9650, \u4E0B\u9650) {
+  if (\u540D\u524D\u305F\u3061.length === 0) return \u4E0A\u9650;
+  let \u7D1A = \u4E0A\u9650;
+  while (\u7D1A > \u4E0B\u9650 && Math.max(...\u540D\u524D\u305F\u3061.map((n) => textWidth(n, \u7D1A))) > \u5E45) \u7D1A -= 1;
+  return \u7D1A;
+}
 function ChartBarNode({
   node,
   active,
@@ -17419,6 +17933,17 @@ function CdlNodeView({
         return /* @__PURE__ */ jsxRuntime.jsx(ChartGaugeNode, { node: resolvedNode, active, stateValues });
       case "chart-stacked-bar":
         return /* @__PURE__ */ jsxRuntime.jsx(ChartStackedBarNode, { node: resolvedNode, active, stateValues });
+      case "chart-slope":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartSlopeNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-waffle":
         return /* @__PURE__ */ jsxRuntime.jsx(ChartWaffleNode, { node: resolvedNode, active, stateValues });
       case "chart-stat":