vue-chrts 0.2.0-test.5 → 0.2.0-test.7

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