@cardenelabs/cdl 0.40.6 → 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 +30 -1
- package/dist/index.cjs +42 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +42 -15
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +42 -15
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +42 -15
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/chart-bar.tsx +89 -16
package/dist/react.js
CHANGED
|
@@ -13396,6 +13396,20 @@ function \u53CE\u3081\u308B\u7D1A2(\u540D\u524D\u305F\u3061, \u5E45, \u4E0A\u965
|
|
|
13396
13396
|
while (\u7D1A > \u4E0B\u9650 && Math.max(...\u540D\u524D\u305F\u3061.map((n) => textWidth(n, \u7D1A))) > \u5E45) \u7D1A -= 1;
|
|
13397
13397
|
return \u7D1A;
|
|
13398
13398
|
}
|
|
13399
|
+
function \u76EE\u76DB\u308A\u306E\u523B\u307F(\u6700\u5927, \u76EE\u5B89\u306E\u672C\u6570) {
|
|
13400
|
+
if (!(\u6700\u5927 > 0) || false) return 0;
|
|
13401
|
+
const \u7C97\u3044 = \u6700\u5927 / \u76EE\u5B89\u306E\u672C\u6570;
|
|
13402
|
+
const \u6841 = 10 ** Math.floor(Math.log10(\u7C97\u3044));
|
|
13403
|
+
const \u6B63\u898F = \u7C97\u3044 / \u6841;
|
|
13404
|
+
const \u5019\u88DC = \u6B63\u898F <= 1 ? 1 : \u6B63\u898F <= 2 ? 2 : \u6B63\u898F <= 2.5 ? 2.5 : \u6B63\u898F <= 5 ? 5 : 10;
|
|
13405
|
+
return \u5019\u88DC * \u6841;
|
|
13406
|
+
}
|
|
13407
|
+
function \u5C0F\u6570\u306E\u6841(n) {
|
|
13408
|
+
const [\u4EEE\u6570, \u6307\u6570] = n.toExponential().split("e");
|
|
13409
|
+
const \u5C0F\u6570\u90E8 = (\u4EEE\u6570 ?? "").split(".")[1]?.length ?? 0;
|
|
13410
|
+
return Math.min(20, Math.max(0, \u5C0F\u6570\u90E8 - Number(\u6307\u6570)));
|
|
13411
|
+
}
|
|
13412
|
+
var \u6841\u3067\u4E38\u3081\u308B = (v, \u6841) => Number(v.toFixed(\u6841));
|
|
13399
13413
|
function ChartBarNode({
|
|
13400
13414
|
node,
|
|
13401
13415
|
active,
|
|
@@ -13406,24 +13420,33 @@ function ChartBarNode({
|
|
|
13406
13420
|
const x0 = node.cx - node.w / 2;
|
|
13407
13421
|
const y0 = node.cy - node.h / 2;
|
|
13408
13422
|
const data = resolveChartData(node.chartData ?? [], stateValues);
|
|
13409
|
-
const PAD_TOP2 =
|
|
13423
|
+
const PAD_TOP2 = 34;
|
|
13410
13424
|
const PAD_RIGHT2 = 24;
|
|
13411
13425
|
const PAD_BOTTOM2 = 44;
|
|
13412
13426
|
const PAD_LEFT2 = 60;
|
|
13413
13427
|
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
13414
13428
|
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
13415
13429
|
const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
|
|
13416
|
-
const
|
|
13417
|
-
const
|
|
13430
|
+
const \u76EE\u76DB\u308A\u306E\u76EE\u5B89 = 4;
|
|
13431
|
+
const \u5929\u4E95\u306E\u3082\u3068 = vMax > 0 ? vMax : 1;
|
|
13432
|
+
const \u523B\u307F = \u76EE\u76DB\u308A\u306E\u523B\u307F(\u5929\u4E95\u306E\u3082\u3068, \u76EE\u76DB\u308A\u306E\u76EE\u5B89);
|
|
13433
|
+
const \u523B\u307F\u306E\u6841 = \u5C0F\u6570\u306E\u6841(\u523B\u307F);
|
|
13434
|
+
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);
|
|
13435
|
+
const \u68D2\u3068\u9699\u9593\u306E\u6BD4 = 2.2;
|
|
13436
|
+
const \u68D2\u306E\u4E0A\u9650 = 96;
|
|
13418
13437
|
const barCount = data.length || 1;
|
|
13419
|
-
const
|
|
13420
|
-
const
|
|
13438
|
+
const \u5358\u4F4D = canvasW / (barCount * \u68D2\u3068\u9699\u9593\u306E\u6BD4 + (barCount + 1));
|
|
13439
|
+
const barW = Math.max(0, Math.min(\u5358\u4F4D * \u68D2\u3068\u9699\u9593\u306E\u6BD4, \u68D2\u306E\u4E0A\u9650));
|
|
13440
|
+
const barGap = (canvasW - barW * barCount) / (barCount + 1);
|
|
13441
|
+
const yAt = (v) => PAD_TOP2 + canvasH - v / \u5929\u4E95 * canvasH;
|
|
13421
13442
|
const xAt = (idx) => PAD_LEFT2 + barGap + idx * (barW + barGap);
|
|
13422
|
-
const
|
|
13423
|
-
const gridTicks = Array.from({ length:
|
|
13424
|
-
const v =
|
|
13443
|
+
const \u76EE\u76DB\u308A\u306E\u672C\u6570 = Math.round(\u5929\u4E95 / \u523B\u307F);
|
|
13444
|
+
const gridTicks = Array.from({ length: \u76EE\u76DB\u308A\u306E\u672C\u6570 + 1 }, (_, i) => {
|
|
13445
|
+
const v = \u6841\u3067\u4E38\u3081\u308B(\u523B\u307F * i, \u523B\u307F\u306E\u6841);
|
|
13425
13446
|
return { y: yAt(v), value: v };
|
|
13426
13447
|
});
|
|
13448
|
+
const \u6FC3\u3055 = (v) => vMax > 0 ? v >= vMax ? 1 : 0.45 : 0.9;
|
|
13449
|
+
const \u89D2\u4E38 = Math.min(barW * 0.06, 8);
|
|
13427
13450
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
13428
13451
|
const \u6A2A\u8EF8\u306Ey = PAD_TOP2 + canvasH;
|
|
13429
13452
|
return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
@@ -13458,12 +13481,13 @@ function ChartBarNode({
|
|
|
13458
13481
|
/* @__PURE__ */ jsx(
|
|
13459
13482
|
"text",
|
|
13460
13483
|
{
|
|
13484
|
+
"data-cdl-role": "chart-bar-tick",
|
|
13461
13485
|
x: PAD_LEFT2 - 8,
|
|
13462
13486
|
y: t.y + 4,
|
|
13463
13487
|
fontSize: 11,
|
|
13464
13488
|
textAnchor: "end",
|
|
13465
13489
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
13466
|
-
children:
|
|
13490
|
+
children: t.value
|
|
13467
13491
|
}
|
|
13468
13492
|
)
|
|
13469
13493
|
] }, `grid-${i}`)),
|
|
@@ -13481,7 +13505,7 @@ function ChartBarNode({
|
|
|
13481
13505
|
data.map((d, idx) => {
|
|
13482
13506
|
const bx = xAt(idx);
|
|
13483
13507
|
const by = yAt(d.value);
|
|
13484
|
-
const bh = PAD_TOP2 + canvasH - by;
|
|
13508
|
+
const bh = Math.max(0, PAD_TOP2 + canvasH - by);
|
|
13485
13509
|
const \u898B\u3048\u3066\u3044\u308B\u982D = \u6A2A\u8EF8\u306Ey - (\u6A2A\u8EF8\u306Ey - by) * \u4F38\u3073;
|
|
13486
13510
|
const \u68D2 = /* @__PURE__ */ jsx(
|
|
13487
13511
|
"rect",
|
|
@@ -13492,9 +13516,9 @@ function ChartBarNode({
|
|
|
13492
13516
|
y: by,
|
|
13493
13517
|
width: barW,
|
|
13494
13518
|
height: bh,
|
|
13495
|
-
rx:
|
|
13519
|
+
rx: \u89D2\u4E38,
|
|
13496
13520
|
fill: "var(--cdl-tone-accent, #2d6a8f)",
|
|
13497
|
-
fillOpacity:
|
|
13521
|
+
fillOpacity: \u6FC3\u3055(d.value)
|
|
13498
13522
|
}
|
|
13499
13523
|
);
|
|
13500
13524
|
return /* @__PURE__ */ jsxs("g", { children: [
|
|
@@ -13502,9 +13526,11 @@ function ChartBarNode({
|
|
|
13502
13526
|
/* @__PURE__ */ jsx(
|
|
13503
13527
|
"text",
|
|
13504
13528
|
{
|
|
13529
|
+
"data-cdl-role": "chart-bar-value",
|
|
13505
13530
|
x: bx + barW / 2,
|
|
13506
|
-
y: \u898B\u3048\u3066\u3044\u308B\u982D -
|
|
13507
|
-
fontSize:
|
|
13531
|
+
y: \u898B\u3048\u3066\u3044\u308B\u982D - 8,
|
|
13532
|
+
fontSize: 12,
|
|
13533
|
+
fontWeight: 600,
|
|
13508
13534
|
textAnchor: "middle",
|
|
13509
13535
|
fill: "var(--cdl-text, #1a1f2a)",
|
|
13510
13536
|
children: d.value.toLocaleString()
|
|
@@ -13513,9 +13539,10 @@ function ChartBarNode({
|
|
|
13513
13539
|
/* @__PURE__ */ jsx(
|
|
13514
13540
|
"text",
|
|
13515
13541
|
{
|
|
13542
|
+
"data-cdl-role": "chart-bar-label",
|
|
13516
13543
|
x: bx + barW / 2,
|
|
13517
13544
|
y: PAD_TOP2 + canvasH + 18,
|
|
13518
|
-
fontSize:
|
|
13545
|
+
fontSize: 11,
|
|
13519
13546
|
textAnchor: "middle",
|
|
13520
13547
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
13521
13548
|
children: d.label
|