vue-chrts 0.2.0-test.8 → 0.2.0-test.9

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/index.d.ts CHANGED
@@ -1,7 +1,2 @@
1
- import { default as AreaChart } from './components/AreaChart/AreaChart.vue';
2
- import { default as AreaStackedChart } from './components/AreaStackedChart/AreaStackedChart.vue';
3
- import { default as LineChart } from './components/LineChart/LineChart.vue';
4
- import { default as BarChart } from './components/BarChart/BarChart.vue';
5
- import { default as DonutChart } from './components/DonutChart/DonutChart.vue';
6
- import { LegendPosition } from './types';
7
- export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, LegendPosition };
1
+ export { default as BarChart } from './components/BarChart/BarChart.vue';
2
+ export { LegendPosition } from './types';
package/dist/index.js CHANGED
@@ -1,14 +1,6 @@
1
- import { default as t } from "./components/AreaChart/AreaChart.js";
2
- import { default as o } from "./components/AreaStackedChart/AreaStackedChart.js";
3
- import { default as d } from "./components/LineChart/LineChart.js";
4
- import { default as p } from "./components/BarChart/BarChart.js";
5
- import { default as u } from "./components/DonutChart/DonutChart.js";
6
- import { LegendPosition as h } from "./types.js";
1
+ import { default as e } from "./components/BarChart/BarChart.js";
2
+ import { LegendPosition as a } from "./types.js";
7
3
  export {
8
- t as AreaChart,
9
- o as AreaStackedChart,
10
- p as BarChart,
11
- u as DonutChart,
12
- h as LegendPosition,
13
- d as LineChart
4
+ e as BarChart,
5
+ a as LegendPosition
14
6
  };
