nemesischart 2.0.4 → 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 +916 -893
- 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 Rt, onMounted as
|
|
2
|
-
import { Chart as $t, Title as Tt, Tooltip as qt, Legend 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, x) => {
|
|
|
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
20
|
Tt,
|
|
21
21
|
qt,
|
|
22
|
-
zt,
|
|
23
22
|
Lt,
|
|
23
|
+
zt,
|
|
24
24
|
jt,
|
|
25
|
-
Vt,
|
|
26
25
|
Ht,
|
|
26
|
+
Vt,
|
|
27
|
+
Mt,
|
|
27
28
|
Nt,
|
|
28
29
|
Dt,
|
|
29
|
-
Mt,
|
|
30
30
|
Pt,
|
|
31
|
-
_t,
|
|
32
31
|
Ot,
|
|
33
32
|
Wt,
|
|
34
|
-
It
|
|
33
|
+
It,
|
|
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
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
|
-
}, lt = /* @__PURE__ */ et(
|
|
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
102
|
function nt(t) {
|
|
103
|
-
const
|
|
104
|
-
const
|
|
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 gt(t, { caretFlexivel:
|
|
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 gt(t, { caretFlexivel: x = !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 gt(t, { caretFlexivel: x = !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 st(t,
|
|
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
222
|
const K = document.createElement("canvas");
|
|
223
|
-
K.width =
|
|
224
|
-
const
|
|
225
|
-
|
|
226
|
-
let
|
|
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 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>',
|
|
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 = {
|
|
@@ -296,76 +296,76 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
296
296
|
nomeArquivoExport: { type: String, default: "card-linhas.png" }
|
|
297
297
|
},
|
|
298
298
|
emits: ["botaoAcao", "exportado"],
|
|
299
|
-
setup(t, { emit:
|
|
300
|
-
const
|
|
301
|
-
async function
|
|
302
|
-
await st(
|
|
303
|
-
nomeArquivo:
|
|
304
|
-
corFundo:
|
|
305
|
-
}),
|
|
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");
|
|
306
306
|
}
|
|
307
|
-
const
|
|
308
|
-
valor:
|
|
309
|
-
rotulo:
|
|
310
|
-
cor:
|
|
311
|
-
corRotulo:
|
|
312
|
-
corTexto:
|
|
313
|
-
tracejado:
|
|
314
|
-
espessura:
|
|
315
|
-
}) : []),
|
|
316
|
-
let
|
|
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
317
|
const K = {
|
|
318
318
|
id: "linhaReferencia",
|
|
319
|
-
afterDatasetsDraw(
|
|
320
|
-
const
|
|
321
|
-
if (
|
|
322
|
-
const { ctx: c, chartArea:
|
|
323
|
-
|
|
324
|
-
const
|
|
325
|
-
if (
|
|
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
326
|
c.restore();
|
|
327
327
|
return;
|
|
328
328
|
}
|
|
329
|
-
if (c.moveTo(
|
|
329
|
+
if (c.moveTo(h.left, p), c.lineTo(h.right, p), c.stroke(), c.setLineDash([]), l.rotulo) {
|
|
330
330
|
c.font = "600 11px 'Inter', sans-serif";
|
|
331
|
-
const
|
|
332
|
-
let
|
|
333
|
-
|
|
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
334
|
}
|
|
335
335
|
c.restore();
|
|
336
336
|
});
|
|
337
337
|
},
|
|
338
|
-
beforeEvent(
|
|
339
|
-
if (!
|
|
340
|
-
|
|
338
|
+
beforeEvent(d, i) {
|
|
339
|
+
if (!X.length) {
|
|
340
|
+
I = null;
|
|
341
341
|
return;
|
|
342
342
|
}
|
|
343
|
-
const c =
|
|
343
|
+
const c = i.event;
|
|
344
344
|
if (!c || c.type === "mouseout" || c.x == null || c.y == null) {
|
|
345
|
-
|
|
345
|
+
I = null;
|
|
346
346
|
return;
|
|
347
347
|
}
|
|
348
|
-
const
|
|
349
|
-
let
|
|
350
|
-
for (const
|
|
351
|
-
const
|
|
352
|
-
|
|
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
353
|
}
|
|
354
|
-
|
|
354
|
+
I = a;
|
|
355
355
|
},
|
|
356
|
-
afterEvent(
|
|
357
|
-
if (!
|
|
358
|
-
const c =
|
|
356
|
+
afterEvent(d, i) {
|
|
357
|
+
if (!X.length) return;
|
|
358
|
+
const c = i.event;
|
|
359
359
|
if (!c) return;
|
|
360
|
-
const
|
|
361
|
-
if (!
|
|
362
|
-
let
|
|
363
|
-
if (!
|
|
364
|
-
|
|
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
365
|
return;
|
|
366
366
|
}
|
|
367
|
-
const
|
|
368
|
-
|
|
367
|
+
const m = I;
|
|
368
|
+
a || (a = document.createElement("div"), a.className = "nc-tt-linhaRef", Object.assign(a.style, {
|
|
369
369
|
position: "absolute",
|
|
370
370
|
pointerEvents: "none",
|
|
371
371
|
transform: "translate(-50%, calc(-100% - 12px))",
|
|
@@ -380,95 +380,95 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
380
380
|
zIndex: "11",
|
|
381
381
|
fontFamily: "'Inter', sans-serif",
|
|
382
382
|
textAlign: "left"
|
|
383
|
-
}),
|
|
384
|
-
const
|
|
385
|
-
|
|
386
|
-
const
|
|
387
|
-
|
|
388
|
-
const
|
|
389
|
-
let
|
|
390
|
-
const
|
|
391
|
-
|
|
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
392
|
}
|
|
393
|
-
},
|
|
394
|
-
labels:
|
|
393
|
+
}, _ = w(() => E.value.length ? [K] : []), u = w(() => ({
|
|
394
|
+
labels: e.data.map((d) => d.rotulo),
|
|
395
395
|
datasets: [
|
|
396
396
|
{
|
|
397
|
-
data:
|
|
398
|
-
borderColor:
|
|
397
|
+
data: e.data.map((d) => d.quantidade),
|
|
398
|
+
borderColor: e.corDetalhes,
|
|
399
399
|
borderWidth: 3,
|
|
400
400
|
borderJoinStyle: "round",
|
|
401
401
|
borderCapStyle: "round",
|
|
402
|
-
backgroundColor: (
|
|
403
|
-
const { chart:
|
|
404
|
-
if (!
|
|
405
|
-
const
|
|
406
|
-
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;
|
|
407
407
|
},
|
|
408
408
|
fill: !0,
|
|
409
409
|
tension: 0.45,
|
|
410
410
|
pointRadius: 0,
|
|
411
411
|
pointHoverRadius: 6,
|
|
412
412
|
pointHoverBorderWidth: 3,
|
|
413
|
-
pointHoverBackgroundColor:
|
|
414
|
-
pointHoverBorderColor:
|
|
413
|
+
pointHoverBackgroundColor: e.corDetalhes,
|
|
414
|
+
pointHoverBorderColor: o.value.bg === "transparent" ? "#fff" : o.value.bg,
|
|
415
415
|
clip: !1
|
|
416
416
|
}
|
|
417
417
|
]
|
|
418
418
|
}));
|
|
419
|
-
function
|
|
420
|
-
const { chart:
|
|
421
|
-
if (!
|
|
422
|
-
const
|
|
423
|
-
if (c.opacity === 0 ||
|
|
424
|
-
|
|
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";
|
|
425
425
|
return;
|
|
426
426
|
}
|
|
427
|
-
const
|
|
428
|
-
|
|
429
|
-
const { offsetLeft:
|
|
430
|
-
|
|
431
|
-
const
|
|
432
|
-
let
|
|
433
|
-
|
|
434
|
-
const
|
|
435
|
-
if (
|
|
436
|
-
const N =
|
|
437
|
-
|
|
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)");
|
|
438
438
|
}
|
|
439
|
-
|
|
439
|
+
a.style.visibility = "visible";
|
|
440
440
|
}
|
|
441
|
-
const
|
|
441
|
+
const H = w(() => ({
|
|
442
442
|
responsive: !0,
|
|
443
443
|
maintainAspectRatio: !1,
|
|
444
444
|
interaction: { intersect: !1, mode: "index" },
|
|
445
445
|
layout: {
|
|
446
|
-
padding: { top:
|
|
446
|
+
padding: { top: E.value.length ? 24 : 0, right: 0, bottom: 0, left: 0 }
|
|
447
447
|
},
|
|
448
448
|
plugins: {
|
|
449
449
|
legend: { display: !1 },
|
|
450
450
|
tooltip: {
|
|
451
451
|
enabled: !1,
|
|
452
|
-
external:
|
|
452
|
+
external: F,
|
|
453
453
|
callbacks: {
|
|
454
|
-
title: (
|
|
455
|
-
var
|
|
456
|
-
return ((
|
|
454
|
+
title: (d) => {
|
|
455
|
+
var i;
|
|
456
|
+
return ((i = d[0]) == null ? void 0 : i.label) ?? "";
|
|
457
457
|
},
|
|
458
|
-
label: (
|
|
458
|
+
label: (d) => S(d.parsed.y)
|
|
459
459
|
}
|
|
460
460
|
}
|
|
461
461
|
},
|
|
462
462
|
scales: {
|
|
463
463
|
x: {
|
|
464
464
|
display: !0,
|
|
465
|
-
afterFit: (
|
|
466
|
-
|
|
465
|
+
afterFit: (d) => {
|
|
466
|
+
d.paddingLeft = 0, d.paddingRight = 0;
|
|
467
467
|
},
|
|
468
468
|
grid: { display: !1, drawBorder: !1 },
|
|
469
469
|
border: { display: !1 },
|
|
470
470
|
ticks: {
|
|
471
|
-
color:
|
|
471
|
+
color: o.value.muted,
|
|
472
472
|
font: { size: 10, family: "'Inter', sans-serif" },
|
|
473
473
|
padding: 8,
|
|
474
474
|
align: "inner"
|
|
@@ -477,108 +477,109 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
477
477
|
y: {
|
|
478
478
|
display: !1,
|
|
479
479
|
grid: { display: !1 },
|
|
480
|
-
beginAtZero: !0
|
|
480
|
+
beginAtZero: !0,
|
|
481
|
+
suggestedMax: E.value.length ? Math.max(...E.value.map((d) => d.valor)) : void 0
|
|
481
482
|
}
|
|
482
483
|
}
|
|
483
484
|
}));
|
|
484
|
-
function
|
|
485
|
-
|
|
485
|
+
function Y() {
|
|
486
|
+
g("botaoAcao");
|
|
486
487
|
}
|
|
487
|
-
return (
|
|
488
|
+
return (d, i) => (n(), s("div", {
|
|
488
489
|
ref_key: "cardRef",
|
|
489
|
-
ref:
|
|
490
|
-
class: rt(["card-linhas p-4 flex",
|
|
491
|
-
style: y(
|
|
490
|
+
ref: j,
|
|
491
|
+
class: rt(["card-linhas p-4 flex", T.value]),
|
|
492
|
+
style: y(r(R))
|
|
492
493
|
}, [
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
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", {
|
|
497
498
|
key: 0,
|
|
498
499
|
class: "text-xs font-medium",
|
|
499
|
-
style: y({ color:
|
|
500
|
+
style: y({ color: r(o).text, opacity: 0.85 })
|
|
500
501
|
}, [
|
|
501
|
-
|
|
502
|
-
|
|
502
|
+
C(d.$slots, "legenda", {}, () => [
|
|
503
|
+
O($(t.legenda), 1)
|
|
503
504
|
], !0)
|
|
504
|
-
], 4)) :
|
|
505
|
-
|
|
505
|
+
], 4)) : f("", !0),
|
|
506
|
+
d.$slots.sublegenda || t.sublegenda ? (n(), s("div", {
|
|
506
507
|
key: 1,
|
|
507
508
|
class: "text-xs",
|
|
508
|
-
style: y({ color:
|
|
509
|
+
style: y({ color: r(o).muted })
|
|
509
510
|
}, [
|
|
510
|
-
|
|
511
|
-
|
|
511
|
+
C(d.$slots, "sublegenda", {}, () => [
|
|
512
|
+
O($(t.sublegenda), 1)
|
|
512
513
|
], !0)
|
|
513
|
-
], 4)) :
|
|
514
|
-
])) :
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
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", {
|
|
518
519
|
key: 0,
|
|
519
|
-
class: "
|
|
520
|
-
style: y({ color:
|
|
521
|
-
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
|
|
522
523
|
}, [
|
|
523
|
-
|
|
524
|
-
], 4)) :
|
|
524
|
+
x("span", null, $(t.textoBotao), 1)
|
|
525
|
+
], 4)) : f("", !0)
|
|
525
526
|
], !0),
|
|
526
|
-
t.exportar ? (
|
|
527
|
+
t.exportar ? (n(), s("button", {
|
|
527
528
|
key: 0,
|
|
528
529
|
type: "button",
|
|
529
|
-
class: "
|
|
530
|
-
style: y({ color:
|
|
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) }),
|
|
531
532
|
title: "Exportar como imagem",
|
|
532
533
|
"aria-label": "Exportar como imagem",
|
|
533
|
-
onClick:
|
|
534
|
-
innerHTML:
|
|
535
|
-
}, null, 12, te)) :
|
|
536
|
-
])) :
|
|
534
|
+
onClick: Z,
|
|
535
|
+
innerHTML: r(Q)
|
|
536
|
+
}, null, 12, te)) : f("", !0)
|
|
537
|
+
])) : f("", !0)
|
|
537
538
|
]),
|
|
538
|
-
|
|
539
|
-
|
|
539
|
+
d.$slots.titulo || t.titulo || d.$slots.descricao || t.descricao ? (n(), s("div", ee, [
|
|
540
|
+
d.$slots.titulo || t.titulo ? (n(), s("div", {
|
|
540
541
|
key: 0,
|
|
541
542
|
class: "m-0 text-3xl font-semibold",
|
|
542
|
-
style: y({ color:
|
|
543
|
+
style: y({ color: r(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
543
544
|
}, [
|
|
544
|
-
|
|
545
|
-
|
|
545
|
+
C(d.$slots, "titulo", {}, () => [
|
|
546
|
+
O($(t.titulo), 1)
|
|
546
547
|
], !0)
|
|
547
|
-
], 4)) :
|
|
548
|
-
|
|
548
|
+
], 4)) : f("", !0),
|
|
549
|
+
d.$slots.descricao || t.descricao ? (n(), s("div", {
|
|
549
550
|
key: 1,
|
|
550
551
|
class: "text-sm mt-1",
|
|
551
|
-
style: y({ color:
|
|
552
|
+
style: y({ color: r(o).muted })
|
|
552
553
|
}, [
|
|
553
|
-
|
|
554
|
-
|
|
554
|
+
C(d.$slots, "descricao", {}, () => [
|
|
555
|
+
O($(t.descricao), 1)
|
|
555
556
|
], !0)
|
|
556
|
-
], 4)) :
|
|
557
|
-
])) :
|
|
557
|
+
], 4)) : f("", !0)
|
|
558
|
+
])) : f("", !0)
|
|
558
559
|
]),
|
|
559
|
-
|
|
560
|
+
x("div", oe, [
|
|
560
561
|
dt(lt, {
|
|
561
562
|
type: "line",
|
|
562
|
-
data:
|
|
563
|
-
options:
|
|
564
|
-
plugins:
|
|
563
|
+
data: u.value,
|
|
564
|
+
options: H.value,
|
|
565
|
+
plugins: _.value,
|
|
565
566
|
height: t.height
|
|
566
567
|
}, null, 8, ["data", "options", "plugins", "height"])
|
|
567
568
|
]),
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
])) :
|
|
569
|
+
d.$slots.footer ? (n(), s("div", ae, [
|
|
570
|
+
C(d.$slots, "footer", {}, void 0, !0)
|
|
571
|
+
])) : f("", !0)
|
|
571
572
|
], 6));
|
|
572
573
|
}
|
|
573
|
-
}, 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 = {
|
|
574
575
|
key: 0,
|
|
575
|
-
class: "
|
|
576
|
+
class: "nc-legendas-flex flex flex-column"
|
|
576
577
|
}, ie = {
|
|
577
578
|
key: 1,
|
|
578
|
-
class: "
|
|
579
|
-
}, ce = ["innerHTML"], de = { class: "card-pizza__corpo flex align-items-center gap-4" }, ue = { class: "
|
|
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 = {
|
|
580
581
|
key: 0,
|
|
581
|
-
class: "
|
|
582
|
+
class: "nc-centro flex flex-column align-items-center justify-content-center"
|
|
582
583
|
}, he = {
|
|
583
584
|
key: 0,
|
|
584
585
|
class: "card-pizza__footer mt-3"
|
|
@@ -634,22 +635,22 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
634
635
|
nomeArquivoExport: { type: String, default: "card-pizza.png" }
|
|
635
636
|
},
|
|
636
637
|
emits: ["botaoAcao", "exportado"],
|
|
637
|
-
setup(t, { emit:
|
|
638
|
-
const
|
|
639
|
-
async function
|
|
640
|
-
await st(
|
|
641
|
-
nomeArquivo:
|
|
642
|
-
corFundo:
|
|
643
|
-
}),
|
|
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");
|
|
644
645
|
}
|
|
645
|
-
const
|
|
646
|
-
() =>
|
|
647
|
-
),
|
|
648
|
-
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),
|
|
649
650
|
datasets: [
|
|
650
651
|
{
|
|
651
|
-
data:
|
|
652
|
-
backgroundColor:
|
|
652
|
+
data: e.data.map((u) => u.quantidade),
|
|
653
|
+
backgroundColor: T.value,
|
|
653
654
|
borderWidth: 0,
|
|
654
655
|
borderColor: "transparent",
|
|
655
656
|
hoverOffset: 6,
|
|
@@ -658,171 +659,171 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
658
659
|
}
|
|
659
660
|
]
|
|
660
661
|
}));
|
|
661
|
-
function
|
|
662
|
-
const { chart:
|
|
663
|
-
if (!
|
|
664
|
-
const
|
|
665
|
-
if (
|
|
666
|
-
|
|
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";
|
|
667
668
|
return;
|
|
668
669
|
}
|
|
669
|
-
const
|
|
670
|
-
|
|
671
|
-
const { offsetLeft:
|
|
672
|
-
|
|
673
|
-
const
|
|
674
|
-
let
|
|
675
|
-
const V =
|
|
676
|
-
|
|
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";
|
|
677
678
|
}
|
|
678
|
-
const
|
|
679
|
+
const I = w(() => ({
|
|
679
680
|
responsive: !0,
|
|
680
681
|
maintainAspectRatio: !1,
|
|
681
|
-
cutout:
|
|
682
|
+
cutout: e.cutout,
|
|
682
683
|
layout: { padding: 4 },
|
|
683
684
|
plugins: {
|
|
684
685
|
legend: { display: !1 },
|
|
685
686
|
tooltip: {
|
|
686
687
|
enabled: !1,
|
|
687
|
-
external:
|
|
688
|
+
external: X,
|
|
688
689
|
callbacks: {
|
|
689
|
-
title: (
|
|
690
|
-
var
|
|
691
|
-
return ((
|
|
690
|
+
title: (u) => {
|
|
691
|
+
var F;
|
|
692
|
+
return ((F = u[0]) == null ? void 0 : F.label) ?? "";
|
|
692
693
|
},
|
|
693
|
-
label: (
|
|
694
|
+
label: (u) => S(u.parsed)
|
|
694
695
|
}
|
|
695
696
|
}
|
|
696
697
|
}
|
|
697
698
|
}));
|
|
698
699
|
function K() {
|
|
699
|
-
|
|
700
|
+
g("botaoAcao");
|
|
700
701
|
}
|
|
701
|
-
const
|
|
702
|
-
return (
|
|
702
|
+
const _ = it;
|
|
703
|
+
return (u, F) => (n(), s("div", {
|
|
703
704
|
ref_key: "cardRef",
|
|
704
|
-
ref:
|
|
705
|
-
class: rt(["card-pizza p-4 flex flex-column",
|
|
706
|
-
style: y(
|
|
705
|
+
ref: j,
|
|
706
|
+
class: rt(["card-pizza p-4 flex flex-column", Z.value]),
|
|
707
|
+
style: y(r(R))
|
|
707
708
|
}, [
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
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", {
|
|
711
712
|
key: 0,
|
|
712
713
|
class: "text-xs font-medium",
|
|
713
|
-
style: y({ color:
|
|
714
|
+
style: y({ color: r(o).text, opacity: 0.95 })
|
|
714
715
|
}, [
|
|
715
|
-
|
|
716
|
-
|
|
716
|
+
C(u.$slots, "legenda", {}, () => [
|
|
717
|
+
O($(t.legenda), 1)
|
|
717
718
|
], !0)
|
|
718
|
-
], 4)) :
|
|
719
|
-
|
|
719
|
+
], 4)) : f("", !0),
|
|
720
|
+
u.$slots.sublegenda || t.sublegenda ? (n(), s("div", {
|
|
720
721
|
key: 1,
|
|
721
722
|
class: "text-xs",
|
|
722
|
-
style: y({ color:
|
|
723
|
+
style: y({ color: r(o).muted })
|
|
723
724
|
}, [
|
|
724
|
-
|
|
725
|
-
|
|
725
|
+
C(u.$slots, "sublegenda", {}, () => [
|
|
726
|
+
O($(t.sublegenda), 1)
|
|
726
727
|
], !0)
|
|
727
|
-
], 4)) :
|
|
728
|
-
])) :
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
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", {
|
|
732
733
|
key: 0,
|
|
733
|
-
class: "
|
|
734
|
-
style: y({ color:
|
|
734
|
+
class: "nc-btn inline-flex align-items-center",
|
|
735
|
+
style: y({ color: r(o).text, borderColor: r(D)(r(o).text, 0.18) }),
|
|
735
736
|
onClick: K
|
|
736
737
|
}, [
|
|
737
|
-
|
|
738
|
-
], 4)) :
|
|
738
|
+
x("span", null, $(t.textoBotao), 1)
|
|
739
|
+
], 4)) : f("", !0)
|
|
739
740
|
], !0),
|
|
740
|
-
t.exportar ? (
|
|
741
|
+
t.exportar ? (n(), s("button", {
|
|
741
742
|
key: 0,
|
|
742
743
|
type: "button",
|
|
743
|
-
class: "
|
|
744
|
-
style: y({ color:
|
|
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) }),
|
|
745
746
|
title: "Exportar como imagem",
|
|
746
747
|
"aria-label": "Exportar como imagem",
|
|
747
|
-
onClick:
|
|
748
|
-
innerHTML:
|
|
749
|
-
}, null, 12, ce)) :
|
|
750
|
-
])) :
|
|
748
|
+
onClick: Q,
|
|
749
|
+
innerHTML: r(_)
|
|
750
|
+
}, null, 12, ce)) : f("", !0)
|
|
751
|
+
])) : f("", !0)
|
|
751
752
|
]),
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
t.mostrarCabecalho ? (
|
|
753
|
+
x("div", de, [
|
|
754
|
+
x("div", ue, [
|
|
755
|
+
t.mostrarCabecalho ? (n(), s("div", {
|
|
755
756
|
key: 0,
|
|
756
|
-
class: "
|
|
757
|
-
style: y({ color:
|
|
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) })
|
|
758
759
|
}, [
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
], 4)) :
|
|
762
|
-
(
|
|
763
|
-
key:
|
|
764
|
-
class: "
|
|
765
|
-
style: y({ color:
|
|
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 })
|
|
766
767
|
}, [
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
class: "
|
|
770
|
-
style: y({ background:
|
|
768
|
+
x("span", pe, [
|
|
769
|
+
x("span", {
|
|
770
|
+
class: "nc-bolinha",
|
|
771
|
+
style: y({ background: T.value[Y] })
|
|
771
772
|
}, null, 4),
|
|
772
|
-
|
|
773
|
+
x("span", null, $(H.rotulo), 1)
|
|
773
774
|
]),
|
|
774
|
-
|
|
775
|
+
x("span", ge, $(r(S)(H.quantidade)), 1)
|
|
775
776
|
], 4))), 128))
|
|
776
777
|
]),
|
|
777
|
-
|
|
778
|
-
|
|
778
|
+
x("div", ye, [
|
|
779
|
+
x("div", me, [
|
|
779
780
|
dt(lt, {
|
|
780
781
|
type: "doughnut",
|
|
781
|
-
data:
|
|
782
|
-
options:
|
|
782
|
+
data: E.value,
|
|
783
|
+
options: I.value,
|
|
783
784
|
height: t.height
|
|
784
785
|
}, null, 8, ["data", "options", "height"]),
|
|
785
|
-
|
|
786
|
-
|
|
786
|
+
u.$slots.titulo || t.titulo || u.$slots.descricao || t.descricao ? (n(), s("div", be, [
|
|
787
|
+
u.$slots.titulo || t.titulo ? (n(), s("div", {
|
|
787
788
|
key: 0,
|
|
788
|
-
class: "
|
|
789
|
-
style: y({ color:
|
|
789
|
+
class: "nc-centro-titulo m-0 font-semibold",
|
|
790
|
+
style: y({ color: r(o).text })
|
|
790
791
|
}, [
|
|
791
|
-
|
|
792
|
-
|
|
792
|
+
C(u.$slots, "titulo", {}, () => [
|
|
793
|
+
O($(t.titulo), 1)
|
|
793
794
|
], !0)
|
|
794
|
-
], 4)) :
|
|
795
|
-
|
|
795
|
+
], 4)) : f("", !0),
|
|
796
|
+
u.$slots.descricao || t.descricao ? (n(), s("div", {
|
|
796
797
|
key: 1,
|
|
797
|
-
class: "
|
|
798
|
-
style: y({ color:
|
|
798
|
+
class: "nc-centro-desc",
|
|
799
|
+
style: y({ color: r(o).muted })
|
|
799
800
|
}, [
|
|
800
|
-
|
|
801
|
-
|
|
801
|
+
C(u.$slots, "descricao", {}, () => [
|
|
802
|
+
O($(t.descricao), 1)
|
|
802
803
|
], !0)
|
|
803
|
-
], 4)) :
|
|
804
|
-
])) :
|
|
804
|
+
], 4)) : f("", !0)
|
|
805
|
+
])) : f("", !0)
|
|
805
806
|
])
|
|
806
807
|
])
|
|
807
808
|
]),
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
])) :
|
|
809
|
+
u.$slots.footer ? (n(), s("div", he, [
|
|
810
|
+
C(u.$slots, "footer", {}, void 0, !0)
|
|
811
|
+
])) : f("", !0)
|
|
811
812
|
], 6));
|
|
812
813
|
}
|
|
813
|
-
}, 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 = {
|
|
814
815
|
key: 0,
|
|
815
|
-
class: "
|
|
816
|
+
class: "nc-legendas-flex flex flex-column"
|
|
816
817
|
}, Be = {
|
|
817
818
|
key: 1,
|
|
818
|
-
class: "
|
|
819
|
+
class: "nc-actions inline-flex align-items-center gap-2"
|
|
819
820
|
}, Ae = ["innerHTML"], Ce = {
|
|
820
821
|
key: 0,
|
|
821
822
|
class: "card-barra__titulos mt-3 mb-2 flex flex-column"
|
|
822
823
|
}, we = { class: "card-barra__chart flex-1" }, Re = {
|
|
823
824
|
key: 0,
|
|
824
825
|
class: "card-barra__footer mt-3"
|
|
825
|
-
},
|
|
826
|
+
}, Ee = {
|
|
826
827
|
__name: "CardBarra",
|
|
827
828
|
props: {
|
|
828
829
|
legenda: { type: String, default: null },
|
|
@@ -884,65 +885,66 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
884
885
|
raioBarra: { type: Number, default: 6 },
|
|
885
886
|
linhasReferencia: { type: [Object, Array], default: null },
|
|
886
887
|
exportar: { type: Boolean, default: !1 },
|
|
887
|
-
nomeArquivoExport: { type: String, default: "card-barra.png" }
|
|
888
|
+
nomeArquivoExport: { type: String, default: "card-barra.png" },
|
|
889
|
+
corHover: { type: String, default: null }
|
|
888
890
|
},
|
|
889
891
|
emits: ["botaoAcao", "exportado"],
|
|
890
|
-
setup(t, { emit:
|
|
891
|
-
const
|
|
892
|
-
async function
|
|
893
|
-
await st(
|
|
894
|
-
nomeArquivo:
|
|
895
|
-
corFundo:
|
|
896
|
-
}),
|
|
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");
|
|
897
899
|
}
|
|
898
|
-
const
|
|
899
|
-
nome:
|
|
900
|
-
cor:
|
|
901
|
-
dados: Array.isArray(
|
|
902
|
-
})) : [{ nome:
|
|
903
|
-
const
|
|
904
|
-
return
|
|
905
|
-
}), K =
|
|
906
|
-
const
|
|
907
|
-
function
|
|
908
|
-
if (!
|
|
909
|
-
const
|
|
910
|
-
return
|
|
911
|
-
topLeft:
|
|
912
|
-
bottomLeft:
|
|
913
|
-
topRight:
|
|
914
|
-
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
|
|
915
917
|
} : {
|
|
916
|
-
bottomLeft:
|
|
917
|
-
bottomRight:
|
|
918
|
-
topLeft:
|
|
919
|
-
topRight:
|
|
918
|
+
bottomLeft: A ? p : 0,
|
|
919
|
+
bottomRight: A ? p : 0,
|
|
920
|
+
topLeft: k ? p : 0,
|
|
921
|
+
topRight: k ? p : 0
|
|
920
922
|
};
|
|
921
923
|
}
|
|
922
924
|
return {
|
|
923
|
-
labels:
|
|
924
|
-
datasets:
|
|
925
|
-
label:
|
|
926
|
-
data:
|
|
927
|
-
backgroundColor:
|
|
928
|
-
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,
|
|
929
931
|
borderWidth: 0,
|
|
930
|
-
borderRadius:
|
|
932
|
+
borderRadius: q(A),
|
|
931
933
|
borderSkipped: !1,
|
|
932
934
|
categoryPercentage: 1,
|
|
933
|
-
barPercentage:
|
|
935
|
+
barPercentage: l
|
|
934
936
|
}))
|
|
935
937
|
};
|
|
936
938
|
});
|
|
937
|
-
function
|
|
938
|
-
|
|
939
|
+
function _(a, m) {
|
|
940
|
+
m ? Object.assign(a.style, {
|
|
939
941
|
top: "-5px",
|
|
940
942
|
bottom: "auto",
|
|
941
943
|
borderTop: "1px solid rgba(15,23,42,.06)",
|
|
942
944
|
borderLeft: "1px solid rgba(15,23,42,.06)",
|
|
943
945
|
borderRight: "none",
|
|
944
946
|
borderBottom: "none"
|
|
945
|
-
}) : Object.assign(
|
|
947
|
+
}) : Object.assign(a.style, {
|
|
946
948
|
bottom: "-5px",
|
|
947
949
|
top: "auto",
|
|
948
950
|
borderRight: "1px solid rgba(15,23,42,.06)",
|
|
@@ -951,60 +953,61 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
951
953
|
borderLeft: "none"
|
|
952
954
|
});
|
|
953
955
|
}
|
|
954
|
-
let
|
|
955
|
-
function
|
|
956
|
-
const { chart:
|
|
957
|
-
if (!
|
|
958
|
-
const
|
|
959
|
-
if (
|
|
960
|
-
|
|
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";
|
|
961
963
|
return;
|
|
962
964
|
}
|
|
963
|
-
const
|
|
965
|
+
const q = l.title || [], B = l.dataPoints || [], A = b.querySelector(".nc-tt__content"), k = B.map((ct) => {
|
|
964
966
|
var xt;
|
|
965
|
-
const ht = ((xt =
|
|
966
|
-
return `<div style="display:flex;align-items:center;gap:6px;margin-top:2px;"><span style="width:6px;height:6px;border-radius:999px;background:${ht};box-shadow:0 0 0 2px ${
|
|
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>`;
|
|
967
969
|
}).join("");
|
|
968
|
-
|
|
969
|
-
const { offsetLeft: V, offsetTop:
|
|
970
|
-
|
|
971
|
-
const
|
|
972
|
-
|
|
973
|
-
const Bt =
|
|
974
|
-
bt.style.left = At + "px",
|
|
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";
|
|
975
977
|
}
|
|
976
|
-
const
|
|
977
|
-
const
|
|
978
|
+
const H = w(() => {
|
|
979
|
+
const a = E.value, m = {
|
|
978
980
|
grid: { display: !1, drawBorder: !1 },
|
|
979
981
|
border: { display: !1 },
|
|
980
|
-
ticks: { color:
|
|
981
|
-
stacked:
|
|
982
|
-
},
|
|
982
|
+
ticks: { color: o.value.muted, font: { size: 10, family: "'Inter', sans-serif" }, padding: 8 },
|
|
983
|
+
stacked: e.empilhado
|
|
984
|
+
}, l = {
|
|
983
985
|
display: !1,
|
|
984
986
|
grid: { display: !1 },
|
|
985
987
|
beginAtZero: !0,
|
|
986
|
-
stacked:
|
|
988
|
+
stacked: e.empilhado,
|
|
989
|
+
suggestedMax: d.value.length ? Math.max(...d.value.map((p) => p.valor)) : void 0
|
|
987
990
|
};
|
|
988
991
|
return {
|
|
989
992
|
responsive: !0,
|
|
990
993
|
maintainAspectRatio: !1,
|
|
991
|
-
indexAxis:
|
|
992
|
-
interaction: { intersect: !1, mode: "index", axis:
|
|
994
|
+
indexAxis: a ? "y" : "x",
|
|
995
|
+
interaction: { intersect: !1, mode: "index", axis: a ? "y" : "x" },
|
|
993
996
|
layout: {
|
|
994
997
|
padding: {
|
|
995
|
-
top:
|
|
996
|
-
right:
|
|
998
|
+
top: d.value.length && !a ? 24 : 12,
|
|
999
|
+
right: a ? 12 : 0,
|
|
997
1000
|
bottom: 0,
|
|
998
|
-
left:
|
|
1001
|
+
left: d.value.length && a ? 60 : 0
|
|
999
1002
|
}
|
|
1000
1003
|
},
|
|
1001
1004
|
plugins: {
|
|
1002
1005
|
legend: {
|
|
1003
|
-
display:
|
|
1006
|
+
display: e.mostrarLegendaSeries && X.value.length > 1,
|
|
1004
1007
|
position: "bottom",
|
|
1005
1008
|
align: "start",
|
|
1006
1009
|
labels: {
|
|
1007
|
-
color:
|
|
1010
|
+
color: o.value.muted,
|
|
1008
1011
|
boxWidth: 8,
|
|
1009
1012
|
boxHeight: 8,
|
|
1010
1013
|
usePointStyle: !0,
|
|
@@ -1015,94 +1018,94 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1015
1018
|
},
|
|
1016
1019
|
tooltip: {
|
|
1017
1020
|
enabled: !1,
|
|
1018
|
-
external:
|
|
1021
|
+
external: F,
|
|
1019
1022
|
callbacks: {
|
|
1020
|
-
title: (
|
|
1021
|
-
var
|
|
1022
|
-
return ((
|
|
1023
|
+
title: (p) => {
|
|
1024
|
+
var b;
|
|
1025
|
+
return ((b = p[0]) == null ? void 0 : b.label) ?? "";
|
|
1023
1026
|
},
|
|
1024
|
-
label: (
|
|
1027
|
+
label: (p) => S(a ? p.parsed.x : p.parsed.y)
|
|
1025
1028
|
}
|
|
1026
1029
|
}
|
|
1027
1030
|
},
|
|
1028
1031
|
scales: {
|
|
1029
|
-
x:
|
|
1030
|
-
y:
|
|
1032
|
+
x: a ? l : m,
|
|
1033
|
+
y: a ? m : l
|
|
1031
1034
|
}
|
|
1032
1035
|
};
|
|
1033
1036
|
});
|
|
1034
|
-
function
|
|
1035
|
-
|
|
1037
|
+
function Y() {
|
|
1038
|
+
g("botaoAcao");
|
|
1036
1039
|
}
|
|
1037
|
-
const
|
|
1038
|
-
valor:
|
|
1039
|
-
rotulo:
|
|
1040
|
-
cor:
|
|
1041
|
-
corRotulo:
|
|
1042
|
-
corTexto:
|
|
1043
|
-
tracejado:
|
|
1044
|
-
espessura:
|
|
1045
|
-
}) : []),
|
|
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 = {
|
|
1046
1049
|
id: "linhaReferencia",
|
|
1047
|
-
afterDatasetsDraw(
|
|
1048
|
-
const
|
|
1049
|
-
if (
|
|
1050
|
-
const { ctx:
|
|
1051
|
-
|
|
1052
|
-
const
|
|
1053
|
-
if (
|
|
1054
|
-
if (
|
|
1055
|
-
|
|
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();
|
|
1056
1059
|
return;
|
|
1057
1060
|
}
|
|
1058
|
-
|
|
1061
|
+
l.moveTo(k, p.top), l.lineTo(k, p.bottom);
|
|
1059
1062
|
} else {
|
|
1060
|
-
if (
|
|
1061
|
-
|
|
1063
|
+
if (k < p.top || k > p.bottom) {
|
|
1064
|
+
l.restore();
|
|
1062
1065
|
return;
|
|
1063
1066
|
}
|
|
1064
|
-
|
|
1067
|
+
l.moveTo(p.left, k), l.lineTo(p.right, k);
|
|
1065
1068
|
}
|
|
1066
|
-
if (
|
|
1067
|
-
|
|
1068
|
-
const V = 8,
|
|
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;
|
|
1069
1072
|
let N, P;
|
|
1070
|
-
|
|
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);
|
|
1071
1074
|
}
|
|
1072
|
-
|
|
1075
|
+
l.restore();
|
|
1073
1076
|
});
|
|
1074
1077
|
},
|
|
1075
|
-
beforeEvent(
|
|
1076
|
-
if (!
|
|
1077
|
-
|
|
1078
|
+
beforeEvent(a, m) {
|
|
1079
|
+
if (!i.length) {
|
|
1080
|
+
u = null;
|
|
1078
1081
|
return;
|
|
1079
1082
|
}
|
|
1080
|
-
const
|
|
1081
|
-
if (!
|
|
1082
|
-
|
|
1083
|
+
const l = m.event;
|
|
1084
|
+
if (!l || l.type === "mouseout" || l.x == null || l.y == null) {
|
|
1085
|
+
u = null;
|
|
1083
1086
|
return;
|
|
1084
1087
|
}
|
|
1085
|
-
const
|
|
1086
|
-
let
|
|
1087
|
-
for (const
|
|
1088
|
-
const
|
|
1089
|
-
|
|
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);
|
|
1090
1093
|
}
|
|
1091
|
-
|
|
1094
|
+
u = b;
|
|
1092
1095
|
},
|
|
1093
|
-
afterEvent(
|
|
1094
|
-
if (!
|
|
1095
|
-
const
|
|
1096
|
-
if (!
|
|
1097
|
-
const
|
|
1098
|
-
if (!
|
|
1099
|
-
let
|
|
1100
|
-
if (!
|
|
1101
|
-
|
|
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");
|
|
1102
1105
|
return;
|
|
1103
1106
|
}
|
|
1104
|
-
const
|
|
1105
|
-
|
|
1107
|
+
const q = u;
|
|
1108
|
+
b || (b = document.createElement("div"), b.className = "nc-tt-linhaRef", Object.assign(b.style, {
|
|
1106
1109
|
position: "absolute",
|
|
1107
1110
|
pointerEvents: "none",
|
|
1108
1111
|
transform: "translate(-50%, calc(-100% - 12px))",
|
|
@@ -1117,119 +1120,119 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1117
1120
|
zIndex: "11",
|
|
1118
1121
|
fontFamily: "'Inter', sans-serif",
|
|
1119
1122
|
textAlign: "left"
|
|
1120
|
-
}),
|
|
1121
|
-
const
|
|
1122
|
-
|
|
1123
|
-
const V =
|
|
1124
|
-
|
|
1125
|
-
const
|
|
1126
|
-
let
|
|
1127
|
-
|
|
1128
|
-
const
|
|
1129
|
-
let
|
|
1130
|
-
const N =
|
|
1131
|
-
|
|
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";
|
|
1132
1135
|
}
|
|
1133
|
-
},
|
|
1134
|
-
return (
|
|
1136
|
+
}, h = w(() => d.value.length ? [c] : []);
|
|
1137
|
+
return (a, m) => (n(), s("div", {
|
|
1135
1138
|
ref_key: "cardRef",
|
|
1136
|
-
ref:
|
|
1137
|
-
class: rt(["card-barra p-4 flex",
|
|
1138
|
-
style: y(
|
|
1139
|
+
ref: j,
|
|
1140
|
+
class: rt(["card-barra p-4 flex", T.value]),
|
|
1141
|
+
style: y(r(R))
|
|
1139
1142
|
}, [
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
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", {
|
|
1144
1147
|
key: 0,
|
|
1145
1148
|
class: "text-xs font-medium",
|
|
1146
|
-
style: y({ color:
|
|
1149
|
+
style: y({ color: r(o).text, opacity: 0.85 })
|
|
1147
1150
|
}, [
|
|
1148
|
-
|
|
1149
|
-
|
|
1151
|
+
C(a.$slots, "legenda", {}, () => [
|
|
1152
|
+
O($(t.legenda), 1)
|
|
1150
1153
|
], !0)
|
|
1151
|
-
], 4)) :
|
|
1152
|
-
|
|
1154
|
+
], 4)) : f("", !0),
|
|
1155
|
+
a.$slots.sublegenda || t.sublegenda ? (n(), s("div", {
|
|
1153
1156
|
key: 1,
|
|
1154
1157
|
class: "text-xs",
|
|
1155
|
-
style: y({ color:
|
|
1158
|
+
style: y({ color: r(o).muted })
|
|
1156
1159
|
}, [
|
|
1157
|
-
|
|
1158
|
-
|
|
1160
|
+
C(a.$slots, "sublegenda", {}, () => [
|
|
1161
|
+
O($(t.sublegenda), 1)
|
|
1159
1162
|
], !0)
|
|
1160
|
-
], 4)) :
|
|
1161
|
-
])) :
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
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", {
|
|
1165
1168
|
key: 0,
|
|
1166
|
-
class: "
|
|
1167
|
-
style: y({ color:
|
|
1168
|
-
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
|
|
1169
1172
|
}, [
|
|
1170
|
-
|
|
1171
|
-
], 4)) :
|
|
1173
|
+
x("span", null, $(t.textoBotao), 1)
|
|
1174
|
+
], 4)) : f("", !0)
|
|
1172
1175
|
], !0),
|
|
1173
|
-
t.exportar ? (
|
|
1176
|
+
t.exportar ? (n(), s("button", {
|
|
1174
1177
|
key: 0,
|
|
1175
1178
|
type: "button",
|
|
1176
|
-
class: "
|
|
1177
|
-
style: y({ color:
|
|
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) }),
|
|
1178
1181
|
title: "Exportar como imagem",
|
|
1179
1182
|
"aria-label": "Exportar como imagem",
|
|
1180
|
-
onClick:
|
|
1181
|
-
innerHTML:
|
|
1182
|
-
}, null, 12, Ae)) :
|
|
1183
|
-
])) :
|
|
1183
|
+
onClick: Z,
|
|
1184
|
+
innerHTML: r(Q)
|
|
1185
|
+
}, null, 12, Ae)) : f("", !0)
|
|
1186
|
+
])) : f("", !0)
|
|
1184
1187
|
]),
|
|
1185
|
-
|
|
1186
|
-
|
|
1188
|
+
a.$slots.titulo || t.titulo || a.$slots.descricao || t.descricao ? (n(), s("div", Ce, [
|
|
1189
|
+
a.$slots.titulo || t.titulo ? (n(), s("div", {
|
|
1187
1190
|
key: 0,
|
|
1188
1191
|
class: "m-0 text-3xl font-semibold",
|
|
1189
|
-
style: y({ color:
|
|
1192
|
+
style: y({ color: r(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
1190
1193
|
}, [
|
|
1191
|
-
|
|
1192
|
-
|
|
1194
|
+
C(a.$slots, "titulo", {}, () => [
|
|
1195
|
+
O($(t.titulo), 1)
|
|
1193
1196
|
], !0)
|
|
1194
|
-
], 4)) :
|
|
1195
|
-
|
|
1197
|
+
], 4)) : f("", !0),
|
|
1198
|
+
a.$slots.descricao || t.descricao ? (n(), s("div", {
|
|
1196
1199
|
key: 1,
|
|
1197
1200
|
class: "text-sm mt-1",
|
|
1198
|
-
style: y({ color:
|
|
1201
|
+
style: y({ color: r(o).muted })
|
|
1199
1202
|
}, [
|
|
1200
|
-
|
|
1201
|
-
|
|
1203
|
+
C(a.$slots, "descricao", {}, () => [
|
|
1204
|
+
O($(t.descricao), 1)
|
|
1202
1205
|
], !0)
|
|
1203
|
-
], 4)) :
|
|
1204
|
-
])) :
|
|
1206
|
+
], 4)) : f("", !0)
|
|
1207
|
+
])) : f("", !0)
|
|
1205
1208
|
]),
|
|
1206
|
-
|
|
1209
|
+
x("div", we, [
|
|
1207
1210
|
dt(lt, {
|
|
1208
1211
|
type: "bar",
|
|
1209
1212
|
data: K.value,
|
|
1210
|
-
options:
|
|
1211
|
-
plugins:
|
|
1213
|
+
options: H.value,
|
|
1214
|
+
plugins: h.value,
|
|
1212
1215
|
height: t.height
|
|
1213
1216
|
}, null, 8, ["data", "options", "plugins", "height"])
|
|
1214
1217
|
]),
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
])) :
|
|
1218
|
+
a.$slots.footer ? (n(), s("div", Re, [
|
|
1219
|
+
C(a.$slots, "footer", {}, void 0, !0)
|
|
1220
|
+
])) : f("", !0)
|
|
1218
1221
|
], 6));
|
|
1219
1222
|
}
|
|
1220
|
-
},
|
|
1223
|
+
}, Fe = /* @__PURE__ */ et(Ee, [["__scopeId", "data-v-6c196222"]]), Te = { class: "card-polar__topo flex align-items-start justify-content-between gap-3" }, qe = {
|
|
1221
1224
|
key: 0,
|
|
1222
|
-
class: "
|
|
1223
|
-
},
|
|
1225
|
+
class: "nc-legendas-flex flex flex-column"
|
|
1226
|
+
}, Le = {
|
|
1224
1227
|
key: 1,
|
|
1225
|
-
class: "
|
|
1226
|
-
},
|
|
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 = {
|
|
1227
1230
|
key: 0,
|
|
1228
1231
|
class: "card-polar__centro-bottom"
|
|
1229
|
-
},
|
|
1232
|
+
}, We = {
|
|
1230
1233
|
key: 0,
|
|
1231
1234
|
class: "card-polar__footer mt-3"
|
|
1232
|
-
},
|
|
1235
|
+
}, Ie = {
|
|
1233
1236
|
__name: "CardPolar",
|
|
1234
1237
|
props: {
|
|
1235
1238
|
legenda: { type: String, default: null },
|
|
@@ -1281,46 +1284,46 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1281
1284
|
nomeArquivoExport: { type: String, default: "card-polar.png" }
|
|
1282
1285
|
},
|
|
1283
1286
|
emits: ["botaoAcao", "exportado"],
|
|
1284
|
-
setup(t, { emit:
|
|
1285
|
-
const
|
|
1286
|
-
async function
|
|
1287
|
-
await st(
|
|
1288
|
-
nomeArquivo:
|
|
1289
|
-
corFundo:
|
|
1290
|
-
}),
|
|
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");
|
|
1291
1294
|
}
|
|
1292
|
-
const
|
|
1293
|
-
() =>
|
|
1294
|
-
),
|
|
1295
|
-
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),
|
|
1296
1299
|
datasets: [
|
|
1297
1300
|
{
|
|
1298
|
-
data:
|
|
1299
|
-
backgroundColor:
|
|
1300
|
-
borderColor:
|
|
1301
|
+
data: e.data.map((u) => u.quantidade),
|
|
1302
|
+
backgroundColor: E.value,
|
|
1303
|
+
borderColor: E.value,
|
|
1301
1304
|
borderWidth: 0,
|
|
1302
1305
|
hoverOffset: 6
|
|
1303
1306
|
}
|
|
1304
1307
|
]
|
|
1305
1308
|
}));
|
|
1306
|
-
function
|
|
1307
|
-
const { chart:
|
|
1308
|
-
if (!
|
|
1309
|
-
const
|
|
1310
|
-
if (
|
|
1311
|
-
|
|
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";
|
|
1312
1315
|
return;
|
|
1313
1316
|
}
|
|
1314
|
-
const
|
|
1315
|
-
|
|
1316
|
-
const { offsetLeft:
|
|
1317
|
-
|
|
1318
|
-
const
|
|
1319
|
-
let
|
|
1320
|
-
const V =
|
|
1321
|
-
|
|
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";
|
|
1322
1325
|
}
|
|
1323
|
-
const K =
|
|
1326
|
+
const K = w(() => ({
|
|
1324
1327
|
responsive: !0,
|
|
1325
1328
|
maintainAspectRatio: !1,
|
|
1326
1329
|
layout: { padding: 4 },
|
|
@@ -1329,12 +1332,12 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1329
1332
|
beginAtZero: !0,
|
|
1330
1333
|
ticks: { display: !1, backdropColor: "transparent" },
|
|
1331
1334
|
grid: {
|
|
1332
|
-
display:
|
|
1333
|
-
color:
|
|
1335
|
+
display: e.mostrarLinhasGrade,
|
|
1336
|
+
color: D(o.value.muted, 0.18)
|
|
1334
1337
|
},
|
|
1335
1338
|
angleLines: {
|
|
1336
|
-
display:
|
|
1337
|
-
color:
|
|
1339
|
+
display: e.mostrarLinhasGrade,
|
|
1340
|
+
color: D(o.value.muted, 0.18)
|
|
1338
1341
|
},
|
|
1339
1342
|
pointLabels: { display: !1 }
|
|
1340
1343
|
}
|
|
@@ -1343,150 +1346,150 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1343
1346
|
legend: { display: !1 },
|
|
1344
1347
|
tooltip: {
|
|
1345
1348
|
enabled: !1,
|
|
1346
|
-
external:
|
|
1349
|
+
external: I,
|
|
1347
1350
|
callbacks: {
|
|
1348
|
-
title: (
|
|
1349
|
-
var
|
|
1350
|
-
return ((
|
|
1351
|
+
title: (u) => {
|
|
1352
|
+
var F;
|
|
1353
|
+
return ((F = u[0]) == null ? void 0 : F.label) ?? "";
|
|
1351
1354
|
},
|
|
1352
|
-
label: (
|
|
1353
|
-
var
|
|
1354
|
-
return
|
|
1355
|
+
label: (u) => {
|
|
1356
|
+
var F;
|
|
1357
|
+
return S(((F = u.parsed) == null ? void 0 : F.r) ?? u.parsed);
|
|
1355
1358
|
}
|
|
1356
1359
|
}
|
|
1357
1360
|
}
|
|
1358
1361
|
}
|
|
1359
1362
|
}));
|
|
1360
|
-
function
|
|
1361
|
-
|
|
1363
|
+
function _() {
|
|
1364
|
+
g("botaoAcao");
|
|
1362
1365
|
}
|
|
1363
|
-
return (
|
|
1366
|
+
return (u, F) => (n(), s("div", {
|
|
1364
1367
|
ref_key: "cardRef",
|
|
1365
|
-
ref:
|
|
1366
|
-
class: rt(["card-polar p-4 flex flex-column",
|
|
1367
|
-
style: y(
|
|
1368
|
+
ref: j,
|
|
1369
|
+
class: rt(["card-polar p-4 flex flex-column", T.value]),
|
|
1370
|
+
style: y(r(R))
|
|
1368
1371
|
}, [
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
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", {
|
|
1372
1375
|
key: 0,
|
|
1373
1376
|
class: "text-xs font-medium",
|
|
1374
|
-
style: y({ color:
|
|
1377
|
+
style: y({ color: r(o).text, opacity: 0.95 })
|
|
1375
1378
|
}, [
|
|
1376
|
-
|
|
1377
|
-
|
|
1379
|
+
C(u.$slots, "legenda", {}, () => [
|
|
1380
|
+
O($(t.legenda), 1)
|
|
1378
1381
|
], !0)
|
|
1379
|
-
], 4)) :
|
|
1380
|
-
|
|
1382
|
+
], 4)) : f("", !0),
|
|
1383
|
+
u.$slots.sublegenda || t.sublegenda ? (n(), s("div", {
|
|
1381
1384
|
key: 1,
|
|
1382
1385
|
class: "text-xs",
|
|
1383
|
-
style: y({ color:
|
|
1386
|
+
style: y({ color: r(o).muted })
|
|
1384
1387
|
}, [
|
|
1385
|
-
|
|
1386
|
-
|
|
1388
|
+
C(u.$slots, "sublegenda", {}, () => [
|
|
1389
|
+
O($(t.sublegenda), 1)
|
|
1387
1390
|
], !0)
|
|
1388
|
-
], 4)) :
|
|
1389
|
-
])) :
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
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", {
|
|
1393
1396
|
key: 0,
|
|
1394
|
-
class: "
|
|
1395
|
-
style: y({ color:
|
|
1396
|
-
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: _
|
|
1397
1400
|
}, [
|
|
1398
|
-
|
|
1399
|
-
], 4)) :
|
|
1401
|
+
x("span", null, $(t.textoBotao), 1)
|
|
1402
|
+
], 4)) : f("", !0)
|
|
1400
1403
|
], !0),
|
|
1401
|
-
t.exportar ? (
|
|
1404
|
+
t.exportar ? (n(), s("button", {
|
|
1402
1405
|
key: 0,
|
|
1403
1406
|
type: "button",
|
|
1404
|
-
class: "
|
|
1405
|
-
style: y({ color:
|
|
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) }),
|
|
1406
1409
|
title: "Exportar como imagem",
|
|
1407
1410
|
"aria-label": "Exportar como imagem",
|
|
1408
|
-
onClick:
|
|
1409
|
-
innerHTML:
|
|
1410
|
-
}, null, 12,
|
|
1411
|
-
])) :
|
|
1411
|
+
onClick: Z,
|
|
1412
|
+
innerHTML: r(Q)
|
|
1413
|
+
}, null, 12, ze)) : f("", !0)
|
|
1414
|
+
])) : f("", !0)
|
|
1412
1415
|
]),
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
t.mostrarCabecalho ? (
|
|
1416
|
+
x("div", je, [
|
|
1417
|
+
x("div", He, [
|
|
1418
|
+
t.mostrarCabecalho ? (n(), s("div", {
|
|
1416
1419
|
key: 0,
|
|
1417
|
-
class: "
|
|
1418
|
-
style: y({ color:
|
|
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) })
|
|
1419
1422
|
}, [
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
], 4)) :
|
|
1423
|
-
(
|
|
1424
|
-
key:
|
|
1425
|
-
class: "
|
|
1426
|
-
style: y({ color:
|
|
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 })
|
|
1427
1430
|
}, [
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
class: "
|
|
1431
|
-
style: y({ background:
|
|
1431
|
+
x("span", Me, [
|
|
1432
|
+
x("span", {
|
|
1433
|
+
class: "nc-bolinha",
|
|
1434
|
+
style: y({ background: E.value[Y] })
|
|
1432
1435
|
}, null, 4),
|
|
1433
|
-
|
|
1436
|
+
x("span", null, $(H.rotulo), 1)
|
|
1434
1437
|
]),
|
|
1435
|
-
|
|
1438
|
+
x("span", Ne, $(r(S)(H.quantidade)), 1)
|
|
1436
1439
|
], 4))), 128))
|
|
1437
1440
|
]),
|
|
1438
|
-
|
|
1439
|
-
|
|
1441
|
+
x("div", De, [
|
|
1442
|
+
x("div", Pe, [
|
|
1440
1443
|
dt(lt, {
|
|
1441
1444
|
type: "polarArea",
|
|
1442
|
-
data:
|
|
1445
|
+
data: X.value,
|
|
1443
1446
|
options: K.value,
|
|
1444
1447
|
height: t.height
|
|
1445
1448
|
}, null, 8, ["data", "options", "height"]),
|
|
1446
|
-
|
|
1447
|
-
|
|
1449
|
+
u.$slots.titulo || t.titulo || u.$slots.descricao || t.descricao ? (n(), s("div", Oe, [
|
|
1450
|
+
u.$slots.titulo || t.titulo ? (n(), s("div", {
|
|
1448
1451
|
key: 0,
|
|
1449
1452
|
class: "card-polar__centro-titulo m-0 text-3xl font-semibold",
|
|
1450
|
-
style: y({ color:
|
|
1453
|
+
style: y({ color: r(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
1451
1454
|
}, [
|
|
1452
|
-
|
|
1453
|
-
|
|
1455
|
+
C(u.$slots, "titulo", {}, () => [
|
|
1456
|
+
O($(t.titulo), 1)
|
|
1454
1457
|
], !0)
|
|
1455
|
-
], 4)) :
|
|
1456
|
-
|
|
1458
|
+
], 4)) : f("", !0),
|
|
1459
|
+
u.$slots.descricao || t.descricao ? (n(), s("div", {
|
|
1457
1460
|
key: 1,
|
|
1458
1461
|
class: "card-polar__centro-desc",
|
|
1459
|
-
style: y({ color:
|
|
1462
|
+
style: y({ color: r(o).muted })
|
|
1460
1463
|
}, [
|
|
1461
|
-
|
|
1462
|
-
|
|
1464
|
+
C(u.$slots, "descricao", {}, () => [
|
|
1465
|
+
O($(t.descricao), 1)
|
|
1463
1466
|
], !0)
|
|
1464
|
-
], 4)) :
|
|
1465
|
-
])) :
|
|
1467
|
+
], 4)) : f("", !0)
|
|
1468
|
+
])) : f("", !0)
|
|
1466
1469
|
])
|
|
1467
1470
|
])
|
|
1468
1471
|
]),
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
])) :
|
|
1472
|
+
u.$slots.footer ? (n(), s("div", We, [
|
|
1473
|
+
C(u.$slots, "footer", {}, void 0, !0)
|
|
1474
|
+
])) : f("", !0)
|
|
1472
1475
|
], 6));
|
|
1473
1476
|
}
|
|
1474
|
-
},
|
|
1477
|
+
}, Xe = /* @__PURE__ */ et(Ie, [["__scopeId", "data-v-9dc121fd"]]), Ye = { class: "card-progresso__topo flex align-items-start justify-content-between gap-3" }, Je = {
|
|
1475
1478
|
key: 0,
|
|
1476
|
-
class: "
|
|
1477
|
-
},
|
|
1479
|
+
class: "nc-legendas-flex flex flex-column"
|
|
1480
|
+
}, Qe = {
|
|
1478
1481
|
key: 1,
|
|
1479
|
-
class: "
|
|
1480
|
-
},
|
|
1482
|
+
class: "nc-actions inline-flex align-items-center gap-2"
|
|
1483
|
+
}, Ue = ["innerHTML"], Ge = {
|
|
1481
1484
|
key: 0,
|
|
1482
1485
|
class: "card-progresso__titulos mt-3 mb-2 flex flex-column"
|
|
1483
|
-
},
|
|
1486
|
+
}, Ze = { class: "card-progresso__corpo flex align-items-center gap-4 flex-wrap" }, Ke = {
|
|
1484
1487
|
key: 0,
|
|
1485
1488
|
class: "card-progresso__chart-wrap flex align-items-center justify-content-center"
|
|
1486
|
-
},
|
|
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 = {
|
|
1487
1490
|
key: 1,
|
|
1488
1491
|
class: "card-progresso__footer mt-3"
|
|
1489
|
-
},
|
|
1492
|
+
}, ro = {
|
|
1490
1493
|
__name: "CardProgresso",
|
|
1491
1494
|
props: {
|
|
1492
1495
|
legenda: { type: String, default: null },
|
|
@@ -1504,6 +1507,7 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1504
1507
|
default: () => ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#EC4899"]
|
|
1505
1508
|
},
|
|
1506
1509
|
corDetalhes: { type: String, default: "#3B82F6" },
|
|
1510
|
+
corExcesso: { type: String, default: "#EF4444" },
|
|
1507
1511
|
textoBotao: { type: String, default: "Ver mais" },
|
|
1508
1512
|
botaoVisivel: { type: Boolean, default: !1 },
|
|
1509
1513
|
direcao: {
|
|
@@ -1543,31 +1547,41 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1543
1547
|
nomeArquivoExport: { type: String, default: "card-progresso.png" }
|
|
1544
1548
|
},
|
|
1545
1549
|
emits: ["botaoAcao", "exportado"],
|
|
1546
|
-
setup(t, { emit:
|
|
1547
|
-
const
|
|
1548
|
-
async function
|
|
1549
|
-
await st(
|
|
1550
|
-
nomeArquivo:
|
|
1551
|
-
corFundo:
|
|
1552
|
-
}),
|
|
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");
|
|
1553
1557
|
}
|
|
1554
|
-
const
|
|
1555
|
-
() =>
|
|
1556
|
-
const
|
|
1557
|
-
|
|
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 };
|
|
1558
1568
|
})
|
|
1559
|
-
),
|
|
1560
|
-
() => typeof
|
|
1561
|
-
),
|
|
1562
|
-
() => typeof
|
|
1563
|
-
), K =
|
|
1564
|
-
|
|
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;
|
|
1565
1579
|
return {
|
|
1566
1580
|
labels: ["Progresso", "Restante"],
|
|
1567
1581
|
datasets: [
|
|
1568
1582
|
{
|
|
1569
|
-
data: [
|
|
1570
|
-
backgroundColor: [h,
|
|
1583
|
+
data: [i, c],
|
|
1584
|
+
backgroundColor: [h, D(o.value.muted, 0.15)],
|
|
1571
1585
|
borderWidth: 0,
|
|
1572
1586
|
borderColor: "transparent",
|
|
1573
1587
|
hoverOffset: 0,
|
|
@@ -1575,10 +1589,10 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1575
1589
|
}
|
|
1576
1590
|
]
|
|
1577
1591
|
};
|
|
1578
|
-
}),
|
|
1592
|
+
}), Y = w(() => ({
|
|
1579
1593
|
responsive: !0,
|
|
1580
1594
|
maintainAspectRatio: !1,
|
|
1581
|
-
cutout:
|
|
1595
|
+
cutout: e.cutout,
|
|
1582
1596
|
rotation: -90,
|
|
1583
1597
|
circumference: 360,
|
|
1584
1598
|
layout: { padding: 4 },
|
|
@@ -1587,165 +1601,174 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1587
1601
|
tooltip: { enabled: !1 }
|
|
1588
1602
|
}
|
|
1589
1603
|
}));
|
|
1590
|
-
function
|
|
1591
|
-
|
|
1604
|
+
function d() {
|
|
1605
|
+
g("botaoAcao");
|
|
1592
1606
|
}
|
|
1593
|
-
return (
|
|
1607
|
+
return (i, c) => (n(), s("div", {
|
|
1594
1608
|
ref_key: "cardRef",
|
|
1595
|
-
ref:
|
|
1596
|
-
class: rt(["card-progresso p-4 flex flex-column",
|
|
1597
|
-
style: y(
|
|
1609
|
+
ref: j,
|
|
1610
|
+
class: rt(["card-progresso p-4 flex flex-column", T.value]),
|
|
1611
|
+
style: y(r(R))
|
|
1598
1612
|
}, [
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
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", {
|
|
1602
1616
|
key: 0,
|
|
1603
1617
|
class: "text-xs font-medium",
|
|
1604
|
-
style: y({ color:
|
|
1618
|
+
style: y({ color: r(o).text, opacity: 0.95 })
|
|
1605
1619
|
}, [
|
|
1606
|
-
|
|
1607
|
-
|
|
1620
|
+
C(i.$slots, "legenda", {}, () => [
|
|
1621
|
+
O($(t.legenda), 1)
|
|
1608
1622
|
], !0)
|
|
1609
|
-
], 4)) :
|
|
1610
|
-
|
|
1623
|
+
], 4)) : f("", !0),
|
|
1624
|
+
i.$slots.sublegenda || t.sublegenda ? (n(), s("div", {
|
|
1611
1625
|
key: 1,
|
|
1612
1626
|
class: "text-xs",
|
|
1613
|
-
style: y({ color:
|
|
1627
|
+
style: y({ color: r(o).muted })
|
|
1614
1628
|
}, [
|
|
1615
|
-
|
|
1616
|
-
|
|
1629
|
+
C(i.$slots, "sublegenda", {}, () => [
|
|
1630
|
+
O($(t.sublegenda), 1)
|
|
1617
1631
|
], !0)
|
|
1618
|
-
], 4)) :
|
|
1619
|
-
])) :
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
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", {
|
|
1623
1637
|
key: 0,
|
|
1624
|
-
class: "
|
|
1625
|
-
style: y({ color:
|
|
1626
|
-
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
|
|
1627
1641
|
}, [
|
|
1628
|
-
|
|
1629
|
-
], 4)) :
|
|
1642
|
+
x("span", null, $(t.textoBotao), 1)
|
|
1643
|
+
], 4)) : f("", !0)
|
|
1630
1644
|
], !0),
|
|
1631
|
-
t.exportar ? (
|
|
1645
|
+
t.exportar ? (n(), s("button", {
|
|
1632
1646
|
key: 0,
|
|
1633
1647
|
type: "button",
|
|
1634
|
-
class: "
|
|
1635
|
-
style: y({ color:
|
|
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) }),
|
|
1636
1650
|
title: "Exportar como imagem",
|
|
1637
1651
|
"aria-label": "Exportar como imagem",
|
|
1638
|
-
onClick:
|
|
1639
|
-
innerHTML:
|
|
1640
|
-
}, null, 12,
|
|
1641
|
-
])) :
|
|
1652
|
+
onClick: Z,
|
|
1653
|
+
innerHTML: r(Q)
|
|
1654
|
+
}, null, 12, Ue)) : f("", !0)
|
|
1655
|
+
])) : f("", !0)
|
|
1642
1656
|
]),
|
|
1643
|
-
|
|
1644
|
-
|
|
1657
|
+
i.$slots.titulo || t.titulo || i.$slots.descricao || t.descricao ? (n(), s("div", Ge, [
|
|
1658
|
+
i.$slots.titulo || t.titulo ? (n(), s("div", {
|
|
1645
1659
|
key: 0,
|
|
1646
1660
|
class: "m-0 text-3xl font-semibold",
|
|
1647
|
-
style: y({ color:
|
|
1661
|
+
style: y({ color: r(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
1648
1662
|
}, [
|
|
1649
|
-
|
|
1650
|
-
|
|
1663
|
+
C(i.$slots, "titulo", {}, () => [
|
|
1664
|
+
O($(t.titulo), 1)
|
|
1651
1665
|
], !0)
|
|
1652
|
-
], 4)) :
|
|
1653
|
-
|
|
1666
|
+
], 4)) : f("", !0),
|
|
1667
|
+
i.$slots.descricao || t.descricao ? (n(), s("div", {
|
|
1654
1668
|
key: 1,
|
|
1655
1669
|
class: "text-sm mt-1",
|
|
1656
|
-
style: y({ color:
|
|
1670
|
+
style: y({ color: r(o).muted })
|
|
1657
1671
|
}, [
|
|
1658
|
-
|
|
1659
|
-
|
|
1672
|
+
C(i.$slots, "descricao", {}, () => [
|
|
1673
|
+
O($(t.descricao), 1)
|
|
1660
1674
|
], !0)
|
|
1661
|
-
], 4)) :
|
|
1662
|
-
])) :
|
|
1663
|
-
|
|
1664
|
-
t.formato === "circular" ? (
|
|
1665
|
-
|
|
1675
|
+
], 4)) : f("", !0)
|
|
1676
|
+
])) : f("", !0),
|
|
1677
|
+
x("div", Ze, [
|
|
1678
|
+
t.formato === "circular" ? (n(), s("div", Ke, [
|
|
1679
|
+
x("div", _e, [
|
|
1666
1680
|
dt(lt, {
|
|
1667
1681
|
type: "doughnut",
|
|
1668
|
-
data:
|
|
1669
|
-
options:
|
|
1682
|
+
data: H.value,
|
|
1683
|
+
options: Y.value,
|
|
1670
1684
|
height: t.height
|
|
1671
1685
|
}, null, 8, ["data", "options", "height"]),
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
class: "
|
|
1675
|
-
style: y({ color:
|
|
1676
|
-
},
|
|
1677
|
-
|
|
1678
|
-
class: "
|
|
1679
|
-
style: y({ color:
|
|
1680
|
-
},
|
|
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)
|
|
1681
1695
|
])
|
|
1682
1696
|
])
|
|
1683
|
-
])) :
|
|
1684
|
-
|
|
1685
|
-
(
|
|
1686
|
-
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,
|
|
1687
1701
|
class: "card-progresso__item flex flex-column"
|
|
1688
1702
|
}, [
|
|
1689
|
-
|
|
1690
|
-
|
|
1703
|
+
x("div", oo, [
|
|
1704
|
+
x("span", {
|
|
1691
1705
|
class: "card-progresso__item-rotulo inline-flex align-items-center gap-2",
|
|
1692
|
-
style: y({ color:
|
|
1706
|
+
style: y({ color: r(o).text })
|
|
1693
1707
|
}, [
|
|
1694
|
-
|
|
1695
|
-
class: "
|
|
1696
|
-
style: y({ background:
|
|
1708
|
+
x("span", {
|
|
1709
|
+
class: "nc-bolinha",
|
|
1710
|
+
style: y({ background: h.cor })
|
|
1697
1711
|
}, null, 4),
|
|
1698
|
-
|
|
1712
|
+
x("span", null, $(h.rotulo), 1)
|
|
1699
1713
|
], 4),
|
|
1700
|
-
t.mostrarValor || t.mostrarPercentual ? (
|
|
1714
|
+
t.mostrarValor || t.mostrarPercentual ? (n(), s("span", {
|
|
1701
1715
|
key: 0,
|
|
1702
1716
|
class: "card-progresso__item-valor inline-flex align-items-baseline gap-2",
|
|
1703
|
-
style: y({ color:
|
|
1717
|
+
style: y({ color: r(o).text })
|
|
1704
1718
|
}, [
|
|
1705
|
-
t.mostrarValor ? (
|
|
1706
|
-
|
|
1707
|
-
|
|
1719
|
+
t.mostrarValor ? (n(), s(pt, { key: 0 }, [
|
|
1720
|
+
O($(r(S)(h.quantidade)), 1),
|
|
1721
|
+
h.meta ? (n(), s("span", {
|
|
1708
1722
|
key: 0,
|
|
1709
|
-
style: y({ color:
|
|
1710
|
-
}, " / " +
|
|
1711
|
-
|
|
1712
|
-
|
|
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", {
|
|
1713
1732
|
key: 1,
|
|
1714
1733
|
class: "card-progresso__item-pct",
|
|
1715
|
-
style: y({ color:
|
|
1716
|
-
},
|
|
1717
|
-
], 4)) :
|
|
1734
|
+
style: y({ color: h.reducao ? e.corExcesso : r(o).muted })
|
|
1735
|
+
}, $(Math.round(h.percentual)) + "% ", 5)) : f("", !0)
|
|
1736
|
+
], 4)) : f("", !0)
|
|
1718
1737
|
]),
|
|
1719
|
-
|
|
1738
|
+
x("div", {
|
|
1720
1739
|
class: "card-progresso__trilha w-full",
|
|
1721
|
-
style: y({
|
|
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
|
+
})
|
|
1722
1745
|
}, [
|
|
1723
|
-
|
|
1746
|
+
x("div", {
|
|
1724
1747
|
class: "card-progresso__preenchimento",
|
|
1725
|
-
style: y({ width:
|
|
1748
|
+
style: y({ width: h.percentual + "%", background: h.cor, borderRadius: I.value })
|
|
1726
1749
|
}, null, 4)
|
|
1727
1750
|
], 4)
|
|
1728
1751
|
]))), 128))
|
|
1729
1752
|
])
|
|
1730
1753
|
]),
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
])) :
|
|
1754
|
+
i.$slots.footer ? (n(), s("div", ao, [
|
|
1755
|
+
C(i.$slots, "footer", {}, void 0, !0)
|
|
1756
|
+
])) : f("", !0)
|
|
1734
1757
|
], 6));
|
|
1735
1758
|
}
|
|
1736
|
-
},
|
|
1759
|
+
}, lo = /* @__PURE__ */ et(ro, [["__scopeId", "data-v-0183d8c4"]]), no = {
|
|
1737
1760
|
key: 0,
|
|
1738
1761
|
class: "card-base__topo"
|
|
1739
|
-
},
|
|
1762
|
+
}, so = ["innerHTML"], io = { class: "card-base__legendas flex flex-column" }, co = {
|
|
1740
1763
|
key: 1,
|
|
1741
1764
|
class: "card-base__titulos flex flex-column"
|
|
1742
|
-
},
|
|
1765
|
+
}, uo = {
|
|
1743
1766
|
key: 2,
|
|
1744
1767
|
class: "card-base__acao flex"
|
|
1745
|
-
},
|
|
1768
|
+
}, fo = {
|
|
1746
1769
|
key: 3,
|
|
1747
1770
|
class: "card-base__footer"
|
|
1748
|
-
},
|
|
1771
|
+
}, po = {
|
|
1749
1772
|
__name: "CardBase",
|
|
1750
1773
|
props: {
|
|
1751
1774
|
legenda: { type: String, default: null },
|
|
@@ -1769,116 +1792,116 @@ const it = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
|
|
|
1769
1792
|
nomeArquivoExport: { type: String, default: "card-base.png" }
|
|
1770
1793
|
},
|
|
1771
1794
|
emits: ["botaoAcao", "exportado"],
|
|
1772
|
-
setup(t, { emit:
|
|
1773
|
-
const
|
|
1774
|
-
function
|
|
1775
|
-
|
|
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");
|
|
1776
1799
|
}
|
|
1777
|
-
async function
|
|
1778
|
-
await st(
|
|
1779
|
-
nomeArquivo:
|
|
1780
|
-
corFundo:
|
|
1781
|
-
}),
|
|
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");
|
|
1782
1805
|
}
|
|
1783
|
-
return (
|
|
1806
|
+
return (T, E) => (n(), s("div", {
|
|
1784
1807
|
ref_key: "cardRef",
|
|
1785
|
-
ref:
|
|
1808
|
+
ref: S,
|
|
1786
1809
|
class: rt(["card-base p-4 flex flex-column", `card-base--${t.alinhamento}`]),
|
|
1787
|
-
style: y(
|
|
1810
|
+
style: y(r(R))
|
|
1788
1811
|
}, [
|
|
1789
|
-
t.exportar ? (
|
|
1790
|
-
|
|
1812
|
+
t.exportar ? (n(), s("div", no, [
|
|
1813
|
+
x("button", {
|
|
1791
1814
|
type: "button",
|
|
1792
|
-
class: "card-base__exportar inline-flex align-items-center justify-content-center",
|
|
1793
|
-
style: y({ color:
|
|
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) }),
|
|
1794
1817
|
title: "Exportar como imagem",
|
|
1795
1818
|
"aria-label": "Exportar como imagem",
|
|
1796
|
-
onClick:
|
|
1797
|
-
innerHTML:
|
|
1798
|
-
}, null, 12,
|
|
1799
|
-
])) :
|
|
1800
|
-
|
|
1801
|
-
|
|
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", {
|
|
1802
1825
|
key: 0,
|
|
1803
|
-
class: "card-base__legenda text-xs",
|
|
1804
|
-
style: y({ color:
|
|
1826
|
+
class: "card-base__legenda font-medium text-xs",
|
|
1827
|
+
style: y({ color: r(o).text })
|
|
1805
1828
|
}, [
|
|
1806
|
-
|
|
1807
|
-
|
|
1829
|
+
C(T.$slots, "legenda", {}, () => [
|
|
1830
|
+
O($(t.legenda), 1)
|
|
1808
1831
|
], !0)
|
|
1809
|
-
], 4)) :
|
|
1810
|
-
|
|
1832
|
+
], 4)) : f("", !0),
|
|
1833
|
+
T.$slots.sublegenda || t.sublegenda ? (n(), s("div", {
|
|
1811
1834
|
key: 1,
|
|
1812
1835
|
class: "card-base__sublegenda text-xs",
|
|
1813
|
-
style: y({ color:
|
|
1836
|
+
style: y({ color: r(o).muted })
|
|
1814
1837
|
}, [
|
|
1815
|
-
|
|
1816
|
-
|
|
1838
|
+
C(T.$slots, "sublegenda", {}, () => [
|
|
1839
|
+
O($(t.sublegenda), 1)
|
|
1817
1840
|
], !0)
|
|
1818
|
-
], 4)) :
|
|
1841
|
+
], 4)) : f("", !0)
|
|
1819
1842
|
]),
|
|
1820
|
-
|
|
1821
|
-
|
|
1843
|
+
T.$slots.titulo || t.titulo || T.$slots.descricao || t.descricao ? (n(), s("div", co, [
|
|
1844
|
+
T.$slots.titulo || t.titulo ? (n(), s("div", {
|
|
1822
1845
|
key: 0,
|
|
1823
1846
|
class: "card-base__titulo m-0 text-3xl font-semibold",
|
|
1824
|
-
style: y({ color:
|
|
1847
|
+
style: y({ color: r(o).text, lineHeight: "33px", letterSpacing: "-1px" })
|
|
1825
1848
|
}, [
|
|
1826
|
-
|
|
1827
|
-
|
|
1849
|
+
C(T.$slots, "titulo", {}, () => [
|
|
1850
|
+
O($(t.titulo), 1)
|
|
1828
1851
|
], !0)
|
|
1829
|
-
], 4)) :
|
|
1830
|
-
|
|
1852
|
+
], 4)) : f("", !0),
|
|
1853
|
+
T.$slots.descricao || t.descricao ? (n(), s("div", {
|
|
1831
1854
|
key: 1,
|
|
1832
1855
|
class: "text-sm",
|
|
1833
|
-
style: y({ color:
|
|
1856
|
+
style: y({ color: r(o).muted })
|
|
1834
1857
|
}, [
|
|
1835
|
-
|
|
1836
|
-
|
|
1858
|
+
C(T.$slots, "descricao", {}, () => [
|
|
1859
|
+
O($(t.descricao), 1)
|
|
1837
1860
|
], !0)
|
|
1838
|
-
], 4)) :
|
|
1839
|
-
])) :
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
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", {
|
|
1843
1866
|
key: 0,
|
|
1844
1867
|
type: "button",
|
|
1845
1868
|
class: "card-base__link text-xs inline-flex align-items-center",
|
|
1846
|
-
style: y({ color:
|
|
1847
|
-
onClick:
|
|
1869
|
+
style: y({ color: r(o).text }),
|
|
1870
|
+
onClick: Q
|
|
1848
1871
|
}, [
|
|
1849
|
-
|
|
1850
|
-
|
|
1872
|
+
x("span", null, $(t.textoBotao), 1),
|
|
1873
|
+
E[0] || (E[0] = x("span", {
|
|
1851
1874
|
class: "card-base__chevron",
|
|
1852
1875
|
"aria-hidden": "true"
|
|
1853
1876
|
}, "›", -1))
|
|
1854
|
-
], 4)) :
|
|
1877
|
+
], 4)) : f("", !0)
|
|
1855
1878
|
], !0)
|
|
1856
|
-
])) :
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
])) :
|
|
1879
|
+
])) : f("", !0),
|
|
1880
|
+
T.$slots.footer ? (n(), s("div", fo, [
|
|
1881
|
+
C(T.$slots, "footer", {}, void 0, !0)
|
|
1882
|
+
])) : f("", !0)
|
|
1860
1883
|
], 6));
|
|
1861
1884
|
}
|
|
1862
|
-
},
|
|
1885
|
+
}, go = /* @__PURE__ */ et(po, [["__scopeId", "data-v-95d52049"]]), bo = {
|
|
1863
1886
|
install(t) {
|
|
1864
|
-
t.component("ChartBase", lt), t.component("CardBase",
|
|
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);
|
|
1865
1888
|
}
|
|
1866
1889
|
};
|
|
1867
1890
|
export {
|
|
1868
|
-
|
|
1869
|
-
|
|
1891
|
+
Fe as CardBarra,
|
|
1892
|
+
go as CardBase,
|
|
1870
1893
|
le as CardLinhas,
|
|
1871
1894
|
ve as CardPizza,
|
|
1872
|
-
|
|
1873
|
-
|
|
1895
|
+
Xe as CardPolar,
|
|
1896
|
+
lo as CardProgresso,
|
|
1874
1897
|
lt as ChartBase,
|
|
1875
1898
|
it as ICONE_EXPORTAR_SVG,
|
|
1876
|
-
|
|
1899
|
+
at as clampHorizontal,
|
|
1877
1900
|
gt as criarTooltipEl,
|
|
1878
|
-
|
|
1901
|
+
bo as default,
|
|
1879
1902
|
st as exportarElementoComoImagem,
|
|
1880
|
-
|
|
1881
|
-
|
|
1903
|
+
ot as prepararTooltipParent,
|
|
1904
|
+
D as toRgba,
|
|
1882
1905
|
ut as useFormatadorValor,
|
|
1883
1906
|
nt as useTema
|
|
1884
1907
|
};
|