@feedmepos/mf-report 5.3.15-rc.9 → 5.4.0-beta.0

package/dist/DynamicWidget.vue_vue_type_script_setup_true_lang-WNX1hHIm.js

@@ -0,0 +1,990 @@
+import { defineComponent as E, useModel as z, computed as i, ref as D, resolveComponent as y, openBlock as h, createElementBlock as S, Fragment as W, renderSlot as U, createVNode as k, createElementVNode as C, toDisplayString as K, unref as q, withCtx as $, createBlock as R, normalizeClass as te, normalizeStyle as ye, createCommentVNode as G, h as fe, renderList as we, mergeModels as Ie, watch as ee, onMounted as Pe, onUnmounted as We, resolveDynamicComponent as Ee, withDirectives as ze, vShow as He } from "vue";
+import { W as n, a as _e, e as ne, l as Oe, v as ae, k as he, R as qe, m as Ue, n as je, q as Ge } from "./app-eKZV2PPB.js";
+import { storeToRefs as se } from "pinia";
+import { _ as ge } from "./NoData.vue_vue_type_script_setup_true_lang-FeKqFs4A.js";
+import { useBreakpoints as Je, useSnackbar as Ke } from "@feedmepos/ui-library";
+var re = /* @__PURE__ */ ((l) => (l.line = "LINE", l.bar = "BAR", l))(re || {}), A = /* @__PURE__ */ ((l) => (l.top = "TOP", l.bottom = "BOTTOM", l))(A || {});
+n.Circular, n.Table, n.BarChart, n.LineChart, n.StackBarChart, n.StackLineChart, n.Scorecard, n.Spacer;
+const Qe = [
+  {
+    type: n.Circular,
+    showLabel: !1,
+    // TODO: temporarily removed show label as it has no function
+    showDrillDimension: !0,
+    showRollup: !1,
+    showSearchBar: !1
+  },
+  {
+    type: n.Table,
+    showLabel: !1,
+    showDrillDimension: !0,
+    showRollup: !0,
+    showSearchBar: !0
+  },
+  {
+    type: n.BarChart,
+    showLabel: !1,
+    // TODO: temporarily removed show label as it has no function
+    showDrillDimension: !0,
+    showRollup: !1,
+    showSearchBar: !1
+  },
+  {
+    type: n.LineChart,
+    showLabel: !1,
+    // TODO: temporarily removed show label as it has no function
+    showDrillDimension: !0,
+    showRollup: !0,
+    showSearchBar: !1
+  },
+  {
+    type: n.StackBarChart,
+    showLabel: !1,
+    // TODO: temporarily removed show label as it has no function
+    showDrillDimension: !0,
+    showRollup: !0,
+    showSearchBar: !1
+  },
+  {
+    type: n.StackLineChart,
+    showLabel: !1,
+    // TODO: temporarily removed show label as it has no function
+    showDrillDimension: !0,
+    showRollup: !0,
+    showSearchBar: !1
+  },
+  {
+    type: n.Scorecard,
+    showLabel: !1,
+    showDrillDimension: !1,
+    showRollup: !1,
+    showSearchBar: !1
+  },
+  {
+    type: n.Spacer,
+    showLabel: !1,
+    showDrillDimension: !1,
+    showRollup: !1,
+    showSearchBar: !1
+  }
+];
+function oe(l) {
+  const e = [l.schemaName, l.name];
+  return "option" in l && l.option && e.push(l.option), "aggregation" in l && l.aggregation && e.push(l.aggregation), e.push(l.label.replace(/[^a-zA-Z0-9]/g, "")), e.join("_").toLowerCase();
+}
+function Ze(l, e) {
+  switch (l) {
+    case n.BarChart:
+    case n.LineChart:
+    case n.StackBarChart:
+    case n.StackLineChart:
+      return Array.isArray(e == null ? void 0 : e.datasets) && Array.isArray(e == null ? void 0 : e.xAxis) && e.datasets.length > 0 && e.xAxis.length > 0;
+    case n.Table:
+      return Array.isArray(e == null ? void 0 : e.rows) && Array.isArray(e == null ? void 0 : e.columns) && e.rows.length > 0 && e.columns.length > 0;
+    case n.Circular:
+      return Array.isArray(e == null ? void 0 : e.datasets) && e.datasets.length > 0;
+    case n.Scorecard:
+      return !0;
+    case n.Spacer:
+      return !0;
+  }
+}
+const be = [
+  "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 Q({
+  index: l,
+  isCompare: e,
+  opacity: r
+}) {
+  let d = typeof r == "number" ? r : 1;
+  return e && (d = d * 0.6), `rgba(${be[l % be.length]}, ${d})`;
+}
+function Ce(l, e, r) {
+  if (l === "" || e === "")
+    return null;
+  let d = (u) => u == null ? void 0 : u.replace(/,/g, "");
+  r === "ID" && (d = (u) => u == null ? void 0 : u.replace(/\./g, "").replace(/,/g, "."));
+  const v = Number(d(l)), c = Number(d(e));
+  if (isNaN(v) || isNaN(c))
+    return null;
+  let a = 0;
+  c === 0 ? v === 0 ? a = 0 : a = 1 : a = (v - c) / c;
+  const o = Xe(a);
+  return {
+    value: isNaN(a) ? "" : `${(a * 100).toFixed(0)}%`,
+    icon: o
+  };
+}
+function Xe(l) {
+  return l > 0 ? {
+    name: "moving",
+    color: "#1F7735",
+    tailwind: "fm-color-system-success-100"
+  } : l < 0 ? {
+    name: "trending_down",
+    color: "#99231D",
+    tailwind: "fm-color-system-error-100"
+  } : {
+    name: "equal",
+    color: "#C7C7CC",
+    tailwind: "fm-color-neutral-gray-100"
+  };
+}
+const Ye = /* @__PURE__ */ E({
+  __name: "WidgetBarchart",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = z(l, "modelValue"), r = i(() => {
+      var o;
+      return ((o = e.value.data) == null ? void 0 : o.xAxis) ?? [];
+    }), d = i(() => {
+      var o;
+      return ((o = e.value.data) == null ? void 0 : o.datasets) ?? [];
+    }), v = i(() => e.value.isTransposed ?? void 0), c = D(null), a = i(() => d.value.length > 0 ? [
+      ...d.value.map((o, u) => ({
+        label: o.name,
+        data: o.values,
+        dash: !!o.isCompare,
+        backgroundColor: Q({ index: u, isCompare: o.isCompare })
+      }))
+    ] : []);
+    return (o, u) => {
+      const F = y("FmBarChart");
+      return h(), S(W, null, [
+        U(o.$slots, "menu"),
+        k(F, {
+          ref_key: "chartRef",
+          ref: c,
+          class: "bar-chart",
+          datasets: a.value,
+          "x-axis": { categories: r.value },
+          transpose: v.value,
+          legend: {
+            display: !1,
+            position: "bottom",
+            maxHeight: 54,
+            labels: {
+              usePointStyle: !0
+            }
+          },
+          "maintain-aspect-ratio": !1
+        }, null, 8, ["datasets", "x-axis", "transpose"])
+      ], 64);
+    };
+  }
+}), ea = /* @__PURE__ */ E({
+  __name: "WidgetCircular",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = z(l, "modelValue"), r = i(() => {
+      let d = [];
+      return e.value.data.datasets && e.value.data.metrics && e.value.data.datasets.length > 0 && e.value.data.metrics.length > 0 && (d = [
+        {
+          label: e.value.data.metrics[0],
+          data: e.value.data.datasets.map((v) => v.value),
+          backgroundColor: e.value.data.datasets.map((v, c) => Q({ index: c }))
+        }
+      ]), d;
+    });
+    return (d, v) => {
+      const c = y("FmPieChart");
+      return h(), S(W, null, [
+        U(d.$slots, "menu"),
+        k(c, {
+          class: "circular",
+          percentage: "70%",
+          datasets: r.value,
+          metrics: e.value.data.datasets.map((a) => a.name),
+          variant: "doughnut",
+          legend: {
+            display: !0,
+            position: "bottom",
+            maxHeight: 54,
+            labels: {
+              usePointStyle: !0
+            }
+          },
+          "maintain-aspect-ratio": !1
+        }, null, 8, ["datasets", "metrics"])
+      ], 64);
+    };
+  }
+}), aa = { class: "flex flex-col gap-1" }, ta = { class: "fm-typo-en-title-sm-600" }, la = { class: "flex gap-2" }, oa = { key: 0 }, sa = { key: 1 }, ra = /* @__PURE__ */ E({
+  __name: "WidgetScorecard",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = z(l, "modelValue"), { compareDateRange: r, defaultDateSetting: d } = se(_e()), { country: v } = ne(), c = i(() => {
+      var b;
+      return ((b = e.value.data) == null ? void 0 : b.value) || "";
+    }), a = i(() => {
+      const { data: b } = e.value;
+      return b != null && b.comparison ? Ce(c.value, b.comparison, v) : null;
+    });
+    function o(b) {
+      switch (b) {
+        case re.bar:
+          return "bar";
+        case re.line:
+          return "line";
+        default:
+          return "line";
+      }
+    }
+    const u = i(() => {
+      var b;
+      return (b = e.value.data) == null ? void 0 : b.sparkline;
+    }), F = i(() => u.value.datasets.map((b) => ({
+      label: b.name,
+      data: b.values,
+      fill: !0,
+      color: "#36a2eb"
+    })));
+    return (b, L) => {
+      var m;
+      const j = y("FmIcon"), M = y("FmChip"), H = y("FmTooltip"), t = y("FmLineChart");
+      return h(), S("div", aa, [
+        U(b.$slots, "menu"),
+        C("p", ta, K(c.value), 1),
+        C("div", la, [
+          k(H, {
+            content: `vs. ${(m = q(d).defaultCompareType) == null ? void 0 : m.split("_").join(" ")}`,
+            placement: "right",
+            "hide-arrow": "",
+            variant: "plain"
+          }, {
+            default: $(() => [
+              a.value ? (h(), R(M, {
+                key: 0,
+                icon: a.value.icon.name,
+                class: te(`bg-${a.value.icon.tailwind}`),
+                compact: ""
+              }, {
+                default: $(() => [
+                  k(j, {
+                    name: a.value.icon.name,
+                    color: a.value.icon.color
+                  }, null, 8, ["name", "color"]),
+                  C("p", {
+                    class: "fm-typo-en-body-md-600",
+                    style: ye({ color: a.value.icon.color })
+                  }, K(a.value.value), 5)
+                ]),
+                _: 1
+              }, 8, ["icon", "class"])) : G("", !0),
+              q(r).endDate !== null && q(r).startDate !== null && a.value === null ? (h(), R(M, {
+                key: 1,
+                compact: ""
+              }, {
+                default: $(() => [
+                  k(j, {
+                    name: "arrow_upward",
+                    color: "#C7C7CC"
+                  }),
+                  L[0] || (L[0] = C("p", { class: "fm-typo-en-body-md-600 text-fm-color-typo-disabled" }, "N/A", -1))
+                ]),
+                _: 1
+              })) : G("", !0)
+            ]),
+            _: 1
+          }, 8, ["content"])
+        ]),
+        u.value ? (h(), S("div", oa, [
+          o(u.value.type) === "line" ? (h(), R(t, {
+            key: 0,
+            class: "sparkline",
+            datasets: F.value,
+            "hide-x-axis": !0,
+            "hide-y-axis": !0,
+            legend: {
+              display: !1
+            },
+            "x-axis": { categories: u.value.dimensions },
+            "maintain-aspect-ratio": !1
+          }, null, 8, ["datasets", "x-axis"])) : G("", !0)
+        ])) : (h(), S("div", sa, L[1] || (L[1] = [
+          C("div", { class: "sparkline" }, [
+            C("div", { class: "flex flex-col gap-8" }, [
+              C("div"),
+              C("div")
+            ]),
+            C("div", { class: "grow" })
+          ], -1)
+        ])))
+      ]);
+    };
+  }
+}), na = {};
+function ia(l, e) {
+  const r = y("FmMenuDivider");
+  return h(), R(r);
+}
+const ua = /* @__PURE__ */ Oe(na, [["render", ia]]), ca = { class: "my-4" }, ma = {
+  class: "border-b border-fm-color-neutral-gray-100 hover:bg-fm-color-opacity-sm",
+  style: { backgroundColor: "#f9f9f9" }
+}, da = { class: "font-bold" }, pa = { class: "text-fm-color-neutral-gray-300" }, va = /* @__PURE__ */ E({
+  __name: "WidgetTable",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = z(l, "modelValue"), { country: r } = ne(), d = D(null), v = i(() => {
+      var t;
+      return ((t = e.value.data) == null ? void 0 : t.columns) || [{ label: "", key: "" }];
+    }), c = i(() => {
+      var t;
+      return ((t = e.value.data) == null ? void 0 : t.rows) || [];
+    }), a = i(() => e.value.filterText), o = i(() => {
+      var t, m;
+      if (!(a.value && a.value.trim().length > 0 || !((t = c.value[0]) != null && t.isRollup) && !((m = c.value[c.value.length - 1]) != null && m.isRollup))) {
+        if (e.value.rollupPosition === A.top || e.value.rollupPosition === void 0)
+          return A.top;
+        if (e.value.rollupPosition === A.bottom)
+          return A.bottom;
+      }
+    }), u = i(() => {
+      const p = o.value !== void 0 ? 1 : 0, w = (d.value ? d.value.$el.offsetHeight : 0) - 48;
+      return Math.floor((w - 34.5 - 32) / 48) - p;
+    }), F = i(() => {
+      var m, g;
+      let t = [];
+      switch (o.value) {
+        case A.top:
+          t = [...((m = c.value[0]) == null ? void 0 : m.cells) || []].map((p, w) => {
+            var x;
+            return {
+              main: p,
+              comparison: (x = c.value[0]) == null ? void 0 : x.comparisonCells[w],
+              rowType: v.value[w].type
+            };
+          });
+          break;
+        case A.bottom:
+          t = [...((g = c.value[c.value.length - 1]) == null ? void 0 : g.cells) || []].map((p, w) => {
+            var x;
+            return {
+              main: p,
+              comparison: (x = c.value[0]) == null ? void 0 : x.comparisonCells[w],
+              rowType: v.value[w].type
+            };
+          });
+          break;
+      }
+      return t.length > 0 && t[0].main === "" && (t[0].main = "Grand total"), t;
+    });
+    function b(t) {
+      const m = {};
+      for (let g = 0; g < v.value.length; g++)
+        if (v.value[g].key !== "") {
+          const p = t.comparisonCells[g];
+          m[v.value[g].key] = {
+            main: t.cells[g],
+            comparison: p
+          }, m.isRollup = t.isRollup;
+        }
+      return m;
+    }
+    function L(t) {
+      return [...new Array(t < 0 ? 0 : t)].map(() => {
+        var g;
+        const m = {};
+        if ((g = e.value.data) != null && g.columns)
+          for (let p = 0; p < e.value.data.columns.length; p++)
+            m[e.value.data.columns[p].key] = void 0;
+        return m;
+      });
+    }
+    function j(t) {
+      let m = (t == null ? void 0 : t.main) || "";
+      return m.includes("#") && !m.startsWith("#") && (m = m.split("#")[0]), !t || t.main === "" || t.comparison === "" ? {
+        main: m
+      } : {
+        main: m,
+        comparison: t == null ? void 0 : t.comparison,
+        difference: Ce(t.main, t.comparison, r)
+      };
+    }
+    const M = i(() => {
+      var w, x, N;
+      let t = ((w = e.value.data) == null ? void 0 : w.rows) || [];
+      switch (o.value) {
+        case A.bottom:
+          t = (x = t[t.length - 1]) != null && x.isRollup ? t.slice(0, -1) : t;
+          break;
+        case A.top:
+          t = (N = t[0]) != null && N.isRollup ? t.slice(1, t.length) : t;
+          break;
+      }
+      const m = t.filter((V) => !(a.value !== "" && (V.isRollup === !0 || !V.cells.some(
+        (I) => {
+          var Z;
+          return ((I == null ? void 0 : I.toLowerCase()) || "").includes((Z = a.value) == null ? void 0 : Z.toLowerCase());
+        }
+      )))).map((V) => b(V)), g = m.length % u.value;
+      let p = 0;
+      return g > 0 ? p = Math.abs(g - u.value) : m.length === 0 && (p = u.value), m.push(...L(p)), m;
+    }), H = i(() => {
+      var m;
+      let t = [];
+      return (m = e.value.data) != null && m.columns && (t = [...e.value.data.columns.map((p) => ({
+        accessorKey: p.key,
+        header: () => fe(
+          "p",
+          {
+            class: `min-w-[110px] w-full text-nowrap ${p.type === "NUMERIC" ? "text-right" : ""}`
+          },
+          p.label
+        ),
+        cell: (w) => {
+          var V, I;
+          const x = j(w.getValue()), N = (I = (V = w == null ? void 0 : w.row) == null ? void 0 : V.original) == null ? void 0 : I.isRollup;
+          return fe(
+            "div",
+            {
+              class: `${N ? "fm-typo-en-body-md-600 text-fm-color-typo-secondary" : "fm-typo-en-body-md-400"} ${p.type === "NUMERIC" ? "text-right" : ""} text-nowrap whitespace-pre`
+            },
+            [x.main]
+          );
+        },
+        meta: () => ({
+          cellClass: "subtotal-row"
+        }),
+        enableSorting: !1
+      }))]), t;
+    });
+    return (t, m) => {
+      const g = y("FmTable");
+      return h(), S(W, null, [
+        C("div", ca, [
+          U(t.$slots, "menu")
+        ]),
+        k(g, {
+          ref_key: "table",
+          ref: d,
+          "column-defs": H.value,
+          "row-data": M.value,
+          "search-value": a.value,
+          "page-size": u.value,
+          "shrink-at": !1,
+          "force-mobile-footer": !0,
+          class: "scrollbar-hide-table"
+        }, {
+          "pin-top": $(() => [
+            C("tbody", null, [
+              C("tr", ma, [
+                (h(!0), S(W, null, we(F.value, (p, w) => (h(), S("td", {
+                  key: `${q(ae)()}_${w}`,
+                  class: "h-[48px] text-fm-color-typo-primary px-16"
+                }, [
+                  C("span", {
+                    class: te(`items-center text-fm-color-typo-secondary gap-2 line-clamp-2 text-ellipsis ${p.rowType === "NUMERIC" ? "text-right" : ""}`)
+                  }, [
+                    C("p", da, K(p.main), 1),
+                    C("p", pa, K(p.comparison ? `(${p.comparison})` : ""), 1)
+                  ], 2)
+                ]))), 128))
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["column-defs", "row-data", "search-value", "page-size"])
+      ], 64);
+    };
+  }
+}), fa = /* @__PURE__ */ E({
+  __name: "WidgetStackBarChart",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = z(l, "modelValue"), r = i(() => {
+      var u;
+      return ((u = e.value.data) == null ? void 0 : u.xAxis) || [];
+    }), d = i(() => {
+      var o;
+      return ((o = e.value.data) == null ? void 0 : o.datasets) ?? [];
+    }), v = i(() => e.value.isTransposed ?? void 0), c = D(null), a = i(() => d.value.length > 0 ? [
+      ...d.value.map((o, u) => {
+        let F = o.values;
+        return {
+          label: o.name,
+          data: F,
+          dash: !!o.isCompare,
+          backgroundColor: Q({ index: u, isCompare: o.isCompare })
+        };
+      })
+    ] : []);
+    return (o, u) => {
+      const F = y("FmBarChart");
+      return h(), S(W, null, [
+        U(o.$slots, "menu"),
+        k(F, {
+          ref_key: "chartRef",
+          ref: c,
+          class: "bar-chart",
+          datasets: a.value,
+          "x-axis": { categories: r.value },
+          transpose: v.value,
+          stacked: !0,
+          legend: {
+            display: !1,
+            position: "bottom",
+            maxHeight: 54,
+            labels: {
+              usePointStyle: !0
+            }
+          },
+          "maintain-aspect-ratio": !1
+        }, null, 8, ["datasets", "x-axis", "transpose"])
+      ], 64);
+    };
+  }
+}), ha = /* @__PURE__ */ E({
+  __name: "WidgetStackLineChart",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = z(l, "modelValue"), r = i(() => {
+      var a;
+      return ((a = e.value.data) == null ? void 0 : a.xAxis) ?? [];
+    }), d = i(() => {
+      var a;
+      return ((a = e.value.data) == null ? void 0 : a.datasets) ?? [];
+    }), v = i(() => e.value.isTransposed ?? void 0), c = i(() => d.value.length > 0 ? [
+      ...d.value.map((a, o) => {
+        let u = a.values;
+        return {
+          label: a.name,
+          data: u,
+          dash: a.isCompare,
+          fill: !1,
+          color: Q({ index: o, isCompare: a.isCompare })
+        };
+      })
+    ] : []);
+    return (a, o) => {
+      const u = y("FmLineChart");
+      return h(), S(W, null, [
+        U(a.$slots, "menu"),
+        k(u, {
+          class: "line-chart",
+          datasets: c.value,
+          "x-axis": { categories: r.value },
+          transpose: v.value,
+          legend: {
+            display: !1,
+            position: "bottom",
+            maxHeight: 54,
+            labels: {
+              usePointStyle: !0
+            }
+          },
+          stacked: !0,
+          "maintain-aspect-ratio": !1
+        }, null, 8, ["datasets", "x-axis", "transpose"])
+      ], 64);
+    };
+  }
+}), J = [
+  "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 ga(l) {
+  return l < 12 ? J[l - 1] : J[11];
+}
+function ba(l) {
+  return l < 12 ? J[Math.min(11, l * 2 - 1)] : J[11];
+}
+function ya(l) {
+  return l < 12 ? J[Math.min(11, l * 3 - 1)] : J[11];
+}
+const wa = /* @__PURE__ */ E({
+  __name: "WidgetLinechart",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = z(l, "modelValue"), r = i(() => {
+      var a;
+      return ((a = e.value.data) == null ? void 0 : a.xAxis) ?? [];
+    }), d = i(() => {
+      var a;
+      return ((a = e.value.data) == null ? void 0 : a.datasets) ?? [];
+    }), v = i(() => e.value.isTransposed ?? void 0), c = i(() => d.value.length > 0 ? [
+      ...d.value.map((a, o) => ({
+        label: a.name,
+        data: a.values,
+        dash: !!a.isCompare,
+        fill: !1,
+        color: Q({ index: o, isCompare: a.isCompare })
+      }))
+    ] : []);
+    return (a, o) => {
+      const u = y("FmLineChart");
+      return h(), S(W, null, [
+        U(a.$slots, "menu"),
+        k(u, {
+          class: "line-chart",
+          datasets: c.value,
+          "x-axis": { categories: r.value },
+          transpose: v.value,
+          legend: {
+            display: !1,
+            position: "bottom",
+            maxHeight: 54,
+            labels: {
+              usePointStyle: !0
+            }
+          },
+          "maintain-aspect-ratio": !1
+        }, null, 8, ["datasets", "x-axis", "transpose"])
+      ], 64);
+    };
+  }
+}), _a = {
+  key: 1,
+  class: "grow"
+}, Ca = {
+  key: 2,
+  class: "flex"
+}, La = /* @__PURE__ */ E({
+  __name: "DynamicWidget",
+  props: /* @__PURE__ */ Ie({
+    index: {
+      type: Number,
+      default: 0
+    },
+    hideExport: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { required: !0, default: () => {
+    } },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(l) {
+    const e = D(!0), r = z(l, "modelValue"), d = l, v = D(null), c = D(r.value.widget.config.rollup), a = D(ae()), o = D(r.value.widget.config.drillDimension), u = i(() => {
+      if (O.value.length > 0) {
+        const s = O.value.findIndex(
+          (f) => f.value === o.value
+        );
+        return s >= 0 ? s : 0;
+      } else
+        return -1;
+    }), F = i(() => u.value !== 0), b = i(
+      () => u.value != O.value.length - 1
+    ), L = D(r.value.widget.config.showLabel ?? !1), j = i(() => r.value.widget.config.showSearchBar), M = D(""), { breakpoints: H } = Je(), t = D(), m = i(() => H.value.lg || H.value.md ? ga(r.value.size.width) : H.value.sm ? ba(r.value.size.width) : ya(r.value.size.width)), g = i(
+      () => Qe.find((s) => s.type === r.value.widget.type)
+    ), p = he(() => {
+      var s;
+      t.value = ke((s = v.value) == null ? void 0 : s.$el.offsetWidth), a.value = ae();
+    }), w = i(() => {
+      if (Ze(_.value.type, x.value))
+        switch (r.value.widget.type) {
+          case n.BarChart:
+            return Ye;
+          case n.StackBarChart:
+            return fa;
+          case n.LineChart:
+            return wa;
+          case n.StackLineChart:
+            return ha;
+          case n.Circular:
+            return ea;
+          case n.Scorecard:
+            return ra;
+          case n.Spacer:
+            return ua;
+          case n.Table:
+            return va;
+          default:
+            return ge;
+        }
+      else
+        return ge;
+    }), x = D(null), { selectedLocationIds: N, dateRange: V, compareDateRange: I, timeRange: Z } = se(_e()), { businessId: xe } = se(ne()), _ = i(() => {
+      const s = JSON.parse(JSON.stringify(r.value.widget));
+      return {
+        ...s,
+        config: {
+          ...s.config,
+          rollup: c.value,
+          drillDimension: o.value,
+          showGrandTotal: !1
+        }
+      };
+    }), ie = i(() => {
+      let s, f, T, P;
+      switch (_.value.type) {
+        case n.Table:
+          T = M.value, P = _.value.config.rollupPosition;
+          break;
+        case n.BarChart:
+        case n.LineChart:
+        case n.StackBarChart:
+        case n.StackLineChart:
+        case n.Circular:
+          s = L.value, f = _.value.config.isTransposed;
+          break;
+      }
+      return {
+        data: x.value,
+        showLabel: s,
+        isTransposed: f,
+        rollupPosition: P,
+        filterText: T
+      };
+    }), ue = i(() => {
+      const { config: s } = r.value.widget;
+      if (s.rollup != null) {
+        const f = [...s.dimensions].filter((T) => !T.hide);
+        return f.sort(
+          (T, P) => (s.rowIds || []).indexOf(oe(T)) - (s.rowIds || []).indexOf(oe(P))
+        ), [
+          { label: "None", value: null },
+          { label: "Grand Total", value: 0 },
+          ...[...f].slice(0, f.length - 1).map((T, P) => ({ label: T.label, value: P + 1 }))
+        ];
+      }
+      return [];
+    }), O = i(() => {
+      const { config: s } = _.value;
+      return s.isDrillable ? s.dimensions.map((f) => ({
+        label: f.label,
+        value: oe(f)
+      })) : [];
+    });
+    ee(r.value, (s) => {
+      c.value = s.widget.config.rollup, L.value = s.widget.config.showLabel ?? !1;
+    }), ee([() => c.value], () => {
+      c.value !== null && (r.value.widget.config.rollup = c.value);
+    }), ee(
+      [
+        () => _.value,
+        () => V.value,
+        () => Z.value,
+        () => I.value,
+        () => N.value,
+        () => xe.value
+      ],
+      () => {
+        var s;
+        N.value && ((s = N.value) == null ? void 0 : s.length) > 0 && me();
+      },
+      {
+        deep: !0
+      }
+    ), ee(
+      [() => r.value.size],
+      () => {
+        p();
+      },
+      { deep: !0 }
+    ), Pe(() => {
+      p(), addEventListener("resize", p), me();
+    }), We(() => {
+      removeEventListener("resize", p);
+    });
+    const ce = Ke();
+    let X;
+    const me = he(async function() {
+      if (_.value.config.schemaNames.length <= 0 && !(_.value.config.dimensions.length <= 0 || _.value.config.metrics.length <= 0)) {
+        ce.open({
+          message: "schema must not be empty and dimension or metrics must have at least 1 column",
+          type: "info"
+        }), e.value = !1;
+        return;
+      }
+      try {
+        e.value = !0, X && X.abort(), X = new AbortController();
+        const f = X.signal;
+        x.value = await Ge(_.value, f), a.value = ae(), e.value = !1;
+      } catch (f) {
+        x.value = null, f.code !== "ERR_CANCELED" && (ce.open({ message: `Invalid chart ${_.value.type}`, type: "error" }), console.log(f), e.value = !1);
+      }
+    });
+    function ke(s) {
+      switch (r.value.widget.type) {
+        case "SPACER":
+          return;
+        case "SCORECARD":
+          return;
+        case "TABLE":
+          return `${r.value.size.height * 100 + (j.value ? 72 : 0) + 96.5}px`;
+      }
+      return `${Math.max(s / r.value.size.width, 90) * r.value.size.height}px`;
+    }
+    function Se() {
+      const s = u.value - 1;
+      s >= 0 && (o.value = O.value[s].value);
+    }
+    function De() {
+      const s = u.value + 1;
+      s >= 0 && s < O.value.length && (o.value = O.value[s].value);
+    }
+    const Fe = Object.values(qe).map((s) => ({
+      label: Ue(s),
+      value: s,
+      onClick: async () => {
+        await je(s, d.index);
+      }
+    })), Le = _.value.type === n.Spacer ? "flat" : "outlined", Re = _.value.type === n.Spacer ? "p-0" : "p-16";
+    return (s, f) => {
+      const T = y("FmTooltip"), P = y("FmSearch"), Te = y("FmCheckbox"), le = y("FmButton"), $e = y("FmSelect"), Ve = y("FmMenuItem"), Be = y("FmMenu"), Ae = y("FmForm"), Me = y("FmCircularProgress"), Ne = y("FmCard");
+      return h(), R(Ne, {
+        ref_key: "tileCard",
+        ref: v,
+        class: te(`${m.value} ${q(Re)}`),
+        variant: q(Le)
+      }, {
+        default: $(() => [
+          e.value ? (h(), R(Me, { key: 1 })) : (h(), S("div", {
+            key: 0,
+            style: ye({ height: t.value })
+          }, [
+            (h(), R(Ee(w.value), {
+              key: a.value,
+              modelValue: ie.value,
+              "onUpdate:modelValue": f[3] || (f[3] = (Y) => ie.value = Y)
+            }, {
+              menu: $(() => [
+                k(Ae, { class: "flex items-center gap-2" }, {
+                  default: $(() => {
+                    var Y, de, pe, ve;
+                    return [
+                      k(T, {
+                        variant: "plain",
+                        placement: "right",
+                        content: _.value.description,
+                        "hide-arrow": !0,
+                        disabled: !_.value.description
+                      }, {
+                        default: $(() => [
+                          C("p", {
+                            class: te(["fm-typo-en-body-md-400 line-clamp-1 text-fm-color-typo-secondary", `${_.value.description ? "border-b-2 border-dashed border-gray-300" : ""}`])
+                          }, K(_.value.title), 3)
+                        ]),
+                        _: 1
+                      }, 8, ["content", "disabled"]),
+                      (Y = g.value) != null && Y.showSearchBar ? (h(), R(P, {
+                        key: 0,
+                        modelValue: M.value,
+                        "onUpdate:modelValue": f[0] || (f[0] = (B) => M.value = B),
+                        class: "grow"
+                      }, null, 8, ["modelValue"])) : (h(), S("div", _a)),
+                      ze(k(Te, {
+                        modelValue: L.value,
+                        "onUpdate:modelValue": f[1] || (f[1] = (B) => L.value = B),
+                        label: "Label",
+                        value: !1
+                      }, null, 8, ["modelValue"]), [
+                        [He, (de = g.value) == null ? void 0 : de.showLabel]
+                      ]),
+                      (pe = g.value) != null && pe.showDrillDimension && O.value.length > 0 ? (h(), S("div", Ca, [
+                        k(le, {
+                          icon: "arrow_upward",
+                          variant: "tertiary",
+                          disabled: !F.value,
+                          onClick: Se
+                        }, null, 8, ["disabled"]),
+                        k(le, {
+                          icon: "arrow_downward",
+                          variant: "tertiary",
+                          disabled: !b.value,
+                          onClick: De
+                        }, null, 8, ["disabled"])
+                      ])) : G("", !0),
+                      (ve = g.value) != null && ve.showRollup && ue.value.length > 0 ? (h(), R($e, {
+                        key: 3,
+                        modelValue: c.value,
+                        "onUpdate:modelValue": f[2] || (f[2] = (B) => c.value = B),
+                        class: "w-[150px]",
+                        items: ue.value
+                      }, null, 8, ["modelValue", "items"])) : G("", !0),
+                      d.hideExport ? G("", !0) : (h(), R(Be, { key: 4 }, {
+                        "menu-button": $(() => [
+                          k(le, {
+                            icon: "more_vert",
+                            variant: "tertiary"
+                          })
+                        ]),
+                        default: $(() => [
+                          (h(!0), S(W, null, we(q(Fe), (B) => (h(), R(Ve, {
+                            key: B.value,
+                            label: B.label,
+                            onClick: B.onClick
+                          }, null, 8, ["label", "onClick"]))), 128))
+                        ]),
+                        _: 1
+                      }))
+                    ];
+                  }),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"]))
+          ], 4))
+        ]),
+        _: 1
+      }, 8, ["class", "variant"]);
+    };
+  }
+});
+export {
+  A as R,
+  La as _,
+  oe as g
+};