@orchidui/dashboard 1.28.0 → 1.30.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.
package/dist/{OcOverviewMonthlyBarChart-DWCIliP7.js → OcOverviewMonthlyBarChart-OfktFA_r.js}
RENAMED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { computed as s, ref as
|
|
1
|
+
import { computed as s, ref as F, watch as M, createElementBlock as S, openBlock as k } from "vue";
|
|
2
2
|
import { useChart as B } from "./Dashboard/composables/useChart.js";
|
|
3
|
-
import { d as
|
|
3
|
+
import { d as u } from "./dayjs.min-CTPVfFeV.js";
|
|
4
4
|
const O = {
|
|
5
5
|
__name: "OcOverviewMonthlyBarChart",
|
|
6
6
|
props: {
|
|
7
7
|
variant: {
|
|
8
8
|
type: String,
|
|
9
|
-
validator: (
|
|
9
|
+
validator: (m) => ["primary", "purple"].includes(m)
|
|
10
10
|
},
|
|
11
11
|
showTooltip: Boolean,
|
|
12
12
|
showLegend: Boolean,
|
|
@@ -18,18 +18,18 @@ const O = {
|
|
|
18
18
|
tooltipFormatter: Function,
|
|
19
19
|
tooltipValueFormatter: Function
|
|
20
20
|
},
|
|
21
|
-
setup(
|
|
22
|
-
const a =
|
|
21
|
+
setup(m) {
|
|
22
|
+
const a = m, l = s(() => a.labelData.length === 30), x = s(() => Math.max(...a.chartData));
|
|
23
23
|
s(() => a.chartData.indexOf(x.value));
|
|
24
24
|
const g = (t, e = "SGD") => (typeof t == "number" ? t : Number(t)).toLocaleString("en-US", {
|
|
25
25
|
minimumFractionDigits: 2,
|
|
26
26
|
maximumFractionDigits: 2
|
|
27
|
-
}), y = (t, e = !1) => e ?
|
|
28
|
-
const e = [...a.chartData].sort((r,
|
|
27
|
+
}), y = (t, e = !1) => e ? u(t).format("DD MMM").toUpperCase() : u(t).format("ddd DD/MM").toUpperCase(), D = (t) => {
|
|
28
|
+
const e = [...a.chartData].sort((r, i) => i - r);
|
|
29
29
|
return t === e[0] ? "#4C8AFD" : t === e[1] ? "#80ACFE" : "#CCDEFE";
|
|
30
30
|
}, b = s(() => ({
|
|
31
31
|
xAxis: {
|
|
32
|
-
data: a.labelData.map((t) => y(t,
|
|
32
|
+
data: a.labelData.map((t) => y(t, l.value)),
|
|
33
33
|
splitLine: { show: !1 },
|
|
34
34
|
axisLine: { show: !1 },
|
|
35
35
|
axisTick: { show: !1 },
|
|
@@ -38,7 +38,7 @@ const O = {
|
|
|
38
38
|
fontSize: 10,
|
|
39
39
|
margin: 4,
|
|
40
40
|
width: 70,
|
|
41
|
-
interval:
|
|
41
|
+
interval: l.value ? 3 : 0
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
44
|
tooltip: {
|
|
@@ -50,16 +50,14 @@ const O = {
|
|
|
50
50
|
lineStyle: { color: "#2465DE" }
|
|
51
51
|
},
|
|
52
52
|
formatter: (t) => {
|
|
53
|
-
const e = a.labelData.
|
|
54
|
-
(u) => l(u).format("DD MMM") === t[0].name
|
|
55
|
-
), r = l(e).format("DD MMM YYYY"), c = t[0].value;
|
|
53
|
+
const e = a.labelData[t[0].dataIndex], r = u(e).format("DD MMM YYYY"), i = t[0].value;
|
|
56
54
|
return `
|
|
57
55
|
<div class="py-3 px-4">
|
|
58
56
|
<div class="flex items-center gap-2">
|
|
59
57
|
<span class="text-xs font-medium text-oc-text-300">${r}</span>
|
|
60
58
|
</div>
|
|
61
59
|
<div class="flex items-center gap-2">
|
|
62
|
-
<span class="font-semibold text-oc-text font-reddit-mono">SGD ${g(
|
|
60
|
+
<span class="font-semibold text-oc-text font-reddit-mono">SGD ${g(i)}</span>
|
|
63
61
|
</div>
|
|
64
62
|
</div>
|
|
65
63
|
`;
|
|
@@ -89,12 +87,12 @@ const O = {
|
|
|
89
87
|
type: "bar",
|
|
90
88
|
barCategoryGap: 4,
|
|
91
89
|
itemStyle: {
|
|
92
|
-
borderRadius:
|
|
90
|
+
borderRadius: l.value ? [100, 100, 0, 0] : [4, 4, 0, 0],
|
|
93
91
|
color: ({ value: t }) => D(t)
|
|
94
92
|
},
|
|
95
93
|
clip: !0
|
|
96
94
|
}]
|
|
97
|
-
})),
|
|
95
|
+
})), p = s(() => a.labelData.map((t, e) => u(t).day() === 6 && e + 1 < a.labelData.length ? [e, e + 1] : null).filter(Boolean)), v = {
|
|
98
96
|
silent: !0,
|
|
99
97
|
itemStyle: {
|
|
100
98
|
color: {
|
|
@@ -112,23 +110,23 @@ const O = {
|
|
|
112
110
|
borderColor: "rgba(53, 109, 255, 0.15)",
|
|
113
111
|
borderWidth: 1
|
|
114
112
|
}
|
|
115
|
-
},
|
|
116
|
-
const
|
|
117
|
-
return e.forEach((
|
|
118
|
-
if (
|
|
119
|
-
const
|
|
113
|
+
}, f = F(), { chart: n } = B(f, b), C = (t, e, r = !1) => {
|
|
114
|
+
const h = t.getModel().getSeriesByType("bar").map((c) => c.getData())[0], w = h.count(), o = [];
|
|
115
|
+
return e.forEach((c) => {
|
|
116
|
+
if (c < w) {
|
|
117
|
+
const d = h.getItemLayout(c);
|
|
120
118
|
o.push([
|
|
121
|
-
{ x:
|
|
122
|
-
{ x:
|
|
119
|
+
{ x: d.x - 2 },
|
|
120
|
+
{ x: d.x + d.width + 2 }
|
|
123
121
|
]);
|
|
124
122
|
}
|
|
125
123
|
}), r && o.length > 0 ? [[
|
|
126
124
|
{ x: o[0][0].x },
|
|
127
125
|
{ x: o[o.length - 1][1].x }
|
|
128
126
|
]] : o;
|
|
129
|
-
},
|
|
130
|
-
if (!n.value ||
|
|
131
|
-
const t =
|
|
127
|
+
}, A = () => {
|
|
128
|
+
if (!n.value || p.value.length === 0) return;
|
|
129
|
+
const t = p.value.map(
|
|
132
130
|
(r) => C(n.value, r, !0).flat()
|
|
133
131
|
), e = {
|
|
134
132
|
series: {
|
|
@@ -141,11 +139,11 @@ const O = {
|
|
|
141
139
|
};
|
|
142
140
|
n.value.setOption(e);
|
|
143
141
|
};
|
|
144
|
-
return
|
|
145
|
-
n.value &&
|
|
142
|
+
return M([n, l], () => {
|
|
143
|
+
n.value && A();
|
|
146
144
|
}), (t, e) => (k(), S("div", {
|
|
147
145
|
ref_key: "barChart",
|
|
148
|
-
ref:
|
|
146
|
+
ref: f,
|
|
149
147
|
class: "w-full"
|
|
150
148
|
}, null, 512));
|
|
151
149
|
}
|
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.
|
|
4
|
+
"version": "1.30.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"build": "vite build"
|
|
@@ -33,6 +33,6 @@
|
|
|
33
33
|
"rollup": "npm:@rollup/wasm-node"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@orchidui/core": "1.
|
|
36
|
+
"@orchidui/core": "1.30.0"
|
|
37
37
|
}
|
|
38
38
|
}
|