@orchidui/dashboard 1.93.0 → 1.94.0

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,5 +1,5 @@
1
1
  import { defineAsyncComponent as e } from "vue";
2
- const r = e(() => import("../../../OcOverviewPieChart-B7oIZOxz.js"));
2
+ const r = e(() => import("../../../OcOverviewPieChart--tReA5Tg.js"));
3
3
  export {
4
4
  r as OcOverviewPieChart
5
5
  };
@@ -0,0 +1,125 @@
1
+ import { ref as h, computed as b, watch as x, nextTick as _, createElementBlock as d, openBlock as f, createElementVNode as o, createCommentVNode as L, toDisplayString as n, Fragment as S, renderList as C, normalizeStyle as O } from "vue";
2
+ import { u as k } from "./useChart-D5nAyTGV.js";
3
+ const V = { class: "flex flex-col items-center justify-center" }, F = { class: "relative w-[210px] h-[210px]" }, j = { class: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none" }, N = { class: "text-center" }, P = { class: "text-oc-text-400" }, T = { class: "text-lg font-semibold font-reddit-mono" }, B = {
4
+ key: 0,
5
+ class: "mt-4 flex flex-wrap gap-3 justify-center"
6
+ }, $ = { class: "text-sm" }, I = {
7
+ __name: "OcOverviewPieChart",
8
+ props: {
9
+ chartData: Array,
10
+ currency: String,
11
+ additionalOptions: {
12
+ type: Object,
13
+ default: () => ({})
14
+ },
15
+ tooltip: {
16
+ type: Object,
17
+ default: () => ({})
18
+ },
19
+ totalLabel: {
20
+ type: String,
21
+ default: "Total"
22
+ },
23
+ showPercentInLabel: {
24
+ type: Boolean,
25
+ default: !1
26
+ }
27
+ },
28
+ setup(l) {
29
+ const t = l, r = h(""), s = h(0), g = (e) => (typeof e == "number" ? e : Number(e)).toLocaleString("en-US", {
30
+ minimumFractionDigits: 2,
31
+ maximumFractionDigits: 2
32
+ }), m = (e) => {
33
+ const a = typeof e == "number" ? e : Number(e);
34
+ return i.value ? Math.round(a / i.value * 100) : 0;
35
+ }, i = b(() => !t.chartData || t.chartData.length === 0 ? 0 : t.chartData.reduce((e, a) => e + (a.value || 0), 0)), v = () => {
36
+ r.value = t.totalLabel, s.value = i.value;
37
+ }, w = b(() => ({
38
+ tooltip: t.tooltip,
39
+ series: [
40
+ {
41
+ id: "overviewPieChart",
42
+ data: t.chartData || [],
43
+ type: "pie",
44
+ radius: ["80%", "100%"],
45
+ avoidLabelOverlap: !1,
46
+ itemStyle: {
47
+ borderRadius: 6,
48
+ borderColor: "#fff",
49
+ borderWidth: 2
50
+ },
51
+ animation: !1,
52
+ label: {
53
+ show: !1
54
+ // Hide default labels
55
+ },
56
+ labelLine: {
57
+ show: !1
58
+ },
59
+ // Emphasize hovered/active slice and blur others to gray
60
+ emphasis: {
61
+ scale: !1,
62
+ focus: "self",
63
+ label: { show: !1 },
64
+ itemStyle: {
65
+ color: "inherit"
66
+ }
67
+ },
68
+ blur: {
69
+ itemStyle: {
70
+ color: "#F2F2F4",
71
+ opacity: 1
72
+ },
73
+ label: { show: !1 }
74
+ },
75
+ ...t.additionalOptions ? t.additionalOptions : {}
76
+ }
77
+ ]
78
+ })), p = h(), { chart: y } = k(p, w), D = (e) => t.chartData[e].itemStyle.color;
79
+ return x(y, async (e) => {
80
+ e && (await _(), v(), e.on("mouseover", "series", (a) => {
81
+ if (a.componentType === "series" && a.seriesType === "pie") {
82
+ const c = a.name || "Unknown", u = a.value || 0;
83
+ r.value = `${c} (${m(u)}%)`, s.value = a.value || 0;
84
+ }
85
+ }), e.on("mouseout", "series", () => {
86
+ r.value = t.totalLabel, s.value = i.value;
87
+ }));
88
+ }), x(
89
+ () => t.chartData,
90
+ () => {
91
+ y.value && v();
92
+ },
93
+ { deep: !0 }
94
+ ), (e, a) => (f(), d("div", V, [
95
+ o("div", F, [
96
+ o("div", {
97
+ ref_key: "pieChart",
98
+ ref: p,
99
+ class: "w-[210px] h-[210px]"
100
+ }, null, 512),
101
+ o("div", j, [
102
+ o("div", N, [
103
+ o("div", P, n(r.value), 1),
104
+ o("div", T, n(l.currency) + " " + n(g(s.value)), 1)
105
+ ])
106
+ ])
107
+ ]),
108
+ l.chartData && l.chartData.length > 0 ? (f(), d("div", B, [
109
+ (f(!0), d(S, null, C(l.chartData, (c, u) => (f(), d("div", {
110
+ key: u,
111
+ class: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity"
112
+ }, [
113
+ o("div", {
114
+ class: "w-3 h-3 rounded-full",
115
+ style: O({ backgroundColor: D(u) })
116
+ }, null, 4),
117
+ o("span", $, n(c.name) + " " + n(l.showPercentInLabel ? `(${m(c.value)}%)` : ""), 1)
118
+ ]))), 128))
119
+ ])) : L("", !0)
120
+ ]));
121
+ }
122
+ };
123
+ export {
124
+ I as default
125
+ };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@orchidui/dashboard",
3
3
  "description": "Orchid Dashboard UI , Dashboard Ui Library Vue 3 tailwind css",
