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