@cardenelabs/cdl 0.31.1 → 0.33.0

package/CHANGELOG.md

@@ -5,6 +5,33 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [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
+
+- **円グラフで datum の `previous` を内側の輪として描けるようになった** (#680)
+- **円グラフの名札で割合を主役にした** (#683)。 1 行目が割合 (級 19 の太字)、2 行目が名前 (級 12)。 実数は割合と違う数になる図でだけ 2 行目に添える
+- **円グラフの見せ方を記法から選べるようになった** (#684)。 `chartPieForm` に `arcs` (系列ごとに 1 本の弧) と `table` (図と表を左右に据える) を書ける。 欄を書かない図は今までどおりの輪
+
 ## [0.31.1] - 2026-09-06
 
 ### Fixed
@@ -1621,7 +1648,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.31.1...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.33.0...HEAD
+[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
 [0.30.3]: https://github.com/cardene777/cdl/compare/v0.30.2...v0.30.3

package/README.md

@@ -244,6 +244,72 @@ state placeholder は node の `title` / `subtitle` / `eyebrow` / `value` 内で
 
 phase 切替に連動して `status: idle` → `status: running` のように描画される。
 
+## 2 時点の構成比
+
+`chart-pie` と `chart-stacked-bar` と `chart-slope` は datum の `previous` で前の時点を受け取る。
+`previous` を 1 件でも書くと、書かない datum も前の時点では 0 として扱うため、系列の色と
+並びが時点間で対応する。
+
+```ts
+.node("share", {
+  lane: "l",
+  stack: 0,
+  kind: "chart-pie",
+  chartData: [
+    { label: "Web", previous: 45, value: 30 },
+    { label: "Mobile", previous: 35, value: 45 },
+    { label: "API", value: 25 },
+  ],
+})
+```
+
+`chart-pie` は前を内側、今を外側の輪で描き、名札には `45 → 30  30%` の形で今の割合を添える。
+`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 を載せると、線が左の軸から右の軸へ伸びる。
+
+## 円グラフの見せ方
+
+`chart-pie` は `chartPieForm` で見せ方を選ぶ。 欄を書かない図は `ring` と同じ。
+
+| 値 | 形 | 向くもの |
+|---|---|---|
+| `ring` (既定) | 輪を扇に切り分け、外へ引き出し線を伸ばして名札を置く | 内訳の割合をひとめで見せる |
+| `arcs` | 系列ごとに 1 本の弧を置き、割合を角度ではなく弧の長さで読む | 合計が 100 にならない図 (系列ごとの達成率など) |
+| `table` | 輪を左に寄せ、右に 名前 / 割合 / 実数 の 3 列の表を組む | 割合と実数の両方を読ませたい図 |
+
+```ts
+.node("share", { lane: "l", stack: 0, kind: "chart-pie", chartPieForm: "arcs", chartData: [...] })
+```
+
+型の外の値を書いた図は `ring` として描く。 `previous` が効くのは `ring` だけで、
+他の形では内側の輪を描かない。
+
 ## CdlDiagramView props
 
 ```ts