@feedmepos/mf-report 5.5.11-beta.2 → 5.5.13-beta.0

package/dist/DynamicWidget.vue_vue_type_script_setup_true_lang-BdzViho5.js

@@ -0,0 +1,1134 @@
+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-CKZZ3hoL.js";
+import { u as _e, b as Ke, a as Se } from "./global-loader-DfQXrz7M.js";
+import { d as Ye } from "./index-OX-gt0RL.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-Ds28wS8h.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" : "100%",
+            "--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
+};