@cardenelabs/cdl 0.32.0 → 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"
 ]);
@@ -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",
@@ -13015,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,
@@ -17694,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":