@cardenelabs/cdl 0.40.0 → 0.40.2
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 +45 -1
- package/dist/index.cjs +74 -11
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +74 -11
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +74 -11
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +74 -11
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/chart-pie.tsx +46 -4
- package/src/kinds/chart-slope.tsx +36 -8
- package/src/kinds/label-stack.ts +77 -0
package/dist/react.cjs
CHANGED
|
@@ -11859,6 +11859,38 @@ function interpolateColor(template, stateValues, fallback) {
|
|
|
11859
11859
|
if (!template) return fallback;
|
|
11860
11860
|
return interpolate(template, stateValues);
|
|
11861
11861
|
}
|
|
11862
|
+
|
|
11863
|
+
// src/kinds/label-stack.ts
|
|
11864
|
+
function \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u771F\u306Ey, \u9593\u9694, \u4E0A\u9650, \u4E0B\u9650) {
|
|
11865
|
+
const \u4EF6\u6570 = \u771F\u306Ey.length;
|
|
11866
|
+
if (\u4EF6\u6570 === 0) return [];
|
|
11867
|
+
const \u4E26\u3073 = \u771F\u306Ey.map((y, i) => ({ y, i })).sort((a, b) => a.y - b.y || a.i - b.i);
|
|
11868
|
+
const \u7D50\u679C = new Array(\u4EF6\u6570);
|
|
11869
|
+
if (\u9593\u9694 * (\u4EF6\u6570 - 1) > \u4E0B\u9650 - \u4E0A\u9650) {
|
|
11870
|
+
\u4E26\u3073.forEach((e, k) => {
|
|
11871
|
+
\u7D50\u679C[e.i] = \u4EF6\u6570 > 1 ? \u4E0A\u9650 + (\u4E0B\u9650 - \u4E0A\u9650) / (\u4EF6\u6570 - 1) * k : (\u4E0A\u9650 + \u4E0B\u9650) / 2;
|
|
11872
|
+
});
|
|
11873
|
+
return \u7D50\u679C;
|
|
11874
|
+
}
|
|
11875
|
+
const \u584A\u305F\u3061 = [];
|
|
11876
|
+
\u4E26\u3073.forEach((e, k) => {
|
|
11877
|
+
\u584A\u305F\u3061.push({ \u5408\u8A08: e.y - \u9593\u9694 * k, \u4EF6\u6570: 1 });
|
|
11878
|
+
while (\u584A\u305F\u3061.length >= 2) {
|
|
11879
|
+
const \u5F8C = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 1];
|
|
11880
|
+
const \u524D = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 2];
|
|
11881
|
+
if (\u524D.\u5408\u8A08 / \u524D.\u4EF6\u6570 <= \u5F8C.\u5408\u8A08 / \u5F8C.\u4EF6\u6570) break;
|
|
11882
|
+
\u584A\u305F\u3061.splice(\u584A\u305F\u3061.length - 2, 2, { \u5408\u8A08: \u524D.\u5408\u8A08 + \u5F8C.\u5408\u8A08, \u4EF6\u6570: \u524D.\u4EF6\u6570 + \u5F8C.\u4EF6\u6570 });
|
|
11883
|
+
}
|
|
11884
|
+
});
|
|
11885
|
+
const \u307B\u3069\u3044\u305F = [];
|
|
11886
|
+
\u584A\u305F\u3061.forEach((\u584A) => {
|
|
11887
|
+
const \u5E73\u5747 = \u584A.\u5408\u8A08 / \u584A.\u4EF6\u6570;
|
|
11888
|
+
for (let j = 0; j < \u584A.\u4EF6\u6570; j++) \u307B\u3069\u3044\u305F.push(\u5E73\u5747 + \u9593\u9694 * \u307B\u3069\u3044\u305F.length);
|
|
11889
|
+
});
|
|
11890
|
+
const \u305A\u308C = Math.max(0, \u4E0A\u9650 - \u307B\u3069\u3044\u305F[0]) - Math.max(0, \u307B\u3069\u3044\u305F[\u4EF6\u6570 - 1] - \u4E0B\u9650);
|
|
11891
|
+
\u4E26\u3073.forEach((e, k) => \u7D50\u679C[e.i] = \u307B\u3069\u3044\u305F[k] + \u305A\u308C);
|
|
11892
|
+
return \u7D50\u679C;
|
|
11893
|
+
}
|
|
11862
11894
|
function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D, \u8D77\u70B9 = -Math.PI / 2, \u5168\u5468 = Math.PI * 2) {
|
|
11863
11895
|
if (\u958B\u304D <= 0) return null;
|
|
11864
11896
|
if (\u958B\u304D >= 1 && \u5168\u5468 >= Math.PI * 2) return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r });
|
|
@@ -11939,6 +11971,26 @@ function ChartPieNode({
|
|
|
11939
11971
|
const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
|
|
11940
11972
|
const \u5F71id = `cdl-pie-shadow-${instanceId}`;
|
|
11941
11973
|
const \u958B\u304D\u59CB\u3081\u305F = (startFrac) => !drawing || \u958B\u304D > startFrac;
|
|
11974
|
+
const \u540D\u672D\u306E\u884C = \u5272\u5408\u306E\u7D1A + \u540D\u524D\u306E\u7D1A + 3;
|
|
11975
|
+
const \u540D\u672D\u306E\u5074 = slices.map((s) => Math.cos(s.\u4E2D\u592E\u89D2) >= 0);
|
|
11976
|
+
const \u540D\u672D\u306E\u771F\u306Ey = slices.map((s) => cy + (radius + \u5F15\u304D\u51FA\u3057) * Math.sin(s.\u4E2D\u592E\u89D2));
|
|
11977
|
+
const \u540D\u672D\u306Ey = (() => {
|
|
11978
|
+
const \u51FA\u3059 = [...\u540D\u672D\u306E\u771F\u306Ey];
|
|
11979
|
+
for (const \u5074 of [true, false]) {
|
|
11980
|
+
const \u756A\u53F7 = \u540D\u672D\u306E\u5074.flatMap((\u53F3, i) => \u53F3 === \u5074 ? [i] : []);
|
|
11981
|
+
if (\u756A\u53F7.length === 0) continue;
|
|
11982
|
+
const \u76F4\u3057\u305F = \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(
|
|
11983
|
+
\u756A\u53F7.map((i) => \u540D\u672D\u306E\u771F\u306Ey[i]),
|
|
11984
|
+
\u540D\u672D\u306E\u884C,
|
|
11985
|
+
PAD_TOP2 + \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057,
|
|
11986
|
+
node.h - PAD_BOTTOM2 - \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057
|
|
11987
|
+
);
|
|
11988
|
+
\u756A\u53F7.forEach((i, k) => \u51FA\u3059[i] = \u76F4\u3057\u305F[k]);
|
|
11989
|
+
}
|
|
11990
|
+
return \u51FA\u3059;
|
|
11991
|
+
})();
|
|
11992
|
+
const \u8098\u306Ex = (\u53F3) => cx + (\u53F3 ? 1 : -1) * (radius + \u5F15\u304D\u51FA\u3057);
|
|
11993
|
+
const \u5B57\u306Ex = (\u53F3) => \u8098\u306Ex(\u53F3) + (\u53F3 ? \u5B57\u307E\u3067\u306E\u9593 : -\u5B57\u307E\u3067\u306E\u9593);
|
|
11942
11994
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
11943
11995
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11944
11996
|
"rect",
|
|
@@ -12011,12 +12063,12 @@ function ChartPieNode({
|
|
|
12011
12063
|
),
|
|
12012
12064
|
slices.map((s, idx) => {
|
|
12013
12065
|
if (!\u958B\u304D\u59CB\u3081\u305F(s.startFrac)) return null;
|
|
12014
|
-
const \u53F3 =
|
|
12066
|
+
const \u53F3 = \u540D\u672D\u306E\u5074[idx];
|
|
12015
12067
|
const \u7E01x = cx + radius * Math.cos(s.\u4E2D\u592E\u89D2);
|
|
12016
12068
|
const \u7E01y = cy + radius * Math.sin(s.\u4E2D\u592E\u89D2);
|
|
12017
|
-
const \u6298\u308Cx =
|
|
12018
|
-
const \u6298\u308Cy =
|
|
12019
|
-
const \u5B57x = \
|
|
12069
|
+
const \u6298\u308Cx = \u8098\u306Ex(\u53F3);
|
|
12070
|
+
const \u6298\u308Cy = \u540D\u672D\u306Ey[idx];
|
|
12071
|
+
const \u5B57x = \u5B57\u306Ex(\u53F3);
|
|
12020
12072
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
12021
12073
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12022
12074
|
"path",
|
|
@@ -13094,6 +13146,15 @@ function ChartSlopeNode({
|
|
|
13094
13146
|
const \u53F3\u8EF8x = \u524D\u3042\u308A ? Math.min(node.w - PAD, Math.max(node.w - PAD - \u53F3\u306E\u4F59\u767D, node.w / 2 + \u7DDA\u306E\u6700\u5C0F\u5E45 / 2)) : \u5DE6\u8EF8x;
|
|
13095
13147
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
13096
13148
|
const \u53F3\u3092\u51FA\u3059 = !drawing || \u4F38\u3073 >= 1;
|
|
13149
|
+
const \u5DE6\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
|
|
13150
|
+
(s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u524D\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u524D)
|
|
13151
|
+
);
|
|
13152
|
+
const \u53F3\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
|
|
13153
|
+
(s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u4ECA\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u4ECA)
|
|
13154
|
+
);
|
|
13155
|
+
const \u540D\u672D\u306E\u884C = Math.max(\u5024\u306E\u7D1A, \u540D\u524D\u306E\u7D1A) + 4;
|
|
13156
|
+
const \u5DE6\u306E\u540D\u672Dy = \u524D\u3042\u308A ? \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u5DE6\u306E\u70B9y, \u540D\u672D\u306E\u884C, \u4E0A\u7AEF, \u4E0B\u7AEF) : \u5DE6\u306E\u70B9y;
|
|
13157
|
+
const \u53F3\u306E\u540D\u672Dy = \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u53F3\u306E\u70B9y, \u540D\u672D\u306E\u884C, \u4E0A\u7AEF, \u4E0B\u7AEF);
|
|
13097
13158
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
13098
13159
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13099
13160
|
"rect",
|
|
@@ -13151,8 +13212,10 @@ function ChartSlopeNode({
|
|
|
13151
13212
|
)
|
|
13152
13213
|
] }),
|
|
13153
13214
|
\u7CFB\u5217\u305F\u3061.map((s, i) => {
|
|
13154
|
-
const \u5DE6y = \
|
|
13155
|
-
const \u53F3y = \
|
|
13215
|
+
const \u5DE6y = \u5DE6\u306E\u70B9y[i];
|
|
13216
|
+
const \u53F3y = \u53F3\u306E\u70B9y[i];
|
|
13217
|
+
const \u5DE6\u672Dy = \u5DE6\u306E\u540D\u672Dy[i];
|
|
13218
|
+
const \u53F3\u672Dy = \u53F3\u306E\u540D\u672Dy[i];
|
|
13156
13219
|
const \u672A\u89E3\u6C7A = s.\u672A\u89E3\u6C7A ? "true" : void 0;
|
|
13157
13220
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
13158
13221
|
\u524D\u3042\u308A && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -13196,7 +13259,7 @@ function ChartSlopeNode({
|
|
|
13196
13259
|
{
|
|
13197
13260
|
"data-cdl-role": "chart-slope-value",
|
|
13198
13261
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
13199
|
-
y: \
|
|
13262
|
+
y: \u5DE6\u672Dy + 5,
|
|
13200
13263
|
textAnchor: "end",
|
|
13201
13264
|
fontSize: \u5024\u306E\u7D1A,
|
|
13202
13265
|
fontWeight: 600,
|
|
@@ -13209,7 +13272,7 @@ function ChartSlopeNode({
|
|
|
13209
13272
|
{
|
|
13210
13273
|
"data-cdl-role": "chart-slope-name",
|
|
13211
13274
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067 - \u5DE6\u5024\u5E45 - \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
13212
|
-
y: \
|
|
13275
|
+
y: \u5DE6\u672Dy + 5,
|
|
13213
13276
|
textAnchor: "end",
|
|
13214
13277
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
13215
13278
|
fill: s.\u8272,
|
|
@@ -13221,7 +13284,7 @@ function ChartSlopeNode({
|
|
|
13221
13284
|
{
|
|
13222
13285
|
"data-cdl-role": "chart-slope-name",
|
|
13223
13286
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
13224
|
-
y: \
|
|
13287
|
+
y: \u53F3\u672Dy + 5,
|
|
13225
13288
|
textAnchor: "end",
|
|
13226
13289
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
13227
13290
|
fill: s.\u8272,
|
|
@@ -13234,7 +13297,7 @@ function ChartSlopeNode({
|
|
|
13234
13297
|
{
|
|
13235
13298
|
"data-cdl-role": \u5F62 === "delta" ? "chart-slope-delta" : "chart-slope-value",
|
|
13236
13299
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
13237
|
-
y: \
|
|
13300
|
+
y: \u53F3\u672Dy + 5,
|
|
13238
13301
|
fontSize: \u5024\u306E\u7D1A,
|
|
13239
13302
|
fontWeight: 600,
|
|
13240
13303
|
fill: "var(--cdl-text, #1a1f2a)",
|
|
@@ -13246,7 +13309,7 @@ function ChartSlopeNode({
|
|
|
13246
13309
|
{
|
|
13247
13310
|
"data-cdl-role": "chart-slope-name",
|
|
13248
13311
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
13249
|
-
y: \
|
|
13312
|
+
y: \u53F3\u672Dy + 5,
|
|
13250
13313
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
13251
13314
|
fill: s.\u8272,
|
|
13252
13315
|
children: s.\u540D\u524D
|