vue-chrts 0.2.2-test.0 → 0.2.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/BarChart/BarChart.js +43 -39
- package/dist/components/BarChart/stackedGroupedUtils.d.ts +1 -0
- package/dist/components/BarChart/stackedGroupedUtils.js +32 -34
- package/dist/components/BarChart/types.d.ts +1 -0
- package/dist/components/BubbleChart/BubbleChart.js +145 -0
- package/dist/components/BubbleChart/BubbleChart.vue.d.ts +21 -0
- package/dist/components/BubbleChart/BubbleChart2.js +4 -0
- package/dist/components/BubbleChart/types.d.ts +162 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +12 -10
- package/dist/types.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as C, useSlots as
|
|
1
|
+
import { defineComponent as C, useSlots as S, useTemplateRef as D, ref as N, computed as c, createElementBlock as y, openBlock as n, normalizeStyle as T, createVNode as g, createCommentVNode as m, createElementVNode as O, unref as i, withCtx as w, createBlock as u, Fragment as E, renderList as M, renderSlot as B } from "vue";
|
|
2
2
|
import { Orientation as l, StackedBar as j, GroupedBar as z } from "@unovis/ts";
|
|
3
3
|
import { getFirstPropertyValue as H } from "../../utils.js";
|
|
4
4
|
import { useStackedGrouped as W } from "./stackedGroupedUtils.js";
|
|
@@ -8,7 +8,7 @@ import { LegendPosition as I } from "../../types.js";
|
|
|
8
8
|
const U = {
|
|
9
9
|
ref: "slotWrapper",
|
|
10
10
|
style: { display: "none" }
|
|
11
|
-
},
|
|
11
|
+
}, ae = /* @__PURE__ */ C({
|
|
12
12
|
__name: "BarChart",
|
|
13
13
|
props: {
|
|
14
14
|
data: {},
|
|
@@ -45,38 +45,42 @@ const U = {
|
|
|
45
45
|
yGridLine: { type: Boolean, default: !0 },
|
|
46
46
|
hideXAxis: { type: Boolean },
|
|
47
47
|
hideYAxis: { type: Boolean },
|
|
48
|
+
stackedGroupedSpacing: { default: 0.1 },
|
|
48
49
|
stackAndGrouped: { type: Boolean },
|
|
49
50
|
xAxis: {}
|
|
50
51
|
},
|
|
51
52
|
emits: ["click"],
|
|
52
53
|
setup(t, { emit: V }) {
|
|
53
|
-
const x = V,
|
|
54
|
-
if (!
|
|
54
|
+
const x = V, a = t, G = S(), k = D("slotWrapper"), r = N();
|
|
55
|
+
if (!a.yAxis || a.yAxis.length === 0)
|
|
55
56
|
throw new Error("yAxis is required");
|
|
56
|
-
const
|
|
57
|
-
var
|
|
58
|
-
return (
|
|
59
|
-
}, s =
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
57
|
+
const f = c(() => a.yAxis.map((e) => (d) => d[e])), v = (e, d) => {
|
|
58
|
+
var o;
|
|
59
|
+
return (o = Object.values(a.categories)[d]) == null ? void 0 : o.color;
|
|
60
|
+
}, s = c(
|
|
61
|
+
() => W({
|
|
62
|
+
data: a.data,
|
|
63
|
+
categories: a.categories,
|
|
64
|
+
stackAndGrouped: a.stackAndGrouped,
|
|
65
|
+
xAxis: a.xAxis,
|
|
66
|
+
spacing: a.stackedGroupedSpacing
|
|
67
|
+
}).value
|
|
68
|
+
), h = c(
|
|
69
|
+
() => a.legendPosition === I.Top
|
|
66
70
|
);
|
|
67
71
|
function b(e) {
|
|
68
|
-
return r.value = e,
|
|
72
|
+
return r.value = e, P();
|
|
69
73
|
}
|
|
70
|
-
function
|
|
71
|
-
return typeof window > "u" ? "" :
|
|
74
|
+
function P(e) {
|
|
75
|
+
return typeof window > "u" ? "" : k.value ? k.value.innerHTML : "";
|
|
72
76
|
}
|
|
73
77
|
return (e, d) => (n(), y("div", {
|
|
74
|
-
style:
|
|
78
|
+
style: T({
|
|
75
79
|
display: "flex",
|
|
76
80
|
flexDirection: h.value ? "column-reverse" : "column",
|
|
77
81
|
gap: "1rem"
|
|
78
82
|
}),
|
|
79
|
-
onClick: d[0] || (d[0] = (
|
|
83
|
+
onClick: d[0] || (d[0] = (o) => x("click", o, r.value))
|
|
80
84
|
}, [
|
|
81
85
|
g(i(X), {
|
|
82
86
|
padding: e.padding,
|
|
@@ -89,22 +93,22 @@ const U = {
|
|
|
89
93
|
[i(j).selectors.bar]: b
|
|
90
94
|
}
|
|
91
95
|
}, null, 8, ["triggers"]),
|
|
92
|
-
e.stackAndGrouped ? (n(!0), y(E, { key: 0 }, M(
|
|
93
|
-
key:
|
|
94
|
-
data:
|
|
95
|
-
x: (p, F) => F +
|
|
96
|
-
y:
|
|
97
|
-
color:
|
|
96
|
+
e.stackAndGrouped ? (n(!0), y(E, { key: 0 }, M(s.value.states, (o) => (n(), u(i(L), {
|
|
97
|
+
key: o,
|
|
98
|
+
data: s.value.chartData,
|
|
99
|
+
x: (p, F) => F + s.value.positions[o],
|
|
100
|
+
y: s.value.bars[o],
|
|
101
|
+
color: s.value.colorFunctions[o],
|
|
98
102
|
"rounded-corners": e.radius ?? 0,
|
|
99
103
|
"group-padding": e.groupPadding ?? 0,
|
|
100
|
-
"bar-padding": e.barPadding
|
|
104
|
+
"bar-padding": e.barPadding,
|
|
101
105
|
orientation: e.orientation ?? i(l).Vertical
|
|
102
106
|
}, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(L), {
|
|
103
107
|
key: 2,
|
|
104
108
|
data: e.data,
|
|
105
|
-
x: (
|
|
106
|
-
y:
|
|
107
|
-
color:
|
|
109
|
+
x: (o, p) => p,
|
|
110
|
+
y: f.value,
|
|
111
|
+
color: v,
|
|
108
112
|
"rounded-corners": e.radius ?? 0,
|
|
109
113
|
"group-padding": e.groupPadding ?? 0,
|
|
110
114
|
"bar-padding": e.barPadding ?? 0.2,
|
|
@@ -112,9 +116,9 @@ const U = {
|
|
|
112
116
|
}, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (n(), u(i($), {
|
|
113
117
|
key: 1,
|
|
114
118
|
data: e.data,
|
|
115
|
-
x: (
|
|
116
|
-
y:
|
|
117
|
-
color:
|
|
119
|
+
x: (o, p) => p,
|
|
120
|
+
y: f.value,
|
|
121
|
+
color: v,
|
|
118
122
|
"rounded-corners": e.radius ?? 0,
|
|
119
123
|
"group-padding": e.groupPadding ?? 0,
|
|
120
124
|
"bar-padding": e.barPadding ?? 0.2,
|
|
@@ -147,7 +151,7 @@ const U = {
|
|
|
147
151
|
}, 8, ["padding", "height"]),
|
|
148
152
|
e.hideLegend ? m("", !0) : (n(), y("div", {
|
|
149
153
|
key: 0,
|
|
150
|
-
style:
|
|
154
|
+
style: T({
|
|
151
155
|
display: "flex",
|
|
152
156
|
alignItems: "center",
|
|
153
157
|
justifyContent: "flex-end",
|
|
@@ -155,19 +159,19 @@ const U = {
|
|
|
155
159
|
})
|
|
156
160
|
}, [
|
|
157
161
|
g(i(R), {
|
|
158
|
-
items: Object.values(
|
|
162
|
+
items: Object.values(a.categories)
|
|
159
163
|
}, null, 8, ["items"])
|
|
160
164
|
], 4)),
|
|
161
|
-
|
|
162
|
-
i(
|
|
165
|
+
O("div", U, [
|
|
166
|
+
i(G).tooltip ? B(e.$slots, "tooltip", {
|
|
163
167
|
key: 0,
|
|
164
168
|
values: r.value
|
|
165
169
|
}) : r.value ? B(e.$slots, "fallback", { key: 1 }, () => [
|
|
166
170
|
g(q, {
|
|
167
171
|
data: r.value,
|
|
168
|
-
categories:
|
|
172
|
+
categories: a.categories,
|
|
169
173
|
toolTipTitle: i(H)(r.value) ?? "",
|
|
170
|
-
yFormatter:
|
|
174
|
+
yFormatter: a.orientation === i(l).Horizontal ? a.xFormatter : a.yFormatter
|
|
171
175
|
}, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
|
|
172
176
|
]) : m("", !0)
|
|
173
177
|
], 512)
|
|
@@ -175,5 +179,5 @@ const U = {
|
|
|
175
179
|
}
|
|
176
180
|
});
|
|
177
181
|
export {
|
|
178
|
-
|
|
182
|
+
ae as default
|
|
179
183
|
};
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { computed as u } from "vue";
|
|
2
2
|
import { flattenData as i } from "../../utils.js";
|
|
3
|
-
function
|
|
3
|
+
function g(t) {
|
|
4
4
|
return u(() => {
|
|
5
|
-
const
|
|
6
|
-
console.log(t, "config");
|
|
7
|
-
const a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
|
|
5
|
+
const e = p(t.categories), o = f(t.categories, e), r = d(o, t.categories), c = l(o), n = m(r), s = h(e, t.spacing), a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
|
|
8
6
|
return {
|
|
9
|
-
states:
|
|
10
|
-
groupedByState:
|
|
7
|
+
states: e,
|
|
8
|
+
groupedByState: o,
|
|
11
9
|
colors: r,
|
|
12
10
|
bars: c,
|
|
13
11
|
colorFunctions: n,
|
|
@@ -16,52 +14,52 @@ function b(t) {
|
|
|
16
14
|
};
|
|
17
15
|
});
|
|
18
16
|
}
|
|
19
|
-
function
|
|
20
|
-
const
|
|
17
|
+
function p(t) {
|
|
18
|
+
const e = /* @__PURE__ */ new Set();
|
|
21
19
|
return Object.keys(t).forEach((r) => {
|
|
22
20
|
const c = r.match(/([A-Z][a-z]+)$/);
|
|
23
|
-
c &&
|
|
24
|
-
}), Array.from(
|
|
21
|
+
c && e.add(c[1]);
|
|
22
|
+
}), Array.from(e);
|
|
25
23
|
}
|
|
26
|
-
function
|
|
27
|
-
const
|
|
28
|
-
return
|
|
29
|
-
|
|
24
|
+
function f(t, e) {
|
|
25
|
+
const o = {};
|
|
26
|
+
return e.forEach((r) => {
|
|
27
|
+
o[r] = Object.keys(t).filter(
|
|
30
28
|
(c) => c.endsWith(r)
|
|
31
29
|
);
|
|
32
|
-
}),
|
|
30
|
+
}), o;
|
|
33
31
|
}
|
|
34
|
-
function
|
|
35
|
-
const
|
|
32
|
+
function d(t, e) {
|
|
33
|
+
const o = {};
|
|
36
34
|
return Object.entries(t).forEach(([r, c]) => {
|
|
37
|
-
|
|
35
|
+
o[r] = c.map((n) => {
|
|
38
36
|
var s;
|
|
39
|
-
return ((s =
|
|
37
|
+
return ((s = e[n]) == null ? void 0 : s.color) ?? "#ccc";
|
|
40
38
|
});
|
|
41
|
-
}),
|
|
39
|
+
}), o;
|
|
42
40
|
}
|
|
43
|
-
function
|
|
44
|
-
const
|
|
45
|
-
return Object.entries(t).forEach(([
|
|
46
|
-
o
|
|
47
|
-
const n = c.replace(
|
|
48
|
-
return (s) => s[n +
|
|
41
|
+
function l(t) {
|
|
42
|
+
const e = {};
|
|
43
|
+
return Object.entries(t).forEach(([o, r]) => {
|
|
44
|
+
e[o] = r.map((c) => {
|
|
45
|
+
const n = c.replace(o, "").toLowerCase();
|
|
46
|
+
return (s) => s[n + o];
|
|
49
47
|
});
|
|
50
|
-
}),
|
|
48
|
+
}), e;
|
|
51
49
|
}
|
|
52
50
|
function m(t) {
|
|
53
|
-
const
|
|
54
|
-
return Object.entries(t).forEach(([
|
|
55
|
-
o
|
|
56
|
-
}),
|
|
51
|
+
const e = {};
|
|
52
|
+
return Object.entries(t).forEach(([o, r]) => {
|
|
53
|
+
e[o] = (c, n) => r[n] ?? "#ccc";
|
|
54
|
+
}), e;
|
|
57
55
|
}
|
|
58
|
-
function h(t) {
|
|
59
|
-
const o = t.length,
|
|
56
|
+
function h(t, e = 0.4) {
|
|
57
|
+
const o = t.length, r = {};
|
|
60
58
|
return t.forEach((c, n) => {
|
|
61
59
|
const s = (n - (o - 1) / 2) * e;
|
|
62
60
|
r[c] = s;
|
|
63
61
|
}), r;
|
|
64
62
|
}
|
|
65
63
|
export {
|
|
66
|
-
|
|
64
|
+
g as useStackedGrouped
|
|
67
65
|
};
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { defineComponent as z, useSlots as P, useTemplateRef as N, ref as O, computed as R, createElementBlock as c, openBlock as a, Fragment as j, createCommentVNode as r, createVNode as s, createElementVNode as w, unref as t, withCtx as D, createBlock as u, renderSlot as g } from "vue";
|
|
2
|
+
import { Scatter as K, Position as M } from "@unovis/ts";
|
|
3
|
+
import { VisBulletLegend as k, VisXYContainer as S, VisTooltip as E, VisScatter as G, VisAxis as x } from "@unovis/vue";
|
|
4
|
+
import { LegendPosition as d } from "../../types.js";
|
|
5
|
+
import { getFirstPropertyValue as $ } from "../../utils.js";
|
|
6
|
+
import W from "../Tooltip.js";
|
|
7
|
+
const X = {
|
|
8
|
+
key: 0,
|
|
9
|
+
class: "flex items-center justify-end pb-4"
|
|
10
|
+
}, Y = {
|
|
11
|
+
key: 1,
|
|
12
|
+
class: "flex items-center justify-end pt-4"
|
|
13
|
+
}, q = {
|
|
14
|
+
ref: "slotWrapper",
|
|
15
|
+
class: "hidden"
|
|
16
|
+
}, ee = /* @__PURE__ */ z({
|
|
17
|
+
__name: "BubbleChart",
|
|
18
|
+
props: {
|
|
19
|
+
xAccessor: {},
|
|
20
|
+
yAccessor: {},
|
|
21
|
+
sizeAccessor: {},
|
|
22
|
+
labelPosition: {},
|
|
23
|
+
sizeRange: {},
|
|
24
|
+
opacity: {},
|
|
25
|
+
xExplicitTicks: { default: void 0 },
|
|
26
|
+
minMaxTicksOnly: { type: Boolean, default: !1 },
|
|
27
|
+
data: {},
|
|
28
|
+
hideLegend: { type: Boolean, default: !1 },
|
|
29
|
+
height: {},
|
|
30
|
+
xLabel: { default: "" },
|
|
31
|
+
yLabel: { default: "" },
|
|
32
|
+
padding: { default: () => ({ top: 5, right: 5, bottom: 5, left: 5 }) },
|
|
33
|
+
categories: {},
|
|
34
|
+
categoryKey: {},
|
|
35
|
+
xFormatter: {},
|
|
36
|
+
yFormatter: {},
|
|
37
|
+
legendPosition: { default: d.Bottom },
|
|
38
|
+
sizeOptions: {},
|
|
39
|
+
xDomainLine: { type: Boolean, default: !0 },
|
|
40
|
+
yDomainLine: { type: Boolean, default: !0 },
|
|
41
|
+
xTickLine: { type: Boolean, default: !0 },
|
|
42
|
+
yTickLine: { type: Boolean, default: !0 },
|
|
43
|
+
xGridLine: { type: Boolean, default: !1 },
|
|
44
|
+
yGridLine: { type: Boolean, default: !0 },
|
|
45
|
+
hideXAxis: { type: Boolean, default: !1 },
|
|
46
|
+
hideYAxis: { type: Boolean, default: !1 },
|
|
47
|
+
xNumTicks: { default: void 0 },
|
|
48
|
+
yNumTicks: { default: void 0 },
|
|
49
|
+
hideTooltip: { type: Boolean, default: !1 },
|
|
50
|
+
crosshairConfig: { default: () => ({
|
|
51
|
+
color: "#666"
|
|
52
|
+
}) }
|
|
53
|
+
},
|
|
54
|
+
emits: ["click"],
|
|
55
|
+
setup(L, { emit: h }) {
|
|
56
|
+
const e = L, T = P(), m = N("slotWrapper"), o = O(), y = R(() => e.categories && typeof e.categories == "object" && !Array.isArray(e.categories) ? Object.values(e.categories) : Array.isArray(e.categories) ? e.categories : []), b = e.xAccessor, B = e.yAccessor, v = e.sizeAccessor || ((i) => typeof i.comments == "number" ? i.comments : 1), A = (i) => {
|
|
57
|
+
var p, f;
|
|
58
|
+
if (!e.categories || !e.categoryKey)
|
|
59
|
+
return console.warn("BubbleChart: categories and categoryKey are required for color mapping"), "#cccccc";
|
|
60
|
+
const n = String(i[e.categoryKey]);
|
|
61
|
+
let l = (p = e.categories[n]) == null ? void 0 : p.color;
|
|
62
|
+
return Object.keys(e.categories).length === 1 && (l = (f = e.categories[e.categoryKey]) == null ? void 0 : f.color), l || (console.warn(`BubbleChart: No color defined for category "${n}"`), "#cccccc");
|
|
63
|
+
}, F = h;
|
|
64
|
+
function V(i) {
|
|
65
|
+
return o.value = i, C();
|
|
66
|
+
}
|
|
67
|
+
function C(i) {
|
|
68
|
+
return typeof window > "u" ? "" : m.value ? m.value.innerHTML : "";
|
|
69
|
+
}
|
|
70
|
+
const _ = {
|
|
71
|
+
[K.selectors.point]: V
|
|
72
|
+
};
|
|
73
|
+
return (i, n) => (a(), c(j, null, [
|
|
74
|
+
!e.hideLegend && e.legendPosition === t(d).Top ? (a(), c("div", X, [
|
|
75
|
+
s(t(k), { items: y.value }, null, 8, ["items"])
|
|
76
|
+
])) : r("", !0),
|
|
77
|
+
s(t(S), {
|
|
78
|
+
data: e.data,
|
|
79
|
+
height: e.height || 600,
|
|
80
|
+
padding: e.padding,
|
|
81
|
+
scaleByDomain: !0,
|
|
82
|
+
onClick: n[0] || (n[0] = (l) => F("click", l, o.value))
|
|
83
|
+
}, {
|
|
84
|
+
default: D(() => [
|
|
85
|
+
e.hideTooltip ? r("", !0) : (a(), u(t(E), {
|
|
86
|
+
key: 0,
|
|
87
|
+
triggers: _
|
|
88
|
+
})),
|
|
89
|
+
s(t(G), {
|
|
90
|
+
x: t(b),
|
|
91
|
+
y: t(B),
|
|
92
|
+
color: A,
|
|
93
|
+
size: t(v),
|
|
94
|
+
labelPosition: e.labelPosition || t(M).Bottom,
|
|
95
|
+
sizeRange: e.sizeRange || [1, 20],
|
|
96
|
+
opacity: e.opacity,
|
|
97
|
+
cursor: "pointer"
|
|
98
|
+
}, null, 8, ["x", "y", "size", "labelPosition", "sizeRange", "opacity"]),
|
|
99
|
+
e.hideXAxis ? r("", !0) : (a(), u(t(x), {
|
|
100
|
+
key: 1,
|
|
101
|
+
type: "x",
|
|
102
|
+
label: e.xLabel,
|
|
103
|
+
tickFormat: e.xFormatter,
|
|
104
|
+
gridLine: e.xGridLine,
|
|
105
|
+
domainLine: !!e.xDomainLine,
|
|
106
|
+
tickLine: e.xTickLine,
|
|
107
|
+
numTicks: e.xNumTicks,
|
|
108
|
+
tickValues: e.xExplicitTicks,
|
|
109
|
+
minMaxTicksOnly: e.minMaxTicksOnly
|
|
110
|
+
}, null, 8, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "tickValues", "minMaxTicksOnly"])),
|
|
111
|
+
e.hideYAxis ? r("", !0) : (a(), u(t(x), {
|
|
112
|
+
key: 2,
|
|
113
|
+
type: "y",
|
|
114
|
+
label: e.yLabel,
|
|
115
|
+
tickFormat: e.yFormatter,
|
|
116
|
+
gridLine: e.yGridLine,
|
|
117
|
+
domainLine: !!e.yDomainLine,
|
|
118
|
+
tickLine: e.yTickLine,
|
|
119
|
+
numTicks: e.yNumTicks
|
|
120
|
+
}, null, 8, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks"]))
|
|
121
|
+
]),
|
|
122
|
+
_: 1
|
|
123
|
+
}, 8, ["data", "height", "padding"]),
|
|
124
|
+
!e.hideLegend && e.legendPosition === t(d).Bottom ? (a(), c("div", Y, [
|
|
125
|
+
s(t(k), { items: y.value }, null, 8, ["items"])
|
|
126
|
+
])) : r("", !0),
|
|
127
|
+
w("div", q, [
|
|
128
|
+
t(T).tooltip ? g(i.$slots, "tooltip", {
|
|
129
|
+
key: 0,
|
|
130
|
+
values: o.value
|
|
131
|
+
}) : o.value ? g(i.$slots, "fallback", { key: 1 }, () => [
|
|
132
|
+
s(W, {
|
|
133
|
+
data: o.value,
|
|
134
|
+
categories: e.categories || {},
|
|
135
|
+
toolTipTitle: t($)(o.value) ?? "",
|
|
136
|
+
yFormatter: e.yFormatter
|
|
137
|
+
}, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
|
|
138
|
+
]) : r("", !0)
|
|
139
|
+
], 512)
|
|
140
|
+
], 64));
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
export {
|
|
144
|
+
ee as default
|
|
145
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { BubbleChartProps } from './types';
|
|
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?: T | undefined) => any) | undefined;
|
|
5
|
+
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & BubbleChartProps<T> & Partial<{}>> & import('vue').PublicProps;
|
|
6
|
+
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
7
|
+
attrs: any;
|
|
8
|
+
slots: {
|
|
9
|
+
tooltip?(_: {
|
|
10
|
+
values: T | undefined;
|
|
11
|
+
}): any;
|
|
12
|
+
fallback?(_: {}): any;
|
|
13
|
+
};
|
|
14
|
+
emit: (e: "click", event: MouseEvent, values?: T) => void;
|
|
15
|
+
}>) => import('vue').VNode & {
|
|
16
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
17
|
+
};
|
|
18
|
+
export default _default;
|
|
19
|
+
type __VLS_PrettifyLocal<T> = {
|
|
20
|
+
[K in keyof T]: T[K];
|
|
21
|
+
} & {};
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import { axisFormatter, BulletLegendItemInterface, LegendPosition } from '../../types';
|
|
2
|
+
import { NumericAccessor, Position } from '@unovis/ts';
|
|
3
|
+
export type DataRecord = {
|
|
4
|
+
species: string;
|
|
5
|
+
island: string;
|
|
6
|
+
beakLength: number | undefined;
|
|
7
|
+
beakDepth: number | undefined;
|
|
8
|
+
flipperLength: number | undefined;
|
|
9
|
+
bodyMass: number | undefined;
|
|
10
|
+
sex: string;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Configuration for bubble sizes.
|
|
14
|
+
*/
|
|
15
|
+
export interface SizeOptions {
|
|
16
|
+
minRadius?: number;
|
|
17
|
+
maxRadius?: number;
|
|
18
|
+
}
|
|
19
|
+
export interface BubbleChartProps<T> {
|
|
20
|
+
/**
|
|
21
|
+
* Accessor for x value (index, property, etc). If not provided, defaults to d.beakLength.
|
|
22
|
+
*/
|
|
23
|
+
xAccessor?: NumericAccessor<T>;
|
|
24
|
+
/**
|
|
25
|
+
* Accessor for y value. If not provided, defaults to d.flipperLength.
|
|
26
|
+
*/
|
|
27
|
+
yAccessor?: NumericAccessor<T>;
|
|
28
|
+
/**
|
|
29
|
+
* Accessor for bubble size. If not provided, defaults to 1.
|
|
30
|
+
*/
|
|
31
|
+
sizeAccessor?: NumericAccessor<T>;
|
|
32
|
+
/**
|
|
33
|
+
* Label position for bubbles (default: Position.Bottom)
|
|
34
|
+
*/
|
|
35
|
+
labelPosition?: Position;
|
|
36
|
+
/**
|
|
37
|
+
* Range for bubble sizes (default: [1, 20])
|
|
38
|
+
*/
|
|
39
|
+
sizeRange?: [number, number];
|
|
40
|
+
/**
|
|
41
|
+
* Opacity for bubbles
|
|
42
|
+
*/
|
|
43
|
+
opacity?: number;
|
|
44
|
+
/**
|
|
45
|
+
* Explicit tick values for x axis
|
|
46
|
+
*/
|
|
47
|
+
xExplicitTicks?: (number | string | Date)[];
|
|
48
|
+
/**
|
|
49
|
+
* Only show min/max ticks for x axis
|
|
50
|
+
*/
|
|
51
|
+
minMaxTicksOnly?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* The data to be displayed in the bubble chart.
|
|
54
|
+
* Each element of the array represents a data point.
|
|
55
|
+
* The structure of 'T' should be compatible with the chart's rendering logic.
|
|
56
|
+
*/
|
|
57
|
+
data: T[];
|
|
58
|
+
/**
|
|
59
|
+
* If `true`, hides the chart legend.
|
|
60
|
+
*/
|
|
61
|
+
hideLegend?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* The height of the chart in pixels.
|
|
64
|
+
*/
|
|
65
|
+
height: number;
|
|
66
|
+
/**
|
|
67
|
+
* Optional label for the x-axis.
|
|
68
|
+
*/
|
|
69
|
+
xLabel?: string;
|
|
70
|
+
/**
|
|
71
|
+
* Optional label for the y-axis.
|
|
72
|
+
*/
|
|
73
|
+
yLabel?: string;
|
|
74
|
+
/**
|
|
75
|
+
* Optional padding applied to the chart.
|
|
76
|
+
* Allows specifying individual padding values for the top, right, bottom, and left sides.
|
|
77
|
+
*/
|
|
78
|
+
padding?: {
|
|
79
|
+
top: number;
|
|
80
|
+
right: number;
|
|
81
|
+
bottom: number;
|
|
82
|
+
left: number;
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* A record mapping category keys to `BulletLegendItemInterface` objects.
|
|
86
|
+
* This defines the visual representation and labels for each category in the chart's legend.
|
|
87
|
+
* REQUIRED: Each unique value in your data's categoryKey field must have a corresponding entry with a color.
|
|
88
|
+
*/
|
|
89
|
+
categories: Record<string, BulletLegendItemInterface>;
|
|
90
|
+
categoryKey: keyof T;
|
|
91
|
+
/**
|
|
92
|
+
* @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.
|
|
93
|
+
* @param {number} i - The index of the tick in the `ticks` array.
|
|
94
|
+
* @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
|
|
95
|
+
* @returns {string} The formatted string representation of the tick.
|
|
96
|
+
*/
|
|
97
|
+
xFormatter?: axisFormatter;
|
|
98
|
+
/**
|
|
99
|
+
* @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.
|
|
100
|
+
* @param {number} i - The index of the tick in the `ticks` array.
|
|
101
|
+
* @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
|
|
102
|
+
* @returns {string} The formatted string representation of the tick.
|
|
103
|
+
*/
|
|
104
|
+
yFormatter?: axisFormatter;
|
|
105
|
+
/**
|
|
106
|
+
* Optional position for the legend, if applicable.
|
|
107
|
+
* See `LegendPosition` for available options.
|
|
108
|
+
*/
|
|
109
|
+
legendPosition?: LegendPosition;
|
|
110
|
+
/** Options for controlling bubble sizes. */
|
|
111
|
+
sizeOptions?: SizeOptions;
|
|
112
|
+
/**
|
|
113
|
+
* If `true`, displays a domain line (axis line) along the x-axis.
|
|
114
|
+
*/
|
|
115
|
+
xDomainLine?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* If `true`, displays a domain line (axis line) along the y-axis.
|
|
118
|
+
*/
|
|
119
|
+
yDomainLine?: boolean;
|
|
120
|
+
/**
|
|
121
|
+
* If `true`, displays tick lines on the x-axis.
|
|
122
|
+
*/
|
|
123
|
+
xTickLine?: boolean;
|
|
124
|
+
/**
|
|
125
|
+
* If `true`, displays tick lines on the y-axis.
|
|
126
|
+
*/
|
|
127
|
+
yTickLine?: boolean;
|
|
128
|
+
/**
|
|
129
|
+
* If `true`, displays grid lines along the x-axis.
|
|
130
|
+
*/
|
|
131
|
+
xGridLine?: boolean;
|
|
132
|
+
/**
|
|
133
|
+
* If `true`, displays grid lines along the y-axis.
|
|
134
|
+
*/
|
|
135
|
+
yGridLine?: boolean;
|
|
136
|
+
/**
|
|
137
|
+
* If `true`, hide the x-axis.
|
|
138
|
+
*/
|
|
139
|
+
hideXAxis?: boolean;
|
|
140
|
+
/**
|
|
141
|
+
* If `true`, hide the y-axis.
|
|
142
|
+
*/
|
|
143
|
+
hideYAxis?: boolean;
|
|
144
|
+
/**
|
|
145
|
+
* The desired number of ticks on the x-axis.
|
|
146
|
+
*/
|
|
147
|
+
xNumTicks?: number;
|
|
148
|
+
/**
|
|
149
|
+
* The desired number of ticks on the y-axis.
|
|
150
|
+
*/
|
|
151
|
+
yNumTicks?: number;
|
|
152
|
+
/**
|
|
153
|
+
* If `true`, hides the tooltip.
|
|
154
|
+
*/
|
|
155
|
+
hideTooltip?: boolean;
|
|
156
|
+
/**
|
|
157
|
+
* Configuration for the crosshair behavior.
|
|
158
|
+
*/
|
|
159
|
+
crosshairConfig?: {
|
|
160
|
+
color?: string;
|
|
161
|
+
};
|
|
162
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ 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 { default as BubbleChart } from './components/BubbleChart/BubbleChart.vue';
|
|
6
7
|
import { LegendPosition, CurveType, Orientation, BulletLegendItemInterface, MarkerConfig, CrosshairConfig } from './types';
|
|
7
|
-
export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, Orientation, CurveType, LegendPosition };
|
|
8
|
+
export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, BubbleChart, Orientation, CurveType, LegendPosition };
|
|
8
9
|
export type { BulletLegendItemInterface, MarkerConfig, CrosshairConfig };
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import { default as a } from "./components/AreaChart/AreaChart.js";
|
|
2
2
|
import { default as o } from "./components/AreaStackedChart/AreaStackedChart.js";
|
|
3
|
-
import { default as
|
|
4
|
-
import { default as
|
|
5
|
-
import { default as
|
|
6
|
-
import {
|
|
3
|
+
import { default as u } from "./components/LineChart/LineChart.js";
|
|
4
|
+
import { default as p } from "./components/BarChart/BarChart.js";
|
|
5
|
+
import { default as m } from "./components/DonutChart/DonutChart.js";
|
|
6
|
+
import { default as x } from "./components/BubbleChart/BubbleChart.js";
|
|
7
|
+
import { CurveType as h, LegendPosition as n, Orientation as i } from "./types.js";
|
|
7
8
|
export {
|
|
8
9
|
a as AreaChart,
|
|
9
10
|
o as AreaStackedChart,
|
|
10
|
-
|
|
11
|
-
x as
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
p as BarChart,
|
|
12
|
+
x as BubbleChart,
|
|
13
|
+
h as CurveType,
|
|
14
|
+
m as DonutChart,
|
|
15
|
+
n as LegendPosition,
|
|
16
|
+
u as LineChart,
|
|
17
|
+
i as Orientation
|
|
16
18
|
};
|
package/dist/types.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { AreaChartProps } from './components/AreaChart/types';
|
|
|
2
2
|
import { BarChartProps } from './components/BarChart/types';
|
|
3
3
|
import { LineChartProps } from './components/LineChart/types';
|
|
4
4
|
import { DonutChartProps } from './components/DonutChart/types';
|
|
5
|
+
import { BubbleChartProps } from './components/BubbleChart/types';
|
|
5
6
|
declare enum LegendPosition {
|
|
6
7
|
Top = "top",
|
|
7
8
|
Bottom = "bottom"
|
|
@@ -39,7 +40,7 @@ declare enum Orientation {
|
|
|
39
40
|
Horizontal = "horizontal",
|
|
40
41
|
Vertical = "vertical"
|
|
41
42
|
}
|
|
42
|
-
export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, };
|
|
43
|
+
export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, type BubbleChartProps };
|
|
43
44
|
export type axisFormatter = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
|
|
44
45
|
export interface MarkerConfig {
|
|
45
46
|
type?: "circle" | "square" | "triangle" | "diamond";
|