@cardenelabs/cdl 0.34.0 → 0.35.0
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 +16 -1
- package/dist/index.cjs +23 -57
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +23 -57
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +23 -57
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +23 -57
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/chart-gauge.tsx +1 -17
- package/src/kinds/chart-number.ts +18 -5
- package/src/kinds/chart-pie.tsx +1 -27
- package/src/kinds/chart-radial.tsx +1 -13
- package/src/kinds/chart-slope.tsx +14 -4
- package/src/kinds/chart-stacked-bar.tsx +1 -13
- package/src/kinds/chart-stat.tsx +1 -13
- package/src/kinds/chart-waffle.tsx +1 -7
package/dist/index.js
CHANGED
|
@@ -24336,6 +24336,15 @@ function interpolateColor(template, stateValues, fallback) {
|
|
|
24336
24336
|
if (!template) return fallback;
|
|
24337
24337
|
return interpolate(template, stateValues);
|
|
24338
24338
|
}
|
|
24339
|
+
|
|
24340
|
+
// src/kinds/chart-number.ts
|
|
24341
|
+
function \u5B9F\u5024\u8868\u8A18(v) {
|
|
24342
|
+
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
24343
|
+
}
|
|
24344
|
+
function \u5272\u5408\u8868\u8A18(frac) {
|
|
24345
|
+
const v = Math.round(frac * 1e3) / 10;
|
|
24346
|
+
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
24347
|
+
}
|
|
24339
24348
|
function ChartPieNode({
|
|
24340
24349
|
node,
|
|
24341
24350
|
active,
|
|
@@ -24783,13 +24792,6 @@ function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
|
|
|
24783
24792
|
const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
|
|
24784
24793
|
return /* @__PURE__ */ jsx("path", { d });
|
|
24785
24794
|
}
|
|
24786
|
-
function \u5B9F\u5024\u8868\u8A18(v) {
|
|
24787
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
24788
|
-
}
|
|
24789
|
-
function \u5272\u5408\u8868\u8A18(frac) {
|
|
24790
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
24791
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
24792
|
-
}
|
|
24793
24795
|
function sliceColor(tone, idx) {
|
|
24794
24796
|
if (tone) return TONE[tone];
|
|
24795
24797
|
return chartSeriesColor(idx);
|
|
@@ -24830,7 +24832,7 @@ function ChartGaugeNode({
|
|
|
24830
24832
|
const path = `M ${\u59161.x} ${\u59161.y} A ${radius} ${radius} 0 0 1 ${\u59162.x} ${\u59162.y} L ${\u51852.x} ${\u51852.y} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 0 0 ${\u51851.x} ${\u51851.y} Z`;
|
|
24831
24833
|
return { d, frac, path };
|
|
24832
24834
|
});
|
|
24833
|
-
const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\
|
|
24835
|
+
const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
|
|
24834
24836
|
const \u6A2A\u306E\u4E0A\u9650 = \u5185\u534A\u5F84 * 2 * 0.86;
|
|
24835
24837
|
const \u7D1A\u306E\u5019\u88DC = Math.min(
|
|
24836
24838
|
// 横 = 実際の字幅から逆算する
|
|
@@ -24895,7 +24897,7 @@ function ChartGaugeNode({
|
|
|
24895
24897
|
),
|
|
24896
24898
|
data.map((d, idx) => {
|
|
24897
24899
|
const x = PAD_SIDE + \u5185\u8A33\u306E\u5E45 * idx;
|
|
24898
|
-
const \u6570\u5024 = `${\u5B9F\u5024\u8868\
|
|
24900
|
+
const \u6570\u5024 = `${\u5B9F\u5024\u8868\u8A18(d.value)} ${\u5272\u5408\u8868\u8A18(d.value / total)}`;
|
|
24899
24901
|
return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
|
|
24900
24902
|
/* @__PURE__ */ jsx("rect", { x, y: \u5185\u8A33\u306Ey, width: 30, height: 4, rx: 2, fill: arcColor(d.tone, idx) }),
|
|
24901
24903
|
/* @__PURE__ */ jsx(
|
|
@@ -24927,13 +24929,6 @@ function \u5207\u308A\u8A70\u3081\u308B(s, \u4E0A\u9650, \u7D1A) {
|
|
|
24927
24929
|
}
|
|
24928
24930
|
return `${out}\u2026`;
|
|
24929
24931
|
}
|
|
24930
|
-
function \u5B9F\u5024\u8868\u8A182(v) {
|
|
24931
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
24932
|
-
}
|
|
24933
|
-
function \u5272\u5408\u8868\u8A182(frac) {
|
|
24934
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
24935
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
24936
|
-
}
|
|
24937
24932
|
function arcColor(tone, idx) {
|
|
24938
24933
|
if (tone) return TONE[tone];
|
|
24939
24934
|
return chartSeriesColor(idx);
|
|
@@ -24953,7 +24948,7 @@ function ChartRadialNode({
|
|
|
24953
24948
|
const \u6570\u5024\u306E\u7D1A = 13;
|
|
24954
24949
|
const \u884C\u306E\u9AD8\u3055 = 42;
|
|
24955
24950
|
const \u4E00\u89A7\u3068\u5F27\u306E\u9593 = 28;
|
|
24956
|
-
const \u6570\u5024\u306E\u6587\u5B57 = data.map((d) => `${\u5B9F\u5024\u8868\
|
|
24951
|
+
const \u6570\u5024\u306E\u6587\u5B57 = data.map((d) => `${\u5B9F\u5024\u8868\u8A18(d.value)} ${\u5272\u5408\u8868\u8A18(d.value / total)}`);
|
|
24957
24952
|
const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E45 + Math.max(
|
|
24958
24953
|
0,
|
|
24959
24954
|
...data.map(
|
|
@@ -25056,13 +25051,6 @@ function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5
|
|
|
25056
25051
|
const p = (r, a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
|
|
25057
25052
|
return `M ${p(\u5916, a0)} A ${\u5916} ${\u5916} 0 ${large} 1 ${p(\u5916, a1)} L ${p(\u5185, a1)} A ${\u5185} ${\u5185} 0 ${large} 0 ${p(\u5185, a0)} Z`;
|
|
25058
25053
|
}
|
|
25059
|
-
function \u5B9F\u5024\u8868\u8A183(v) {
|
|
25060
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
25061
|
-
}
|
|
25062
|
-
function \u5272\u5408\u8868\u8A183(frac) {
|
|
25063
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
25064
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
25065
|
-
}
|
|
25066
25054
|
function arcColor2(tone, idx) {
|
|
25067
25055
|
if (tone) return TONE[tone];
|
|
25068
25056
|
return chartSeriesColor(idx);
|
|
@@ -25096,7 +25084,7 @@ function ChartStatNode({
|
|
|
25096
25084
|
const \u67A02 = \u533A\u753B.\u67A0(idx);
|
|
25097
25085
|
const frac = total > 0 ? d.value / total : 0;
|
|
25098
25086
|
const \u8272 = \u5370\u306E\u8272(d.tone, idx);
|
|
25099
|
-
const \u6570\u5024 = \u5B9F\u5024\u8868\
|
|
25087
|
+
const \u6570\u5024 = \u5B9F\u5024\u8868\u8A18(d.value);
|
|
25100
25088
|
const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A02.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
|
|
25101
25089
|
return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
|
|
25102
25090
|
idx > 0 && /* @__PURE__ */ jsx(
|
|
@@ -25171,7 +25159,7 @@ function ChartStatNode({
|
|
|
25171
25159
|
fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
|
|
25172
25160
|
textAnchor: "middle",
|
|
25173
25161
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
25174
|
-
children: \u5272\u5408\u8868\
|
|
25162
|
+
children: \u5272\u5408\u8868\u8A18(frac)
|
|
25175
25163
|
}
|
|
25176
25164
|
)
|
|
25177
25165
|
] }, `stat-${idx}`);
|
|
@@ -25218,13 +25206,6 @@ function \u5F27\u306E\u90533(cx, cy, r, \u5272\u5408) {
|
|
|
25218
25206
|
const p = (a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
|
|
25219
25207
|
return `M ${p(a0)} A ${r} ${r} 0 ${large} 1 ${p(a1)}`;
|
|
25220
25208
|
}
|
|
25221
|
-
function \u5B9F\u5024\u8868\u8A184(v) {
|
|
25222
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
25223
|
-
}
|
|
25224
|
-
function \u5272\u5408\u8868\u8A184(frac) {
|
|
25225
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
25226
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
25227
|
-
}
|
|
25228
25209
|
function \u5370\u306E\u8272(tone, idx) {
|
|
25229
25210
|
if (tone) return TONE[tone];
|
|
25230
25211
|
return chartSeriesColor(idx);
|
|
@@ -25260,7 +25241,7 @@ function ChartWaffleNode({
|
|
|
25260
25241
|
const \u884C\u306E\u9AD8\u3055 = 40;
|
|
25261
25242
|
const \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593 = 28;
|
|
25262
25243
|
const \u5370\u306E\u5E452 = 18;
|
|
25263
|
-
const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\
|
|
25244
|
+
const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A18(d.value)} ${\u914D\u5206[i] ?? 0}%`);
|
|
25264
25245
|
const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E452 + Math.max(
|
|
25265
25246
|
0,
|
|
25266
25247
|
...data.map(
|
|
@@ -25344,9 +25325,6 @@ function ChartWaffleNode({
|
|
|
25344
25325
|
})
|
|
25345
25326
|
] });
|
|
25346
25327
|
}
|
|
25347
|
-
function \u5B9F\u5024\u8868\u8A185(v) {
|
|
25348
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
25349
|
-
}
|
|
25350
25328
|
function \u5370\u306E\u82722(tone, idx) {
|
|
25351
25329
|
if (tone) return TONE[tone];
|
|
25352
25330
|
return chartSeriesColor(idx);
|
|
@@ -25433,7 +25411,7 @@ function ChartStackedBarNode({
|
|
|
25433
25411
|
fontWeight: 700,
|
|
25434
25412
|
textAnchor: "middle",
|
|
25435
25413
|
fill: "#ffffff",
|
|
25436
|
-
children: \u5272\u5408\u8868\
|
|
25414
|
+
children: \u5272\u5408\u8868\u8A18(s.\u5272\u5408)
|
|
25437
25415
|
}
|
|
25438
25416
|
),
|
|
25439
25417
|
w >= SLICE_MIN_W_FOR_VALUE && /* @__PURE__ */ jsx(
|
|
@@ -25446,7 +25424,7 @@ function ChartStackedBarNode({
|
|
|
25446
25424
|
textAnchor: "middle",
|
|
25447
25425
|
fill: "#ffffff",
|
|
25448
25426
|
fillOpacity: 0.85,
|
|
25449
|
-
children: \u5B9F\u5024\u8868\
|
|
25427
|
+
children: \u5B9F\u5024\u8868\u8A18(s.\u5B9F\u5024)
|
|
25450
25428
|
}
|
|
25451
25429
|
)
|
|
25452
25430
|
] }, `slice-${idx}`);
|
|
@@ -25491,13 +25469,6 @@ function \u5E2F\u3092\u7D44\u3080(\u540D\u524D, data, \u53D6\u308B) {
|
|
|
25491
25469
|
}))
|
|
25492
25470
|
};
|
|
25493
25471
|
}
|
|
25494
|
-
function \u5B9F\u5024\u8868\u8A186(v) {
|
|
25495
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
25496
|
-
}
|
|
25497
|
-
function \u5272\u5408\u8868\u8A185(frac) {
|
|
25498
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
25499
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
25500
|
-
}
|
|
25501
25472
|
function \u5370\u306E\u82723(tone, idx) {
|
|
25502
25473
|
if (tone) return TONE[tone];
|
|
25503
25474
|
return chartSeriesColor(idx);
|
|
@@ -25519,11 +25490,6 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
|
|
|
25519
25490
|
});
|
|
25520
25491
|
return out;
|
|
25521
25492
|
}
|
|
25522
|
-
|
|
25523
|
-
// src/kinds/chart-number.ts
|
|
25524
|
-
function \u5B9F\u5024\u8868\u8A187(v) {
|
|
25525
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
25526
|
-
}
|
|
25527
25493
|
var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
|
|
25528
25494
|
function ChartSlopeNode({
|
|
25529
25495
|
node,
|
|
@@ -25559,8 +25525,8 @@ function ChartSlopeNode({
|
|
|
25559
25525
|
const \u4E0A\u7AEF = PAD + (\u524D\u3042\u308A ? \u6642\u70B9\u306E\u7D1A + 12 : 0) + 6;
|
|
25560
25526
|
const \u4E0B\u7AEF = Math.max(\u4E0A\u7AEF + 10, node.h - PAD - 6);
|
|
25561
25527
|
const y\u3092\u53D6\u308B = (v) => \u5C3A\u306E\u5E45 > 0 ? \u4E0B\u7AEF - (v - \u6700\u5C0F) / \u5C3A\u306E\u5E45 * (\u4E0B\u7AEF - \u4E0A\u7AEF) : (\u4E0A\u7AEF + \u4E0B\u7AEF) / 2;
|
|
25562
|
-
const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\
|
|
25563
|
-
const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\
|
|
25528
|
+
const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A18(s.\u524D));
|
|
25529
|
+
const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A18(s.\u4ECA));
|
|
25564
25530
|
const \u5DE6\u5024\u5E45 = Math.max(0, ...\u5DE6\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
|
|
25565
25531
|
const \u53F3\u5024\u5E45 = Math.max(0, ...\u53F3\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
|
|
25566
25532
|
const \u540D\u524D\u306B\u4F7F\u3048\u308B = Math.max(
|
|
@@ -25602,7 +25568,7 @@ function ChartSlopeNode({
|
|
|
25602
25568
|
x2: x,
|
|
25603
25569
|
y2: \u4E0B\u7AEF + 6,
|
|
25604
25570
|
stroke: "var(--cdl-divider, #d4d4d8)",
|
|
25605
|
-
strokeWidth:
|
|
25571
|
+
strokeWidth: 2
|
|
25606
25572
|
},
|
|
25607
25573
|
`axis-${i}`
|
|
25608
25574
|
)),
|
|
@@ -25696,7 +25662,7 @@ function ChartSlopeNode({
|
|
|
25696
25662
|
y: \u5DE6y + 5,
|
|
25697
25663
|
textAnchor: "end",
|
|
25698
25664
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25699
|
-
fill:
|
|
25665
|
+
fill: s.\u8272,
|
|
25700
25666
|
children: s.\u540D\u524D
|
|
25701
25667
|
}
|
|
25702
25668
|
)
|
|
@@ -25708,7 +25674,7 @@ function ChartSlopeNode({
|
|
|
25708
25674
|
y: \u53F3y + 5,
|
|
25709
25675
|
textAnchor: "end",
|
|
25710
25676
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25711
|
-
fill:
|
|
25677
|
+
fill: s.\u8272,
|
|
25712
25678
|
children: s.\u540D\u524D
|
|
25713
25679
|
}
|
|
25714
25680
|
),
|
|
@@ -25732,7 +25698,7 @@ function ChartSlopeNode({
|
|
|
25732
25698
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
25733
25699
|
y: \u53F3y + 5,
|
|
25734
25700
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25735
|
-
fill:
|
|
25701
|
+
fill: s.\u8272,
|
|
25736
25702
|
children: s.\u540D\u524D
|
|
25737
25703
|
}
|
|
25738
25704
|
)
|