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