@cardenelabs/cdl 0.33.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 +32 -1
- package/README.md +10 -3
- package/dist/index.cjs +28 -62
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +28 -62
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +28 -62
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +28 -62
- 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 +23 -9
- 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/react.cjs
CHANGED
|
@@ -11839,6 +11839,15 @@ function interpolateColor(template, stateValues, fallback) {
|
|
|
11839
11839
|
if (!template) return fallback;
|
|
11840
11840
|
return interpolate(template, stateValues);
|
|
11841
11841
|
}
|
|
11842
|
+
|
|
11843
|
+
// src/kinds/chart-number.ts
|
|
11844
|
+
function \u5B9F\u5024\u8868\u8A18(v) {
|
|
11845
|
+
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
11846
|
+
}
|
|
11847
|
+
function \u5272\u5408\u8868\u8A18(frac) {
|
|
11848
|
+
const v = Math.round(frac * 1e3) / 10;
|
|
11849
|
+
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
11850
|
+
}
|
|
11842
11851
|
function ChartPieNode({
|
|
11843
11852
|
node,
|
|
11844
11853
|
active,
|
|
@@ -12286,13 +12295,6 @@ function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
|
|
|
12286
12295
|
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`;
|
|
12287
12296
|
return /* @__PURE__ */ jsxRuntime.jsx("path", { d });
|
|
12288
12297
|
}
|
|
12289
|
-
function \u5B9F\u5024\u8868\u8A18(v) {
|
|
12290
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
12291
|
-
}
|
|
12292
|
-
function \u5272\u5408\u8868\u8A18(frac) {
|
|
12293
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
12294
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
12295
|
-
}
|
|
12296
12298
|
function sliceColor(tone, idx) {
|
|
12297
12299
|
if (tone) return TONE[tone];
|
|
12298
12300
|
return chartSeriesColor(idx);
|
|
@@ -12333,7 +12335,7 @@ function ChartGaugeNode({
|
|
|
12333
12335
|
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`;
|
|
12334
12336
|
return { d, frac, path };
|
|
12335
12337
|
});
|
|
12336
|
-
const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\
|
|
12338
|
+
const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
|
|
12337
12339
|
const \u6A2A\u306E\u4E0A\u9650 = \u5185\u534A\u5F84 * 2 * 0.86;
|
|
12338
12340
|
const \u7D1A\u306E\u5019\u88DC = Math.min(
|
|
12339
12341
|
// 横 = 実際の字幅から逆算する
|
|
@@ -12398,7 +12400,7 @@ function ChartGaugeNode({
|
|
|
12398
12400
|
),
|
|
12399
12401
|
data.map((d, idx) => {
|
|
12400
12402
|
const x = PAD_SIDE + \u5185\u8A33\u306E\u5E45 * idx;
|
|
12401
|
-
const \u6570\u5024 = `${\u5B9F\u5024\u8868\
|
|
12403
|
+
const \u6570\u5024 = `${\u5B9F\u5024\u8868\u8A18(d.value)} ${\u5272\u5408\u8868\u8A18(d.value / total)}`;
|
|
12402
12404
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
|
|
12403
12405
|
/* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: \u5185\u8A33\u306Ey, width: 30, height: 4, rx: 2, fill: arcColor(d.tone, idx) }),
|
|
12404
12406
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -12430,13 +12432,6 @@ function \u5207\u308A\u8A70\u3081\u308B(s, \u4E0A\u9650, \u7D1A) {
|
|
|
12430
12432
|
}
|
|
12431
12433
|
return `${out}\u2026`;
|
|
12432
12434
|
}
|
|
12433
|
-
function \u5B9F\u5024\u8868\u8A182(v) {
|
|
12434
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
12435
|
-
}
|
|
12436
|
-
function \u5272\u5408\u8868\u8A182(frac) {
|
|
12437
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
12438
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
12439
|
-
}
|
|
12440
12435
|
function arcColor(tone, idx) {
|
|
12441
12436
|
if (tone) return TONE[tone];
|
|
12442
12437
|
return chartSeriesColor(idx);
|
|
@@ -12456,7 +12451,7 @@ function ChartRadialNode({
|
|
|
12456
12451
|
const \u6570\u5024\u306E\u7D1A = 13;
|
|
12457
12452
|
const \u884C\u306E\u9AD8\u3055 = 42;
|
|
12458
12453
|
const \u4E00\u89A7\u3068\u5F27\u306E\u9593 = 28;
|
|
12459
|
-
const \u6570\u5024\u306E\u6587\u5B57 = data.map((d) => `${\u5B9F\u5024\u8868\
|
|
12454
|
+
const \u6570\u5024\u306E\u6587\u5B57 = data.map((d) => `${\u5B9F\u5024\u8868\u8A18(d.value)} ${\u5272\u5408\u8868\u8A18(d.value / total)}`);
|
|
12460
12455
|
const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E45 + Math.max(
|
|
12461
12456
|
0,
|
|
12462
12457
|
...data.map(
|
|
@@ -12559,13 +12554,6 @@ function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5
|
|
|
12559
12554
|
const p = (r, a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
|
|
12560
12555
|
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`;
|
|
12561
12556
|
}
|
|
12562
|
-
function \u5B9F\u5024\u8868\u8A183(v) {
|
|
12563
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
12564
|
-
}
|
|
12565
|
-
function \u5272\u5408\u8868\u8A183(frac) {
|
|
12566
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
12567
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
12568
|
-
}
|
|
12569
12557
|
function arcColor2(tone, idx) {
|
|
12570
12558
|
if (tone) return TONE[tone];
|
|
12571
12559
|
return chartSeriesColor(idx);
|
|
@@ -12599,7 +12587,7 @@ function ChartStatNode({
|
|
|
12599
12587
|
const \u67A02 = \u533A\u753B.\u67A0(idx);
|
|
12600
12588
|
const frac = total > 0 ? d.value / total : 0;
|
|
12601
12589
|
const \u8272 = \u5370\u306E\u8272(d.tone, idx);
|
|
12602
|
-
const \u6570\u5024 = \u5B9F\u5024\u8868\
|
|
12590
|
+
const \u6570\u5024 = \u5B9F\u5024\u8868\u8A18(d.value);
|
|
12603
12591
|
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);
|
|
12604
12592
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
|
|
12605
12593
|
idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -12674,7 +12662,7 @@ function ChartStatNode({
|
|
|
12674
12662
|
fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
|
|
12675
12663
|
textAnchor: "middle",
|
|
12676
12664
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
12677
|
-
children: \u5272\u5408\u8868\
|
|
12665
|
+
children: \u5272\u5408\u8868\u8A18(frac)
|
|
12678
12666
|
}
|
|
12679
12667
|
)
|
|
12680
12668
|
] }, `stat-${idx}`);
|
|
@@ -12721,13 +12709,6 @@ function \u5F27\u306E\u90533(cx, cy, r, \u5272\u5408) {
|
|
|
12721
12709
|
const p = (a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
|
|
12722
12710
|
return `M ${p(a0)} A ${r} ${r} 0 ${large} 1 ${p(a1)}`;
|
|
12723
12711
|
}
|
|
12724
|
-
function \u5B9F\u5024\u8868\u8A184(v) {
|
|
12725
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
12726
|
-
}
|
|
12727
|
-
function \u5272\u5408\u8868\u8A184(frac) {
|
|
12728
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
12729
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
12730
|
-
}
|
|
12731
12712
|
function \u5370\u306E\u8272(tone, idx) {
|
|
12732
12713
|
if (tone) return TONE[tone];
|
|
12733
12714
|
return chartSeriesColor(idx);
|
|
@@ -12763,7 +12744,7 @@ function ChartWaffleNode({
|
|
|
12763
12744
|
const \u884C\u306E\u9AD8\u3055 = 40;
|
|
12764
12745
|
const \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593 = 28;
|
|
12765
12746
|
const \u5370\u306E\u5E452 = 18;
|
|
12766
|
-
const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\
|
|
12747
|
+
const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A18(d.value)} ${\u914D\u5206[i] ?? 0}%`);
|
|
12767
12748
|
const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E452 + Math.max(
|
|
12768
12749
|
0,
|
|
12769
12750
|
...data.map(
|
|
@@ -12847,9 +12828,6 @@ function ChartWaffleNode({
|
|
|
12847
12828
|
})
|
|
12848
12829
|
] });
|
|
12849
12830
|
}
|
|
12850
|
-
function \u5B9F\u5024\u8868\u8A185(v) {
|
|
12851
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
12852
|
-
}
|
|
12853
12831
|
function \u5370\u306E\u82722(tone, idx) {
|
|
12854
12832
|
if (tone) return TONE[tone];
|
|
12855
12833
|
return chartSeriesColor(idx);
|
|
@@ -12936,7 +12914,7 @@ function ChartStackedBarNode({
|
|
|
12936
12914
|
fontWeight: 700,
|
|
12937
12915
|
textAnchor: "middle",
|
|
12938
12916
|
fill: "#ffffff",
|
|
12939
|
-
children: \u5272\u5408\u8868\
|
|
12917
|
+
children: \u5272\u5408\u8868\u8A18(s.\u5272\u5408)
|
|
12940
12918
|
}
|
|
12941
12919
|
),
|
|
12942
12920
|
w >= SLICE_MIN_W_FOR_VALUE && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -12949,7 +12927,7 @@ function ChartStackedBarNode({
|
|
|
12949
12927
|
textAnchor: "middle",
|
|
12950
12928
|
fill: "#ffffff",
|
|
12951
12929
|
fillOpacity: 0.85,
|
|
12952
|
-
children: \u5B9F\u5024\u8868\
|
|
12930
|
+
children: \u5B9F\u5024\u8868\u8A18(s.\u5B9F\u5024)
|
|
12953
12931
|
}
|
|
12954
12932
|
)
|
|
12955
12933
|
] }, `slice-${idx}`);
|
|
@@ -12994,13 +12972,6 @@ function \u5E2F\u3092\u7D44\u3080(\u540D\u524D, data, \u53D6\u308B) {
|
|
|
12994
12972
|
}))
|
|
12995
12973
|
};
|
|
12996
12974
|
}
|
|
12997
|
-
function \u5B9F\u5024\u8868\u8A186(v) {
|
|
12998
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
12999
|
-
}
|
|
13000
|
-
function \u5272\u5408\u8868\u8A185(frac) {
|
|
13001
|
-
const v = Math.round(frac * 1e3) / 10;
|
|
13002
|
-
return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
|
|
13003
|
-
}
|
|
13004
12975
|
function \u5370\u306E\u82723(tone, idx) {
|
|
13005
12976
|
if (tone) return TONE[tone];
|
|
13006
12977
|
return chartSeriesColor(idx);
|
|
@@ -13022,11 +12993,6 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
|
|
|
13022
12993
|
});
|
|
13023
12994
|
return out;
|
|
13024
12995
|
}
|
|
13025
|
-
|
|
13026
|
-
// src/kinds/chart-number.ts
|
|
13027
|
-
function \u5B9F\u5024\u8868\u8A187(v) {
|
|
13028
|
-
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
13029
|
-
}
|
|
13030
12996
|
var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
|
|
13031
12997
|
function ChartSlopeNode({
|
|
13032
12998
|
node,
|
|
@@ -13062,8 +13028,8 @@ function ChartSlopeNode({
|
|
|
13062
13028
|
const \u4E0A\u7AEF = PAD + (\u524D\u3042\u308A ? \u6642\u70B9\u306E\u7D1A + 12 : 0) + 6;
|
|
13063
13029
|
const \u4E0B\u7AEF = Math.max(\u4E0A\u7AEF + 10, node.h - PAD - 6);
|
|
13064
13030
|
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;
|
|
13065
|
-
const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\
|
|
13066
|
-
const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\
|
|
13031
|
+
const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A18(s.\u524D));
|
|
13032
|
+
const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A18(s.\u4ECA));
|
|
13067
13033
|
const \u5DE6\u5024\u5E45 = Math.max(0, ...\u5DE6\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
|
|
13068
13034
|
const \u53F3\u5024\u5E45 = Math.max(0, ...\u53F3\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
|
|
13069
13035
|
const \u540D\u524D\u306B\u4F7F\u3048\u308B = Math.max(
|
|
@@ -13105,7 +13071,7 @@ function ChartSlopeNode({
|
|
|
13105
13071
|
x2: x,
|
|
13106
13072
|
y2: \u4E0B\u7AEF + 6,
|
|
13107
13073
|
stroke: "var(--cdl-divider, #d4d4d8)",
|
|
13108
|
-
strokeWidth:
|
|
13074
|
+
strokeWidth: 2
|
|
13109
13075
|
},
|
|
13110
13076
|
`axis-${i}`
|
|
13111
13077
|
)),
|
|
@@ -13181,7 +13147,7 @@ function ChartSlopeNode({
|
|
|
13181
13147
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13182
13148
|
"text",
|
|
13183
13149
|
{
|
|
13184
|
-
"data-cdl-role": "chart-slope-
|
|
13150
|
+
"data-cdl-role": "chart-slope-value",
|
|
13185
13151
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
13186
13152
|
y: \u5DE6y + 5,
|
|
13187
13153
|
textAnchor: "end",
|
|
@@ -13194,24 +13160,24 @@ function ChartSlopeNode({
|
|
|
13194
13160
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13195
13161
|
"text",
|
|
13196
13162
|
{
|
|
13197
|
-
"data-cdl-role": "chart-slope-
|
|
13163
|
+
"data-cdl-role": "chart-slope-name",
|
|
13198
13164
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067 - \u5DE6\u5024\u5E45 - \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
13199
13165
|
y: \u5DE6y + 5,
|
|
13200
13166
|
textAnchor: "end",
|
|
13201
13167
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
13202
|
-
fill:
|
|
13168
|
+
fill: s.\u8272,
|
|
13203
13169
|
children: s.\u540D\u524D
|
|
13204
13170
|
}
|
|
13205
13171
|
)
|
|
13206
13172
|
] }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
13207
13173
|
"text",
|
|
13208
13174
|
{
|
|
13209
|
-
"data-cdl-role": "chart-slope-
|
|
13175
|
+
"data-cdl-role": "chart-slope-name",
|
|
13210
13176
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
13211
13177
|
y: \u53F3y + 5,
|
|
13212
13178
|
textAnchor: "end",
|
|
13213
13179
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
13214
|
-
fill:
|
|
13180
|
+
fill: s.\u8272,
|
|
13215
13181
|
children: s.\u540D\u524D
|
|
13216
13182
|
}
|
|
13217
13183
|
),
|
|
@@ -13219,7 +13185,7 @@ function ChartSlopeNode({
|
|
|
13219
13185
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13220
13186
|
"text",
|
|
13221
13187
|
{
|
|
13222
|
-
"data-cdl-role": "chart-slope-
|
|
13188
|
+
"data-cdl-role": "chart-slope-value",
|
|
13223
13189
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
13224
13190
|
y: \u53F3y + 5,
|
|
13225
13191
|
fontSize: \u5024\u306E\u7D1A,
|
|
@@ -13231,11 +13197,11 @@ function ChartSlopeNode({
|
|
|
13231
13197
|
\u524D\u3042\u308A && /* @__PURE__ */ jsxRuntime.jsx(
|
|
13232
13198
|
"text",
|
|
13233
13199
|
{
|
|
13234
|
-
"data-cdl-role": "chart-slope-
|
|
13200
|
+
"data-cdl-role": "chart-slope-name",
|
|
13235
13201
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
13236
13202
|
y: \u53F3y + 5,
|
|
13237
13203
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
13238
|
-
fill:
|
|
13204
|
+
fill: s.\u8272,
|
|
13239
13205
|
children: s.\u540D\u524D
|
|
13240
13206
|
}
|
|
13241
13207
|
)
|