@cardenelabs/cdl 0.40.0 → 0.40.1
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 +22 -1
- package/dist/index.cjs +48 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +48 -7
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +48 -7
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +48 -7
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/chart-slope.tsx +100 -8
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,26 @@ CDL (Chainome Diagram Language) の主要変更履歴。
|
|
|
5
5
|
|
|
6
6
|
## [Unreleased]
|
|
7
7
|
|
|
8
|
+
## [0.40.1] - 2026-09-07
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
|
|
12
|
+
- **傾き図で同じ値の系列の名札が重なって読めなくなるのを直した** (#723)
|
|
13
|
+
|
|
14
|
+
`chart-slope` は名札 (値と名前) を点と同じ縦の位置に置いていたので、値が同じ / 近い
|
|
15
|
+
系列が 2 件以上あると同じ場所に印字されていた。 実測で 59 と 59 の 2 件が完全に重なり、
|
|
16
|
+
値は太字が二重に乗った染み、名前は 2 つの語が重なった判読不能な塊になっていた。
|
|
17
|
+
完全一致でなくても起きる = 59 と 60 の差は 3.55 しかなく、字の高さ 14 に対して足りない。
|
|
18
|
+
|
|
19
|
+
**動かすのは名札だけ**。 点と線は真の位置に残す = 位置をずらすと、書いていない差を
|
|
20
|
+
絵が主張することになる (同順位を段でずらさない判断と同じ理由、#707)。 同じ値の点は
|
|
21
|
+
重なったままで、どの名札がどの系列かは名前の色が担う (#698)。
|
|
22
|
+
|
|
23
|
+
重なった連なりは **元の位置の平均を中心にして** 間隔ぶんずつ均等に置き直す。
|
|
24
|
+
上から順に押し下げるだけだと塊が片側へ寄り、点との対応が遠くなる。
|
|
25
|
+
|
|
26
|
+
枠に入り切らない件数の図では、どれか 1 つを枠の外へ出さず全部を等間隔に詰める。
|
|
27
|
+
|
|
8
28
|
## [0.40.0] - 2026-09-07
|
|
9
29
|
|
|
10
30
|
### Added
|
|
@@ -1781,7 +1801,8 @@ Initial OSS release.
|
|
|
1781
1801
|
使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
|
|
1782
1802
|
行き止まりになる。
|
|
1783
1803
|
|
|
1784
|
-
[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.
|
|
1804
|
+
[Unreleased]: https://github.com/cardene777/cdl/compare/v0.40.1...HEAD
|
|
1805
|
+
[0.40.1]: https://github.com/cardene777/cdl/compare/v0.40.0...v0.40.1
|
|
1785
1806
|
[0.40.0]: https://github.com/cardene777/cdl/compare/v0.39.0...v0.40.0
|
|
1786
1807
|
[0.39.0]: https://github.com/cardene777/cdl/compare/v0.38.0...v0.39.0
|
|
1787
1808
|
[0.38.0]: https://github.com/cardene777/cdl/compare/v0.37.0...v0.38.0
|
package/dist/index.cjs
CHANGED
|
@@ -25528,6 +25528,36 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
|
|
|
25528
25528
|
return out;
|
|
25529
25529
|
}
|
|
25530
25530
|
var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
|
|
25531
|
+
function \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u771F\u306Ey, \u9593\u9694, \u4E0A\u9650, \u4E0B\u9650) {
|
|
25532
|
+
const \u4EF6\u6570 = \u771F\u306Ey.length;
|
|
25533
|
+
if (\u4EF6\u6570 === 0) return [];
|
|
25534
|
+
const \u4E26\u3073 = \u771F\u306Ey.map((y, i) => ({ y, i })).sort((a, b) => a.y - b.y || a.i - b.i);
|
|
25535
|
+
const \u7D50\u679C = new Array(\u4EF6\u6570);
|
|
25536
|
+
if (\u9593\u9694 * (\u4EF6\u6570 - 1) > \u4E0B\u9650 - \u4E0A\u9650) {
|
|
25537
|
+
\u4E26\u3073.forEach((e, k) => {
|
|
25538
|
+
\u7D50\u679C[e.i] = \u4EF6\u6570 > 1 ? \u4E0A\u9650 + (\u4E0B\u9650 - \u4E0A\u9650) / (\u4EF6\u6570 - 1) * k : (\u4E0A\u9650 + \u4E0B\u9650) / 2;
|
|
25539
|
+
});
|
|
25540
|
+
return \u7D50\u679C;
|
|
25541
|
+
}
|
|
25542
|
+
const \u584A\u305F\u3061 = [];
|
|
25543
|
+
\u4E26\u3073.forEach((e, k) => {
|
|
25544
|
+
\u584A\u305F\u3061.push({ \u5408\u8A08: e.y - \u9593\u9694 * k, \u4EF6\u6570: 1 });
|
|
25545
|
+
while (\u584A\u305F\u3061.length >= 2) {
|
|
25546
|
+
const \u5F8C = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 1];
|
|
25547
|
+
const \u524D = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 2];
|
|
25548
|
+
if (\u524D.\u5408\u8A08 / \u524D.\u4EF6\u6570 <= \u5F8C.\u5408\u8A08 / \u5F8C.\u4EF6\u6570) break;
|
|
25549
|
+
\u584A\u305F\u3061.splice(\u584A\u305F\u3061.length - 2, 2, { \u5408\u8A08: \u524D.\u5408\u8A08 + \u5F8C.\u5408\u8A08, \u4EF6\u6570: \u524D.\u4EF6\u6570 + \u5F8C.\u4EF6\u6570 });
|
|
25550
|
+
}
|
|
25551
|
+
});
|
|
25552
|
+
const \u307B\u3069\u3044\u305F = [];
|
|
25553
|
+
\u584A\u305F\u3061.forEach((\u584A) => {
|
|
25554
|
+
const \u5E73\u5747 = \u584A.\u5408\u8A08 / \u584A.\u4EF6\u6570;
|
|
25555
|
+
for (let j = 0; j < \u584A.\u4EF6\u6570; j++) \u307B\u3069\u3044\u305F.push(\u5E73\u5747 + \u9593\u9694 * \u307B\u3069\u3044\u305F.length);
|
|
25556
|
+
});
|
|
25557
|
+
const \u305A\u308C = Math.max(0, \u4E0A\u9650 - \u307B\u3069\u3044\u305F[0]) - Math.max(0, \u307B\u3069\u3044\u305F[\u4EF6\u6570 - 1] - \u4E0B\u9650);
|
|
25558
|
+
\u4E26\u3073.forEach((e, k) => \u7D50\u679C[e.i] = \u307B\u3069\u3044\u305F[k] + \u305A\u308C);
|
|
25559
|
+
return \u7D50\u679C;
|
|
25560
|
+
}
|
|
25531
25561
|
function ChartSlopeNode({
|
|
25532
25562
|
node,
|
|
25533
25563
|
active,
|
|
@@ -25593,6 +25623,15 @@ function ChartSlopeNode({
|
|
|
25593
25623
|
const \u53F3\u8EF8x = \u524D\u3042\u308A ? Math.min(node.w - PAD, Math.max(node.w - PAD - \u53F3\u306E\u4F59\u767D, node.w / 2 + \u7DDA\u306E\u6700\u5C0F\u5E45 / 2)) : \u5DE6\u8EF8x;
|
|
25594
25624
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
25595
25625
|
const \u53F3\u3092\u51FA\u3059 = !drawing || \u4F38\u3073 >= 1;
|
|
25626
|
+
const \u5DE6\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
|
|
25627
|
+
(s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u524D\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u524D)
|
|
25628
|
+
);
|
|
25629
|
+
const \u53F3\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
|
|
25630
|
+
(s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u4ECA\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u4ECA)
|
|
25631
|
+
);
|
|
25632
|
+
const \u540D\u672D\u306E\u884C = Math.max(\u5024\u306E\u7D1A, \u540D\u524D\u306E\u7D1A) + 4;
|
|
25633
|
+
const \u5DE6\u306E\u540D\u672Dy = \u524D\u3042\u308A ? \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u5DE6\u306E\u70B9y, \u540D\u672D\u306E\u884C, \u4E0A\u7AEF, \u4E0B\u7AEF) : \u5DE6\u306E\u70B9y;
|
|
25634
|
+
const \u53F3\u306E\u540D\u672Dy = \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u53F3\u306E\u70B9y, \u540D\u672D\u306E\u884C, \u4E0A\u7AEF, \u4E0B\u7AEF);
|
|
25596
25635
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
25597
25636
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25598
25637
|
"rect",
|
|
@@ -25650,8 +25689,10 @@ function ChartSlopeNode({
|
|
|
25650
25689
|
)
|
|
25651
25690
|
] }),
|
|
25652
25691
|
\u7CFB\u5217\u305F\u3061.map((s, i) => {
|
|
25653
|
-
const \u5DE6y = \
|
|
25654
|
-
const \u53F3y = \
|
|
25692
|
+
const \u5DE6y = \u5DE6\u306E\u70B9y[i];
|
|
25693
|
+
const \u53F3y = \u53F3\u306E\u70B9y[i];
|
|
25694
|
+
const \u5DE6\u672Dy = \u5DE6\u306E\u540D\u672Dy[i];
|
|
25695
|
+
const \u53F3\u672Dy = \u53F3\u306E\u540D\u672Dy[i];
|
|
25655
25696
|
const \u672A\u89E3\u6C7A = s.\u672A\u89E3\u6C7A ? "true" : void 0;
|
|
25656
25697
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
25657
25698
|
\u524D\u3042\u308A && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -25695,7 +25736,7 @@ function ChartSlopeNode({
|
|
|
25695
25736
|
{
|
|
25696
25737
|
"data-cdl-role": "chart-slope-value",
|
|
25697
25738
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
25698
|
-
y: \
|
|
25739
|
+
y: \u5DE6\u672Dy + 5,
|
|
25699
25740
|
textAnchor: "end",
|
|
25700
25741
|
fontSize: \u5024\u306E\u7D1A,
|
|
25701
25742
|
fontWeight: 600,
|
|
@@ -25708,7 +25749,7 @@ function ChartSlopeNode({
|
|
|
25708
25749
|
{
|
|
25709
25750
|
"data-cdl-role": "chart-slope-name",
|
|
25710
25751
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067 - \u5DE6\u5024\u5E45 - \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
25711
|
-
y: \
|
|
25752
|
+
y: \u5DE6\u672Dy + 5,
|
|
25712
25753
|
textAnchor: "end",
|
|
25713
25754
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25714
25755
|
fill: s.\u8272,
|
|
@@ -25720,7 +25761,7 @@ function ChartSlopeNode({
|
|
|
25720
25761
|
{
|
|
25721
25762
|
"data-cdl-role": "chart-slope-name",
|
|
25722
25763
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
25723
|
-
y: \
|
|
25764
|
+
y: \u53F3\u672Dy + 5,
|
|
25724
25765
|
textAnchor: "end",
|
|
25725
25766
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25726
25767
|
fill: s.\u8272,
|
|
@@ -25733,7 +25774,7 @@ function ChartSlopeNode({
|
|
|
25733
25774
|
{
|
|
25734
25775
|
"data-cdl-role": \u5F62 === "delta" ? "chart-slope-delta" : "chart-slope-value",
|
|
25735
25776
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
25736
|
-
y: \
|
|
25777
|
+
y: \u53F3\u672Dy + 5,
|
|
25737
25778
|
fontSize: \u5024\u306E\u7D1A,
|
|
25738
25779
|
fontWeight: 600,
|
|
25739
25780
|
fill: "var(--cdl-text, #1a1f2a)",
|
|
@@ -25745,7 +25786,7 @@ function ChartSlopeNode({
|
|
|
25745
25786
|
{
|
|
25746
25787
|
"data-cdl-role": "chart-slope-name",
|
|
25747
25788
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
25748
|
-
y: \
|
|
25789
|
+
y: \u53F3\u672Dy + 5,
|
|
25749
25790
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25750
25791
|
fill: s.\u8272,
|
|
25751
25792
|
children: s.\u540D\u524D
|