@cardenelabs/cdl 0.40.5 → 0.40.7
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 +52 -1
- package/dist/index.cjs +55 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +55 -16
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +55 -16
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +55 -16
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/chart-bar.tsx +89 -16
- package/src/validate.ts +27 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,55 @@ CDL (Chainome Diagram Language) の主要変更履歴。
|
|
|
5
5
|
|
|
6
6
|
## [Unreleased]
|
|
7
7
|
|
|
8
|
+
## [0.40.7] - 2026-09-08
|
|
9
|
+
|
|
10
|
+
### Changed
|
|
11
|
+
|
|
12
|
+
- **棒グラフの縦軸の目盛りを人が読む数にして、棒の太さと色を直した** (#747)
|
|
13
|
+
|
|
14
|
+
見本帳の棒グラフを測ると、普通の棒グラフから外れた値が 4 つ出ていた。
|
|
15
|
+
|
|
16
|
+
| 見たもの | 直す前 | 直した後 |
|
|
17
|
+
|---|---|---|
|
|
18
|
+
| 縦軸の目盛り | `0 / 170 / 340 / 510 / 680` | `0 / 200 / 400 / 600 / 800` |
|
|
19
|
+
| 棒幅 対 隙間 | 12.7 : 1 | 2.2 : 1 |
|
|
20
|
+
| 棒の色 | 1 種類 | いちばん大きい棒だけ濃い |
|
|
21
|
+
| 角丸 | `2` (幅 126.5px に対して) | 棒幅の 6% |
|
|
22
|
+
|
|
23
|
+
原因は 2 つに分かれる。 目盛りが半端なのは最大値をそのまま天井にして 4 等分していたため
|
|
24
|
+
(`680 / 4 = 170`)、棒が太いのは隙間を `10px` の固定値にして残りを全部棒へ配っていたため。
|
|
25
|
+
|
|
26
|
+
天井は `1 / 2 / 2.5 / 5` に 10 の累乗を掛けた刻みの倍数へ切り上げる。 **天井を水増しして
|
|
27
|
+
余白は作らない** = 最大 `100` の図は `0 / 25 / 50 / 75 / 100` が正しい形で、値札が枠に
|
|
28
|
+
重ならない余白は図の上の余白が持つ。
|
|
29
|
+
|
|
30
|
+
色は 1 つのまま濃さだけを変える。 棒グラフは同じ量どうしの比較で、色は量を表さない =
|
|
31
|
+
4 本に 4 色を配ると読み手が「色に意味がある」 と誤読する余地が残る。
|
|
32
|
+
|
|
33
|
+
棒の高さの比は値の比のままで、高さから値を読む使い方は変わらない。
|
|
34
|
+
記法 (`chartData`) にも読み込みにも影響しない。
|
|
35
|
+
|
|
36
|
+
## [0.40.6] - 2026-09-08
|
|
37
|
+
|
|
38
|
+
### Fixed
|
|
39
|
+
|
|
40
|
+
- **図表を描くたびに「使われていない」 と警告が出るのを直した** (#743)
|
|
41
|
+
|
|
42
|
+
図表は 1 つの節が図の全体を表す形で、記法にその節を activate する書き方が無い。
|
|
43
|
+
それでも「どの phase でも activate されていない (unused、 typo の可能性)」 が出ており、
|
|
44
|
+
見本帳の図表の記法 15 件すべてで実測した (棒 / 折れ線 / 円 / 半円ゲージ / 同心の弧 /
|
|
45
|
+
大きな数字 / 100 個の印 / 内訳の帯 / 傾き / 絞り込み / 工程表 / 体験の道筋 / 枝分かれ /
|
|
46
|
+
4 象限 / 階層)。
|
|
47
|
+
|
|
48
|
+
書き手に直せない警告は、読む価値のある警告まで一緒に無視させる。 同じ検査は「未定義の
|
|
49
|
+
state を参照している」 のような本当の誤りも出しており、図表を扱う限り雑音がその手前に並ぶ。
|
|
50
|
+
|
|
51
|
+
図表の荷 (`chartData` / `ganttData` / `mindData` / `funnelData` / `quadrantData` /
|
|
52
|
+
`treeData` / `journeyData`) を持つ節を、この警告の対象から外した。 種別の一覧は持たない =
|
|
53
|
+
図表の種別は増えるので、一覧を手で書くと追記を忘れて警告が復活する。
|
|
54
|
+
|
|
55
|
+
図表でない節と辺では今までどおり出る。 未使用の state など他の警告も変わらない。
|
|
56
|
+
|
|
8
57
|
## [0.40.5] - 2026-09-07
|
|
9
58
|
|
|
10
59
|
### Fixed
|
|
@@ -1883,7 +1932,9 @@ Initial OSS release.
|
|
|
1883
1932
|
使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
|
|
1884
1933
|
行き止まりになる。
|
|
1885
1934
|
|
|
1886
|
-
[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.
|
|
1935
|
+
[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.7...HEAD
|
|
1936
|
+
[0.40.7]: https://github.com/cardene777/cdl/compare/v0.40.6...v0.40.7
|
|
1937
|
+
[0.40.6]: https://github.com/cardene777/cdl/compare/v0.40.5...v0.40.6
|
|
1887
1938
|
[0.40.5]: https://github.com/cardene777/cdl/compare/v0.40.4...v0.40.5
|
|
1888
1939
|
[0.40.4]: https://github.com/cardene777/cdl/compare/v0.40.3...v0.40.4
|
|
1889
1940
|
[0.40.3]: https://github.com/cardene777/cdl/compare/v0.40.2...v0.40.3
|
package/dist/index.cjs
CHANGED
|
@@ -20816,6 +20816,18 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
|
|
|
20816
20816
|
]);
|
|
20817
20817
|
var KINDS = new Set(NODE_KINDS);
|
|
20818
20818
|
var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
|
|
20819
|
+
var \u56F3\u8868\u306E\u8377\u306E\u6B04 = [
|
|
20820
|
+
"chartData",
|
|
20821
|
+
"ganttData",
|
|
20822
|
+
"mindData",
|
|
20823
|
+
"funnelData",
|
|
20824
|
+
"quadrantData",
|
|
20825
|
+
"treeData",
|
|
20826
|
+
"journeyData"
|
|
20827
|
+
];
|
|
20828
|
+
function \u56F3\u8868\u306E\u7BC0(n) {
|
|
20829
|
+
return \u56F3\u8868\u306E\u8377\u306E\u6B04.some((\u6B04) => n[\u6B04] !== void 0);
|
|
20830
|
+
}
|
|
20819
20831
|
function validate(diag) {
|
|
20820
20832
|
const errors = [];
|
|
20821
20833
|
const warnings = [];
|
|
@@ -20973,7 +20985,7 @@ function validate(diag) {
|
|
|
20973
20985
|
for (const id of p.activate) allActivated.add(id);
|
|
20974
20986
|
}
|
|
20975
20987
|
for (const n of diag.nodes) {
|
|
20976
|
-
if (!allActivated.has(n.id)) {
|
|
20988
|
+
if (!allActivated.has(n.id) && !\u56F3\u8868\u306E\u7BC0(n)) {
|
|
20977
20989
|
warnings.push(`node "${n.id}" \u304C\u3069\u306E phase \u3067\u3082 activate \u3055\u308C\u3066\u3044\u306A\u3044 (unused\u3001 typo \u306E\u53EF\u80FD\u6027)`);
|
|
20978
20990
|
}
|
|
20979
20991
|
}
|
|
@@ -25885,6 +25897,20 @@ function \u53CE\u3081\u308B\u7D1A2(\u540D\u524D\u305F\u3061, \u5E45, \u4E0A\u965
|
|
|
25885
25897
|
while (\u7D1A > \u4E0B\u9650 && Math.max(...\u540D\u524D\u305F\u3061.map((n) => textWidth(n, \u7D1A))) > \u5E45) \u7D1A -= 1;
|
|
25886
25898
|
return \u7D1A;
|
|
25887
25899
|
}
|
|
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
|
+
function \u5C0F\u6570\u306E\u6841(n) {
|
|
25909
|
+
const [\u4EEE\u6570, \u6307\u6570] = n.toExponential().split("e");
|
|
25910
|
+
const \u5C0F\u6570\u90E8 = (\u4EEE\u6570 ?? "").split(".")[1]?.length ?? 0;
|
|
25911
|
+
return Math.min(20, Math.max(0, \u5C0F\u6570\u90E8 - Number(\u6307\u6570)));
|
|
25912
|
+
}
|
|
25913
|
+
var \u6841\u3067\u4E38\u3081\u308B = (v, \u6841) => Number(v.toFixed(\u6841));
|
|
25888
25914
|
function ChartBarNode({
|
|
25889
25915
|
node,
|
|
25890
25916
|
active,
|
|
@@ -25895,24 +25921,33 @@ function ChartBarNode({
|
|
|
25895
25921
|
const x0 = node.cx - node.w / 2;
|
|
25896
25922
|
const y0 = node.cy - node.h / 2;
|
|
25897
25923
|
const data = resolveChartData(node.chartData ?? [], stateValues);
|
|
25898
|
-
const PAD_TOP2 =
|
|
25924
|
+
const PAD_TOP2 = 34;
|
|
25899
25925
|
const PAD_RIGHT2 = 24;
|
|
25900
25926
|
const PAD_BOTTOM2 = 44;
|
|
25901
25927
|
const PAD_LEFT2 = 60;
|
|
25902
25928
|
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
25903
25929
|
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
25904
25930
|
const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
|
|
25905
|
-
const
|
|
25906
|
-
const
|
|
25931
|
+
const \u76EE\u76DB\u308A\u306E\u76EE\u5B89 = 4;
|
|
25932
|
+
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);
|
|
25934
|
+
const \u523B\u307F\u306E\u6841 = \u5C0F\u6570\u306E\u6841(\u523B\u307F);
|
|
25935
|
+
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
|
+
const \u68D2\u3068\u9699\u9593\u306E\u6BD4 = 2.2;
|
|
25937
|
+
const \u68D2\u306E\u4E0A\u9650 = 96;
|
|
25907
25938
|
const barCount = data.length || 1;
|
|
25908
|
-
const
|
|
25909
|
-
const
|
|
25939
|
+
const \u5358\u4F4D = canvasW / (barCount * \u68D2\u3068\u9699\u9593\u306E\u6BD4 + (barCount + 1));
|
|
25940
|
+
const barW = Math.max(0, Math.min(\u5358\u4F4D * \u68D2\u3068\u9699\u9593\u306E\u6BD4, \u68D2\u306E\u4E0A\u9650));
|
|
25941
|
+
const barGap = (canvasW - barW * barCount) / (barCount + 1);
|
|
25942
|
+
const yAt = (v) => PAD_TOP2 + canvasH - v / \u5929\u4E95 * canvasH;
|
|
25910
25943
|
const xAt = (idx) => PAD_LEFT2 + barGap + idx * (barW + barGap);
|
|
25911
|
-
const
|
|
25912
|
-
const gridTicks = Array.from({ length:
|
|
25913
|
-
const v =
|
|
25944
|
+
const \u76EE\u76DB\u308A\u306E\u672C\u6570 = Math.round(\u5929\u4E95 / \u523B\u307F);
|
|
25945
|
+
const gridTicks = Array.from({ length: \u76EE\u76DB\u308A\u306E\u672C\u6570 + 1 }, (_, i) => {
|
|
25946
|
+
const v = \u6841\u3067\u4E38\u3081\u308B(\u523B\u307F * i, \u523B\u307F\u306E\u6841);
|
|
25914
25947
|
return { y: yAt(v), value: v };
|
|
25915
25948
|
});
|
|
25949
|
+
const \u6FC3\u3055 = (v) => vMax > 0 ? v >= vMax ? 1 : 0.45 : 0.9;
|
|
25950
|
+
const \u89D2\u4E38 = Math.min(barW * 0.06, 8);
|
|
25916
25951
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
25917
25952
|
const \u6A2A\u8EF8\u306Ey = PAD_TOP2 + canvasH;
|
|
25918
25953
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
@@ -25947,12 +25982,13 @@ function ChartBarNode({
|
|
|
25947
25982
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25948
25983
|
"text",
|
|
25949
25984
|
{
|
|
25985
|
+
"data-cdl-role": "chart-bar-tick",
|
|
25950
25986
|
x: PAD_LEFT2 - 8,
|
|
25951
25987
|
y: t.y + 4,
|
|
25952
25988
|
fontSize: 11,
|
|
25953
25989
|
textAnchor: "end",
|
|
25954
25990
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
25955
|
-
children:
|
|
25991
|
+
children: t.value
|
|
25956
25992
|
}
|
|
25957
25993
|
)
|
|
25958
25994
|
] }, `grid-${i}`)),
|
|
@@ -25970,7 +26006,7 @@ function ChartBarNode({
|
|
|
25970
26006
|
data.map((d, idx) => {
|
|
25971
26007
|
const bx = xAt(idx);
|
|
25972
26008
|
const by = yAt(d.value);
|
|
25973
|
-
const bh = PAD_TOP2 + canvasH - by;
|
|
26009
|
+
const bh = Math.max(0, PAD_TOP2 + canvasH - by);
|
|
25974
26010
|
const \u898B\u3048\u3066\u3044\u308B\u982D = \u6A2A\u8EF8\u306Ey - (\u6A2A\u8EF8\u306Ey - by) * \u4F38\u3073;
|
|
25975
26011
|
const \u68D2 = /* @__PURE__ */ jsxRuntime.jsx(
|
|
25976
26012
|
"rect",
|
|
@@ -25981,9 +26017,9 @@ function ChartBarNode({
|
|
|
25981
26017
|
y: by,
|
|
25982
26018
|
width: barW,
|
|
25983
26019
|
height: bh,
|
|
25984
|
-
rx:
|
|
26020
|
+
rx: \u89D2\u4E38,
|
|
25985
26021
|
fill: "var(--cdl-tone-accent, #2d6a8f)",
|
|
25986
|
-
fillOpacity:
|
|
26022
|
+
fillOpacity: \u6FC3\u3055(d.value)
|
|
25987
26023
|
}
|
|
25988
26024
|
);
|
|
25989
26025
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
@@ -25991,9 +26027,11 @@ function ChartBarNode({
|
|
|
25991
26027
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25992
26028
|
"text",
|
|
25993
26029
|
{
|
|
26030
|
+
"data-cdl-role": "chart-bar-value",
|
|
25994
26031
|
x: bx + barW / 2,
|
|
25995
|
-
y: \u898B\u3048\u3066\u3044\u308B\u982D -
|
|
25996
|
-
fontSize:
|
|
26032
|
+
y: \u898B\u3048\u3066\u3044\u308B\u982D - 8,
|
|
26033
|
+
fontSize: 12,
|
|
26034
|
+
fontWeight: 600,
|
|
25997
26035
|
textAnchor: "middle",
|
|
25998
26036
|
fill: "var(--cdl-text, #1a1f2a)",
|
|
25999
26037
|
children: d.value.toLocaleString()
|
|
@@ -26002,9 +26040,10 @@ function ChartBarNode({
|
|
|
26002
26040
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
26003
26041
|
"text",
|
|
26004
26042
|
{
|
|
26043
|
+
"data-cdl-role": "chart-bar-label",
|
|
26005
26044
|
x: bx + barW / 2,
|
|
26006
26045
|
y: PAD_TOP2 + canvasH + 18,
|
|
26007
|
-
fontSize:
|
|
26046
|
+
fontSize: 11,
|
|
26008
26047
|
textAnchor: "middle",
|
|
26009
26048
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
26010
26049
|
children: d.label
|