vue-chrts 0.1.0-beta.2-internal-18 → 0.1.0-beta.2-internal-19

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/package.json CHANGED
@@ -1,16 +1,17 @@
1
1
  {
2
2
  "name": "vue-chrts",
3
- "version": "0.1.0-beta.2-internal-18",
3
+ "version": "0.1.0-beta.2-internal-19",
4
4
  "license": "MIT",
5
- "files": [
6
- "dist"
7
- ],
8
- "main": "./dist/index.cjs",
9
- "module": "./dist/index.js",
10
- "types": "./dist/index.d.ts",
11
- "typings": "./index.d.ts",
12
5
  "type": "module",
13
- "sideEffects": false,
6
+ "files": ["dist"],
7
+ "main": "./dist/my-lib.umd.cjs",
8
+ "module": "./dist/my-lib.js",
9
+ "exports": {
10
+ ".": {
11
+ "import": "./dist/my-lib.js",
12
+ "require": "./dist/my-lib.umd.cjs"
13
+ }
14
+ },
14
15
  "scripts": {
15
16
  "dev": "vite",
16
17
  "build": "vite build",
@@ -1,522 +0,0 @@
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
- };
@@ -1,10 +0,0 @@
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"})});