4
- "version": "1.93.0",
4
+ "version": "1.94.0",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "build": "vite build"
@@ -33,7 +33,7 @@
33
33
  "rollup": "npm:@rollup/wasm-node"
34
34
  },
35
35
  "dependencies": {
36
- "@orchidui/core": "1.93.0",
36
+ "@orchidui/core": "1.94.0",
37
37
  "dayjs": "^1.11.10",
38
38
  "echarts": "^5.4.3",
39
39
  "lottie-web": "^5.12.2",
@@ -1,111 +0,0 @@
1
- import { ref as m, computed as y, watch as b, nextTick as w, createElementBlock as c, openBlock as u, createElementVNode as o, createCommentVNode as C, toDisplayString as d, Fragment as O, renderList as S, normalizeStyle as k } from "vue";
2
- import { u as V } from "./useChart-D5nAyTGV.js";
3
- const L = { class: "flex flex-col items-center justify-center" }, F = { class: "relative w-[210px] h-[210px]" }, j = { class: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none" }, N = { class: "text-center" }, T = { class: "text-oc-text-400" }, P = { class: "text-lg font-semibold font-reddit-mono" }, z = {
4
- key: 0,
5
- class: "mt-4 flex flex-wrap gap-3 justify-center"
6
- }, B = { class: "text-sm" }, $ = {
7
- __name: "OcOverviewPieChart",
8
- props: {
9
- chartData: Array,
10
- currency: String,
11
- additionalOptions: {
12
- type: Object,
13
- default: () => ({})
14
- },
15
- tooltip: {
16
- type: Object,
17
- default: () => ({})
18
- }
19
- },
20
- setup(r) {
21
- const a = r, n = m(""), s = m(0), x = (e) => (typeof e == "number" ? e : Number(e)).toLocaleString("en-US", {
22
- minimumFractionDigits: 2,
23
- maximumFractionDigits: 2
24
- }), g = (e) => {
25
- const t = typeof e == "number" ? e : Number(e);
26
- return l.value ? Math.round(t / l.value * 100) : 0;
27
- }, l = y(() => !a.chartData || a.chartData.length === 0 ? 0 : a.chartData.reduce((e, t) => e + (t.value || 0), 0)), h = () => {
28
- n.value = "Total", s.value = l.value;
29
- }, _ = y(() => ({
30
- tooltip: a.tooltip,
31
- series: [{
32
- id: "overviewPieChart",
33
- data: a.chartData || [],
34
- type: "pie",
35
- radius: ["80%", "100%"],
36
- avoidLabelOverlap: !1,
37
- itemStyle: {
38
- borderRadius: 6,
39
- borderColor: "#fff",
40
- borderWidth: 2
41
- },
42
- animation: !1,
43
- label: {
44
- show: !1
45
- // Hide default labels
46
- },
47
- labelLine: {
48
- show: !1
49
- },
50
- // Emphasize hovered/active slice and blur others to gray
51
- emphasis: {
52
- scale: !1,
53
- focus: "self",
54
- label: { show: !1 },
55
- itemStyle: {
56
- color: "inherit"
57
- }
58
- },
59
- blur: {
60
- itemStyle: {
61
- color: "#F2F2F4",
62
- opacity: 1
63
- },
64
- label: { show: !1 }
65
- },
66
- ...a.additionalOptions ? a.additionalOptions : {}
67
- }]
68
- })), p = m(), { chart: v } = V(p, _), D = (e) => a.chartData[e].itemStyle.color;
69
- return b(v, async (e) => {
70
- e && (await w(), h(), e.on("mouseover", "series", (t) => {
71
- if (t.componentType === "series" && t.seriesType === "pie") {
72
- const f = t.name || "Unknown", i = t.value || 0;
73
- n.value = `${f} (${g(i)}%)`, s.value = t.value || 0;
74
- }
75
- }), e.on("mouseout", "series", () => {
76
- n.value = "Total", s.value = l.value;
77
- }));
78
- }), b(() => a.chartData, () => {
79
- v.value && h();
80
- }, { deep: !0 }), (e, t) => (u(), c("div", L, [
81
- o("div", F, [
82
- o("div", {
83
- ref_key: "pieChart",
84
- ref: p,
85
- class: "w-[210px] h-[210px]"
86
- }, null, 512),
87
- o("div", j, [
88
- o("div", N, [
89
- o("div", T, d(n.value), 1),
90
- o("div", P, d(r.currency) + " " + d(x(s.value)), 1)
91
- ])
92
- ])
93
- ]),
94
- r.chartData && r.chartData.length > 0 ? (u(), c("div", z, [
95
- (u(!0), c(O, null, S(r.chartData, (f, i) => (u(), c("div", {
96
- key: i,
97
- class: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity"
98
- }, [
99
- o("div", {
100
- class: "w-3 h-3 rounded-full",
101
- style: k({ backgroundColor: D(i) })
102
- }, null, 4),
103
- o("span", B, d(f.name), 1)
104
- ]))), 128))
105
- ])) : C("", !0)
106
- ]));
107
- }
108
- };
109
- export {
110
- $ as default
111
- };