package/dist/utils.js CHANGED
@@ -1,49 +1,24 @@
1
- function o(n) {
2
- if (n && Object.keys(n).length > 0) {
3
- const e = Object.keys(n)[0];
4
- return n[e];
1
+ function u(t) {
2
+ if (t && Object.keys(t).length > 0) {
3
+ const c = Object.keys(t)[0];
4
+ return t[c];
5
5
  }
6
6
  }
7
- const u = (n, e, r, t, $) => {
8
- switch (n) {
9
- case "circle":
10
- return `<circle cx="${e / 2}" cy="${e / 2}" r="${(e - r) / 2}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
11
- case "square":
12
- return `<rect x="${r / 2}" y="${r / 2}" width="${e - r}" height="${e - r}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
13
- case "triangle":
14
- return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e - r / 2} ${r / 2},${e - r / 2}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
15
- case "diamond":
16
- return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e / 2} ${e / 2},${e - r / 2} ${r / 2},${e / 2}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
17
- default:
18
- return "";
19
- }
20
- };
21
- function m(n) {
22
- return Object.entries(n).map(([e, r]) => {
23
- const t = r.type || "circle", $ = r.size || 10, c = r.strokeWidth || 2, a = r.color || "#000", l = r.strokeColor || r.color || "#000";
24
- return `<marker id="circle-marker-${e}" viewBox="0 0 ${$} ${$}" refX="${$ / 2}" refY="${$ / 2}" markerWidth="${$ / 2}" markerHeight="${$ / 2}">
25
- ${u(t, $, c, a, l)}
26
- </marker>`;
27
- }).join(`
28
- `);
29
- }
30
- function p(n) {
31
- return n.charAt(0).toUpperCase() + n.slice(1);
7
+ function o(t) {
8
+ return t.charAt(0).toUpperCase() + t.slice(1);
32
9
  }
33
- const y = (n, e) => {
34
- const r = Object.keys(n[0]).filter(($) => $ !== e), t = Object.keys(n[0][r[0]]);
35
- return n.map(($) => ({
36
- month: $.month,
37
- ...r.flatMap(
38
- (c) => t.map((a) => ({
39
- [`${c}${p(a)}`]: $[c][a]
10
+ const a = (t, c) => {
11
+ const s = Object.keys(t[0]).filter((e) => e !== c), i = Object.keys(t[0][s[0]]);
12
+ return t.map((e) => ({
13
+ month: e.month,
14
+ ...s.flatMap(
15
+ (r) => i.map((n) => ({
16
+ [`${r}${o(n)}`]: e[r][n]
40
17
  }))
41
- ).reduce((c, a) => ({ ...c, ...a }), {})
18
+ ).reduce((r, n) => ({ ...r, ...n }), {})
42
19
  }));
43
20
  };
44
21
  export {
45
- m as createMarkers,
46
- y as flattenData,
47
- o as getFirstPropertyValue,
48
- u as markerShape
22
+ a as flattenData,
23
+ u as getFirstPropertyValue
49
24
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-chrts",
3
- "version": "0.2.0-test.8",
3
+ "version": "0.2.0-test.9",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"
@@ -20,6 +20,8 @@
20
20
  "release": "commit-and-tag-version"
21
21
  },
22
22
  "peerDependencies": {
23
+ "@unovis/ts": "^1.5.2",
24
+ "@unovis/vue": "^1.5.2",
23
25
  "vue": "^3.5.13"
24
26
  },
25
27
  "devDependencies": {
@@ -1,163 +0,0 @@
1
- import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as d, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as u, createCommentVNode as p, createElementVNode as X, unref as i, withCtx as x, createBlock as m, Fragment as L, renderList as S, mergeProps as C, renderSlot as b } from "vue";
2
- import { Position as A, CurveType as B } from "@unovis/ts";
3
- import { createMarkers as Y, getFirstPropertyValue as z } from "../../utils.js";
4
- import I from "../Tooltip.js";
5
- import { VisXYContainer as H, VisTooltip as K, VisArea as q, VisLine as J, VisAxis as D, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
6
- import { LegendPosition as _ } from "../../types.js";
7
- const ee = {
8
- ref: "slotWrapper",
9
- class: "hidden"
10
- }, y = 24, V = 4, te = 0.5, F = "#3b82f6", se = /* @__PURE__ */ U({
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 / V : n.data.length - 1 },
26
- xExplicitTicks: {},
27
- minMaxTicksOnly: { type: Boolean },
28
- yNumTicks: { default: (n) => n.data.length > y ? y / V : 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
- crosshairConfig: { default: () => ({
41
- color: "#666"
42
- }) }
43
- },
44
- emits: ["click"],
45
- setup(n, { emit: $ }) {
46
- const G = $, r = n, O = j(), h = w("slotWrapper"), s = R(), f = d(
47
- () => Object.values(r.categories).map((e) => e.color)
48
- ), N = d(() => r.markerConfig ? Y(r.markerConfig) : ""), g = d(() => r.legendPosition === _.Top), E = d(() => {
49
- const e = (t, o) => `
50
- <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
51
- <stop offset="0%" stop-color="${o}" stop-opacity="1" />
52
- <stop offset="100%" stop-color="${o}" stop-opacity="0" />
53
- </linearGradient>
54
- `, l = (t, o) => `
55
- <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
56
- <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
57
- <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
58
- </linearGradient>
59
- `;
60
- return f.value.map(
61
- (t, o) => t != null && t.includes("#") ? e(o, t) : l(o, t ?? F)
62
- ).join("");
63
- });
64
- function P(e) {
65
- var l;
66
- return {
67
- y: (t) => Number(t[e]),
68
- color: ((l = r.categories[e]) == null ? void 0 : l.color) ?? F
69
- };
70
- }
71
- function W(e) {
72
- return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
73
- }
74
- function M(e) {
75
- return s.value = e, W();
76
- }
77
- return (e, l) => (a(), c("div", {
78
- class: T(["flex flex-col", { "flex-col-reverse": g.value, markers: !!r.markerConfig }]),
79
- onClick: l[0] || (l[0] = (t) => G("click", t, s.value))
80
- }, [
81
- u(i(H), {
82
- data: e.data,
83
- height: e.height,
84
- padding: e.padding,
85
- "svg-defs": E.value + N.value
86
- }, {
87
- default: x(() => [
88
- e.hideTooltip ? p("", !0) : (a(), m(i(K), {
89
- key: 0,
90
- "horizontal-placement": i(A).Right,
91
- "vertical-placement": i(A).Top
92
- }, null, 8, ["horizontal-placement", "vertical-placement"])),
93
- (a(!0), c(L, null, S(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
94
- u(i(q), C({
95
- x: (k, v) => v
96
- }, { ref_for: !0 }, P(t), {
97
- color: `url(#gradient${o}-${f.value[o]})`,
98
- opacity: te,
99
- "curve-type": e.curveType ?? i(B).MonotoneX
100
- }), null, 16, ["x", "color", "curve-type"]),
101
- u(i(J), {
102
- x: (k, v) => v,
103
- y: (k) => k[t],
104
- color: f.value[o],
105
- "curve-type": e.curveType ?? i(B).MonotoneX,
106
- "line-width": e.lineWidth,
107
- lineDashArray: e.lineDashArray
108
- }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
109
- ], 64))), 128)),
110
- e.hideXAxis ? p("", !0) : (a(), m(i(D), {
111
- key: 1,
112
- type: "x",
113
- label: e.xLabel,
114
- "label-margin": 8,
115
- "num-ticks": e.xNumTicks,
116
- "tick-format": e.xFormatter,
117
- "tick-values": e.xExplicitTicks,
118
- "grid-line": e.xGridLine,
119
- "domain-line": e.xDomainLine,
120
- "tick-line": e.xTickLine,
121
- "min-max-ticks-only": e.minMaxTicksOnly
122
- }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
123
- e.hideYAxis ? p("", !0) : (a(), m(i(D), {
124
- key: 2,
125
- type: "y",
126
- label: e.yLabel,
127
- "num-ticks": e.yNumTicks,
128
- "tick-format": e.yFormatter,
129
- "grid-line": e.yGridLine,
130
- "domain-line": e.yDomainLine,
131
- "tick-line": e.yTickLine
132
- }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
133
- e.hideTooltip ? p("", !0) : (a(), m(i(Q), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
134
- ]),
135
- _: 1
136
- }, 8, ["data", "height", "padding", "svg-defs"]),
137
- e.hideLegend ? p("", !0) : (a(), c("div", {
138
- key: 0,
139
- class: T(["flex items-center justify-end", { "pb-4": g.value, "pt-4": !g.value }])
140
- }, [
141
- u(i(Z), {
142
- items: Object.values(e.categories)
143
- }, null, 8, ["items"])
144
- ], 2)),
145
- X("div", ee, [
146
- i(O).tooltip ? b(e.$slots, "tooltip", {
147
- key: 0,
148
- values: s.value
149
- }) : s.value ? b(e.$slots, "fallback", { key: 1 }, () => [
150
- u(I, {
151
- data: s.value,
152
- categories: e.categories,
153
- toolTipTitle: i(z)(s.value) ?? "",
154
- yFormatter: r.yFormatter
155
- }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
156
- ]) : p("", !0)
157
- ], 512)
158
- ], 2));
159
- }
160
- });
161
- export {
162
- se as default
163
- };
@@ -1,21 +0,0 @@
1
- import { AreaChartProps } from './types';
2
- declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
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"> & AreaChartProps<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
- } & {};
@@ -1,4 +0,0 @@
1
- import f from "./AreaChart.js";
2
- export {
3
- f as default
4
- };
@@ -1,77 +0,0 @@
1
- import { defineComponent as y, computed as f, createApp as h, createElementBlock as g, openBlock as a, createVNode as n, createElementVNode as B, unref as t, withCtx as L, createBlock as v, createCommentVNode as C, mergeProps as k } from "vue";
2
- import { VisXYContainer as b, VisArea as x, VisAxis as s, VisCrosshair as T, VisBulletLegend as V } from "@unovis/vue";
3
- import { CurveType as _ } from "@unovis/ts";
4
- import N from "../Tooltip.js";
5
- const A = { class: "flex flex-col space-y-4" }, j = { class: "flex items center justify-end" }, O = /* @__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
- crosshairConfig: {}
23
- },
24
- setup(c) {
25
- const i = c, l = f(() => (e, m) => {
26
- if (typeof window > "u" || typeof document > "u")
27
- return "";
28
- try {
29
- const o = h(N, {
30
- data: e,
31
- categories: i.categories
32
- }), r = document.createElement("div");
33
- o.mount(r);
34
- const u = r.innerHTML;
35
- return o.unmount(), u;
36
- } catch {
37
- return "";
38
- }
39
- }), p = (e) => Number.parseInt(e.time), d = [(e) => e.firstTime, (e) => e.returning];
40
- return (e, m) => (a(), g("div", A, [
41
- n(t(b), {
42
- data: e.data,
43
- padding: e.padding,
44
- height: e.height
45
- }, {
46
- default: L(() => [
47
- n(t(x), {
48
- x: p,
49
- y: d,
50
- color: Object.values(i.categories).map((o) => o.color),
51
- "curve-type": t(_).Linear
52
- }, null, 8, ["color", "curve-type"]),
53
- n(t(s), {
54
- type: "x",
55
- label: "Time",
56
- "num-ticks": 12
57
- }),
58
- n(t(s), {
59
- type: "y",
60
- label: "Number of visitors",
61
- "num-ticks": 3
62
- }),
63
- e.hideTooltip ? C("", !0) : (a(), v(t(T), k({ key: 0 }, e.crosshairConfig, { template: l.value }), null, 16, ["template"]))
64
- ]),
65
- _: 1
66
- }, 8, ["data", "padding", "height"]),
67
- B("div", j, [
68
- n(t(V), {
69
- items: Object.values(e.categories)
70
- }, null, 8, ["items"])
71
- ])
72
- ]));
73
- }
74
- });
75
- export {
76
- O as default
77
- };
@@ -1,14 +0,0 @@
1
- import { AreaStackedChartProps } from './types';
2
- declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
3
- props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & AreaStackedChartProps<T> & Partial<{}>> & import('vue').PublicProps;
4
- expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
5
- attrs: any;
6
- slots: {};
7
- emit: {};
8
- }>) => import('vue').VNode & {
9
- __ctx?: Awaited<typeof __VLS_setup>;
10
- };
11
- export default _default;
12
- type __VLS_PrettifyLocal<T> = {
13
- [K in keyof T]: T[K];
14
- } & {};
@@ -1,4 +0,0 @@
1
- import f from "./AreaStackedChart.js";
2
- export {
3
- f as default
4
- };
@@ -1,83 +0,0 @@
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 = {
9
- key: 0,
10
- class: "flex items-center justify-center mt-4"
11
- }, q = /* @__PURE__ */ V({
12
- __name: "DonutChart",
13
- props: {
14
- type: {},
15
- data: {},
16
- height: {},
17
- radius: {},
18
- hideLegend: { type: Boolean },
19
- labels: {},
20
- padAngle: {}
21
- },
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), {
37
- data: e.data,
38
- height: e.height,
39
- margin: {}
40
- }, {
41
- default: w(() => [
42
- r(l(W), {
43
- "horizontal-shift": 20,
44
- "vertical-shift": 20,
45
- triggers: {
46
- [l($).selectors.segment]: k
47
- }
48
- }, null, 8, ["triggers"]),
49
- r(l(_), {
50
- value: v,
51
- "corner-radius": e.radius,
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"])
56
- ]),
57
- _: 1
58
- }, 8, ["data", "height"]),
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)
74
- ]),
75
- e.hideLegend ? p("", !0) : (c(), d("div", E, [
76
- r(l(j), { items: e.labels }, null, 8, ["items"])
77
- ]))
78
- ], 64));
79
- }
80
- });
81
- export {
82
- q as default
83
- };
@@ -1,22 +0,0 @@
1
- import { DonutChartProps } 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?: 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;
8
- slots: {
9
- default?(_: {}): any;
10
- tooltip?(_: {
11
- values: any;
12
- }): any;
13
- fallback?(_: {}): any;
14
- };
15
- emit: (e: "click", event: MouseEvent, values?: any) => void;
16
- }>) => import('vue').VNode & {
17
- __ctx?: Awaited<typeof __VLS_setup>;
18
- };
19
- export default _default;
20
- type __VLS_PrettifyLocal<T> = {
21
- [K in keyof T]: T[K];
22
- } & {};
@@ -1,4 +0,0 @@
1
- import f from "./DonutChart.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- var r = /* @__PURE__ */ ((l) => (l.Half = "half", l.Full = "full", l))(r || {});
2
- export {
3
- r as DonutType
4
- };
@@ -1,143 +0,0 @@
1
- import { defineComponent as P, computed as k, useSlots as x, useTemplateRef as O, ref as j, createElementBlock as u, openBlock as n, normalizeClass as g, createVNode as s, createCommentVNode as a, createElementVNode as w, unref as i, withCtx as M, createBlock as m, Fragment as W, renderList as E, mergeProps as G, renderSlot as h } from "vue";
2
- import { Position as v, CurveType as X } from "@unovis/ts";
3
- import { createMarkers as $, getFirstPropertyValue as z } from "../../utils.js";
4
- import R from "../Tooltip.js";
5
- import { VisXYContainer as Y, VisTooltip as S, VisLine as H, VisAxis as T, VisCrosshair as U, VisBulletLegend as q } from "@unovis/vue";
6
- import { LegendPosition as I } from "../../types.js";
7
- const J = {
8
- ref: "slotWrapper",
9
- class: "hidden"
10
- }, te = /* @__PURE__ */ P({
11
- __name: "LineChart",
12
- props: {
13
- data: {},
14
- height: {},
15
- xLabel: {},
16
- yLabel: {},
17
- padding: { default: () => ({
18
- top: 5,
19
- right: 5,
20
- bottom: 5,
21
- left: 5
22
- }) },
23
- categories: {},
24
- markerConfig: {},
25
- xFormatter: {},
26
- yFormatter: {},
27
- curveType: {},
28
- lineWidth: { default: 2 },
29
- lineDashArray: {},
30
- xNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
31
- xExplicitTicks: {},
32
- minMaxTicksOnly: { type: Boolean },
33
- yNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
34
- hideTooltip: { type: Boolean },
35
- hideLegend: { type: Boolean },
36
- legendPosition: {},
37
- xGridLine: { type: Boolean },
38
- xDomainLine: { type: Boolean },
39
- yGridLine: { type: Boolean },
40
- yDomainLine: { type: Boolean },
41
- xTickLine: { type: Boolean },
42
- yTickLine: { type: Boolean },
43
- hideXAxis: { type: Boolean },
44
- hideYAxis: { type: Boolean },
45
- crosshairConfig: { default: () => ({
46
- color: "#666"
47
- }) }
48
- },
49
- emits: ["click"],
50
- setup(o, { emit: L }) {
51
- const C = L, t = o, b = k(() => t.markerConfig ? $(t.markerConfig) : ""), B = x(), c = O("slotWrapper"), l = j();
52
- function D(e) {
53
- return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
54
- }
55
- function V(e) {
56
- return l.value = e, D();
57
- }
58
- const p = k(
59
- () => t.legendPosition === I.Top
60
- ), A = Object.values(t.categories).map(
61
- (e, r) => `var(--vis-color${r})`
62
- ), F = (e) => Object.values(t.categories)[e].color ?? A[e];
63
- return (e, r) => (n(), u("div", {
64
- class: g(["flex flex-col space-y-4", {
65
- "flex-col-reverse": p.value,
66
- markers: !!t.markerConfig
67
- }]),
68
- onClick: r[0] || (r[0] = (d) => C("click", d, l.value))
69
- }, [
70
- s(i(Y), {
71
- data: e.data,
72
- padding: e.padding,
73
- height: e.height,
74
- svgDefs: b.value
75
- }, {
76
- default: M(() => [
77
- s(i(S), {
78
- "horizontal-placement": i(v).Right,
79
- "vertical-placement": i(v).Top
80
- }, null, 8, ["horizontal-placement", "vertical-placement"]),
81
- (n(!0), u(W, null, E(Object.keys(t.categories), (d, y) => (n(), m(i(H), {
82
- key: y,
83
- x: (f, N) => N,
84
- y: (f) => f[d],
85
- color: F(y),
86
- "curve-type": e.curveType ?? i(X).MonotoneX,
87
- "line-width": e.lineWidth,
88
- lineDashArray: e.lineDashArray
89
- }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
90
- e.hideXAxis ? a("", !0) : (n(), m(i(T), {
91
- key: 0,
92
- type: "x",
93
- "tick-format": e.xFormatter,
94
- label: e.xLabel,
95
- "label-margin": 8,
96
- "domain-line": e.xDomainLine,
97
- "grid-line": e.xGridLine,
98
- "tick-line": e.xTickLine,
99
- "num-ticks": e.xNumTicks,
100
- "tick-values": e.xExplicitTicks,
101
- "min-max-ticks-only": e.minMaxTicksOnly
102
- }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"])),
103
- e.hideYAxis ? a("", !0) : (n(), m(i(T), {
104
- key: 1,
105
- type: "y",
106
- "tick-format": e.yFormatter,
107
- label: e.yLabel,
108
- "num-ticks": e.yNumTicks,
109
- "domain-line": e.yDomainLine,
110
- "grid-line": e.yGridLine,
111
- "tick-line": e.yTickLine
112
- }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
113
- e.hideTooltip ? a("", !0) : (n(), m(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
114
- ]),
115
- _: 1
116
- }, 8, ["data", "padding", "height", "svgDefs"]),
117
- e.hideLegend ? a("", !0) : (n(), u("div", {
118
- key: 0,
119
- class: g(["flex items center justify-end", { "pb-4": p.value }])
120
- }, [
121
- s(i(q), {
122
- items: Object.values(e.categories)
123
- }, null, 8, ["items"])
124
- ], 2)),
125
- w("div", J, [
126
- i(B).tooltip ? h(e.$slots, "tooltip", {
127
- key: 0,
128
- values: l.value
129
- }) : l.value ? h(e.$slots, "fallback", { key: 1 }, () => [
130
- s(R, {
131
- data: l.value,
132
- categories: e.categories,
133
- toolTipTitle: i(z)(l.value) ?? "",
134
- yFormatter: t.yFormatter
135
- }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
136
- ]) : a("", !0)
137
- ], 512)
138
- ], 2));
139
- }
140
- });
141
- export {
142
- te as default
143
- };
@@ -1,21 +0,0 @@
1
- import { LineChartProps } from './types';
2
- declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
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"> & LineChartProps<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
- } & {};
@@ -1,4 +0,0 @@
1
- import f from "./LineChart.js";
2
- export {
3
- f as default
4
- };