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