@topvisor/ui
Version:
Topvisor UI-kit Vue
181 lines (178 loc) • 6.51 kB
JavaScript
import { Core as _autoloadCSSCore } from '../core/app.js';
const fileNames = ['../assets/charts.css'].map(fileName => import.meta.resolve(fileName));
_autoloadCSSCore.insertCSSLinkToPage(fileNames, true);
import { defineComponent as T, mergeModels as $, useModel as B, computed as h, createElementBlock as i, openBlock as a, normalizeClass as f, createElementVNode as r, createCommentVNode as w, toDisplayString as g, Fragment as H, renderList as I, normalizeStyle as L, unref as E, ref as _, watch as V, onMounted as F, onUnmounted as P, renderSlot as R, createBlock as z, Teleport as G } from "vue";
import { e as N } from "../.chunks/forms-EIQ_3SBd.es.js";
import { percentOfNumber as k } from "../utils/number.js";
const O = 90, D = 10, X = ["data-top-icon"], A = { class: "top-miniChart_chart" }, U = ["onMouseenter"], W = { class: "top-miniChart_data" }, Y = { class: "top-miniChart_dataValue" }, j = ["innerHTML"], x = /* @__PURE__ */ T({
__name: "miniChart",
props: /* @__PURE__ */ $({
title: {},
gIcon: {},
color: { default: "blue" },
dates: {},
values: {},
activeDates: {},
keysForDyn: {},
dynamic: {},
isInvert: { type: Boolean },
numberCols: { default: O },
additionalHTML: {},
modelValue: {},
valueSuffix: {},
hideChartInMobile: { type: Boolean }
}, {
modelValue: {},
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(p) {
const t = p, d = B(p, "modelValue"), u = (e) => {
let l = c.value;
t.isInvert && (e -= 1, l -= 1);
let n = l > 0 ? Math.round(e / l * (100 - D)) : 0;
return t.isInvert ? 100 - n : n + D;
}, C = (e) => t.activeDates.includes(e), c = h(() => Math.max(...t.values)), m = h(() => t.dates.slice().reverse()), y = h(() => t.dates.length ? t.numberCols - t.dates.length : 0), M = () => {
d.value = null;
}, s = (e, l, n) => {
e.target instanceof HTMLElement && (d.value = {
elCol: e.target,
date: N(l),
value: n === null ? "--" : n + (t.valueSuffix ?? "")
});
}, o = h(() => {
let e = t.dynamic;
if (typeof e > "u") {
const n = t.values[t.keysForDyn.start];
e = t.values[t.keysForDyn.end] - n;
}
return (e < 0 ? -1 : 1) * k(Math.abs(e));
}), v = h(() => {
let e = "stay";
return t.isInvert ? (o.value > 0 && (e = "down"), o.value < 0 && (e = "up")) : (o.value > 0 && (e = "up"), o.value < 0 && (e = "down")), e;
});
return (e, l) => (a(), i("div", {
class: f({
"top-miniChart": !0,
"top-miniChart_hideChartInMobile": e.hideChartInMobile,
[`top-color_${e.color}`]: !0
})
}, [
r("div", {
class: "top-miniChart_title top-ellipsis",
"data-top-icon": e.gIcon
}, g(e.title), 9, X),
r("div", A, [
r("div", {
class: "top-miniChart_chartGrid",
onMouseleave: l[1] || (l[1] = (n) => M())
}, [
(a(!0), i(H, null, I(m.value, (n, b) => (a(), i("div", {
class: f({
"top-miniChart_chartGridCol": !0,
"top-active": C(n)
}),
onMouseenter: (S) => s(S, n, e.values[e.values.length - b - 1])
}, [
r("div", {
style: L("height:" + u(e.values[e.values.length - b - 1]) + "%")
}, null, 4)
], 42, U))), 256)),
(a(!0), i(H, null, I(y.value, () => (a(), i("div", {
class: "top-miniChart_chartGridCol top-miniChart_chartGridCol-none",
onMouseenter: l[0] || (l[0] = (n) => M())
}, [...l[2] || (l[2] = [
r("div", null, null, -1)
])], 32))), 256))
], 32)
]),
r("div", W, [
r("span", {
class: f({
"top-miniChart_dataDynamic": !0,
[`top-miniChart_dataDynamic-direction_${v.value}`]: !0
})
}, g(Math.abs(o.value) || ""), 3),
r("span", Y, g(E(k)(e.values[e.values.length - 1]) || 0), 1)
]),
e.additionalHTML ? (a(), i("div", {
key: 0,
innerHTML: e.additionalHTML
}, null, 8, j)) : w("", !0)
], 2));
}
}), q = {
key: 0,
class: "top-miniCharts_pages"
}, J = ["onClick"], ee = /* @__PURE__ */ T({
__name: "miniCharts",
props: /* @__PURE__ */ $({
modelValue: {},
countCharts: {},
hideChartInMobile: { type: Boolean }
}, {
modelValue: {},
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(p) {
const t = p, d = B(p, "modelValue"), u = _(null);
let C;
const c = _(1), m = _(1), y = () => {
c.value = Math.round(u.value.scrollHeight / u.value.clientHeight);
};
V(c, () => {
c.value < m.value && (m.value = 1);
}), V(
() => t.countCharts,
() => y(),
{ flush: "post" }
);
const M = h(() => {
if (!d.value) return {};
const s = d.value.elCol.getBoundingClientRect(), o = {
top: s.bottom + window.scrollY + "px"
};
return document.documentElement.clientWidth / 2 > s.right ? o.left = s.right + window.scrollX + 10 + "px" : (o.left = s.left + window.scrollX - 10 + "px", o.transform = "translate(-100%, 0)"), o;
});
return F(() => {
C = new ResizeObserver(() => y()), C.observe(u.value), V(m, () => {
const v = (u.value.children[0].clientHeight + parseInt(window.getComputedStyle(u.value).getPropertyValue("row-gap"))) * (m.value - 1);
u.value.scrollTo({ top: v, behavior: "smooth" });
});
}), P(() => {
C.disconnect();
}), (s, o) => (a(), i("div", {
class: f(["top-miniCharts", {
"top-miniCharts": !0,
scrollable: c.value > 1,
"top-miniCharts_hideChartInMobile": s.hideChartInMobile
}]),
ref_key: "elRef",
ref: u
}, [
R(s.$slots, "default"),
c.value > 1 ? (a(), i("div", q, [
(a(!0), i(H, null, I(c.value, (v) => (a(), i("span", {
class: f({ "top-active": v === m.value }),
onClick: (e) => m.value = v
}, null, 10, J))), 256))
])) : w("", !0),
(a(), z(G, { to: "body" }, [
d.value ? (a(), i("div", {
key: 0,
class: "top-miniCharts_tooltip",
style: L(M.value)
}, [
r("span", null, g(d.value.date), 1),
r("span", null, g(d.value.value), 1)
], 4)) : w("", !0)
]))
], 2));
}
});
export {
x as TopMiniChart,
ee as TopMiniCharts
};
//# sourceMappingURL=charts.js.map