@feedmepos/mf-report 5.4.15-beta.1 → 5.4.15-beta.3

package/dist/DynamicWidget.vue_vue_type_script_setup_true_lang-C29g9w6o.js

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