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