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