vue-chrts 0.2.0-test.5 → 0.2.0-test.7
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.vue.d.ts +4 -2
- package/dist/components/AreaChart/types.d.ts +20 -2
- package/dist/components/AreaStackedChart/types.d.ts +18 -0
- package/dist/components/BarChart/BarChart.vue.d.ts +5 -3
- package/dist/components/BarChart/stackedGroupedUtils.d.ts +19 -0
- package/dist/components/BarChart/types.d.ts +41 -22
- package/dist/components/DonutChart/DonutChart.vue.d.ts +4 -2
- package/dist/components/DonutChart/types.d.ts +7 -3
- package/dist/components/LineChart/LineChart.vue.d.ts +4 -2
- package/dist/components/LineChart/types.d.ts +24 -5
- package/dist/components/Tooltip.vue.d.ts +3 -2
- package/dist/index.d.ts +2 -3
- package/dist/index.js.js +753 -0
- package/dist/types.d.ts +6 -43
- package/dist/utils.d.ts +4 -1
- package/package.json +14 -15
- package/dist/_virtual/_plugin-vue_export-helper.js +0 -9
- package/dist/components/AreaChart/AreaChart.js +0 -6
- package/dist/components/AreaChart/AreaChart2.js +0 -163
- package/dist/components/AreaStackedChart/AreaStackedChart.js +0 -80
- package/dist/components/AreaStackedChart/AreaStackedChart2.js +0 -4
- package/dist/components/BarChart/BarChart.js +0 -192
- package/dist/components/BarChart/BarChart2.js +0 -4
- package/dist/components/DonutChart/DonutChart.js +0 -77
- package/dist/components/DonutChart/DonutChart2.js +0 -4
- package/dist/components/DonutChart/types.js +0 -4
- package/dist/components/LineChart/LineChart.js +0 -142
- package/dist/components/LineChart/LineChart2.js +0 -4
- package/dist/components/Tooltip.js +0 -48
- package/dist/components/Tooltip2.js +0 -4
- package/dist/index.js +0 -16
- package/dist/index.js.css +0 -1
- package/dist/types.js +0 -6
- package/dist/utils.js +0 -34
package/dist/types.d.ts
CHANGED
|
@@ -1,49 +1,12 @@
|
|
|
1
|
-
|
|
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 {
|
|
1
|
+
export declare enum LegendPosition {
|
|
6
2
|
Top = "top",
|
|
7
3
|
Bottom = "bottom"
|
|
8
4
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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, };
|
|
43
|
-
export type axisFormatter<T> = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
|
|
44
|
-
export type MarkerConfig = {
|
|
45
|
-
type: "circle" | "square" | "triangle" | "diamond";
|
|
5
|
+
export type axisFormatter = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
|
|
6
|
+
export interface MarkerConfig {
|
|
7
|
+
type?: "circle" | "square" | "triangle" | "diamond";
|
|
46
8
|
size?: number;
|
|
47
9
|
strokeWidth?: number;
|
|
48
10
|
color?: string;
|
|
49
|
-
|
|
11
|
+
strokeColor?: string;
|
|
12
|
+
}
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { MarkerConfig } from './types';
|
|
2
2
|
export declare function getDistributedIndices(length: number, numTicks: number): number[];
|
|
3
3
|
export declare function getFirstPropertyValue(obj: unknown): undefined;
|
|
4
|
-
export declare const markerShape: (type: string, size: number, strokeWidth: number, color: string) => string;
|
|
4
|
+
export declare const markerShape: (type: string, size: number, strokeWidth: number, color: string, strokeColor: string) => string;
|
|
5
5
|
export declare function createMarkers(markerConfig: Record<string, MarkerConfig>): string;
|
|
6
|
+
export declare const flattenData: (data: any[], xAxis: string) => {
|
|
7
|
+
month: any;
|
|
8
|
+
}[];
|
package/package.json
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-chrts",
|
|
3
|
-
"version": "0.2.0-test.
|
|
3
|
+
"version": "0.2.0-test.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
7
7
|
],
|
|
8
|
-
"main": "./dist/index.
|
|
8
|
+
"main": "./dist/index.js",
|
|
9
9
|
"module": "./dist/index.js",
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
11
11
|
"exports": {
|
|
12
12
|
".": {
|
|
13
|
-
"import": "./dist/index.js"
|
|
14
|
-
"require": "./dist/index.umd.cjs"
|
|
13
|
+
"import": "./dist/index.js"
|
|
15
14
|
}
|
|
16
15
|
},
|
|
17
16
|
"scripts": {
|
|
@@ -24,21 +23,21 @@
|
|
|
24
23
|
"vue": "^3.5.13"
|
|
25
24
|
},
|
|
26
25
|
"devDependencies": {
|
|
27
|
-
"@tailwindcss/vite": "^4.
|
|
28
|
-
"@tanstack/vue-table": "^8.21.
|
|
29
|
-
"@types/node": "^22.
|
|
26
|
+
"@tailwindcss/vite": "^4.1.11",
|
|
27
|
+
"@tanstack/vue-table": "^8.21.3",
|
|
28
|
+
"@types/node": "^22.16.5",
|
|
30
29
|
"@unovis/ts": "^1.5.2",
|
|
31
30
|
"@unovis/vue": "^1.5.2",
|
|
32
|
-
"@vitejs/plugin-vue": "^5.2.
|
|
31
|
+
"@vitejs/plugin-vue": "^5.2.4",
|
|
33
32
|
"@vue/tsconfig": "^0.7.0",
|
|
34
|
-
"@vueuse/core": "^13.
|
|
33
|
+
"@vueuse/core": "^13.5.0",
|
|
35
34
|
"commit-and-tag-version": "^12.5.1",
|
|
36
|
-
"tailwindcss": "^4.
|
|
37
|
-
"typescript": "~5.7.
|
|
38
|
-
"vite": "^6.
|
|
39
|
-
"vite-plugin-dts": "^4.5.
|
|
40
|
-
"vue-router": "^4.5.
|
|
41
|
-
"vue-tsc": "^2.2.
|
|
35
|
+
"tailwindcss": "^4.1.11",
|
|
36
|
+
"typescript": "~5.7.3",
|
|
37
|
+
"vite": "^6.3.5",
|
|
38
|
+
"vite-plugin-dts": "^4.5.4",
|
|
39
|
+
"vue-router": "^4.5.1",
|
|
40
|
+
"vue-tsc": "^2.2.12"
|
|
42
41
|
},
|
|
43
42
|
"packageManager": "pnpm@8.15.4+sha256.cea6d0bdf2de3a0549582da3983c70c92ffc577ff4410cbf190817ddc35137c2"
|
|
44
43
|
}
|
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
import { defineComponent as P, useSlots as W, useTemplateRef as M, ref as U, computed as u, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as d, createCommentVNode as l, createElementVNode as j, unref as i, withCtx as w, createBlock as m, Fragment as L, renderList as x, mergeProps as R, renderSlot as C } from "vue";
|
|
2
|
-
import { Position as b, CurveType as A } from "@unovis/ts";
|
|
3
|
-
import { createMarkers as X, getFirstPropertyValue as S } from "../../utils.js";
|
|
4
|
-
import Y from "../Tooltip.js";
|
|
5
|
-
import { VisXYContainer as z, VisTooltip as I, VisArea as H, VisLine as K, VisAxis as B, VisCrosshair as q, VisBulletLegend as J } from "@unovis/vue";
|
|
6
|
-
import { LegendPosition as Q } from "../../types.js";
|
|
7
|
-
const Z = {
|
|
8
|
-
ref: "slotWrapper",
|
|
9
|
-
class: "hidden"
|
|
10
|
-
}, y = 24, D = 4, _ = 0.5, V = "#3b82f6", ne = /* @__PURE__ */ P({
|
|
11
|
-
__name: "AreaChart",
|
|
12
|
-
props: {
|
|
13
|
-
data: {},
|
|
14
|
-
height: {},
|
|
15
|
-
xLabel: {},
|
|
16
|
-
yLabel: {},
|
|
17
|
-
padding: { default: () => ({ top: 5, right: 5, bottom: 5, left: 5 }) },
|
|
18
|
-
categories: {},
|
|
19
|
-
markerConfig: {},
|
|
20
|
-
xFormatter: {},
|
|
21
|
-
yFormatter: {},
|
|
22
|
-
curveType: {},
|
|
23
|
-
lineWidth: { default: 2 },
|
|
24
|
-
lineDashArray: {},
|
|
25
|
-
xNumTicks: { default: (n) => n.data.length > y ? y / D : n.data.length - 1 },
|
|
26
|
-
xExplicitTicks: {},
|
|
27
|
-
minMaxTicksOnly: { type: Boolean },
|
|
28
|
-
yNumTicks: { default: (n) => n.data.length > y ? y / D : n.data.length - 1 },
|
|
29
|
-
hideLegend: { type: Boolean },
|
|
30
|
-
hideTooltip: { type: Boolean },
|
|
31
|
-
legendPosition: {},
|
|
32
|
-
xDomainLine: { type: Boolean },
|
|
33
|
-
yDomainLine: { type: Boolean },
|
|
34
|
-
xTickLine: { type: Boolean },
|
|
35
|
-
yTickLine: { type: Boolean },
|
|
36
|
-
xGridLine: { type: Boolean },
|
|
37
|
-
yGridLine: { type: Boolean },
|
|
38
|
-
hideXAxis: { type: Boolean },
|
|
39
|
-
hideYAxis: { type: Boolean }
|
|
40
|
-
},
|
|
41
|
-
setup(n) {
|
|
42
|
-
const r = n, F = W(), h = M("slotWrapper"), s = U(), f = u(
|
|
43
|
-
() => Object.values(r.categories).map((e) => e.color)
|
|
44
|
-
), v = u(() => r.legendPosition === Q.Top), $ = u(() => {
|
|
45
|
-
const e = (t, o) => `
|
|
46
|
-
<linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
|
|
47
|
-
<stop offset="0%" stop-color="${o}" stop-opacity="1" />
|
|
48
|
-
<stop offset="100%" stop-color="${o}" stop-opacity="0" />
|
|
49
|
-
</linearGradient>
|
|
50
|
-
`, p = (t, o) => `
|
|
51
|
-
<linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
|
|
52
|
-
<stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
|
|
53
|
-
<stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
|
|
54
|
-
</linearGradient>
|
|
55
|
-
`;
|
|
56
|
-
return f.value.map(
|
|
57
|
-
(t, o) => t != null && t.includes("#") ? e(o, t) : p(o, t ?? V)
|
|
58
|
-
).join("");
|
|
59
|
-
}), G = u(() => r.markerConfig ? X(r.markerConfig) : "");
|
|
60
|
-
function O(e) {
|
|
61
|
-
var p;
|
|
62
|
-
return {
|
|
63
|
-
y: (t) => Number(t[e]),
|
|
64
|
-
color: ((p = r.categories[e]) == null ? void 0 : p.color) ?? V
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
function N(e) {
|
|
68
|
-
return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
|
|
69
|
-
}
|
|
70
|
-
function E(e) {
|
|
71
|
-
return s.value = e, N();
|
|
72
|
-
}
|
|
73
|
-
return (e, p) => (a(), c("div", {
|
|
74
|
-
class: T(["flex flex-col space-y-4", { "flex-col-reverse": v.value, markers: !!r.markerConfig }])
|
|
75
|
-
}, [
|
|
76
|
-
d(i(z), {
|
|
77
|
-
data: e.data,
|
|
78
|
-
height: e.height,
|
|
79
|
-
padding: e.padding,
|
|
80
|
-
"svg-defs": $.value + G.value
|
|
81
|
-
}, {
|
|
82
|
-
default: w(() => [
|
|
83
|
-
e.hideTooltip ? l("", !0) : (a(), m(i(I), {
|
|
84
|
-
key: 0,
|
|
85
|
-
"horizontal-placement": i(b).Right,
|
|
86
|
-
"vertical-placement": i(b).Top
|
|
87
|
-
}, null, 8, ["horizontal-placement", "vertical-placement"])),
|
|
88
|
-
(a(!0), c(L, null, x(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
|
|
89
|
-
d(i(H), R({
|
|
90
|
-
x: (g, k) => k,
|
|
91
|
-
ref_for: !0
|
|
92
|
-
}, O(t), {
|
|
93
|
-
color: `url(#gradient${o}-${f.value[o]})`,
|
|
94
|
-
opacity: _,
|
|
95
|
-
"curve-type": e.curveType ?? i(A).MonotoneX
|
|
96
|
-
}), null, 16, ["x", "color", "curve-type"]),
|
|
97
|
-
d(i(K), {
|
|
98
|
-
x: (g, k) => k,
|
|
99
|
-
y: (g) => g[t],
|
|
100
|
-
color: f.value[o],
|
|
101
|
-
"curve-type": e.curveType ?? i(A).MonotoneX,
|
|
102
|
-
"line-width": e.lineWidth,
|
|
103
|
-
lineDashArray: e.lineDashArray
|
|
104
|
-
}, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
|
|
105
|
-
], 64))), 128)),
|
|
106
|
-
e.hideXAxis ? l("", !0) : (a(), m(i(B), {
|
|
107
|
-
key: 1,
|
|
108
|
-
type: "x",
|
|
109
|
-
label: e.xLabel,
|
|
110
|
-
"label-margin": 8,
|
|
111
|
-
"num-ticks": e.xNumTicks,
|
|
112
|
-
"tick-format": e.xFormatter,
|
|
113
|
-
"tick-values": e.xExplicitTicks,
|
|
114
|
-
"grid-line": e.xGridLine,
|
|
115
|
-
"domain-line": e.xDomainLine,
|
|
116
|
-
"tick-line": e.xTickLine,
|
|
117
|
-
"min-max-ticks-only": e.minMaxTicksOnly
|
|
118
|
-
}, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
|
|
119
|
-
e.hideYAxis ? l("", !0) : (a(), m(i(B), {
|
|
120
|
-
key: 2,
|
|
121
|
-
type: "y",
|
|
122
|
-
label: e.yLabel,
|
|
123
|
-
"num-ticks": e.yNumTicks,
|
|
124
|
-
"tick-format": e.yFormatter,
|
|
125
|
-
"grid-line": e.yGridLine,
|
|
126
|
-
"domain-line": e.yDomainLine,
|
|
127
|
-
"tick-line": e.yTickLine
|
|
128
|
-
}, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
|
|
129
|
-
e.hideTooltip ? l("", !0) : (a(), m(i(q), {
|
|
130
|
-
key: 3,
|
|
131
|
-
color: "#666",
|
|
132
|
-
template: E
|
|
133
|
-
}))
|
|
134
|
-
]),
|
|
135
|
-
_: 1
|
|
136
|
-
}, 8, ["data", "height", "padding", "svg-defs"]),
|
|
137
|
-
e.hideLegend ? l("", !0) : (a(), c("div", {
|
|
138
|
-
key: 0,
|
|
139
|
-
class: T(["flex items-center justify-end", { "pb-4": v.value }])
|
|
140
|
-
}, [
|
|
141
|
-
d(i(J), {
|
|
142
|
-
items: Object.values(e.categories)
|
|
143
|
-
}, null, 8, ["items"])
|
|
144
|
-
], 2)),
|
|
145
|
-
j("div", Z, [
|
|
146
|
-
i(F).tooltip ? C(e.$slots, "tooltip", {
|
|
147
|
-
key: 0,
|
|
148
|
-
values: s.value
|
|
149
|
-
}, void 0, !0) : s.value ? C(e.$slots, "fallback", { key: 1 }, () => [
|
|
150
|
-
d(Y, {
|
|
151
|
-
data: s.value,
|
|
152
|
-
categories: e.categories,
|
|
153
|
-
toolTipTitle: i(S)(s.value) ?? "",
|
|
154
|
-
yFormatter: r.yFormatter
|
|
155
|
-
}, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
|
|
156
|
-
], !0) : l("", !0)
|
|
157
|
-
], 512)
|
|
158
|
-
], 2));
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
export {
|
|
162
|
-
ne as default
|
|
163
|
-
};
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { defineComponent as y, computed as f, createApp as h, createElementBlock as g, openBlock as r, createVNode as n, createElementVNode as B, unref as t, withCtx as L, createBlock as v, createCommentVNode as k } from "vue";
|
|
2
|
-
import { VisXYContainer as x, VisArea as T, VisAxis as c, VisCrosshair as b, VisBulletLegend as V } from "@unovis/vue";
|
|
3
|
-
import { CurveType as _ } from "@unovis/ts";
|
|
4
|
-
import C from "../Tooltip.js";
|
|
5
|
-
const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center justify-end" }, G = /* @__PURE__ */ y({
|
|
6
|
-
__name: "AreaStackedChart",
|
|
7
|
-
props: {
|
|
8
|
-
data: {},
|
|
9
|
-
height: {},
|
|
10
|
-
categories: {},
|
|
11
|
-
hideTooltip: { type: Boolean },
|
|
12
|
-
xLabel: {},
|
|
13
|
-
yLabel: {},
|
|
14
|
-
padding: {},
|
|
15
|
-
hideLegend: { type: Boolean },
|
|
16
|
-
xGridLine: { type: Boolean },
|
|
17
|
-
xDomainLine: { type: Boolean },
|
|
18
|
-
yGridLine: { type: Boolean },
|
|
19
|
-
yDomainLine: { type: Boolean },
|
|
20
|
-
xTickLine: { type: Boolean },
|
|
21
|
-
yTickLine: { type: Boolean }
|
|
22
|
-
},
|
|
23
|
-
setup(l) {
|
|
24
|
-
const i = l, s = f(() => (e, m) => {
|
|
25
|
-
if (typeof window > "u" || typeof document > "u")
|
|
26
|
-
return "";
|
|
27
|
-
try {
|
|
28
|
-
const o = h(C, {
|
|
29
|
-
data: e,
|
|
30
|
-
categories: i.categories
|
|
31
|
-
}), a = document.createElement("div");
|
|
32
|
-
o.mount(a);
|
|
33
|
-
const u = a.innerHTML;
|
|
34
|
-
return o.unmount(), u;
|
|
35
|
-
} catch {
|
|
36
|
-
return "";
|
|
37
|
-
}
|
|
38
|
-
}), p = (e) => Number.parseInt(e.time), d = [(e) => e.firstTime, (e) => e.returning];
|
|
39
|
-
return (e, m) => (r(), g("div", N, [
|
|
40
|
-
n(t(x), {
|
|
41
|
-
data: e.data,
|
|
42
|
-
padding: e.padding,
|
|
43
|
-
height: e.height
|
|
44
|
-
}, {
|
|
45
|
-
default: L(() => [
|
|
46
|
-
n(t(T), {
|
|
47
|
-
x: p,
|
|
48
|
-
y: d,
|
|
49
|
-
color: Object.values(i.categories).map((o) => o.color),
|
|
50
|
-
"curve-type": t(_).Linear
|
|
51
|
-
}, null, 8, ["color", "curve-type"]),
|
|
52
|
-
n(t(c), {
|
|
53
|
-
type: "x",
|
|
54
|
-
label: "Time",
|
|
55
|
-
"num-ticks": 12
|
|
56
|
-
}),
|
|
57
|
-
n(t(c), {
|
|
58
|
-
type: "y",
|
|
59
|
-
label: "Number of visitors",
|
|
60
|
-
"num-ticks": 3
|
|
61
|
-
}),
|
|
62
|
-
e.hideTooltip ? k("", !0) : (r(), v(t(b), {
|
|
63
|
-
key: 0,
|
|
64
|
-
color: "#666",
|
|
65
|
-
template: s.value
|
|
66
|
-
}, null, 8, ["template"]))
|
|
67
|
-
]),
|
|
68
|
-
_: 1
|
|
69
|
-
}, 8, ["data", "padding", "height"]),
|
|
70
|
-
B("div", A, [
|
|
71
|
-
n(t(V), {
|
|
72
|
-
items: Object.values(e.categories)
|
|
73
|
-
}, null, 8, ["items"])
|
|
74
|
-
])
|
|
75
|
-
]));
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
export {
|
|
79
|
-
G as default
|
|
80
|
-
};
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
import { defineComponent as M, useSlots as E, useTemplateRef as $, ref as S, computed as s, createElementBlock as y, openBlock as d, normalizeClass as B, createVNode as u, createCommentVNode as g, createElementVNode as z, unref as a, withCtx as H, createBlock as m, Fragment as W, renderSlot as P } from "vue";
|
|
2
|
-
import { Orientation as l, StackedBar as X, GroupedBar as Y } from "@unovis/ts";
|
|
3
|
-
import { getFirstPropertyValue as R } from "../../utils.js";
|
|
4
|
-
import { VisXYContainer as q, VisTooltip as U, VisStackedBar as k, VisGroupedBar as I, VisAxis as V, VisBulletLegend as J } from "@unovis/vue";
|
|
5
|
-
import K from "../Tooltip.js";
|
|
6
|
-
import { LegendPosition as Q } from "../../types.js";
|
|
7
|
-
const Z = {
|
|
8
|
-
ref: "slotWrapper",
|
|
9
|
-
class: "hidden"
|
|
10
|
-
}, re = /* @__PURE__ */ M({
|
|
11
|
-
__name: "BarChart",
|
|
12
|
-
props: {
|
|
13
|
-
data: {},
|
|
14
|
-
stacked: { type: Boolean },
|
|
15
|
-
stackAndGrouped: { type: Boolean },
|
|
16
|
-
height: {},
|
|
17
|
-
xLabel: {},
|
|
18
|
-
yLabel: {},
|
|
19
|
-
padding: { default: () => ({
|
|
20
|
-
top: 5,
|
|
21
|
-
right: 5,
|
|
22
|
-
bottom: 5,
|
|
23
|
-
left: 5
|
|
24
|
-
}) },
|
|
25
|
-
categories: {},
|
|
26
|
-
xFormatter: {},
|
|
27
|
-
yFormatter: {},
|
|
28
|
-
yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
|
|
29
|
-
minMaxTicksOnly: { type: Boolean },
|
|
30
|
-
xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
|
|
31
|
-
xExplicitTicks: {},
|
|
32
|
-
yAxis: {},
|
|
33
|
-
groupPadding: {},
|
|
34
|
-
barPadding: {},
|
|
35
|
-
radius: {},
|
|
36
|
-
hideLegend: { type: Boolean },
|
|
37
|
-
orientation: { default: l.Vertical },
|
|
38
|
-
legendPosition: {},
|
|
39
|
-
xDomainLine: { type: Boolean },
|
|
40
|
-
yDomainLine: { type: Boolean },
|
|
41
|
-
xTickLine: { type: Boolean },
|
|
42
|
-
yTickLine: { type: Boolean },
|
|
43
|
-
xGridLine: { type: Boolean },
|
|
44
|
-
yGridLine: { type: Boolean, default: !0 },
|
|
45
|
-
hideXAxis: { type: Boolean },
|
|
46
|
-
hideYAxis: { type: Boolean }
|
|
47
|
-
},
|
|
48
|
-
setup(t) {
|
|
49
|
-
const o = t, A = E(), f = $("slotWrapper"), p = S();
|
|
50
|
-
if (!o.yAxis || o.yAxis.length === 0)
|
|
51
|
-
throw new Error("yAxis is required");
|
|
52
|
-
const b = s(() => o.yAxis.map((e) => (n) => n[e])), h = (e, n) => {
|
|
53
|
-
var r;
|
|
54
|
-
return (r = Object.values(o.categories)[n]) == null ? void 0 : r.color;
|
|
55
|
-
}, C = s(() => Object.values(o.categories).slice(0, 4).map((e) => e.color)), G = s(() => Object.values(o.categories).slice(4, 8).map((e) => e.color)), D = (e, n) => C.value[n] ?? "#ccc", F = (e, n) => G.value[n] ?? "#eee", v = s(
|
|
56
|
-
() => o.legendPosition === Q.Top
|
|
57
|
-
);
|
|
58
|
-
function T(e) {
|
|
59
|
-
return p.value = e, O();
|
|
60
|
-
}
|
|
61
|
-
function O(e) {
|
|
62
|
-
return typeof window > "u" ? "" : f.value ? f.value.innerHTML : "";
|
|
63
|
-
}
|
|
64
|
-
const N = s(() => o.stackAndGrouped ? Object.keys(o.data[0]).filter((e) => e !== "month") : []), j = (e) => {
|
|
65
|
-
const n = ["Done", "Pending"];
|
|
66
|
-
return e.map((r) => ({
|
|
67
|
-
month: r.month,
|
|
68
|
-
...N.value.flatMap(
|
|
69
|
-
(i) => n.map((c) => ({
|
|
70
|
-
[`${i}${c}`]: r[i][c.toLowerCase()]
|
|
71
|
-
}))
|
|
72
|
-
).reduce((i, c) => ({ ...i, ...c }), {})
|
|
73
|
-
}));
|
|
74
|
-
}, L = s(() => o.stackAndGrouped ? j(o.data) : o.data), w = [
|
|
75
|
-
(e) => e.desktopDone,
|
|
76
|
-
(e) => e.mobileDone,
|
|
77
|
-
(e) => e.androidDone,
|
|
78
|
-
(e) => e.iosDone
|
|
79
|
-
], x = [
|
|
80
|
-
(e) => e.desktopPending,
|
|
81
|
-
(e) => e.mobilePending,
|
|
82
|
-
(e) => e.androidPending,
|
|
83
|
-
(e) => e.iosPending
|
|
84
|
-
];
|
|
85
|
-
return (e, n) => (d(), y("div", {
|
|
86
|
-
class: B(["flex flex-col space-y-4", { "flex-col-reverse": v.value }])
|
|
87
|
-
}, [
|
|
88
|
-
u(a(q), {
|
|
89
|
-
padding: e.padding,
|
|
90
|
-
height: e.height
|
|
91
|
-
}, {
|
|
92
|
-
default: H(() => [
|
|
93
|
-
u(a(U), {
|
|
94
|
-
triggers: {
|
|
95
|
-
[a(Y).selectors.bar]: T,
|
|
96
|
-
[a(X).selectors.bar]: T
|
|
97
|
-
}
|
|
98
|
-
}, null, 8, ["triggers"]),
|
|
99
|
-
e.stackAndGrouped ? (d(), y(W, { key: 0 }, [
|
|
100
|
-
u(a(k), {
|
|
101
|
-
data: L.value,
|
|
102
|
-
x: (r, i) => i - 0.2,
|
|
103
|
-
y: w,
|
|
104
|
-
color: D,
|
|
105
|
-
"rounded-corners": e.radius ?? 0,
|
|
106
|
-
"group-padding": e.groupPadding ?? 0,
|
|
107
|
-
"bar-padding": e.barPadding ?? 0.2,
|
|
108
|
-
orientation: e.orientation ?? a(l).Vertical
|
|
109
|
-
}, null, 8, ["data", "x", "rounded-corners", "group-padding", "bar-padding", "orientation"]),
|
|
110
|
-
u(a(k), {
|
|
111
|
-
data: L.value,
|
|
112
|
-
x: (r, i) => i + 0.2,
|
|
113
|
-
y: x,
|
|
114
|
-
color: F,
|
|
115
|
-
"rounded-corners": e.radius ?? 0,
|
|
116
|
-
"group-padding": e.groupPadding ?? 0,
|
|
117
|
-
"bar-padding": e.barPadding ?? 0.2,
|
|
118
|
-
orientation: e.orientation ?? a(l).Vertical
|
|
119
|
-
}, null, 8, ["data", "x", "rounded-corners", "group-padding", "bar-padding", "orientation"])
|
|
120
|
-
], 64)) : e.stacked ? (d(), m(a(k), {
|
|
121
|
-
key: 2,
|
|
122
|
-
data: e.data,
|
|
123
|
-
x: (r, i) => i,
|
|
124
|
-
y: b.value,
|
|
125
|
-
color: h,
|
|
126
|
-
"rounded-corners": e.radius ?? 0,
|
|
127
|
-
"group-padding": e.groupPadding ?? 0,
|
|
128
|
-
"bar-padding": e.barPadding ?? 0.2,
|
|
129
|
-
orientation: e.orientation ?? a(l).Vertical
|
|
130
|
-
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), m(a(I), {
|
|
131
|
-
key: 1,
|
|
132
|
-
data: e.data,
|
|
133
|
-
x: (r, i) => i,
|
|
134
|
-
y: b.value,
|
|
135
|
-
color: h,
|
|
136
|
-
"rounded-corners": e.radius ?? 0,
|
|
137
|
-
"group-padding": e.groupPadding ?? 0,
|
|
138
|
-
"bar-padding": e.barPadding ?? 0.2,
|
|
139
|
-
orientation: e.orientation ?? a(l).Vertical
|
|
140
|
-
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
|
|
141
|
-
e.hideXAxis ? g("", !0) : (d(), m(a(V), {
|
|
142
|
-
key: 3,
|
|
143
|
-
type: "x",
|
|
144
|
-
"tick-format": e.xFormatter,
|
|
145
|
-
label: e.xLabel,
|
|
146
|
-
"grid-line": e.xGridLine,
|
|
147
|
-
"domain-line": !!e.xDomainLine,
|
|
148
|
-
"tick-line": e.xTickLine,
|
|
149
|
-
"num-ticks": e.xNumTicks,
|
|
150
|
-
"tick-values": e.xExplicitTicks,
|
|
151
|
-
minMaxTicksOnly: e.minMaxTicksOnly
|
|
152
|
-
}, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
|
|
153
|
-
e.hideYAxis ? g("", !0) : (d(), m(a(V), {
|
|
154
|
-
key: 4,
|
|
155
|
-
type: "y",
|
|
156
|
-
label: e.yLabel,
|
|
157
|
-
"grid-line": e.orientation !== a(l).Horizontal && e.yGridLine,
|
|
158
|
-
"domain-line": !!e.yDomainLine,
|
|
159
|
-
"tick-format": e.yFormatter,
|
|
160
|
-
"num-ticks": e.yNumTicks,
|
|
161
|
-
"tick-line": e.yTickLine
|
|
162
|
-
}, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
|
|
163
|
-
]),
|
|
164
|
-
_: 1
|
|
165
|
-
}, 8, ["padding", "height"]),
|
|
166
|
-
e.hideLegend ? g("", !0) : (d(), y("div", {
|
|
167
|
-
key: 0,
|
|
168
|
-
class: B(["flex items center justify-end", { "pb-4": v.value }])
|
|
169
|
-
}, [
|
|
170
|
-
u(a(J), {
|
|
171
|
-
items: Object.values(o.categories)
|
|
172
|
-
}, null, 8, ["items"])
|
|
173
|
-
], 2)),
|
|
174
|
-
z("div", Z, [
|
|
175
|
-
a(A).tooltip ? P(e.$slots, "tooltip", {
|
|
176
|
-
key: 0,
|
|
177
|
-
values: p.value
|
|
178
|
-
}) : p.value ? P(e.$slots, "fallback", { key: 1 }, () => [
|
|
179
|
-
u(K, {
|
|
180
|
-
data: p.value,
|
|
181
|
-
categories: o.categories,
|
|
182
|
-
toolTipTitle: a(R)(p.value) ?? "",
|
|
183
|
-
yFormatter: o.orientation === a(l).Horizontal ? o.xFormatter : o.yFormatter
|
|
184
|
-
}, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
|
|
185
|
-
]) : g("", !0)
|
|
186
|
-
], 512)
|
|
187
|
-
], 2));
|
|
188
|
-
}
|
|
189
|
-
});
|
|
190
|
-
export {
|
|
191
|
-
re as default
|
|
192
|
-
};
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { defineComponent as y, useSlots as V, useTemplateRef as k, ref as C, createElementBlock as i, openBlock as u, Fragment as _, createElementVNode as l, createCommentVNode as d, createVNode as r, renderSlot as s, unref as t, withCtx as b, normalizeStyle as D, toDisplayString as S } from "vue";
|
|
2
|
-
import { Donut as T } from "@unovis/ts";
|
|
3
|
-
import { DonutType as w } from "./types.js";
|
|
4
|
-
import { VisSingleContainer as B, VisTooltip as L, VisDonut as $, VisBulletLegend as H } from "@unovis/vue";
|
|
5
|
-
const N = { class: "flex items-center justify-center" }, W = {
|
|
6
|
-
ref: "slotWrapper",
|
|
7
|
-
class: "hidden"
|
|
8
|
-
}, j = { class: "flex items-center" }, z = {
|
|
9
|
-
key: 0,
|
|
10
|
-
class: "flex items-center justify-center mt-4"
|
|
11
|
-
}, q = /* @__PURE__ */ y({
|
|
12
|
-
__name: "DonutChart",
|
|
13
|
-
props: {
|
|
14
|
-
type: {},
|
|
15
|
-
data: {},
|
|
16
|
-
height: {},
|
|
17
|
-
radius: {},
|
|
18
|
-
hideLegend: { type: Boolean },
|
|
19
|
-
labels: {}
|
|
20
|
-
},
|
|
21
|
-
setup(c) {
|
|
22
|
-
const n = c, f = V(), a = k("slotWrapper"), o = C(), p = (e) => e, m = n.type === w.Half;
|
|
23
|
-
function h(e) {
|
|
24
|
-
return o.value = e, g();
|
|
25
|
-
}
|
|
26
|
-
function g(e) {
|
|
27
|
-
return typeof window > "u" ? "" : a.value ? a.value.innerHTML : "";
|
|
28
|
-
}
|
|
29
|
-
return (e, E) => (u(), i(_, null, [
|
|
30
|
-
l("div", N, [
|
|
31
|
-
r(t(B), {
|
|
32
|
-
data: e.data,
|
|
33
|
-
height: e.height,
|
|
34
|
-
margin: {}
|
|
35
|
-
}, {
|
|
36
|
-
default: b(() => [
|
|
37
|
-
r(t(L), {
|
|
38
|
-
"horizontal-shift": 20,
|
|
39
|
-
"vertical-shift": 20,
|
|
40
|
-
triggers: {
|
|
41
|
-
[t(T).selectors.segment]: h
|
|
42
|
-
}
|
|
43
|
-
}, null, 8, ["triggers"]),
|
|
44
|
-
r(t($), {
|
|
45
|
-
value: p,
|
|
46
|
-
"corner-radius": e.radius,
|
|
47
|
-
color: n.labels.map((v) => v.color),
|
|
48
|
-
"angle-range": m ? [-1.5707963267948966, 1.5707963267948966] : []
|
|
49
|
-
}, null, 8, ["corner-radius", "color", "angle-range"])
|
|
50
|
-
]),
|
|
51
|
-
_: 1
|
|
52
|
-
}, 8, ["data", "height"]),
|
|
53
|
-
s(e.$slots, "default"),
|
|
54
|
-
l("div", W, [
|
|
55
|
-
t(f).tooltip ? s(e.$slots, "tooltip", {
|
|
56
|
-
key: 0,
|
|
57
|
-
values: o.value
|
|
58
|
-
}) : o.value ? s(e.$slots, "fallback", { key: 1 }, () => [
|
|
59
|
-
l("div", j, [
|
|
60
|
-
l("div", {
|
|
61
|
-
class: "w-2 h-2 rounded-full mr-2",
|
|
62
|
-
style: D(`background-color: ${n.labels[o.value.index].color} ;`)
|
|
63
|
-
}, null, 4),
|
|
64
|
-
l("div", null, S(o.value.data), 1)
|
|
65
|
-
])
|
|
66
|
-
]) : d("", !0)
|
|
67
|
-
], 512)
|
|
68
|
-
]),
|
|
69
|
-
e.hideLegend ? d("", !0) : (u(), i("div", z, [
|
|
70
|
-
r(t(H), { items: e.labels }, null, 8, ["items"])
|
|
71
|
-
]))
|
|
72
|
-
], 64));
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
export {
|
|
76
|
-
q as default
|
|
77
|
-
};
|