nemesischart 2.0.6 → 2.0.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.
- package/dist/nemesischart.js +878 -873
- package/dist/nemesischart.umd.cjs +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/nemesischart.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import { Chart as
|
|
3
|
-
const
|
|
1
|
+
import { ref as ot, shallowRef as Mt, onMounted as jt, onBeforeUnmount as Ht, watch as Bt, openBlock as l, createElementBlock as s, normalizeStyle as h, createElementVNode as S, computed as z, unref as a, normalizeClass as lt, renderSlot as F, createTextVNode as X, toDisplayString as A, createCommentVNode as g, createVNode as ft, Fragment as mt, renderList as yt, useCssVars as Vt } from "vue";
|
|
2
|
+
import { Chart as wt, Title as Nt, Tooltip as Pt, Legend as Dt, Filler as It, LineController as Wt, LineElement as Ot, PointElement as Xt, BarController as Yt, BarElement as Jt, PieController as Qt, PolarAreaController as Ut, ArcElement as Gt, CategoryScale as Zt, LinearScale as Kt, RadialLinearScale as _t } from "chart.js";
|
|
3
|
+
const at = (t, m) => {
|
|
4
4
|
const e = t.__vccOpts || t;
|
|
5
|
-
for (const [
|
|
6
|
-
e[
|
|
5
|
+
for (const [i, o] of m)
|
|
6
|
+
e[i] = o;
|
|
7
7
|
return e;
|
|
8
|
-
},
|
|
8
|
+
}, te = {
|
|
9
9
|
__name: "ChartBase",
|
|
10
10
|
props: {
|
|
11
11
|
type: { type: String, required: !0 },
|
|
@@ -15,10 +15,8 @@ const ot = (t, g) => {
|
|
|
15
15
|
height: { type: [String, Number], default: 300 },
|
|
16
16
|
width: { type: [String, Number], default: null }
|
|
17
17
|
},
|
|
18
|
-
setup(t, { expose:
|
|
19
|
-
|
|
20
|
-
Ht,
|
|
21
|
-
Vt,
|
|
18
|
+
setup(t, { expose: m }) {
|
|
19
|
+
wt.register(
|
|
22
20
|
Nt,
|
|
23
21
|
Pt,
|
|
24
22
|
Dt,
|
|
@@ -31,128 +29,130 @@ const ot = (t, g) => {
|
|
|
31
29
|
Qt,
|
|
32
30
|
Ut,
|
|
33
31
|
Gt,
|
|
34
|
-
Zt
|
|
32
|
+
Zt,
|
|
33
|
+
Kt,
|
|
34
|
+
_t
|
|
35
35
|
);
|
|
36
|
-
const e = t,
|
|
36
|
+
const e = t, i = ot(null), o = Mt(null), C = {
|
|
37
37
|
responsive: !0,
|
|
38
38
|
maintainAspectRatio: !1,
|
|
39
39
|
plugins: {
|
|
40
40
|
legend: { position: "top" }
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
|
-
function
|
|
44
|
-
return { ...
|
|
43
|
+
function $() {
|
|
44
|
+
return { ...C, ...e.options };
|
|
45
45
|
}
|
|
46
|
-
function
|
|
47
|
-
|
|
46
|
+
function w() {
|
|
47
|
+
i.value && (o.value = new wt(i.value, {
|
|
48
48
|
type: e.type,
|
|
49
49
|
data: e.data,
|
|
50
|
-
options:
|
|
50
|
+
options: $(),
|
|
51
51
|
plugins: e.plugins
|
|
52
52
|
}));
|
|
53
53
|
}
|
|
54
|
-
function
|
|
54
|
+
function P() {
|
|
55
55
|
o.value && (o.value.destroy(), o.value = null);
|
|
56
56
|
}
|
|
57
|
-
return
|
|
57
|
+
return jt(w), Ht(P), Bt(
|
|
58
58
|
() => e.data,
|
|
59
|
-
(
|
|
59
|
+
(R) => {
|
|
60
60
|
if (!o.value) return;
|
|
61
|
-
o.value.data.labels =
|
|
62
|
-
const
|
|
63
|
-
|
|
61
|
+
o.value.data.labels = R.labels;
|
|
62
|
+
const q = o.value.data.datasets, L = R.datasets;
|
|
63
|
+
q.length !== L.length ? o.value.data.datasets = L : L.forEach((Q, W) => Object.assign(q[W], Q)), o.value.update();
|
|
64
64
|
},
|
|
65
65
|
{ deep: !0 }
|
|
66
|
-
),
|
|
66
|
+
), Bt(
|
|
67
67
|
() => e.options,
|
|
68
68
|
() => {
|
|
69
|
-
o.value && (o.value.options =
|
|
69
|
+
o.value && (o.value.options = $(), o.value.update());
|
|
70
70
|
},
|
|
71
71
|
{ deep: !0 }
|
|
72
|
-
),
|
|
72
|
+
), m({ chart: o }), (R, q) => (l(), s("div", {
|
|
73
73
|
class: "nc-chart-wrapper w-full",
|
|
74
|
-
style:
|
|
74
|
+
style: h({
|
|
75
75
|
height: typeof t.height == "number" ? `${t.height}px` : t.height,
|
|
76
76
|
width: t.width ? typeof t.width == "number" ? `${t.width}px` : t.width : "100%"
|
|
77
77
|
})
|
|
78
78
|
}, [
|
|
79
|
-
|
|
79
|
+
S("canvas", {
|
|
80
80
|
ref_key: "canvasRef",
|
|
81
|
-
ref:
|
|
81
|
+
ref: i
|
|
82
82
|
}, null, 512)
|
|
83
83
|
], 4));
|
|
84
84
|
}
|
|
85
|
-
},
|
|
86
|
-
function
|
|
87
|
-
const
|
|
88
|
-
if (
|
|
89
|
-
const
|
|
90
|
-
let
|
|
91
|
-
return
|
|
85
|
+
}, st = /* @__PURE__ */ at(te, [["__scopeId", "data-v-9828990e"]]);
|
|
86
|
+
function ee(t) {
|
|
87
|
+
const m = t.replace("#", ""), e = m.length === 3 ? m.split("").map((Q) => Q + Q).join("") : m, i = parseInt(e.slice(0, 2), 16) / 255, o = parseInt(e.slice(2, 4), 16) / 255, C = parseInt(e.slice(4, 6), 16) / 255, $ = Math.max(i, o, C), w = Math.min(i, o, C), P = ($ + w) / 2;
|
|
88
|
+
if ($ === w) return [0, 0, P * 100];
|
|
89
|
+
const R = $ - w, q = P > 0.5 ? R / (2 - $ - w) : R / ($ + w);
|
|
90
|
+
let L;
|
|
91
|
+
return $ === i ? L = ((o - C) / R + (o < C ? 6 : 0)) / 6 : $ === o ? L = ((C - i) / R + 2) / 6 : L = ((i - o) / R + 4) / 6, [L * 360, q * 100, P * 100];
|
|
92
92
|
}
|
|
93
|
-
function
|
|
94
|
-
t /= 360,
|
|
95
|
-
const
|
|
96
|
-
return "#" + [
|
|
93
|
+
function oe(t, m, e) {
|
|
94
|
+
t /= 360, m /= 100, e /= 100;
|
|
95
|
+
const i = e < 0.5 ? e * (1 + m) : e + m - e * m, o = 2 * e - i, C = (R) => (R < 0 && (R += 1), R > 1 && (R -= 1), R < 1 / 6 ? o + (i - o) * 6 * R : R < 1 / 2 ? i : R < 2 / 3 ? o + (i - o) * (2 / 3 - R) * 6 : o), $ = m === 0 ? e : C(t + 1 / 3), w = m === 0 ? e : C(t), P = m === 0 ? e : C(t - 1 / 3);
|
|
96
|
+
return "#" + [$, w, P].map((R) => Math.round(R * 255).toString(16).padStart(2, "0")).join("");
|
|
97
97
|
}
|
|
98
|
-
function ht(t,
|
|
99
|
-
if (!(t != null && t.startsWith("#"))) return Array.from({ length:
|
|
100
|
-
const [e,
|
|
101
|
-
return Array.from({ length:
|
|
102
|
-
const
|
|
103
|
-
return
|
|
98
|
+
function ht(t, m = 7) {
|
|
99
|
+
if (!(t != null && t.startsWith("#"))) return Array.from({ length: m }, () => t ?? "#3B82F6");
|
|
100
|
+
const [e, i] = ee(t), o = 20, C = 72;
|
|
101
|
+
return Array.from({ length: m }, ($, w) => {
|
|
102
|
+
const P = m === 1 ? 0.5 : w / (m - 1), R = o + P * (C - o), q = Math.max(50, i - Math.max(0, R - 55) * 0.6);
|
|
103
|
+
return oe(e, q, R);
|
|
104
104
|
});
|
|
105
105
|
}
|
|
106
|
-
const
|
|
106
|
+
const ae = {
|
|
107
107
|
light: { bg: "#ffffff", text: "#000000", muted: "#64748B", grid: "rgba(15,23,42,0.06)" },
|
|
108
108
|
dark: { bg: "#000000", text: "#ffffff", muted: "#7b7b7b", grid: "rgba(255,255,255,0.08)" },
|
|
109
109
|
transparent: { bg: "transparent", text: "inherit", muted: "#7b7b7b", grid: "rgba(127,127,127,0.15)" }
|
|
110
110
|
};
|
|
111
|
-
function
|
|
112
|
-
if (!t) return `rgba(59,130,246,${
|
|
111
|
+
function N(t, m) {
|
|
112
|
+
if (!t) return `rgba(59,130,246,${m})`;
|
|
113
113
|
if (t.startsWith("#")) {
|
|
114
|
-
const e = t.replace("#", ""),
|
|
115
|
-
return `rgba(${o},${
|
|
114
|
+
const e = t.replace("#", ""), i = e.length === 3 ? e.split("").map((w) => w + w).join("") : e, o = parseInt(i.slice(0, 2), 16), C = parseInt(i.slice(2, 4), 16), $ = parseInt(i.slice(4, 6), 16);
|
|
115
|
+
return `rgba(${o},${C},${$},${m})`;
|
|
116
116
|
}
|
|
117
117
|
if (t.startsWith("rgb")) {
|
|
118
118
|
const e = t.match(/[\d.]+/g);
|
|
119
|
-
if (e && e.length >= 3) return `rgba(${e[0]},${e[1]},${e[2]},${
|
|
119
|
+
if (e && e.length >= 3) return `rgba(${e[0]},${e[1]},${e[2]},${m})`;
|
|
120
120
|
}
|
|
121
121
|
return t;
|
|
122
122
|
}
|
|
123
|
-
function
|
|
124
|
-
const
|
|
125
|
-
const
|
|
123
|
+
function it(t) {
|
|
124
|
+
const m = z(() => {
|
|
125
|
+
const i = ae[t.tema], o = i ? { ...i, bg: t.corFundo || i.bg } : { bg: t.corFundo || t.tema, text: "#F8FAFC", muted: "#7b7b7b", grid: "rgba(255,255,255,0.08)" };
|
|
126
126
|
return {
|
|
127
127
|
...o,
|
|
128
128
|
text: t.corTexto || o.text,
|
|
129
129
|
muted: t.corTexto || o.muted
|
|
130
130
|
};
|
|
131
|
-
}), e =
|
|
132
|
-
background:
|
|
133
|
-
color:
|
|
131
|
+
}), e = z(() => ({
|
|
132
|
+
background: m.value.bg,
|
|
133
|
+
color: m.value.text,
|
|
134
134
|
borderRadius: typeof t.borderRadius == "number" ? `${t.borderRadius}px` : t.borderRadius,
|
|
135
135
|
boxShadow: t.sombra,
|
|
136
136
|
border: t.corBorda ? `1px solid ${t.corBorda}` : "none"
|
|
137
137
|
}));
|
|
138
|
-
return { palette:
|
|
138
|
+
return { palette: m, cardStyle: e, toRgba: N };
|
|
139
139
|
}
|
|
140
|
-
function
|
|
141
|
-
const
|
|
142
|
-
function e(
|
|
143
|
-
if (
|
|
144
|
-
const o = Number(
|
|
145
|
-
return Number.isNaN(o) ? String(
|
|
140
|
+
function pt(t) {
|
|
141
|
+
const m = z(() => t.tipoValor === "moeda" ? new Intl.NumberFormat(t.locale, { style: "currency", currency: t.moeda }) : t.tipoValor === "percentual" ? new Intl.NumberFormat(t.locale, { style: "percent", maximumFractionDigits: 2 }) : new Intl.NumberFormat(t.locale, { maximumFractionDigits: 2 }));
|
|
142
|
+
function e(i) {
|
|
143
|
+
if (i == null) return "";
|
|
144
|
+
const o = Number(i);
|
|
145
|
+
return Number.isNaN(o) ? String(i) : t.tipoValor === "percentual" ? m.value.format(o / 100) : m.value.format(o);
|
|
146
146
|
}
|
|
147
|
-
return { formatador:
|
|
147
|
+
return { formatador: m, formatar: e };
|
|
148
148
|
}
|
|
149
|
-
function gt(t, { caretFlexivel:
|
|
149
|
+
function gt(t, { caretFlexivel: m = !1 } = {}) {
|
|
150
150
|
let e = t.querySelector(".nc-tt");
|
|
151
151
|
if (e) return e;
|
|
152
152
|
e = document.createElement("div"), e.className = "nc-tt", Object.assign(e.style, {
|
|
153
153
|
position: "absolute",
|
|
154
154
|
pointerEvents: "none",
|
|
155
|
-
transform:
|
|
155
|
+
transform: m ? "translateX(-50%)" : "translate(-50%, calc(-100% - 16px))",
|
|
156
156
|
transition: "opacity .18s ease, left .12s ease, top .12s ease",
|
|
157
157
|
opacity: "0",
|
|
158
158
|
background: "#ffffff",
|
|
@@ -166,8 +166,8 @@ function gt(t, { caretFlexivel: g = !1 } = {}) {
|
|
|
166
166
|
fontFamily: "inherit",
|
|
167
167
|
textAlign: "left"
|
|
168
168
|
});
|
|
169
|
-
const
|
|
170
|
-
|
|
169
|
+
const i = document.createElement("div");
|
|
170
|
+
i.className = "nc-tt__caret";
|
|
171
171
|
const o = {
|
|
172
172
|
position: "absolute",
|
|
173
173
|
left: "50%",
|
|
@@ -177,96 +177,96 @@ function gt(t, { caretFlexivel: g = !1 } = {}) {
|
|
|
177
177
|
transform: "translateX(-50%) rotate(45deg)",
|
|
178
178
|
borderRadius: "2px"
|
|
179
179
|
};
|
|
180
|
-
|
|
180
|
+
m ? Object.assign(i.style, o) : Object.assign(i.style, o, {
|
|
181
181
|
bottom: "-5px",
|
|
182
182
|
borderRight: "1px solid rgba(15,23,42,.06)",
|
|
183
183
|
borderBottom: "1px solid rgba(15,23,42,.06)"
|
|
184
|
-
}), e.appendChild(
|
|
185
|
-
const
|
|
186
|
-
return
|
|
184
|
+
}), e.appendChild(i);
|
|
185
|
+
const C = document.createElement("div");
|
|
186
|
+
return C.className = "nc-tt__content", Object.assign(C.style, { position: "relative", background: "#fff", borderRadius: "8px" }), e.appendChild(C), t.appendChild(e), e;
|
|
187
187
|
}
|
|
188
|
-
function
|
|
189
|
-
const
|
|
190
|
-
return
|
|
188
|
+
function rt(t) {
|
|
189
|
+
const m = t.canvas.parentNode;
|
|
190
|
+
return m ? (getComputedStyle(m).position === "static" && (m.style.position = "relative"), m) : null;
|
|
191
191
|
}
|
|
192
|
-
function
|
|
193
|
-
const o =
|
|
194
|
-
return t - o <
|
|
192
|
+
function nt(t, m, e, i = 4) {
|
|
193
|
+
const o = m / 2;
|
|
194
|
+
return t - o < i ? o + i : t + o > e - i ? e - o - i : t;
|
|
195
195
|
}
|
|
196
|
-
function
|
|
196
|
+
function Rt(t, m) {
|
|
197
197
|
const e = window.getComputedStyle(t);
|
|
198
|
-
let
|
|
198
|
+
let i = "";
|
|
199
199
|
for (let o = 0; o < e.length; o++) {
|
|
200
|
-
const
|
|
201
|
-
let
|
|
202
|
-
if (
|
|
203
|
-
if (
|
|
204
|
-
|
|
200
|
+
const C = e[o];
|
|
201
|
+
let $ = e.getPropertyValue(C);
|
|
202
|
+
if ($ && $.indexOf("url(") !== -1 && !/url\(["']?data:/.test($))
|
|
203
|
+
if (C === "background-image" || C === "background" || C === "mask-image" || C === "border-image" || C === "border-image-source")
|
|
204
|
+
$ = "none";
|
|
205
205
|
else
|
|
206
206
|
continue;
|
|
207
|
-
|
|
207
|
+
i += `${C}:${$};`;
|
|
208
208
|
}
|
|
209
|
-
|
|
209
|
+
m.setAttribute("style", i);
|
|
210
210
|
}
|
|
211
|
-
function
|
|
212
|
-
|
|
213
|
-
const e = t.querySelectorAll("*"),
|
|
211
|
+
function re(t, m) {
|
|
212
|
+
Rt(t, m);
|
|
213
|
+
const e = t.querySelectorAll("*"), i = m.querySelectorAll("*");
|
|
214
214
|
for (let o = 0; o < e.length; o++)
|
|
215
|
-
|
|
215
|
+
i[o] && Rt(e[o], i[o]);
|
|
216
216
|
}
|
|
217
|
-
function
|
|
218
|
-
const e = t.querySelectorAll("canvas"),
|
|
219
|
-
e.forEach((o,
|
|
220
|
-
if (!
|
|
221
|
-
const
|
|
217
|
+
function ne(t, m) {
|
|
218
|
+
const e = t.querySelectorAll("canvas"), i = m.querySelectorAll("canvas");
|
|
219
|
+
e.forEach((o, C) => {
|
|
220
|
+
if (!i[C]) return;
|
|
221
|
+
const $ = document.createElement("img");
|
|
222
222
|
try {
|
|
223
|
-
|
|
223
|
+
$.src = o.toDataURL("image/png");
|
|
224
224
|
} catch {
|
|
225
225
|
return;
|
|
226
226
|
}
|
|
227
|
-
const
|
|
228
|
-
|
|
227
|
+
const w = o.getBoundingClientRect();
|
|
228
|
+
$.setAttribute("style", `width:${w.width}px;height:${w.height}px;display:block;`), i[C].replaceWith($);
|
|
229
229
|
});
|
|
230
230
|
}
|
|
231
|
-
async function
|
|
231
|
+
async function ct(t, m = {}) {
|
|
232
232
|
if (!t) return;
|
|
233
233
|
const {
|
|
234
234
|
nomeArquivo: e = "componente.png",
|
|
235
|
-
escala:
|
|
235
|
+
escala: i = 2,
|
|
236
236
|
corFundo: o = null
|
|
237
|
-
} =
|
|
238
|
-
|
|
239
|
-
const
|
|
240
|
-
await new Promise((
|
|
241
|
-
|
|
237
|
+
} = m, C = t.getBoundingClientRect(), $ = Math.ceil(C.width), w = Math.ceil(C.height), P = t.cloneNode(!0);
|
|
238
|
+
re(t, P), ne(t, P), P.style.margin = "0", P.style.transform = "none";
|
|
239
|
+
const R = new XMLSerializer().serializeToString(P), q = `<svg xmlns="http://www.w3.org/2000/svg" width="${$}" height="${w}"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:${$}px;height:${w}px;">` + R + "</div></foreignObject></svg>", Q = "data:image/svg+xml;base64," + (typeof window < "u" && window.btoa ? window.btoa(unescape(encodeURIComponent(q))) : ""), W = new Image();
|
|
240
|
+
await new Promise((M, G) => {
|
|
241
|
+
W.onload = M, W.onerror = G, W.src = Q;
|
|
242
242
|
});
|
|
243
243
|
const K = document.createElement("canvas");
|
|
244
|
-
K.width =
|
|
244
|
+
K.width = $ * i, K.height = w * i;
|
|
245
245
|
const _ = K.getContext("2d");
|
|
246
|
-
_.scale(
|
|
247
|
-
let
|
|
246
|
+
_.scale(i, i), o && (_.fillStyle = o, _.fillRect(0, 0, $, w)), _.drawImage(W, 0, 0);
|
|
247
|
+
let f;
|
|
248
248
|
try {
|
|
249
|
-
|
|
250
|
-
} catch (
|
|
251
|
-
console.error("Falha ao exportar imagem: canvas contaminado.",
|
|
249
|
+
f = K.toDataURL("image/png");
|
|
250
|
+
} catch (M) {
|
|
251
|
+
console.error("Falha ao exportar imagem: canvas contaminado.", M);
|
|
252
252
|
return;
|
|
253
253
|
}
|
|
254
|
-
const
|
|
255
|
-
|
|
254
|
+
const T = document.createElement("a");
|
|
255
|
+
T.download = e, T.href = f, document.body.appendChild(T), T.click(), document.body.removeChild(T);
|
|
256
256
|
}
|
|
257
|
-
const
|
|
257
|
+
const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>', le = { class: "card-linhas__header flex flex-column" }, se = { class: "card-linhas__topo flex align-items-start justify-content-between gap-3" }, ie = {
|
|
258
258
|
key: 0,
|
|
259
259
|
class: "nc-legendas-flex flex flex-column"
|
|
260
|
-
},
|
|
260
|
+
}, ce = {
|
|
261
261
|
key: 1,
|
|
262
262
|
class: "nc-actions inline-flex align-items-center gap-2"
|
|
263
|
-
},
|
|
263
|
+
}, de = ["innerHTML"], ue = {
|
|
264
264
|
key: 0,
|
|
265
265
|
class: "card-linhas__titulos mt-3 mb-2 flex flex-column"
|
|
266
|
-
},
|
|
266
|
+
}, fe = { class: "card-linhas__chart flex-1" }, pe = {
|
|
267
267
|
key: 0,
|
|
268
268
|
class: "card-linhas__footer mt-3"
|
|
269
|
-
},
|
|
269
|
+
}, ge = {
|
|
270
270
|
__name: "CardLinhas",
|
|
271
271
|
props: {
|
|
272
272
|
legenda: { type: String, default: null },
|
|
@@ -317,76 +317,76 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
317
317
|
nomeArquivoExport: { type: String, default: "card-linhas.png" }
|
|
318
318
|
},
|
|
319
319
|
emits: ["botaoAcao", "exportado"],
|
|
320
|
-
setup(t, { emit:
|
|
321
|
-
const e = t,
|
|
322
|
-
async function
|
|
323
|
-
await
|
|
320
|
+
setup(t, { emit: m }) {
|
|
321
|
+
const e = t, i = m, { palette: o, cardStyle: C } = it(e), { formatar: $ } = pt(e), w = ot(null), P = dt;
|
|
322
|
+
async function R() {
|
|
323
|
+
await ct(w.value, {
|
|
324
324
|
nomeArquivo: e.nomeArquivoExport,
|
|
325
325
|
corFundo: o.value.bg !== "transparent" ? o.value.bg : null
|
|
326
|
-
}),
|
|
326
|
+
}), i("exportado");
|
|
327
327
|
}
|
|
328
|
-
const
|
|
329
|
-
valor:
|
|
330
|
-
rotulo:
|
|
331
|
-
cor:
|
|
332
|
-
corRotulo:
|
|
333
|
-
corTexto:
|
|
334
|
-
tracejado:
|
|
335
|
-
espessura:
|
|
336
|
-
}) : []),
|
|
337
|
-
let
|
|
328
|
+
const q = z(() => `card-linhas--${e.direcao}`), L = z(() => e.linhasReferencia ? (Array.isArray(e.linhasReferencia) ? e.linhasReferencia : [e.linhasReferencia]).filter((d) => d && (typeof d == "number" || typeof d.valor == "number")).map((d) => typeof d == "number" ? { valor: d, rotulo: null, cor: "#0F172A", corRotulo: "#0F172A", corTexto: "#FFFFFF", tracejado: [6, 6], espessura: 1 } : {
|
|
329
|
+
valor: d.valor,
|
|
330
|
+
rotulo: d.rotulo ?? null,
|
|
331
|
+
cor: d.cor || "#0F172A",
|
|
332
|
+
corRotulo: d.corRotulo || d.cor || "#0F172A",
|
|
333
|
+
corTexto: d.corTexto || "#FFFFFF",
|
|
334
|
+
tracejado: d.tracejado || [6, 6],
|
|
335
|
+
espessura: d.espessura ?? 1
|
|
336
|
+
}) : []), Q = [];
|
|
337
|
+
let W = null;
|
|
338
338
|
const K = {
|
|
339
339
|
id: "linhaReferencia",
|
|
340
|
-
afterDatasetsDraw(
|
|
341
|
-
const
|
|
342
|
-
if (
|
|
343
|
-
const { ctx:
|
|
344
|
-
|
|
345
|
-
const
|
|
346
|
-
if (
|
|
347
|
-
|
|
340
|
+
afterDatasetsDraw(p) {
|
|
341
|
+
const d = L.value;
|
|
342
|
+
if (Q.length = 0, !d.length) return;
|
|
343
|
+
const { ctx: r, chartArea: b, scales: x } = p, c = x.y;
|
|
344
|
+
c && d.forEach((u) => {
|
|
345
|
+
const n = c.getPixelForValue(u.valor);
|
|
346
|
+
if (Q.push({ linha: u, pos: n, chartArea: b }), r.save(), r.beginPath(), r.setLineDash(u.tracejado), r.lineWidth = u.espessura, r.strokeStyle = u.cor, n < b.top || n > b.bottom) {
|
|
347
|
+
r.restore();
|
|
348
348
|
return;
|
|
349
349
|
}
|
|
350
|
-
if (
|
|
351
|
-
|
|
352
|
-
const
|
|
353
|
-
let
|
|
354
|
-
|
|
350
|
+
if (r.moveTo(b.left, n), r.lineTo(b.right, n), r.stroke(), r.setLineDash([]), u.rotulo) {
|
|
351
|
+
r.font = "600 11px 'Inter', sans-serif";
|
|
352
|
+
const y = 8, v = 5, E = r.measureText(u.rotulo).width, B = 12, k = E + y * 2, O = B + v * 2, Y = O / 2;
|
|
353
|
+
let V = b.left - k - 6, I = n - O / 2;
|
|
354
|
+
V < 0 && (V = b.left + 6), r.fillStyle = u.corRotulo, r.beginPath(), r.roundRect ? r.roundRect(V, I, k, O, Y) : (r.moveTo(V + Y, I), r.lineTo(V + k - Y, I), r.quadraticCurveTo(V + k, I, V + k, I + Y), r.lineTo(V + k, I + O - Y), r.quadraticCurveTo(V + k, I + O, V + k - Y, I + O), r.lineTo(V + Y, I + O), r.quadraticCurveTo(V, I + O, V, I + O - Y), r.lineTo(V, I + Y), r.quadraticCurveTo(V, I, V + Y, I)), r.fill(), r.fillStyle = u.corTexto, r.textBaseline = "middle", r.textAlign = "center", r.fillText(u.rotulo, V + k / 2, I + O / 2);
|
|
355
355
|
}
|
|
356
|
-
|
|
356
|
+
r.restore();
|
|
357
357
|
});
|
|
358
358
|
},
|
|
359
|
-
beforeEvent(
|
|
360
|
-
if (!
|
|
361
|
-
|
|
359
|
+
beforeEvent(p, d) {
|
|
360
|
+
if (!Q.length) {
|
|
361
|
+
W = null;
|
|
362
362
|
return;
|
|
363
363
|
}
|
|
364
|
-
const
|
|
365
|
-
if (!
|
|
366
|
-
|
|
364
|
+
const r = d.event;
|
|
365
|
+
if (!r || r.type === "mouseout" || r.x == null || r.y == null) {
|
|
366
|
+
W = null;
|
|
367
367
|
return;
|
|
368
368
|
}
|
|
369
|
-
const
|
|
370
|
-
let
|
|
371
|
-
for (const
|
|
372
|
-
const
|
|
373
|
-
|
|
369
|
+
const b = 8;
|
|
370
|
+
let x = null, c = 1 / 0;
|
|
371
|
+
for (const u of Q) {
|
|
372
|
+
const n = Math.abs(r.y - u.pos), y = r.x >= u.chartArea.left && r.x <= u.chartArea.right;
|
|
373
|
+
n <= b && y && n < c && (c = n, x = u);
|
|
374
374
|
}
|
|
375
|
-
|
|
375
|
+
W = x;
|
|
376
376
|
},
|
|
377
|
-
afterEvent(
|
|
378
|
-
if (!
|
|
379
|
-
const
|
|
380
|
-
if (!
|
|
381
|
-
const
|
|
382
|
-
if (!
|
|
383
|
-
let
|
|
384
|
-
if (!
|
|
385
|
-
|
|
377
|
+
afterEvent(p, d) {
|
|
378
|
+
if (!Q.length) return;
|
|
379
|
+
const r = d.event;
|
|
380
|
+
if (!r) return;
|
|
381
|
+
const b = rt(p);
|
|
382
|
+
if (!b) return;
|
|
383
|
+
let x = b.querySelector(".nc-tt-linhaRef");
|
|
384
|
+
if (!W) {
|
|
385
|
+
x && (x.style.opacity = "0");
|
|
386
386
|
return;
|
|
387
387
|
}
|
|
388
|
-
const
|
|
389
|
-
|
|
388
|
+
const c = W;
|
|
389
|
+
x || (x = document.createElement("div"), x.className = "nc-tt-linhaRef", Object.assign(x.style, {
|
|
390
390
|
position: "absolute",
|
|
391
391
|
pointerEvents: "none",
|
|
392
392
|
transform: "translate(-50%, calc(-100% - 12px))",
|
|
@@ -401,30 +401,30 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
401
401
|
zIndex: "11",
|
|
402
402
|
fontFamily: "'Inter', sans-serif",
|
|
403
403
|
textAlign: "left"
|
|
404
|
-
}),
|
|
405
|
-
const
|
|
406
|
-
|
|
407
|
-
const
|
|
408
|
-
|
|
409
|
-
const
|
|
410
|
-
let
|
|
411
|
-
const I = E + 16 +
|
|
412
|
-
|
|
404
|
+
}), b.appendChild(x));
|
|
405
|
+
const u = c.linha.cor || "#0F172A", n = $(c.linha.valor), y = c.linha.rotulo;
|
|
406
|
+
x.innerHTML = (y ? `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${y}</div>` : "") + `<div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${u};box-shadow:0 0 0 2px ${N(u, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${n}</span></div>`;
|
|
407
|
+
const v = p.canvas;
|
|
408
|
+
x.style.opacity = "1", x.style.visibility = "hidden", x.style.left = "0px", x.style.top = "0px";
|
|
409
|
+
const j = x.offsetWidth, E = x.offsetHeight, B = 4, k = v.offsetLeft + r.x, O = v.offsetTop + c.pos, Y = nt(k, j, b.clientWidth, B);
|
|
410
|
+
let V = O;
|
|
411
|
+
const I = E + 16 + B;
|
|
412
|
+
V < I && (V = I), x.style.left = Y + "px", x.style.top = V + "px", x.style.visibility = "visible";
|
|
413
413
|
}
|
|
414
|
-
}, _ =
|
|
415
|
-
labels: e.data.map((
|
|
414
|
+
}, _ = z(() => L.value.length ? [K] : []), f = z(() => ({
|
|
415
|
+
labels: e.data.map((p) => p.rotulo),
|
|
416
416
|
datasets: [
|
|
417
417
|
{
|
|
418
|
-
data: e.data.map((
|
|
418
|
+
data: e.data.map((p) => p.quantidade),
|
|
419
419
|
borderColor: e.corDetalhes,
|
|
420
420
|
borderWidth: 3,
|
|
421
421
|
borderJoinStyle: "round",
|
|
422
422
|
borderCapStyle: "round",
|
|
423
|
-
backgroundColor: (
|
|
424
|
-
const { chart:
|
|
425
|
-
if (!
|
|
426
|
-
const
|
|
427
|
-
return
|
|
423
|
+
backgroundColor: (p) => {
|
|
424
|
+
const { chart: d } = p, { ctx: r, chartArea: b } = d;
|
|
425
|
+
if (!b) return "transparent";
|
|
426
|
+
const x = e.corDetalhes || "#0400FF", c = "#7C7C7C", u = r.createLinearGradient(0, b.top, 0, b.bottom);
|
|
427
|
+
return u.addColorStop(0.16, N(x, 0.2)), u.addColorStop(1, N(c, 0)), u;
|
|
428
428
|
},
|
|
429
429
|
fill: !0,
|
|
430
430
|
tension: 0.45,
|
|
@@ -437,54 +437,54 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
437
437
|
}
|
|
438
438
|
]
|
|
439
439
|
}));
|
|
440
|
-
function
|
|
441
|
-
const { chart:
|
|
442
|
-
if (!
|
|
443
|
-
const
|
|
444
|
-
if (
|
|
445
|
-
|
|
440
|
+
function T(p) {
|
|
441
|
+
const { chart: d, tooltip: r } = p, b = rt(d);
|
|
442
|
+
if (!b) return;
|
|
443
|
+
const x = gt(b);
|
|
444
|
+
if (r.opacity === 0 || W) {
|
|
445
|
+
x.style.opacity = "0";
|
|
446
446
|
return;
|
|
447
447
|
}
|
|
448
|
-
const
|
|
449
|
-
|
|
450
|
-
const { offsetLeft:
|
|
451
|
-
|
|
452
|
-
const E =
|
|
453
|
-
let
|
|
454
|
-
|
|
455
|
-
const
|
|
456
|
-
if (
|
|
457
|
-
const
|
|
458
|
-
|
|
448
|
+
const c = r.title || [], u = (r.body || []).flatMap((Z) => Z.lines), n = x.querySelector(".nc-tt__content"), y = e.corDetalhes || "#3B82F6";
|
|
449
|
+
n.innerHTML = `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${c.join(" ")}</div><div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${y};box-shadow:0 0 0 2px ${N(y, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${u.join(" ")}</span></div>`;
|
|
450
|
+
const { offsetLeft: v, offsetTop: j } = d.canvas;
|
|
451
|
+
x.style.opacity = "1", x.style.visibility = "hidden", x.style.left = "0px", x.style.top = "0px";
|
|
452
|
+
const E = x.offsetWidth, B = x.offsetHeight, k = 4, O = v + r.caretX, Y = j + r.caretY, V = nt(O, E, b.clientWidth, k), I = B + 16 + k, tt = Y < I;
|
|
453
|
+
let U;
|
|
454
|
+
tt ? (x.style.transform = "translateX(-50%) translateY(16px)", U = Y) : (x.style.transform = "translate(-50%, calc(-100% - 16px))", U = Y), x.style.left = V + "px", x.style.top = U + "px";
|
|
455
|
+
const H = x.querySelector(".nc-tt__caret");
|
|
456
|
+
if (H) {
|
|
457
|
+
const Z = O - V, D = E / 2, J = Math.max(-D + 8, Math.min(D - 8, Z));
|
|
458
|
+
H.style.left = `calc(50% + ${J}px)`, tt ? (H.style.bottom = "", H.style.top = "-5px", H.style.borderRight = "", H.style.borderBottom = "", H.style.borderLeft = "1px solid rgba(15,23,42,.06)", H.style.borderTop = "1px solid rgba(15,23,42,.06)") : (H.style.top = "", H.style.bottom = "-5px", H.style.borderLeft = "", H.style.borderTop = "", H.style.borderRight = "1px solid rgba(15,23,42,.06)", H.style.borderBottom = "1px solid rgba(15,23,42,.06)");
|
|
459
459
|
}
|
|
460
|
-
|
|
460
|
+
x.style.visibility = "visible";
|
|
461
461
|
}
|
|
462
|
-
const
|
|
462
|
+
const M = z(() => ({
|
|
463
463
|
responsive: !0,
|
|
464
464
|
maintainAspectRatio: !1,
|
|
465
465
|
interaction: { intersect: !1, mode: "index" },
|
|
466
466
|
layout: {
|
|
467
|
-
padding: { top:
|
|
467
|
+
padding: { top: L.value.length ? 24 : 0, right: 0, bottom: 0, left: 0 }
|
|
468
468
|
},
|
|
469
469
|
plugins: {
|
|
470
470
|
legend: { display: !1 },
|
|
471
471
|
tooltip: {
|
|
472
472
|
enabled: !1,
|
|
473
|
-
external:
|
|
473
|
+
external: T,
|
|
474
474
|
callbacks: {
|
|
475
|
-
title: (
|
|
476
|
-
var
|
|
477
|
-
return ((
|
|
475
|
+
title: (p) => {
|
|
476
|
+
var d;
|
|
477
|
+
return ((d = p[0]) == null ? void 0 : d.label) ?? "";
|
|
478
478
|
},
|
|
479
|
-
label: (
|
|
479
|
+
label: (p) => $(p.parsed.y)
|
|
480
480
|
}
|
|
481
481
|
}
|
|
482
482
|
},
|
|
483
483
|
scales: {
|
|
484
484
|
x: {
|
|
485
485
|
display: !0,
|
|
486
|
-
afterFit: (
|
|
487
|
-
|
|
486
|
+
afterFit: (p) => {
|
|
487
|
+
p.paddingLeft = 0, p.paddingRight = 0;
|
|
488
488
|
},
|
|
489
489
|
grid: { display: !1, drawBorder: !1 },
|
|
490
490
|
border: { display: !1 },
|
|
@@ -499,112 +499,112 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
499
499
|
display: !1,
|
|
500
500
|
grid: { display: !1 },
|
|
501
501
|
beginAtZero: !0,
|
|
502
|
-
suggestedMax:
|
|
502
|
+
suggestedMax: L.value.length ? Math.max(...L.value.map((p) => p.valor)) : void 0
|
|
503
503
|
}
|
|
504
504
|
}
|
|
505
505
|
}));
|
|
506
|
-
function
|
|
507
|
-
|
|
506
|
+
function G() {
|
|
507
|
+
i("botaoAcao");
|
|
508
508
|
}
|
|
509
|
-
return (
|
|
509
|
+
return (p, d) => (l(), s("div", {
|
|
510
510
|
ref_key: "cardRef",
|
|
511
|
-
ref:
|
|
512
|
-
class:
|
|
513
|
-
style:
|
|
511
|
+
ref: w,
|
|
512
|
+
class: lt(["card-linhas p-4 flex", q.value]),
|
|
513
|
+
style: h(a(C))
|
|
514
514
|
}, [
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
515
|
+
S("div", le, [
|
|
516
|
+
S("div", se, [
|
|
517
|
+
p.$slots.legenda || t.legenda || p.$slots.sublegenda || t.sublegenda ? (l(), s("div", ie, [
|
|
518
|
+
p.$slots.legenda || t.legenda ? (l(), s("div", {
|
|
519
519
|
key: 0,
|
|
520
520
|
class: "text-xs font-medium",
|
|
521
|
-
style:
|
|
521
|
+
style: h({ color: a(o).text, opacity: 0.85 })
|
|
522
522
|
}, [
|
|
523
|
-
|
|
524
|
-
|
|
523
|
+
F(p.$slots, "legenda", {}, () => [
|
|
524
|
+
X(A(t.legenda), 1)
|
|
525
525
|
], !0)
|
|
526
|
-
], 4)) :
|
|
527
|
-
|
|
526
|
+
], 4)) : g("", !0),
|
|
527
|
+
p.$slots.sublegenda || t.sublegenda ? (l(), s("div", {
|
|
528
528
|
key: 1,
|
|
529
529
|
class: "text-xs",
|
|
530
|
-
style:
|
|
530
|
+
style: h({ color: a(o).muted })
|
|
531
531
|
}, [
|
|
532
|
-
|
|
533
|
-
|
|
532
|
+
F(p.$slots, "sublegenda", {}, () => [
|
|
533
|
+
X(A(t.sublegenda), 1)
|
|
534
534
|
], !0)
|
|
535
|
-
], 4)) :
|
|
536
|
-
])) :
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
t.botaoVisivel ? (
|
|
535
|
+
], 4)) : g("", !0)
|
|
536
|
+
])) : g("", !0),
|
|
537
|
+
p.$slots.actions || t.botaoVisivel || t.exportar ? (l(), s("div", ce, [
|
|
538
|
+
F(p.$slots, "actions", {}, () => [
|
|
539
|
+
t.botaoVisivel ? (l(), s("button", {
|
|
540
540
|
key: 0,
|
|
541
541
|
class: "nc-btn inline-flex align-items-center",
|
|
542
|
-
style:
|
|
543
|
-
onClick:
|
|
542
|
+
style: h({ color: a(o).text, borderColor: a(N)(a(o).text, 0.18) }),
|
|
543
|
+
onClick: G
|
|
544
544
|
}, [
|
|
545
|
-
|
|
546
|
-
], 4)) :
|
|
545
|
+
S("span", null, A(t.textoBotao), 1)
|
|
546
|
+
], 4)) : g("", !0)
|
|
547
547
|
], !0),
|
|
548
|
-
t.exportar ? (
|
|
548
|
+
t.exportar ? (l(), s("button", {
|
|
549
549
|
key: 0,
|
|
550
550
|
type: "button",
|
|
551
551
|
class: "nc-exportar inline-flex align-items-center justify-content-center",
|
|
552
|
-
style:
|
|
552
|
+
style: h({ color: a(o).muted, borderColor: a(N)(a(o).text, 0.18) }),
|
|
553
553
|
title: "Exportar como imagem",
|
|
554
554
|
"aria-label": "Exportar como imagem",
|
|
555
|
-
onClick:
|
|
556
|
-
innerHTML:
|
|
557
|
-
}, null, 12,
|
|
558
|
-
])) :
|
|
555
|
+
onClick: R,
|
|
556
|
+
innerHTML: a(P)
|
|
557
|
+
}, null, 12, de)) : g("", !0)
|
|
558
|
+
])) : g("", !0)
|
|
559
559
|
]),
|
|
560
|
-
|
|
561
|
-
|
|
560
|
+
p.$slots.titulo || t.titulo || p.$slots.descricao || t.descricao ? (l(), s("div", ue, [
|
|
561
|
+
p.$slots.titulo || t.titulo ? (l(), s("div", {
|
|
562
562
|
key: 0,
|
|
563
563
|
class: "m-0 text-3xl font-semibold",
|
|
564
|
-
style:
|
|
564
|
+
style: h({ color: a(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
565
565
|
}, [
|
|
566
|
-
|
|
567
|
-
|
|
566
|
+
F(p.$slots, "titulo", {}, () => [
|
|
567
|
+
X(A(t.titulo), 1)
|
|
568
568
|
], !0)
|
|
569
|
-
], 4)) :
|
|
570
|
-
|
|
569
|
+
], 4)) : g("", !0),
|
|
570
|
+
p.$slots.descricao || t.descricao ? (l(), s("div", {
|
|
571
571
|
key: 1,
|
|
572
572
|
class: "text-sm mt-1",
|
|
573
|
-
style:
|
|
573
|
+
style: h({ color: a(o).muted })
|
|
574
574
|
}, [
|
|
575
|
-
|
|
576
|
-
|
|
575
|
+
F(p.$slots, "descricao", {}, () => [
|
|
576
|
+
X(A(t.descricao), 1)
|
|
577
577
|
], !0)
|
|
578
|
-
], 4)) :
|
|
579
|
-
])) :
|
|
578
|
+
], 4)) : g("", !0)
|
|
579
|
+
])) : g("", !0)
|
|
580
580
|
]),
|
|
581
|
-
|
|
582
|
-
|
|
581
|
+
S("div", fe, [
|
|
582
|
+
ft(st, {
|
|
583
583
|
type: "line",
|
|
584
|
-
data:
|
|
585
|
-
options:
|
|
584
|
+
data: f.value,
|
|
585
|
+
options: M.value,
|
|
586
586
|
plugins: _.value,
|
|
587
587
|
height: t.height
|
|
588
588
|
}, null, 8, ["data", "options", "plugins", "height"])
|
|
589
589
|
]),
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
])) :
|
|
590
|
+
p.$slots.footer ? (l(), s("div", pe, [
|
|
591
|
+
F(p.$slots, "footer", {}, void 0, !0)
|
|
592
|
+
])) : g("", !0)
|
|
593
593
|
], 6));
|
|
594
594
|
}
|
|
595
|
-
},
|
|
595
|
+
}, me = /* @__PURE__ */ at(ge, [["__scopeId", "data-v-364ce1d1"]]), ye = { class: "card-pizza__topo flex align-items-start justify-content-between gap-3" }, he = {
|
|
596
596
|
key: 0,
|
|
597
597
|
class: "nc-legendas-flex flex flex-column"
|
|
598
|
-
},
|
|
598
|
+
}, be = {
|
|
599
599
|
key: 1,
|
|
600
600
|
class: "nc-actions inline-flex align-items-center gap-2"
|
|
601
|
-
},
|
|
601
|
+
}, xe = ["innerHTML"], ve = { class: "card-pizza__corpo flex align-items-center" }, $e = { class: "nc-tabela flex flex-column" }, Se = { class: "nc-tabela-valor" }, ke = { class: "nc-tabela-rotulo inline-flex align-items-center gap-2" }, Ce = { class: "nc-tabela-valor" }, Ae = { class: "card-pizza__chart-wrap flex align-items-center justify-content-center" }, Be = { class: "card-pizza__chart" }, we = {
|
|
602
602
|
key: 0,
|
|
603
603
|
class: "nc-centro flex flex-column align-items-center justify-content-center"
|
|
604
|
-
},
|
|
604
|
+
}, Re = {
|
|
605
605
|
key: 0,
|
|
606
606
|
class: "card-pizza__footer mt-3"
|
|
607
|
-
},
|
|
607
|
+
}, Te = {
|
|
608
608
|
__name: "CardPizza",
|
|
609
609
|
props: {
|
|
610
610
|
legenda: { type: String, default: null },
|
|
@@ -653,23 +653,23 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
653
653
|
nomeArquivoExport: { type: String, default: "card-pizza.png" }
|
|
654
654
|
},
|
|
655
655
|
emits: ["botaoAcao", "exportado"],
|
|
656
|
-
setup(t, { emit:
|
|
657
|
-
const e = t,
|
|
658
|
-
async function
|
|
659
|
-
await
|
|
656
|
+
setup(t, { emit: m }) {
|
|
657
|
+
const e = t, i = m, { palette: o, cardStyle: C } = it(e), { formatar: $ } = pt(e), w = ot(null);
|
|
658
|
+
async function P() {
|
|
659
|
+
await ct(w.value, {
|
|
660
660
|
nomeArquivo: e.nomeArquivoExport,
|
|
661
661
|
corFundo: o.value.bg !== "transparent" ? o.value.bg : null
|
|
662
|
-
}),
|
|
662
|
+
}), i("exportado");
|
|
663
663
|
}
|
|
664
|
-
const
|
|
665
|
-
const
|
|
666
|
-
return e.data.map((
|
|
667
|
-
}),
|
|
668
|
-
labels: e.data.map((
|
|
664
|
+
const R = z(() => `card-pizza--${e.direcao}`), q = z(() => {
|
|
665
|
+
const f = ht(e.corDetalhes, e.data.length);
|
|
666
|
+
return e.data.map((T, M) => T.cor ?? f[M]);
|
|
667
|
+
}), L = z(() => ({
|
|
668
|
+
labels: e.data.map((f) => f.rotulo),
|
|
669
669
|
datasets: [
|
|
670
670
|
{
|
|
671
|
-
data: e.data.map((
|
|
672
|
-
backgroundColor:
|
|
671
|
+
data: e.data.map((f) => f.quantidade),
|
|
672
|
+
backgroundColor: q.value,
|
|
673
673
|
borderWidth: 0,
|
|
674
674
|
borderColor: "transparent",
|
|
675
675
|
hoverOffset: 6,
|
|
@@ -678,24 +678,24 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
678
678
|
}
|
|
679
679
|
]
|
|
680
680
|
}));
|
|
681
|
-
function
|
|
682
|
-
const { chart:
|
|
683
|
-
if (!
|
|
684
|
-
const
|
|
685
|
-
if (
|
|
686
|
-
|
|
681
|
+
function Q(f) {
|
|
682
|
+
const { chart: T, tooltip: M } = f, G = rt(T);
|
|
683
|
+
if (!G) return;
|
|
684
|
+
const p = gt(G);
|
|
685
|
+
if (M.opacity === 0) {
|
|
686
|
+
p.style.opacity = "0";
|
|
687
687
|
return;
|
|
688
688
|
}
|
|
689
|
-
const
|
|
690
|
-
|
|
691
|
-
const { offsetLeft:
|
|
692
|
-
|
|
693
|
-
const
|
|
694
|
-
let
|
|
695
|
-
const
|
|
696
|
-
|
|
689
|
+
const d = M.title || [], r = M.dataPoints && M.dataPoints[0], b = r ? q.value[r.dataIndex] : "#3B82F6", x = r ? $(r.parsed) : "", c = p.querySelector(".nc-tt__content");
|
|
690
|
+
c.innerHTML = `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${d.join(" ")}</div><div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${b};box-shadow:0 0 0 2px ${N(b, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${x}</span></div>`;
|
|
691
|
+
const { offsetLeft: u, offsetTop: n } = T.canvas;
|
|
692
|
+
p.style.opacity = "1", p.style.visibility = "hidden", p.style.left = "0px", p.style.top = "0px";
|
|
693
|
+
const y = p.offsetWidth, v = p.offsetHeight, j = 4, E = nt(u + M.caretX, y, G.clientWidth, j);
|
|
694
|
+
let B = n + M.caretY;
|
|
695
|
+
const k = v + 16 + j;
|
|
696
|
+
B < k && (B = k), p.style.left = E + "px", p.style.top = B + "px", p.style.visibility = "visible";
|
|
697
697
|
}
|
|
698
|
-
const
|
|
698
|
+
const W = z(() => ({
|
|
699
699
|
responsive: !0,
|
|
700
700
|
maintainAspectRatio: !1,
|
|
701
701
|
cutout: e.cutout,
|
|
@@ -704,145 +704,145 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
704
704
|
legend: { display: !1 },
|
|
705
705
|
tooltip: {
|
|
706
706
|
enabled: !1,
|
|
707
|
-
external:
|
|
707
|
+
external: Q,
|
|
708
708
|
callbacks: {
|
|
709
|
-
title: (
|
|
710
|
-
var
|
|
711
|
-
return ((
|
|
709
|
+
title: (f) => {
|
|
710
|
+
var T;
|
|
711
|
+
return ((T = f[0]) == null ? void 0 : T.label) ?? "";
|
|
712
712
|
},
|
|
713
|
-
label: (
|
|
713
|
+
label: (f) => $(f.parsed)
|
|
714
714
|
}
|
|
715
715
|
}
|
|
716
716
|
}
|
|
717
717
|
}));
|
|
718
718
|
function K() {
|
|
719
|
-
|
|
719
|
+
i("botaoAcao");
|
|
720
720
|
}
|
|
721
|
-
const _ =
|
|
722
|
-
return (
|
|
721
|
+
const _ = dt;
|
|
722
|
+
return (f, T) => (l(), s("div", {
|
|
723
723
|
ref_key: "cardRef",
|
|
724
|
-
ref:
|
|
725
|
-
class:
|
|
726
|
-
style:
|
|
724
|
+
ref: w,
|
|
725
|
+
class: lt(["card-pizza p-4 flex flex-column", R.value]),
|
|
726
|
+
style: h(a(C))
|
|
727
727
|
}, [
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
728
|
+
S("div", ye, [
|
|
729
|
+
f.$slots.legenda || t.legenda || f.$slots.sublegenda || t.sublegenda ? (l(), s("div", he, [
|
|
730
|
+
f.$slots.legenda || t.legenda ? (l(), s("div", {
|
|
731
731
|
key: 0,
|
|
732
732
|
class: "text-xs font-medium",
|
|
733
|
-
style:
|
|
733
|
+
style: h({ color: a(o).text, opacity: 0.95 })
|
|
734
734
|
}, [
|
|
735
|
-
|
|
736
|
-
|
|
735
|
+
F(f.$slots, "legenda", {}, () => [
|
|
736
|
+
X(A(t.legenda), 1)
|
|
737
737
|
], !0)
|
|
738
|
-
], 4)) :
|
|
739
|
-
|
|
738
|
+
], 4)) : g("", !0),
|
|
739
|
+
f.$slots.sublegenda || t.sublegenda ? (l(), s("div", {
|
|
740
740
|
key: 1,
|
|
741
741
|
class: "text-xs",
|
|
742
|
-
style:
|
|
742
|
+
style: h({ color: a(o).muted })
|
|
743
743
|
}, [
|
|
744
|
-
|
|
745
|
-
|
|
744
|
+
F(f.$slots, "sublegenda", {}, () => [
|
|
745
|
+
X(A(t.sublegenda), 1)
|
|
746
746
|
], !0)
|
|
747
|
-
], 4)) :
|
|
748
|
-
])) :
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
t.botaoVisivel ? (
|
|
747
|
+
], 4)) : g("", !0)
|
|
748
|
+
])) : g("", !0),
|
|
749
|
+
f.$slots.actions || t.botaoVisivel || t.exportar ? (l(), s("div", be, [
|
|
750
|
+
F(f.$slots, "actions", {}, () => [
|
|
751
|
+
t.botaoVisivel ? (l(), s("button", {
|
|
752
752
|
key: 0,
|
|
753
753
|
class: "nc-btn inline-flex align-items-center",
|
|
754
|
-
style:
|
|
754
|
+
style: h({ color: a(o).text, borderColor: a(N)(a(o).text, 0.18) }),
|
|
755
755
|
onClick: K
|
|
756
756
|
}, [
|
|
757
|
-
|
|
758
|
-
], 4)) :
|
|
757
|
+
S("span", null, A(t.textoBotao), 1)
|
|
758
|
+
], 4)) : g("", !0)
|
|
759
759
|
], !0),
|
|
760
|
-
t.exportar ? (
|
|
760
|
+
t.exportar ? (l(), s("button", {
|
|
761
761
|
key: 0,
|
|
762
762
|
type: "button",
|
|
763
763
|
class: "nc-exportar inline-flex align-items-center justify-content-center",
|
|
764
|
-
style:
|
|
764
|
+
style: h({ color: a(o).muted, borderColor: a(N)(a(o).text, 0.18) }),
|
|
765
765
|
title: "Exportar como imagem",
|
|
766
766
|
"aria-label": "Exportar como imagem",
|
|
767
|
-
onClick:
|
|
768
|
-
innerHTML:
|
|
769
|
-
}, null, 12,
|
|
770
|
-
])) :
|
|
767
|
+
onClick: P,
|
|
768
|
+
innerHTML: a(_)
|
|
769
|
+
}, null, 12, xe)) : g("", !0)
|
|
770
|
+
])) : g("", !0)
|
|
771
771
|
]),
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
t.mostrarCabecalho ? (
|
|
772
|
+
S("div", ve, [
|
|
773
|
+
S("div", $e, [
|
|
774
|
+
t.mostrarCabecalho ? (l(), s("div", {
|
|
775
775
|
key: 0,
|
|
776
776
|
class: "nc-tabela-cab flex align-items-center justify-content-between",
|
|
777
|
-
style:
|
|
777
|
+
style: h({ color: a(o).muted, borderColor: a(N)(a(o).muted, 0.25) })
|
|
778
778
|
}, [
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
], 4)) :
|
|
782
|
-
(
|
|
783
|
-
key:
|
|
779
|
+
S("span", null, A(t.rotuloCategoria), 1),
|
|
780
|
+
S("span", Se, A(t.rotuloQuantidade), 1)
|
|
781
|
+
], 4)) : g("", !0),
|
|
782
|
+
(l(!0), s(mt, null, yt(t.data, (M, G) => (l(), s("div", {
|
|
783
|
+
key: G,
|
|
784
784
|
class: "nc-tabela-linha flex align-items-center justify-content-between",
|
|
785
|
-
style:
|
|
785
|
+
style: h({ color: a(o).text })
|
|
786
786
|
}, [
|
|
787
|
-
|
|
788
|
-
|
|
787
|
+
S("span", ke, [
|
|
788
|
+
S("span", {
|
|
789
789
|
class: "nc-bolinha",
|
|
790
|
-
style:
|
|
790
|
+
style: h({ background: q.value[G] })
|
|
791
791
|
}, null, 4),
|
|
792
|
-
|
|
792
|
+
S("span", null, A(M.rotulo), 1)
|
|
793
793
|
]),
|
|
794
|
-
|
|
794
|
+
S("span", Ce, A(a($)(M.quantidade)), 1)
|
|
795
795
|
], 4))), 128))
|
|
796
796
|
]),
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
797
|
+
S("div", Ae, [
|
|
798
|
+
S("div", Be, [
|
|
799
|
+
ft(st, {
|
|
800
800
|
type: "doughnut",
|
|
801
|
-
data:
|
|
802
|
-
options:
|
|
801
|
+
data: L.value,
|
|
802
|
+
options: W.value,
|
|
803
803
|
height: t.height
|
|
804
804
|
}, null, 8, ["data", "options", "height"]),
|
|
805
|
-
|
|
806
|
-
|
|
805
|
+
f.$slots.titulo || t.titulo || f.$slots.descricao || t.descricao ? (l(), s("div", we, [
|
|
806
|
+
f.$slots.titulo || t.titulo ? (l(), s("div", {
|
|
807
807
|
key: 0,
|
|
808
808
|
class: "nc-centro-titulo m-0 font-semibold",
|
|
809
|
-
style:
|
|
809
|
+
style: h({ color: a(o).text })
|
|
810
810
|
}, [
|
|
811
|
-
|
|
812
|
-
|
|
811
|
+
F(f.$slots, "titulo", {}, () => [
|
|
812
|
+
X(A(t.titulo), 1)
|
|
813
813
|
], !0)
|
|
814
|
-
], 4)) :
|
|
815
|
-
|
|
814
|
+
], 4)) : g("", !0),
|
|
815
|
+
f.$slots.descricao || t.descricao ? (l(), s("div", {
|
|
816
816
|
key: 1,
|
|
817
817
|
class: "nc-centro-desc",
|
|
818
|
-
style:
|
|
818
|
+
style: h({ color: a(o).muted })
|
|
819
819
|
}, [
|
|
820
|
-
|
|
821
|
-
|
|
820
|
+
F(f.$slots, "descricao", {}, () => [
|
|
821
|
+
X(A(t.descricao), 1)
|
|
822
822
|
], !0)
|
|
823
|
-
], 4)) :
|
|
824
|
-
])) :
|
|
823
|
+
], 4)) : g("", !0)
|
|
824
|
+
])) : g("", !0)
|
|
825
825
|
])
|
|
826
826
|
])
|
|
827
827
|
]),
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
])) :
|
|
828
|
+
f.$slots.footer ? (l(), s("div", Re, [
|
|
829
|
+
F(f.$slots, "footer", {}, void 0, !0)
|
|
830
|
+
])) : g("", !0)
|
|
831
831
|
], 6));
|
|
832
832
|
}
|
|
833
|
-
},
|
|
833
|
+
}, Ee = /* @__PURE__ */ at(Te, [["__scopeId", "data-v-2a65258f"]]), qe = { class: "card-barra__header flex flex-column" }, Fe = { class: "card-barra__topo flex align-items-start justify-content-between gap-3" }, Le = {
|
|
834
834
|
key: 0,
|
|
835
835
|
class: "nc-legendas-flex flex flex-column"
|
|
836
|
-
},
|
|
836
|
+
}, ze = {
|
|
837
837
|
key: 1,
|
|
838
838
|
class: "nc-actions inline-flex align-items-center gap-2"
|
|
839
|
-
},
|
|
839
|
+
}, Me = ["innerHTML"], je = {
|
|
840
840
|
key: 0,
|
|
841
841
|
class: "card-barra__titulos mt-3 mb-2 flex flex-column"
|
|
842
|
-
},
|
|
842
|
+
}, He = { class: "card-barra__chart flex-1" }, Ve = {
|
|
843
843
|
key: 0,
|
|
844
844
|
class: "card-barra__footer mt-3"
|
|
845
|
-
},
|
|
845
|
+
}, Ne = {
|
|
846
846
|
__name: "CardBarra",
|
|
847
847
|
props: {
|
|
848
848
|
legenda: { type: String, default: null },
|
|
@@ -908,63 +908,68 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
908
908
|
corHover: { type: String, default: null }
|
|
909
909
|
},
|
|
910
910
|
emits: ["botaoAcao", "exportado"],
|
|
911
|
-
setup(t, { emit:
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
911
|
+
setup(t, { emit: m }) {
|
|
912
|
+
Vt((c) => ({
|
|
913
|
+
c9bf3d56: L.value
|
|
914
|
+
}));
|
|
915
|
+
const e = t, i = m, { palette: o, cardStyle: C } = it(e), { formatar: $ } = pt(e), w = ot(null), P = dt;
|
|
916
|
+
async function R() {
|
|
917
|
+
await ct(w.value, {
|
|
915
918
|
nomeArquivo: e.nomeArquivoExport,
|
|
916
919
|
corFundo: o.value.bg !== "transparent" ? o.value.bg : null
|
|
917
|
-
}),
|
|
920
|
+
}), i("exportado");
|
|
918
921
|
}
|
|
919
|
-
const
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
922
|
+
const q = z(() => `card-barra--${e.direcao}`), L = z(
|
|
923
|
+
() => typeof e.height == "number" ? `${e.height}px` : e.height
|
|
924
|
+
), Q = z(() => e.orientacao === "horizontal"), W = z(() => Array.isArray(e.series) && e.series.length > 0 ? e.series.map((c, u) => ({
|
|
925
|
+
nome: c.nome ?? `Série ${u + 1}`,
|
|
926
|
+
cor: c.cor || e.cores[u % e.cores.length],
|
|
927
|
+
dados: Array.isArray(c.dados) ? c.dados : []
|
|
928
|
+
})) : [{ nome: e.legenda || "Valores", cor: e.corDetalhes, dados: e.data }]), K = z(() => {
|
|
929
|
+
const c = W.value[0];
|
|
930
|
+
return c ? c.dados.map((u) => u.rotulo) : [];
|
|
931
|
+
}), _ = z(() => {
|
|
932
|
+
const c = W.value, u = c.length - 1, n = typeof e.larguraBarra == "number" ? e.larguraBarra : Number(e.larguraBarra) || 0.6, y = e.raioBarra, v = Q.value;
|
|
933
|
+
function j(E) {
|
|
934
|
+
if (!e.empilhado || c.length === 1) return y;
|
|
935
|
+
const B = E === 0, k = E === u;
|
|
936
|
+
return v ? {
|
|
937
|
+
topLeft: B ? y : 0,
|
|
938
|
+
bottomLeft: B ? y : 0,
|
|
939
|
+
topRight: k ? y : 0,
|
|
940
|
+
bottomRight: k ? y : 0
|
|
936
941
|
} : {
|
|
937
|
-
bottomLeft:
|
|
938
|
-
bottomRight:
|
|
939
|
-
topLeft:
|
|
940
|
-
topRight:
|
|
942
|
+
bottomLeft: B ? y : 0,
|
|
943
|
+
bottomRight: B ? y : 0,
|
|
944
|
+
topLeft: k ? y : 0,
|
|
945
|
+
topRight: k ? y : 0
|
|
941
946
|
};
|
|
942
947
|
}
|
|
943
948
|
return {
|
|
944
|
-
labels:
|
|
945
|
-
datasets:
|
|
946
|
-
label:
|
|
947
|
-
data:
|
|
948
|
-
previstos:
|
|
949
|
-
backgroundColor:
|
|
950
|
-
hoverBackgroundColor: e.corHover ||
|
|
949
|
+
labels: K.value,
|
|
950
|
+
datasets: c.map((E, B) => ({
|
|
951
|
+
label: E.nome,
|
|
952
|
+
data: E.dados.map((k) => k.quantidade),
|
|
953
|
+
previstos: E.dados.map((k) => k.previsto != null ? k.previsto : null),
|
|
954
|
+
backgroundColor: N(E.cor, 0.72),
|
|
955
|
+
hoverBackgroundColor: e.corHover || E.cor,
|
|
951
956
|
borderWidth: 0,
|
|
952
|
-
borderRadius:
|
|
957
|
+
borderRadius: j(B),
|
|
953
958
|
borderSkipped: !1,
|
|
954
959
|
categoryPercentage: 1,
|
|
955
960
|
barPercentage: n
|
|
956
961
|
}))
|
|
957
962
|
};
|
|
958
963
|
});
|
|
959
|
-
function
|
|
960
|
-
|
|
964
|
+
function f(c, u) {
|
|
965
|
+
u ? Object.assign(c.style, {
|
|
961
966
|
top: "-5px",
|
|
962
967
|
bottom: "auto",
|
|
963
968
|
borderTop: "1px solid rgba(15,23,42,.06)",
|
|
964
969
|
borderLeft: "1px solid rgba(15,23,42,.06)",
|
|
965
970
|
borderRight: "none",
|
|
966
971
|
borderBottom: "none"
|
|
967
|
-
}) : Object.assign(
|
|
972
|
+
}) : Object.assign(c.style, {
|
|
968
973
|
bottom: "-5px",
|
|
969
974
|
top: "auto",
|
|
970
975
|
borderRight: "1px solid rgba(15,23,42,.06)",
|
|
@@ -973,41 +978,41 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
973
978
|
borderLeft: "none"
|
|
974
979
|
});
|
|
975
980
|
}
|
|
976
|
-
let
|
|
977
|
-
function
|
|
978
|
-
var
|
|
979
|
-
const { chart:
|
|
980
|
-
if (!
|
|
981
|
-
const
|
|
982
|
-
if (n.opacity === 0 ||
|
|
983
|
-
|
|
981
|
+
let T = null;
|
|
982
|
+
function M(c) {
|
|
983
|
+
var kt, Ct;
|
|
984
|
+
const { chart: u, tooltip: n } = c, y = rt(u);
|
|
985
|
+
if (!y) return;
|
|
986
|
+
const v = gt(y, { caretFlexivel: !0 });
|
|
987
|
+
if (n.opacity === 0 || T) {
|
|
988
|
+
v.style.opacity = "0";
|
|
984
989
|
return;
|
|
985
990
|
}
|
|
986
|
-
const
|
|
987
|
-
var
|
|
988
|
-
const
|
|
989
|
-
return `<div style="display:flex;align-items:center;gap:6px;margin-top:2px;"><span style="width:6px;height:6px;border-radius:999px;background:${
|
|
990
|
-
}).join(""),
|
|
991
|
+
const j = n.title || [], E = n.dataPoints || [], B = v.querySelector(".nc-tt__content"), k = E.map((et) => {
|
|
992
|
+
var At;
|
|
993
|
+
const ut = ((At = W.value[et.datasetIndex]) == null ? void 0 : At.cor) || e.corDetalhes, Lt = $(Q.value ? et.parsed.x : et.parsed.y), zt = et.dataset.label && W.value.length > 1 ? `<span style="font-size:11px;color:#64748B;margin-right:6px;">${et.dataset.label}</span>` : "";
|
|
994
|
+
return `<div style="display:flex;align-items:center;gap:6px;margin-top:2px;"><span style="width:6px;height:6px;border-radius:999px;background:${ut};box-shadow:0 0 0 2px ${N(ut, 0.15)};flex:0 0 auto;"></span>` + zt + `<span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;margin-left:auto;">${Lt}</span></div>`;
|
|
995
|
+
}).join(""), O = (kt = E[0]) == null ? void 0 : kt.dataIndex;
|
|
991
996
|
let Y = null;
|
|
992
|
-
if (
|
|
993
|
-
for (const
|
|
994
|
-
const
|
|
995
|
-
if (
|
|
996
|
-
Y =
|
|
997
|
+
if (O != null)
|
|
998
|
+
for (const et of u.data.datasets) {
|
|
999
|
+
const ut = (Ct = et.previstos) == null ? void 0 : Ct[O];
|
|
1000
|
+
if (ut != null) {
|
|
1001
|
+
Y = ut;
|
|
997
1002
|
break;
|
|
998
1003
|
}
|
|
999
1004
|
}
|
|
1000
|
-
const
|
|
1001
|
-
|
|
1002
|
-
const { offsetLeft:
|
|
1003
|
-
|
|
1004
|
-
const
|
|
1005
|
-
|
|
1006
|
-
const
|
|
1007
|
-
|
|
1005
|
+
const V = Y != null ? `<div style="display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:4px;border-top:1px dashed rgba(15,23,42,.08);"><span style="font-size:11px;color:#64748B;margin-right:6px;">Previsto</span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;margin-left:auto;">${$(Y)}</span></div>` : "";
|
|
1006
|
+
B.innerHTML = `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${j.join(" ")}</div>` + k + V;
|
|
1007
|
+
const { offsetLeft: I, offsetTop: tt } = u.canvas;
|
|
1008
|
+
v.style.opacity = "1", v.style.visibility = "hidden", v.style.left = "0px", v.style.top = "0px";
|
|
1009
|
+
const U = v.offsetWidth, H = v.offsetHeight, Z = 4, D = I + n.caretX, J = tt + n.caretY, bt = nt(D, U, y.clientWidth, Z), Tt = U / 2, xt = 14, vt = J - xt - H, $t = vt < Z, Et = $t ? J + xt : vt, St = v.querySelector(".nc-tt__caret");
|
|
1010
|
+
f(St, $t);
|
|
1011
|
+
const qt = D - (bt - Tt), Ft = Math.max(10, Math.min(U - 10, qt));
|
|
1012
|
+
St.style.left = Ft + "px", v.style.left = bt + "px", v.style.top = Et + "px", v.style.visibility = "visible";
|
|
1008
1013
|
}
|
|
1009
|
-
const
|
|
1010
|
-
const
|
|
1014
|
+
const G = z(() => {
|
|
1015
|
+
const c = Q.value, u = {
|
|
1011
1016
|
grid: { display: !1, drawBorder: !1 },
|
|
1012
1017
|
border: { display: !1 },
|
|
1013
1018
|
ticks: { color: o.value.muted, font: { size: 10, family: "'Inter', sans-serif" }, padding: 8 },
|
|
@@ -1017,24 +1022,24 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1017
1022
|
grid: { display: !1 },
|
|
1018
1023
|
beginAtZero: !0,
|
|
1019
1024
|
stacked: e.empilhado,
|
|
1020
|
-
suggestedMax:
|
|
1025
|
+
suggestedMax: d.value.length ? Math.max(...d.value.map((y) => y.valor)) : void 0
|
|
1021
1026
|
};
|
|
1022
1027
|
return {
|
|
1023
1028
|
responsive: !0,
|
|
1024
1029
|
maintainAspectRatio: !1,
|
|
1025
|
-
indexAxis:
|
|
1026
|
-
interaction: { intersect: !1, mode: "index", axis:
|
|
1030
|
+
indexAxis: c ? "y" : "x",
|
|
1031
|
+
interaction: { intersect: !1, mode: "index", axis: c ? "y" : "x" },
|
|
1027
1032
|
layout: {
|
|
1028
1033
|
padding: {
|
|
1029
|
-
top:
|
|
1030
|
-
right:
|
|
1034
|
+
top: d.value.length && !c ? 24 : 12,
|
|
1035
|
+
right: c ? 12 : 0,
|
|
1031
1036
|
bottom: 0,
|
|
1032
|
-
left:
|
|
1037
|
+
left: d.value.length && c ? 60 : 0
|
|
1033
1038
|
}
|
|
1034
1039
|
},
|
|
1035
1040
|
plugins: {
|
|
1036
1041
|
legend: {
|
|
1037
|
-
display: e.mostrarLegendaSeries &&
|
|
1042
|
+
display: e.mostrarLegendaSeries && W.value.length > 1,
|
|
1038
1043
|
position: "bottom",
|
|
1039
1044
|
align: "start",
|
|
1040
1045
|
labels: {
|
|
@@ -1049,94 +1054,94 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1049
1054
|
},
|
|
1050
1055
|
tooltip: {
|
|
1051
1056
|
enabled: !1,
|
|
1052
|
-
external:
|
|
1057
|
+
external: M,
|
|
1053
1058
|
callbacks: {
|
|
1054
|
-
title: (
|
|
1055
|
-
var
|
|
1056
|
-
return ((
|
|
1059
|
+
title: (y) => {
|
|
1060
|
+
var v;
|
|
1061
|
+
return ((v = y[0]) == null ? void 0 : v.label) ?? "";
|
|
1057
1062
|
},
|
|
1058
|
-
label: (
|
|
1063
|
+
label: (y) => $(c ? y.parsed.x : y.parsed.y)
|
|
1059
1064
|
}
|
|
1060
1065
|
}
|
|
1061
1066
|
},
|
|
1062
1067
|
scales: {
|
|
1063
|
-
x:
|
|
1064
|
-
y:
|
|
1068
|
+
x: c ? n : u,
|
|
1069
|
+
y: c ? u : n
|
|
1065
1070
|
}
|
|
1066
1071
|
};
|
|
1067
1072
|
});
|
|
1068
|
-
function
|
|
1069
|
-
|
|
1073
|
+
function p() {
|
|
1074
|
+
i("botaoAcao");
|
|
1070
1075
|
}
|
|
1071
|
-
const
|
|
1072
|
-
valor:
|
|
1073
|
-
rotulo:
|
|
1074
|
-
cor:
|
|
1075
|
-
corRotulo:
|
|
1076
|
-
corTexto:
|
|
1077
|
-
tracejado:
|
|
1078
|
-
espessura:
|
|
1079
|
-
}) : []),
|
|
1076
|
+
const d = z(() => e.linhasReferencia ? (Array.isArray(e.linhasReferencia) ? e.linhasReferencia : [e.linhasReferencia]).filter((u) => u && (typeof u == "number" || typeof u.valor == "number")).map((u) => typeof u == "number" ? { valor: u, rotulo: null, cor: "#0F172A", corRotulo: "#0F172A", corTexto: "#FFFFFF", tracejado: [6, 6], espessura: 1 } : {
|
|
1077
|
+
valor: u.valor,
|
|
1078
|
+
rotulo: u.rotulo ?? null,
|
|
1079
|
+
cor: u.cor || "#0F172A",
|
|
1080
|
+
corRotulo: u.corRotulo || u.cor || "#0F172A",
|
|
1081
|
+
corTexto: u.corTexto || "#FFFFFF",
|
|
1082
|
+
tracejado: u.tracejado || [6, 6],
|
|
1083
|
+
espessura: u.espessura ?? 1
|
|
1084
|
+
}) : []), r = [], b = {
|
|
1080
1085
|
id: "linhaReferencia",
|
|
1081
|
-
afterDatasetsDraw(
|
|
1082
|
-
const
|
|
1083
|
-
if (
|
|
1084
|
-
const { ctx: n, chartArea:
|
|
1085
|
-
|
|
1086
|
-
const
|
|
1087
|
-
if (
|
|
1088
|
-
if (
|
|
1086
|
+
afterDatasetsDraw(c) {
|
|
1087
|
+
const u = d.value;
|
|
1088
|
+
if (r.length = 0, !u.length) return;
|
|
1089
|
+
const { ctx: n, chartArea: y, scales: v } = c, j = Q.value, E = j ? v.x : v.y;
|
|
1090
|
+
E && u.forEach((B) => {
|
|
1091
|
+
const k = E.getPixelForValue(B.valor);
|
|
1092
|
+
if (r.push({ linha: B, pos: k, horizontal: j, chartArea: y }), n.save(), n.beginPath(), n.setLineDash(B.tracejado), n.lineWidth = B.espessura, n.strokeStyle = B.cor, j) {
|
|
1093
|
+
if (k < y.left || k > y.right) {
|
|
1089
1094
|
n.restore();
|
|
1090
1095
|
return;
|
|
1091
1096
|
}
|
|
1092
|
-
n.moveTo(
|
|
1097
|
+
n.moveTo(k, y.top), n.lineTo(k, y.bottom);
|
|
1093
1098
|
} else {
|
|
1094
|
-
if (
|
|
1099
|
+
if (k < y.top || k > y.bottom) {
|
|
1095
1100
|
n.restore();
|
|
1096
1101
|
return;
|
|
1097
1102
|
}
|
|
1098
|
-
n.moveTo(
|
|
1103
|
+
n.moveTo(y.left, k), n.lineTo(y.right, k);
|
|
1099
1104
|
}
|
|
1100
|
-
if (n.stroke(), n.setLineDash([]),
|
|
1105
|
+
if (n.stroke(), n.setLineDash([]), B.rotulo) {
|
|
1101
1106
|
n.font = "600 11px 'Inter', sans-serif";
|
|
1102
|
-
const
|
|
1103
|
-
let
|
|
1104
|
-
|
|
1107
|
+
const O = 8, Y = 5, I = n.measureText(B.rotulo).width, tt = 12, U = I + O * 2, H = tt + Y * 2, Z = H / 2;
|
|
1108
|
+
let D, J;
|
|
1109
|
+
j ? (D = k - U / 2, J = y.top - H - 6, J < 0 && (J = y.top + 6)) : (D = y.left - U - 6, J = k - H / 2, D < 0 && (D = y.left + 6)), n.fillStyle = B.corRotulo, n.beginPath(), n.roundRect ? n.roundRect(D, J, U, H, Z) : (n.moveTo(D + Z, J), n.lineTo(D + U - Z, J), n.quadraticCurveTo(D + U, J, D + U, J + Z), n.lineTo(D + U, J + H - Z), n.quadraticCurveTo(D + U, J + H, D + U - Z, J + H), n.lineTo(D + Z, J + H), n.quadraticCurveTo(D, J + H, D, J + H - Z), n.lineTo(D, J + Z), n.quadraticCurveTo(D, J, D + Z, J)), n.fill(), n.fillStyle = B.corTexto, n.textBaseline = "middle", n.textAlign = "center", n.fillText(B.rotulo, D + U / 2, J + H / 2);
|
|
1105
1110
|
}
|
|
1106
1111
|
n.restore();
|
|
1107
1112
|
});
|
|
1108
1113
|
},
|
|
1109
|
-
beforeEvent(
|
|
1110
|
-
if (!
|
|
1111
|
-
|
|
1114
|
+
beforeEvent(c, u) {
|
|
1115
|
+
if (!r.length) {
|
|
1116
|
+
T = null;
|
|
1112
1117
|
return;
|
|
1113
1118
|
}
|
|
1114
|
-
const n =
|
|
1119
|
+
const n = u.event;
|
|
1115
1120
|
if (!n || n.type === "mouseout" || n.x == null || n.y == null) {
|
|
1116
|
-
|
|
1121
|
+
T = null;
|
|
1117
1122
|
return;
|
|
1118
1123
|
}
|
|
1119
|
-
const
|
|
1120
|
-
let
|
|
1121
|
-
for (const
|
|
1122
|
-
const
|
|
1123
|
-
|
|
1124
|
+
const y = 8;
|
|
1125
|
+
let v = null, j = 1 / 0;
|
|
1126
|
+
for (const E of r) {
|
|
1127
|
+
const B = E.horizontal ? Math.abs(n.x - E.pos) : Math.abs(n.y - E.pos), k = E.horizontal ? n.y >= E.chartArea.top && n.y <= E.chartArea.bottom : n.x >= E.chartArea.left && n.x <= E.chartArea.right;
|
|
1128
|
+
B <= y && k && B < j && (j = B, v = E);
|
|
1124
1129
|
}
|
|
1125
|
-
|
|
1130
|
+
T = v;
|
|
1126
1131
|
},
|
|
1127
|
-
afterEvent(
|
|
1128
|
-
if (!
|
|
1129
|
-
const n =
|
|
1132
|
+
afterEvent(c, u) {
|
|
1133
|
+
if (!r.length) return;
|
|
1134
|
+
const n = u.event;
|
|
1130
1135
|
if (!n) return;
|
|
1131
|
-
const
|
|
1132
|
-
if (!
|
|
1133
|
-
let
|
|
1134
|
-
if (!
|
|
1135
|
-
|
|
1136
|
+
const y = rt(c);
|
|
1137
|
+
if (!y) return;
|
|
1138
|
+
let v = y.querySelector(".nc-tt-linhaRef");
|
|
1139
|
+
if (!T) {
|
|
1140
|
+
v && (v.style.opacity = "0");
|
|
1136
1141
|
return;
|
|
1137
1142
|
}
|
|
1138
|
-
const
|
|
1139
|
-
|
|
1143
|
+
const j = T;
|
|
1144
|
+
v || (v = document.createElement("div"), v.className = "nc-tt-linhaRef", Object.assign(v.style, {
|
|
1140
1145
|
position: "absolute",
|
|
1141
1146
|
pointerEvents: "none",
|
|
1142
1147
|
transform: "translate(-50%, calc(-100% - 12px))",
|
|
@@ -1151,119 +1156,119 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1151
1156
|
zIndex: "11",
|
|
1152
1157
|
fontFamily: "'Inter', sans-serif",
|
|
1153
1158
|
textAlign: "left"
|
|
1154
|
-
}),
|
|
1155
|
-
const
|
|
1156
|
-
|
|
1157
|
-
const
|
|
1158
|
-
|
|
1159
|
-
const Y =
|
|
1160
|
-
let
|
|
1161
|
-
|
|
1162
|
-
const
|
|
1163
|
-
let
|
|
1164
|
-
const
|
|
1165
|
-
|
|
1159
|
+
}), y.appendChild(v));
|
|
1160
|
+
const E = j.linha.cor || "#0F172A", B = $(j.linha.valor), k = j.linha.rotulo;
|
|
1161
|
+
v.innerHTML = (k ? `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${k}</div>` : "") + `<div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${E};box-shadow:0 0 0 2px ${N(E, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${B}</span></div>`;
|
|
1162
|
+
const O = c.canvas;
|
|
1163
|
+
v.style.opacity = "1", v.style.visibility = "hidden", v.style.left = "0px", v.style.top = "0px";
|
|
1164
|
+
const Y = v.offsetWidth, V = v.offsetHeight, I = 4;
|
|
1165
|
+
let tt, U;
|
|
1166
|
+
j.horizontal ? (tt = O.offsetLeft + j.pos, U = O.offsetTop + n.y) : (tt = O.offsetLeft + n.x, U = O.offsetTop + j.pos);
|
|
1167
|
+
const H = nt(tt, Y, y.clientWidth, I);
|
|
1168
|
+
let Z = U;
|
|
1169
|
+
const D = V + 16 + I;
|
|
1170
|
+
Z < D && (Z = D), v.style.left = H + "px", v.style.top = Z + "px", v.style.visibility = "visible";
|
|
1166
1171
|
}
|
|
1167
|
-
}, x =
|
|
1168
|
-
return (
|
|
1172
|
+
}, x = z(() => d.value.length ? [b] : []);
|
|
1173
|
+
return (c, u) => (l(), s("div", {
|
|
1169
1174
|
ref_key: "cardRef",
|
|
1170
|
-
ref:
|
|
1171
|
-
class:
|
|
1172
|
-
style:
|
|
1175
|
+
ref: w,
|
|
1176
|
+
class: lt(["card-barra p-4 flex", q.value]),
|
|
1177
|
+
style: h(a(C))
|
|
1173
1178
|
}, [
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1179
|
+
S("div", qe, [
|
|
1180
|
+
S("div", Fe, [
|
|
1181
|
+
c.$slots.legenda || t.legenda || c.$slots.sublegenda || t.sublegenda ? (l(), s("div", Le, [
|
|
1182
|
+
c.$slots.legenda || t.legenda ? (l(), s("div", {
|
|
1178
1183
|
key: 0,
|
|
1179
1184
|
class: "text-xs font-medium",
|
|
1180
|
-
style:
|
|
1185
|
+
style: h({ color: a(o).text, opacity: 0.85 })
|
|
1181
1186
|
}, [
|
|
1182
|
-
|
|
1183
|
-
|
|
1187
|
+
F(c.$slots, "legenda", {}, () => [
|
|
1188
|
+
X(A(t.legenda), 1)
|
|
1184
1189
|
], !0)
|
|
1185
|
-
], 4)) :
|
|
1186
|
-
|
|
1190
|
+
], 4)) : g("", !0),
|
|
1191
|
+
c.$slots.sublegenda || t.sublegenda ? (l(), s("div", {
|
|
1187
1192
|
key: 1,
|
|
1188
1193
|
class: "text-xs",
|
|
1189
|
-
style:
|
|
1194
|
+
style: h({ color: a(o).muted })
|
|
1190
1195
|
}, [
|
|
1191
|
-
|
|
1192
|
-
|
|
1196
|
+
F(c.$slots, "sublegenda", {}, () => [
|
|
1197
|
+
X(A(t.sublegenda), 1)
|
|
1193
1198
|
], !0)
|
|
1194
|
-
], 4)) :
|
|
1195
|
-
])) :
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
t.botaoVisivel ? (
|
|
1199
|
+
], 4)) : g("", !0)
|
|
1200
|
+
])) : g("", !0),
|
|
1201
|
+
c.$slots.actions || t.botaoVisivel || t.exportar ? (l(), s("div", ze, [
|
|
1202
|
+
F(c.$slots, "actions", {}, () => [
|
|
1203
|
+
t.botaoVisivel ? (l(), s("button", {
|
|
1199
1204
|
key: 0,
|
|
1200
1205
|
class: "nc-btn inline-flex align-items-center",
|
|
1201
|
-
style:
|
|
1202
|
-
onClick:
|
|
1206
|
+
style: h({ color: a(o).text, borderColor: a(N)(a(o).text, 0.18) }),
|
|
1207
|
+
onClick: p
|
|
1203
1208
|
}, [
|
|
1204
|
-
|
|
1205
|
-
], 4)) :
|
|
1209
|
+
S("span", null, A(t.textoBotao), 1)
|
|
1210
|
+
], 4)) : g("", !0)
|
|
1206
1211
|
], !0),
|
|
1207
|
-
t.exportar ? (
|
|
1212
|
+
t.exportar ? (l(), s("button", {
|
|
1208
1213
|
key: 0,
|
|
1209
1214
|
type: "button",
|
|
1210
1215
|
class: "nc-exportar inline-flex align-items-center justify-content-center",
|
|
1211
|
-
style:
|
|
1216
|
+
style: h({ color: a(o).muted, borderColor: a(N)(a(o).text, 0.18) }),
|
|
1212
1217
|
title: "Exportar como imagem",
|
|
1213
1218
|
"aria-label": "Exportar como imagem",
|
|
1214
|
-
onClick:
|
|
1215
|
-
innerHTML:
|
|
1216
|
-
}, null, 12,
|
|
1217
|
-
])) :
|
|
1219
|
+
onClick: R,
|
|
1220
|
+
innerHTML: a(P)
|
|
1221
|
+
}, null, 12, Me)) : g("", !0)
|
|
1222
|
+
])) : g("", !0)
|
|
1218
1223
|
]),
|
|
1219
|
-
|
|
1220
|
-
|
|
1224
|
+
c.$slots.titulo || t.titulo || c.$slots.descricao || t.descricao ? (l(), s("div", je, [
|
|
1225
|
+
c.$slots.titulo || t.titulo ? (l(), s("div", {
|
|
1221
1226
|
key: 0,
|
|
1222
1227
|
class: "m-0 text-3xl font-semibold",
|
|
1223
|
-
style:
|
|
1228
|
+
style: h({ color: a(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
1224
1229
|
}, [
|
|
1225
|
-
|
|
1226
|
-
|
|
1230
|
+
F(c.$slots, "titulo", {}, () => [
|
|
1231
|
+
X(A(t.titulo), 1)
|
|
1227
1232
|
], !0)
|
|
1228
|
-
], 4)) :
|
|
1229
|
-
|
|
1233
|
+
], 4)) : g("", !0),
|
|
1234
|
+
c.$slots.descricao || t.descricao ? (l(), s("div", {
|
|
1230
1235
|
key: 1,
|
|
1231
1236
|
class: "text-sm mt-1",
|
|
1232
|
-
style:
|
|
1237
|
+
style: h({ color: a(o).muted })
|
|
1233
1238
|
}, [
|
|
1234
|
-
|
|
1235
|
-
|
|
1239
|
+
F(c.$slots, "descricao", {}, () => [
|
|
1240
|
+
X(A(t.descricao), 1)
|
|
1236
1241
|
], !0)
|
|
1237
|
-
], 4)) :
|
|
1238
|
-
])) :
|
|
1242
|
+
], 4)) : g("", !0)
|
|
1243
|
+
])) : g("", !0)
|
|
1239
1244
|
]),
|
|
1240
|
-
|
|
1241
|
-
|
|
1245
|
+
S("div", He, [
|
|
1246
|
+
ft(st, {
|
|
1242
1247
|
type: "bar",
|
|
1243
|
-
data:
|
|
1244
|
-
options:
|
|
1248
|
+
data: _.value,
|
|
1249
|
+
options: G.value,
|
|
1245
1250
|
plugins: x.value,
|
|
1246
|
-
height:
|
|
1247
|
-
}, null, 8, ["data", "options", "plugins"
|
|
1251
|
+
height: "100%"
|
|
1252
|
+
}, null, 8, ["data", "options", "plugins"])
|
|
1248
1253
|
]),
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
])) :
|
|
1254
|
+
c.$slots.footer ? (l(), s("div", Ve, [
|
|
1255
|
+
F(c.$slots, "footer", {}, void 0, !0)
|
|
1256
|
+
])) : g("", !0)
|
|
1252
1257
|
], 6));
|
|
1253
1258
|
}
|
|
1254
|
-
},
|
|
1259
|
+
}, Pe = /* @__PURE__ */ at(Ne, [["__scopeId", "data-v-474043e8"]]), De = { class: "card-polar__topo flex align-items-start justify-content-between gap-3" }, Ie = {
|
|
1255
1260
|
key: 0,
|
|
1256
1261
|
class: "nc-legendas-flex flex flex-column"
|
|
1257
|
-
},
|
|
1262
|
+
}, We = {
|
|
1258
1263
|
key: 1,
|
|
1259
1264
|
class: "nc-actions inline-flex align-items-center gap-2"
|
|
1260
|
-
},
|
|
1265
|
+
}, Oe = ["innerHTML"], Xe = { class: "card-polar__corpo flex align-items-center" }, Ye = { class: "nc-tabela flex flex-column" }, Je = { class: "nc-tabela-valor" }, Qe = { class: "nc-tabela-rotulo inline-flex align-items-center gap-2" }, Ue = { class: "nc-tabela-valor" }, Ge = { class: "card-polar__chart-wrap flex align-items-center justify-content-center" }, Ze = { class: "card-polar__chart" }, Ke = {
|
|
1261
1266
|
key: 0,
|
|
1262
1267
|
class: "card-polar__centro-bottom"
|
|
1263
|
-
},
|
|
1268
|
+
}, _e = {
|
|
1264
1269
|
key: 0,
|
|
1265
1270
|
class: "card-polar__footer mt-3"
|
|
1266
|
-
},
|
|
1271
|
+
}, to = {
|
|
1267
1272
|
__name: "CardPolar",
|
|
1268
1273
|
props: {
|
|
1269
1274
|
legenda: { type: String, default: null },
|
|
@@ -1312,47 +1317,47 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1312
1317
|
nomeArquivoExport: { type: String, default: "card-polar.png" }
|
|
1313
1318
|
},
|
|
1314
1319
|
emits: ["botaoAcao", "exportado"],
|
|
1315
|
-
setup(t, { emit:
|
|
1316
|
-
const e = t,
|
|
1317
|
-
async function
|
|
1318
|
-
await
|
|
1320
|
+
setup(t, { emit: m }) {
|
|
1321
|
+
const e = t, i = m, { palette: o, cardStyle: C } = it(e), { formatar: $ } = pt(e), w = ot(null), P = dt;
|
|
1322
|
+
async function R() {
|
|
1323
|
+
await ct(w.value, {
|
|
1319
1324
|
nomeArquivo: e.nomeArquivoExport,
|
|
1320
1325
|
corFundo: o.value.bg !== "transparent" ? o.value.bg : null
|
|
1321
|
-
}),
|
|
1326
|
+
}), i("exportado");
|
|
1322
1327
|
}
|
|
1323
|
-
const
|
|
1324
|
-
const
|
|
1325
|
-
return e.data.map((
|
|
1326
|
-
}),
|
|
1327
|
-
labels: e.data.map((
|
|
1328
|
+
const q = z(() => `card-polar--${e.direcao}`), L = z(() => {
|
|
1329
|
+
const f = ht(e.corDetalhes, e.data.length);
|
|
1330
|
+
return e.data.map((T, M) => T.cor ?? f[M]);
|
|
1331
|
+
}), Q = z(() => ({
|
|
1332
|
+
labels: e.data.map((f) => f.rotulo),
|
|
1328
1333
|
datasets: [
|
|
1329
1334
|
{
|
|
1330
|
-
data: e.data.map((
|
|
1331
|
-
backgroundColor:
|
|
1332
|
-
borderColor:
|
|
1335
|
+
data: e.data.map((f) => f.quantidade),
|
|
1336
|
+
backgroundColor: L.value,
|
|
1337
|
+
borderColor: L.value,
|
|
1333
1338
|
borderWidth: 0,
|
|
1334
1339
|
hoverOffset: 6
|
|
1335
1340
|
}
|
|
1336
1341
|
]
|
|
1337
1342
|
}));
|
|
1338
|
-
function
|
|
1339
|
-
const { chart:
|
|
1340
|
-
if (!
|
|
1341
|
-
const
|
|
1342
|
-
if (
|
|
1343
|
-
|
|
1343
|
+
function W(f) {
|
|
1344
|
+
const { chart: T, tooltip: M } = f, G = rt(T);
|
|
1345
|
+
if (!G) return;
|
|
1346
|
+
const p = gt(G);
|
|
1347
|
+
if (M.opacity === 0) {
|
|
1348
|
+
p.style.opacity = "0";
|
|
1344
1349
|
return;
|
|
1345
1350
|
}
|
|
1346
|
-
const
|
|
1347
|
-
|
|
1348
|
-
const { offsetLeft:
|
|
1349
|
-
|
|
1350
|
-
const
|
|
1351
|
-
let
|
|
1352
|
-
const
|
|
1353
|
-
|
|
1351
|
+
const d = M.title || [], r = M.dataPoints && M.dataPoints[0], b = r ? L.value[r.dataIndex] : "#3B82F6", x = r ? $(r.parsed.r ?? r.parsed) : "", c = p.querySelector(".nc-tt__content");
|
|
1352
|
+
c.innerHTML = `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${d.join(" ")}</div><div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${b};box-shadow:0 0 0 2px ${N(b, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${x}</span></div>`;
|
|
1353
|
+
const { offsetLeft: u, offsetTop: n } = T.canvas;
|
|
1354
|
+
p.style.opacity = "1", p.style.visibility = "hidden", p.style.left = "0px", p.style.top = "0px";
|
|
1355
|
+
const y = p.offsetWidth, v = p.offsetHeight, j = 4, E = nt(u + M.caretX, y, G.clientWidth, j);
|
|
1356
|
+
let B = n + M.caretY;
|
|
1357
|
+
const k = v + 16 + j;
|
|
1358
|
+
B < k && (B = k), p.style.left = E + "px", p.style.top = B + "px", p.style.visibility = "visible";
|
|
1354
1359
|
}
|
|
1355
|
-
const K =
|
|
1360
|
+
const K = z(() => ({
|
|
1356
1361
|
responsive: !0,
|
|
1357
1362
|
maintainAspectRatio: !1,
|
|
1358
1363
|
layout: { padding: 4 },
|
|
@@ -1362,11 +1367,11 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1362
1367
|
ticks: { display: !1, backdropColor: "transparent" },
|
|
1363
1368
|
grid: {
|
|
1364
1369
|
display: e.mostrarLinhasGrade,
|
|
1365
|
-
color:
|
|
1370
|
+
color: N(o.value.muted, 0.18)
|
|
1366
1371
|
},
|
|
1367
1372
|
angleLines: {
|
|
1368
1373
|
display: e.mostrarLinhasGrade,
|
|
1369
|
-
color:
|
|
1374
|
+
color: N(o.value.muted, 0.18)
|
|
1370
1375
|
},
|
|
1371
1376
|
pointLabels: { display: !1 }
|
|
1372
1377
|
}
|
|
@@ -1375,153 +1380,153 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1375
1380
|
legend: { display: !1 },
|
|
1376
1381
|
tooltip: {
|
|
1377
1382
|
enabled: !1,
|
|
1378
|
-
external:
|
|
1383
|
+
external: W,
|
|
1379
1384
|
callbacks: {
|
|
1380
|
-
title: (
|
|
1381
|
-
var
|
|
1382
|
-
return ((
|
|
1385
|
+
title: (f) => {
|
|
1386
|
+
var T;
|
|
1387
|
+
return ((T = f[0]) == null ? void 0 : T.label) ?? "";
|
|
1383
1388
|
},
|
|
1384
|
-
label: (
|
|
1385
|
-
var
|
|
1386
|
-
return
|
|
1389
|
+
label: (f) => {
|
|
1390
|
+
var T;
|
|
1391
|
+
return $(((T = f.parsed) == null ? void 0 : T.r) ?? f.parsed);
|
|
1387
1392
|
}
|
|
1388
1393
|
}
|
|
1389
1394
|
}
|
|
1390
1395
|
}
|
|
1391
1396
|
}));
|
|
1392
1397
|
function _() {
|
|
1393
|
-
|
|
1398
|
+
i("botaoAcao");
|
|
1394
1399
|
}
|
|
1395
|
-
return (
|
|
1400
|
+
return (f, T) => (l(), s("div", {
|
|
1396
1401
|
ref_key: "cardRef",
|
|
1397
|
-
ref:
|
|
1398
|
-
class:
|
|
1399
|
-
style:
|
|
1402
|
+
ref: w,
|
|
1403
|
+
class: lt(["card-polar p-4 flex flex-column", q.value]),
|
|
1404
|
+
style: h(a(C))
|
|
1400
1405
|
}, [
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1406
|
+
S("div", De, [
|
|
1407
|
+
f.$slots.legenda || t.legenda || f.$slots.sublegenda || t.sublegenda ? (l(), s("div", Ie, [
|
|
1408
|
+
f.$slots.legenda || t.legenda ? (l(), s("div", {
|
|
1404
1409
|
key: 0,
|
|
1405
1410
|
class: "text-xs font-medium",
|
|
1406
|
-
style:
|
|
1411
|
+
style: h({ color: a(o).text, opacity: 0.95 })
|
|
1407
1412
|
}, [
|
|
1408
|
-
|
|
1409
|
-
|
|
1413
|
+
F(f.$slots, "legenda", {}, () => [
|
|
1414
|
+
X(A(t.legenda), 1)
|
|
1410
1415
|
], !0)
|
|
1411
|
-
], 4)) :
|
|
1412
|
-
|
|
1416
|
+
], 4)) : g("", !0),
|
|
1417
|
+
f.$slots.sublegenda || t.sublegenda ? (l(), s("div", {
|
|
1413
1418
|
key: 1,
|
|
1414
1419
|
class: "text-xs",
|
|
1415
|
-
style:
|
|
1420
|
+
style: h({ color: a(o).muted })
|
|
1416
1421
|
}, [
|
|
1417
|
-
|
|
1418
|
-
|
|
1422
|
+
F(f.$slots, "sublegenda", {}, () => [
|
|
1423
|
+
X(A(t.sublegenda), 1)
|
|
1419
1424
|
], !0)
|
|
1420
|
-
], 4)) :
|
|
1421
|
-
])) :
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
t.botaoVisivel ? (
|
|
1425
|
+
], 4)) : g("", !0)
|
|
1426
|
+
])) : g("", !0),
|
|
1427
|
+
f.$slots.actions || t.botaoVisivel || t.exportar ? (l(), s("div", We, [
|
|
1428
|
+
F(f.$slots, "actions", {}, () => [
|
|
1429
|
+
t.botaoVisivel ? (l(), s("button", {
|
|
1425
1430
|
key: 0,
|
|
1426
1431
|
class: "nc-btn inline-flex align-items-center",
|
|
1427
|
-
style:
|
|
1432
|
+
style: h({ color: a(o).text, borderColor: a(N)(a(o).text, 0.18) }),
|
|
1428
1433
|
onClick: _
|
|
1429
1434
|
}, [
|
|
1430
|
-
|
|
1431
|
-
], 4)) :
|
|
1435
|
+
S("span", null, A(t.textoBotao), 1)
|
|
1436
|
+
], 4)) : g("", !0)
|
|
1432
1437
|
], !0),
|
|
1433
|
-
t.exportar ? (
|
|
1438
|
+
t.exportar ? (l(), s("button", {
|
|
1434
1439
|
key: 0,
|
|
1435
1440
|
type: "button",
|
|
1436
1441
|
class: "nc-exportar inline-flex align-items-center justify-content-center",
|
|
1437
|
-
style:
|
|
1442
|
+
style: h({ color: a(o).muted, borderColor: a(N)(a(o).text, 0.18) }),
|
|
1438
1443
|
title: "Exportar como imagem",
|
|
1439
1444
|
"aria-label": "Exportar como imagem",
|
|
1440
|
-
onClick:
|
|
1441
|
-
innerHTML:
|
|
1442
|
-
}, null, 12,
|
|
1443
|
-
])) :
|
|
1445
|
+
onClick: R,
|
|
1446
|
+
innerHTML: a(P)
|
|
1447
|
+
}, null, 12, Oe)) : g("", !0)
|
|
1448
|
+
])) : g("", !0)
|
|
1444
1449
|
]),
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
t.mostrarCabecalho ? (
|
|
1450
|
+
S("div", Xe, [
|
|
1451
|
+
S("div", Ye, [
|
|
1452
|
+
t.mostrarCabecalho ? (l(), s("div", {
|
|
1448
1453
|
key: 0,
|
|
1449
1454
|
class: "nc-tabela-cab flex align-items-center justify-content-between",
|
|
1450
|
-
style:
|
|
1455
|
+
style: h({ color: a(o).muted, borderColor: a(N)(a(o).muted, 0.25) })
|
|
1451
1456
|
}, [
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
], 4)) :
|
|
1455
|
-
(
|
|
1456
|
-
key:
|
|
1457
|
+
S("span", null, A(t.rotuloCategoria), 1),
|
|
1458
|
+
S("span", Je, A(t.rotuloQuantidade), 1)
|
|
1459
|
+
], 4)) : g("", !0),
|
|
1460
|
+
(l(!0), s(mt, null, yt(t.data, (M, G) => (l(), s("div", {
|
|
1461
|
+
key: G,
|
|
1457
1462
|
class: "nc-tabela-linha flex align-items-center justify-content-between",
|
|
1458
|
-
style:
|
|
1463
|
+
style: h({ color: a(o).text })
|
|
1459
1464
|
}, [
|
|
1460
|
-
|
|
1461
|
-
|
|
1465
|
+
S("span", Qe, [
|
|
1466
|
+
S("span", {
|
|
1462
1467
|
class: "nc-bolinha",
|
|
1463
|
-
style:
|
|
1468
|
+
style: h({ background: L.value[G] })
|
|
1464
1469
|
}, null, 4),
|
|
1465
|
-
|
|
1470
|
+
S("span", null, A(M.rotulo), 1)
|
|
1466
1471
|
]),
|
|
1467
|
-
|
|
1472
|
+
S("span", Ue, A(a($)(M.quantidade)), 1)
|
|
1468
1473
|
], 4))), 128))
|
|
1469
1474
|
]),
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1475
|
+
S("div", Ge, [
|
|
1476
|
+
S("div", Ze, [
|
|
1477
|
+
ft(st, {
|
|
1473
1478
|
type: "polarArea",
|
|
1474
|
-
data:
|
|
1479
|
+
data: Q.value,
|
|
1475
1480
|
options: K.value,
|
|
1476
1481
|
height: t.height
|
|
1477
1482
|
}, null, 8, ["data", "options", "height"]),
|
|
1478
|
-
|
|
1479
|
-
|
|
1483
|
+
f.$slots.titulo || t.titulo || f.$slots.descricao || t.descricao ? (l(), s("div", Ke, [
|
|
1484
|
+
f.$slots.titulo || t.titulo ? (l(), s("div", {
|
|
1480
1485
|
key: 0,
|
|
1481
1486
|
class: "card-polar__centro-titulo m-0 text-3xl font-semibold",
|
|
1482
|
-
style:
|
|
1487
|
+
style: h({ color: a(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
1483
1488
|
}, [
|
|
1484
|
-
|
|
1485
|
-
|
|
1489
|
+
F(f.$slots, "titulo", {}, () => [
|
|
1490
|
+
X(A(t.titulo), 1)
|
|
1486
1491
|
], !0)
|
|
1487
|
-
], 4)) :
|
|
1488
|
-
|
|
1492
|
+
], 4)) : g("", !0),
|
|
1493
|
+
f.$slots.descricao || t.descricao ? (l(), s("div", {
|
|
1489
1494
|
key: 1,
|
|
1490
1495
|
class: "card-polar__centro-desc",
|
|
1491
|
-
style:
|
|
1496
|
+
style: h({ color: a(o).muted })
|
|
1492
1497
|
}, [
|
|
1493
|
-
|
|
1494
|
-
|
|
1498
|
+
F(f.$slots, "descricao", {}, () => [
|
|
1499
|
+
X(A(t.descricao), 1)
|
|
1495
1500
|
], !0)
|
|
1496
|
-
], 4)) :
|
|
1497
|
-
])) :
|
|
1501
|
+
], 4)) : g("", !0)
|
|
1502
|
+
])) : g("", !0)
|
|
1498
1503
|
])
|
|
1499
1504
|
])
|
|
1500
1505
|
]),
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
])) :
|
|
1506
|
+
f.$slots.footer ? (l(), s("div", _e, [
|
|
1507
|
+
F(f.$slots, "footer", {}, void 0, !0)
|
|
1508
|
+
])) : g("", !0)
|
|
1504
1509
|
], 6));
|
|
1505
1510
|
}
|
|
1506
|
-
},
|
|
1511
|
+
}, eo = /* @__PURE__ */ at(to, [["__scopeId", "data-v-94cbf2b0"]]), oo = { class: "card-progresso__topo flex align-items-start justify-content-between gap-3" }, ao = {
|
|
1507
1512
|
key: 0,
|
|
1508
1513
|
class: "nc-legendas-flex flex flex-column"
|
|
1509
|
-
},
|
|
1514
|
+
}, ro = {
|
|
1510
1515
|
key: 1,
|
|
1511
1516
|
class: "nc-actions inline-flex align-items-center gap-2"
|
|
1512
|
-
},
|
|
1517
|
+
}, no = ["innerHTML"], lo = {
|
|
1513
1518
|
key: 0,
|
|
1514
1519
|
class: "card-progresso__titulos mt-3 mb-2 flex flex-column"
|
|
1515
|
-
},
|
|
1520
|
+
}, so = { class: "card-progresso__corpo flex align-items-center flex-wrap" }, io = {
|
|
1516
1521
|
key: 0,
|
|
1517
1522
|
class: "card-progresso__chart-wrap flex align-items-center justify-content-center"
|
|
1518
|
-
},
|
|
1523
|
+
}, co = { class: "card-progresso__chart" }, uo = { class: "nc-centro flex flex-column align-items-center justify-content-center" }, fo = { class: "card-progresso__lista flex flex-column" }, po = { class: "card-progresso__item-cab flex align-items-center justify-content-between" }, go = {
|
|
1519
1524
|
key: 0,
|
|
1520
1525
|
class: "card-progresso__item-valor inline-flex align-items-center gap-2"
|
|
1521
|
-
},
|
|
1526
|
+
}, mo = { key: 0 }, yo = {
|
|
1522
1527
|
key: 1,
|
|
1523
1528
|
class: "card-progresso__footer mt-3"
|
|
1524
|
-
},
|
|
1529
|
+
}, ho = {
|
|
1525
1530
|
__name: "CardProgresso",
|
|
1526
1531
|
props: {
|
|
1527
1532
|
legenda: { type: String, default: null },
|
|
@@ -1575,42 +1580,42 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1575
1580
|
nomeArquivoExport: { type: String, default: "card-progresso.png" }
|
|
1576
1581
|
},
|
|
1577
1582
|
emits: ["botaoAcao", "exportado"],
|
|
1578
|
-
setup(t, { emit:
|
|
1579
|
-
const e = t,
|
|
1580
|
-
async function
|
|
1581
|
-
await
|
|
1583
|
+
setup(t, { emit: m }) {
|
|
1584
|
+
const e = t, i = m, { palette: o, cardStyle: C } = it(e), { formatar: $ } = pt(e), w = ot(null), P = dt;
|
|
1585
|
+
async function R() {
|
|
1586
|
+
await ct(w.value, {
|
|
1582
1587
|
nomeArquivo: e.nomeArquivoExport,
|
|
1583
1588
|
corFundo: o.value.bg !== "transparent" ? o.value.bg : null
|
|
1584
|
-
}),
|
|
1589
|
+
}), i("exportado");
|
|
1585
1590
|
}
|
|
1586
|
-
const
|
|
1587
|
-
const
|
|
1588
|
-
return e.data.map((
|
|
1589
|
-
const
|
|
1590
|
-
let
|
|
1591
|
-
if (
|
|
1592
|
-
const
|
|
1593
|
-
|
|
1591
|
+
const q = z(() => `card-progresso--${e.direcao}`), L = z(() => {
|
|
1592
|
+
const d = ht(e.corDetalhes, e.data.length);
|
|
1593
|
+
return e.data.map((r, b) => {
|
|
1594
|
+
const x = Number(r.meta ?? e.metaPadrao) || 0, c = Number(r.quantidade) || 0, u = r.cor ?? d[b], n = r.modo === "reducao";
|
|
1595
|
+
let y;
|
|
1596
|
+
if (n) {
|
|
1597
|
+
const v = Number(r.valor_referencia) || 0, j = v - x;
|
|
1598
|
+
y = j > 0 ? Math.max(0, Math.min(100, (v - c) / j * 100)) : 0;
|
|
1594
1599
|
} else
|
|
1595
|
-
|
|
1596
|
-
return { rotulo:
|
|
1600
|
+
y = x > 0 ? Math.max(0, Math.min(100, c / x * 100)) : 0;
|
|
1601
|
+
return { rotulo: r.rotulo, quantidade: c, meta: x, valorReferencia: r.valor_referencia ?? null, cor: u, percentual: y, reducao: n };
|
|
1597
1602
|
});
|
|
1598
|
-
}),
|
|
1603
|
+
}), Q = z(
|
|
1599
1604
|
() => typeof e.alturaBarra == "number" ? `${e.alturaBarra}px` : e.alturaBarra
|
|
1600
|
-
),
|
|
1605
|
+
), W = z(
|
|
1601
1606
|
() => typeof e.raioBarra == "number" ? `${e.raioBarra}px` : e.raioBarra
|
|
1602
|
-
), K =
|
|
1603
|
-
if (!
|
|
1604
|
-
const
|
|
1605
|
-
return
|
|
1606
|
-
}),
|
|
1607
|
-
const
|
|
1607
|
+
), K = z(() => L.value.reduce((d, r) => d + r.quantidade, 0)), _ = z(() => L.value.reduce((d, r) => d + r.meta, 0)), f = z(() => {
|
|
1608
|
+
if (!L.value.length) return 0;
|
|
1609
|
+
const d = (b) => b.reducao && b.valorReferencia != null ? Math.max(0, Number(b.valorReferencia) - b.meta) : b.meta, r = L.value.reduce((b, x) => b + d(x), 0);
|
|
1610
|
+
return r <= 0 ? 0 : L.value.reduce((b, x) => b + x.percentual * d(x), 0) / r;
|
|
1611
|
+
}), T = z(() => L.value.every((d) => d.reducao)), M = z(() => {
|
|
1612
|
+
const d = Math.min(f.value, 100), r = Math.max(0, 100 - d), b = T.value ? e.corExcesso : e.corDetalhes;
|
|
1608
1613
|
return {
|
|
1609
1614
|
labels: ["Progresso", "Restante"],
|
|
1610
1615
|
datasets: [
|
|
1611
1616
|
{
|
|
1612
|
-
data: [
|
|
1613
|
-
backgroundColor: [
|
|
1617
|
+
data: [d, r],
|
|
1618
|
+
backgroundColor: [b, N(o.value.muted, 0.15)],
|
|
1614
1619
|
borderWidth: 0,
|
|
1615
1620
|
borderColor: "transparent",
|
|
1616
1621
|
hoverOffset: 0,
|
|
@@ -1618,7 +1623,7 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1618
1623
|
}
|
|
1619
1624
|
]
|
|
1620
1625
|
};
|
|
1621
|
-
}),
|
|
1626
|
+
}), G = z(() => ({
|
|
1622
1627
|
responsive: !0,
|
|
1623
1628
|
maintainAspectRatio: !1,
|
|
1624
1629
|
cutout: e.cutout,
|
|
@@ -1630,171 +1635,171 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1630
1635
|
tooltip: { enabled: !1 }
|
|
1631
1636
|
}
|
|
1632
1637
|
}));
|
|
1633
|
-
function
|
|
1634
|
-
|
|
1638
|
+
function p() {
|
|
1639
|
+
i("botaoAcao");
|
|
1635
1640
|
}
|
|
1636
|
-
return (
|
|
1641
|
+
return (d, r) => (l(), s("div", {
|
|
1637
1642
|
ref_key: "cardRef",
|
|
1638
|
-
ref:
|
|
1639
|
-
class:
|
|
1640
|
-
style:
|
|
1643
|
+
ref: w,
|
|
1644
|
+
class: lt(["card-progresso p-4 flex flex-column", q.value]),
|
|
1645
|
+
style: h(a(C))
|
|
1641
1646
|
}, [
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1647
|
+
S("div", oo, [
|
|
1648
|
+
d.$slots.legenda || t.legenda || d.$slots.sublegenda || t.sublegenda ? (l(), s("div", ao, [
|
|
1649
|
+
d.$slots.legenda || t.legenda ? (l(), s("div", {
|
|
1645
1650
|
key: 0,
|
|
1646
1651
|
class: "text-xs font-medium",
|
|
1647
|
-
style:
|
|
1652
|
+
style: h({ color: a(o).text, opacity: 0.95 })
|
|
1648
1653
|
}, [
|
|
1649
|
-
|
|
1650
|
-
|
|
1654
|
+
F(d.$slots, "legenda", {}, () => [
|
|
1655
|
+
X(A(t.legenda), 1)
|
|
1651
1656
|
], !0)
|
|
1652
|
-
], 4)) :
|
|
1653
|
-
|
|
1657
|
+
], 4)) : g("", !0),
|
|
1658
|
+
d.$slots.sublegenda || t.sublegenda ? (l(), s("div", {
|
|
1654
1659
|
key: 1,
|
|
1655
1660
|
class: "text-xs",
|
|
1656
|
-
style:
|
|
1661
|
+
style: h({ color: a(o).muted })
|
|
1657
1662
|
}, [
|
|
1658
|
-
|
|
1659
|
-
|
|
1663
|
+
F(d.$slots, "sublegenda", {}, () => [
|
|
1664
|
+
X(A(t.sublegenda), 1)
|
|
1660
1665
|
], !0)
|
|
1661
|
-
], 4)) :
|
|
1662
|
-
])) :
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
t.botaoVisivel ? (
|
|
1666
|
+
], 4)) : g("", !0)
|
|
1667
|
+
])) : g("", !0),
|
|
1668
|
+
d.$slots.actions || t.botaoVisivel || t.exportar ? (l(), s("div", ro, [
|
|
1669
|
+
F(d.$slots, "actions", {}, () => [
|
|
1670
|
+
t.botaoVisivel ? (l(), s("button", {
|
|
1666
1671
|
key: 0,
|
|
1667
1672
|
class: "nc-btn inline-flex align-items-center",
|
|
1668
|
-
style:
|
|
1669
|
-
onClick:
|
|
1673
|
+
style: h({ color: a(o).text, borderColor: a(N)(a(o).text, 0.18) }),
|
|
1674
|
+
onClick: p
|
|
1670
1675
|
}, [
|
|
1671
|
-
|
|
1672
|
-
], 4)) :
|
|
1676
|
+
S("span", null, A(t.textoBotao), 1)
|
|
1677
|
+
], 4)) : g("", !0)
|
|
1673
1678
|
], !0),
|
|
1674
|
-
t.exportar ? (
|
|
1679
|
+
t.exportar ? (l(), s("button", {
|
|
1675
1680
|
key: 0,
|
|
1676
1681
|
type: "button",
|
|
1677
1682
|
class: "nc-exportar inline-flex align-items-center justify-content-center",
|
|
1678
|
-
style:
|
|
1683
|
+
style: h({ color: a(o).muted, borderColor: a(N)(a(o).text, 0.18) }),
|
|
1679
1684
|
title: "Exportar como imagem",
|
|
1680
1685
|
"aria-label": "Exportar como imagem",
|
|
1681
|
-
onClick:
|
|
1682
|
-
innerHTML:
|
|
1683
|
-
}, null, 12,
|
|
1684
|
-
])) :
|
|
1686
|
+
onClick: R,
|
|
1687
|
+
innerHTML: a(P)
|
|
1688
|
+
}, null, 12, no)) : g("", !0)
|
|
1689
|
+
])) : g("", !0)
|
|
1685
1690
|
]),
|
|
1686
|
-
|
|
1687
|
-
|
|
1691
|
+
d.$slots.titulo || t.titulo || d.$slots.descricao || t.descricao ? (l(), s("div", lo, [
|
|
1692
|
+
d.$slots.titulo || t.titulo ? (l(), s("div", {
|
|
1688
1693
|
key: 0,
|
|
1689
1694
|
class: "m-0 text-3xl font-semibold",
|
|
1690
|
-
style:
|
|
1695
|
+
style: h({ color: a(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
1691
1696
|
}, [
|
|
1692
|
-
|
|
1693
|
-
|
|
1697
|
+
F(d.$slots, "titulo", {}, () => [
|
|
1698
|
+
X(A(t.titulo), 1)
|
|
1694
1699
|
], !0)
|
|
1695
|
-
], 4)) :
|
|
1696
|
-
|
|
1700
|
+
], 4)) : g("", !0),
|
|
1701
|
+
d.$slots.descricao || t.descricao ? (l(), s("div", {
|
|
1697
1702
|
key: 1,
|
|
1698
1703
|
class: "text-sm mt-1",
|
|
1699
|
-
style:
|
|
1704
|
+
style: h({ color: a(o).muted })
|
|
1700
1705
|
}, [
|
|
1701
|
-
|
|
1702
|
-
|
|
1706
|
+
F(d.$slots, "descricao", {}, () => [
|
|
1707
|
+
X(A(t.descricao), 1)
|
|
1703
1708
|
], !0)
|
|
1704
|
-
], 4)) :
|
|
1705
|
-
])) :
|
|
1706
|
-
|
|
1707
|
-
t.formato === "circular" ? (
|
|
1708
|
-
|
|
1709
|
-
|
|
1709
|
+
], 4)) : g("", !0)
|
|
1710
|
+
])) : g("", !0),
|
|
1711
|
+
S("div", so, [
|
|
1712
|
+
t.formato === "circular" ? (l(), s("div", io, [
|
|
1713
|
+
S("div", co, [
|
|
1714
|
+
ft(st, {
|
|
1710
1715
|
type: "doughnut",
|
|
1711
|
-
data:
|
|
1712
|
-
options:
|
|
1716
|
+
data: M.value,
|
|
1717
|
+
options: G.value,
|
|
1713
1718
|
height: t.height
|
|
1714
1719
|
}, null, 8, ["data", "options", "height"]),
|
|
1715
|
-
|
|
1716
|
-
|
|
1720
|
+
S("div", uo, [
|
|
1721
|
+
S("div", {
|
|
1717
1722
|
class: "nc-centro-titulo",
|
|
1718
|
-
style:
|
|
1719
|
-
},
|
|
1720
|
-
|
|
1723
|
+
style: h({ color: T.value ? e.corExcesso : a(o).text })
|
|
1724
|
+
}, A(Math.round(f.value)) + "% ", 5),
|
|
1725
|
+
S("div", {
|
|
1721
1726
|
class: "nc-centro-desc",
|
|
1722
|
-
style:
|
|
1723
|
-
},
|
|
1727
|
+
style: h({ color: a(o).muted })
|
|
1728
|
+
}, A(a($)(K.value)) + " / " + A(a($)(_.value)), 5)
|
|
1724
1729
|
])
|
|
1725
1730
|
])
|
|
1726
|
-
])) :
|
|
1727
|
-
|
|
1728
|
-
(
|
|
1729
|
-
key:
|
|
1731
|
+
])) : g("", !0),
|
|
1732
|
+
S("div", fo, [
|
|
1733
|
+
(l(!0), s(mt, null, yt(L.value, (b, x) => (l(), s("div", {
|
|
1734
|
+
key: x,
|
|
1730
1735
|
class: "card-progresso__item flex flex-column"
|
|
1731
1736
|
}, [
|
|
1732
|
-
|
|
1733
|
-
|
|
1737
|
+
S("div", po, [
|
|
1738
|
+
S("span", {
|
|
1734
1739
|
class: "card-progresso__item-rotulo inline-flex align-items-center gap-2",
|
|
1735
|
-
style:
|
|
1740
|
+
style: h({ color: a(o).text })
|
|
1736
1741
|
}, [
|
|
1737
|
-
|
|
1742
|
+
S("span", {
|
|
1738
1743
|
class: "nc-bolinha",
|
|
1739
|
-
style:
|
|
1744
|
+
style: h({ background: b.cor })
|
|
1740
1745
|
}, null, 4),
|
|
1741
|
-
|
|
1742
|
-
|
|
1746
|
+
S("span", null, A(b.rotulo), 1),
|
|
1747
|
+
b.reducao ? (l(), s("span", {
|
|
1743
1748
|
key: 0,
|
|
1744
1749
|
class: "card-progresso__item-modo",
|
|
1745
|
-
style:
|
|
1746
|
-
}, "↓", 4)) :
|
|
1750
|
+
style: h({ color: a(o).muted })
|
|
1751
|
+
}, "↓", 4)) : g("", !0)
|
|
1747
1752
|
], 4),
|
|
1748
|
-
t.mostrarValor || t.mostrarPercentual ? (
|
|
1749
|
-
t.mostrarValor ? (
|
|
1753
|
+
t.mostrarValor || t.mostrarPercentual ? (l(), s("span", go, [
|
|
1754
|
+
t.mostrarValor ? (l(), s("span", {
|
|
1750
1755
|
key: 0,
|
|
1751
1756
|
class: "card-progresso__item-nums",
|
|
1752
|
-
style:
|
|
1757
|
+
style: h({ color: a(o).muted })
|
|
1753
1758
|
}, [
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
], 4)) :
|
|
1757
|
-
t.mostrarPercentual ? (
|
|
1759
|
+
X(A(a($)(b.quantidade)), 1),
|
|
1760
|
+
b.meta ? (l(), s("span", mo, " / " + A(a($)(b.meta)), 1)) : g("", !0)
|
|
1761
|
+
], 4)) : g("", !0),
|
|
1762
|
+
t.mostrarPercentual ? (l(), s("span", {
|
|
1758
1763
|
key: 1,
|
|
1759
1764
|
class: "card-progresso__item-pct",
|
|
1760
|
-
style:
|
|
1761
|
-
},
|
|
1762
|
-
])) :
|
|
1765
|
+
style: h({ background: a(N)(b.cor, 0.12), color: b.cor })
|
|
1766
|
+
}, A(Math.round(b.percentual)) + "% ", 5)) : g("", !0)
|
|
1767
|
+
])) : g("", !0)
|
|
1763
1768
|
]),
|
|
1764
|
-
|
|
1769
|
+
S("div", {
|
|
1765
1770
|
class: "card-progresso__trilha w-full",
|
|
1766
|
-
style:
|
|
1767
|
-
height:
|
|
1768
|
-
borderRadius:
|
|
1769
|
-
background:
|
|
1771
|
+
style: h({
|
|
1772
|
+
height: Q.value,
|
|
1773
|
+
borderRadius: W.value,
|
|
1774
|
+
background: b.reducao ? a(N)(e.corExcesso, 0.18) : a(N)(a(o).muted, 0.15)
|
|
1770
1775
|
})
|
|
1771
1776
|
}, [
|
|
1772
|
-
|
|
1777
|
+
S("div", {
|
|
1773
1778
|
class: "card-progresso__preenchimento",
|
|
1774
|
-
style:
|
|
1779
|
+
style: h({ width: b.percentual + "%", background: b.cor, borderRadius: W.value })
|
|
1775
1780
|
}, null, 4)
|
|
1776
1781
|
], 4)
|
|
1777
1782
|
]))), 128))
|
|
1778
1783
|
])
|
|
1779
1784
|
]),
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
])) :
|
|
1785
|
+
d.$slots.footer ? (l(), s("div", yo, [
|
|
1786
|
+
F(d.$slots, "footer", {}, void 0, !0)
|
|
1787
|
+
])) : g("", !0)
|
|
1783
1788
|
], 6));
|
|
1784
1789
|
}
|
|
1785
|
-
},
|
|
1790
|
+
}, bo = /* @__PURE__ */ at(ho, [["__scopeId", "data-v-36cee8f0"]]), xo = {
|
|
1786
1791
|
key: 0,
|
|
1787
1792
|
class: "card-base__topo"
|
|
1788
|
-
},
|
|
1793
|
+
}, vo = ["innerHTML"], $o = { class: "card-base__legendas flex flex-column" }, So = {
|
|
1789
1794
|
key: 1,
|
|
1790
1795
|
class: "card-base__titulos flex flex-column"
|
|
1791
|
-
},
|
|
1796
|
+
}, ko = {
|
|
1792
1797
|
key: 2,
|
|
1793
1798
|
class: "card-base__acao flex"
|
|
1794
|
-
},
|
|
1799
|
+
}, Co = {
|
|
1795
1800
|
key: 3,
|
|
1796
1801
|
class: "card-base__footer"
|
|
1797
|
-
},
|
|
1802
|
+
}, Ao = {
|
|
1798
1803
|
__name: "CardBase",
|
|
1799
1804
|
props: {
|
|
1800
1805
|
legenda: { type: String, default: null },
|
|
@@ -1818,117 +1823,117 @@ const ct = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1818
1823
|
nomeArquivoExport: { type: String, default: "card-base.png" }
|
|
1819
1824
|
},
|
|
1820
1825
|
emits: ["botaoAcao", "exportado"],
|
|
1821
|
-
setup(t, { emit:
|
|
1822
|
-
const e = t,
|
|
1823
|
-
function
|
|
1824
|
-
|
|
1826
|
+
setup(t, { emit: m }) {
|
|
1827
|
+
const e = t, i = m, { palette: o, cardStyle: C } = it(e), $ = ot(null), w = dt;
|
|
1828
|
+
function P() {
|
|
1829
|
+
i("botaoAcao");
|
|
1825
1830
|
}
|
|
1826
|
-
async function
|
|
1827
|
-
await
|
|
1831
|
+
async function R() {
|
|
1832
|
+
await ct($.value, {
|
|
1828
1833
|
nomeArquivo: e.nomeArquivoExport,
|
|
1829
1834
|
corFundo: o.value.bg !== "transparent" ? o.value.bg : null
|
|
1830
|
-
}),
|
|
1835
|
+
}), i("exportado");
|
|
1831
1836
|
}
|
|
1832
|
-
return (
|
|
1837
|
+
return (q, L) => (l(), s("div", {
|
|
1833
1838
|
ref_key: "cardRef",
|
|
1834
|
-
ref:
|
|
1835
|
-
class:
|
|
1836
|
-
style:
|
|
1839
|
+
ref: $,
|
|
1840
|
+
class: lt(["card-base flex flex-column", `card-base--${t.alinhamento}`]),
|
|
1841
|
+
style: h(a(C))
|
|
1837
1842
|
}, [
|
|
1838
|
-
t.exportar ? (
|
|
1839
|
-
|
|
1843
|
+
t.exportar ? (l(), s("div", xo, [
|
|
1844
|
+
S("button", {
|
|
1840
1845
|
type: "button",
|
|
1841
1846
|
class: "nc-exportar card-base__exportar inline-flex align-items-center justify-content-center",
|
|
1842
|
-
style:
|
|
1847
|
+
style: h({ color: a(o).muted, borderColor: a(N)(a(o).text === "inherit" ? "#0F172A" : a(o).text, 0.18) }),
|
|
1843
1848
|
title: "Exportar como imagem",
|
|
1844
1849
|
"aria-label": "Exportar como imagem",
|
|
1845
|
-
onClick:
|
|
1846
|
-
innerHTML:
|
|
1847
|
-
}, null, 12,
|
|
1848
|
-
])) :
|
|
1849
|
-
|
|
1850
|
-
|
|
1850
|
+
onClick: R,
|
|
1851
|
+
innerHTML: a(w)
|
|
1852
|
+
}, null, 12, vo)
|
|
1853
|
+
])) : g("", !0),
|
|
1854
|
+
S("div", $o, [
|
|
1855
|
+
q.$slots.legenda || t.legenda ? (l(), s("div", {
|
|
1851
1856
|
key: 0,
|
|
1852
1857
|
class: "card-base__legenda font-medium text-xs",
|
|
1853
|
-
style:
|
|
1858
|
+
style: h({ color: a(o).text })
|
|
1854
1859
|
}, [
|
|
1855
|
-
q
|
|
1856
|
-
|
|
1860
|
+
F(q.$slots, "legenda", {}, () => [
|
|
1861
|
+
X(A(t.legenda), 1)
|
|
1857
1862
|
], !0)
|
|
1858
|
-
], 4)) :
|
|
1859
|
-
|
|
1863
|
+
], 4)) : g("", !0),
|
|
1864
|
+
q.$slots.sublegenda || t.sublegenda ? (l(), s("div", {
|
|
1860
1865
|
key: 1,
|
|
1861
1866
|
class: "card-base__sublegenda text-xs",
|
|
1862
|
-
style:
|
|
1867
|
+
style: h({ color: a(o).muted })
|
|
1863
1868
|
}, [
|
|
1864
|
-
q
|
|
1865
|
-
|
|
1869
|
+
F(q.$slots, "sublegenda", {}, () => [
|
|
1870
|
+
X(A(t.sublegenda), 1)
|
|
1866
1871
|
], !0)
|
|
1867
|
-
], 4)) :
|
|
1872
|
+
], 4)) : g("", !0)
|
|
1868
1873
|
]),
|
|
1869
|
-
|
|
1870
|
-
|
|
1874
|
+
q.$slots.titulo || t.titulo || q.$slots.descricao || t.descricao ? (l(), s("div", So, [
|
|
1875
|
+
q.$slots.titulo || t.titulo ? (l(), s("div", {
|
|
1871
1876
|
key: 0,
|
|
1872
1877
|
class: "card-base__titulo m-0 text-3xl font-semibold",
|
|
1873
|
-
style:
|
|
1878
|
+
style: h({ color: a(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
1874
1879
|
}, [
|
|
1875
|
-
q
|
|
1876
|
-
|
|
1880
|
+
F(q.$slots, "titulo", {}, () => [
|
|
1881
|
+
X(A(t.titulo), 1)
|
|
1877
1882
|
], !0)
|
|
1878
|
-
], 4)) :
|
|
1879
|
-
|
|
1883
|
+
], 4)) : g("", !0),
|
|
1884
|
+
q.$slots.descricao || t.descricao ? (l(), s("div", {
|
|
1880
1885
|
key: 1,
|
|
1881
1886
|
class: "text-sm",
|
|
1882
|
-
style:
|
|
1887
|
+
style: h({ color: a(o).muted })
|
|
1883
1888
|
}, [
|
|
1884
|
-
q
|
|
1885
|
-
|
|
1889
|
+
F(q.$slots, "descricao", {}, () => [
|
|
1890
|
+
X(A(t.descricao), 1)
|
|
1886
1891
|
], !0)
|
|
1887
|
-
], 4)) :
|
|
1888
|
-
])) :
|
|
1889
|
-
|
|
1890
|
-
q
|
|
1891
|
-
t.botaoVisivel ? (
|
|
1892
|
+
], 4)) : g("", !0)
|
|
1893
|
+
])) : g("", !0),
|
|
1894
|
+
q.$slots.acao || t.botaoVisivel ? (l(), s("div", ko, [
|
|
1895
|
+
F(q.$slots, "acao", {}, () => [
|
|
1896
|
+
t.botaoVisivel ? (l(), s("button", {
|
|
1892
1897
|
key: 0,
|
|
1893
1898
|
type: "button",
|
|
1894
1899
|
class: "card-base__link text-xs inline-flex align-items-center",
|
|
1895
|
-
style:
|
|
1896
|
-
onClick:
|
|
1900
|
+
style: h({ color: a(o).text }),
|
|
1901
|
+
onClick: P
|
|
1897
1902
|
}, [
|
|
1898
|
-
|
|
1899
|
-
|
|
1903
|
+
S("span", null, A(t.textoBotao), 1),
|
|
1904
|
+
L[0] || (L[0] = S("span", {
|
|
1900
1905
|
class: "card-base__chevron",
|
|
1901
1906
|
"aria-hidden": "true"
|
|
1902
1907
|
}, "›", -1))
|
|
1903
|
-
], 4)) :
|
|
1908
|
+
], 4)) : g("", !0)
|
|
1904
1909
|
], !0)
|
|
1905
|
-
])) :
|
|
1906
|
-
|
|
1907
|
-
q
|
|
1908
|
-
])) :
|
|
1910
|
+
])) : g("", !0),
|
|
1911
|
+
q.$slots.footer ? (l(), s("div", Co, [
|
|
1912
|
+
F(q.$slots, "footer", {}, void 0, !0)
|
|
1913
|
+
])) : g("", !0)
|
|
1909
1914
|
], 6));
|
|
1910
1915
|
}
|
|
1911
|
-
},
|
|
1916
|
+
}, Bo = /* @__PURE__ */ at(Ao, [["__scopeId", "data-v-61091b7c"]]), To = {
|
|
1912
1917
|
install(t) {
|
|
1913
|
-
t.component("ChartBase",
|
|
1918
|
+
t.component("ChartBase", st), t.component("CardBase", Bo), t.component("CardLinhas", me), t.component("CardPizza", Ee), t.component("CardBarra", Pe), t.component("CardPolar", eo), t.component("CardProgresso", bo);
|
|
1914
1919
|
}
|
|
1915
1920
|
};
|
|
1916
1921
|
export {
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1922
|
+
Pe as CardBarra,
|
|
1923
|
+
Bo as CardBase,
|
|
1924
|
+
me as CardLinhas,
|
|
1925
|
+
Ee as CardPizza,
|
|
1926
|
+
eo as CardPolar,
|
|
1927
|
+
bo as CardProgresso,
|
|
1928
|
+
st as ChartBase,
|
|
1929
|
+
dt as ICONE_EXPORTAR_SVG,
|
|
1930
|
+
nt as clampHorizontal,
|
|
1926
1931
|
gt as criarTooltipEl,
|
|
1927
|
-
|
|
1928
|
-
|
|
1932
|
+
To as default,
|
|
1933
|
+
ct as exportarElementoComoImagem,
|
|
1929
1934
|
ht as gerarPaleta,
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1935
|
+
rt as prepararTooltipParent,
|
|
1936
|
+
N as toRgba,
|
|
1937
|
+
pt as useFormatadorValor,
|
|
1938
|
+
it as useTema
|
|
1934
1939
|
};
|