@cardenelabs/cdl 0.40.6 → 0.40.7

package/CHANGELOG.md

@@ -5,6 +5,34 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.40.7] - 2026-09-08
+
+### Changed
+
+- **棒グラフの縦軸の目盛りを人が読む数にして、棒の太さと色を直した** (#747)
+
+  見本帳の棒グラフを測ると、普通の棒グラフから外れた値が 4 つ出ていた。
+
+  | 見たもの | 直す前 | 直した後 |
+  |---|---|---|
+  | 縦軸の目盛り | `0 / 170 / 340 / 510 / 680` | `0 / 200 / 400 / 600 / 800` |
+  | 棒幅 対 隙間 | 12.7 : 1 | 2.2 : 1 |
+  | 棒の色 | 1 種類 | いちばん大きい棒だけ濃い |
+  | 角丸 | `2` (幅 126.5px に対して) | 棒幅の 6% |
+
+  原因は 2 つに分かれる。 目盛りが半端なのは最大値をそのまま天井にして 4 等分していたため
+  (`680 / 4 = 170`)、棒が太いのは隙間を `10px` の固定値にして残りを全部棒へ配っていたため。
+
+  天井は `1 / 2 / 2.5 / 5` に 10 の累乗を掛けた刻みの倍数へ切り上げる。 **天井を水増しして
+  余白は作らない** = 最大 `100` の図は `0 / 25 / 50 / 75 / 100` が正しい形で、値札が枠に
+  重ならない余白は図の上の余白が持つ。
+
+  色は 1 つのまま濃さだけを変える。 棒グラフは同じ量どうしの比較で、色は量を表さない =
+  4 本に 4 色を配ると読み手が「色に意味がある」 と誤読する余地が残る。
+
+  棒の高さの比は値の比のままで、高さから値を読む使い方は変わらない。
+  記法 (`chartData`) にも読み込みにも影響しない。
+
 ## [0.40.6] - 2026-09-08
 
 ### Fixed
@@ -1904,7 +1932,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.6...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.7...HEAD
+[0.40.7]: https://github.com/cardene777/cdl/compare/v0.40.6...v0.40.7
 [0.40.6]: https://github.com/cardene777/cdl/compare/v0.40.5...v0.40.6
 [0.40.5]: https://github.com/cardene777/cdl/compare/v0.40.4...v0.40.5
 [0.40.4]: https://github.com/cardene777/cdl/compare/v0.40.3...v0.40.4

package/dist/index.cjs

@@ -25897,6 +25897,20 @@ function \u53CE\u3081\u308B\u7D1A2(\u540D\u524D\u305F\u3061, \u5E45, \u4E0A\u965
   while (\u7D1A > \u4E0B\u9650 && Math.max(...\u540D\u524D\u305F\u3061.map((n) => textWidth(n, \u7D1A))) > \u5E45) \u7D1A -= 1;
   return \u7D1A;
 }
+function \u76EE\u76DB\u308A\u306E\u523B\u307F(\u6700\u5927, \u76EE\u5B89\u306E\u672C\u6570) {
+  if (!(\u6700\u5927 > 0) || false) return 0;
+  const \u7C97\u3044 = \u6700\u5927 / \u76EE\u5B89\u306E\u672C\u6570;
+  const \u6841 = 10 ** Math.floor(Math.log10(\u7C97\u3044));
+  const \u6B63\u898F = \u7C97\u3044 / \u6841;
+  const \u5019\u88DC = \u6B63\u898F <= 1 ? 1 : \u6B63\u898F <= 2 ? 2 : \u6B63\u898F <= 2.5 ? 2.5 : \u6B63\u898F <= 5 ? 5 : 10;
+  return \u5019\u88DC * \u6841;
+}
+function \u5C0F\u6570\u306E\u6841(n) {
+  const [\u4EEE\u6570, \u6307\u6570] = n.toExponential().split("e");
+  const \u5C0F\u6570\u90E8 = (\u4EEE\u6570 ?? "").split(".")[1]?.length ?? 0;
+  return Math.min(20, Math.max(0, \u5C0F\u6570\u90E8 - Number(\u6307\u6570)));
+}
+var \u6841\u3067\u4E38\u3081\u308B = (v, \u6841) => Number(v.toFixed(\u6841));
 function ChartBarNode({
   node,
   active,
@@ -25907,24 +25921,33 @@ function ChartBarNode({
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
-  const PAD_TOP2 = 20;
+  const PAD_TOP2 = 34;
   const PAD_RIGHT2 = 24;
   const PAD_BOTTOM2 = 44;
   const PAD_LEFT2 = 60;
   const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
   const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
   const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
-  const vRange = vMax || 1;
-  const barGap = 10;
+  const \u76EE\u76DB\u308A\u306E\u76EE\u5B89 = 4;
+  const \u5929\u4E95\u306E\u3082\u3068 = vMax > 0 ? vMax : 1;
+  const \u523B\u307F = \u76EE\u76DB\u308A\u306E\u523B\u307F(\u5929\u4E95\u306E\u3082\u3068, \u76EE\u76DB\u308A\u306E\u76EE\u5B89);
+  const \u523B\u307F\u306E\u6841 = \u5C0F\u6570\u306E\u6841(\u523B\u307F);
+  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);
+  const \u68D2\u3068\u9699\u9593\u306E\u6BD4 = 2.2;
+  const \u68D2\u306E\u4E0A\u9650 = 96;
   const barCount = data.length || 1;
-  const barW = (canvasW - barGap * (barCount + 1)) / barCount;
-  const yAt = (v) => PAD_TOP2 + canvasH - v / vRange * canvasH;
+  const \u5358\u4F4D = canvasW / (barCount * \u68D2\u3068\u9699\u9593\u306E\u6BD4 + (barCount + 1));
+  const barW = Math.max(0, Math.min(\u5358\u4F4D * \u68D2\u3068\u9699\u9593\u306E\u6BD4, \u68D2\u306E\u4E0A\u9650));
+  const barGap = (canvasW - barW * barCount) / (barCount + 1);
+  const yAt = (v) => PAD_TOP2 + canvasH - v / \u5929\u4E95 * canvasH;
   const xAt = (idx) => PAD_LEFT2 + barGap + idx * (barW + barGap);
-  const gridCount = 4;
-  const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
-    const v = vMax * i / gridCount;
+  const \u76EE\u76DB\u308A\u306E\u672C\u6570 = Math.round(\u5929\u4E95 / \u523B\u307F);
+  const gridTicks = Array.from({ length: \u76EE\u76DB\u308A\u306E\u672C\u6570 + 1 }, (_, i) => {
+    const v = \u6841\u3067\u4E38\u3081\u308B(\u523B\u307F * i, \u523B\u307F\u306E\u6841);
     return { y: yAt(v), value: v };
   });
+  const \u6FC3\u3055 = (v) => vMax > 0 ? v >= vMax ? 1 : 0.45 : 0.9;
+  const \u89D2\u4E38 = Math.min(barW * 0.06, 8);
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u6A2A\u8EF8\u306Ey = PAD_TOP2 + canvasH;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
@@ -25959,12 +25982,13 @@ function ChartBarNode({
       /* @__PURE__ */ jsxRuntime.jsx(
         "text",
         {
+          "data-cdl-role": "chart-bar-tick",
           x: PAD_LEFT2 - 8,
           y: t.y + 4,
           fontSize: 11,
           textAnchor: "end",
           fill: "var(--cdl-text-dim, #5a6270)",
-          children: Math.round(t.value)
+          children: t.value
         }
       )
     ] }, `grid-${i}`)),
@@ -25982,7 +26006,7 @@ function ChartBarNode({
     data.map((d, idx) => {
       const bx = xAt(idx);
       const by = yAt(d.value);
-      const bh = PAD_TOP2 + canvasH - by;
+      const bh = Math.max(0, PAD_TOP2 + canvasH - by);
       const \u898B\u3048\u3066\u3044\u308B\u982D = \u6A2A\u8EF8\u306Ey - (\u6A2A\u8EF8\u306Ey - by) * \u4F38\u3073;
       const \u68D2 = /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
@@ -25993,9 +26017,9 @@ function ChartBarNode({
           y: by,
           width: barW,
           height: bh,
-          rx: 2,
+          rx: \u89D2\u4E38,
           fill: "var(--cdl-tone-accent, #2d6a8f)",
-          fillOpacity: 0.9
+          fillOpacity: \u6FC3\u3055(d.value)
         }
       );
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
@@ -26003,9 +26027,11 @@ function ChartBarNode({
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
+            "data-cdl-role": "chart-bar-value",
             x: bx + barW / 2,
-            y: \u898B\u3048\u3066\u3044\u308B\u982D - 6,
-            fontSize: 11,
+            y: \u898B\u3048\u3066\u3044\u308B\u982D - 8,
+            fontSize: 12,
+            fontWeight: 600,
             textAnchor: "middle",
             fill: "var(--cdl-text, #1a1f2a)",
             children: d.value.toLocaleString()
@@ -26014,9 +26040,10 @@ function ChartBarNode({
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
+            "data-cdl-role": "chart-bar-label",
             x: bx + barW / 2,
             y: PAD_TOP2 + canvasH + 18,
-            fontSize: 12,
+            fontSize: 11,
             textAnchor: "middle",
             fill: "var(--cdl-text-dim, #5a6270)",
             children: d.label