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.
@@ -1,4 +1,4 @@
1
- import { defineComponent as C, useSlots as D, useTemplateRef as N, ref as O, computed as T, createElementBlock as y, openBlock as n, normalizeStyle as v, createVNode as g, createCommentVNode as m, createElementVNode as S, unref as i, withCtx as w, createBlock as u, Fragment as E, renderList as M, renderSlot as B } from "vue";
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
- }, oe = /* @__PURE__ */ C({
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, o = t, P = D(), c = N("slotWrapper"), r = O();
54
- if (!o.yAxis || o.yAxis.length === 0)
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 k = T(() => o.yAxis.map((e) => (d) => d[e])), f = (e, d) => {
57
- var a;
58
- return (a = Object.values(o.categories)[d]) == null ? void 0 : a.color;
59
- }, s = W({
60
- data: o.data,
61
- categories: o.categories,
62
- stackAndGrouped: o.stackAndGrouped,
63
- xAxis: o.xAxis
64
- }), h = T(
65
- () => o.legendPosition === I.Top
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, G();
72
+ return r.value = e, P();
69
73
  }
70
- function G(e) {
71
- return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
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: v({
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] = (a) => x("click", a, r.value))
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(i(s).states, (a) => (n(), u(i(L), {
93
- key: a,
94
- data: i(s).chartData,
95
- x: (p, F) => F + i(s).positions[a],
96
- y: i(s).bars[a],
97
- color: i(s).colorFunctions[a],
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 ?? 0.2,
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: (a, p) => p,
106
- y: k.value,
107
- color: f,
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: (a, p) => p,
116
- y: k.value,
117
- color: f,
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: v({
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(o.categories)
162
+ items: Object.values(a.categories)
159
163
  }, null, 8, ["items"])
160
164
  ], 4)),
161
- S("div", U, [
162
- i(P).tooltip ? B(e.$slots, "tooltip", {
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: o.categories,
172
+ categories: a.categories,
169
173
  toolTipTitle: i(H)(r.value) ?? "",
170
- yFormatter: o.orientation === i(l).Horizontal ? o.xFormatter : o.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
- oe as default
182
+ ae as default
179
183
  };
@@ -6,6 +6,7 @@ export interface StackedGroupedConfig<T> {
6
6
  }>;
7
7
  stackAndGrouped: boolean;
8
8
  xAxis?: keyof T;
9
+ spacing?: number;
9
10
  }
10
11
  export interface StackedGroupedResult<T> {
11
12
  states: string[];
@@ -1,13 +1,11 @@
1
1
  import { computed as u } from "vue";
2
2
  import { flattenData as i } from "../../utils.js";
3
- function b(t) {
3
+ function g(t) {
4
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;
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: o,
10
- groupedByState: e,
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 f(t) {
20
- const o = /* @__PURE__ */ new Set();
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 && o.add(c[1]);
24
- }), Array.from(o);
21
+ c && e.add(c[1]);
22
+ }), Array.from(e);
25
23
  }
26
- function l(t, o) {
27
- const e = {};
28
- return o.forEach((r) => {
29
- e[r] = Object.keys(t).filter(
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
- }), e;
30
+ }), o;
33
31
  }
34
- function p(t, o) {
35
- const e = {};
32
+ function d(t, e) {
33
+ const o = {};
36
34
  return Object.entries(t).forEach(([r, c]) => {
37
- e[r] = c.map((n) => {
35
+ o[r] = c.map((n) => {
38
36
  var s;
39
- return ((s = o[n]) == null ? void 0 : s.color) ?? "#ccc";
37
+ return ((s = e[n]) == null ? void 0 : s.color) ?? "#ccc";
40
38
  });
41
- }), e;
39
+ }), o;
42
40
  }
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];
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
- }), o;
48
+ }), e;
51
49
  }
52
50
  function m(t) {
53
- const o = {};
54
- return Object.entries(t).forEach(([e, r]) => {
55
- o[e] = (c, n) => r[n] ?? "#ccc";
56
- }), o;
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, e = 0.4, r = {};
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
- b as useStackedGrouped
64
+ g as useStackedGrouped
67
65
  };
@@ -133,6 +133,7 @@ type BarChartPropsBase<T> = {
133
133
  * If `true`, hide the y-axis.
134
134
  */
135
135
  hideYAxis?: boolean;
136
+ stackedGroupedSpacing?: number;
136
137
  };
137
138
  type BarChartPropsStackAndGrouped<T> = BarChartPropsBase<T> & {
138
139
  stackAndGrouped: true;
@@ -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,4 @@
1
+ import f from "./BubbleChart.js";
2
+ export {
3
+ f as default
4
+ };
@@ -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 d } from "./components/LineChart/LineChart.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";
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
- u as BarChart,
11
- x as CurveType,
12
- n as DonutChart,
13
- C as LegendPosition,
14
- d as LineChart,
15
- h as Orientation
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";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-chrts",
3
- "version": "0.2.2-test.0",
3
+ "version": "0.2.2",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"