import { computed as s, defineComponent as G, useModel as U, ref as p, resolveComponent as F, createElementBlock as L, openBlock as w, Fragment as E, renderSlot as K, createVNode as z, normalizeStyle as O, unref as o, createElementVNode as P, toDisplayString as le, withCtx as $, createBlock as V, createCommentVNode as J, normalizeClass as de, h as Xe, renderList as Je, mergeModels as xt, watch as ue, onMounted as Ct, onUnmounted as _t, resolveDynamicComponent as St, withDirectives as kt, vShow as Ft } from "vue";
import { W as r, v as ce, R as Tt, g as Dt, d as Rt, q as Lt } from "./v4-C5fRBp_c.js";
import { u as _e, b as Ke, a as Se } from "./global-loader-CbmVhJAK.js";
import { d as Ye } from "./index-BWqDfeY6.js";
import { storeToRefs as ve } from "pinia";
import { _ as Pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
import { r as ee } from "./i18n-Cif1I9J2.js";
import { _ as qe } from "./NoData.vue_vue_type_script_setup_true_lang-CdFXBqlX.js";
import { useBreakpoints as zt, useSnackbar as Bt } from "@feedmepos/ui-library";
var ge = /* @__PURE__ */ ((e) => (e.line = "LINE", e.bar = "BAR", e))(ge || {}), H = /* @__PURE__ */ ((e) => (e.top = "TOP", e.bottom = "BOTTOM", e))(H || {}), ye = /* @__PURE__ */ ((e) => (e.start = "start", e.center = "center", e.end = "end", e))(ye || {}), be = /* @__PURE__ */ ((e) => (e.start = "start", e.center = "center", e.end = "end", e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(be || {}), we = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e))(we || {}), xe = /* @__PURE__ */ ((e) => (e.right = "right", e.left = "left", e))(xe || {}), Ce = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.right = "right", e.left = "left", e.chartArea = "chartArea", e))(Ce || {});
r.Circular, r.Table, r.BarChart, r.LineChart, r.StackBarChart, r.StackLineChart, r.Scorecard, r.Spacer;
const Vt = [
  {
    type: r.Circular,
    showLabel: !1,
    // TODO: temporarily removed show label as it has no function
    showDrillDimension: !0,
    showRollup: !1,
    showSearchBar: !1
  },
  {
    type: r.Table,
    showLabel: !1,
    showDrillDimension: !0,
    showRollup: !0,
    showSearchBar: !0
  },
  {
    type: r.BarChart,
    showLabel: !1,
    // TODO: temporarily removed show label as it has no function
    showDrillDimension: !0,
    showRollup: !1,
    showSearchBar: !1
  },
  {
    type: r.LineChart,
    showLabel: !1,
    // TODO: temporarily removed show label as it has no function
    showDrillDimension: !0,
    showRollup: !0,
    showSearchBar: !1
  },
  {
    type: r.StackBarChart,
    showLabel: !1,
    // TODO: temporarily removed show label as it has no function
    showDrillDimension: !0,
    showRollup: !0,
    showSearchBar: !1
  },
  {
    type: r.StackLineChart,
    showLabel: !1,
    // TODO: temporarily removed show label as it has no function
    showDrillDimension: !0,
    showRollup: !0,
    showSearchBar: !1
  },
  {
    type: r.Scorecard,
    showLabel: !1,
    showDrillDimension: !1,
    showRollup: !1,
    showSearchBar: !1
  },
  {
    type: r.Spacer,
    showLabel: !1,
    showDrillDimension: !1,
    showRollup: !1,
    showSearchBar: !1
  }
];
function fe(e) {
  const a = [e.schemaName, e.name];
  return "option" in e && e.option && a.push(e.option), "aggregation" in e && e.aggregation && a.push(e.aggregation), a.push(e.label.replace(/[^a-zA-Z0-9]/g, "")), a.join("_").toLowerCase();
}
function $t(e, a) {
  switch (e) {
    case r.BarChart:
    case r.LineChart:
    case r.StackBarChart:
    case r.StackLineChart:
      return Array.isArray(a == null ? void 0 : a.datasets) && Array.isArray(a == null ? void 0 : a.xAxis) && a.datasets.length > 0 && a.xAxis.length > 0;
    case r.Table:
      return Array.isArray(a == null ? void 0 : a.rows) && Array.isArray(a == null ? void 0 : a.columns) && a.rows.length > 0 && a.columns.length > 0;
    case r.Circular:
      return Array.isArray(a == null ? void 0 : a.datasets) && a.datasets.length > 0;
    case r.Scorecard:
      return !0;
    case r.Spacer:
      return !0;
  }
}
const je = [
  "54, 162, 235",
  //8CE6D7
  "0, 123, 167",
  //007BA7
  "255, 93, 83",
  //FF5D53
  "115, 200, 230",
  //73C8E6
  "252, 162, 62",
  //FCA23E
  "240, 155, 190",
  //F09BBE
  "255, 210, 50",
  //FFD232
  "80, 190, 155",
  //50BE9B
  "131, 88, 212",
  //8358D4
  "155, 80, 70"
  //9B5046
];
function oe({
  index: e,
  isCompare: a,
  opacity: c
}) {
  let t = typeof c == "number" ? c : 1;
  return a && (t = t * 0.6), `rgba(${je[e % je.length]}, ${t})`;
}
function Qe(e, a, c) {
  if (e === "" || a === "")
    return null;
  let t = (i) => i == null ? void 0 : i.replace(/,/g, "");
  c === "ID" && (t = (i) => i == null ? void 0 : i.replace(/\./g, "").replace(/,/g, "."));
  const x = Number(t(e)), y = Number(t(a));
  if (isNaN(x) || isNaN(y))
    return null;
  let v = 0;
  y === 0 ? x === 0 ? v = 0 : v = 1 : v = (x - y) / y;
  const d = At(v);
  return {
    value: isNaN(v) ? "" : `${(v * 100).toFixed(0)}%`,
    icon: d
  };
}
function At(e) {
  return e > 0 ? {
    name: "moving",
    color: "#1F7735",
    tailwind: "fm-color-system-success-100"
  } : e < 0 ? {
    name: "trending_down",
    color: "#99231D",
    tailwind: "fm-color-system-error-100"
  } : {
    name: "equal",
    color: "#C7C7CC",
    tailwind: "fm-color-neutral-gray-100"
  };
}
function ne(e) {
  const a = s(() => ({
    display: e.showLabel,
    align: e.labelAlign,
    anchor: e.labelAnchor,
    rotation: e.labelRotation,
    offset: e.labelOffset,
    font: {
      size: e.labelFontSize
    }
  })), c = s(() => ({
    display: e.showX,
    position: e.xPosition,
    grid: {
      display: e.showXGrid
    },
    ticks: {
      display: e.showXTick,
      font: {
        size: e.xTickFontSize
      }
    }
  })), t = s(() => ({
    display: e.showY,
    position: e.yPosition,
    grid: {
      display: e.showYGrid
    },
    ticks: {
      display: e.showYTick,
      font: {
        size: e.yTickFontSize
      }
    }
  })), x = s(() => ({
    display: e.showLegend,
    position: e.legendPosition,
    usePointStyle: e.usePointStyle
  })), y = s(() => e.isTransposed), v = s(() => e.chartWidth), d = s(() => e.chartHeight);
  return { datalabels: a, xCfg: c, yCfg: t, isTransposed: y, legend: x, chartWidth: v, chartHeight: d };
}
const Wt = /* @__PURE__ */ G({
  __name: "WidgetBarchart",
  props: {
    modelValue: { required: !0 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(e) {
    const a = U(e, "modelValue"), c = s(() => {
      var m;
      return ((m = a.value.data) == null ? void 0 : m.xAxis) ?? [];
    }), t = s(() => {
      var m;
      return ((m = a.value.data) == null ? void 0 : m.datasets) ?? [];
    }), x = p(null), { datalabels: y, xCfg: v, yCfg: d, isTransposed: i, legend: g, chartWidth: C, chartHeight: h } = ne(
      a.value
    ), u = s(() => t.value.length > 0 ? [
      ...t.value.map((m, _) => ({
        label: m.name,
        data: m.values,
        dash: !!m.isCompare,
        backgroundColor: oe({ index: _, isCompare: m.isCompare })
      }))
    ] : []);
    return (m, _) => {
      const B = F("FmBarChart");
      return w(), L(E, null, [
        K(m.$slots, "menu"),
        z(B, {
          ref_key: "chartRef",
          ref: x,
          class: "bar-chart",
          datasets: u.value,
          "x-axis": { categories: c.value },
          "x-cfg": o(v),
          "y-cfg": o(d),
          transpose: o(i),
          legend: {
            display: o(g).display ?? !1,
            position: o(g).position,
            labels: {
              usePointStyle: o(g).usePointStyle ?? !0
            }
          },
          datalabels: o(y),
          "maintain-aspect-ratio": !1,
          style: O({
            "--chart-width": o(C) !== void 0 ? o(C) + "px" : "100%",
            "--chart-height": o(h) !== void 0 ? o(h) + "px" : "calc(100% - 36px)"
          })
        }, null, 8, ["datasets", "x-axis", "x-cfg", "y-cfg", "transpose", "legend", "datalabels", "style"])
      ], 64);
    };
  }
}), It = /* @__PURE__ */ G({
  __name: "WidgetCircular",
  props: {
    modelValue: { required: !0 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(e) {
    const a = U(e, "modelValue"), { datalabels: c, legend: t, chartWidth: x, chartHeight: y } = ne(a.value), v = s(() => {
      let d = [];
      return a.value.data.datasets && a.value.data.metrics && a.value.data.datasets.length > 0 && a.value.data.metrics.length > 0 && (d = [
        {
          label: a.value.data.metrics[0],
          data: a.value.data.datasets.map((i) => i.value),
          backgroundColor: a.value.data.datasets.map((i, g) => oe({ index: g }))
        }
      ]), d;
    });
    return (d, i) => {
      const g = F("FmPieChart");
      return w(), L(E, null, [
        K(d.$slots, "menu"),
        z(g, {
          class: "circular",
          percentage: "70%",
          datasets: v.value,
          metrics: a.value.data.datasets.map((C) => C.name),
          variant: "doughnut",
          legend: {
            display: o(t).display ?? !0,
            position: o(t).position ?? "top",
            maxHeight: o(t).display === !0 ? void 0 : 54,
            labels: {
              usePointStyle: o(t).usePointStyle ?? !0
            }
          },
          datalabels: o(c),
          "maintain-aspect-ratio": !1,
          style: O({
            "--chart-width": o(x) !== void 0 ? o(x) + "px" : "100%",
            "--chart-height": o(y) !== void 0 ? o(y) + "px" : "calc(100% - 36px)"
          })
        }, null, 8, ["datasets", "metrics", "legend", "datalabels", "style"])
      ], 64);
    };
  }
}), Mt = { class: "flex flex-col gap-1" }, Ht = { class: "fm-typo-en-title-sm-600" }, Nt = { class: "flex gap-2" }, Et = { key: 0 }, Ot = { key: 1 }, Gt = /* @__PURE__ */ G({
  __name: "WidgetScorecard",
  props: {
    modelValue: { required: !0 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(e) {
    const a = U(e, "modelValue"), { t: c } = _e(), { compareDateRange: t, defaultDateSetting: x } = ve(Ke()), { country: y } = Se(), v = s(() => {
      var h;
      return ((h = a.value.data) == null ? void 0 : h.value) || "";
    }), d = s(() => {
      const { data: h } = a.value;
      return h != null && h.comparison ? Qe(v.value, h.comparison, y) : null;
    });
    function i(h) {
      switch (h) {
        case ge.bar:
          return "bar";
        case ge.line:
          return "line";
        default:
          return "line";
      }
    }
    const g = s(() => {
      var h;
      return (h = a.value.data) == null ? void 0 : h.sparkline;
    }), C = s(() => g.value.datasets.map((h) => ({
      label: h.name,
      data: h.values,
      fill: !0,
      color: "#36a2eb"
    })));
    return (h, u) => {
      var n;
      const m = F("FmIcon"), _ = F("FmChip"), B = F("FmTooltip"), X = F("FmLineChart");
      return w(), L("div", Mt, [
        K(h.$slots, "menu"),
        P("p", Ht, le(v.value), 1),
        P("div", Nt, [
          z(B, {
            content: `vs. ${(n = o(x).defaultCompareType) == null ? void 0 : n.split("_").join(" ")}`,
            placement: "right",
            "hide-arrow": "",
            variant: "plain"
          }, {
            default: $(() => [
              d.value ? (w(), V(_, {
                key: 0,
                icon: d.value.icon.name,
                class: de(`bg-${d.value.icon.tailwind}`),
                compact: ""
              }, {
                default: $(() => [
                  z(m, {
                    name: d.value.icon.name,
                    color: d.value.icon.color
                  }, null, 8, ["name", "color"]),
                  P("p", {
                    class: "fm-typo-en-body-md-600",
                    style: O({ color: d.value.icon.color })
                  }, le(d.value.value), 5)
                ]),
                _: 1
              }, 8, ["icon", "class"])) : J("", !0),
              o(t).endDate !== null && o(t).startDate !== null && d.value === null ? (w(), V(_, {
                key: 1,
                compact: ""
              }, {
                default: $(() => [
                  z(m, {
                    name: "arrow_upward",
                    color: "#C7C7CC"
                  }),
                  u[0] || (u[0] = P("p", { class: "fm-typo-en-body-md-600 text-fm-color-typo-disabled" }, "N/A", -1))
                ]),
                _: 1
              })) : J("", !0)
            ]),
            _: 1
          }, 8, ["content"])
        ]),
        g.value ? (w(), L("div", Et, [
          i(g.value.type) === "line" ? (w(), V(X, {
            key: 0,
            class: "sparkline",
            datasets: C.value,
            legend: {
              display: !1
            },
            datalabels: { display: !1 },
            "x-axis": { categories: g.value.dimensions },
            "y-cfg": { display: !1 },
            "x-cfg": { display: !1 },
            "maintain-aspect-ratio": !1
          }, null, 8, ["datasets", "x-axis"])) : J("", !0)
        ])) : (w(), L("div", Ot, u[1] || (u[1] = [
          P("div", { class: "sparkline" }, [
            P("div", { class: "flex flex-col gap-8" }, [
              P("div"),
              P("div")
            ]),
            P("div", { class: "grow" })
          ], -1)
        ])))
      ]);
    };
  }
}), Ut = {};
function Xt(e, a) {
  const c = F("FmMenuDivider");
  return w(), V(c);
}
const Yt = /* @__PURE__ */ Pt(Ut, [["render", Xt]]), qt = { class: "my-4" }, jt = {
  class: "border-b border-fm-color-neutral-gray-100 hover:bg-fm-color-opacity-sm",
  style: { backgroundColor: "#f9f9f9" }
}, Jt = { class: "font-bold" }, Kt = { class: "text-fm-color-neutral-gray-300" }, Qt = /* @__PURE__ */ G({
  __name: "WidgetTable",
  props: {
    modelValue: { required: !0 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(e) {
    const { t: a, te: c } = _e(), t = U(e, "modelValue"), { country: x } = Se(), y = p(null), v = s(() => {
      var n;
      return ((n = t.value.data) == null ? void 0 : n.columns) || [{ label: "", key: "" }];
    }), d = s(() => {
      var n;
      return ((n = t.value.data) == null ? void 0 : n.rows) || [];
    }), i = s(() => t.value.filterText), g = s(() => {
      var n, f;
      if (!(i.value && i.value.trim().length > 0 || !((n = d.value[0]) != null && n.isRollup) && !((f = d.value[d.value.length - 1]) != null && f.isRollup))) {
        if (t.value.rollupPosition === H.top || t.value.rollupPosition === void 0)
          return H.top;
        if (t.value.rollupPosition === H.bottom)
          return H.bottom;
      }
    }), C = s(() => {
      const b = g.value !== void 0 ? 1 : 0, T = (y.value ? y.value.$el.offsetHeight : 0) - 48;
      return Math.floor((T - 34.5 - 32) / 48) - b;
    }), h = s(() => {
      var f, k;
      let n = [];
      switch (g.value) {
        case H.top:
          n = [...((f = d.value[0]) == null ? void 0 : f.cells) || []].map((b, T) => {
            var R;
            return {
              main: b,
              comparison: (R = d.value[0]) == null ? void 0 : R.comparisonCells[T],
              rowType: v.value[T].type
            };
          });
          break;
        case H.bottom:
          n = [...((k = d.value[d.value.length - 1]) == null ? void 0 : k.cells) || []].map((b, T) => {
            var R;
            return {
              main: b,
              comparison: (R = d.value[0]) == null ? void 0 : R.comparisonCells[T],
              rowType: v.value[T].type
            };
          });
          break;
      }
      return n.length > 0 && n[0].main === "" && (n[0].main = "Grand total"), n;
    });
    function u(n) {
      const f = {};
      for (let k = 0; k < v.value.length; k++)
        if (v.value[k].key !== "") {
          const b = n.comparisonCells[k];
          f[v.value[k].key] = {
            main: n.cells[k],
            comparison: b
          }, f.isRollup = n.isRollup;
        }
      return f;
    }
    function m(n) {
      return [...new Array(n < 0 ? 0 : n)].map(() => {
        var k;
        const f = {};
        if ((k = t.value.data) != null && k.columns)
          for (let b = 0; b < t.value.data.columns.length; b++)
            f[t.value.data.columns[b].key] = void 0;
        return f;
      });
    }
    function _(n) {
      let f = (n == null ? void 0 : n.main) || "";
      return f.includes("#") && !f.startsWith("#") && (f = f.split("#")[0]), !n || n.main === "" || n.comparison === "" ? {
        main: f
      } : {
        main: f,
        comparison: n == null ? void 0 : n.comparison,
        difference: Qe(n.main, n.comparison, x)
      };
    }
    const B = s(() => {
      var T, R, Y;
      let n = ((T = t.value.data) == null ? void 0 : T.rows) || [];
      switch (g.value) {
        case H.bottom:
          n = (R = n[n.length - 1]) != null && R.isRollup ? n.slice(0, -1) : n;
          break;
        case H.top:
          n = (Y = n[0]) != null && Y.isRollup ? n.slice(1, n.length) : n;
          break;
      }
      const f = n.filter((A) => !(i.value !== "" && (A.isRollup === !0 || !A.cells.some(
        (W) => {
          var N;
          return ((W == null ? void 0 : W.toLowerCase()) || "").includes((N = i.value) == null ? void 0 : N.toLowerCase());
        }
      )))).map((A) => u(A)), k = f.length % C.value;
      let b = 0;
      return k > 0 ? b = Math.abs(k - C.value) : f.length === 0 && (b = C.value), f.push(...m(b)), f;
    }), X = s(() => {
      var f;
      let n = [];
      return (f = t.value.data) != null && f.columns && (n = [...t.value.data.columns.map((b) => {
        const T = ee(a, c, b.label, "other");
        return {
          accessorKey: b.key,
          header: () => Xe(
            "p",
            {
              class: `min-w-[110px] w-full text-nowrap ${b.type === "NUMERIC" ? "text-right" : ""}`
            },
            T
          ),
          cell: (R) => {
            var W, N;
            const Y = _(R.getValue()), A = (N = (W = R == null ? void 0 : R.row) == null ? void 0 : W.original) == null ? void 0 : N.isRollup;
            return Xe(
              "div",
              {
                class: `${A ? "fm-typo-en-body-md-600 text-fm-color-typo-secondary" : "fm-typo-en-body-md-400"} ${b.type === "NUMERIC" ? "text-right" : ""} text-nowrap whitespace-pre`
              },
              [Y.main]
            );
          },
          meta: () => ({
            cellClass: "subtotal-row"
          }),
          enableSorting: !1
        };
      })]), n;
    });
    return (n, f) => {
      const k = F("FmTable");
      return w(), L(E, null, [
        P("div", qt, [
          K(n.$slots, "menu")
        ]),
        z(k, {
          ref_key: "table",
          ref: y,
          "column-defs": X.value,
          "row-data": B.value,
          "search-value": i.value,
          "page-size": C.value,
          "shrink-at": !1,
          "force-mobile-footer": !0,
          class: "scrollbar-hide-table"
        }, {
          "pin-top": $(() => [
            P("tbody", null, [
              P("tr", jt, [
                (w(!0), L(E, null, Je(h.value, (b, T) => (w(), L("td", {
                  key: `${o(ce)()}_${T}`,
                  class: "h-[48px] text-fm-color-typo-primary px-16"
                }, [
                  P("span", {
                    class: de(`items-center text-fm-color-typo-secondary gap-2 line-clamp-2 text-ellipsis ${b.rowType === "NUMERIC" ? "text-right" : ""}`)
                  }, [
                    P("p", Jt, le(b.main), 1),
                    P("p", Kt, le(b.comparison ? `(${b.comparison})` : ""), 1)
                  ], 2)
                ]))), 128))
              ])
            ])
          ]),
          _: 1
        }, 8, ["column-defs", "row-data", "search-value", "page-size"])
      ], 64);
    };
  }
}), Zt = /* @__PURE__ */ G({
  __name: "WidgetStackBarChart",
  props: {
    modelValue: { required: !0 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(e) {
    const a = U(e, "modelValue"), c = s(() => {
      var _;
      return ((_ = a.value.data) == null ? void 0 : _.xAxis) || [];
    }), t = s(() => {
      var m;
      return ((m = a.value.data) == null ? void 0 : m.datasets) ?? [];
    }), x = p(null), { datalabels: y, xCfg: v, yCfg: d, isTransposed: i, legend: g, chartWidth: C, chartHeight: h } = ne(
      a.value
    ), u = s(() => t.value.length > 0 ? [
      ...t.value.map((m, _) => {
        let B = m.values;
        return {
          label: m.name,
          data: B,
          dash: !!m.isCompare,
          backgroundColor: oe({ index: _, isCompare: m.isCompare })
        };
      })
    ] : []);
    return (m, _) => {
      const B = F("FmBarChart");
      return w(), L(E, null, [
        K(m.$slots, "menu"),
        z(B, {
          ref_key: "chartRef",
          ref: x,
          class: "bar-chart",
          datasets: u.value,
          "x-axis": { categories: c.value },
          "x-cfg": o(v),
          "y-cfg": o(d),
          transpose: o(i),
          stacked: !0,
          legend: {
            display: o(g).display ?? !1,
            position: o(g).position,
            maxHeight: 54,
            labels: {
              usePointStyle: o(g).usePointStyle ?? !0
            }
          },
          datalabels: o(y),
          "maintain-aspect-ratio": !1,
          style: O({
            "--chart-width": o(C) !== void 0 ? o(C) + "px" : "100%",
            "--chart-height": o(h) !== void 0 ? o(h) + "px" : "calc(100% - 36px)"
          })
        }, null, 8, ["datasets", "x-axis", "x-cfg", "y-cfg", "transpose", "legend", "datalabels", "style"])
      ], 64);
    };
  }
}), ea = /* @__PURE__ */ G({
  __name: "WidgetStackLineChart",
  props: {
    modelValue: { required: !0 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(e) {
    const a = U(e, "modelValue"), c = s(() => {
      var u;
      return ((u = a.value.data) == null ? void 0 : u.xAxis) ?? [];
    }), t = s(() => {
      var u;
      return ((u = a.value.data) == null ? void 0 : u.datasets) ?? [];
    }), { datalabels: x, xCfg: y, yCfg: v, isTransposed: d, legend: i, chartWidth: g, chartHeight: C } = ne(
      a.value
    ), h = s(() => t.value.length > 0 ? [
      ...t.value.map((u, m) => {
        let _ = u.values;
        return {
          label: u.name,
          data: _,
          dash: u.isCompare,
          fill: !1,
          color: oe({ index: m, isCompare: u.isCompare })
        };
      })
    ] : []);
    return (u, m) => {
      const _ = F("FmLineChart");
      return w(), L(E, null, [
        K(u.$slots, "menu"),
        z(_, {
          class: "line-chart",
          datasets: h.value,
          "x-axis": { categories: c.value },
          "x-cfg": o(y),
          "y-cfg": o(v),
          transpose: o(d),
          legend: {
            display: o(i).display ?? !1,
            position: o(i).position,
            maxHeight: 54,
            labels: {
              usePointStyle: o(i).usePointStyle ?? !0
            }
          },
          stacked: !0,
          datalabels: o(x),
          "maintain-aspect-ratio": !1,
          style: O({
            "--chart-width": o(g) !== void 0 ? o(g) + "px" : "97%",
            "--chart-height": o(C) !== void 0 ? o(C) + "px" : "calc(100% - 36px)"
          })
        }, null, 8, ["datasets", "x-axis", "x-cfg", "y-cfg", "transpose", "legend", "datalabels", "style"])
      ], 64);
    };
  }
}), te = [
  "col-span-1",
  "col-span-2",
  "col-span-3",
  "col-span-4",
  "col-span-5",
  "col-span-6",
  "col-span-7",
  "col-span-8",
  "col-span-9",
  "col-span-10",
  "col-span-11",
  "col-span-12"
];
function ta(e) {
  return e < 12 ? te[e - 1] : te[11];
}
function aa(e) {
  return e < 12 ? te[Math.min(11, e * 2 - 1)] : te[11];
}
function la(e) {
  return e < 12 ? te[Math.min(11, e * 3 - 1)] : te[11];
}
const oa = /* @__PURE__ */ G({
  __name: "WidgetLinechart",
  props: {
    modelValue: { required: !0 },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(e) {
    const a = U(e, "modelValue"), c = s(() => {
      var u;
      return ((u = a.value.data) == null ? void 0 : u.xAxis) ?? [];
    }), t = s(() => {
      var u;
      return ((u = a.value.data) == null ? void 0 : u.datasets) ?? [];
    }), { datalabels: x, xCfg: y, yCfg: v, isTransposed: d, legend: i, chartWidth: g, chartHeight: C } = ne(
      a.value
    ), h = s(() => t.value.length > 0 ? [
      ...t.value.map((u, m) => ({
        label: u.name,
        data: u.values,
        dash: !!u.isCompare,
        fill: !1,
        color: oe({ index: m, isCompare: u.isCompare })
      }))
    ] : []);
    return (u, m) => {
      const _ = F("FmLineChart");
      return w(), L(E, null, [
        K(u.$slots, "menu"),
        z(_, {
          class: "line-chart",
          datasets: h.value,
          "x-axis": { categories: c.value },
          "x-cfg": o(y),
          "y-cfg": o(v),
          transpose: o(d),
          legend: {
            display: o(i).display ?? !1,
            position: o(i).position,
            position: "bottom",
            maxHeight: 54,
            labels: {
              usePointStyle: o(i).usePointStyle ?? !0
            }
          },
          datalabels: o(x),
          "maintain-aspect-ratio": !1,
          style: O({
            "--chart-width": o(g) !== void 0 ? o(g) + "px" : "97%",
            "--chart-height": o(C) !== void 0 ? o(C) + "px" : "calc(100% - 36px)"
          })
        }, null, 8, ["datasets", "x-axis", "x-cfg", "y-cfg", "transpose", "legend", "datalabels", "style"])
      ], 64);
    };
  }
}), na = {
  key: 1,
  class: "grow"
}, sa = {
  key: 2,
  class: "flex"
}, va = /* @__PURE__ */ G({
  __name: "DynamicWidget",
  props: /* @__PURE__ */ xt({
    index: {
      type: Number,
      default: 0
    },
    hideExport: {
      type: Boolean,
      default: !1
    }
  }, {
    modelValue: { required: !0, default: () => {
    } },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(e) {
    const a = p(!0), c = U(e, "modelValue"), t = c.value.widget.config, { t: x, te: y } = _e(), v = e, d = p(null), i = p(t.rollup), g = p(ce()), C = p(t.drillDimension), h = s(() => {
      if (q.value.length > 0) {
        const l = q.value.findIndex(
          (S) => S.value === C.value
        );
        return l >= 0 ? l : 0;
      } else
        return -1;
    }), u = s(() => h.value !== 0), m = s(
      () => h.value != q.value.length - 1
    ), _ = p(t.showTitle ?? !0), B = p(t.titleFontSize ?? 14), X = p(t.titleBold ?? !1), n = p(t.titleItalic ?? !1), f = p(t.titleUnderline ?? !1), k = p(t.chartWidth ?? void 0), b = p(t.chartHeight ?? void 0), T = p(t.showLabel ?? !1), R = p(t.labelAlign ?? be.center), Y = p(t.labelAnchor ?? ye.center), A = p(t.labelRotation ?? 0), W = p(t.labelOffset ?? 0), N = p(t.labelFontSize ?? 12), Ze = s(() => t.showSearchBar), ke = p(t.showX ?? !0), Fe = p(t.xPosition ?? we.bottom), Te = p(t.showXGrid ?? !1), De = p(t.showXTick ?? !0), Re = p(t.xTickFontSize ?? 12), Le = p(t.showY ?? !0), Pe = p(t.yPosition ?? xe.left), ze = p(t.showYGrid ?? !1), Be = p(t.showYTick ?? !0), Ve = p(t.yTickFontSize ?? 12), $e = p(t.showLegend ?? void 0), Ae = p(t.legendPosition ?? Ce.top), We = p(t.usePointStyle ?? !0), pe = p(""), { breakpoints: I } = zt(), Ie = p(), et = s(() => I.value.lg || I.value.md ? ta(c.value.size.width) : I.value.sm ? aa(c.value.size.width) : la(c.value.size.width)), se = s(
      () => Vt.find((l) => l.type === c.value.widget.type)
    ), Q = Ye(() => {
      var l;
      Ie.value = it((l = d.value) == null ? void 0 : l.$el.offsetWidth), g.value = ce();
    }), tt = s(() => {
      if ($t(D.value.type, Z.value))
        switch (c.value.widget.type) {
          case r.BarChart:
            return Wt;
          case r.StackBarChart:
            return Zt;
          case r.LineChart:
            return oa;
          case r.StackLineChart:
            return ea;
          case r.Circular:
            return It;
          case r.Scorecard:
            return Gt;
          case r.Spacer:
            return Yt;
          case r.Table:
            return Qt;
          default:
            return qe;
        }
      else
        return qe;
    }), Z = p(null), { selectedLocationIds: me, dateRange: at, compareDateRange: lt, timeRange: ot } = ve(Ke()), { businessId: nt } = ve(Se()), D = s(() => {
      const l = JSON.parse(JSON.stringify(c.value.widget));
      return {
        ...l,
        config: {
          ...l.config,
          rollup: i.value,
          drillDimension: C.value,
          showGrandTotal: !1
        }
      };
    });
    function st() {
      return {
        data: Z.value,
        showTitle: _.value,
        titleFontSize: B.value,
        titleBold: X.value,
        titleItalic: n.value,
        titleUnderline: f.value,
        chartHeight: b.value,
        chartWidth: k.value,
        showLabel: T.value,
        labelAnchor: Y.value,
        labelAlign: R.value,
        labelRotation: A.value,
        labelOffset: W.value,
        labelFontSize: N.value,
        showX: ke.value,
        xPosition: Fe.value,
        showXGrid: Te.value,
        showXTick: De.value,
        xTickFontSize: Re.value,
        showY: Le.value,
        yPosition: Pe.value,
        showYGrid: ze.value,
        showYTick: Be.value,
        yTickFontSize: Ve.value,
        isTransposed: D.value.config.isTransposed,
        showLegend: $e.value,
        legendPosition: Ae.value,
        usePointStyle: We.value
      };
    }
    function rt() {
      return {
        data: Z.value,
        filterText: pe.value,
        rollupPosition: D.value.config.rollupPosition
      };
    }
    const Me = s(() => {
      switch (D.value.type) {
        case r.Table:
          return rt();
        case r.BarChart:
        case r.LineChart:
        case r.StackBarChart:
        case r.StackLineChart:
        case r.Circular:
          return st();
        default:
          return { data: Z.value };
      }
    }), He = s(() => {
      const { config: l } = c.value.widget;
      if (l.rollup != null) {
        const S = [...l.dimensions].filter((j) => !j.hide);
        return S.sort(
          (j, ae) => (l.rowIds || []).indexOf(fe(j)) - (l.rowIds || []).indexOf(fe(ae))
        ), [
          { label: ee(x, y, "None", "other"), value: null },
          { label: ee(x, y, "Grand Total", "other"), value: 0 },
          ...[...S].slice(0, S.length - 1).map((j, ae) => ({
            label: ee(x, y, j.label, "other"),
            value: ae + 1
          }))
        ];
      }
      return [];
    }), q = s(() => {
      const { config: l } = D.value;
      return l.isDrillable ? l.dimensions.map((S) => ({
        label: ee(x, y, S.label, "other"),
        value: fe(S)
      })) : [];
    });
    ue(
      () => c.value.widget.config,
      (l) => {
        i.value = l.rollup, _.value = l.showTitle ?? !0, B.value = l.titleFontSize ?? 14, X.value = l.titleBold ?? !1, n.value = l.titleItalic ?? !1, f.value = l.titleUnderline ?? !1, b.value = l.chartHeight ?? void 0, k.value = l.chartWidth ?? void 0, T.value = l.showLabel ?? !1, R.value = l.labelAlign ?? be.center, Y.value = l.labelAnchor ?? ye.center, A.value = l.labelRotation ?? 0, W.value = l.labelOffset ?? 0, N.value = l.labelFontSize ?? 12, ke.value = l.showX ?? !0, Fe.value = l.xPosition ?? we.bottom, Te.value = l.showXGrid ?? !1, De.value = l.showXTick ?? !0, Re.value = l.xTickFontSize ?? 12, Le.value = l.showY ?? !0, Pe.value = l.yPosition ?? xe.left, ze.value = l.showYGrid ?? !1, Be.value = l.showYTick ?? !0, Ve.value = l.yTickFontSize ?? 12, $e.value = l.showLegend ?? void 0, Ae.value = l.legendPosition ?? Ce.top, We.value = l.usePointStyle ?? !0;
      },
      { deep: !0 }
    ), ue([() => i.value], () => {
      i.value !== null && (c.value.widget.config.rollup = i.value);
    }), ue(
      [
        () => D.value,
        () => at.value,
        () => ot.value,
        () => lt.value,
        () => me.value,
        () => nt.value
      ],
      () => {
        var l;
        me.value && ((l = me.value) == null ? void 0 : l.length) > 0 && Ee();
      },
      {
        deep: !0
      }
    ), ue(
      [() => c.value.size],
      () => {
        Q();
      },
      { deep: !0 }
    ), Ct(() => {
      Q(), I.value.sm || I.value.md || I.value.xs ? (console.log("Ignoring resize event due to keyboard"), addEventListener("change", Q)) : addEventListener("resize", Q), Ee();
    }), _t(() => {
      I.value.sm || I.value.md || I.value.xs ? (console.log("Ignoring resize event due to keyboard"), removeEventListener("change", Q)) : removeEventListener("resize", Q);
    });
    const Ne = Bt();
    let re;
    const Ee = Ye(async function() {
      if (D.value.config.schemaNames.length <= 0 && !(D.value.config.dimensions.length <= 0 || D.value.config.metrics.length <= 0)) {
        Ne.open({
          message: "schema must not be empty and dimension or metrics must have at least 1 column",
          type: "info"
        }), a.value = !1;
        return;
      }
      try {
        a.value = !0, re && re.abort(), re = new AbortController();
        const S = re.signal;
        Z.value = await Lt(D.value, S), g.value = ce(), a.value = !1;
      } catch (S) {
        Z.value = null, S.code !== "ERR_CANCELED" && (Ne.open({ message: `Invalid chart ${D.value.type}`, type: "error" }), console.log(S), a.value = !1);
      }
    });
    function it(l) {
      switch (c.value.widget.type) {
        case "SPACER":
          return;
        case "SCORECARD":
          return;
        case "TABLE":
          return `${c.value.size.height * 100 + (Ze.value ? 72 : 0) + 96.5}px`;
      }
      return `${Math.max(l / c.value.size.width, 90) * c.value.size.height}px`;
    }
    function ut() {
      const l = h.value - 1;
      l >= 0 && (C.value = q.value[l].value);
    }
    function ct() {
      const l = h.value + 1;
      l >= 0 && l < q.value.length && (C.value = q.value[l].value);
    }
    const dt = Object.values(Tt).map((l) => ({
      label: Dt(l),
      value: l,
      onClick: async () => {
        await Rt(l, v.index);
      }
    })), pt = D.value.type === r.Spacer ? "flat" : "outlined", mt = D.value.type === r.Spacer ? "p-0" : "p-16";
    return (l, S) => {
      const j = F("FmTooltip"), ae = F("FmSearch"), ht = F("FmCheckbox"), he = F("FmButton"), ft = F("FmSelect"), vt = F("FmMenuItem"), gt = F("FmMenu"), yt = F("FmForm"), bt = F("FmCircularProgress"), wt = F("FmCard");
      return w(), V(wt, {
        ref_key: "tileCard",
        ref: d,
        class: de(`${et.value} ${o(mt)}`),
        variant: o(pt)
      }, {
        default: $(() => [
          a.value ? (w(), V(bt, { key: 1 })) : (w(), L("div", {
            key: 0,
            style: O({ height: Ie.value })
          }, [
            (w(), V(St(tt.value), {
              key: g.value,
              modelValue: Me.value,
              "onUpdate:modelValue": S[3] || (S[3] = (ie) => Me.value = ie)
            }, {
              menu: $(() => [
                z(yt, { class: "flex items-center gap-2" }, {
                  default: $(() => {
                    var ie, Oe, Ge, Ue;
                    return [
                      z(j, {
                        variant: "plain",
                        placement: "right",
                        content: D.value.description,
                        "hide-arrow": !0,
                        disabled: !D.value.description
                      }, {
                        default: $(() => [
                          _.value !== !1 ? (w(), L("p", {
                            key: 0,
                            style: O({
                              fontSize: B.value + "px",
                              fontWeight: X.value ? "bold" : "normal",
                              fontStyle: n.value ? "italic" : "normal",
                              textDecoration: f.value ? "underline" : "none"
                            }),
                            class: de(["text-fm-color-typo-secondary line-clamp-1", [
                              B.value <= 18 ? "fm-typo-en-body-md-400" : "",
                              D.value.description ? "border-b-2 border-dashed border-gray-300" : ""
                            ]])
                          }, le(o(ee)(o(x), o(y), D.value.title, "other")), 7)) : J("", !0)
                        ]),
                        _: 1
                      }, 8, ["content", "disabled"]),
                      (ie = se.value) != null && ie.showSearchBar ? (w(), V(ae, {
                        key: 0,
                        modelValue: pe.value,
                        "onUpdate:modelValue": S[0] || (S[0] = (M) => pe.value = M),
                        class: "grow"
                      }, null, 8, ["modelValue"])) : (w(), L("div", na)),
                      kt(z(ht, {
                        modelValue: T.value,
                        "onUpdate:modelValue": S[1] || (S[1] = (M) => T.value = M),
                        label: "Label",
                        value: !1
                      }, null, 8, ["modelValue"]), [
                        [Ft, (Oe = se.value) == null ? void 0 : Oe.showLabel]
                      ]),
                      (Ge = se.value) != null && Ge.showDrillDimension && q.value.length > 0 ? (w(), L("div", sa, [
                        z(he, {
                          icon: "arrow_upward",
                          variant: "tertiary",
                          disabled: !u.value,
                          onClick: ut
                        }, null, 8, ["disabled"]),
                        z(he, {
                          icon: "arrow_downward",
                          variant: "tertiary",
                          disabled: !m.value,
                          onClick: ct
                        }, null, 8, ["disabled"])
                      ])) : J("", !0),
                      (Ue = se.value) != null && Ue.showRollup && He.value.length > 0 ? (w(), V(ft, {
                        key: 3,
                        modelValue: i.value,
                        "onUpdate:modelValue": S[2] || (S[2] = (M) => i.value = M),
                        class: "w-[150px]",
                        items: He.value
                      }, null, 8, ["modelValue", "items"])) : J("", !0),
                      v.hideExport ? J("", !0) : (w(), V(gt, {
                        key: 4,
                        shift: !0
                      }, {
                        "menu-button": $(() => [
                          z(he, {
                            icon: "more_vert",
                            variant: "tertiary"
                          })
                        ]),
                        default: $(() => [
                          (w(!0), L(E, null, Je(o(dt), (M) => (w(), V(vt, {
                            key: M.value,
                            label: M.label,
                            onClick: M.onClick
                          }, null, 8, ["label", "onClick"]))), 128))
                        ]),
                        _: 1
                      }))
                    ];
                  }),
                  _: 1
                })
              ]),
              _: 1
            }, 8, ["modelValue"]))
          ], 4))
        ]),
        _: 1
      }, 8, ["class", "variant"]);
    };
  }
});
export {
  be as L,
  H as R,
  va as _,
  ye as a,
  fe as g
};
