@cardenelabs/cdl 0.32.0 → 0.34.0

package/CHANGELOG.md

@@ -5,6 +5,40 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.34.0] - 2026-09-07
+
+### Changed
+
+- **傾き図の名札の役割を値と名前で分けた** (#693)
+
+  `chart-slope-label` を `chart-slope-value` (軸の脇に置く値) と `chart-slope-name`
+  (その外に置く系列の名前) の 2 つにした。 古い役割は残していない。
+
+  1 つにまとめていると、使う側が値だけに字体を当てられず、寸法を記録する側も級 14 と
+  級 9-13 の 2 つを 1 行に潰してしまう。 他の図表 (`chart-stat` / `chart-stacked-bar`) も
+  字を役割で分けている。
+
+  `chart-slope` は `0.33.0` で入ったばかりで、この役割で selector を書いている消費側は無い。
+
+## [0.33.0] - 2026-09-07
+
+### Added
+
+- **2 時点をつなぐ線で増減と順位の入れ替わりを見せる図を新設した** (#688)
+
+  `chart-slope` を足した。 左右に縦軸を置き、系列ごとに 前 と 今 を直線で結ぶ。
+  線の向きが増減、傾きが動いた量、線の交差が順位の入れ替わりを表す。
+
+  値は `chart-stacked-bar` と同じ datum の `previous` から読む。 新しい欄は足していない。
+
+  尺は 0 に固定せず両時点の最小と最大から取る = 近い値どうしの差を傾きで読ませる図なので、
+  0 まで伸ばすと線が全部水平に潰れる。
+
+  `previous` を 1 件も書かない図は線を引かず、軸 1 本に点を並べる。 2 点が無いと傾きが
+  定義できず、水平線を引くと「動かなかった」 という別の意味になる。
+
+  段の `draw` に載せると線が左の軸から右の軸へ伸びる。
+
 ## [0.32.0] - 2026-09-07
 
 ### Added
@@ -1629,7 +1663,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.32.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.34.0...HEAD
+[0.34.0]: https://github.com/cardene777/cdl/compare/v0.33.0...v0.34.0
+[0.33.0]: https://github.com/cardene777/cdl/compare/v0.32.0...v0.33.0
 [0.32.0]: https://github.com/cardene777/cdl/compare/v0.31.1...v0.32.0
 [0.31.1]: https://github.com/cardene777/cdl/compare/v0.31.0...v0.31.1
 [0.31.0]: https://github.com/cardene777/cdl/compare/v0.30.3...v0.31.0

package/README.md

@@ -246,7 +246,7 @@ phase 切替に連動して `status: idle` → `status: running` のように描
 
 ## 2 時点の構成比
 
-`chart-pie` と `chart-stacked-bar` は datum の `previous` で前の時点を受け取る。
+`chart-pie` と `chart-stacked-bar` と `chart-slope` は datum の `previous` で前の時点を受け取る。
 `previous` を 1 件でも書くと、書かない datum も前の時点では 0 として扱うため、系列の色と
 並びが時点間で対応する。
 
@@ -267,6 +267,35 @@ phase 切替に連動して `status: idle` → `status: running` のように描
 `chart-stacked-bar` は前から今の順に帯を並べる。`previous` を書かない図は、どちらも今だけを描く。
 3 時点以上は持たない。
 
+## 2 時点の増減と順位
+
+`chart-slope` は同じ `previous` を読むが、構成比ではなく **値そのもの** を左右に打ち、系列ごとに
+直線で結ぶ。 線の向きが増減、傾きが動いた量、線の交差が順位の入れ替わりを表す。
+
+```ts
+.node("trend", {
+  lane: "l",
+  stack: 0,
+  kind: "chart-slope",
+  chartData: [
+    { label: "Web", previous: 45, value: 30 },
+    { label: "Mobile", previous: 35, value: 45 },
+    { label: "API", previous: 20, value: 25 },
+  ],
+})
+```
+
+尺は 0 に固定せず、両時点の最小と最大から取る。 近い値どうしの差を傾きで読ませる図なので、
+0 まで伸ばすと線が全部水平に潰れるため。
+
+`previous` を 1 件も書かない図は線を引かず、軸 1 本に点を並べる。 2 点が無いと傾きが定義できず、
+水平線を引くと「動かなかった」 という別の意味になる。
+
+段の `draw` にこの node を載せると、線が左の軸から右の軸へ伸びる。
+
+名札の字は値と名前で role が分かれる (`chart-slope-value` / `chart-slope-name`)。
+値だけに字体を当てられるようにするため。
+
 ## 円グラフの見せ方
 
 `chart-pie` は `chartPieForm` で見せ方を選ぶ。 欄を書かない図は `ring` と同じ。
@@ -310,9 +339,13 @@ cdl は形だけを描き、 色や影は持たない (geometry only、 style
 
 明暗の切替は consumer 側の仕組み (`html` の class 等) で行う = cdl は明暗の概念を持たない。
 
-**`CdlRole` 型は実装にある role の全部ではない**。 実装には 32 種の role があり、
-型に載っているのは 12 種。 残り 20 種 (`chart-line` / `tree-edge` / `funnel-stage` /
-`edge-glow` 等) は型を持たないが、 属性は付くので selector は書ける。
+**`CdlRole` 型は実装にある role の全部ではない**。 型に載っているのは共通の描画で使う
+ものだけで、 種別ごとの role (`chart-line` / `tree-edge` / `funnel-stage` / `edge-glow` 等)
+は型を持たないが、 属性は付くので selector は書ける。
+
+**件数は書かない**。 role は種別を足すたびに増えるため、 数を書くと必ずずれる
+(実際に 32 種と書いてあった時点の実物は 85 種だった)。 一覧が要る時は source を
+`data-cdl-role=` で検索する。
 
 型の内外は「共通か kind 固有か」 では分かれていない (共通の描画で使う `edge-glow` が型の外に
 あり、 枝分かれ図でしか使わない `mind-edge` も型の外にある)。 **型に載っているかどうかは

package/dist/index.cjs

@@ -11748,6 +11748,7 @@ var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
   "chart-stat",
   "chart-waffle",
   "chart-stacked-bar",
+  "chart-slope",
   "gantt-timeline",
   "mind-map",
   "funnel-stages",
@@ -13656,8 +13657,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",
@@ -15462,6 +15465,7 @@ var GRID_ALIGNED_KINDS = /* @__PURE__ */ new Set([
   "chart-stat",
   "chart-waffle",
   "chart-stacked-bar",
+  "chart-slope",
   "funnel-stages",
   "quadrant-matrix"
 ]);
@@ -18068,6 +18072,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 },
@@ -20781,6 +20787,7 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
   "chart-line",
   "chart-bar",
   "chart-pie",
+  "chart-slope",
   "journey-map",
   "mind-map",
   "tree-hierarchy",
@@ -25514,6 +25521,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-value",
+              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-name",
+              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-name",
+            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-value",
+              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-name",
+              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,
@@ -30193,6 +30432,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":
@@ -31974,7 +32224,8 @@ function chart(preset) {
     radial: "chart-radial",
     stat: "chart-stat",
     waffle: "chart-waffle",
-    "stacked-bar": "chart-stacked-bar"
+    "stacked-bar": "chart-stacked-bar",
+    slope: "chart-slope"
   };
   const api = {
     datum(d) {