@cardenelabs/cdl 0.40.7 → 0.40.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -5,6 +5,78 @@ CDL (Chainome Diagram Language) の主要変更履歴。
5
5
 
6
6
  ## [Unreleased]
7
7
 
8
+ ## [0.40.9] - 2026-09-08
9
+
10
+ ### Fixed
11
+
12
+ - **件が 1 つの `chart-stat` に意味のない `100%` と全周の弧を出さなくした** (#759)
13
+
14
+ 割合は「この図に載っている全件の合計に対する取り分」 なので、件が 1 つだと分母が
15
+ 自分自身になり必ず `100%` になる。 値が動いても割合は動かない。
16
+
17
+ | 件数 | 名前 / 数値 | 割合の字 / 弧 / 下地 |
18
+ |---|---|---|
19
+ | 1 | 出る | 出さない |
20
+ | 2 以上 | 出る | 出る (変わらず) |
21
+
22
+ 判定は件数で行う。 `割合 === 1` で判定すると、件が 2 つ以上でも片方が 0 の図まで消える。
23
+ その図の `100%` は「他が 0 で自分が全部」 という読みが成立する。
24
+
25
+ ## [0.40.8] - 2026-09-08
26
+
27
+ ### Changed
28
+
29
+ - **折れ線グラフの目盛りと軸の名前を役割名で拾えるようにした** (#755)
30
+
31
+ 軸を持つ図は棒と折れ線の 2 つで、折れ線だけ縦軸の目盛りと横軸の名前に役割名が無かった。
32
+
33
+ | 字 | 棒グラフ | 折れ線グラフ (直す前) | 折れ線グラフ (直した後) |
34
+ |---|---|---|---|
35
+ | 縦軸の目盛りの数字 | `chart-bar-tick` | なし | `chart-line-tick` |
36
+ | 値札 | `chart-bar-value` | `chart-line-value` | `chart-line-value` |
37
+ | 横軸の名前 | `chart-bar-label` | なし | `chart-line-label` |
38
+
39
+ 役割名が無いと字を位置か中身で拾うことになり、**図の見た目を変えていないのに検査が落ちる**。
40
+ 位置で拾う形は余白を動かすと壊れ、中身で拾う形は同じ数が 2 か所に出ると壊れる
41
+ (実測で 4 件のはずが 5 件になった)。
42
+
43
+ 描いたものは役割名が増えた以外 1 文字も変わらない。 円グラフと凡例を持つ図は
44
+ 字の役割が別 (名前 / 割合 / 中央の合計) で同じ 3 つ組では表せないため、対象にしていない。
45
+
46
+ - **折れ線グラフだけ値札が軸の名前より小さかったのを揃えた** (#753)
47
+
48
+ 軸を持つ図は棒と折れ線の 2 つで、この 2 つだけ大きさの順が逆だった。
49
+
50
+ | 図 | 値札 | 軸の名前 |
51
+ |---|---|---|
52
+ | 棒グラフ | `12` | `11` |
53
+ | 折れ線グラフ (直す前) | `11` | `12` |
54
+ | 折れ線グラフ (直した後) | `12` | `11` |
55
+
56
+ 棒を直した `#747` より前は棒も `11` / `12` で折れ線と同じだった = 逆転させたのは `#747` で、
57
+ 片方だけ直して残りを置いていった形になっていた。
58
+
59
+ **凡例を持つ図 (半円ゲージ / 同心の弧 / 100 個の印 / 内訳の帯) は逆の順のまま**。
60
+ 凡例では名前が行を見分ける鍵で、数値はそれに添える数になる。 軸の図では値札が印の上に
61
+ 載る数そのもので、軸の名前は目盛りの側にある = 役割が違うので順も違ってよい。
62
+
63
+ 大きさに名前を付け (`値札の級` / `軸の名前の級`)、2 図で揃っていることを検査が実物から
64
+ 読んで確かめる。
65
+
66
+ - **目盛りの刻みの計算が 2 箇所にあったのを 1 つに寄せた** (#751)
67
+
68
+ `1 / 2 / 2.5 / 5` に 10 の累乗を掛けた中から刻みを選ぶ計算が、折れ線と棒の両方にあった。
69
+ 折れ線が先にあり、棒を直した `#747` で同じ計算を書き足していた。
70
+
71
+ `packages/cdl/src/kinds/axis-ticks.ts` に 1 つだけ置き、両方がそこから読む。
72
+ 引数は「範囲」 と「目盛りの本数の目安」 で、折れ線は `最大 - 最小`、
73
+ 棒は床が必ず 0 なので `最大` を渡す。
74
+
75
+ **天井と床の決め方は寄せない** = 折れ線は床も動かし、棒は床が必ず 0 で規則が違う。
76
+ 目盛りの数字の書き方も図ごとに残す (折れ線は `toLocaleString`、棒は桁で丸めた数)。
77
+
78
+ 出る目盛りは寄せる前と 1 つも変わらない。 描画にも記法にも影響しない。
79
+
8
80
  ## [0.40.7] - 2026-09-08
9
81
 
10
82
  ### Changed
@@ -1932,7 +2004,9 @@ Initial OSS release.
1932
2004
  使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
1933
2005
  行き止まりになる。
1934
2006
 
1935
- [Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.7...HEAD
2007
+ [Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.9...HEAD
2008
+ [0.40.9]: https://github.com/cardene777/cdl/compare/v0.40.8...v0.40.9
2009
+ [0.40.8]: https://github.com/cardene777/cdl/compare/v0.40.7...v0.40.8
1936
2010
  [0.40.7]: https://github.com/cardene777/cdl/compare/v0.40.6...v0.40.7
1937
2011
  [0.40.6]: https://github.com/cardene777/cdl/compare/v0.40.5...v0.40.6
1938
2012
  [0.40.5]: https://github.com/cardene777/cdl/compare/v0.40.4...v0.40.5
package/dist/index.cjs CHANGED
@@ -22422,6 +22422,19 @@ function StateDiffCard({
22422
22422
  }
22423
22423
  );
22424
22424
  }
22425
+
22426
+ // src/kinds/axis-ticks.ts
22427
+ function \u76EE\u76DB\u308A\u306E\u523B\u307F(\u7BC4\u56F2, \u76EE\u5B89\u306E\u672C\u6570) {
22428
+ if (!(\u7BC4\u56F2 > 0) || false) return 0;
22429
+ const \u7C97\u3044 = \u7BC4\u56F2 / \u76EE\u5B89\u306E\u672C\u6570;
22430
+ const \u6841 = 10 ** Math.floor(Math.log10(\u7C97\u3044));
22431
+ const \u6B63\u898F = \u7C97\u3044 / \u6841;
22432
+ const \u5019\u88DC = \u6B63\u898F <= 1 ? 1 : \u6B63\u898F <= 2 ? 2 : \u6B63\u898F <= 2.5 ? 2.5 : \u6B63\u898F <= 5 ? 5 : 10;
22433
+ return \u5019\u88DC * \u6841;
22434
+ }
22435
+ var \u76EE\u76DB\u308A\u306E\u76EE\u5B89 = 4;
22436
+ var \u5024\u672D\u306E\u7D1A = 12;
22437
+ var \u8EF8\u306E\u540D\u524D\u306E\u7D1A = 11;
22425
22438
  var \u6570\u3092\u66F8\u304F = (value) => value.toLocaleString("en-US", { maximumFractionDigits: 12 });
22426
22439
  function \u6298\u308C\u7DDA\u306E\u76EE\u76DB(values) {
22427
22440
  let rawMin = values.length > 0 ? Math.min(...values) : 0;
@@ -22431,11 +22444,7 @@ function \u6298\u308C\u7DDA\u306E\u76EE\u76DB(values) {
22431
22444
  rawMin -= room;
22432
22445
  rawMax += room;
22433
22446
  }
22434
- const roughStep = (rawMax - rawMin) / 4;
22435
- const power = 10 ** Math.floor(Math.log10(roughStep));
22436
- const fraction = roughStep / power;
22437
- const niceFraction = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;
22438
- const step = niceFraction * power;
22447
+ const step = \u76EE\u76DB\u308A\u306E\u523B\u307F(rawMax - rawMin, \u76EE\u76DB\u308A\u306E\u76EE\u5B89);
22439
22448
  const min = Math.floor(rawMin / step) * step;
22440
22449
  const max = Math.ceil(rawMax / step) * step;
22441
22450
  const tickCount = Math.round((max - min) / step);
@@ -22542,6 +22551,7 @@ function ChartLineNode({
22542
22551
  /* @__PURE__ */ jsxRuntime.jsx(
22543
22552
  "text",
22544
22553
  {
22554
+ "data-cdl-role": "chart-line-tick",
22545
22555
  x: PAD_LEFT2 - 8,
22546
22556
  y: t.y + 4,
22547
22557
  fontSize: 11,
@@ -22619,7 +22629,7 @@ function ChartLineNode({
22619
22629
  "data-cdl-role": "chart-line-value",
22620
22630
  x: cx,
22621
22631
  y: labelY,
22622
- fontSize: 11,
22632
+ fontSize: \u5024\u672D\u306E\u7D1A,
22623
22633
  fontWeight: 600,
22624
22634
  textAnchor: "middle",
22625
22635
  fill: "var(--cdl-text, #1a1f2a)",
@@ -22677,9 +22687,10 @@ function ChartLineNode({
22677
22687
  /* @__PURE__ */ jsxRuntime.jsx(
22678
22688
  "text",
22679
22689
  {
22690
+ "data-cdl-role": "chart-line-label",
22680
22691
  x: cx,
22681
22692
  y: PAD_TOP2 + canvasH + 20,
22682
- fontSize: 12,
22693
+ fontSize: \u8EF8\u306E\u540D\u524D\u306E\u7D1A,
22683
22694
  textAnchor: "middle",
22684
22695
  fill: "var(--cdl-text-dim, #5a6270)",
22685
22696
  children: d.label
@@ -25219,6 +25230,7 @@ function ChartStatNode({
25219
25230
  const data = resolveChartData(node.chartData ?? [], stateValues);
25220
25231
  const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
25221
25232
  const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length);
25233
+ const \u5272\u5408\u3092\u51FA\u3059 = data.length > 1;
25222
25234
  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
25223
25235
  /* @__PURE__ */ jsxRuntime.jsx(
25224
25236
  "rect",
@@ -25240,83 +25252,91 @@ function ChartStatNode({
25240
25252
  const \u8272 = \u5370\u306E\u8272(d.tone, idx);
25241
25253
  const \u6570\u5024 = \u5B9F\u5024\u8868\u8A18(d.value);
25242
25254
  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);
25243
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
25244
- idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
25245
- "line",
25246
- {
25247
- "data-cdl-role": "chart-stat-divider",
25248
- x1: 0,
25249
- y1: \u533A\u753B.\u4F59\u767D,
25250
- x2: 0,
25251
- y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
25252
- stroke: "var(--cdl-divider, #d4d4d8)",
25253
- strokeWidth: 1
25254
- }
25255
- ),
25256
- /* @__PURE__ */ jsxRuntime.jsx(
25257
- "text",
25258
- {
25259
- "data-cdl-role": "chart-stat-label",
25260
- x: \u67A02.w / 2,
25261
- y: \u533A\u753B.\u540D\u524D\u306Ey,
25262
- fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
25263
- fontWeight: 700,
25264
- textAnchor: "middle",
25265
- fill: "var(--cdl-text-dim, #5a6270)",
25266
- children: d.label
25267
- }
25268
- ),
25269
- /* @__PURE__ */ jsxRuntime.jsx(
25270
- "text",
25271
- {
25272
- "data-cdl-role": "chart-stat-value",
25273
- "data-cdl-unresolved": d.unresolved ? "true" : void 0,
25274
- x: \u67A02.w / 2,
25275
- y: \u533A\u753B.\u6570\u5024\u306Ey,
25276
- fontSize: \u6570\u5024\u306E\u7D1A,
25277
- fontWeight: 700,
25278
- textAnchor: "middle",
25279
- fill: \u8272,
25280
- children: \u6570\u5024
25281
- }
25282
- ),
25283
- /* @__PURE__ */ jsxRuntime.jsx(
25284
- "circle",
25285
- {
25286
- "data-cdl-role": "chart-stat-track",
25287
- cx: \u67A02.w / 2,
25288
- cy: \u533A\u753B.\u5F27\u306Ey,
25289
- r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
25290
- fill: "none",
25291
- stroke: "var(--cdl-divider, #d4d4d8)",
25292
- strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
25293
- strokeOpacity: 0.5
25294
- }
25295
- ),
25296
- frac > 0 && /* @__PURE__ */ jsxRuntime.jsx(
25297
- "path",
25298
- {
25299
- "data-cdl-role": "chart-stat-arc",
25300
- d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
25301
- fill: "none",
25302
- stroke: \u8272,
25303
- strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
25304
- strokeLinecap: "round"
25305
- }
25306
- ),
25307
- /* @__PURE__ */ jsxRuntime.jsx(
25308
- "text",
25309
- {
25310
- "data-cdl-role": "chart-stat-share",
25311
- x: \u67A02.w / 2,
25312
- y: \u533A\u753B.\u5272\u5408\u306Ey,
25313
- fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
25314
- textAnchor: "middle",
25315
- fill: "var(--cdl-text-dim, #5a6270)",
25316
- children: \u5272\u5408\u8868\u8A18(frac)
25317
- }
25318
- )
25319
- ] }, `stat-${idx}`);
25255
+ return /* @__PURE__ */ jsxRuntime.jsxs(
25256
+ "g",
25257
+ {
25258
+ "data-cdl-role": "chart-stat-item",
25259
+ transform: `translate(${\u67A02.x} ${\u67A02.y})`,
25260
+ children: [
25261
+ idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
25262
+ "line",
25263
+ {
25264
+ "data-cdl-role": "chart-stat-divider",
25265
+ x1: 0,
25266
+ y1: \u533A\u753B.\u4F59\u767D,
25267
+ x2: 0,
25268
+ y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
25269
+ stroke: "var(--cdl-divider, #d4d4d8)",
25270
+ strokeWidth: 1
25271
+ }
25272
+ ),
25273
+ /* @__PURE__ */ jsxRuntime.jsx(
25274
+ "text",
25275
+ {
25276
+ "data-cdl-role": "chart-stat-label",
25277
+ x: \u67A02.w / 2,
25278
+ y: \u533A\u753B.\u540D\u524D\u306Ey,
25279
+ fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
25280
+ fontWeight: 700,
25281
+ textAnchor: "middle",
25282
+ fill: "var(--cdl-text-dim, #5a6270)",
25283
+ children: d.label
25284
+ }
25285
+ ),
25286
+ /* @__PURE__ */ jsxRuntime.jsx(
25287
+ "text",
25288
+ {
25289
+ "data-cdl-role": "chart-stat-value",
25290
+ "data-cdl-unresolved": d.unresolved ? "true" : void 0,
25291
+ x: \u67A02.w / 2,
25292
+ y: \u533A\u753B.\u6570\u5024\u306Ey,
25293
+ fontSize: \u6570\u5024\u306E\u7D1A,
25294
+ fontWeight: 700,
25295
+ textAnchor: "middle",
25296
+ fill: \u8272,
25297
+ children: \u6570\u5024
25298
+ }
25299
+ ),
25300
+ \u5272\u5408\u3092\u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsx(
25301
+ "circle",
25302
+ {
25303
+ "data-cdl-role": "chart-stat-track",
25304
+ cx: \u67A02.w / 2,
25305
+ cy: \u533A\u753B.\u5F27\u306Ey,
25306
+ r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
25307
+ fill: "none",
25308
+ stroke: "var(--cdl-divider, #d4d4d8)",
25309
+ strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
25310
+ strokeOpacity: 0.5
25311
+ }
25312
+ ),
25313
+ \u5272\u5408\u3092\u51FA\u3059 && frac > 0 && /* @__PURE__ */ jsxRuntime.jsx(
25314
+ "path",
25315
+ {
25316
+ "data-cdl-role": "chart-stat-arc",
25317
+ d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
25318
+ fill: "none",
25319
+ stroke: \u8272,
25320
+ strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
25321
+ strokeLinecap: "round"
25322
+ }
25323
+ ),
25324
+ \u5272\u5408\u3092\u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsx(
25325
+ "text",
25326
+ {
25327
+ "data-cdl-role": "chart-stat-share",
25328
+ x: \u67A02.w / 2,
25329
+ y: \u533A\u753B.\u5272\u5408\u306Ey,
25330
+ fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
25331
+ textAnchor: "middle",
25332
+ fill: "var(--cdl-text-dim, #5a6270)",
25333
+ children: \u5272\u5408\u8868\u8A18(frac)
25334
+ }
25335
+ )
25336
+ ]
25337
+ },
25338
+ `stat-${idx}`
25339
+ );
25320
25340
  })
25321
25341
  ] });
25322
25342
  }
@@ -25897,19 +25917,13 @@ function \u53CE\u3081\u308B\u7D1A2(\u540D\u524D\u305F\u3061, \u5E45, \u4E0A\u965
25897
25917
  while (\u7D1A > \u4E0B\u9650 && Math.max(...\u540D\u524D\u305F\u3061.map((n) => textWidth(n, \u7D1A))) > \u5E45) \u7D1A -= 1;
25898
25918
  return \u7D1A;
25899
25919
  }
25900
- function \u76EE\u76DB\u308A\u306E\u523B\u307F(\u6700\u5927, \u76EE\u5B89\u306E\u672C\u6570) {
25901
- if (!(\u6700\u5927 > 0) || false) return 0;
25902
- const \u7C97\u3044 = \u6700\u5927 / \u76EE\u5B89\u306E\u672C\u6570;
25903
- const \u6841 = 10 ** Math.floor(Math.log10(\u7C97\u3044));
25904
- const \u6B63\u898F = \u7C97\u3044 / \u6841;
25905
- const \u5019\u88DC = \u6B63\u898F <= 1 ? 1 : \u6B63\u898F <= 2 ? 2 : \u6B63\u898F <= 2.5 ? 2.5 : \u6B63\u898F <= 5 ? 5 : 10;
25906
- return \u5019\u88DC * \u6841;
25907
- }
25908
25920
  function \u5C0F\u6570\u306E\u6841(n) {
25909
25921
  const [\u4EEE\u6570, \u6307\u6570] = n.toExponential().split("e");
25910
25922
  const \u5C0F\u6570\u90E8 = (\u4EEE\u6570 ?? "").split(".")[1]?.length ?? 0;
25911
25923
  return Math.min(20, Math.max(0, \u5C0F\u6570\u90E8 - Number(\u6307\u6570)));
25912
25924
  }
25925
+ var \u5024\u672D\u306E\u7D1A2 = 12;
25926
+ var \u8EF8\u306E\u540D\u524D\u306E\u7D1A2 = 11;
25913
25927
  var \u6841\u3067\u4E38\u3081\u308B = (v, \u6841) => Number(v.toFixed(\u6841));
25914
25928
  function ChartBarNode({
25915
25929
  node,
@@ -25928,9 +25942,9 @@ function ChartBarNode({
25928
25942
  const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
25929
25943
  const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
25930
25944
  const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
25931
- const \u76EE\u76DB\u308A\u306E\u76EE\u5B89 = 4;
25945
+ const \u76EE\u76DB\u308A\u306E\u76EE\u5B892 = 4;
25932
25946
  const \u5929\u4E95\u306E\u3082\u3068 = vMax > 0 ? vMax : 1;
25933
- const \u523B\u307F = \u76EE\u76DB\u308A\u306E\u523B\u307F(\u5929\u4E95\u306E\u3082\u3068, \u76EE\u76DB\u308A\u306E\u76EE\u5B89);
25947
+ const \u523B\u307F = \u76EE\u76DB\u308A\u306E\u523B\u307F(\u5929\u4E95\u306E\u3082\u3068, \u76EE\u76DB\u308A\u306E\u76EE\u5B892);
25934
25948
  const \u523B\u307F\u306E\u6841 = \u5C0F\u6570\u306E\u6841(\u523B\u307F);
25935
25949
  const \u5929\u4E95 = \u6841\u3067\u4E38\u3081\u308B(Math.ceil(\u5929\u4E95\u306E\u3082\u3068 / \u523B\u307F - 1e-9) * \u523B\u307F, \u523B\u307F\u306E\u6841);
25936
25950
  const \u68D2\u3068\u9699\u9593\u306E\u6BD4 = 2.2;
@@ -26030,7 +26044,7 @@ function ChartBarNode({
26030
26044
  "data-cdl-role": "chart-bar-value",
26031
26045
  x: bx + barW / 2,
26032
26046
  y: \u898B\u3048\u3066\u3044\u308B\u982D - 8,
26033
- fontSize: 12,
26047
+ fontSize: \u5024\u672D\u306E\u7D1A2,
26034
26048
  fontWeight: 600,
26035
26049
  textAnchor: "middle",
26036
26050
  fill: "var(--cdl-text, #1a1f2a)",
@@ -26043,7 +26057,7 @@ function ChartBarNode({
26043
26057
  "data-cdl-role": "chart-bar-label",
26044
26058
  x: bx + barW / 2,
26045
26059
  y: PAD_TOP2 + canvasH + 18,
26046
- fontSize: 11,
26060
+ fontSize: \u8EF8\u306E\u540D\u524D\u306E\u7D1A2,
26047
26061
  textAnchor: "middle",
26048
26062
  fill: "var(--cdl-text-dim, #5a6270)",
26049
26063
  children: d.label