@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/index.js
CHANGED
|
@@ -25895,6 +25895,20 @@ function \u53CE\u3081\u308B\u7D1A2(\u540D\u524D\u305F\u3061, \u5E45, \u4E0A\u965
|
|
|
25895
25895
|
while (\u7D1A > \u4E0B\u9650 && Math.max(...\u540D\u524D\u305F\u3061.map((n) => textWidth(n, \u7D1A))) > \u5E45) \u7D1A -= 1;
|
|
25896
25896
|
return \u7D1A;
|
|
25897
25897
|
}
|
|
25898
|
+
function \u76EE\u76DB\u308A\u306E\u523B\u307F(\u6700\u5927, \u76EE\u5B89\u306E\u672C\u6570) {
|
|
25899
|
+
if (!(\u6700\u5927 > 0) || false) return 0;
|
|
25900
|
+
const \u7C97\u3044 = \u6700\u5927 / \u76EE\u5B89\u306E\u672C\u6570;
|
|
25901
|
+
const \u6841 = 10 ** Math.floor(Math.log10(\u7C97\u3044));
|
|
25902
|
+
const \u6B63\u898F = \u7C97\u3044 / \u6841;
|
|
25903
|
+
const \u5019\u88DC = \u6B63\u898F <= 1 ? 1 : \u6B63\u898F <= 2 ? 2 : \u6B63\u898F <= 2.5 ? 2.5 : \u6B63\u898F <= 5 ? 5 : 10;
|
|
25904
|
+
return \u5019\u88DC * \u6841;
|
|
25905
|
+
}
|
|
25906
|
+
function \u5C0F\u6570\u306E\u6841(n) {
|
|
25907
|
+
const [\u4EEE\u6570, \u6307\u6570] = n.toExponential().split("e");
|
|
25908
|
+
const \u5C0F\u6570\u90E8 = (\u4EEE\u6570 ?? "").split(".")[1]?.length ?? 0;
|
|
25909
|
+
return Math.min(20, Math.max(0, \u5C0F\u6570\u90E8 - Number(\u6307\u6570)));
|
|
25910
|
+
}
|
|
25911
|
+
var \u6841\u3067\u4E38\u3081\u308B = (v, \u6841) => Number(v.toFixed(\u6841));
|
|
25898
25912
|
function ChartBarNode({
|
|
25899
25913
|
node,
|
|
25900
25914
|
active,
|
|
@@ -25905,24 +25919,33 @@ function ChartBarNode({
|
|
|
25905
25919
|
const x0 = node.cx - node.w / 2;
|
|
25906
25920
|
const y0 = node.cy - node.h / 2;
|
|
25907
25921
|
const data = resolveChartData(node.chartData ?? [], stateValues);
|
|
25908
|
-
const PAD_TOP2 =
|
|
25922
|
+
const PAD_TOP2 = 34;
|
|
25909
25923
|
const PAD_RIGHT2 = 24;
|
|
25910
25924
|
const PAD_BOTTOM2 = 44;
|
|
25911
25925
|
const PAD_LEFT2 = 60;
|
|
25912
25926
|
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
25913
25927
|
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
25914
25928
|
const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
|
|
25915
|
-
const
|
|
25916
|
-
const
|
|
25929
|
+
const \u76EE\u76DB\u308A\u306E\u76EE\u5B89 = 4;
|
|
25930
|
+
const \u5929\u4E95\u306E\u3082\u3068 = vMax > 0 ? vMax : 1;
|
|
25931
|
+
const \u523B\u307F = \u76EE\u76DB\u308A\u306E\u523B\u307F(\u5929\u4E95\u306E\u3082\u3068, \u76EE\u76DB\u308A\u306E\u76EE\u5B89);
|
|
25932
|
+
const \u523B\u307F\u306E\u6841 = \u5C0F\u6570\u306E\u6841(\u523B\u307F);
|
|
25933
|
+
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);
|
|
25934
|
+
const \u68D2\u3068\u9699\u9593\u306E\u6BD4 = 2.2;
|
|
25935
|
+
const \u68D2\u306E\u4E0A\u9650 = 96;
|
|
25917
25936
|
const barCount = data.length || 1;
|
|
25918
|
-
const
|
|
25919
|
-
const
|
|
25937
|
+
const \u5358\u4F4D = canvasW / (barCount * \u68D2\u3068\u9699\u9593\u306E\u6BD4 + (barCount + 1));
|
|
25938
|
+
const barW = Math.max(0, Math.min(\u5358\u4F4D * \u68D2\u3068\u9699\u9593\u306E\u6BD4, \u68D2\u306E\u4E0A\u9650));
|
|
25939
|
+
const barGap = (canvasW - barW * barCount) / (barCount + 1);
|
|
25940
|
+
const yAt = (v) => PAD_TOP2 + canvasH - v / \u5929\u4E95 * canvasH;
|
|
25920
25941
|
const xAt = (idx) => PAD_LEFT2 + barGap + idx * (barW + barGap);
|
|
25921
|
-
const
|
|
25922
|
-
const gridTicks = Array.from({ length:
|
|
25923
|
-
const v =
|
|
25942
|
+
const \u76EE\u76DB\u308A\u306E\u672C\u6570 = Math.round(\u5929\u4E95 / \u523B\u307F);
|
|
25943
|
+
const gridTicks = Array.from({ length: \u76EE\u76DB\u308A\u306E\u672C\u6570 + 1 }, (_, i) => {
|
|
25944
|
+
const v = \u6841\u3067\u4E38\u3081\u308B(\u523B\u307F * i, \u523B\u307F\u306E\u6841);
|
|
25924
25945
|
return { y: yAt(v), value: v };
|
|
25925
25946
|
});
|
|
25947
|
+
const \u6FC3\u3055 = (v) => vMax > 0 ? v >= vMax ? 1 : 0.45 : 0.9;
|
|
25948
|
+
const \u89D2\u4E38 = Math.min(barW * 0.06, 8);
|
|
25926
25949
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
25927
25950
|
const \u6A2A\u8EF8\u306Ey = PAD_TOP2 + canvasH;
|
|
25928
25951
|
return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
@@ -25957,12 +25980,13 @@ function ChartBarNode({
|
|
|
25957
25980
|
/* @__PURE__ */ jsx(
|
|
25958
25981
|
"text",
|
|
25959
25982
|
{
|
|
25983
|
+
"data-cdl-role": "chart-bar-tick",
|
|
25960
25984
|
x: PAD_LEFT2 - 8,
|
|
25961
25985
|
y: t.y + 4,
|
|
25962
25986
|
fontSize: 11,
|
|
25963
25987
|
textAnchor: "end",
|
|
25964
25988
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
25965
|
-
children:
|
|
25989
|
+
children: t.value
|
|
25966
25990
|
}
|
|
25967
25991
|
)
|
|
25968
25992
|
] }, `grid-${i}`)),
|
|
@@ -25980,7 +26004,7 @@ function ChartBarNode({
|
|
|
25980
26004
|
data.map((d, idx) => {
|
|
25981
26005
|
const bx = xAt(idx);
|
|
25982
26006
|
const by = yAt(d.value);
|
|
25983
|
-
const bh = PAD_TOP2 + canvasH - by;
|
|
26007
|
+
const bh = Math.max(0, PAD_TOP2 + canvasH - by);
|
|
25984
26008
|
const \u898B\u3048\u3066\u3044\u308B\u982D = \u6A2A\u8EF8\u306Ey - (\u6A2A\u8EF8\u306Ey - by) * \u4F38\u3073;
|
|
25985
26009
|
const \u68D2 = /* @__PURE__ */ jsx(
|
|
25986
26010
|
"rect",
|
|
@@ -25991,9 +26015,9 @@ function ChartBarNode({
|
|
|
25991
26015
|
y: by,
|
|
25992
26016
|
width: barW,
|
|
25993
26017
|
height: bh,
|
|
25994
|
-
rx:
|
|
26018
|
+
rx: \u89D2\u4E38,
|
|
25995
26019
|
fill: "var(--cdl-tone-accent, #2d6a8f)",
|
|
25996
|
-
fillOpacity:
|
|
26020
|
+
fillOpacity: \u6FC3\u3055(d.value)
|
|
25997
26021
|
}
|
|
25998
26022
|
);
|
|
25999
26023
|
return /* @__PURE__ */ jsxs("g", { children: [
|
|
@@ -26001,9 +26025,11 @@ function ChartBarNode({
|
|
|
26001
26025
|
/* @__PURE__ */ jsx(
|
|
26002
26026
|
"text",
|
|
26003
26027
|
{
|
|
26028
|
+
"data-cdl-role": "chart-bar-value",
|
|
26004
26029
|
x: bx + barW / 2,
|
|
26005
|
-
y: \u898B\u3048\u3066\u3044\u308B\u982D -
|
|
26006
|
-
fontSize:
|
|
26030
|
+
y: \u898B\u3048\u3066\u3044\u308B\u982D - 8,
|
|
26031
|
+
fontSize: 12,
|
|
26032
|
+
fontWeight: 600,
|
|
26007
26033
|
textAnchor: "middle",
|
|
26008
26034
|
fill: "var(--cdl-text, #1a1f2a)",
|
|
26009
26035
|
children: d.value.toLocaleString()
|
|
@@ -26012,9 +26038,10 @@ function ChartBarNode({
|
|
|
26012
26038
|
/* @__PURE__ */ jsx(
|
|
26013
26039
|
"text",
|
|
26014
26040
|
{
|
|
26041
|
+
"data-cdl-role": "chart-bar-label",
|
|
26015
26042
|
x: bx + barW / 2,
|
|
26016
26043
|
y: PAD_TOP2 + canvasH + 18,
|
|
26017
|
-
fontSize:
|
|
26044
|
+
fontSize: 11,
|
|
26018
26045
|
textAnchor: "middle",
|
|
26019
26046
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
26020
26047
|
children: d.label
|