vue-chrts 0.1.4 → 0.1.6
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.
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { Position as g, CurveType as
|
|
3
|
-
import { VisXYContainer as
|
|
4
|
-
import
|
|
5
|
-
import { LegendPosition as
|
|
6
|
-
const
|
|
1
|
+
import { defineComponent as b, computed as d, createApp as x, createElementBlock as m, openBlock as l, normalizeClass as p, createVNode as r, createCommentVNode as y, unref as i, withCtx as B, createBlock as k, Fragment as C, renderList as V } from "vue";
|
|
2
|
+
import { Position as g, CurveType as F } from "@unovis/ts";
|
|
3
|
+
import { VisXYContainer as N, VisTooltip as O, VisLine as j, VisAxis as f, VisCrosshair as M, VisBulletLegend as P } from "@unovis/vue";
|
|
4
|
+
import D from "../Tooltip.js";
|
|
5
|
+
import { LegendPosition as E } from "../../types.js";
|
|
6
|
+
const $ = /* @__PURE__ */ b({
|
|
7
7
|
__name: "LineChart",
|
|
8
8
|
props: {
|
|
9
9
|
data: {},
|
|
@@ -29,42 +29,42 @@ const X = /* @__PURE__ */ v({
|
|
|
29
29
|
yTickLine: { type: Boolean }
|
|
30
30
|
},
|
|
31
31
|
setup(t) {
|
|
32
|
-
const n = t, h = (e) => Object.values(n.categories)[e].color,
|
|
32
|
+
const n = t, h = Object.values(n.categories).map((e, c) => `var(--vis-color${c})`), L = (e) => Object.values(n.categories)[e].color ?? h[e], T = d(() => (e, c) => {
|
|
33
33
|
if (typeof window > "u" || typeof document > "u")
|
|
34
34
|
return "";
|
|
35
35
|
try {
|
|
36
|
-
const o =
|
|
36
|
+
const o = x(D, {
|
|
37
37
|
data: e,
|
|
38
38
|
categories: n.categories,
|
|
39
|
-
xValue: n.xFormatter(Math.floor(
|
|
39
|
+
xValue: n.xFormatter(Math.floor(c))
|
|
40
40
|
}), a = document.createElement("div");
|
|
41
41
|
o.mount(a);
|
|
42
|
-
const
|
|
43
|
-
return o.unmount(),
|
|
42
|
+
const s = a.innerHTML;
|
|
43
|
+
return o.unmount(), s;
|
|
44
44
|
} catch {
|
|
45
45
|
return "";
|
|
46
46
|
}
|
|
47
|
-
}),
|
|
48
|
-
() => n.legendPosition ===
|
|
47
|
+
}), u = d(
|
|
48
|
+
() => n.legendPosition === E.Top
|
|
49
49
|
);
|
|
50
|
-
return (e,
|
|
51
|
-
class: p(["flex flex-col space-y-4", { "flex-col-reverse":
|
|
50
|
+
return (e, c) => (l(), m("div", {
|
|
51
|
+
class: p(["flex flex-col space-y-4", { "flex-col-reverse": u.value }])
|
|
52
52
|
}, [
|
|
53
|
-
r(i(
|
|
53
|
+
r(i(N), {
|
|
54
54
|
data: e.data,
|
|
55
55
|
height: e.height
|
|
56
56
|
}, {
|
|
57
|
-
default:
|
|
58
|
-
r(i(
|
|
57
|
+
default: B(() => [
|
|
58
|
+
r(i(O), {
|
|
59
59
|
"horizontal-placement": i(g).Right,
|
|
60
60
|
"vertical-placement": i(g).Top
|
|
61
61
|
}, null, 8, ["horizontal-placement", "vertical-placement"]),
|
|
62
|
-
(l(!0), m(
|
|
62
|
+
(l(!0), m(C, null, V(Object.keys(n.categories), (o, a) => (l(), k(i(j), {
|
|
63
63
|
key: a,
|
|
64
|
-
x: (
|
|
65
|
-
y: (
|
|
66
|
-
color:
|
|
67
|
-
"curve-type": e.curveType ?? i(
|
|
64
|
+
x: (s, v) => v,
|
|
65
|
+
y: (s) => s[o],
|
|
66
|
+
color: L(a),
|
|
67
|
+
"curve-type": e.curveType ?? i(F).MonotoneX
|
|
68
68
|
}, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
|
|
69
69
|
r(i(f), {
|
|
70
70
|
type: "x",
|
|
@@ -87,17 +87,17 @@ const X = /* @__PURE__ */ v({
|
|
|
87
87
|
"grid-line": e.yGridLine,
|
|
88
88
|
"tick-line": e.yTickLine
|
|
89
89
|
}, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"]),
|
|
90
|
-
e.hideTooltip ? y("", !0) : (l(), k(i(
|
|
90
|
+
e.hideTooltip ? y("", !0) : (l(), k(i(M), {
|
|
91
91
|
key: 0,
|
|
92
92
|
color: "#666",
|
|
93
|
-
template:
|
|
93
|
+
template: T.value
|
|
94
94
|
}, null, 8, ["template"]))
|
|
95
95
|
]),
|
|
96
96
|
_: 1
|
|
97
97
|
}, 8, ["data", "height"]),
|
|
98
98
|
e.hideLegend ? y("", !0) : (l(), m("div", {
|
|
99
99
|
key: 0,
|
|
100
|
-
class: p(["flex items center justify-end", { "pb-4":
|
|
100
|
+
class: p(["flex items center justify-end", { "pb-4": u.value }])
|
|
101
101
|
}, [
|
|
102
102
|
r(i(P), {
|
|
103
103
|
items: Object.values(e.categories)
|
|
@@ -107,5 +107,5 @@ const X = /* @__PURE__ */ v({
|
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
109
|
export {
|
|
110
|
-
|
|
110
|
+
$ as default
|
|
111
111
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as b, computed as v, createElementBlock as r, openBlock as l, createElementVNode as o, toDisplayString as i, Fragment as h, renderList as f, normalizeStyle as a } from "vue";
|
|
2
|
+
const x = {
|
|
3
3
|
class: "capitalize border-b mb-1 pb-1",
|
|
4
4
|
style: {
|
|
5
5
|
color: "var(--tooltip-value-color)",
|
|
6
6
|
borderColor: "rgba(255, 255, 255, 0.05)"
|
|
7
7
|
}
|
|
8
|
-
},
|
|
8
|
+
}, y = /* @__PURE__ */ b({
|
|
9
9
|
__name: "Tooltip",
|
|
10
10
|
props: {
|
|
11
11
|
data: {},
|
|
@@ -13,12 +13,12 @@ const f = {
|
|
|
13
13
|
xValue: {}
|
|
14
14
|
},
|
|
15
15
|
setup(c) {
|
|
16
|
-
const n = c, p = ["_index", "_stacked", "_ending"], d =
|
|
16
|
+
const n = c, p = ["_index", "_stacked", "_ending"], d = v(() => Object.entries(n.data ?? []).filter(
|
|
17
17
|
([e, u]) => !p.includes(e) && Object.keys(n.categories).includes(e)
|
|
18
18
|
));
|
|
19
19
|
return (e, u) => (l(), r("div", null, [
|
|
20
|
-
o("div",
|
|
21
|
-
(l(!0), r(
|
|
20
|
+
o("div", x, i(e.xValue), 1),
|
|
21
|
+
(l(!0), r(h, null, f(d.value, ([t, g], m) => {
|
|
22
22
|
var s;
|
|
23
23
|
return l(), r("div", {
|
|
24
24
|
key: t,
|
|
@@ -26,7 +26,7 @@ const f = {
|
|
|
26
26
|
}, [
|
|
27
27
|
o("span", {
|
|
28
28
|
style: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
|
|
29
|
-
backgroundColor: (s = e.categories[t]) != null && s.color ? e.categories[t].color :
|
|
29
|
+
backgroundColor: (s = e.categories[t]) != null && s.color ? e.categories[t].color : `var(--vis-color${m})`
|
|
30
30
|
}])
|
|
31
31
|
}, null, 4),
|
|
32
32
|
o("div", null, [
|
|
@@ -43,5 +43,5 @@ const f = {
|
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
45
|
export {
|
|
46
|
-
|
|
46
|
+
y as default
|
|
47
47
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-chrts",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
"scripts": {
|
|
18
18
|
"dev": "vite",
|
|
19
19
|
"build": "vue-tsc -b && vite build",
|
|
20
|
-
"preview": "vite preview"
|
|
20
|
+
"preview": "vite preview",
|
|
21
|
+
"release": "commit-and-tag-version"
|
|
21
22
|
},
|
|
22
23
|
"peerDependencies": {
|
|
23
24
|
"vue": "^3.5.13"
|
|
@@ -31,6 +32,7 @@
|
|
|
31
32
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
32
33
|
"@vue/tsconfig": "^0.7.0",
|
|
33
34
|
"@vueuse/core": "^13.0.0",
|
|
35
|
+
"commit-and-tag-version": "^12.5.1",
|
|
34
36
|
"tailwindcss": "^4.0.15",
|
|
35
37
|
"typescript": "~5.7.2",
|
|
36
38
|
"vite": "^6.2.0",
|