@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/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-
|
|
2
|
-
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as ScrollProgressHandle, U as TONES, V as computeEventBindingKey, W as computeFormulaKey, X as computeInputSignalKey, Y as computeScrollTriggerKey, Z as computed, _ as createInteractiveSignalsAccessor, $ as createScrollProgressHandle, a0 as createScrollProgressSignals, a1 as hasInteractivePrimitives, a2 as sequenceBoardMetrics, a3 as sequenceStepId, a4 as signal } from './render-
|
|
1
|
+
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-UGswDfAh.cjs';
|
|
2
|
+
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as ScrollProgressHandle, U as TONES, V as computeEventBindingKey, W as computeFormulaKey, X as computeInputSignalKey, Y as computeScrollTriggerKey, Z as computed, _ as createInteractiveSignalsAccessor, $ as createScrollProgressHandle, a0 as createScrollProgressSignals, a1 as hasInteractivePrimitives, a2 as sequenceBoardMetrics, a3 as sequenceStepId, a4 as signal } from './render-UGswDfAh.cjs';
|
|
3
3
|
import { JSX } from 'react';
|
|
4
4
|
|
|
5
5
|
declare function effect(fn: () => void | (() => void)): () => void;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-
|
|
2
|
-
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as ScrollProgressHandle, U as TONES, V as computeEventBindingKey, W as computeFormulaKey, X as computeInputSignalKey, Y as computeScrollTriggerKey, Z as computed, _ as createInteractiveSignalsAccessor, $ as createScrollProgressHandle, a0 as createScrollProgressSignals, a1 as hasInteractivePrimitives, a2 as sequenceBoardMetrics, a3 as sequenceStepId, a4 as signal } from './render-
|
|
1
|
+
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-UGswDfAh.js';
|
|
2
|
+
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as ScrollProgressHandle, U as TONES, V as computeEventBindingKey, W as computeFormulaKey, X as computeInputSignalKey, Y as computeScrollTriggerKey, Z as computed, _ as createInteractiveSignalsAccessor, $ as createScrollProgressHandle, a0 as createScrollProgressSignals, a1 as hasInteractivePrimitives, a2 as sequenceBoardMetrics, a3 as sequenceStepId, a4 as signal } from './render-UGswDfAh.js';
|
|
3
3
|
import { JSX } from 'react';
|
|
4
4
|
|
|
5
5
|
declare function effect(fn: () => void | (() => void)): () => void;
|
package/dist/index.js
CHANGED
|
@@ -20809,7 +20809,8 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
|
|
|
20809
20809
|
"funnel-stages",
|
|
20810
20810
|
"chart-gauge",
|
|
20811
20811
|
"chart-radial",
|
|
20812
|
-
"chart-stacked-bar"
|
|
20812
|
+
"chart-stacked-bar",
|
|
20813
|
+
"chart-waffle"
|
|
20813
20814
|
]);
|
|
20814
20815
|
var KINDS = new Set(NODE_KINDS);
|
|
20815
20816
|
var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
|
|
@@ -25260,7 +25261,9 @@ function \u5370\u306E\u5272\u4ED8(\u5024) {
|
|
|
25260
25261
|
function ChartWaffleNode({
|
|
25261
25262
|
node,
|
|
25262
25263
|
active,
|
|
25263
|
-
stateValues = {}
|
|
25264
|
+
stateValues = {},
|
|
25265
|
+
drawing = false,
|
|
25266
|
+
progress = 1
|
|
25264
25267
|
}) {
|
|
25265
25268
|
const x0 = node.cx - node.w / 2;
|
|
25266
25269
|
const y0 = node.cy - node.h / 2;
|
|
@@ -25289,6 +25292,7 @@ function ChartWaffleNode({
|
|
|
25289
25292
|
\u914D\u5206.forEach((n, idx) => {
|
|
25290
25293
|
for (let k = 0; k < n; k++) \u6301\u3061\u4E3B.push(idx);
|
|
25291
25294
|
});
|
|
25295
|
+
const \u57CB\u307E\u3063\u305F = Math.round(\u9032\u307F\u3092\u7573\u3080(drawing, progress) * WAFFLE_TOTAL);
|
|
25292
25296
|
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;
|
|
25293
25297
|
return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
25294
25298
|
/* @__PURE__ */ jsx(
|
|
@@ -25309,6 +25313,7 @@ function ChartWaffleNode({
|
|
|
25309
25313
|
const \u884C = Math.floor(k / WAFFLE_COLS);
|
|
25310
25314
|
const \u5217 = k % WAFFLE_COLS;
|
|
25311
25315
|
const owner = \u6301\u3061\u4E3B[k];
|
|
25316
|
+
const \u57CB\u307E\u3063\u3066\u3044\u308B = owner !== void 0 && k < \u57CB\u307E\u3063\u305F;
|
|
25312
25317
|
return /* @__PURE__ */ jsx(
|
|
25313
25318
|
"rect",
|
|
25314
25319
|
{
|
|
@@ -25319,8 +25324,8 @@ function ChartWaffleNode({
|
|
|
25319
25324
|
width: \u5370,
|
|
25320
25325
|
height: \u5370,
|
|
25321
25326
|
rx: 2,
|
|
25322
|
-
fill:
|
|
25323
|
-
fillOpacity:
|
|
25327
|
+
fill: \u57CB\u307E\u3063\u3066\u3044\u308B ? \u5370\u306E\u82722(data[owner].tone, owner) : "var(--cdl-divider, #d4d4d8)",
|
|
25328
|
+
fillOpacity: \u57CB\u307E\u3063\u3066\u3044\u308B ? 1 : 0.35
|
|
25324
25329
|
},
|
|
25325
25330
|
`cell-${k}`
|
|
25326
25331
|
);
|
|
@@ -25521,6 +25526,36 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
|
|
|
25521
25526
|
return out;
|
|
25522
25527
|
}
|
|
25523
25528
|
var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
|
|
25529
|
+
function \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u771F\u306Ey, \u9593\u9694, \u4E0A\u9650, \u4E0B\u9650) {
|
|
25530
|
+
const \u4EF6\u6570 = \u771F\u306Ey.length;
|
|
25531
|
+
if (\u4EF6\u6570 === 0) return [];
|
|
25532
|
+
const \u4E26\u3073 = \u771F\u306Ey.map((y, i) => ({ y, i })).sort((a, b) => a.y - b.y || a.i - b.i);
|
|
25533
|
+
const \u7D50\u679C = new Array(\u4EF6\u6570);
|
|
25534
|
+
if (\u9593\u9694 * (\u4EF6\u6570 - 1) > \u4E0B\u9650 - \u4E0A\u9650) {
|
|
25535
|
+
\u4E26\u3073.forEach((e, k) => {
|
|
25536
|
+
\u7D50\u679C[e.i] = \u4EF6\u6570 > 1 ? \u4E0A\u9650 + (\u4E0B\u9650 - \u4E0A\u9650) / (\u4EF6\u6570 - 1) * k : (\u4E0A\u9650 + \u4E0B\u9650) / 2;
|
|
25537
|
+
});
|
|
25538
|
+
return \u7D50\u679C;
|
|
25539
|
+
}
|
|
25540
|
+
const \u584A\u305F\u3061 = [];
|
|
25541
|
+
\u4E26\u3073.forEach((e, k) => {
|
|
25542
|
+
\u584A\u305F\u3061.push({ \u5408\u8A08: e.y - \u9593\u9694 * k, \u4EF6\u6570: 1 });
|
|
25543
|
+
while (\u584A\u305F\u3061.length >= 2) {
|
|
25544
|
+
const \u5F8C = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 1];
|
|
25545
|
+
const \u524D = \u584A\u305F\u3061[\u584A\u305F\u3061.length - 2];
|
|
25546
|
+
if (\u524D.\u5408\u8A08 / \u524D.\u4EF6\u6570 <= \u5F8C.\u5408\u8A08 / \u5F8C.\u4EF6\u6570) break;
|
|
25547
|
+
\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 });
|
|
25548
|
+
}
|
|
25549
|
+
});
|
|
25550
|
+
const \u307B\u3069\u3044\u305F = [];
|
|
25551
|
+
\u584A\u305F\u3061.forEach((\u584A) => {
|
|
25552
|
+
const \u5E73\u5747 = \u584A.\u5408\u8A08 / \u584A.\u4EF6\u6570;
|
|
25553
|
+
for (let j = 0; j < \u584A.\u4EF6\u6570; j++) \u307B\u3069\u3044\u305F.push(\u5E73\u5747 + \u9593\u9694 * \u307B\u3069\u3044\u305F.length);
|
|
25554
|
+
});
|
|
25555
|
+
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);
|
|
25556
|
+
\u4E26\u3073.forEach((e, k) => \u7D50\u679C[e.i] = \u307B\u3069\u3044\u305F[k] + \u305A\u308C);
|
|
25557
|
+
return \u7D50\u679C;
|
|
25558
|
+
}
|
|
25524
25559
|
function ChartSlopeNode({
|
|
25525
25560
|
node,
|
|
25526
25561
|
active,
|
|
@@ -25586,6 +25621,15 @@ function ChartSlopeNode({
|
|
|
25586
25621
|
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;
|
|
25587
25622
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
25588
25623
|
const \u53F3\u3092\u51FA\u3059 = !drawing || \u4F38\u3073 >= 1;
|
|
25624
|
+
const \u5DE6\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
|
|
25625
|
+
(s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u524D\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u524D)
|
|
25626
|
+
);
|
|
25627
|
+
const \u53F3\u306E\u70B9y = \u7CFB\u5217\u305F\u3061.map(
|
|
25628
|
+
(s, i) => \u5F62 === "rank" ? \u6BB5\u306Ey\u3092\u53D6\u308B(\u4ECA\u306E\u9806\u4F4D[i]) : y\u3092\u53D6\u308B(s.\u4ECA)
|
|
25629
|
+
);
|
|
25630
|
+
const \u540D\u672D\u306E\u884C = Math.max(\u5024\u306E\u7D1A, \u540D\u524D\u306E\u7D1A) + 4;
|
|
25631
|
+
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;
|
|
25632
|
+
const \u53F3\u306E\u540D\u672Dy = \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u53F3\u306E\u70B9y, \u540D\u672D\u306E\u884C, \u4E0A\u7AEF, \u4E0B\u7AEF);
|
|
25589
25633
|
return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
25590
25634
|
/* @__PURE__ */ jsx(
|
|
25591
25635
|
"rect",
|
|
@@ -25643,8 +25687,10 @@ function ChartSlopeNode({
|
|
|
25643
25687
|
)
|
|
25644
25688
|
] }),
|
|
25645
25689
|
\u7CFB\u5217\u305F\u3061.map((s, i) => {
|
|
25646
|
-
const \u5DE6y = \
|
|
25647
|
-
const \u53F3y = \
|
|
25690
|
+
const \u5DE6y = \u5DE6\u306E\u70B9y[i];
|
|
25691
|
+
const \u53F3y = \u53F3\u306E\u70B9y[i];
|
|
25692
|
+
const \u5DE6\u672Dy = \u5DE6\u306E\u540D\u672Dy[i];
|
|
25693
|
+
const \u53F3\u672Dy = \u53F3\u306E\u540D\u672Dy[i];
|
|
25648
25694
|
const \u672A\u89E3\u6C7A = s.\u672A\u89E3\u6C7A ? "true" : void 0;
|
|
25649
25695
|
return /* @__PURE__ */ jsxs("g", { children: [
|
|
25650
25696
|
\u524D\u3042\u308A && /* @__PURE__ */ jsx(
|
|
@@ -25688,7 +25734,7 @@ function ChartSlopeNode({
|
|
|
25688
25734
|
{
|
|
25689
25735
|
"data-cdl-role": "chart-slope-value",
|
|
25690
25736
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
25691
|
-
y: \
|
|
25737
|
+
y: \u5DE6\u672Dy + 5,
|
|
25692
25738
|
textAnchor: "end",
|
|
25693
25739
|
fontSize: \u5024\u306E\u7D1A,
|
|
25694
25740
|
fontWeight: 600,
|
|
@@ -25701,7 +25747,7 @@ function ChartSlopeNode({
|
|
|
25701
25747
|
{
|
|
25702
25748
|
"data-cdl-role": "chart-slope-name",
|
|
25703
25749
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067 - \u5DE6\u5024\u5E45 - \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
25704
|
-
y: \
|
|
25750
|
+
y: \u5DE6\u672Dy + 5,
|
|
25705
25751
|
textAnchor: "end",
|
|
25706
25752
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25707
25753
|
fill: s.\u8272,
|
|
@@ -25713,7 +25759,7 @@ function ChartSlopeNode({
|
|
|
25713
25759
|
{
|
|
25714
25760
|
"data-cdl-role": "chart-slope-name",
|
|
25715
25761
|
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
25716
|
-
y: \
|
|
25762
|
+
y: \u53F3\u672Dy + 5,
|
|
25717
25763
|
textAnchor: "end",
|
|
25718
25764
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25719
25765
|
fill: s.\u8272,
|
|
@@ -25726,7 +25772,7 @@ function ChartSlopeNode({
|
|
|
25726
25772
|
{
|
|
25727
25773
|
"data-cdl-role": \u5F62 === "delta" ? "chart-slope-delta" : "chart-slope-value",
|
|
25728
25774
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
25729
|
-
y: \
|
|
25775
|
+
y: \u53F3\u672Dy + 5,
|
|
25730
25776
|
fontSize: \u5024\u306E\u7D1A,
|
|
25731
25777
|
fontWeight: 600,
|
|
25732
25778
|
fill: "var(--cdl-text, #1a1f2a)",
|
|
@@ -25738,7 +25784,7 @@ function ChartSlopeNode({
|
|
|
25738
25784
|
{
|
|
25739
25785
|
"data-cdl-role": "chart-slope-name",
|
|
25740
25786
|
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
25741
|
-
y: \
|
|
25787
|
+
y: \u53F3\u672Dy + 5,
|
|
25742
25788
|
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25743
25789
|
fill: s.\u8272,
|
|
25744
25790
|
children: s.\u540D\u524D
|
|
@@ -30468,7 +30514,16 @@ function CdlNodeView({
|
|
|
30468
30514
|
}
|
|
30469
30515
|
);
|
|
30470
30516
|
case "chart-waffle":
|
|
30471
|
-
return /* @__PURE__ */ jsx(
|
|
30517
|
+
return /* @__PURE__ */ jsx(
|
|
30518
|
+
ChartWaffleNode,
|
|
30519
|
+
{
|
|
30520
|
+
node: resolvedNode,
|
|
30521
|
+
active,
|
|
30522
|
+
stateValues,
|
|
30523
|
+
drawing,
|
|
30524
|
+
progress
|
|
30525
|
+
}
|
|
30526
|
+
);
|
|
30472
30527
|
case "chart-stat":
|
|
30473
30528
|
return /* @__PURE__ */ jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
|
|
30474
30529
|
case "chart-radial":
|