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