vue-chrts 0.2.0-test.8 → 0.2.0
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 +19 -19
- package/dist/components/AreaChart/types.d.ts +3 -17
- package/dist/components/BarChart/types.d.ts +1 -2
- package/dist/components/DonutChart/DonutChart.js +30 -28
- package/dist/components/DonutChart/types.d.ts +5 -1
- package/dist/components/LineChart/LineChart.js +24 -24
- package/dist/components/LineChart/types.d.ts +3 -18
- package/dist/components/Tooltip.js +13 -13
- package/dist/components/Tooltip.vue.d.ts +1 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +11 -9
- package/dist/types.d.ts +54 -1
- package/dist/types.js +4 -2
- package/package.json +15 -14
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as d, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as u, createCommentVNode as p, createElementVNode as X, unref as i, withCtx as
|
|
2
|
-
import { Position as
|
|
3
|
-
import { createMarkers as
|
|
4
|
-
import
|
|
5
|
-
import { VisXYContainer as H, VisTooltip as K, VisArea as q, VisLine as J, VisAxis as
|
|
1
|
+
import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as d, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as u, createCommentVNode as p, createElementVNode as X, unref as i, withCtx as S, createBlock as m, Fragment as L, renderList as Y, mergeProps as C, renderSlot as A } from "vue";
|
|
2
|
+
import { Position as b, CurveType as D } from "@unovis/ts";
|
|
3
|
+
import { createMarkers as z, getFirstPropertyValue as I } from "../../utils.js";
|
|
4
|
+
import x from "../Tooltip.js";
|
|
5
|
+
import { VisXYContainer as H, VisTooltip as K, VisArea as q, VisLine as J, VisAxis as B, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
|
|
6
6
|
import { LegendPosition as _ } from "../../types.js";
|
|
7
7
|
const ee = {
|
|
8
8
|
ref: "slotWrapper",
|
|
@@ -45,7 +45,7 @@ const ee = {
|
|
|
45
45
|
setup(n, { emit: $ }) {
|
|
46
46
|
const G = $, r = n, O = j(), h = w("slotWrapper"), s = R(), f = d(
|
|
47
47
|
() => Object.values(r.categories).map((e) => e.color)
|
|
48
|
-
), N = d(() => r.markerConfig ?
|
|
48
|
+
), N = d(() => r.markerConfig ? z(r.markerConfig) : ""), g = d(() => r.legendPosition === _.Top), E = d(() => {
|
|
49
49
|
const e = (t, o) => `
|
|
50
50
|
<linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
|
|
51
51
|
<stop offset="0%" stop-color="${o}" stop-opacity="1" />
|
|
@@ -84,30 +84,30 @@ const ee = {
|
|
|
84
84
|
padding: e.padding,
|
|
85
85
|
"svg-defs": E.value + N.value
|
|
86
86
|
}, {
|
|
87
|
-
default:
|
|
87
|
+
default: S(() => [
|
|
88
88
|
e.hideTooltip ? p("", !0) : (a(), m(i(K), {
|
|
89
89
|
key: 0,
|
|
90
|
-
"horizontal-placement": i(
|
|
91
|
-
"vertical-placement": i(
|
|
90
|
+
"horizontal-placement": i(b).Right,
|
|
91
|
+
"vertical-placement": i(b).Top
|
|
92
92
|
}, null, 8, ["horizontal-placement", "vertical-placement"])),
|
|
93
|
-
(a(!0), c(L, null,
|
|
93
|
+
(a(!0), c(L, null, Y(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
|
|
94
94
|
u(i(q), C({
|
|
95
95
|
x: (k, v) => v
|
|
96
96
|
}, { ref_for: !0 }, P(t), {
|
|
97
97
|
color: `url(#gradient${o}-${f.value[o]})`,
|
|
98
98
|
opacity: te,
|
|
99
|
-
"curve-type": e.curveType ?? i(
|
|
99
|
+
"curve-type": e.curveType ?? i(D).MonotoneX
|
|
100
100
|
}), null, 16, ["x", "color", "curve-type"]),
|
|
101
101
|
u(i(J), {
|
|
102
102
|
x: (k, v) => v,
|
|
103
103
|
y: (k) => k[t],
|
|
104
104
|
color: f.value[o],
|
|
105
|
-
"curve-type": e.curveType ?? i(
|
|
105
|
+
"curve-type": e.curveType ?? i(D).MonotoneX,
|
|
106
106
|
"line-width": e.lineWidth,
|
|
107
|
-
lineDashArray: e.lineDashArray
|
|
107
|
+
lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
|
|
108
108
|
}, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
|
|
109
109
|
], 64))), 128)),
|
|
110
|
-
e.hideXAxis ? p("", !0) : (a(), m(i(
|
|
110
|
+
e.hideXAxis ? p("", !0) : (a(), m(i(B), {
|
|
111
111
|
key: 1,
|
|
112
112
|
type: "x",
|
|
113
113
|
label: e.xLabel,
|
|
@@ -120,7 +120,7 @@ const ee = {
|
|
|
120
120
|
"tick-line": e.xTickLine,
|
|
121
121
|
"min-max-ticks-only": e.minMaxTicksOnly
|
|
122
122
|
}, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
|
|
123
|
-
e.hideYAxis ? p("", !0) : (a(), m(i(
|
|
123
|
+
e.hideYAxis ? p("", !0) : (a(), m(i(B), {
|
|
124
124
|
key: 2,
|
|
125
125
|
type: "y",
|
|
126
126
|
label: e.yLabel,
|
|
@@ -143,14 +143,14 @@ const ee = {
|
|
|
143
143
|
}, null, 8, ["items"])
|
|
144
144
|
], 2)),
|
|
145
145
|
X("div", ee, [
|
|
146
|
-
i(O).tooltip ?
|
|
146
|
+
i(O).tooltip ? A(e.$slots, "tooltip", {
|
|
147
147
|
key: 0,
|
|
148
148
|
values: s.value
|
|
149
|
-
}) : s.value ?
|
|
150
|
-
u(
|
|
149
|
+
}) : s.value ? A(e.$slots, "fallback", { key: 1 }, () => [
|
|
150
|
+
u(x, {
|
|
151
151
|
data: s.value,
|
|
152
152
|
categories: e.categories,
|
|
153
|
-
toolTipTitle: i(
|
|
153
|
+
toolTipTitle: i(I)(s.value) ?? "",
|
|
154
154
|
yFormatter: r.yFormatter
|
|
155
155
|
}, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
|
|
156
156
|
]) : p("", !0)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { axisFormatter, LegendPosition, MarkerConfig } from '../../types';
|
|
1
|
+
import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig } from '../../types';
|
|
2
2
|
import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
|
|
3
3
|
export interface AreaChartProps<T> {
|
|
4
4
|
/**
|
|
@@ -64,7 +64,7 @@ export interface AreaChartProps<T> {
|
|
|
64
64
|
/**
|
|
65
65
|
* Line dash array, see SVG's stroke-dasharray. Default: `undefined`
|
|
66
66
|
*/
|
|
67
|
-
lineDashArray?: number[];
|
|
67
|
+
lineDashArray?: number[][];
|
|
68
68
|
/**
|
|
69
69
|
* The desired number of ticks on the x-axis.
|
|
70
70
|
*/
|
|
@@ -129,19 +129,5 @@ export interface AreaChartProps<T> {
|
|
|
129
129
|
/**
|
|
130
130
|
* Crosshair configuration object for customizing the appearance of the crosshair line.
|
|
131
131
|
*/
|
|
132
|
-
crosshairConfig?:
|
|
133
|
-
/**
|
|
134
|
-
* The color of the crosshair line. Accepts any valid CSS color string.
|
|
135
|
-
* Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
|
|
136
|
-
*/
|
|
137
|
-
color?: string;
|
|
138
|
-
/**
|
|
139
|
-
* The stroke color of the crosshair line. Accepts any valid CSS color string.
|
|
140
|
-
*/
|
|
141
|
-
strokeColor?: string;
|
|
142
|
-
/**
|
|
143
|
-
* The stroke width of the crosshair line in pixels.
|
|
144
|
-
*/
|
|
145
|
-
strokeWidth?: number;
|
|
146
|
-
};
|
|
132
|
+
crosshairConfig?: CrosshairConfig;
|
|
147
133
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { BulletLegendItemInterface, Orientation } from '
|
|
2
|
-
import { LegendPosition, axisFormatter } from '../../types';
|
|
1
|
+
import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter } from '../../types';
|
|
3
2
|
type BarChartPropsBase<T> = {
|
|
4
3
|
/**
|
|
5
4
|
* The data to be displayed in the bar chart.
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
import { defineComponent as V, useSlots as b, useTemplateRef as
|
|
2
|
-
import { Donut as
|
|
3
|
-
import { DonutType as
|
|
4
|
-
import { VisSingleContainer as
|
|
5
|
-
const
|
|
1
|
+
import { defineComponent as V, useSlots as b, useTemplateRef as w, ref as D, createElementBlock as u, openBlock as c, Fragment as S, createElementVNode as o, createCommentVNode as p, createVNode as n, renderSlot as s, unref as l, withCtx as T, normalizeStyle as W, toDisplayString as B } from "vue";
|
|
2
|
+
import { Donut as L } from "@unovis/ts";
|
|
3
|
+
import { DonutType as $ } from "./types.js";
|
|
4
|
+
import { VisSingleContainer as H, VisTooltip as N, VisDonut as j, VisBulletLegend as z } from "@unovis/vue";
|
|
5
|
+
const A = {
|
|
6
6
|
ref: "slotWrapper",
|
|
7
7
|
class: "hidden"
|
|
8
|
-
},
|
|
8
|
+
}, E = { class: "flex items-center px-[15px] py-[10px]" }, R = {
|
|
9
9
|
key: 0,
|
|
10
10
|
class: "flex items-center justify-center mt-4"
|
|
11
|
-
},
|
|
11
|
+
}, U = /* @__PURE__ */ V({
|
|
12
12
|
__name: "DonutChart",
|
|
13
13
|
props: {
|
|
14
14
|
type: {},
|
|
15
15
|
data: {},
|
|
16
|
+
arcWidth: {},
|
|
16
17
|
height: {},
|
|
17
18
|
radius: {},
|
|
18
19
|
hideLegend: { type: Boolean },
|
|
@@ -21,63 +22,64 @@ const z = {
|
|
|
21
22
|
},
|
|
22
23
|
emits: ["click"],
|
|
23
24
|
setup(f, { emit: m }) {
|
|
24
|
-
const g = m,
|
|
25
|
+
const g = m, r = f, h = b(), i = w("slotWrapper"), t = D(), v = (e) => e, y = r.type === $.Half;
|
|
25
26
|
function k(e) {
|
|
26
27
|
return t.value = e, C();
|
|
27
28
|
}
|
|
28
29
|
function C(e) {
|
|
29
30
|
return typeof window > "u" ? "" : i.value ? i.value.innerHTML : "";
|
|
30
31
|
}
|
|
31
|
-
return (e,
|
|
32
|
+
return (e, d) => (c(), u(S, null, [
|
|
32
33
|
o("div", {
|
|
33
34
|
class: "flex items-center justify-center",
|
|
34
|
-
onClick:
|
|
35
|
+
onClick: d[0] || (d[0] = (a) => g("click", a, t.value))
|
|
35
36
|
}, [
|
|
36
|
-
|
|
37
|
+
n(l(H), {
|
|
37
38
|
data: e.data,
|
|
38
39
|
height: e.height,
|
|
39
40
|
margin: {}
|
|
40
41
|
}, {
|
|
41
|
-
default:
|
|
42
|
-
|
|
42
|
+
default: T(() => [
|
|
43
|
+
n(l(N), {
|
|
43
44
|
"horizontal-shift": 20,
|
|
44
45
|
"vertical-shift": 20,
|
|
45
46
|
triggers: {
|
|
46
|
-
[l(
|
|
47
|
+
[l(L).selectors.segment]: k
|
|
47
48
|
}
|
|
48
49
|
}, null, 8, ["triggers"]),
|
|
49
|
-
|
|
50
|
+
n(l(j), {
|
|
50
51
|
value: v,
|
|
51
52
|
"corner-radius": e.radius,
|
|
52
|
-
|
|
53
|
+
"arc-width": e.arcWidth ?? 20,
|
|
54
|
+
color: r.labels.map((a) => a.color),
|
|
53
55
|
"angle-range": y ? [-1.5707963267948966, 1.5707963267948966] : [],
|
|
54
|
-
"pad-angle":
|
|
55
|
-
}, null, 8, ["corner-radius", "color", "angle-range", "pad-angle"])
|
|
56
|
+
"pad-angle": r.padAngle || 0
|
|
57
|
+
}, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
|
|
56
58
|
]),
|
|
57
59
|
_: 1
|
|
58
60
|
}, 8, ["data", "height"]),
|
|
59
|
-
|
|
60
|
-
o("div",
|
|
61
|
-
l(h).tooltip ?
|
|
61
|
+
s(e.$slots, "default"),
|
|
62
|
+
o("div", A, [
|
|
63
|
+
l(h).tooltip ? s(e.$slots, "tooltip", {
|
|
62
64
|
key: 0,
|
|
63
65
|
values: t.value
|
|
64
|
-
}) : t.value ?
|
|
65
|
-
o("div",
|
|
66
|
+
}) : t.value ? s(e.$slots, "fallback", { key: 1 }, () => [
|
|
67
|
+
o("div", E, [
|
|
66
68
|
o("div", {
|
|
67
69
|
class: "w-2 h-2 rounded-full mr-2",
|
|
68
|
-
style:
|
|
70
|
+
style: W(`background-color: ${r.labels[t.value.index].color} ;`)
|
|
69
71
|
}, null, 4),
|
|
70
|
-
o("div", null,
|
|
72
|
+
o("div", null, B(t.value.data), 1)
|
|
71
73
|
])
|
|
72
74
|
]) : p("", !0)
|
|
73
75
|
], 512)
|
|
74
76
|
]),
|
|
75
|
-
e.hideLegend ? p("", !0) : (c(),
|
|
76
|
-
|
|
77
|
+
e.hideLegend ? p("", !0) : (c(), u("div", R, [
|
|
78
|
+
n(l(z), { items: e.labels }, null, 8, ["items"])
|
|
77
79
|
]))
|
|
78
80
|
], 64));
|
|
79
81
|
}
|
|
80
82
|
});
|
|
81
83
|
export {
|
|
82
|
-
|
|
84
|
+
U as default
|
|
83
85
|
};
|
|
@@ -10,8 +10,12 @@ export type DonutChartProps = {
|
|
|
10
10
|
*/
|
|
11
11
|
data: number[];
|
|
12
12
|
/**
|
|
13
|
-
* The
|
|
13
|
+
* The arc width of the chart in pixels.
|
|
14
14
|
*/
|
|
15
|
+
arcWidth?: number;
|
|
16
|
+
/**
|
|
17
|
+
* The height of the chart in pixels.
|
|
18
|
+
*/
|
|
15
19
|
height: number;
|
|
16
20
|
/**
|
|
17
21
|
* The radius of the donut in pixels.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as P, computed as k, useSlots as
|
|
1
|
+
import { defineComponent as P, computed as k, useSlots as O, useTemplateRef as j, ref as w, createElementBlock as c, openBlock as n, normalizeClass as g, createVNode as s, createCommentVNode as l, createElementVNode as x, unref as i, withCtx as M, createBlock as d, Fragment as W, renderList as E, mergeProps as G, renderSlot as h } from "vue";
|
|
2
2
|
import { Position as v, CurveType as X } from "@unovis/ts";
|
|
3
3
|
import { createMarkers as $, getFirstPropertyValue as z } from "../../utils.js";
|
|
4
4
|
import R from "../Tooltip.js";
|
|
@@ -48,24 +48,24 @@ const J = {
|
|
|
48
48
|
},
|
|
49
49
|
emits: ["click"],
|
|
50
50
|
setup(o, { emit: L }) {
|
|
51
|
-
const C = L, t = o, b = k(() => t.markerConfig ? $(t.markerConfig) : ""), B =
|
|
51
|
+
const C = L, t = o, b = k(() => t.markerConfig ? $(t.markerConfig) : ""), B = O(), p = j("slotWrapper"), a = w();
|
|
52
52
|
function D(e) {
|
|
53
|
-
return typeof window > "u" ? "" :
|
|
53
|
+
return typeof window > "u" ? "" : p.value ? p.value.innerHTML : "";
|
|
54
54
|
}
|
|
55
55
|
function V(e) {
|
|
56
|
-
return
|
|
56
|
+
return a.value = e, D();
|
|
57
57
|
}
|
|
58
|
-
const
|
|
58
|
+
const y = k(
|
|
59
59
|
() => t.legendPosition === I.Top
|
|
60
60
|
), A = Object.values(t.categories).map(
|
|
61
61
|
(e, r) => `var(--vis-color${r})`
|
|
62
62
|
), F = (e) => Object.values(t.categories)[e].color ?? A[e];
|
|
63
|
-
return (e, r) => (n(),
|
|
63
|
+
return (e, r) => (n(), c("div", {
|
|
64
64
|
class: g(["flex flex-col space-y-4", {
|
|
65
|
-
"flex-col-reverse":
|
|
65
|
+
"flex-col-reverse": y.value,
|
|
66
66
|
markers: !!t.markerConfig
|
|
67
67
|
}]),
|
|
68
|
-
onClick: r[0] || (r[0] = (
|
|
68
|
+
onClick: r[0] || (r[0] = (m) => C("click", m, a.value))
|
|
69
69
|
}, [
|
|
70
70
|
s(i(Y), {
|
|
71
71
|
data: e.data,
|
|
@@ -78,16 +78,16 @@ const J = {
|
|
|
78
78
|
"horizontal-placement": i(v).Right,
|
|
79
79
|
"vertical-placement": i(v).Top
|
|
80
80
|
}, null, 8, ["horizontal-placement", "vertical-placement"]),
|
|
81
|
-
(n(!0),
|
|
82
|
-
key:
|
|
81
|
+
(n(!0), c(W, null, E(Object.keys(t.categories), (m, u) => (n(), d(i(H), {
|
|
82
|
+
key: u,
|
|
83
83
|
x: (f, N) => N,
|
|
84
|
-
y: (f) => f[
|
|
85
|
-
color: F(
|
|
84
|
+
y: (f) => f[m],
|
|
85
|
+
color: F(u),
|
|
86
86
|
"curve-type": e.curveType ?? i(X).MonotoneX,
|
|
87
87
|
"line-width": e.lineWidth,
|
|
88
|
-
lineDashArray: e.lineDashArray
|
|
88
|
+
lineDashArray: e.lineDashArray ? e.lineDashArray[u] : void 0
|
|
89
89
|
}, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
|
|
90
|
-
e.hideXAxis ?
|
|
90
|
+
e.hideXAxis ? l("", !0) : (n(), d(i(T), {
|
|
91
91
|
key: 0,
|
|
92
92
|
type: "x",
|
|
93
93
|
"tick-format": e.xFormatter,
|
|
@@ -100,7 +100,7 @@ const J = {
|
|
|
100
100
|
"tick-values": e.xExplicitTicks,
|
|
101
101
|
"min-max-ticks-only": e.minMaxTicksOnly
|
|
102
102
|
}, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"])),
|
|
103
|
-
e.hideYAxis ?
|
|
103
|
+
e.hideYAxis ? l("", !0) : (n(), d(i(T), {
|
|
104
104
|
key: 1,
|
|
105
105
|
type: "y",
|
|
106
106
|
"tick-format": e.yFormatter,
|
|
@@ -110,30 +110,30 @@ const J = {
|
|
|
110
110
|
"grid-line": e.yGridLine,
|
|
111
111
|
"tick-line": e.yTickLine
|
|
112
112
|
}, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
|
|
113
|
-
e.hideTooltip ?
|
|
113
|
+
e.hideTooltip ? l("", !0) : (n(), d(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
|
|
114
114
|
]),
|
|
115
115
|
_: 1
|
|
116
116
|
}, 8, ["data", "padding", "height", "svgDefs"]),
|
|
117
|
-
e.hideLegend ?
|
|
117
|
+
e.hideLegend ? l("", !0) : (n(), c("div", {
|
|
118
118
|
key: 0,
|
|
119
|
-
class: g(["flex items center justify-end", { "pb-4":
|
|
119
|
+
class: g(["flex items center justify-end", { "pb-4": y.value }])
|
|
120
120
|
}, [
|
|
121
121
|
s(i(q), {
|
|
122
122
|
items: Object.values(e.categories)
|
|
123
123
|
}, null, 8, ["items"])
|
|
124
124
|
], 2)),
|
|
125
|
-
|
|
125
|
+
x("div", J, [
|
|
126
126
|
i(B).tooltip ? h(e.$slots, "tooltip", {
|
|
127
127
|
key: 0,
|
|
128
|
-
values:
|
|
129
|
-
}) :
|
|
128
|
+
values: a.value
|
|
129
|
+
}) : a.value ? h(e.$slots, "fallback", { key: 1 }, () => [
|
|
130
130
|
s(R, {
|
|
131
|
-
data:
|
|
131
|
+
data: a.value,
|
|
132
132
|
categories: e.categories,
|
|
133
|
-
toolTipTitle: i(z)(
|
|
133
|
+
toolTipTitle: i(z)(a.value) ?? "",
|
|
134
134
|
yFormatter: t.yFormatter
|
|
135
135
|
}, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
|
|
136
|
-
]) :
|
|
136
|
+
]) : l("", !0)
|
|
137
137
|
], 512)
|
|
138
138
|
], 2));
|
|
139
139
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { BulletLegendItemInterface, CurveType } from '
|
|
2
|
-
import { axisFormatter, LegendPosition, MarkerConfig } from '../../types';
|
|
1
|
+
import { axisFormatter, BulletLegendItemInterface, CrosshairConfig, CurveType, LegendPosition, MarkerConfig } from '../../types';
|
|
3
2
|
export interface LineChartProps<T> {
|
|
4
3
|
/**
|
|
5
4
|
* The data to be displayed in the line chart.
|
|
@@ -64,7 +63,7 @@ export interface LineChartProps<T> {
|
|
|
64
63
|
/**
|
|
65
64
|
* Line dash array, see SVG's stroke-dasharray. Default: `undefined`
|
|
66
65
|
*/
|
|
67
|
-
lineDashArray?: number[];
|
|
66
|
+
lineDashArray?: number[][];
|
|
68
67
|
/**
|
|
69
68
|
* The desired number of ticks on the x-axis.
|
|
70
69
|
*/
|
|
@@ -129,19 +128,5 @@ export interface LineChartProps<T> {
|
|
|
129
128
|
/**
|
|
130
129
|
* Crosshair configuration object for customizing the appearance of the crosshair line.
|
|
131
130
|
*/
|
|
132
|
-
crosshairConfig?:
|
|
133
|
-
/**
|
|
134
|
-
* The color of the crosshair line. Accepts any valid CSS color string.
|
|
135
|
-
* Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
|
|
136
|
-
*/
|
|
137
|
-
color?: string;
|
|
138
|
-
/**
|
|
139
|
-
* The stroke color of the crosshair line. Accepts any valid CSS color string.
|
|
140
|
-
*/
|
|
141
|
-
strokeColor?: string;
|
|
142
|
-
/**
|
|
143
|
-
* The stroke width of the crosshair line in pixels.
|
|
144
|
-
*/
|
|
145
|
-
strokeWidth?: number;
|
|
146
|
-
};
|
|
131
|
+
crosshairConfig?: CrosshairConfig;
|
|
147
132
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as b, computed as v, createElementBlock as r, openBlock as
|
|
2
|
-
const f = {
|
|
1
|
+
import { defineComponent as b, computed as v, createElementBlock as r, openBlock as i, createElementVNode as o, toDisplayString as l, Fragment as y, renderList as h, normalizeStyle as a } from "vue";
|
|
2
|
+
const f = { class: "px-[15px] py-[10px]" }, _ = {
|
|
3
3
|
class: "capitalize border-b mb-1 pb-1",
|
|
4
4
|
style: {
|
|
5
5
|
color: "var(--tooltip-value-color)",
|
|
@@ -14,29 +14,29 @@ const f = {
|
|
|
14
14
|
yFormatter: { type: Function }
|
|
15
15
|
},
|
|
16
16
|
setup(p) {
|
|
17
|
-
const
|
|
18
|
-
([e, g]) => !d.includes(e) && Object.keys(
|
|
17
|
+
const n = p, d = ["_index", "_stacked", "_ending"], m = v(() => Object.entries(n.data ?? []).filter(
|
|
18
|
+
([e, g]) => !d.includes(e) && Object.keys(n.categories).includes(e)
|
|
19
19
|
));
|
|
20
|
-
return (e, g) => (
|
|
21
|
-
o("div",
|
|
22
|
-
(
|
|
20
|
+
return (e, g) => (i(), r("div", f, [
|
|
21
|
+
o("div", _, l(e.toolTipTitle), 1),
|
|
22
|
+
(i(!0), r(y, null, h(m.value, ([t, s], u) => {
|
|
23
23
|
var c;
|
|
24
|
-
return
|
|
24
|
+
return i(), r("div", {
|
|
25
25
|
key: t,
|
|
26
26
|
style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
|
|
27
27
|
}, [
|
|
28
28
|
o("span", {
|
|
29
|
-
style:
|
|
29
|
+
style: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
|
|
30
30
|
backgroundColor: (c = e.categories[t]) != null && c.color ? e.categories[t].color : `var(--vis-color${u})`
|
|
31
31
|
}])
|
|
32
32
|
}, null, 4),
|
|
33
33
|
o("div", null, [
|
|
34
34
|
o("span", {
|
|
35
|
-
style:
|
|
36
|
-
},
|
|
35
|
+
style: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
|
|
36
|
+
}, l(e.categories[t].name) + ":", 1),
|
|
37
37
|
o("span", {
|
|
38
|
-
style:
|
|
39
|
-
},
|
|
38
|
+
style: a([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
|
|
39
|
+
}, l(e.yFormatter ? e.yFormatter(s) : s), 1)
|
|
40
40
|
])
|
|
41
41
|
]);
|
|
42
42
|
}), 128))
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { axisFormatter } from '../types';
|
|
2
|
-
import { BulletLegendItemInterface } from '@unovis/ts';
|
|
1
|
+
import { axisFormatter, BulletLegendItemInterface } from '../types';
|
|
3
2
|
declare const _default: <T>(__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<{
|
|
4
3
|
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & {
|
|
5
4
|
data: T;
|
package/dist/index.d.ts
CHANGED
|
@@ -3,5 +3,6 @@ import { default as AreaStackedChart } from './components/AreaStackedChart/AreaS
|
|
|
3
3
|
import { default as LineChart } from './components/LineChart/LineChart.vue';
|
|
4
4
|
import { default as BarChart } from './components/BarChart/BarChart.vue';
|
|
5
5
|
import { default as DonutChart } from './components/DonutChart/DonutChart.vue';
|
|
6
|
-
import { LegendPosition } from './types';
|
|
7
|
-
export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, LegendPosition };
|
|
6
|
+
import { LegendPosition, CurveType, Orientation, BulletLegendItemInterface, MarkerConfig, CrosshairConfig } from './types';
|
|
7
|
+
export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, Orientation, CurveType, LegendPosition };
|
|
8
|
+
export type { BulletLegendItemInterface, MarkerConfig, CrosshairConfig };
|
package/dist/index.js
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import { default as
|
|
1
|
+
import { default as a } from "./components/AreaChart/AreaChart.js";
|
|
2
2
|
import { default as o } from "./components/AreaStackedChart/AreaStackedChart.js";
|
|
3
3
|
import { default as d } from "./components/LineChart/LineChart.js";
|
|
4
|
-
import { default as
|
|
5
|
-
import { default as
|
|
6
|
-
import { LegendPosition as h } from "./types.js";
|
|
4
|
+
import { default as u } from "./components/BarChart/BarChart.js";
|
|
5
|
+
import { default as n } from "./components/DonutChart/DonutChart.js";
|
|
6
|
+
import { CurveType as x, LegendPosition as C, Orientation as h } from "./types.js";
|
|
7
7
|
export {
|
|
8
|
-
|
|
8
|
+
a as AreaChart,
|
|
9
9
|
o as AreaStackedChart,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
u as BarChart,
|
|
11
|
+
x as CurveType,
|
|
12
|
+
n as DonutChart,
|
|
13
|
+
C as LegendPosition,
|
|
14
|
+
d as LineChart,
|
|
15
|
+
h as Orientation
|
|
14
16
|
};
|
package/dist/types.d.ts
CHANGED
|
@@ -1,7 +1,45 @@
|
|
|
1
|
-
|
|
1
|
+
import { AreaChartProps } from './components/AreaChart/types';
|
|
2
|
+
import { BarChartProps } from './components/BarChart/types';
|
|
3
|
+
import { LineChartProps } from './components/LineChart/types';
|
|
4
|
+
import { DonutChartProps } from './components/DonutChart/types';
|
|
5
|
+
declare enum LegendPosition {
|
|
2
6
|
Top = "top",
|
|
3
7
|
Bottom = "bottom"
|
|
4
8
|
}
|
|
9
|
+
declare enum CurveType {
|
|
10
|
+
Basis = "basis",
|
|
11
|
+
BasisClosed = "basisClosed",
|
|
12
|
+
BasisOpen = "basisOpen",
|
|
13
|
+
Bundle = "bundle",
|
|
14
|
+
Cardinal = "cardinal",
|
|
15
|
+
CardinalClosed = "cardinalClosed",
|
|
16
|
+
CardinalOpen = "cardinalOpen",
|
|
17
|
+
CatmullRom = "catmullRom",
|
|
18
|
+
CatmullRomClosed = "catmullRomClosed",
|
|
19
|
+
CatmullRomOpen = "catmullRomOpen",
|
|
20
|
+
Linear = "linear",
|
|
21
|
+
LinearClosed = "linearClosed",
|
|
22
|
+
MonotoneX = "monotoneX",
|
|
23
|
+
MonotoneY = "monotoneY",
|
|
24
|
+
Natural = "natural",
|
|
25
|
+
Step = "step",
|
|
26
|
+
StepAfter = "stepAfter",
|
|
27
|
+
StepBefore = "stepBefore"
|
|
28
|
+
}
|
|
29
|
+
interface BulletLegendItemInterface {
|
|
30
|
+
name: string | number;
|
|
31
|
+
color?: string;
|
|
32
|
+
className?: string;
|
|
33
|
+
shape?: any;
|
|
34
|
+
inactive?: boolean;
|
|
35
|
+
hidden?: boolean;
|
|
36
|
+
pointer?: boolean;
|
|
37
|
+
}
|
|
38
|
+
declare enum Orientation {
|
|
39
|
+
Horizontal = "horizontal",
|
|
40
|
+
Vertical = "vertical"
|
|
41
|
+
}
|
|
42
|
+
export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, };
|
|
5
43
|
export type axisFormatter = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
|
|
6
44
|
export interface MarkerConfig {
|
|
7
45
|
type?: "circle" | "square" | "triangle" | "diamond";
|
|
@@ -10,3 +48,18 @@ export interface MarkerConfig {
|
|
|
10
48
|
color?: string;
|
|
11
49
|
strokeColor?: string;
|
|
12
50
|
}
|
|
51
|
+
export interface CrosshairConfig {
|
|
52
|
+
/**
|
|
53
|
+
* The color of the crosshair line. Accepts any valid CSS color string.
|
|
54
|
+
* Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
|
|
55
|
+
*/
|
|
56
|
+
color?: string;
|
|
57
|
+
/**
|
|
58
|
+
* The stroke color of the crosshair line. Accepts any valid CSS color string.
|
|
59
|
+
*/
|
|
60
|
+
strokeColor?: string;
|
|
61
|
+
/**
|
|
62
|
+
* The stroke width of the crosshair line in pixels.
|
|
63
|
+
*/
|
|
64
|
+
strokeWidth?: number;
|
|
65
|
+
}
|
package/dist/types.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
var
|
|
1
|
+
var l = /* @__PURE__ */ ((a) => (a.Top = "top", a.Bottom = "bottom", a))(l || {}), o = /* @__PURE__ */ ((a) => (a.Basis = "basis", a.BasisClosed = "basisClosed", a.BasisOpen = "basisOpen", a.Bundle = "bundle", a.Cardinal = "cardinal", a.CardinalClosed = "cardinalClosed", a.CardinalOpen = "cardinalOpen", a.CatmullRom = "catmullRom", a.CatmullRomClosed = "catmullRomClosed", a.CatmullRomOpen = "catmullRomOpen", a.Linear = "linear", a.LinearClosed = "linearClosed", a.MonotoneX = "monotoneX", a.MonotoneY = "monotoneY", a.Natural = "natural", a.Step = "step", a.StepAfter = "stepAfter", a.StepBefore = "stepBefore", a))(o || {}), t = /* @__PURE__ */ ((a) => (a.Horizontal = "horizontal", a.Vertical = "vertical", a))(t || {});
|
|
2
2
|
export {
|
|
3
|
-
o as
|
|
3
|
+
o as CurveType,
|
|
4
|
+
l as LegendPosition,
|
|
5
|
+
t as Orientation
|
|
4
6
|
};
|
package/package.json
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-chrts",
|
|
3
|
-
"version": "0.2.0
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
7
7
|
],
|
|
8
|
-
"main": "./dist/index.
|
|
8
|
+
"main": "./dist/index.umd.cjs",
|
|
9
9
|
"module": "./dist/index.js",
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
11
11
|
"exports": {
|
|
12
12
|
".": {
|
|
13
|
-
"import": "./dist/index.js"
|
|
13
|
+
"import": "./dist/index.js",
|
|
14
|
+
"require": "./dist/index.umd.cjs"
|
|
14
15
|
}
|
|
15
16
|
},
|
|
16
17
|
"scripts": {
|
|
@@ -23,21 +24,21 @@
|
|
|
23
24
|
"vue": "^3.5.13"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
26
|
-
"@tailwindcss/vite": "^4.
|
|
27
|
-
"@tanstack/vue-table": "^8.21.
|
|
28
|
-
"@types/node": "^22.
|
|
27
|
+
"@tailwindcss/vite": "^4.0.15",
|
|
28
|
+
"@tanstack/vue-table": "^8.21.2",
|
|
29
|
+
"@types/node": "^22.13.11",
|
|
29
30
|
"@unovis/ts": "^1.5.2",
|
|
30
31
|
"@unovis/vue": "^1.5.2",
|
|
31
|
-
"@vitejs/plugin-vue": "^5.2.
|
|
32
|
+
"@vitejs/plugin-vue": "^5.2.1",
|
|
32
33
|
"@vue/tsconfig": "^0.7.0",
|
|
33
|
-
"@vueuse/core": "^13.
|
|
34
|
+
"@vueuse/core": "^13.0.0",
|
|
34
35
|
"commit-and-tag-version": "^12.5.1",
|
|
35
|
-
"tailwindcss": "^4.
|
|
36
|
-
"typescript": "~5.7.
|
|
37
|
-
"vite": "^6.
|
|
38
|
-
"vite-plugin-dts": "^4.5.
|
|
39
|
-
"vue-router": "^4.5.
|
|
40
|
-
"vue-tsc": "^2.2.
|
|
36
|
+
"tailwindcss": "^4.0.15",
|
|
37
|
+
"typescript": "~5.7.2",
|
|
38
|
+
"vite": "^6.2.0",
|
|
39
|
+
"vite-plugin-dts": "^4.5.3",
|
|
40
|
+
"vue-router": "^4.5.0",
|
|
41
|
+
"vue-tsc": "^2.2.4"
|
|
41
42
|
},
|
|
42
43
|
"packageManager": "pnpm@8.15.4+sha256.cea6d0bdf2de3a0549582da3983c70c92ffc577ff4410cbf190817ddc35137c2"
|
|
43
44
|
}
|