vue-chrts 0.1.12-test.2 → 0.2.0-beta.2
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 +99 -99
- package/dist/components/AreaChart/AreaChart.vue.d.ts +10 -3
- package/dist/components/AreaChart/types.d.ts +43 -13
- package/dist/components/AreaStackedChart/AreaStackedChart.js +20 -23
- package/dist/components/AreaStackedChart/types.d.ts +18 -0
- package/dist/components/BarChart/BarChart.js +93 -63
- package/dist/components/BarChart/BarChart.vue.d.ts +10 -3
- package/dist/components/BarChart/stackedGroupedUtils.d.ts +19 -0
- package/dist/components/BarChart/stackedGroupedUtils.js +67 -0
- package/dist/components/BarChart/types.d.ts +40 -18
- package/dist/components/DonutChart/DonutChart.js +56 -31
- package/dist/components/DonutChart/DonutChart.vue.d.ts +16 -12
- package/dist/components/DonutChart/types.d.ts +7 -3
- package/dist/components/LineChart/LineChart.js +79 -60
- package/dist/components/LineChart/LineChart.vue.d.ts +10 -3
- package/dist/components/LineChart/types.d.ts +46 -16
- package/dist/components/Tooltip.vue.d.ts +2 -2
- package/dist/types.d.ts +8 -0
- package/dist/utils.d.ts +6 -0
- package/dist/utils.js +45 -5
- package/package.json +3 -5
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { Orientation as
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
|
|
1
|
+
import { defineComponent as C, useSlots as N, useTemplateRef as O, ref as D, computed as T, createElementBlock as m, openBlock as n, normalizeClass as L, createVNode as g, createCommentVNode as c, createElementVNode as w, unref as i, withCtx as E, createBlock as u, Fragment as M, renderList as S, renderSlot as v } from "vue";
|
|
2
|
+
import { Orientation as l, StackedBar as j, GroupedBar as z } from "@unovis/ts";
|
|
3
|
+
import { getFirstPropertyValue as H } from "../../utils.js";
|
|
4
|
+
import { useStackedGrouped as W } from "./stackedGroupedUtils.js";
|
|
5
|
+
import { VisXYContainer as X, VisTooltip as Y, VisStackedBar as B, VisGroupedBar as $, VisAxis as A, VisBulletLegend as R } from "@unovis/vue";
|
|
6
|
+
import q from "../Tooltip.js";
|
|
7
|
+
import { LegendPosition as U } from "../../types.js";
|
|
8
|
+
const I = {
|
|
9
|
+
ref: "slotWrapper",
|
|
10
|
+
class: "hidden"
|
|
11
|
+
}, ae = /* @__PURE__ */ C({
|
|
7
12
|
__name: "BarChart",
|
|
8
13
|
props: {
|
|
9
14
|
data: {},
|
|
@@ -20,16 +25,17 @@ const H = /* @__PURE__ */ x({
|
|
|
20
25
|
categories: {},
|
|
21
26
|
xFormatter: {},
|
|
22
27
|
yFormatter: {},
|
|
23
|
-
yNumTicks: { default: (
|
|
28
|
+
yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
|
|
24
29
|
minMaxTicksOnly: { type: Boolean },
|
|
25
|
-
xNumTicks: { default: (
|
|
30
|
+
xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
|
|
26
31
|
xExplicitTicks: {},
|
|
27
32
|
yAxis: {},
|
|
28
33
|
groupPadding: {},
|
|
29
34
|
barPadding: {},
|
|
30
35
|
radius: {},
|
|
31
36
|
hideLegend: { type: Boolean },
|
|
32
|
-
|
|
37
|
+
hideTooltip: { type: Boolean, default: !1 },
|
|
38
|
+
orientation: { default: l.Vertical },
|
|
33
39
|
legendPosition: {},
|
|
34
40
|
xDomainLine: { type: Boolean },
|
|
35
41
|
yDomainLine: { type: Boolean },
|
|
@@ -38,69 +44,80 @@ const H = /* @__PURE__ */ x({
|
|
|
38
44
|
xGridLine: { type: Boolean },
|
|
39
45
|
yGridLine: { type: Boolean, default: !0 },
|
|
40
46
|
hideXAxis: { type: Boolean },
|
|
41
|
-
hideYAxis: { type: Boolean }
|
|
47
|
+
hideYAxis: { type: Boolean },
|
|
48
|
+
stackAndGrouped: { type: Boolean },
|
|
49
|
+
xAxis: {}
|
|
42
50
|
},
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
51
|
+
emits: ["click"],
|
|
52
|
+
setup(t, { emit: V }) {
|
|
53
|
+
const x = V, a = t, P = N(), y = O("slotWrapper"), r = D();
|
|
54
|
+
if (!a.yAxis || a.yAxis.length === 0)
|
|
46
55
|
throw new Error("yAxis is required");
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
return (e, o) => (t(), b("div", {
|
|
68
|
-
class: L(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
|
|
56
|
+
const k = T(() => a.yAxis.map((e) => (d) => d[e])), f = (e, d) => {
|
|
57
|
+
var o;
|
|
58
|
+
return (o = Object.values(a.categories)[d]) == null ? void 0 : o.color;
|
|
59
|
+
}, s = W({
|
|
60
|
+
data: a.data,
|
|
61
|
+
categories: a.categories,
|
|
62
|
+
stackAndGrouped: a.stackAndGrouped,
|
|
63
|
+
xAxis: a.xAxis
|
|
64
|
+
}), h = T(
|
|
65
|
+
() => a.legendPosition === U.Top
|
|
66
|
+
);
|
|
67
|
+
function b(e) {
|
|
68
|
+
return r.value = e, G();
|
|
69
|
+
}
|
|
70
|
+
function G(e) {
|
|
71
|
+
return typeof window > "u" ? "" : y.value ? y.value.innerHTML : "";
|
|
72
|
+
}
|
|
73
|
+
return (e, d) => (n(), m("div", {
|
|
74
|
+
class: L(["flex flex-col space-y-4", { "flex-col-reverse": h.value }]),
|
|
75
|
+
onClick: d[0] || (d[0] = (o) => x("click", o, r.value))
|
|
69
76
|
}, [
|
|
70
|
-
|
|
77
|
+
g(i(X), {
|
|
71
78
|
padding: e.padding,
|
|
72
79
|
height: e.height
|
|
73
80
|
}, {
|
|
74
|
-
default:
|
|
75
|
-
|
|
81
|
+
default: E(() => [
|
|
82
|
+
g(i(Y), {
|
|
76
83
|
triggers: {
|
|
77
|
-
[i(
|
|
78
|
-
[i(
|
|
84
|
+
[i(z).selectors.bar]: b,
|
|
85
|
+
[i(j).selectors.bar]: b
|
|
79
86
|
}
|
|
80
87
|
}, null, 8, ["triggers"]),
|
|
81
|
-
e.
|
|
82
|
-
key:
|
|
88
|
+
e.stackAndGrouped ? (n(!0), m(M, { key: 0 }, S(i(s).states, (o) => (n(), u(i(B), {
|
|
89
|
+
key: o,
|
|
90
|
+
data: i(s).chartData,
|
|
91
|
+
x: (p, F) => F + i(s).positions[o],
|
|
92
|
+
y: i(s).bars[o],
|
|
93
|
+
color: i(s).colorFunctions[o],
|
|
94
|
+
"rounded-corners": e.radius ?? 0,
|
|
95
|
+
"group-padding": e.groupPadding ?? 0,
|
|
96
|
+
"bar-padding": e.barPadding ?? 0.2,
|
|
97
|
+
orientation: e.orientation ?? i(l).Vertical
|
|
98
|
+
}, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(B), {
|
|
99
|
+
key: 2,
|
|
83
100
|
data: e.data,
|
|
84
|
-
x: (
|
|
85
|
-
y:
|
|
86
|
-
color:
|
|
101
|
+
x: (o, p) => p,
|
|
102
|
+
y: k.value,
|
|
103
|
+
color: f,
|
|
87
104
|
"rounded-corners": e.radius ?? 0,
|
|
88
105
|
"group-padding": e.groupPadding ?? 0,
|
|
89
106
|
"bar-padding": e.barPadding ?? 0.2,
|
|
90
|
-
orientation: e.orientation ?? i(
|
|
91
|
-
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (
|
|
92
|
-
key:
|
|
107
|
+
orientation: e.orientation ?? i(l).Vertical
|
|
108
|
+
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (n(), u(i($), {
|
|
109
|
+
key: 1,
|
|
93
110
|
data: e.data,
|
|
94
|
-
x: (
|
|
95
|
-
y:
|
|
96
|
-
color:
|
|
111
|
+
x: (o, p) => p,
|
|
112
|
+
y: k.value,
|
|
113
|
+
color: f,
|
|
97
114
|
"rounded-corners": e.radius ?? 0,
|
|
98
115
|
"group-padding": e.groupPadding ?? 0,
|
|
99
116
|
"bar-padding": e.barPadding ?? 0.2,
|
|
100
|
-
orientation: e.orientation ?? i(
|
|
117
|
+
orientation: e.orientation ?? i(l).Vertical
|
|
101
118
|
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
|
|
102
|
-
e.hideXAxis ?
|
|
103
|
-
key:
|
|
119
|
+
e.hideXAxis ? c("", !0) : (n(), u(i(A), {
|
|
120
|
+
key: 3,
|
|
104
121
|
type: "x",
|
|
105
122
|
"tick-format": e.xFormatter,
|
|
106
123
|
label: e.xLabel,
|
|
@@ -111,11 +128,11 @@ const H = /* @__PURE__ */ x({
|
|
|
111
128
|
"tick-values": e.xExplicitTicks,
|
|
112
129
|
minMaxTicksOnly: e.minMaxTicksOnly
|
|
113
130
|
}, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
|
|
114
|
-
e.hideYAxis ?
|
|
115
|
-
key:
|
|
131
|
+
e.hideYAxis ? c("", !0) : (n(), u(i(A), {
|
|
132
|
+
key: 4,
|
|
116
133
|
type: "y",
|
|
117
134
|
label: e.yLabel,
|
|
118
|
-
"grid-line": e.orientation !== i(
|
|
135
|
+
"grid-line": e.orientation !== i(l).Horizontal && e.yGridLine,
|
|
119
136
|
"domain-line": !!e.yDomainLine,
|
|
120
137
|
"tick-format": e.yFormatter,
|
|
121
138
|
"num-ticks": e.yNumTicks,
|
|
@@ -124,17 +141,30 @@ const H = /* @__PURE__ */ x({
|
|
|
124
141
|
]),
|
|
125
142
|
_: 1
|
|
126
143
|
}, 8, ["padding", "height"]),
|
|
127
|
-
e.hideLegend ?
|
|
144
|
+
e.hideLegend ? c("", !0) : (n(), m("div", {
|
|
128
145
|
key: 0,
|
|
129
|
-
class: L(["flex items center justify-end", { "pb-4":
|
|
146
|
+
class: L(["flex items center justify-end", { "pb-4": h.value }])
|
|
130
147
|
}, [
|
|
131
|
-
|
|
132
|
-
items: Object.values(
|
|
148
|
+
g(i(R), {
|
|
149
|
+
items: Object.values(a.categories)
|
|
133
150
|
}, null, 8, ["items"])
|
|
134
|
-
], 2))
|
|
151
|
+
], 2)),
|
|
152
|
+
w("div", I, [
|
|
153
|
+
i(P).tooltip ? v(e.$slots, "tooltip", {
|
|
154
|
+
key: 0,
|
|
155
|
+
values: r.value
|
|
156
|
+
}) : r.value ? v(e.$slots, "fallback", { key: 1 }, () => [
|
|
157
|
+
g(q, {
|
|
158
|
+
data: r.value,
|
|
159
|
+
categories: a.categories,
|
|
160
|
+
toolTipTitle: i(H)(r.value) ?? "",
|
|
161
|
+
yFormatter: a.orientation === i(l).Horizontal ? a.xFormatter : a.yFormatter
|
|
162
|
+
}, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
|
|
163
|
+
]) : c("", !0)
|
|
164
|
+
], 512)
|
|
135
165
|
], 2));
|
|
136
166
|
}
|
|
137
167
|
});
|
|
138
168
|
export {
|
|
139
|
-
|
|
169
|
+
ae as default
|
|
140
170
|
};
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import { BarChartProps } from './types';
|
|
2
2
|
declare const _default: <T extends {}>(__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<{
|
|
3
|
-
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
|
|
3
|
+
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
|
|
4
|
+
readonly onClick?: ((event: MouseEvent, values?: T | undefined) => any) | undefined;
|
|
5
|
+
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & BarChartProps<T> & Partial<{}>> & import('vue').PublicProps;
|
|
4
6
|
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
5
7
|
attrs: any;
|
|
6
|
-
slots: {
|
|
7
|
-
|
|
8
|
+
slots: {
|
|
9
|
+
tooltip?(_: {
|
|
10
|
+
values: any;
|
|
11
|
+
}): any;
|
|
12
|
+
fallback?(_: {}): any;
|
|
13
|
+
};
|
|
14
|
+
emit: (e: "click", event: MouseEvent, values?: T) => void;
|
|
8
15
|
}>) => import('vue').VNode & {
|
|
9
16
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
10
17
|
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ComputedRef } from 'vue';
|
|
2
|
+
export interface StackedGroupedConfig<T> {
|
|
3
|
+
data: T[];
|
|
4
|
+
categories: Record<string, {
|
|
5
|
+
color?: string;
|
|
6
|
+
}>;
|
|
7
|
+
stackAndGrouped: boolean;
|
|
8
|
+
xAxis?: keyof T;
|
|
9
|
+
}
|
|
10
|
+
export interface StackedGroupedResult<T> {
|
|
11
|
+
states: string[];
|
|
12
|
+
groupedByState: Record<string, string[]>;
|
|
13
|
+
colors: Record<string, string[]>;
|
|
14
|
+
bars: Record<string, ((d: any) => any)[]>;
|
|
15
|
+
colorFunctions: Record<string, (d: unknown, i: number) => string>;
|
|
16
|
+
positions: Record<string, number>;
|
|
17
|
+
chartData: T[] | any[];
|
|
18
|
+
}
|
|
19
|
+
export declare function useStackedGrouped<T extends {}>(config: StackedGroupedConfig<T>): ComputedRef<StackedGroupedResult<T>>;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { computed as u } from "vue";
|
|
2
|
+
import { flattenData as i } from "../../utils.js";
|
|
3
|
+
function b(t) {
|
|
4
|
+
return u(() => {
|
|
5
|
+
const o = f(t.categories), e = l(t.categories, o), r = p(e, t.categories), c = d(e), n = m(r), s = h(o);
|
|
6
|
+
console.log(t, "config");
|
|
7
|
+
const a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
|
|
8
|
+
return {
|
|
9
|
+
states: o,
|
|
10
|
+
groupedByState: e,
|
|
11
|
+
colors: r,
|
|
12
|
+
bars: c,
|
|
13
|
+
colorFunctions: n,
|
|
14
|
+
positions: s,
|
|
15
|
+
chartData: a
|
|
16
|
+
};
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function f(t) {
|
|
20
|
+
const o = /* @__PURE__ */ new Set();
|
|
21
|
+
return Object.keys(t).forEach((r) => {
|
|
22
|
+
const c = r.match(/([A-Z][a-z]+)$/);
|
|
23
|
+
c && o.add(c[1]);
|
|
24
|
+
}), Array.from(o);
|
|
25
|
+
}
|
|
26
|
+
function l(t, o) {
|
|
27
|
+
const e = {};
|
|
28
|
+
return o.forEach((r) => {
|
|
29
|
+
e[r] = Object.keys(t).filter(
|
|
30
|
+
(c) => c.endsWith(r)
|
|
31
|
+
);
|
|
32
|
+
}), e;
|
|
33
|
+
}
|
|
34
|
+
function p(t, o) {
|
|
35
|
+
const e = {};
|
|
36
|
+
return Object.entries(t).forEach(([r, c]) => {
|
|
37
|
+
e[r] = c.map((n) => {
|
|
38
|
+
var s;
|
|
39
|
+
return ((s = o[n]) == null ? void 0 : s.color) ?? "#ccc";
|
|
40
|
+
});
|
|
41
|
+
}), e;
|
|
42
|
+
}
|
|
43
|
+
function d(t) {
|
|
44
|
+
const o = {};
|
|
45
|
+
return Object.entries(t).forEach(([e, r]) => {
|
|
46
|
+
o[e] = r.map((c) => {
|
|
47
|
+
const n = c.replace(e, "").toLowerCase();
|
|
48
|
+
return (s) => s[n + e];
|
|
49
|
+
});
|
|
50
|
+
}), o;
|
|
51
|
+
}
|
|
52
|
+
function m(t) {
|
|
53
|
+
const o = {};
|
|
54
|
+
return Object.entries(t).forEach(([e, r]) => {
|
|
55
|
+
o[e] = (c, n) => r[n] ?? "#ccc";
|
|
56
|
+
}), o;
|
|
57
|
+
}
|
|
58
|
+
function h(t) {
|
|
59
|
+
const o = t.length, e = 0.4, r = {};
|
|
60
|
+
return t.forEach((c, n) => {
|
|
61
|
+
const s = (n - (o - 1) / 2) * e;
|
|
62
|
+
r[c] = s;
|
|
63
|
+
}), r;
|
|
64
|
+
}
|
|
65
|
+
export {
|
|
66
|
+
b as useStackedGrouped
|
|
67
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { BulletLegendItemInterface, Orientation, LegendPosition } from '../../types';
|
|
2
|
-
|
|
1
|
+
import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter } from '../../types';
|
|
2
|
+
type BarChartPropsBase<T> = {
|
|
3
3
|
/**
|
|
4
4
|
* The data to be displayed in the bar chart.
|
|
5
5
|
* Each element of the array represents a data point.
|
|
@@ -23,9 +23,9 @@ export interface BarChartProps<T> {
|
|
|
23
23
|
*/
|
|
24
24
|
yLabel?: string;
|
|
25
25
|
/**
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
* Optional padding applied to the chart.
|
|
27
|
+
* Allows specifying individual padding values for the top, right, bottom, and left sides.
|
|
28
|
+
*/
|
|
29
29
|
padding?: {
|
|
30
30
|
top: number;
|
|
31
31
|
right: number;
|
|
@@ -38,19 +38,19 @@ export interface BarChartProps<T> {
|
|
|
38
38
|
*/
|
|
39
39
|
categories: Record<string, BulletLegendItemInterface>;
|
|
40
40
|
/**
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
xFormatter?:
|
|
41
|
+
* @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
|
|
42
|
+
* @param {number} i - The index of the tick in the `ticks` array.
|
|
43
|
+
* @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
|
|
44
|
+
* @returns {string} The formatted string representation of the tick.
|
|
45
|
+
*/
|
|
46
|
+
xFormatter?: axisFormatter;
|
|
47
47
|
/**
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
yFormatter?:
|
|
48
|
+
* @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis.
|
|
49
|
+
* @param {number} i - The index of the tick in the `ticks` array.
|
|
50
|
+
* @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
|
|
51
|
+
* @returns {string} The formatted string representation of the tick.
|
|
52
|
+
*/
|
|
53
|
+
yFormatter?: axisFormatter;
|
|
54
54
|
/**
|
|
55
55
|
* The desired number of ticks on the y-axis.
|
|
56
56
|
*/
|
|
@@ -87,6 +87,10 @@ export interface BarChartProps<T> {
|
|
|
87
87
|
* If `true`, hides the chart legend.
|
|
88
88
|
*/
|
|
89
89
|
hideLegend?: boolean;
|
|
90
|
+
/**
|
|
91
|
+
* If `true`, hides the chart tooltip.
|
|
92
|
+
*/
|
|
93
|
+
hideTooltip?: boolean;
|
|
90
94
|
/**
|
|
91
95
|
* The orientation of the bars (vertical or horizontal).
|
|
92
96
|
* See `Orientation` for available options.
|
|
@@ -129,4 +133,22 @@ export interface BarChartProps<T> {
|
|
|
129
133
|
* If `true`, hide the y-axis.
|
|
130
134
|
*/
|
|
131
135
|
hideYAxis?: boolean;
|
|
132
|
-
}
|
|
136
|
+
};
|
|
137
|
+
type BarChartPropsStackAndGrouped<T> = BarChartPropsBase<T> & {
|
|
138
|
+
stackAndGrouped: true;
|
|
139
|
+
/**
|
|
140
|
+
* The key in the data object type 'T' to be used for the x-axis values.
|
|
141
|
+
* Required when stackAndGrouped is true.
|
|
142
|
+
*/
|
|
143
|
+
xAxis: keyof T;
|
|
144
|
+
};
|
|
145
|
+
type BarChartPropsNormal<T> = BarChartPropsBase<T> & {
|
|
146
|
+
stackAndGrouped?: false;
|
|
147
|
+
/**
|
|
148
|
+
* The key in the data object type 'T' to be used for the x-axis values.
|
|
149
|
+
* Optional when stackAndGrouped is not true.
|
|
150
|
+
*/
|
|
151
|
+
xAxis?: keyof T;
|
|
152
|
+
};
|
|
153
|
+
export type BarChartProps<T> = BarChartPropsStackAndGrouped<T> | BarChartPropsNormal<T>;
|
|
154
|
+
export {};
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { Donut as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
const
|
|
1
|
+
import { defineComponent as V, useSlots as b, useTemplateRef as D, ref as S, createElementBlock as d, openBlock as c, Fragment as T, createElementVNode as o, createCommentVNode as p, createVNode as r, renderSlot as a, unref as l, withCtx as w, normalizeStyle as B, toDisplayString as L } from "vue";
|
|
2
|
+
import { Donut as $ } from "@unovis/ts";
|
|
3
|
+
import { DonutType as H } from "./types.js";
|
|
4
|
+
import { VisSingleContainer as N, VisTooltip as W, VisDonut as _, VisBulletLegend as j } from "@unovis/vue";
|
|
5
|
+
const z = {
|
|
6
|
+
ref: "slotWrapper",
|
|
7
|
+
class: "hidden"
|
|
8
|
+
}, A = { class: "flex items-center" }, E = {
|
|
6
9
|
key: 0,
|
|
7
10
|
class: "flex items-center justify-center mt-4"
|
|
8
|
-
},
|
|
11
|
+
}, q = /* @__PURE__ */ V({
|
|
9
12
|
__name: "DonutChart",
|
|
10
13
|
props: {
|
|
11
14
|
type: {},
|
|
@@ -13,46 +16,68 @@ const k = { class: "flex items-center justify-center" }, B = {
|
|
|
13
16
|
height: {},
|
|
14
17
|
radius: {},
|
|
15
18
|
hideLegend: { type: Boolean },
|
|
16
|
-
labels: {}
|
|
19
|
+
labels: {},
|
|
20
|
+
padAngle: {}
|
|
17
21
|
},
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
22
|
+
emits: ["click"],
|
|
23
|
+
setup(f, { emit: m }) {
|
|
24
|
+
const g = m, n = f, h = b(), i = D("slotWrapper"), t = S(), v = (e) => e, y = n.type === H.Half;
|
|
25
|
+
function k(e) {
|
|
26
|
+
return t.value = e, C();
|
|
27
|
+
}
|
|
28
|
+
function C(e) {
|
|
29
|
+
return typeof window > "u" ? "" : i.value ? i.value.innerHTML : "";
|
|
30
|
+
}
|
|
31
|
+
return (e, u) => (c(), d(T, null, [
|
|
32
|
+
o("div", {
|
|
33
|
+
class: "flex items-center justify-center",
|
|
34
|
+
onClick: u[0] || (u[0] = (s) => g("click", s, t.value))
|
|
35
|
+
}, [
|
|
36
|
+
r(l(N), {
|
|
29
37
|
data: e.data,
|
|
30
38
|
height: e.height,
|
|
31
39
|
margin: {}
|
|
32
40
|
}, {
|
|
33
|
-
default:
|
|
34
|
-
|
|
41
|
+
default: w(() => [
|
|
42
|
+
r(l(W), {
|
|
35
43
|
"horizontal-shift": 20,
|
|
36
44
|
"vertical-shift": 20,
|
|
37
|
-
triggers:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
45
|
+
triggers: {
|
|
46
|
+
[l($).selectors.segment]: k
|
|
47
|
+
}
|
|
48
|
+
}, null, 8, ["triggers"]),
|
|
49
|
+
r(l(_), {
|
|
50
|
+
value: v,
|
|
41
51
|
"corner-radius": e.radius,
|
|
42
|
-
color:
|
|
43
|
-
"angle-range":
|
|
44
|
-
|
|
52
|
+
color: n.labels.map((s) => s.color),
|
|
53
|
+
"angle-range": y ? [-1.5707963267948966, 1.5707963267948966] : [],
|
|
54
|
+
"pad-angle": n.padAngle || 0
|
|
55
|
+
}, null, 8, ["corner-radius", "color", "angle-range", "pad-angle"])
|
|
45
56
|
]),
|
|
46
57
|
_: 1
|
|
47
58
|
}, 8, ["data", "height"]),
|
|
48
|
-
|
|
59
|
+
a(e.$slots, "default"),
|
|
60
|
+
o("div", z, [
|
|
61
|
+
l(h).tooltip ? a(e.$slots, "tooltip", {
|
|
62
|
+
key: 0,
|
|
63
|
+
values: t.value
|
|
64
|
+
}) : t.value ? a(e.$slots, "fallback", { key: 1 }, () => [
|
|
65
|
+
o("div", A, [
|
|
66
|
+
o("div", {
|
|
67
|
+
class: "w-2 h-2 rounded-full mr-2",
|
|
68
|
+
style: B(`background-color: ${n.labels[t.value.index].color} ;`)
|
|
69
|
+
}, null, 4),
|
|
70
|
+
o("div", null, L(t.value.data), 1)
|
|
71
|
+
])
|
|
72
|
+
]) : p("", !0)
|
|
73
|
+
], 512)
|
|
49
74
|
]),
|
|
50
|
-
e.hideLegend ? p("", !0) : (
|
|
51
|
-
|
|
75
|
+
e.hideLegend ? p("", !0) : (c(), d("div", E, [
|
|
76
|
+
r(l(j), { items: e.labels }, null, 8, ["items"])
|
|
52
77
|
]))
|
|
53
78
|
], 64));
|
|
54
79
|
}
|
|
55
80
|
});
|
|
56
81
|
export {
|
|
57
|
-
|
|
82
|
+
q as default
|
|
58
83
|
};
|
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import { DonutChartProps } from './types';
|
|
2
|
-
declare
|
|
3
|
-
|
|
2
|
+
declare const _default: <T extends {}>(__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<{
|
|
3
|
+
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
|
|
4
|
+
readonly onClick?: ((event: MouseEvent, values?: any) => any) | undefined;
|
|
5
|
+
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & DonutChartProps & Partial<{}>> & import('vue').PublicProps;
|
|
6
|
+
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
7
|
+
attrs: any;
|
|
4
8
|
slots: {
|
|
5
9
|
default?(_: {}): any;
|
|
10
|
+
tooltip?(_: {
|
|
11
|
+
values: any;
|
|
12
|
+
}): any;
|
|
13
|
+
fallback?(_: {}): any;
|
|
6
14
|
};
|
|
7
|
-
|
|
8
|
-
|
|
15
|
+
emit: (e: "click", event: MouseEvent, values?: any) => void;
|
|
16
|
+
}>) => import('vue').VNode & {
|
|
17
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
9
18
|
};
|
|
10
|
-
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
11
|
-
declare const __VLS_component: import('vue').DefineComponent<DonutChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DonutChartProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
12
|
-
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
13
19
|
export default _default;
|
|
14
|
-
type
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
};
|
|
18
|
-
};
|
|
20
|
+
type __VLS_PrettifyLocal<T> = {
|
|
21
|
+
[K in keyof T]: T[K];
|
|
22
|
+
} & {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
export type DonutChartProps = {
|
|
2
2
|
/**
|
|
3
3
|
* The type of donut chart to render.
|
|
4
4
|
* See `DonutType` for available options.
|
|
@@ -28,9 +28,13 @@ interface DonutChartProps {
|
|
|
28
28
|
name: string;
|
|
29
29
|
color: string;
|
|
30
30
|
}[];
|
|
31
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Pad angle. Default: 0
|
|
33
|
+
*/
|
|
34
|
+
padAngle?: number;
|
|
35
|
+
};
|
|
32
36
|
declare enum DonutType {
|
|
33
37
|
Half = "half",
|
|
34
38
|
Full = "full"
|
|
35
39
|
}
|
|
36
|
-
export {
|
|
40
|
+
export { DonutType };
|