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