vue-chrts 0.1.0-beta.2-internal-17 → 0.1.0-beta.2-internal-18
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/vue-chrts.js +522 -0
- package/dist/vue-chrts.mjs +522 -0
- package/dist/vue-chrts.umd.js +10 -0
- package/package.json +8 -22
- package/dist/components/Area/AreaChart.cjs +0 -7
- package/dist/components/Area/AreaChart.cjs.map +0 -1
- package/dist/components/Area/AreaChart.d.ts +0 -17
- package/dist/components/Area/AreaChart.js +0 -134
- package/dist/components/Area/AreaChart.js.map +0 -1
- package/dist/components/Area/AreaChart2.cjs +0 -2
- package/dist/components/Area/AreaChart2.cjs.map +0 -1
- package/dist/components/Area/AreaChart2.js +0 -5
- package/dist/components/Area/AreaChart2.js.map +0 -1
- package/dist/components/Area/index.d.ts +0 -2
- package/dist/components/Area/types.d.ts +0 -83
- package/dist/components/AreaStacked/AreaStackedChart.cjs +0 -2
- package/dist/components/AreaStacked/AreaStackedChart.cjs.map +0 -1
- package/dist/components/AreaStacked/AreaStackedChart.d.ts +0 -20
- package/dist/components/AreaStacked/AreaStackedChart.js +0 -70
- package/dist/components/AreaStacked/AreaStackedChart.js.map +0 -1
- package/dist/components/AreaStacked/AreaStackedChart2.cjs +0 -2
- package/dist/components/AreaStacked/AreaStackedChart2.cjs.map +0 -1
- package/dist/components/AreaStacked/AreaStackedChart2.js +0 -5
- package/dist/components/AreaStacked/AreaStackedChart2.js.map +0 -1
- package/dist/components/AreaStacked/index.d.ts +0 -1
- package/dist/components/Bar/BarChart.cjs +0 -2
- package/dist/components/Bar/BarChart.cjs.map +0 -1
- package/dist/components/Bar/BarChart.d.ts +0 -36
- package/dist/components/Bar/BarChart.js +0 -114
- package/dist/components/Bar/BarChart.js.map +0 -1
- package/dist/components/Bar/BarChart2.cjs +0 -2
- package/dist/components/Bar/BarChart2.cjs.map +0 -1
- package/dist/components/Bar/BarChart2.js +0 -5
- package/dist/components/Bar/BarChart2.js.map +0 -1
- package/dist/components/Bar/index.d.ts +0 -1
- package/dist/components/Crosshair/Crosshair.cjs +0 -2
- package/dist/components/Crosshair/Crosshair.cjs.map +0 -1
- package/dist/components/Crosshair/Crosshair.d.ts +0 -38
- package/dist/components/Crosshair/Crosshair.js +0 -40
- package/dist/components/Crosshair/Crosshair.js.map +0 -1
- package/dist/components/Crosshair/Crosshair2.cjs +0 -2
- package/dist/components/Crosshair/Crosshair2.cjs.map +0 -1
- package/dist/components/Crosshair/Crosshair2.js +0 -5
- package/dist/components/Crosshair/Crosshair2.js.map +0 -1
- package/dist/components/Crosshair/index.d.ts +0 -1
- package/dist/components/Donut/DonutChart.cjs +0 -6
- package/dist/components/Donut/DonutChart.cjs.map +0 -1
- package/dist/components/Donut/DonutChart.d.ts +0 -22
- package/dist/components/Donut/DonutChart.js +0 -59
- package/dist/components/Donut/DonutChart.js.map +0 -1
- package/dist/components/Donut/DonutChart2.cjs +0 -2
- package/dist/components/Donut/DonutChart2.cjs.map +0 -1
- package/dist/components/Donut/DonutChart2.js +0 -5
- package/dist/components/Donut/DonutChart2.js.map +0 -1
- package/dist/components/Donut/index.cjs +0 -2
- package/dist/components/Donut/index.cjs.map +0 -1
- package/dist/components/Donut/index.d.ts +0 -17
- package/dist/components/Donut/index.js +0 -5
- package/dist/components/Donut/index.js.map +0 -1
- package/dist/components/Line/LineChart.cjs +0 -2
- package/dist/components/Line/LineChart.cjs.map +0 -1
- package/dist/components/Line/LineChart.d.ts +0 -27
- package/dist/components/Line/LineChart.js +0 -91
- package/dist/components/Line/LineChart.js.map +0 -1
- package/dist/components/Line/LineChart2.cjs +0 -2
- package/dist/components/Line/LineChart2.cjs.map +0 -1
- package/dist/components/Line/LineChart2.js +0 -5
- package/dist/components/Line/LineChart2.js.map +0 -1
- package/dist/components/Line/index.d.ts +0 -1
- package/dist/components/Tooltip.cjs +0 -2
- package/dist/components/Tooltip.cjs.map +0 -1
- package/dist/components/Tooltip.d.ts +0 -17
- package/dist/components/Tooltip.js +0 -38
- package/dist/components/Tooltip.js.map +0 -1
- package/dist/components/Tooltip2.cjs +0 -2
- package/dist/components/Tooltip2.cjs.map +0 -1
- package/dist/components/Tooltip2.js +0 -5
- package/dist/components/Tooltip2.js.map +0 -1
- package/dist/components.d.ts +0 -6
- package/dist/index.cjs +0 -2
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.ts +0 -6
- package/dist/index.js +0 -23
- package/dist/index.js.map +0 -1
- package/dist/types/components/Area/AreaChart.vue.d.ts +0 -16
- package/dist/types/components/Area/index.d.ts +0 -2
- package/dist/types/components/Area/types.d.ts +0 -82
- package/dist/types/components/AreaStacked/AreaStackedChart.vue.d.ts +0 -22
- package/dist/types/components/AreaStacked/index.d.ts +0 -1
- package/dist/types/components/Bar/BarChart.vue.d.ts +0 -35
- package/dist/types/components/Bar/index.d.ts +0 -1
- package/dist/types/components/Crosshair/Crosshair.vue.d.ts +0 -12
- package/dist/types/components/Crosshair/index.d.ts +0 -1
- package/dist/types/components/Donut/DonutChart.vue.d.ts +0 -29
- package/dist/types/components/Donut/index.d.ts +0 -17
- package/dist/types/components/Line/LineChart.vue.d.ts +0 -29
- package/dist/types/components/Line/index.d.ts +0 -1
- package/dist/types/components/Tooltip.vue.d.ts +0 -19
- package/dist/types/components.d.ts +0 -6
- package/dist/types/index.d.ts +0 -6
- package/dist/types/types.d.ts +0 -4
- package/dist/types/utils.d.ts +0 -1
- package/dist/types.cjs +0 -2
- package/dist/types.cjs.map +0 -1
- package/dist/types.d.ts +0 -4
- package/dist/types.js +0 -5
- package/dist/types.js.map +0 -1
- package/dist/utils.cjs +0 -2
- package/dist/utils.cjs.map +0 -1
- package/dist/utils.d.ts +0 -1
- package/dist/utils.js +0 -19
- package/dist/utils.js.map +0 -1
|
@@ -0,0 +1,522 @@
|
|
|
1
|
+
import { Position as P, CurveType as V, Orientation as N, StackedBar as G, GroupedBar as I, Donut as R, omit as W } from "@unovis/ts";
|
|
2
|
+
import { CurveType as ve, Orientation as be, Position as ke } from "@unovis/ts";
|
|
3
|
+
import { defineComponent as k, computed as h, createElementBlock as m, openBlock as u, Fragment as L, renderList as D, createElementVNode as b, normalizeStyle as z, toDisplayString as S, createApp as x, normalizeClass as j, createVNode as s, createCommentVNode as T, unref as t, withCtx as $, createBlock as B, mergeProps as q, renderSlot as J } from "vue";
|
|
4
|
+
import { VisXYContainer as O, VisTooltip as C, VisArea as X, VisLine as E, VisAxis as v, VisCrosshair as M, VisBulletLegend as w, VisGroupedBar as Q, VisStackedBar as U, VisSingleContainer as Z, VisDonut as K } from "@unovis/vue";
|
|
5
|
+
function ee(a, o) {
|
|
6
|
+
if (o <= 0) return [];
|
|
7
|
+
if (o >= a)
|
|
8
|
+
return Array.from({ length: a }, (d, i) => i);
|
|
9
|
+
if (o === 1)
|
|
10
|
+
return [Math.floor((a - 1) / 2)];
|
|
11
|
+
if (o === 2)
|
|
12
|
+
return [0, a - 1];
|
|
13
|
+
const c = [];
|
|
14
|
+
for (let d = 0; d < o; d++) {
|
|
15
|
+
const i = Math.round(d * (a - 1) / (o - 1));
|
|
16
|
+
c.push(i);
|
|
17
|
+
}
|
|
18
|
+
return c;
|
|
19
|
+
}
|
|
20
|
+
const A = /* @__PURE__ */ k({
|
|
21
|
+
__name: "Tooltip",
|
|
22
|
+
props: {
|
|
23
|
+
data: {},
|
|
24
|
+
categories: {}
|
|
25
|
+
},
|
|
26
|
+
setup(a) {
|
|
27
|
+
const o = a, c = ["_index", "_stacked", "_ending"], d = h(() => Object.entries(o.data).filter(
|
|
28
|
+
([i, n]) => {
|
|
29
|
+
var e;
|
|
30
|
+
return !c.includes(i) && ((e = o.categories[i]) == null ? void 0 : e.color);
|
|
31
|
+
}
|
|
32
|
+
));
|
|
33
|
+
return (i, n) => (u(), m("div", null, [
|
|
34
|
+
(u(!0), m(L, null, D(d.value, ([e, l]) => (u(), m("div", {
|
|
35
|
+
key: e,
|
|
36
|
+
style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
|
|
37
|
+
}, [
|
|
38
|
+
b("span", {
|
|
39
|
+
style: z([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, { backgroundColor: i.categories[e].color }])
|
|
40
|
+
}, null, 4),
|
|
41
|
+
b("div", null, [
|
|
42
|
+
b("span", {
|
|
43
|
+
style: z([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
|
|
44
|
+
}, S(e) + ":", 1),
|
|
45
|
+
b("span", {
|
|
46
|
+
style: z([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
|
|
47
|
+
}, S(l), 1)
|
|
48
|
+
])
|
|
49
|
+
]))), 128))
|
|
50
|
+
]));
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
var F = /* @__PURE__ */ ((a) => (a.Top = "top", a.Bottom = "bottom", a))(F || {});
|
|
54
|
+
const ue = /* @__PURE__ */ k({
|
|
55
|
+
__name: "AreaChart",
|
|
56
|
+
props: {
|
|
57
|
+
data: {},
|
|
58
|
+
height: {},
|
|
59
|
+
xLabel: {},
|
|
60
|
+
yLabel: {},
|
|
61
|
+
categories: {},
|
|
62
|
+
xFormatter: {},
|
|
63
|
+
yFormatter: {},
|
|
64
|
+
curveType: {},
|
|
65
|
+
xNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
|
|
66
|
+
yNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
|
|
67
|
+
hideLegend: { type: Boolean },
|
|
68
|
+
hideTooltip: { type: Boolean },
|
|
69
|
+
gridLineX: { type: Boolean },
|
|
70
|
+
domainLineX: { type: Boolean },
|
|
71
|
+
gridLineY: { type: Boolean },
|
|
72
|
+
domainLineY: { type: Boolean },
|
|
73
|
+
paginationPosition: {}
|
|
74
|
+
},
|
|
75
|
+
setup(a) {
|
|
76
|
+
const o = a, c = Object.values(o.categories).map((r) => r.color), d = h(() => (r) => {
|
|
77
|
+
if (typeof window > "u" || typeof document > "u")
|
|
78
|
+
return "";
|
|
79
|
+
try {
|
|
80
|
+
const g = x(A, {
|
|
81
|
+
data: r,
|
|
82
|
+
categories: o.categories
|
|
83
|
+
}), f = document.createElement("div");
|
|
84
|
+
g.mount(f);
|
|
85
|
+
const y = f.innerHTML;
|
|
86
|
+
return g.unmount(), y;
|
|
87
|
+
} catch {
|
|
88
|
+
return "";
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
function i(r) {
|
|
92
|
+
var g;
|
|
93
|
+
return {
|
|
94
|
+
y: (f) => Number(f[r]),
|
|
95
|
+
color: ((g = o.categories[r]) == null ? void 0 : g.color) ?? "#3b82f6"
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
const n = c.map(
|
|
99
|
+
(r, g) => `
|
|
100
|
+
<linearGradient id="gradient${g}-${r}" gradientTransform="rotate(90)">
|
|
101
|
+
<stop offset="0%" stop-color="${r}" stop-opacity="1" />
|
|
102
|
+
<stop offset="100%" stop-color="${r}" stop-opacity="0" />
|
|
103
|
+
</linearGradient>
|
|
104
|
+
`
|
|
105
|
+
).join(""), e = h(
|
|
106
|
+
() => o.paginationPosition === F.Top
|
|
107
|
+
), l = h(() => ee(o.data.length, o.xNumTicks)), p = h(() => {
|
|
108
|
+
var r;
|
|
109
|
+
return !((r = o.data) != null && r.length) || !l || l.value.length === 0 ? [] : l.value.map((g) => o.data[g]);
|
|
110
|
+
});
|
|
111
|
+
return (r, g) => (u(), m("div", {
|
|
112
|
+
class: j(["flex flex-col space-y-4", { "flex-col-reverse": e.value }])
|
|
113
|
+
}, [
|
|
114
|
+
s(t(O), {
|
|
115
|
+
data: p.value,
|
|
116
|
+
height: r.height,
|
|
117
|
+
"svg-defs": t(n)
|
|
118
|
+
}, {
|
|
119
|
+
default: $(() => [
|
|
120
|
+
r.hideTooltip ? T("", !0) : (u(), B(t(C), {
|
|
121
|
+
key: 0,
|
|
122
|
+
"horizontal-placement": t(P).Right,
|
|
123
|
+
"vertical-placement": t(P).Top
|
|
124
|
+
}, null, 8, ["horizontal-placement", "vertical-placement"])),
|
|
125
|
+
(u(!0), m(L, null, D(Object.keys(o.categories), (f, y) => (u(), m(L, { key: y }, [
|
|
126
|
+
s(t(X), q({
|
|
127
|
+
x: (_, H) => H,
|
|
128
|
+
ref_for: !0
|
|
129
|
+
}, i(f), {
|
|
130
|
+
color: `url(#gradient${y}-${t(c)[y]})`,
|
|
131
|
+
opacity: 0.5,
|
|
132
|
+
"curve-type": r.curveType ?? t(V).MonotoneX
|
|
133
|
+
}), null, 16, ["x", "color", "curve-type"]),
|
|
134
|
+
s(t(E), {
|
|
135
|
+
x: (_, H) => H,
|
|
136
|
+
y: (_) => _[f],
|
|
137
|
+
color: t(c)[y],
|
|
138
|
+
"curve-type": r.curveType ?? t(V).MonotoneX
|
|
139
|
+
}, null, 8, ["x", "y", "color", "curve-type"])
|
|
140
|
+
], 64))), 128)),
|
|
141
|
+
s(t(v), {
|
|
142
|
+
type: "x",
|
|
143
|
+
"num-ticks": p.value.length,
|
|
144
|
+
"tick-format": (f) => r.xFormatter(p.value[f]),
|
|
145
|
+
label: r.xLabel,
|
|
146
|
+
"grid-line": r.gridLineX,
|
|
147
|
+
"domain-line": r.domainLineX,
|
|
148
|
+
"tick-line": !!r.gridLineX
|
|
149
|
+
}, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
|
|
150
|
+
s(t(v), {
|
|
151
|
+
type: "y",
|
|
152
|
+
"num-ticks": r.yNumTicks,
|
|
153
|
+
"tick-format": r.yFormatter,
|
|
154
|
+
label: r.yLabel,
|
|
155
|
+
"grid-line": r.gridLineY,
|
|
156
|
+
"domain-line": r.domainLineY,
|
|
157
|
+
"tick-line": !!r.gridLineY
|
|
158
|
+
}, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
|
|
159
|
+
r.hideTooltip ? T("", !0) : (u(), B(t(M), {
|
|
160
|
+
key: 1,
|
|
161
|
+
color: "#666",
|
|
162
|
+
template: d.value
|
|
163
|
+
}, null, 8, ["template"]))
|
|
164
|
+
]),
|
|
165
|
+
_: 1
|
|
166
|
+
}, 8, ["data", "height", "svg-defs"]),
|
|
167
|
+
r.hideLegend ? T("", !0) : (u(), m("div", {
|
|
168
|
+
key: 0,
|
|
169
|
+
class: j(["flex items center justify-end", { "pb-4": e.value }])
|
|
170
|
+
}, [
|
|
171
|
+
s(t(w), {
|
|
172
|
+
items: Object.values(r.categories)
|
|
173
|
+
}, null, 8, ["items"])
|
|
174
|
+
], 2))
|
|
175
|
+
], 2));
|
|
176
|
+
}
|
|
177
|
+
}), te = { class: "flex flex-col space-y-4" }, ne = { class: "flex items center justify-end" }, de = /* @__PURE__ */ k({
|
|
178
|
+
__name: "AreaStackedChart",
|
|
179
|
+
props: {
|
|
180
|
+
data: {},
|
|
181
|
+
height: {},
|
|
182
|
+
categories: {},
|
|
183
|
+
hideTooltip: { type: Boolean }
|
|
184
|
+
},
|
|
185
|
+
setup(a) {
|
|
186
|
+
const o = a, c = h(() => (n) => {
|
|
187
|
+
if (typeof window > "u" || typeof document > "u")
|
|
188
|
+
return "";
|
|
189
|
+
try {
|
|
190
|
+
const e = x(A, {
|
|
191
|
+
data: n,
|
|
192
|
+
categories: o.categories
|
|
193
|
+
}), l = document.createElement("div");
|
|
194
|
+
e.mount(l);
|
|
195
|
+
const p = l.innerHTML;
|
|
196
|
+
return e.unmount(), p;
|
|
197
|
+
} catch {
|
|
198
|
+
return "";
|
|
199
|
+
}
|
|
200
|
+
}), d = (n) => Number.parseInt(n.time), i = [(n) => n.firstTime, (n) => n.returning];
|
|
201
|
+
return (n, e) => (u(), m("div", te, [
|
|
202
|
+
s(t(O), {
|
|
203
|
+
data: n.data,
|
|
204
|
+
height: n.height
|
|
205
|
+
}, {
|
|
206
|
+
default: $(() => [
|
|
207
|
+
s(t(X), {
|
|
208
|
+
x: d,
|
|
209
|
+
y: i,
|
|
210
|
+
color: Object.values(o.categories).map((l) => l.color),
|
|
211
|
+
"curve-type": t(V).Linear
|
|
212
|
+
}, null, 8, ["color", "curve-type"]),
|
|
213
|
+
s(t(v), {
|
|
214
|
+
type: "x",
|
|
215
|
+
label: "Time",
|
|
216
|
+
"num-ticks": 12
|
|
217
|
+
}),
|
|
218
|
+
s(t(v), {
|
|
219
|
+
type: "y",
|
|
220
|
+
label: "Number of visitors",
|
|
221
|
+
"num-ticks": 3
|
|
222
|
+
}),
|
|
223
|
+
n.hideTooltip ? T("", !0) : (u(), B(t(M), {
|
|
224
|
+
key: 0,
|
|
225
|
+
color: "#666",
|
|
226
|
+
template: c.value
|
|
227
|
+
}, null, 8, ["template"]))
|
|
228
|
+
]),
|
|
229
|
+
_: 1
|
|
230
|
+
}, 8, ["data", "height"]),
|
|
231
|
+
b("div", ne, [
|
|
232
|
+
s(t(w), {
|
|
233
|
+
items: Object.values(n.categories)
|
|
234
|
+
}, null, 8, ["items"])
|
|
235
|
+
])
|
|
236
|
+
]));
|
|
237
|
+
}
|
|
238
|
+
}), oe = { class: "flex items center justify-end" }, pe = /* @__PURE__ */ k({
|
|
239
|
+
__name: "LineChart",
|
|
240
|
+
props: {
|
|
241
|
+
data: {},
|
|
242
|
+
height: {},
|
|
243
|
+
xLabel: {},
|
|
244
|
+
yLabel: {},
|
|
245
|
+
categories: {},
|
|
246
|
+
xFormatter: { type: Function },
|
|
247
|
+
yFormatter: { type: Function },
|
|
248
|
+
curveType: {},
|
|
249
|
+
yNumTicks: {},
|
|
250
|
+
xNumTicks: {},
|
|
251
|
+
paginationPosition: {}
|
|
252
|
+
},
|
|
253
|
+
setup(a) {
|
|
254
|
+
const o = a, c = (i) => Object.values(o.categories)[i].color, d = h(() => (i) => {
|
|
255
|
+
if (typeof window > "u" || typeof document > "u")
|
|
256
|
+
return "";
|
|
257
|
+
try {
|
|
258
|
+
const n = x(A, {
|
|
259
|
+
data: i,
|
|
260
|
+
categories: o.categories
|
|
261
|
+
}), e = document.createElement("div");
|
|
262
|
+
n.mount(e);
|
|
263
|
+
const l = e.innerHTML;
|
|
264
|
+
return n.unmount(), l;
|
|
265
|
+
} catch {
|
|
266
|
+
return "";
|
|
267
|
+
}
|
|
268
|
+
});
|
|
269
|
+
return (i, n) => (u(), m("div", {
|
|
270
|
+
class: j(["space-y-4 flex flex-col", {
|
|
271
|
+
"flex-col-reverse": o.paginationPosition === "top"
|
|
272
|
+
}])
|
|
273
|
+
}, [
|
|
274
|
+
s(t(O), {
|
|
275
|
+
data: i.data,
|
|
276
|
+
height: i.height
|
|
277
|
+
}, {
|
|
278
|
+
default: $(() => [
|
|
279
|
+
s(t(C), {
|
|
280
|
+
"horizontal-placement": t(P).Right,
|
|
281
|
+
"vertical-placement": t(P).Top
|
|
282
|
+
}, null, 8, ["horizontal-placement", "vertical-placement"]),
|
|
283
|
+
(u(!0), m(L, null, D(Object.keys(o.categories), (e, l) => (u(), B(t(E), {
|
|
284
|
+
key: l,
|
|
285
|
+
x: (p, r) => r,
|
|
286
|
+
y: (p) => p[e],
|
|
287
|
+
color: c(l),
|
|
288
|
+
"curve-type": i.curveType ?? t(V).MonotoneX
|
|
289
|
+
}, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
|
|
290
|
+
s(t(v), {
|
|
291
|
+
type: "x",
|
|
292
|
+
"tick-format": i.xFormatter,
|
|
293
|
+
"num-ticks": i.xNumTicks ?? 4,
|
|
294
|
+
label: i.xLabel,
|
|
295
|
+
"label-margin": 8,
|
|
296
|
+
"domain-line": !1,
|
|
297
|
+
"grid-line": !1
|
|
298
|
+
}, null, 8, ["tick-format", "num-ticks", "label"]),
|
|
299
|
+
s(t(v), {
|
|
300
|
+
type: "y",
|
|
301
|
+
"num-ticks": i.yNumTicks ?? 4,
|
|
302
|
+
"tick-format": i.yFormatter,
|
|
303
|
+
label: i.yLabel,
|
|
304
|
+
"domain-line": !1
|
|
305
|
+
}, null, 8, ["num-ticks", "tick-format", "label"]),
|
|
306
|
+
s(t(M), {
|
|
307
|
+
color: "#666",
|
|
308
|
+
template: d.value
|
|
309
|
+
}, null, 8, ["template"])
|
|
310
|
+
]),
|
|
311
|
+
_: 1
|
|
312
|
+
}, 8, ["data", "height"]),
|
|
313
|
+
b("div", oe, [
|
|
314
|
+
s(t(w), {
|
|
315
|
+
items: Object.values(i.categories)
|
|
316
|
+
}, null, 8, ["items"])
|
|
317
|
+
])
|
|
318
|
+
], 2));
|
|
319
|
+
}
|
|
320
|
+
}), me = /* @__PURE__ */ k({
|
|
321
|
+
__name: "BarChart",
|
|
322
|
+
props: {
|
|
323
|
+
data: {},
|
|
324
|
+
stacked: { type: Boolean },
|
|
325
|
+
height: {},
|
|
326
|
+
xLabel: {},
|
|
327
|
+
yLabel: {},
|
|
328
|
+
categories: {},
|
|
329
|
+
xFormatter: {},
|
|
330
|
+
yFormatter: {},
|
|
331
|
+
yNumTicks: {},
|
|
332
|
+
xNumTicks: {},
|
|
333
|
+
yAxis: {},
|
|
334
|
+
groupPadding: {},
|
|
335
|
+
barPadding: {},
|
|
336
|
+
radius: {},
|
|
337
|
+
hideLegend: { type: Boolean },
|
|
338
|
+
orientation: { default: N.Vertical },
|
|
339
|
+
paginationPosition: { default: F.Bottom }
|
|
340
|
+
},
|
|
341
|
+
setup(a) {
|
|
342
|
+
const o = a, c = h(() => o.yAxis.map((e) => (l) => l[e])), d = (e, l) => Object.values(o.categories)[l].color, i = h(() => (e) => {
|
|
343
|
+
if (typeof window > "u" || typeof document > "u")
|
|
344
|
+
return "";
|
|
345
|
+
try {
|
|
346
|
+
const l = x(A, {
|
|
347
|
+
data: e,
|
|
348
|
+
categories: o.categories
|
|
349
|
+
}), p = document.createElement("div");
|
|
350
|
+
l.mount(p);
|
|
351
|
+
const r = p.innerHTML;
|
|
352
|
+
return l.unmount(), r;
|
|
353
|
+
} catch {
|
|
354
|
+
return "";
|
|
355
|
+
}
|
|
356
|
+
}), n = h(
|
|
357
|
+
() => o.paginationPosition === F.Top
|
|
358
|
+
);
|
|
359
|
+
return (e, l) => (u(), m("div", {
|
|
360
|
+
class: j(["flex flex-col space-y-4", { "flex-col-reverse": n.value }])
|
|
361
|
+
}, [
|
|
362
|
+
s(t(O), { height: e.height }, {
|
|
363
|
+
default: $(() => [
|
|
364
|
+
s(t(C), {
|
|
365
|
+
triggers: {
|
|
366
|
+
[t(I).selectors.bar]: i.value,
|
|
367
|
+
[t(G).selectors.bar]: i.value
|
|
368
|
+
}
|
|
369
|
+
}, null, 8, ["triggers"]),
|
|
370
|
+
e.stacked ? (u(), B(t(U), {
|
|
371
|
+
key: 1,
|
|
372
|
+
data: e.data,
|
|
373
|
+
x: (p, r) => r,
|
|
374
|
+
y: c.value,
|
|
375
|
+
"grid-line": !1,
|
|
376
|
+
"domain-line": !1,
|
|
377
|
+
color: d,
|
|
378
|
+
"rounded-corners": e.radius ?? 0,
|
|
379
|
+
"group-padding": e.groupPadding ?? 0,
|
|
380
|
+
"bar-padding": e.barPadding ?? 0.2,
|
|
381
|
+
orientation: e.orientation ?? t(N).Vertical
|
|
382
|
+
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (u(), B(t(Q), {
|
|
383
|
+
key: 0,
|
|
384
|
+
data: e.data,
|
|
385
|
+
x: (p, r) => r,
|
|
386
|
+
y: c.value,
|
|
387
|
+
"grid-line": !1,
|
|
388
|
+
"domain-line": !1,
|
|
389
|
+
color: d,
|
|
390
|
+
"rounded-corners": e.radius ?? 0,
|
|
391
|
+
"group-padding": e.groupPadding ?? 0,
|
|
392
|
+
"bar-padding": e.barPadding ?? 0.2,
|
|
393
|
+
orientation: e.orientation ?? t(N).Vertical
|
|
394
|
+
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
|
|
395
|
+
s(t(v), {
|
|
396
|
+
type: "x",
|
|
397
|
+
label: e.xLabel,
|
|
398
|
+
"grid-line": !1,
|
|
399
|
+
"domain-line": !1,
|
|
400
|
+
"tick-format": e.xFormatter,
|
|
401
|
+
"num-ticks": e.xNumTicks,
|
|
402
|
+
"tick-line": !1
|
|
403
|
+
}, null, 8, ["label", "tick-format", "num-ticks"]),
|
|
404
|
+
s(t(v), {
|
|
405
|
+
type: "y",
|
|
406
|
+
label: e.yLabel,
|
|
407
|
+
"grid-line": e.orientation !== t(N).Horizontal,
|
|
408
|
+
"domain-line": !1,
|
|
409
|
+
"tick-format": e.yFormatter
|
|
410
|
+
}, null, 8, ["label", "grid-line", "tick-format"])
|
|
411
|
+
]),
|
|
412
|
+
_: 1
|
|
413
|
+
}, 8, ["height"]),
|
|
414
|
+
e.hideLegend ? T("", !0) : (u(), m("div", {
|
|
415
|
+
key: 0,
|
|
416
|
+
class: j(["flex items center justify-end", { "pb-4": n.value }])
|
|
417
|
+
}, [
|
|
418
|
+
s(t(w), {
|
|
419
|
+
items: Object.values(e.categories)
|
|
420
|
+
}, null, 8, ["items"])
|
|
421
|
+
], 2))
|
|
422
|
+
], 2));
|
|
423
|
+
}
|
|
424
|
+
}), re = { class: "flex items-center justify-center" }, ae = {
|
|
425
|
+
key: 0,
|
|
426
|
+
class: "flex items-center justify-center mt-4"
|
|
427
|
+
}, ge = /* @__PURE__ */ k({
|
|
428
|
+
__name: "DonutChart",
|
|
429
|
+
props: {
|
|
430
|
+
type: {},
|
|
431
|
+
data: {},
|
|
432
|
+
height: {},
|
|
433
|
+
radius: {},
|
|
434
|
+
hidePagination: { type: Boolean },
|
|
435
|
+
labels: {}
|
|
436
|
+
},
|
|
437
|
+
setup(a) {
|
|
438
|
+
const o = a, c = (n) => n, d = o.type === Y.Half, i = {
|
|
439
|
+
[R.selectors.segment]: (n) => `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${o.labels[n.index].color} ;'></div>
|
|
440
|
+
<div>${n.data}</div>
|
|
441
|
+
</vistooltip>
|
|
442
|
+
</vissinglecontainer>
|
|
443
|
+
</div>`
|
|
444
|
+
};
|
|
445
|
+
return (n, e) => (u(), m(L, null, [
|
|
446
|
+
b("div", re, [
|
|
447
|
+
s(t(Z), {
|
|
448
|
+
data: n.data,
|
|
449
|
+
height: n.height,
|
|
450
|
+
margin: {}
|
|
451
|
+
}, {
|
|
452
|
+
default: $(() => [
|
|
453
|
+
s(t(C), {
|
|
454
|
+
"horizontal-shift": 20,
|
|
455
|
+
"vertical-shift": 20,
|
|
456
|
+
triggers: i
|
|
457
|
+
}),
|
|
458
|
+
s(t(K), {
|
|
459
|
+
value: c,
|
|
460
|
+
"corner-radius": n.radius,
|
|
461
|
+
color: o.labels.map((l) => l.color),
|
|
462
|
+
"angle-range": d ? [-1.5707963267948966, 1.5707963267948966] : []
|
|
463
|
+
}, null, 8, ["corner-radius", "color", "angle-range"])
|
|
464
|
+
]),
|
|
465
|
+
_: 1
|
|
466
|
+
}, 8, ["data", "height"]),
|
|
467
|
+
J(n.$slots, "default")
|
|
468
|
+
]),
|
|
469
|
+
n.hidePagination ? T("", !0) : (u(), m("div", ae, [
|
|
470
|
+
s(t(w), { items: n.labels }, null, 8, ["items"])
|
|
471
|
+
]))
|
|
472
|
+
], 64));
|
|
473
|
+
}
|
|
474
|
+
});
|
|
475
|
+
var Y = /* @__PURE__ */ ((a) => (a.Half = "half", a.Full = "full", a))(Y || {});
|
|
476
|
+
const fe = /* @__PURE__ */ k({
|
|
477
|
+
__name: "Crosshair",
|
|
478
|
+
props: {
|
|
479
|
+
colors: { default: () => [] },
|
|
480
|
+
index: {},
|
|
481
|
+
items: {},
|
|
482
|
+
customTooltip: {}
|
|
483
|
+
},
|
|
484
|
+
setup(a) {
|
|
485
|
+
const o = a, c = /* @__PURE__ */ new WeakMap();
|
|
486
|
+
function d(n) {
|
|
487
|
+
if (c.has(n))
|
|
488
|
+
return c.get(n);
|
|
489
|
+
if (typeof window < "u") {
|
|
490
|
+
const e = document.createElement("div"), l = Object.entries(W(n, [o.index])).map(([r, g]) => ({ ...o.items.find((y) => y.name === r), value: g })), p = o.customTooltip ?? C;
|
|
491
|
+
return x(p, { title: n[o.index].toString(), data: l }).mount(e), c.set(n, e.innerHTML), e.innerHTML;
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
function i(n, e) {
|
|
495
|
+
return o.colors[e] ?? "transparent";
|
|
496
|
+
}
|
|
497
|
+
return (n, e) => (u(), m(L, null, [
|
|
498
|
+
s(t(C), {
|
|
499
|
+
"horizontal-shift": 20,
|
|
500
|
+
"vertical-shift": 20
|
|
501
|
+
}),
|
|
502
|
+
s(t(M), {
|
|
503
|
+
template: d,
|
|
504
|
+
color: i
|
|
505
|
+
})
|
|
506
|
+
], 64));
|
|
507
|
+
}
|
|
508
|
+
});
|
|
509
|
+
var ie = /* @__PURE__ */ ((a) => (a.Top = "top", a.Bottom = "bottom", a))(ie || {});
|
|
510
|
+
export {
|
|
511
|
+
ue as AreaChart,
|
|
512
|
+
de as AreaStackedChart,
|
|
513
|
+
me as BarChart,
|
|
514
|
+
fe as Crosshair,
|
|
515
|
+
ve as CurveType,
|
|
516
|
+
ge as DonutChart,
|
|
517
|
+
Y as DonutType,
|
|
518
|
+
pe as LineChart,
|
|
519
|
+
be as Orientation,
|
|
520
|
+
ie as PaginationPosition,
|
|
521
|
+
ke as Position
|
|
522
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
(function(p,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@unovis/ts"),require("vue"),require("@unovis/vue")):typeof define=="function"&&define.amd?define(["exports","@unovis/ts","vue","@unovis/vue"],s):(p=typeof globalThis<"u"?globalThis:p||self,s(p["vue-chrts"]={},p.ts,p.Vue,p.vue$1))})(this,function(p,s,e,a){"use strict";function N(i,o){if(o<=0)return[];if(o>=i)return Array.from({length:i},(m,l)=>l);if(o===1)return[Math.floor((i-1)/2)];if(o===2)return[0,i-1];const d=[];for(let m=0;m<o;m++){const l=Math.round(m*(i-1)/(o-1));d.push(l)}return d}const h=e.defineComponent({__name:"Tooltip",props:{data:{},categories:{}},setup(i){const o=i,d=["_index","_stacked","_ending"],m=e.computed(()=>Object.entries(o.data).filter(([l,n])=>{var t;return!d.includes(l)&&((t=o.categories[l])==null?void 0:t.color)}));return(l,n)=>(e.openBlock(),e.createElementBlock("div",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,([t,c])=>(e.openBlock(),e.createElementBlock("div",{key:t,style:{display:"flex","align-items":"center","margin-bottom":"4px"}},[e.createElementVNode("span",{style:e.normalizeStyle([{width:"8px",height:"8px","border-radius":"4px","margin-right":"8px"},{backgroundColor:l.categories[t].color}])},null,4),e.createElementVNode("div",null,[e.createElementVNode("span",{style:e.normalizeStyle([{"font-weight":"600","margin-right":"8px"},{color:"var(--tooltip-label-color)"}])},e.toDisplayString(t)+":",1),e.createElementVNode("span",{style:e.normalizeStyle([{"font-weight":"400"},{color:"var(--tooltip-value-color)"}])},e.toDisplayString(c),1)])]))),128))]))}});var k=(i=>(i.Top="top",i.Bottom="bottom",i))(k||{});const C=e.defineComponent({__name:"AreaChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{},yFormatter:{},curveType:{},xNumTicks:{default:i=>i.data.length>24?24/4:i.data.length-1},yNumTicks:{default:i=>i.data.length>24?24/4:i.data.length-1},hideLegend:{type:Boolean},hideTooltip:{type:Boolean},gridLineX:{type:Boolean},domainLineX:{type:Boolean},gridLineY:{type:Boolean},domainLineY:{type:Boolean},paginationPosition:{}},setup(i){const o=i,d=Object.values(o.categories).map(r=>r.color),m=e.computed(()=>r=>{if(typeof window>"u"||typeof document>"u")return"";try{const g=e.createApp(h,{data:r,categories:o.categories}),u=document.createElement("div");g.mount(u);const y=u.innerHTML;return g.unmount(),y}catch{return""}});function l(r){var g;return{y:u=>Number(u[r]),color:((g=o.categories[r])==null?void 0:g.color)??"#3b82f6"}}const n=d.map((r,g)=>`
|
|
2
|
+
<linearGradient id="gradient${g}-${r}" gradientTransform="rotate(90)">
|
|
3
|
+
<stop offset="0%" stop-color="${r}" stop-opacity="1" />
|
|
4
|
+
<stop offset="100%" stop-color="${r}" stop-opacity="0" />
|
|
5
|
+
</linearGradient>
|
|
6
|
+
`).join(""),t=e.computed(()=>o.paginationPosition===k.Top),c=e.computed(()=>N(o.data.length,o.xNumTicks)),f=e.computed(()=>{var r;return!((r=o.data)!=null&&r.length)||!c||c.value.length===0?[]:c.value.map(g=>o.data[g])});return(r,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col space-y-4",{"flex-col-reverse":t.value}])},[e.createVNode(e.unref(a.VisXYContainer),{data:f.value,height:r.height,"svg-defs":e.unref(n)},{default:e.withCtx(()=>[r.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(a.VisTooltip),{key:0,"horizontal-placement":e.unref(s.Position).Right,"vertical-placement":e.unref(s.Position).Top},null,8,["horizontal-placement","vertical-placement"])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(o.categories),(u,y)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:y},[e.createVNode(e.unref(a.VisArea),e.mergeProps({x:(b,B)=>B,ref_for:!0},l(u),{color:`url(#gradient${y}-${e.unref(d)[y]})`,opacity:.5,"curve-type":r.curveType??e.unref(s.CurveType).MonotoneX}),null,16,["x","color","curve-type"]),e.createVNode(e.unref(a.VisLine),{x:(b,B)=>B,y:b=>b[u],color:e.unref(d)[y],"curve-type":r.curveType??e.unref(s.CurveType).MonotoneX},null,8,["x","y","color","curve-type"])],64))),128)),e.createVNode(e.unref(a.VisAxis),{type:"x","num-ticks":f.value.length,"tick-format":u=>r.xFormatter(f.value[u]),label:r.xLabel,"grid-line":r.gridLineX,"domain-line":r.domainLineX,"tick-line":!!r.gridLineX},null,8,["num-ticks","tick-format","label","grid-line","domain-line","tick-line"]),e.createVNode(e.unref(a.VisAxis),{type:"y","num-ticks":r.yNumTicks,"tick-format":r.yFormatter,label:r.yLabel,"grid-line":r.gridLineY,"domain-line":r.domainLineY,"tick-line":!!r.gridLineY},null,8,["num-ticks","tick-format","label","grid-line","domain-line","tick-line"]),r.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(a.VisCrosshair),{key:1,color:"#666",template:m.value},null,8,["template"]))]),_:1},8,["data","height","svg-defs"]),r.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items center justify-end",{"pb-4":t.value}])},[e.createVNode(e.unref(a.VisBulletLegend),{items:Object.values(r.categories)},null,8,["items"])],2))],2))}}),L={class:"flex flex-col space-y-4"},E={class:"flex items center justify-end"},P=e.defineComponent({__name:"AreaStackedChart",props:{data:{},height:{},categories:{},hideTooltip:{type:Boolean}},setup(i){const o=i,d=e.computed(()=>n=>{if(typeof window>"u"||typeof document>"u")return"";try{const t=e.createApp(h,{data:n,categories:o.categories}),c=document.createElement("div");t.mount(c);const f=c.innerHTML;return t.unmount(),f}catch{return""}}),m=n=>Number.parseInt(n.time),l=[n=>n.firstTime,n=>n.returning];return(n,t)=>(e.openBlock(),e.createElementBlock("div",L,[e.createVNode(e.unref(a.VisXYContainer),{data:n.data,height:n.height},{default:e.withCtx(()=>[e.createVNode(e.unref(a.VisArea),{x:m,y:l,color:Object.values(o.categories).map(c=>c.color),"curve-type":e.unref(s.CurveType).Linear},null,8,["color","curve-type"]),e.createVNode(e.unref(a.VisAxis),{type:"x",label:"Time","num-ticks":12}),e.createVNode(e.unref(a.VisAxis),{type:"y",label:"Number of visitors","num-ticks":3}),n.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(a.VisCrosshair),{key:0,color:"#666",template:d.value},null,8,["template"]))]),_:1},8,["data","height"]),e.createElementVNode("div",E,[e.createVNode(e.unref(a.VisBulletLegend),{items:Object.values(n.categories)},null,8,["items"])])]))}}),j={class:"flex items center justify-end"},A=e.defineComponent({__name:"LineChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{type:Function},yFormatter:{type:Function},curveType:{},yNumTicks:{},xNumTicks:{},paginationPosition:{}},setup(i){const o=i,d=l=>Object.values(o.categories)[l].color,m=e.computed(()=>l=>{if(typeof window>"u"||typeof document>"u")return"";try{const n=e.createApp(h,{data:l,categories:o.categories}),t=document.createElement("div");n.mount(t);const c=t.innerHTML;return n.unmount(),c}catch{return""}});return(l,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["space-y-4 flex flex-col",{"flex-col-reverse":o.paginationPosition==="top"}])},[e.createVNode(e.unref(a.VisXYContainer),{data:l.data,height:l.height},{default:e.withCtx(()=>[e.createVNode(e.unref(a.VisTooltip),{"horizontal-placement":e.unref(s.Position).Right,"vertical-placement":e.unref(s.Position).Top},null,8,["horizontal-placement","vertical-placement"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(o.categories),(t,c)=>(e.openBlock(),e.createBlock(e.unref(a.VisLine),{key:c,x:(f,r)=>r,y:f=>f[t],color:d(c),"curve-type":l.curveType??e.unref(s.CurveType).MonotoneX},null,8,["x","y","color","curve-type"]))),128)),e.createVNode(e.unref(a.VisAxis),{type:"x","tick-format":l.xFormatter,"num-ticks":l.xNumTicks??4,label:l.xLabel,"label-margin":8,"domain-line":!1,"grid-line":!1},null,8,["tick-format","num-ticks","label"]),e.createVNode(e.unref(a.VisAxis),{type:"y","num-ticks":l.yNumTicks??4,"tick-format":l.yFormatter,label:l.yLabel,"domain-line":!1},null,8,["num-ticks","tick-format","label"]),e.createVNode(e.unref(a.VisCrosshair),{color:"#666",template:m.value},null,8,["template"])]),_:1},8,["data","height"]),e.createElementVNode("div",j,[e.createVNode(e.unref(a.VisBulletLegend),{items:Object.values(l.categories)},null,8,["items"])])],2))}}),O=e.defineComponent({__name:"BarChart",props:{data:{},stacked:{type:Boolean},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{},yFormatter:{},yNumTicks:{},xNumTicks:{},yAxis:{},groupPadding:{},barPadding:{},radius:{},hideLegend:{type:Boolean},orientation:{default:s.Orientation.Vertical},paginationPosition:{default:k.Bottom}},setup(i){const o=i,d=e.computed(()=>o.yAxis.map(t=>c=>c[t])),m=(t,c)=>Object.values(o.categories)[c].color,l=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const c=e.createApp(h,{data:t,categories:o.categories}),f=document.createElement("div");c.mount(f);const r=f.innerHTML;return c.unmount(),r}catch{return""}}),n=e.computed(()=>o.paginationPosition===k.Top);return(t,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col space-y-4",{"flex-col-reverse":n.value}])},[e.createVNode(e.unref(a.VisXYContainer),{height:t.height},{default:e.withCtx(()=>[e.createVNode(e.unref(a.VisTooltip),{triggers:{[e.unref(s.GroupedBar).selectors.bar]:l.value,[e.unref(s.StackedBar).selectors.bar]:l.value}},null,8,["triggers"]),t.stacked?(e.openBlock(),e.createBlock(e.unref(a.VisStackedBar),{key:1,data:t.data,x:(f,r)=>r,y:d.value,"grid-line":!1,"domain-line":!1,color:m,"rounded-corners":t.radius??0,"group-padding":t.groupPadding??0,"bar-padding":t.barPadding??.2,orientation:t.orientation??e.unref(s.Orientation).Vertical},null,8,["data","x","y","rounded-corners","group-padding","bar-padding","orientation"])):(e.openBlock(),e.createBlock(e.unref(a.VisGroupedBar),{key:0,data:t.data,x:(f,r)=>r,y:d.value,"grid-line":!1,"domain-line":!1,color:m,"rounded-corners":t.radius??0,"group-padding":t.groupPadding??0,"bar-padding":t.barPadding??.2,orientation:t.orientation??e.unref(s.Orientation).Vertical},null,8,["data","x","y","rounded-corners","group-padding","bar-padding","orientation"])),e.createVNode(e.unref(a.VisAxis),{type:"x",label:t.xLabel,"grid-line":!1,"domain-line":!1,"tick-format":t.xFormatter,"num-ticks":t.xNumTicks,"tick-line":!1},null,8,["label","tick-format","num-ticks"]),e.createVNode(e.unref(a.VisAxis),{type:"y",label:t.yLabel,"grid-line":t.orientation!==e.unref(s.Orientation).Horizontal,"domain-line":!1,"tick-format":t.yFormatter},null,8,["label","grid-line","tick-format"])]),_:1},8,["height"]),t.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items center justify-end",{"pb-4":n.value}])},[e.createVNode(e.unref(a.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])],2))],2))}}),w={class:"flex items-center justify-center"},F={key:0,class:"flex items-center justify-center mt-4"},x=e.defineComponent({__name:"DonutChart",props:{type:{},data:{},height:{},radius:{},hidePagination:{type:Boolean},labels:{}},setup(i){const o=i,d=n=>n,m=o.type===V.Half,l={[s.Donut.selectors.segment]:n=>`<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${o.labels[n.index].color} ;'></div>
|
|
7
|
+
<div>${n.data}</div>
|
|
8
|
+
</vistooltip>
|
|
9
|
+
</vissinglecontainer>
|
|
10
|
+
</div>`};return(n,t)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",w,[e.createVNode(e.unref(a.VisSingleContainer),{data:n.data,height:n.height,margin:{}},{default:e.withCtx(()=>[e.createVNode(e.unref(a.VisTooltip),{"horizontal-shift":20,"vertical-shift":20,triggers:l}),e.createVNode(e.unref(a.VisDonut),{value:d,"corner-radius":n.radius,color:o.labels.map(c=>c.color),"angle-range":m?[-1.5707963267948966,1.5707963267948966]:[]},null,8,["corner-radius","color","angle-range"])]),_:1},8,["data","height"]),e.renderSlot(n.$slots,"default")]),n.hidePagination?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",F,[e.createVNode(e.unref(a.VisBulletLegend),{items:n.labels},null,8,["items"])]))],64))}});var V=(i=>(i.Half="half",i.Full="full",i))(V||{});const z=e.defineComponent({__name:"Crosshair",props:{colors:{default:()=>[]},index:{},items:{},customTooltip:{}},setup(i){const o=i,d=new WeakMap;function m(n){if(d.has(n))return d.get(n);if(typeof window<"u"){const t=document.createElement("div"),c=Object.entries(s.omit(n,[o.index])).map(([r,g])=>({...o.items.find(y=>y.name===r),value:g})),f=o.customTooltip??a.VisTooltip;return e.createApp(f,{title:n[o.index].toString(),data:c}).mount(t),d.set(n,t.innerHTML),t.innerHTML}}function l(n,t){return o.colors[t]??"transparent"}return(n,t)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(a.VisTooltip),{"horizontal-shift":20,"vertical-shift":20}),e.createVNode(e.unref(a.VisCrosshair),{template:m,color:l})],64))}});var T=(i=>(i.Top="top",i.Bottom="bottom",i))(T||{});Object.defineProperty(p,"CurveType",{enumerable:!0,get:()=>s.CurveType}),Object.defineProperty(p,"Orientation",{enumerable:!0,get:()=>s.Orientation}),Object.defineProperty(p,"Position",{enumerable:!0,get:()=>s.Position}),p.AreaChart=C,p.AreaStackedChart=P,p.BarChart=O,p.Crosshair=z,p.DonutChart=x,p.DonutType=V,p.LineChart=A,p.PaginationPosition=T,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,34 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-chrts",
|
|
3
|
-
"version": "0.1.0-beta.2-internal-
|
|
3
|
+
"version": "0.1.0-beta.2-internal-18",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"type": "module",
|
|
6
5
|
"files": [
|
|
7
|
-
"dist"
|
|
8
|
-
"dist/types"
|
|
6
|
+
"dist"
|
|
9
7
|
],
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"require": "./dist/index.cjs",
|
|
14
|
-
"import": "./dist/index.js"
|
|
15
|
-
},
|
|
16
|
-
"./*": {
|
|
17
|
-
"types": "./*/dist/index.d.ts",
|
|
18
|
-
"require": "./*/dist/index.cjs",
|
|
19
|
-
"import": "./*/dist/index.js"
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
"main": "./dist/vue-chrts.umd.js",
|
|
23
|
-
"module": "./dist/vue-chrts.es.js",
|
|
24
|
-
"types": "./dist/types/index.d.ts",
|
|
8
|
+
"main": "./dist/index.cjs",
|
|
9
|
+
"module": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
25
11
|
"typings": "./index.d.ts",
|
|
12
|
+
"type": "module",
|
|
26
13
|
"sideEffects": false,
|
|
27
14
|
"scripts": {
|
|
28
15
|
"dev": "vite",
|
|
29
|
-
"build": "vite build
|
|
30
|
-
"
|
|
31
|
-
"build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
|
|
16
|
+
"build": "vite build",
|
|
17
|
+
"preview": "vite preview",
|
|
32
18
|
"deploy": "pnpm build && npm publish"
|
|
33
19
|
},
|
|
34
20
|
"peerDependencies": {
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),v=require("../../utils.cjs"),c=require("@unovis/ts"),i=require("@unovis/vue"),h=require("../Tooltip.cjs"),T=require("../../types.cjs"),B=e.defineComponent({__name:"AreaChart",props:{data:{},height:{},xLabel:{},yLabel:{},categories:{},xFormatter:{},yFormatter:{},curveType:{},xNumTicks:{default:a=>a.data.length>24?24/4:a.data.length-1},yNumTicks:{default:a=>a.data.length>24?24/4:a.data.length-1},hideLegend:{type:Boolean},hideTooltip:{type:Boolean},gridLineX:{type:Boolean},domainLineX:{type:Boolean},gridLineY:{type:Boolean},domainLineY:{type:Boolean},paginationPosition:{}},setup(a){const o=a,u=Object.values(o.categories).map(t=>t.color),g=e.computed(()=>t=>{if(typeof window>"u"||typeof document>"u")return"";try{const n=e.createApp(h.default,{data:t,categories:o.categories}),r=document.createElement("div");n.mount(r);const l=r.innerHTML;return n.unmount(),l}catch{return""}});function y(t){var n;return{y:r=>Number(r[t]),color:((n=o.categories[t])==null?void 0:n.color)??"#3b82f6"}}const k=u.map((t,n)=>`
|
|
2
|
-
<linearGradient id="gradient${n}-${t}" gradientTransform="rotate(90)">
|
|
3
|
-
<stop offset="0%" stop-color="${t}" stop-opacity="1" />
|
|
4
|
-
<stop offset="100%" stop-color="${t}" stop-opacity="0" />
|
|
5
|
-
</linearGradient>
|
|
6
|
-
`).join(""),f=e.computed(()=>o.paginationPosition===T.PaginationPosition.Top),s=e.computed(()=>v.getDistributedIndices(o.data.length,o.xNumTicks)),d=e.computed(()=>{var t;return!((t=o.data)!=null&&t.length)||!s||s.value.length===0?[]:s.value.map(n=>o.data[n])});return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col space-y-4",{"flex-col-reverse":f.value}])},[e.createVNode(e.unref(i.VisXYContainer),{data:d.value,height:t.height,"svg-defs":e.unref(k)},{default:e.withCtx(()=>[t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(i.VisTooltip),{key:0,"horizontal-placement":e.unref(c.Position).Right,"vertical-placement":e.unref(c.Position).Top},null,8,["horizontal-placement","vertical-placement"])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Object.keys(o.categories),(r,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[e.createVNode(e.unref(i.VisArea),e.mergeProps({x:(p,m)=>m,ref_for:!0},y(r),{color:`url(#gradient${l}-${e.unref(u)[l]})`,opacity:.5,"curve-type":t.curveType??e.unref(c.CurveType).MonotoneX}),null,16,["x","color","curve-type"]),e.createVNode(e.unref(i.VisLine),{x:(p,m)=>m,y:p=>p[r],color:e.unref(u)[l],"curve-type":t.curveType??e.unref(c.CurveType).MonotoneX},null,8,["x","y","color","curve-type"])],64))),128)),e.createVNode(e.unref(i.VisAxis),{type:"x","num-ticks":d.value.length,"tick-format":r=>t.xFormatter(d.value[r]),label:t.xLabel,"grid-line":t.gridLineX,"domain-line":t.domainLineX,"tick-line":!!t.gridLineX},null,8,["num-ticks","tick-format","label","grid-line","domain-line","tick-line"]),e.createVNode(e.unref(i.VisAxis),{type:"y","num-ticks":t.yNumTicks,"tick-format":t.yFormatter,label:t.yLabel,"grid-line":t.gridLineY,"domain-line":t.domainLineY,"tick-line":!!t.gridLineY},null,8,["num-ticks","tick-format","label","grid-line","domain-line","tick-line"]),t.hideTooltip?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(i.VisCrosshair),{key:1,color:"#666",template:g.value},null,8,["template"]))]),_:1},8,["data","height","svg-defs"]),t.hideLegend?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items center justify-end",{"pb-4":f.value}])},[e.createVNode(e.unref(i.VisBulletLegend),{items:Object.values(t.categories)},null,8,["items"])],2))],2))}});exports.default=B;
|
|
7
|
-
//# sourceMappingURL=AreaChart.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AreaChart.cjs","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from '../../utils'\nimport {\n type NumericAccessor,\n CurveType,\n Position,\n} from \"@unovis/ts\";\nimport {\n VisArea,\n VisAxis,\n VisBulletLegend,\n VisCrosshair,\n VisLine,\n VisTooltip,\n VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\nimport { AreaChartProps } from \"./types\";\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n xNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n yNumTicks: (props) =>\n props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n return \"\";\n }\n\n try {\n const app = createApp(Tooltip, {\n data: d,\n categories: props.categories,\n });\n\n const container = document.createElement(\"div\");\n app.mount(container);\n\n const html = container.innerHTML;\n app.unmount();\n\n return html;\n } catch (error) {\n return \"\";\n }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n return {\n y: (d: T) => Number(d[id as keyof typeof d]),\n color: props.categories[id]?.color ?? \"#3b82f6\",\n };\n}\n\nconst svgDefs = colors\n .map(\n (color, index) => `\n <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n </linearGradient>\n`\n )\n .join(\"\");\n\nconst PaginationPositionTop = computed(\n () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() => getDistributedIndices(props.data.length, props.xNumTicks))\n\nconst filteredDataByIndices = computed(() => {\n if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n return [];\n }\n return tickIndices.value.map((index) => props.data[index]);\n})\n\n</script>\n\n<template>\n <div\n class=\"flex flex-col space-y-4\"\n :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n >\n <VisXYContainer :data=\"filteredDataByIndices\" :height=\"height\" :svg-defs=\"svgDefs\">\n <VisTooltip\n v-if=\"!hideTooltip\"\n :horizontal-placement=\"Position.Right\"\n :vertical-placement=\"Position.Top\"\n />\n <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n <VisArea\n :x=\"(_: T, i: number) => i\"\n v-bind=\"accessors(i)\"\n :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n :opacity=\"0.5\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n <VisLine\n :x=\"(_: any, i: number) => i\"\n :y=\"(d: T) => d[i as keyof typeof d]\"\n :color=\"colors[iKey]\"\n :curve-type=\"curveType ?? CurveType.MonotoneX\"\n />\n </template>\n\n <VisAxis\n type=\"x\"\n :num-ticks=\"filteredDataByIndices.length\"\n :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\n :label=\"xLabel\"\n :grid-line=\"gridLineX\"\n :domain-line=\"domainLineX\"\n :tick-line=\"!!gridLineX\"\n />\n <VisAxis\n type=\"y\"\n :num-ticks=\"yNumTicks\"\n :tick-format=\"yFormatter\"\n :label=\"yLabel\"\n :grid-line=\"gridLineY\"\n :domain-line=\"domainLineY\"\n :tick-line=\"!!gridLineY\"\n />\n <VisCrosshair\n v-if=\"!hideTooltip\"\n color=\"#666\"\n :template=\"generateTooltip\"\n />\n </VisXYContainer>\n <div\n v-if=\"!hideLegend\"\n class=\"flex items center justify-end\"\n :class=\"{ 'pb-4': PaginationPositionTop }\"\n >\n <VisBulletLegend :items=\"Object.values(categories)\" />\n </div>\n </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":"6sBAsBA,MAAMA,EAAQC,EAORC,EAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAKG,GAAMA,EAAE,KAAK,EAE3DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAED,SAASC,EAAUC,EAAsD,OAChE,MAAA,CACL,EAAIP,GAAS,OAAOA,EAAEO,CAAoB,CAAC,EAC3C,QAAOC,EAAAd,EAAM,WAAWa,CAAE,IAAnB,YAAAC,EAAsB,QAAS,SACxC,CAAA,CAGF,MAAMC,EAAUb,EACb,IACC,CAACc,EAAOC,IAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA,CAAA,EAIxC,KAAK,EAAE,EAEJE,EAAwBb,EAAA,SAC5B,IAAML,EAAM,qBAAuBmB,qBAAmB,GACxD,EAEMC,EAAcf,WAAS,IAAOgB,wBAAsBrB,EAAM,KAAK,OAAQA,EAAM,SAAS,CAAC,EAEvFsB,EAAwBjB,EAAAA,SAAS,IAAM,OACvC,MAAA,GAACS,EAAAd,EAAM,OAAN,MAAAc,EAAY,SAAU,CAACM,GAAeA,EAAY,MAAM,SAAW,EAC/D,CAAC,EAEHA,EAAY,MAAM,IAAKH,GAAUjB,EAAM,KAAKiB,CAAK,CAAC,CAAA,CAC1D"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { AreaChartProps } from './types';
|
|
2
|
-
|
|
3
|
-
declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
4
|
-
props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & AreaChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
|
|
5
|
-
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
6
|
-
attrs: any;
|
|
7
|
-
slots: ReturnType<() => {}>;
|
|
8
|
-
emit: typeof __VLS_emit;
|
|
9
|
-
}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
10
|
-
[key: string]: any;
|
|
11
|
-
}> & {
|
|
12
|
-
__ctx?: Awaited<typeof __VLS_setup>;
|
|
13
|
-
};
|
|
14
|
-
export default _default;
|
|
15
|
-
type __VLS_Prettify<T> = {
|
|
16
|
-
[K in keyof T]: T[K];
|
|
17
|
-
} & {};
|