vue-chrts 2.0.0-beta.5 → 2.1.0-beta-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/dist/components/AreaChart/AreaChart.js +116 -107
- package/dist/components/AreaChart/types.d.ts +1 -2
- package/dist/components/DagreGraph/DagreGraph.js +162 -0
- package/dist/components/DagreGraph/DagreGraph.vue.d.ts +33 -0
- package/dist/components/DagreGraph/DagreGraph2.js +4 -0
- package/dist/components/DagreGraph/types.d.ts +249 -0
- package/dist/components/DualChart/DualChart.js +206 -0
- package/dist/components/DualChart/DualChart.vue.d.ts +21 -0
- package/dist/components/DualChart/DualChart2.js +4 -0
- package/dist/components/DualChart/types.d.ts +186 -0
- package/dist/components/SankeyChart/SankeyChart.js +123 -0
- package/dist/components/SankeyChart/SankeyChart.vue.d.ts +22 -0
- package/dist/components/SankeyChart/SankeyChart2.js +4 -0
- package/dist/components/SankeyChart/types.d.ts +103 -0
- package/dist/index.d.ts +6 -3
- package/dist/index.js +25 -16
- package/dist/types.d.ts +13 -40
- package/dist/types.js +6 -4
- package/dist/utils.d.ts +3 -0
- package/dist/utils.js +35 -31
- package/package.json +9 -9
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { Position as
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import { VisXYContainer as
|
|
6
|
-
import { LegendPosition as
|
|
7
|
-
const
|
|
1
|
+
import { defineComponent as H, useSlots as I, useTemplateRef as K, ref as q, getCurrentInstance as J, computed as c, createElementBlock as f, openBlock as d, normalizeClass as Q, normalizeStyle as p, createVNode as u, createCommentVNode as m, createElementVNode as Z, unref as l, withCtx as _, createBlock as k, Fragment as T, renderList as ee, mergeProps as v, renderSlot as B } from "vue";
|
|
2
|
+
import { Position as D, CurveType as h } from "@unovis/ts";
|
|
3
|
+
import { createScopedMarkers as te } from "../../utils.js";
|
|
4
|
+
import ie from "../Tooltip.js";
|
|
5
|
+
import { VisXYContainer as ne, VisTooltip as ae, VisArea as O, VisLine as V, VisAxis as F, VisCrosshair as oe, VisBulletLegend as re } from "@unovis/vue";
|
|
6
|
+
import { LegendPosition as le } from "../../types.js";
|
|
7
|
+
const se = ["id"], ce = {
|
|
8
8
|
ref: "slotWrapper",
|
|
9
9
|
style: { display: "none" }
|
|
10
|
-
},
|
|
10
|
+
}, S = 0.5, C = "#3b82f6", ke = /* @__PURE__ */ H({
|
|
11
11
|
__name: "AreaChart",
|
|
12
12
|
props: {
|
|
13
13
|
data: {},
|
|
@@ -34,7 +34,7 @@ const ne = ["id"], oe = {
|
|
|
34
34
|
yNumTicks: {},
|
|
35
35
|
hideLegend: { type: Boolean, default: !1 },
|
|
36
36
|
hideTooltip: { type: Boolean },
|
|
37
|
-
legendPosition: { default:
|
|
37
|
+
legendPosition: { default: le.BottomCenter },
|
|
38
38
|
legendStyle: { default: void 0 },
|
|
39
39
|
xDomainLine: { type: Boolean },
|
|
40
40
|
yDomainLine: { type: Boolean },
|
|
@@ -54,128 +54,137 @@ const ne = ["id"], oe = {
|
|
|
54
54
|
stacked: { type: Boolean }
|
|
55
55
|
},
|
|
56
56
|
emits: ["click"],
|
|
57
|
-
setup(e, { emit:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
setup(e, { emit: j }) {
|
|
58
|
+
var b;
|
|
59
|
+
const G = j, a = e, N = I(), A = K("slotWrapper"), y = q(), L = `area-${((b = J()) == null ? void 0 : b.uid) ?? Math.random().toString(36).slice(2)}`, g = c(() => {
|
|
60
|
+
const t = Object.values(a.categories).map(
|
|
61
|
+
(o, n) => `var(--vis-color${n})`
|
|
61
62
|
);
|
|
62
|
-
return Object.values(
|
|
63
|
-
(
|
|
63
|
+
return Object.values(a.categories).map(
|
|
64
|
+
(o, n) => o.color ?? t[n]
|
|
64
65
|
);
|
|
65
|
-
}),
|
|
66
|
-
var
|
|
67
|
-
return (
|
|
68
|
-
}),
|
|
69
|
-
|
|
70
|
-
|
|
66
|
+
}), M = c(() => {
|
|
67
|
+
var t;
|
|
68
|
+
return (t = a.markerConfig) != null && t.config ? te(a.markerConfig, L) : "";
|
|
69
|
+
}), W = c(() => {
|
|
70
|
+
var o;
|
|
71
|
+
if (!((o = a.markerConfig) != null && o.config)) return {};
|
|
72
|
+
const t = {};
|
|
73
|
+
for (const n of Object.keys(a.markerConfig.config))
|
|
74
|
+
t[`--vis-marker-${n}`] = `url("#${a.markerConfig.id}--${L}--${n}")`;
|
|
75
|
+
return t;
|
|
76
|
+
}), P = c(() => a.legendPosition.startsWith("top")), w = c(() => a.legendPosition.includes("left") ? "flex-start" : a.legendPosition.includes("right") ? "flex-end" : "center"), X = c(() => {
|
|
77
|
+
const t = (n, i) => {
|
|
78
|
+
var r;
|
|
71
79
|
return `
|
|
72
|
-
<linearGradient id="gradient${
|
|
73
|
-
${((
|
|
74
|
-
(s) => `<stop offset="${s.offset}" stop-color="${
|
|
80
|
+
<linearGradient id="gradient${n}-${i}" gradientTransform="rotate(90)">
|
|
81
|
+
${((r = a.gradientStops) == null ? void 0 : r.map(
|
|
82
|
+
(s) => `<stop offset="${s.offset}" stop-color="${i}" stop-opacity="${s.stopOpacity}" />`
|
|
75
83
|
).join("")) ?? ""}
|
|
76
|
-
<stop offset="100%" stop-color="${
|
|
84
|
+
<stop offset="100%" stop-color="${i}" stop-opacity="0" />
|
|
77
85
|
</linearGradient>
|
|
78
86
|
`;
|
|
79
|
-
},
|
|
80
|
-
var
|
|
87
|
+
}, o = (n, i) => {
|
|
88
|
+
var r;
|
|
81
89
|
return `
|
|
82
|
-
<linearGradient id="gradient${
|
|
90
|
+
<linearGradient id="gradient${n}-${i}" gradientTransform="rotate(90)">
|
|
83
91
|
|
|
84
|
-
${((
|
|
92
|
+
${((r = a.gradientStops) == null ? void 0 : r.map(
|
|
85
93
|
(s) => `
|
|
86
|
-
<stop offset="${s.offset}" style="stop-color:var(${
|
|
94
|
+
<stop offset="${s.offset}" style="stop-color:var(${i});stop-opacity:${s.stopOpacity}" />
|
|
87
95
|
`
|
|
88
96
|
).join("")) ?? ""}
|
|
89
97
|
</linearGradient>
|
|
90
98
|
`;
|
|
91
99
|
};
|
|
92
100
|
return g.value.map(
|
|
93
|
-
(
|
|
101
|
+
(n, i) => n != null && n.includes("#") ? t(i, n) : o(i, n ?? C)
|
|
94
102
|
).join("");
|
|
95
103
|
});
|
|
96
|
-
function
|
|
97
|
-
var
|
|
104
|
+
function E(t) {
|
|
105
|
+
var o;
|
|
98
106
|
return {
|
|
99
|
-
y: (
|
|
100
|
-
color: ((
|
|
107
|
+
y: (n) => Number(n[t]),
|
|
108
|
+
color: ((o = a.categories[t]) == null ? void 0 : o.color) ?? C
|
|
101
109
|
};
|
|
102
110
|
}
|
|
103
|
-
const
|
|
104
|
-
(
|
|
105
|
-
)),
|
|
106
|
-
const
|
|
107
|
-
return
|
|
108
|
-
let
|
|
109
|
-
for (let s = 0; s <=
|
|
110
|
-
|
|
111
|
-
return
|
|
111
|
+
const Y = c(() => Object.keys(a.categories).map(
|
|
112
|
+
(t) => (o) => Number(o[t])
|
|
113
|
+
)), z = c(() => {
|
|
114
|
+
const t = Object.keys(a.categories);
|
|
115
|
+
return t.map((o, n) => (i) => {
|
|
116
|
+
let r = 0;
|
|
117
|
+
for (let s = 0; s <= n; s++)
|
|
118
|
+
r += Number(i[t[s]]) || 0;
|
|
119
|
+
return r;
|
|
112
120
|
});
|
|
113
|
-
}),
|
|
114
|
-
function
|
|
115
|
-
return typeof window > "u" ? "" :
|
|
121
|
+
}), $ = c(() => (t, o) => g.value[o] ?? C);
|
|
122
|
+
function R(t) {
|
|
123
|
+
return typeof window > "u" ? "" : A.value ? A.value.innerHTML : "";
|
|
116
124
|
}
|
|
117
|
-
function
|
|
118
|
-
return
|
|
125
|
+
function U(t) {
|
|
126
|
+
return y.value = t, R();
|
|
119
127
|
}
|
|
120
|
-
return (
|
|
121
|
-
var
|
|
122
|
-
return
|
|
128
|
+
return (t, o) => {
|
|
129
|
+
var n;
|
|
130
|
+
return d(), f("div", {
|
|
123
131
|
style: p({
|
|
124
132
|
display: "flex",
|
|
125
|
-
flexDirection:
|
|
126
|
-
gap: "var(--vis-legend-spacing)"
|
|
133
|
+
flexDirection: P.value ? "column-reverse" : "column",
|
|
134
|
+
gap: "var(--vis-legend-spacing)",
|
|
135
|
+
...W.value
|
|
127
136
|
}),
|
|
128
|
-
class:
|
|
129
|
-
id: (
|
|
130
|
-
onClick:
|
|
137
|
+
class: Q({ "stacked-area-chart": e.stacked }),
|
|
138
|
+
id: (n = e.markerConfig) == null ? void 0 : n.id,
|
|
139
|
+
onClick: o[0] || (o[0] = (i) => G("click", i, y.value))
|
|
131
140
|
}, [
|
|
132
|
-
u(
|
|
141
|
+
u(l(ne), {
|
|
133
142
|
data: e.data,
|
|
134
143
|
height: e.height,
|
|
135
144
|
padding: e.padding,
|
|
136
|
-
"svg-defs":
|
|
145
|
+
"svg-defs": X.value + M.value,
|
|
137
146
|
"y-domain": e.yDomain,
|
|
138
147
|
"x-domain": e.xDomain
|
|
139
148
|
}, {
|
|
140
|
-
default:
|
|
141
|
-
e.hideTooltip ?
|
|
149
|
+
default: _(() => [
|
|
150
|
+
e.hideTooltip ? m("", !0) : (d(), k(l(ae), {
|
|
142
151
|
key: 0,
|
|
143
|
-
"horizontal-placement":
|
|
144
|
-
"vertical-placement":
|
|
152
|
+
"horizontal-placement": l(D).Right,
|
|
153
|
+
"vertical-placement": l(D).Top
|
|
145
154
|
}, null, 8, ["horizontal-placement", "vertical-placement"])),
|
|
146
|
-
e.stacked ? (
|
|
147
|
-
u(
|
|
148
|
-
x: (
|
|
149
|
-
y:
|
|
150
|
-
color:
|
|
151
|
-
opacity: e.hideArea ? 0 :
|
|
152
|
-
"curve-type": e.curveType ??
|
|
155
|
+
e.stacked ? (d(), f(T, { key: 1 }, [
|
|
156
|
+
u(l(O), {
|
|
157
|
+
x: (i, r) => r,
|
|
158
|
+
y: Y.value,
|
|
159
|
+
color: $.value,
|
|
160
|
+
opacity: e.hideArea ? 0 : S,
|
|
161
|
+
"curve-type": e.curveType ?? l(h).MonotoneX
|
|
153
162
|
}, null, 8, ["x", "y", "color", "opacity", "curve-type"]),
|
|
154
|
-
u(
|
|
155
|
-
x: (
|
|
156
|
-
y:
|
|
157
|
-
color:
|
|
158
|
-
"curve-type": e.curveType ??
|
|
163
|
+
u(l(V), {
|
|
164
|
+
x: (i, r) => r,
|
|
165
|
+
y: z.value,
|
|
166
|
+
color: $.value,
|
|
167
|
+
"curve-type": e.curveType ?? l(h).MonotoneX,
|
|
159
168
|
"line-width": e.lineWidth
|
|
160
169
|
}, null, 8, ["x", "y", "color", "curve-type", "line-width"])
|
|
161
|
-
], 64)) : (
|
|
162
|
-
u(
|
|
170
|
+
], 64)) : (d(!0), f(T, { key: 2 }, ee(Object.keys(a.categories), (i, r) => (d(), f(T, { key: i }, [
|
|
171
|
+
u(l(O), v({
|
|
163
172
|
x: (s, x) => x
|
|
164
|
-
}, { ref_for: !0 },
|
|
165
|
-
color: `url(#gradient${
|
|
166
|
-
opacity: e.hideArea ? 0 :
|
|
167
|
-
"curve-type": e.curveType ??
|
|
173
|
+
}, { ref_for: !0 }, E(i), {
|
|
174
|
+
color: `url(#gradient${r}-${g.value[r]})`,
|
|
175
|
+
opacity: e.hideArea ? 0 : S,
|
|
176
|
+
"curve-type": e.curveType ?? l(h).MonotoneX
|
|
168
177
|
}), null, 16, ["x", "color", "opacity", "curve-type"]),
|
|
169
|
-
u(
|
|
178
|
+
u(l(V), {
|
|
170
179
|
x: (s, x) => x,
|
|
171
|
-
y: (s) => s[
|
|
172
|
-
color: g.value[
|
|
173
|
-
"curve-type": e.curveType ??
|
|
180
|
+
y: (s) => s[i],
|
|
181
|
+
color: g.value[r],
|
|
182
|
+
"curve-type": e.curveType ?? l(h).MonotoneX,
|
|
174
183
|
"line-width": e.lineWidth,
|
|
175
|
-
lineDashArray: e.lineDashArray ? e.lineDashArray[
|
|
184
|
+
lineDashArray: e.lineDashArray ? e.lineDashArray[r] : void 0
|
|
176
185
|
}, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
|
|
177
186
|
], 64))), 128)),
|
|
178
|
-
e.hideXAxis ?
|
|
187
|
+
e.hideXAxis ? m("", !0) : (d(), k(l(F), v({
|
|
179
188
|
key: 3,
|
|
180
189
|
type: "x",
|
|
181
190
|
label: e.xLabel,
|
|
@@ -188,7 +197,7 @@ const ne = ["id"], oe = {
|
|
|
188
197
|
"tick-line": e.xTickLine,
|
|
189
198
|
"min-max-ticks-only": e.minMaxTicksOnly
|
|
190
199
|
}, e.xAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
|
|
191
|
-
e.hideYAxis ?
|
|
200
|
+
e.hideYAxis ? m("", !0) : (d(), k(l(F), v({
|
|
192
201
|
key: 4,
|
|
193
202
|
type: "y",
|
|
194
203
|
label: e.yLabel,
|
|
@@ -198,45 +207,45 @@ const ne = ["id"], oe = {
|
|
|
198
207
|
"domain-line": e.yDomainLine,
|
|
199
208
|
"tick-line": e.yTickLine
|
|
200
209
|
}, e.yAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
|
|
201
|
-
e.hideTooltip ?
|
|
210
|
+
e.hideTooltip ? m("", !0) : (d(), k(l(oe), v({ key: 5 }, e.crosshairConfig, { template: U }), null, 16))
|
|
202
211
|
]),
|
|
203
212
|
_: 1
|
|
204
213
|
}, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
|
|
205
|
-
|
|
214
|
+
a.hideLegend ? m("", !0) : (d(), f("div", {
|
|
206
215
|
key: 0,
|
|
207
216
|
style: p({
|
|
208
217
|
display: "flex",
|
|
209
|
-
justifyContent:
|
|
218
|
+
justifyContent: w.value
|
|
210
219
|
})
|
|
211
220
|
}, [
|
|
212
|
-
u(
|
|
221
|
+
u(l(re), {
|
|
213
222
|
style: p([
|
|
214
|
-
|
|
223
|
+
a.legendStyle,
|
|
215
224
|
"display: flex; gap: var(--vis-legend-spacing);"
|
|
216
225
|
]),
|
|
217
|
-
items: Object.values(
|
|
218
|
-
...
|
|
219
|
-
color: Array.isArray(
|
|
226
|
+
items: Object.values(a.categories).map((i) => ({
|
|
227
|
+
...i,
|
|
228
|
+
color: Array.isArray(i.color) ? i.color[0] : i.color
|
|
220
229
|
}))
|
|
221
230
|
}, null, 8, ["style", "items"])
|
|
222
231
|
], 4)),
|
|
223
|
-
|
|
224
|
-
|
|
232
|
+
Z("div", ce, [
|
|
233
|
+
l(N).tooltip ? B(t.$slots, "tooltip", {
|
|
225
234
|
key: 0,
|
|
226
|
-
values:
|
|
227
|
-
}) :
|
|
228
|
-
u(
|
|
229
|
-
data:
|
|
235
|
+
values: y.value
|
|
236
|
+
}) : y.value ? B(t.$slots, "fallback", { key: 1 }, () => [
|
|
237
|
+
u(ie, {
|
|
238
|
+
data: y.value,
|
|
230
239
|
categories: e.categories,
|
|
231
|
-
"title-formatter":
|
|
232
|
-
yFormatter:
|
|
240
|
+
"title-formatter": a.tooltipTitleFormatter,
|
|
241
|
+
yFormatter: a.yFormatter
|
|
233
242
|
}, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
|
|
234
|
-
]) :
|
|
243
|
+
]) : m("", !0)
|
|
235
244
|
], 512)
|
|
236
|
-
], 14,
|
|
245
|
+
], 14, se);
|
|
237
246
|
};
|
|
238
247
|
}
|
|
239
248
|
});
|
|
240
249
|
export {
|
|
241
|
-
|
|
250
|
+
ke as default
|
|
242
251
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig, AxisConfig } from '../../types';
|
|
2
|
-
import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
|
|
1
|
+
import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig, AxisConfig, BulletLegendItemInterface, CurveType } from '../../types';
|
|
3
2
|
export interface AreaChartProps<T> {
|
|
4
3
|
/**
|
|
5
4
|
* The data to be displayed in the area chart.
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import { defineComponent as D, useSlots as M, useTemplateRef as N, ref as V, computed as l, createElementBlock as c, openBlock as u, normalizeStyle as f, createVNode as k, createCommentVNode as s, createElementVNode as g, unref as a, withCtx as P, createBlock as G, renderSlot as h, toDisplayString as m } from "vue";
|
|
2
|
+
import { VisSingleContainer as I, VisTooltip as Z, VisGraph as $, VisBulletLegend as j } from "@unovis/vue";
|
|
3
|
+
import { Graph as S, GraphLayoutType as R } from "@unovis/ts";
|
|
4
|
+
import { LegendPosition as q } from "../../types.js";
|
|
5
|
+
const H = {
|
|
6
|
+
ref: "slotWrapper",
|
|
7
|
+
style: { display: "none" }
|
|
8
|
+
}, J = { class: "dagre-tooltip" }, K = { class: "font-semibold" }, O = {
|
|
9
|
+
key: 0,
|
|
10
|
+
class: "text-sm text-gray-500"
|
|
11
|
+
}, _ = /* @__PURE__ */ D({
|
|
12
|
+
__name: "DagreGraph",
|
|
13
|
+
props: {
|
|
14
|
+
data: {},
|
|
15
|
+
height: { default: 600 },
|
|
16
|
+
width: { default: void 0 },
|
|
17
|
+
dagreLayoutSettings: { default: () => ({
|
|
18
|
+
rankdir: "TB",
|
|
19
|
+
nodesep: 50,
|
|
20
|
+
ranksep: 100,
|
|
21
|
+
ranker: "network-simplex",
|
|
22
|
+
marginx: 20,
|
|
23
|
+
marginy: 20
|
|
24
|
+
}) },
|
|
25
|
+
nodeSize: { type: [Number, Function], default: 40 },
|
|
26
|
+
nodeLabel: {},
|
|
27
|
+
nodeShape: { type: [String, Function], default: "circle" },
|
|
28
|
+
nodeFill: { type: [String, Function], default: "#3b82f6" },
|
|
29
|
+
nodeStroke: { type: [String, Function], default: "#1e40af" },
|
|
30
|
+
nodeStrokeWidth: { type: [Number, Function], default: 2 },
|
|
31
|
+
linkArrow: { default: "end" },
|
|
32
|
+
linkLabel: {},
|
|
33
|
+
linkStroke: { type: [String, Function], default: "#9ca3af" },
|
|
34
|
+
linkWidth: { type: [Number, Function], default: 2 },
|
|
35
|
+
linkCurvature: { default: 0 },
|
|
36
|
+
padding: { default: () => ({ top: 20, right: 20, bottom: 20, left: 20 }) },
|
|
37
|
+
hideTooltip: { type: Boolean, default: !1 },
|
|
38
|
+
zoomEnabled: { type: Boolean, default: !0 },
|
|
39
|
+
zoomScaleExtent: { default: () => [0.1, 10] },
|
|
40
|
+
nodeDraggingEnabled: { type: Boolean, default: !1 },
|
|
41
|
+
hideLegend: { type: Boolean, default: !0 },
|
|
42
|
+
legendPosition: { default: q.BottomCenter },
|
|
43
|
+
legendStyle: { default: void 0 },
|
|
44
|
+
legendItems: { default: () => [] },
|
|
45
|
+
tooltipTitleFormatter: {},
|
|
46
|
+
tooltipContentFormatter: {},
|
|
47
|
+
duration: { default: 600 }
|
|
48
|
+
},
|
|
49
|
+
emits: ["nodeClick", "nodeMouseover", "nodeMouseout", "linkClick", "linkMouseover", "linkMouseout"],
|
|
50
|
+
setup(t, { emit: y }) {
|
|
51
|
+
const e = t, r = y, v = M();
|
|
52
|
+
N("slotWrapper");
|
|
53
|
+
const i = V(), p = l(() => typeof e.nodeSize == "function" ? e.nodeSize : () => e.nodeSize), b = l(() => e.nodeLabel ? e.nodeLabel : (o) => o.label || o.id), L = l(() => typeof e.nodeShape == "function" ? e.nodeShape : () => e.nodeShape), F = l(() => typeof e.nodeFill == "function" ? e.nodeFill : () => e.nodeFill), C = l(() => typeof e.nodeStroke == "function" ? e.nodeStroke : () => e.nodeStroke), A = l(() => typeof e.nodeStrokeWidth == "function" ? e.nodeStrokeWidth : () => e.nodeStrokeWidth), W = l(() => e.linkLabel ? e.linkLabel : (o) => o.label || ""), x = l(() => typeof e.linkStroke == "function" ? e.linkStroke : () => e.linkStroke), z = l(() => typeof e.linkWidth == "function" ? e.linkWidth : () => e.linkWidth), w = l(() => {
|
|
54
|
+
switch (e.linkArrow) {
|
|
55
|
+
case "start":
|
|
56
|
+
return "start";
|
|
57
|
+
case "end":
|
|
58
|
+
return "end";
|
|
59
|
+
case "both":
|
|
60
|
+
return "both";
|
|
61
|
+
case "none":
|
|
62
|
+
return;
|
|
63
|
+
default:
|
|
64
|
+
return "end";
|
|
65
|
+
}
|
|
66
|
+
}), T = l(() => e.legendPosition.startsWith("top")), B = l(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center"), E = {
|
|
67
|
+
[S.selectors.node]: {
|
|
68
|
+
click: (o, n) => {
|
|
69
|
+
r("nodeClick", o, n);
|
|
70
|
+
},
|
|
71
|
+
mouseover: (o, n) => {
|
|
72
|
+
i.value = o, r("nodeMouseover", o, n);
|
|
73
|
+
},
|
|
74
|
+
mouseout: (o, n) => {
|
|
75
|
+
i.value = void 0, r("nodeMouseout", o, n);
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
[S.selectors.link]: {
|
|
79
|
+
click: (o, n) => {
|
|
80
|
+
r("linkClick", o, n);
|
|
81
|
+
},
|
|
82
|
+
mouseover: (o, n) => {
|
|
83
|
+
r("linkMouseover", o, n);
|
|
84
|
+
},
|
|
85
|
+
mouseout: (o, n) => {
|
|
86
|
+
r("linkMouseout", o, n);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
return (o, n) => (u(), c("div", {
|
|
91
|
+
style: f({
|
|
92
|
+
display: "flex",
|
|
93
|
+
flexDirection: T.value ? "column-reverse" : "column",
|
|
94
|
+
gap: "var(--vis-legend-spacing)"
|
|
95
|
+
}),
|
|
96
|
+
class: "dagre-graph-container"
|
|
97
|
+
}, [
|
|
98
|
+
k(a(I), {
|
|
99
|
+
data: t.data,
|
|
100
|
+
height: t.height,
|
|
101
|
+
width: t.width,
|
|
102
|
+
padding: t.padding
|
|
103
|
+
}, {
|
|
104
|
+
default: P(() => [
|
|
105
|
+
t.hideTooltip ? s("", !0) : (u(), G(a(Z), { key: 0 })),
|
|
106
|
+
k(a($), {
|
|
107
|
+
layoutType: a(R).Dagre,
|
|
108
|
+
dagreLayoutSettings: t.dagreLayoutSettings,
|
|
109
|
+
nodeSize: p.value,
|
|
110
|
+
nodeLabel: b.value,
|
|
111
|
+
nodeShape: L.value,
|
|
112
|
+
nodeFill: F.value,
|
|
113
|
+
nodeStroke: C.value,
|
|
114
|
+
nodeStrokeWidth: A.value,
|
|
115
|
+
linkArrow: w.value,
|
|
116
|
+
linkLabel: W.value,
|
|
117
|
+
linkStroke: x.value,
|
|
118
|
+
linkWidth: z.value,
|
|
119
|
+
linkCurvature: t.linkCurvature,
|
|
120
|
+
zoomScaleExtent: t.zoomScaleExtent,
|
|
121
|
+
disableZoom: !t.zoomEnabled,
|
|
122
|
+
disableDrag: !t.nodeDraggingEnabled,
|
|
123
|
+
events: E
|
|
124
|
+
}, null, 8, ["layoutType", "dagreLayoutSettings", "nodeSize", "nodeLabel", "nodeShape", "nodeFill", "nodeStroke", "nodeStrokeWidth", "linkArrow", "linkLabel", "linkStroke", "linkWidth", "linkCurvature", "zoomScaleExtent", "disableZoom", "disableDrag"])
|
|
125
|
+
]),
|
|
126
|
+
_: 1
|
|
127
|
+
}, 8, ["data", "height", "width", "padding"]),
|
|
128
|
+
!t.hideLegend && t.legendItems && t.legendItems.length > 0 ? (u(), c("div", {
|
|
129
|
+
key: 0,
|
|
130
|
+
style: f({
|
|
131
|
+
display: "flex",
|
|
132
|
+
justifyContent: B.value
|
|
133
|
+
})
|
|
134
|
+
}, [
|
|
135
|
+
k(a(j), {
|
|
136
|
+
style: f([
|
|
137
|
+
t.legendStyle,
|
|
138
|
+
"display: flex; gap: var(--vis-legend-spacing);"
|
|
139
|
+
]),
|
|
140
|
+
items: t.legendItems.map((d) => ({
|
|
141
|
+
...d,
|
|
142
|
+
color: Array.isArray(d.color) ? d.color[0] : d.color
|
|
143
|
+
}))
|
|
144
|
+
}, null, 8, ["style", "items"])
|
|
145
|
+
], 4)) : s("", !0),
|
|
146
|
+
g("div", H, [
|
|
147
|
+
a(v).tooltip ? h(o.$slots, "tooltip", {
|
|
148
|
+
key: 0,
|
|
149
|
+
node: i.value
|
|
150
|
+
}) : i.value ? h(o.$slots, "fallback", { key: 1 }, () => [
|
|
151
|
+
g("div", J, [
|
|
152
|
+
g("div", K, m(t.tooltipTitleFormatter ? t.tooltipTitleFormatter(i.value) : i.value.label || i.value.id), 1),
|
|
153
|
+
t.tooltipContentFormatter ? (u(), c("div", O, m(t.tooltipContentFormatter(i.value)), 1)) : s("", !0)
|
|
154
|
+
])
|
|
155
|
+
]) : s("", !0)
|
|
156
|
+
], 512)
|
|
157
|
+
], 4));
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
export {
|
|
161
|
+
_ as default
|
|
162
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { DagreGraphProps, GraphNodeDatum, GraphLinkDatum } from './types';
|
|
2
|
+
declare const _default: <N extends GraphNodeDatum = GraphNodeDatum, L extends GraphLinkDatum = GraphLinkDatum>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
+
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
|
|
4
|
+
readonly onNodeClick?: ((node: N, event?: MouseEvent | undefined) => any) | undefined;
|
|
5
|
+
readonly onNodeMouseover?: ((node: N, event?: MouseEvent | undefined) => any) | undefined;
|
|
6
|
+
readonly onNodeMouseout?: ((node: N, event?: MouseEvent | undefined) => any) | undefined;
|
|
7
|
+
readonly onLinkClick?: ((link: L, event?: MouseEvent | undefined) => any) | undefined;
|
|
8
|
+
readonly onLinkMouseover?: ((link: L, event?: MouseEvent | undefined) => any) | undefined;
|
|
9
|
+
readonly onLinkMouseout?: ((link: L, event?: MouseEvent | undefined) => any) | undefined;
|
|
10
|
+
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onNodeClick" | "onNodeMouseover" | "onNodeMouseout" | "onLinkClick" | "onLinkMouseover" | "onLinkMouseout"> & DagreGraphProps<N, L> & Partial<{}>> & import('vue').PublicProps;
|
|
11
|
+
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
12
|
+
attrs: any;
|
|
13
|
+
slots: {
|
|
14
|
+
tooltip?(_: {
|
|
15
|
+
node: N | undefined;
|
|
16
|
+
}): any;
|
|
17
|
+
fallback?(_: {}): any;
|
|
18
|
+
};
|
|
19
|
+
emit: {
|
|
20
|
+
(e: "nodeClick", node: N, event?: MouseEvent): void;
|
|
21
|
+
(e: "nodeMouseover", node: N, event?: MouseEvent): void;
|
|
22
|
+
(e: "nodeMouseout", node: N, event?: MouseEvent): void;
|
|
23
|
+
(e: "linkClick", link: L, event?: MouseEvent): void;
|
|
24
|
+
(e: "linkMouseover", link: L, event?: MouseEvent): void;
|
|
25
|
+
(e: "linkMouseout", link: L, event?: MouseEvent): void;
|
|
26
|
+
};
|
|
27
|
+
}>) => import('vue').VNode & {
|
|
28
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
29
|
+
};
|
|
30
|
+
export default _default;
|
|
31
|
+
type __VLS_PrettifyLocal<T> = {
|
|
32
|
+
[K in keyof T]: T[K];
|
|
33
|
+
} & {};
|