@cardenelabs/cdl 0.35.0 → 0.37.0

package/CHANGELOG.md

@@ -5,6 +5,46 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.37.0] - 2026-09-07
+
+### Added
+
+- **傾き図に縦の位置を順位にする見せ方を足した** (#707)
+
+  `chartSlopeForm` に `rank` を書くと、縦の位置が値ではなく順位の段 (等間隔) になる。
+
+  この図は「線の交差が順位の入れ替わり」 を読ませるが、縦の位置は値なので交差点の位置が
+  順位と噛み合わなかった。 どの交差が本当に順位を変えた交差なのかは、値を読み比べないと
+  決まらない。
+
+  段を等間隔に置くと交差が入れ替わりと 1 対 1 になり、水平線が「順位が動かなかった」 を
+  意味する。 軸の脇の字は値のままにして、量が図から消えないようにしている。
+
+  `rank` では「線の傾きが動いた量」 が成立しない (`+40` と `+30` がどちらも水平線)。
+  書いた図だけに効く割り切りで、量は字を読む。
+
+  同じ値の系列は同じ段に重なる。 系列が 1 本の図は縦の中央に置く。
+  前の時点を持たない図と型の外の値は今までどおり `values` として描く。
+
+## [0.36.0] - 2026-09-07
+
+### Added
+
+- **傾き図の右の列に増減を出す見せ方を足した** (#702)
+
+  `chartSlopeForm` に `delta` を書くと、右の列が今の値ではなく増減 (`+40` / `-90`) になる。
+  欄を書かない図は今までどおり今の値を出す。
+
+  傾き図は増減を読ませる図なのに、差はどこにも字になっておらず読み手の暗算だった。
+  3 つ目の数を足すと名札が縦に衝突するか線を引く幅が縮むため、今の値を増減に置き換える形で
+  列を 2 つに保っている。 左の列は前の値のままなので、`前 + 増減 = 今` で今の値は戻せる。
+
+  増減は `chart-slope-delta` で出す。 今の値とは意味が違い、消費側が増減だけに色を当てられる
+  ようにするため。 engine 側では色を分けない = 系列の色を名前に当てているので、増減にも色を
+  当てると 1 つの図に 2 つの色の体系が混ざる。 向きは符号が持つ。
+
+  型の外の値と、前の時点を持たない図は `values` として描く。
+
 ## [0.35.0] - 2026-09-07
 
 ### Changed
@@ -1677,7 +1717,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.35.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.37.0...HEAD
+[0.37.0]: https://github.com/cardene777/cdl/compare/v0.36.0...v0.37.0
+[0.36.0]: https://github.com/cardene777/cdl/compare/v0.35.0...v0.36.0
 [0.35.0]: https://github.com/cardene777/cdl/compare/v0.34.0...v0.35.0
 [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

package/README.md

@@ -295,6 +295,53 @@ phase 切替に連動して `status: idle` → `status: running` のように描
 
 名札の字は値と名前で role が分かれる (`chart-slope-value` / `chart-slope-name`)。
 値だけに字体を当てられるようにするため。
+系列の名前はその線と同じ色で描く。 線を目で辿らずに名前と線の対応が取れる。
+
+### 傾き図の見せ方
+
+`chart-slope` は `chartSlopeForm` で見せ方を選ぶ。 欄を書かない図は `values` と同じ。
+
+| 値 | 縦の位置 | 右の列 | 向くもの |
+|---|---|---|---|
+| `values` (既定) | 値 | 今の値 | 2 時点の水準をそれぞれ読ませたい図 |
+| `delta` | 値 | 増減 (`+40` / `-90`) | どれがどれだけ動いたかを読ませたい図 |
+| `rank` | 順位の段 (等間隔) | 今の値 | 順位の入れ替わりを読ませたい図 |
+
+```ts
+.node("move", { lane: "l", stack: 0, kind: "chart-slope", chartSlopeForm: "delta", chartData: [...] })
+```
+
+左の列はどれでも前の値。
+
+#### `delta` は右の列だけを変える
+
+`前 + 増減 = 今` なので `delta` でも今の値は足せば戻る。
+3 つ目の数を足さないので、 名札の高さも線を引く幅も変わらない。
+
+増減は `chart-slope-delta` で出す。 今の値とは意味が違い、 消費側が増減だけに色を
+当てられるようにするため。 engine 側では色を分けない = 系列の色を名前に当てているので、
+増減にも色を当てると 1 つの図に 2 つの色の体系が混ざる。 向きは符号が持つ。
+
+#### `rank` は縦の位置を変える
+
+段を等間隔に置くので、 **線の交差が順位の入れ替わりと 1 対 1** になり、 水平線が
+「順位が動かなかった」 を意味する。 既定 (値の尺) では交差点の位置が順位と噛み合わず、
+どの交差が本当に順位を変えた交差なのかは値を読み比べないと決まらない。
+
+軸の脇の字は値のまま。 字も順位にすると `380 → 420` と `60 → 90` がどちらも同じ水平線に
+なり、 量が図から完全に消える。 位置が順位を、 字が量を担う。
+
+**`rank` では「線の傾きが動いた量」 が成立しない**。 `+40` と `+30` がどちらも水平線に
+なるので、 量は字を読む。
+
+同じ値の系列は同じ段に重なる = 無理に 1 つずつずらすと、 書いていない差を絵が主張する。
+系列が 1 本の図は段が 1 つしか無いので縦の中央に置く。
+
+#### どの形でも同じ扱い
+
+型の外の値を書いた図は `values` として描く。
+前の時点を持たない図も `values` として描く = `delta` は引く相手がいないため、
+`rank` は軸が 1 本で並べ替える相手がいないため。
 
 ## 円グラフの見せ方
 

package/dist/index.cjs

@@ -25527,8 +25527,20 @@ function ChartSlopeNode({
   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 \u66F8\u3044\u305F\u5F62 = node.chartSlopeForm;
+  const \u5F62 = \u524D\u3042\u308A && (\u66F8\u3044\u305F\u5F62 === "delta" || \u66F8\u3044\u305F\u5F62 === "rank") ? \u66F8\u3044\u305F\u5F62 : "values";
+  const \u9806\u4F4D\u3092\u53D6\u308B = (v, \u5168\u90E8) => \u5168\u90E8.filter((x) => x > v).length + 1;
+  const \u524D\u306E\u9806\u4F4D = \u7CFB\u5217\u305F\u3061.map((s) => \u9806\u4F4D\u3092\u53D6\u308B(s.\u524D, \u7CFB\u5217\u305F\u3061.map((x) => x.\u524D)));
+  const \u4ECA\u306E\u9806\u4F4D = \u7CFB\u5217\u305F\u3061.map((s) => \u9806\u4F4D\u3092\u53D6\u308B(s.\u4ECA, \u7CFB\u5217\u305F\u3061.map((x) => x.\u4ECA)));
+  const \u6BB5\u306Ey\u3092\u53D6\u308B = (\u9806\u4F4D) => \u7CFB\u5217\u305F\u3061.length > 1 ? \u4E0A\u7AEF + (\u9806\u4F4D - 1) / (\u7CFB\u5217\u305F\u3061.length - 1) * (\u4E0B\u7AEF - \u4E0A\u7AEF) : (\u4E0A\u7AEF + \u4E0B\u7AEF) / 2;
+  const \u5897\u6E1B\u8868\u8A18 = (\u524D, \u4ECA) => {
+    const \u5DEE = \u4ECA - \u524D;
+    return \u5DEE > 0 ? `+${\u5B9F\u5024\u8868\u8A18(\u5DEE)}` : \u5B9F\u5024\u8868\u8A18(\u5DEE);
+  };
   const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A18(s.\u524D));
-  const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A18(s.\u4ECA));
+  const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map(
+    (s) => \u5F62 === "delta" ? \u5897\u6E1B\u8868\u8A18(s.\u524D, s.\u4ECA) : \u5B9F\u5024\u8868\u8A18(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(
@@ -25603,8 +25615,8 @@ function ChartSlopeNode({
       )
     ] }),
     \u7CFB\u5217\u305F\u3061.map((s, i) => {
-      const \u5DE6y = y\u3092\u53D6\u308B(s.\u524D);
-      const \u53F3y = y\u3092\u53D6\u308B(s.\u4ECA);
+      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 \u672A\u89E3\u6C7A = s.\u672A\u89E3\u6C7A ? "true" : void 0;
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
         \u524D\u3042\u308A && /* @__PURE__ */ jsxRuntime.jsx(
@@ -25684,7 +25696,7 @@ function ChartSlopeNode({
           /* @__PURE__ */ jsxRuntime.jsx(
             "text",
             {
-              "data-cdl-role": "chart-slope-value",
+              "data-cdl-role": \u5F62 === "delta" ? "chart-slope-delta" : "chart-slope-value",
               x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
               y: \u53F3y + 5,
               fontSize: \u5024\u306E\u7D1A,