@cardenelabs/cdl 0.39.0 → 0.40.1
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 +44 -1
- package/SPEC.md +1 -0
- package/dist/index.cjs +67 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +67 -12
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +67 -12
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +1 -1
- package/dist/react.d.ts +1 -1
- package/dist/react.js +67 -12
- package/dist/react.js.map +1 -1
- package/dist/{render-B1ArenZ7.d.cts → render-UGswDfAh.d.cts} +1 -0
- package/dist/{render-B1ArenZ7.d.ts → render-UGswDfAh.d.ts} +1 -0
- package/package.json +1 -1
- package/src/kinds/chart-slope.tsx +100 -8
- package/src/kinds/chart-waffle.tsx +32 -2
- package/src/render/nodes.tsx +10 -2
- package/src/types.ts +1 -0
- package/src/validate.ts +2 -0
package/dist/react.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export { q as CdlDiagramView, m as CdlDiagramViewProps } from './render-
|
|
2
|
+
export { q as CdlDiagramView, m as CdlDiagramViewProps } from './render-UGswDfAh.cjs';
|
package/dist/react.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export { q as CdlDiagramView, m as CdlDiagramViewProps } from './render-
|
|
2
|
+
export { q as CdlDiagramView, m as CdlDiagramViewProps } from './render-UGswDfAh.js';
|
package/dist/react.js
CHANGED
|
@@ -9527,7 +9527,8 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
|
|
|
9527
9527
|
"funnel-stages",
|
|
9528
9528
|
"chart-gauge",
|
|
9529
9529
|
"chart-radial",
|
|
9530
|
-
"chart-stacked-bar"
|
|
9530
|
+
"chart-stacked-bar",
|
|
9531
|
+
"chart-waffle"
|
|
9531
9532
|
]);
|
|
9532
9533
|
var KINDS = new Set(NODE_KINDS);
|
|
9533
9534
|
var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
|
|
@@ -12761,7 +12762,9 @@ function \u5370\u306E\u5272\u4ED8(\u5024) {
|
|
|
12761
12762
|
function ChartWaffleNode({
|
|
12762
12763
|
node,
|
|
12763
12764
|
active,
|
|
12764
|
-
stateValues = {}
|
|
12765
|
+
stateValues = {},
|
|
12766
|
+
drawing = false,
|
|
12767
|
+
progress = 1
|
|
12765
12768
|
}) {
|
|
12766
12769
|
const x0 = node.cx - node.w / 2;
|
|
12767
12770
|
const y0 = node.cy - node.h / 2;
|
|
@@ -12790,6 +12793,7 @@ function ChartWaffleNode({
|
|
|
12790
12793
|
\u914D\u5206.forEach((n, idx) => {
|
|
12791
12794
|
for (let k = 0; k < n; k++) \u6301\u3061\u4E3B.push(idx);
|
|
12792
12795
|
});
|
|
12796
|
+
const \u57CB\u307E\u3063\u305F = Math.round(\u9032\u307F\u3092\u7573\u3080(drawing, progress) * WAFFLE_TOTAL);
|
|
12793
12797
|
const \u4E00\u89A7\u306E\u59CB\u307E\u308A = PAD + (\u4F7F\u3048\u308B\u9AD8\u3055 - \u884C\u306E\u9AD8\u3055 * data.length) / 2 + \u884C\u306E\u9AD8\u3055 / 2;
|
|
12794
12798
|
return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
12795
12799
|
/* @__PURE__ */ jsx(
|
|
@@ -12810,6 +12814,7 @@ function ChartWaffleNode({
|
|
|
12810
12814
|
const \u884C = Math.floor(k / WAFFLE_COLS);
|
|
12811
12815
|
const \u5217 = k % WAFFLE_COLS;
|
|
12812
12816
|
const owner = \u6301\u3061\u4E3B[k];
|
|
12817
|
+
const \u57CB\u307E\u3063\u3066\u3044\u308B = owner !== void 0 && k < \u57CB\u307E\u3063\u305F;
|
|
12813
12818
|
return /* @__PURE__ */ jsx(
|
|
12814
12819
|
"rect",
|
|
12815
12820
|
{
|
|
@@ -12820,8 +12825,8 @@ function ChartWaffleNode({
|
|
|
12820
12825
|
width: \u5370,
|
|
12821
12826
|
height: \u5370,
|
|
12822
12827
|
rx: 2,
|
|
12823
|
-
fill:
|
|
12824
|
-
fillOpacity:
|
|
12828
|
+
fill: \u57CB\u307E\u3063\u3066\u3044\u308B ? \u5370\u306E\u82722(data[owner].tone, owner) : "var(--cdl-divider, #d4d4d8)",
|
|
12829
|
+
fillOpacity: \u57CB\u307E\u3063\u3066\u3044\u308B ? 1 : 0.35
|
|
12825
12830
|
},
|
|
12826
12831
|
`cell-${k}`
|
|
12827
12832
|
);
|
|
@@ -13022,6 +13027,36 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
|
|
|
13022
13027
|
return out;
|
|
13023
13028
|
}
|
|
13024
13029
|
var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
|
|
13030
|
+
function \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u771F\u306Ey, \u9593\u9694, \u4E0A\u9650, \u4E0B\u9650) {
|
|
13031
|
+
const \u4EF6\u6570 = \u771F\u306Ey.length;
|
|
13032
|
+
if (\u4EF6\u6570 === 0) return [];
|
|
13033
|
+
const \u4E26\u3073 = \u771F\u306Ey.map((y, i) => ({ y, i })).sort((a, b) => a.y - b.y || a.i - b.i);
|
|
13034
|
+
const \u7D50\u679C = new Array(\u4EF6\u6570);
|
|
13035
|
+
if (\u9593\u9694 * (\u4EF6\u6570 - 1) > \u4E0B\u9650 - \u4E0A\u9650) {
|
|
13036
|
+
\u4E26\u3073.forEach((e, k) => {
|
|
13037
|
+
\u7D50\u679C[e.i] = \u4EF6\u6570 > 1 ? \u4E0A\u9650 + (\u4E0B\u9650 - \u4E0A\u9650) / (\u4EF6\u6570 - 1) * k : (\u4E0A\u9650 + \u4E0B\u9650) / 2;
|
|
13038
|
+
});
|
|
13039
|
+
return \u7D50\u679C;
|
|
13040
|
+
}
|
|
13041
|
+
const \u584A\u305F\u3061 = [];
|
|
13042
|
+
\u4E26\u3073.forEach((e, k) => {
|
|
13043
|
+
\u584A\u305F\u3061.push({ \u5408\u8A08: e.y - \u9593\u9694 * k, \u4EF6\u6570: 1 });
|
|
13044
|
+
while (\u584A\u305F\u3061.length >= 2) {
|
|
13045
|
+
const \u5F8C = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 1];
|
|
13046
|
+
const \u524D = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 2];
|
|
13047
|
+
if (\u524D.\u5408\u8A08 / \u524D.\u4EF6\u6570 <= \u5F8C.\u5408\u8A08 / \u5F8C.\u4EF6\u6570) break;
|
|
13048
|
+
\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 });
|
|
13049
|
+
}
|
|
13050
|
+
});
|
|
13051
|
+
const \u307B\u3069\u3044\u305F = [];
|
|
13052
|
+
\u584A\u305F\u3061.forEach((\u584A) => {
|
|
13053
|
+
const \u5E73\u5747 = \u584A.\u5408\u8A08 / \u584A.\u4EF6\u6570;
|
|
13054
|
+
for (let j = 0; j < \u584A.\u4EF6\u6570; j++) \u307B\u3069\u3044\u305F.push(\u5E73\u5747 + \u9593\u9694 * \u307B\u3069\u3044\u305F.length);
|
|
13055
|
+
});
|
|
13056
|
+
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);
|
|
13057
|
+
\u4E26\u3073.forEach((e, k) => \u7D50\u679C[e.i] = \u307B\u3069\u3044\u305F[k] + \u305A\u308C);
|
|
13058
|
+
return \u7D50\u679C;
|
|
13059
|
+
}
|
|
13025
13060
|
function ChartSlopeNode({
|
|
13026
13061
|
node,
|
|
13027
13062
|
active,
|
|
@@ -13087,6 +13122,15 @@ function ChartSlopeNode({
|
|
|
13087
13122
|
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;
|
|
13088
13123
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
13089
13124
|
const \u53F3\u3092\u51FA\u3059 = !drawing || \u4F38\u3073 >= 1;
|
|
13125
|
+
const \u5DE6\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
|
|
13126
|
+
(s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u524D\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u524D)
|
|
13127
|
+
);
|
|
13128
|
+
const \u53F3\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
|
|
13129
|
+
(s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u4ECA\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u4ECA)
|
|
13130
|
+
);
|
|
13131
|
+
const \u540D\u672D\u306E\u884C = Math.max(\u5024\u306E\u7D1A, \u540D\u524D\u306E\u7D1A) + 4;
|
|
13132
|
+
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;
|
|
13133
|
+
const \u53F3\u306E\u540D\u672Dy = \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u53F3\u306E\u70B9y, \u540D\u672D\u306E\u884C, \u4E0A\u7AEF, \u4E0B\u7AEF);
|
|
13090
13134
|
return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
13091
13135
|
/* @__PURE__ */ jsx(
|
|
13092
13136
|
"rect",
|
|
@@ -13144,8 +13188,10 @@ function ChartSlopeNode({
|
|
|
13144
13188
|
)
|
|
13145
13189
|
] }),
|
|
13146
13190
|
\u7CFB\u5217\u305F\u3061.map((s, i) => {
|
|
13147
|
-
const \u5DE6y = \
|
|
13148
|
-
const \u53F3y = \
|
|
13191
|
+
const \u5DE6y = \u5DE6\u306E\u70B9y[i];
|
|
13192
|
+
const \u53F3y = \u53F3\u306E\u70B9y[i];
|
|
13193
|
+
const \u5DE6\u672Dy = \u5DE6\u306E\u540D\u672Dy[i];
|
|
13194
|
+
const \u53F3\u672Dy = \u53F3\u306E\u540D\u672Dy[i];
|
|
13149
13195
|
const \u672A\u89E3\u6C7A = s.\u672A\u89E3\u6C7A ? "true" : void 0;
|
|
13150
13196
|
return /* @__PURE__ */ jsxs("g", { children: [
|
|
13151
13197
|
\u524D\u3042\u308A && /* @__PURE__ */ jsx(
|
|
@@ -13189,7 +13235,7 @@ function ChartSlopeNode({
|
|
|
13189
13235
|
{
|
|
13190
13236
|
"data-cdl-role": "chart-slope-value",
|
|
13191
13237
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
13192
|
-
y: \
|
|
13238
|
+
y: \u5DE6\u672Dy + 5,
|
|
13193
13239
|
textAnchor: "end",
|
|
13194
13240
|
fontSize: \u5024\u306E\u7D1A,
|
|
13195
13241
|
fontWeight: 600,
|
|
@@ -13202,7 +13248,7 @@ function ChartSlopeNode({
|
|
|
13202
13248
|
{
|
|
13203
13249
|
"data-cdl-role": "chart-slope-name",
|
|
13204
13250
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067 - \u5DE6\u5024\u5E45 - \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
13205
|
-
y: \
|
|
13251
|
+
y: \u5DE6\u672Dy + 5,
|
|
13206
13252
|
textAnchor: "end",
|
|
13207
13253
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
13208
13254
|
fill: s.\u8272,
|
|
@@ -13214,7 +13260,7 @@ function ChartSlopeNode({
|
|
|
13214
13260
|
{
|
|
13215
13261
|
"data-cdl-role": "chart-slope-name",
|
|
13216
13262
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
13217
|
-
y: \
|
|
13263
|
+
y: \u53F3\u672Dy + 5,
|
|
13218
13264
|
textAnchor: "end",
|
|
13219
13265
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
13220
13266
|
fill: s.\u8272,
|
|
@@ -13227,7 +13273,7 @@ function ChartSlopeNode({
|
|
|
13227
13273
|
{
|
|
13228
13274
|
"data-cdl-role": \u5F62 === "delta" ? "chart-slope-delta" : "chart-slope-value",
|
|
13229
13275
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
13230
|
-
y: \
|
|
13276
|
+
y: \u53F3\u672Dy + 5,
|
|
13231
13277
|
fontSize: \u5024\u306E\u7D1A,
|
|
13232
13278
|
fontWeight: 600,
|
|
13233
13279
|
fill: "var(--cdl-text, #1a1f2a)",
|
|
@@ -13239,7 +13285,7 @@ function ChartSlopeNode({
|
|
|
13239
13285
|
{
|
|
13240
13286
|
"data-cdl-role": "chart-slope-name",
|
|
13241
13287
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
13242
|
-
y: \
|
|
13288
|
+
y: \u53F3\u672Dy + 5,
|
|
13243
13289
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
13244
13290
|
fill: s.\u8272,
|
|
13245
13291
|
children: s.\u540D\u524D
|
|
@@ -17969,7 +18015,16 @@ function CdlNodeView({
|
|
|
17969
18015
|
}
|
|
17970
18016
|
);
|
|
17971
18017
|
case "chart-waffle":
|
|
17972
|
-
return /* @__PURE__ */ jsx(
|
|
18018
|
+
return /* @__PURE__ */ jsx(
|
|
18019
|
+
ChartWaffleNode,
|
|
18020
|
+
{
|
|
18021
|
+
node: resolvedNode,
|
|
18022
|
+
active,
|
|
18023
|
+
stateValues,
|
|
18024
|
+
drawing,
|
|
18025
|
+
progress
|
|
18026
|
+
}
|
|
18027
|
+
);
|
|
17973
18028
|
case "chart-stat":
|
|
17974
18029
|
return /* @__PURE__ */ jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
|
|
17975
18030
|
case "chart-radial":
|