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