@feedmepos/mf-report 5.14.1 → 5.14.2

package/dist/{DynamicWidget.vue_vue_type_script_setup_true_lang-AUYQMBzZ.js → DynamicWidget.vue_vue_type_script_setup_true_lang-BE9jLROO.js}

@@ -1,12 +1,12 @@
-import { computed as f, defineComponent as ee, mergeModels as me, useModel as te, ref as u, onMounted as Se, nextTick as X, watch as J, resolveComponent as P, createElementBlock as N, openBlock as W, Fragment as oe, renderSlot as pe, createVNode as V, normalizeStyle as ne, unref as l, createElementVNode as $, toDisplayString as Le, withCtx as q, createBlock as U, createCommentVNode as he, normalizeClass as $e, h as wt, renderList as _t, createTextVNode as Kt, onUnmounted as Zt, resolveDynamicComponent as Qt, withDirectives as ea, vShow as ta } from "vue";
-import { W as F, d as Ee, v as Be, e as Ye, f as Tt, q as aa, R as Fe, g as la } from "./BaseDialog.vue_vue_type_script_setup_true_lang-aFYkpOlH.js";
-import { u as Me, b as at, a as lt } from "./vue-i18n-DG0DIzwC.js";
-import { a as bt } from "./helper-C0VLdBRU.js";
-import { storeToRefs as ze, defineStore as oa } from "pinia";
-import { a as na } from "./SelectComponent.vue_vue_type_script_setup_true_lang-kzXPr73e.js";
+import { computed as y, defineComponent as ee, mergeModels as me, useModel as te, ref as h, onMounted as Se, nextTick as X, watch as J, resolveComponent as V, createElementBlock as N, openBlock as W, Fragment as oe, renderSlot as pe, createVNode as B, normalizeStyle as ne, unref as l, createElementVNode as P, toDisplayString as ze, withCtx as q, createBlock as U, createCommentVNode as he, normalizeClass as Pe, h as bt, renderList as _t, createTextVNode as Kt, onUnmounted as Zt, resolveDynamicComponent as Qt, withDirectives as ea, vShow as ta } from "vue";
+import { W as F, d as Ee, v as $e, e as Ye, f as kt, q as aa, R as Fe, g as la } from "./BaseDialog.vue_vue_type_script_setup_true_lang-BRk-mwHe.js";
+import { u as Me, b as at, a as lt } from "./vue-i18n-Fbuacdec.js";
+import { a as wt } from "./helper-8cjX1HJZ.js";
+import { storeToRefs as Le, defineStore as oa } from "pinia";
+import { a as na } from "./SelectComponent.vue_vue_type_script_setup_true_lang-C3hWhvK1.js";
 import { r as xe } from "./i18n-Cif1I9J2.js";
-import { _ as xt } from "./NoData.vue_vue_type_script_setup_true_lang-j8BlZPPp.js";
-import { components as sa, useSnackbar as kt, useBreakpoints as ra } from "@feedmepos/ui-library";
+import { _ as xt } from "./NoData.vue_vue_type_script_setup_true_lang-qEkm--BH.js";
+import { components as sa, useSnackbar as Tt, useBreakpoints as ra } from "@feedmepos/ui-library";
 var Je = /* @__PURE__ */ ((e) => (e.line = "LINE", e.bar = "BAR", e))(Je || {}), Z = /* @__PURE__ */ ((e) => (e.top = "TOP", e.bottom = "BOTTOM", e))(Z || {}), Ke = /* @__PURE__ */ ((e) => (e.start = "start", e.center = "center", e.end = "end", e))(Ke || {}), Ze = /* @__PURE__ */ ((e) => (e.start = "start", e.center = "center", e.end = "end", e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(Ze || {}), Qe = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e))(Qe || {}), et = /* @__PURE__ */ ((e) => (e.right = "right", e.left = "left", e))(et || {}), tt = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.right = "right", e.left = "left", e.chartArea = "chartArea", e))(tt || {});
 F.Circular, F.Table, F.BarChart, F.LineChart, F.StackBarChart, F.StackLineChart, F.Scorecard, F.Spacer;
 const ia = [
@@ -118,25 +118,25 @@ const Ct = [
 function Q({
   index: e,
   isCompare: n,
-  opacity: c
+  opacity: d
 }) {
-  let t = typeof c == "number" ? c : 1;
+  let t = typeof d == "number" ? d : 1;
   return n && (t = t * 0.6), `rgba(${Ct[e % Ct.length]}, ${t})`;
 }
-function Rt(e, n, c) {
+function Rt(e, n, d) {
   if (e === "" || n === "")
     return null;
-  let t = (z) => z == null ? void 0 : z.replace(/,/g, "");
-  c === "ID" && (t = (z) => z == null ? void 0 : z.replace(/\./g, "").replace(/,/g, "."));
-  const x = Number(t(e)), R = Number(t(n));
-  if (isNaN(x) || isNaN(R))
+  let t = (L) => L == null ? void 0 : L.replace(/,/g, "");
+  d === "ID" && (t = (L) => L == null ? void 0 : L.replace(/\./g, "").replace(/,/g, "."));
+  const x = Number(t(e)), C = Number(t(n));
+  if (isNaN(x) || isNaN(C))
     return null;
-  let _ = 0;
-  R === 0 ? x === 0 ? _ = 0 : _ = 1 : _ = (x - R) / R;
-  const L = ca(_);
+  let k = 0;
+  C === 0 ? x === 0 ? k = 0 : k = 1 : k = (x - C) / C;
+  const z = ca(k);
   return {
-    value: isNaN(_) ? "" : `${(_ * 100).toFixed(0)}%`,
-    icon: L
+    value: isNaN(k) ? "" : `${(k * 100).toFixed(0)}%`,
+    icon: z
   };
 }
 function ca(e) {
@@ -155,17 +155,17 @@ function ca(e) {
   };
 }
 function We(e) {
-  function n(m, d, r) {
-    if (m.measureText(d).width <= r) return d;
+  function n(c, u, r) {
+    if (c.measureText(u).width <= r) return u;
     const i = "…";
-    let b = 0, v = d.length;
-    for (; b < v; ) {
-      const y = Math.floor((b + v) / 2), w = d.slice(0, y) + i;
-      m.measureText(w).width <= r ? b = y + 1 : v = y;
+    let w = 0, p = u.length;
+    for (; w < p; ) {
+      const f = Math.floor((w + p) / 2), g = u.slice(0, f) + i;
+      c.measureText(g).width <= r ? w = f + 1 : p = f;
     }
-    return d.slice(0, b - 1) + i;
+    return u.slice(0, w - 1) + i;
   }
-  const c = f(() => ({
+  const d = y(() => ({
     display: e.showLabel,
     align: e.labelAlign,
     anchor: e.labelAnchor,
@@ -174,12 +174,12 @@ function We(e) {
     font: {
       size: e.labelFontSize
     },
-    color: (m) => {
-      const d = m.chart.data.datasets[m.datasetIndex];
-      return d.borderColor ? Array.isArray(d.borderColor) ? d.borderColor[m.dataIndex] : d.borderColor : d.backgroundColor ? Array.isArray(d.backgroundColor) ? d.backgroundColor[m.dataIndex] : d.backgroundColor : "#000";
+    color: (c) => {
+      const u = c.chart.data.datasets[c.datasetIndex];
+      return u.borderColor ? Array.isArray(u.borderColor) ? u.borderColor[c.dataIndex] : u.borderColor : u.backgroundColor ? Array.isArray(u.backgroundColor) ? u.backgroundColor[c.dataIndex] : u.backgroundColor : "#000";
     },
-    formatter: (m) => m === 0 ? "" : m.toLocaleString("en-US")
-  })), t = f(() => ({
+    formatter: (c) => c === 0 ? "" : c.toLocaleString("en-US")
+  })), t = y(() => ({
     display: e.showX,
     position: e.xPosition,
     grid: {
@@ -187,16 +187,16 @@ function We(e) {
     },
     ticks: {
       display: e.showXTick,
-      callback: function(m) {
-        if ((e == null ? void 0 : e.isTransposed) === !0) return String(m);
-        let r = String(m);
+      callback: function(c) {
+        if ((e == null ? void 0 : e.isTransposed) === !0) return String(c);
+        let r = String(c);
         const i = this;
-        i && typeof i.getLabelForValue == "function" && (r = i.getLabelForValue(m));
-        const b = i == null ? void 0 : i.chart, v = i == null ? void 0 : i.ctx, y = b.height * 0.25;
-        if (v && y > 0) {
-          v.save();
-          const E = v.measureText(r).width > y ? n(v, r, y) : r;
-          return v.restore(), E;
+        i && typeof i.getLabelForValue == "function" && (r = i.getLabelForValue(c));
+        const w = i == null ? void 0 : i.chart, p = i == null ? void 0 : i.ctx, f = w.height * 0.25;
+        if (p && f > 0) {
+          p.save();
+          const E = p.measureText(r).width > f ? n(p, r, f) : r;
+          return p.restore(), E;
         }
         return r;
       },
@@ -211,19 +211,19 @@ function We(e) {
         size: e.xTitleFontSize
       }
     },
-    afterBuildTicks: (m) => {
-      const d = Array.isArray(m == null ? void 0 : m.ticks) ? m.ticks : [];
-      if (d.length === 0) return;
-      const r = m.getLabelForValue(d[0].value), i = !isNaN(Number(r));
-      m.options.ticks.minRotation = i || d.length < 10 ? 0 : 90;
+    afterBuildTicks: (c) => {
+      const u = Array.isArray(c == null ? void 0 : c.ticks) ? c.ticks : [];
+      if (u.length === 0) return;
+      const r = c.getLabelForValue(u[0].value), i = !isNaN(Number(r));
+      c.options.ticks.minRotation = i || u.length < 10 ? 0 : 90;
     },
-    afterFit: (m) => {
+    afterFit: (c) => {
       if (!(e != null && e.isTransposed)) {
-        const d = m.chart.height * 0.4;
-        m.height > d && (m.height = d);
+        const u = c.chart.height * 0.4;
+        c.height > u && (c.height = u);
       }
     }
-  })), x = f(() => ({
+  })), x = y(() => ({
     display: e.showY,
     position: e.yPosition,
     grid: {
@@ -234,16 +234,16 @@ function We(e) {
       font: {
         size: e.yTickFontSize
       },
-      callback: function(m) {
-        if (!((e == null ? void 0 : e.isTransposed) === !0)) return String(m);
-        let r = String(m);
+      callback: function(c) {
+        if (!((e == null ? void 0 : e.isTransposed) === !0)) return String(c);
+        let r = String(c);
         const i = this;
-        i && typeof i.getLabelForValue == "function" && (r = i.getLabelForValue(m));
-        const b = i == null ? void 0 : i.chart, v = i == null ? void 0 : i.ctx, y = b.width * 0.4;
-        if (v && y > 0) {
-          v.save();
-          const E = v.measureText(r).width > y ? n(v, r, y) : r;
-          return v.restore(), E;
+        i && typeof i.getLabelForValue == "function" && (r = i.getLabelForValue(c));
+        const w = i == null ? void 0 : i.chart, p = i == null ? void 0 : i.ctx, f = w.width * 0.4;
+        if (p && f > 0) {
+          p.save();
+          const E = p.measureText(r).width > f ? n(p, r, f) : r;
+          return p.restore(), E;
         }
         return r;
       }
@@ -255,14 +255,48 @@ function We(e) {
         size: e.yTitleFontSize
       }
     }
-  })), R = f(() => ({
+  })), C = y(() => ({
     display: e.showLegend,
     position: e.legendPosition,
     usePointStyle: e.usePointStyle,
     maxHeight: e.legendMaxHeight,
-    maxWidth: e.legendMaxWidth
-  })), _ = f(() => e.isTransposed), L = f(() => e.chartWidth), z = f(() => e.chartHeight);
-  return { datalabels: c, xCfg: t, yCfg: x, isTransposed: _, legend: R, chartWidth: L, chartHeight: z };
+    maxWidth: e.legendMaxWidth,
+    labels: {
+      usePointStyle: e.usePointStyle ?? !0,
+      generateLabels: (c) => {
+        var r;
+        const u = ((r = c == null ? void 0 : c.data) == null ? void 0 : r.datasets) || [];
+        if (u.length === 0) return [];
+        if (u.length === 1 && Array.isArray(u[0].backgroundColor) && u[0].backgroundColor.length > 1 && Array.isArray(u[0].data)) {
+          const i = u[0];
+          return c.data.labels.map((p, f) => {
+            const g = i.backgroundColor[f];
+            return {
+              text: p,
+              fontColor: "#6b6b6b",
+              fillStyle: g,
+              strokeStyle: g,
+              datasetIndex: 0,
+              index: f,
+              hidden: c.getDataVisibility ? !c.getDataVisibility(f) : !1
+            };
+          });
+        }
+        return c.data.datasets.map((i, w) => {
+          const p = i.borderColor || i.backgroundColor;
+          return {
+            text: i.label,
+            fontColor: "#6b6b6b",
+            fillStyle: p,
+            strokeStyle: p,
+            datasetIndex: w,
+            hidden: !c.isDatasetVisible(w)
+          };
+        });
+      }
+    }
+  })), k = y(() => e.isTransposed), z = y(() => e.chartWidth), L = y(() => e.chartHeight);
+  return { datalabels: d, xCfg: t, yCfg: x, isTransposed: k, legend: C, chartWidth: z, chartHeight: L };
 }
 const da = /* @__PURE__ */ ee({
   __name: "WidgetBarchart",
@@ -274,54 +308,52 @@ const da = /* @__PURE__ */ ee({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const n = e, c = te(e, "modelValue"), t = u(null), x = f(() => {
-      var w;
-      return ((w = c.value.data) == null ? void 0 : w.xAxis) ?? [];
-    }), R = f(() => {
-      var w;
-      return ((w = c.value.data) == null ? void 0 : w.datasets) ?? [];
-    }), { datalabels: _, xCfg: L, yCfg: z, isTransposed: m, legend: d, chartWidth: r, chartHeight: i } = We(
-      c.value
-    ), b = f(() => R.value.length > 0 ? [
-      ...R.value.map((w, E) => ({
-        label: w.name,
-        data: w.values,
-        dash: !!w.isCompare,
-        backgroundColor: Q({ index: E, isCompare: w.isCompare })
+    const n = e, d = te(e, "modelValue"), t = h(null), x = y(() => {
+      var g;
+      return ((g = d.value.data) == null ? void 0 : g.xAxis) ?? [];
+    }), C = y(() => {
+      var g;
+      return ((g = d.value.data) == null ? void 0 : g.datasets) ?? [];
+    }), { datalabels: k, xCfg: z, yCfg: L, isTransposed: c, legend: u, chartWidth: r, chartHeight: i } = We(
+      d.value
+    ), w = y(() => C.value.length > 0 ? [
+      ...C.value.map((g, E) => ({
+        label: g.name,
+        data: g.values,
+        dash: !!g.isCompare,
+        backgroundColor: Q({ index: E, isCompare: g.isCompare })
       }))
-    ] : []), v = Ee();
-    function y() {
-      return v.extractChartSize(t.value, n.tileIndex) || { width: 0, height: 0 };
+    ] : []), p = Ee();
+    function f() {
+      return p.extractChartSize(t.value, n.tileIndex) || { width: 0, height: 0 };
     }
     return Se(() => {
       X(() => {
-        y();
+        f();
       });
-    }), J([b], () => {
-      X(() => y());
-    }), (w, E) => {
-      const h = P("FmBarChart");
+    }), J([w], () => {
+      X(() => f());
+    }), (g, E) => {
+      const m = V("FmBarChart");
       return W(), N(oe, null, [
-        pe(w.$slots, "menu"),
-        V(h, {
+        pe(g.$slots, "menu"),
+        B(m, {
           ref_key: "chartRef",
           ref: t,
           class: "bar-chart",
-          datasets: b.value,
+          datasets: w.value,
           "x-axis": { categories: x.value },
-          "x-cfg": l(L),
-          "y-cfg": l(z),
-          transpose: l(m),
+          "x-cfg": l(z),
+          "y-cfg": l(L),
+          transpose: l(c),
           legend: {
-            display: l(d).display ?? !1,
-            position: l(d).position,
-            maxHeight: l(d).maxHeight,
-            maxWidth: l(d).maxWidth,
-            labels: {
-              usePointStyle: l(d).usePointStyle ?? !0
-            }
+            display: l(u).display ?? !1,
+            position: l(u).position,
+            maxHeight: l(u).maxHeight,
+            maxWidth: l(u).maxWidth,
+            labels: l(u).labels
           },
-          datalabels: l(_),
+          datalabels: l(k),
           "maintain-aspect-ratio": !1,
           style: ne({
             "--chart-width": l(r) !== void 0 ? l(r) + "px" : "100%",
@@ -341,51 +373,49 @@ const da = /* @__PURE__ */ ee({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const n = e, c = te(e, "modelValue"), t = u(null), { datalabels: x, legend: R, chartWidth: _, chartHeight: L } = We(c.value), z = f(() => {
+    const n = e, d = te(e, "modelValue"), t = h(null), { datalabels: x, legend: C, chartWidth: k, chartHeight: z } = We(d.value), L = y(() => {
       let r = [];
-      return c.value.data.datasets && c.value.data.metrics && c.value.data.datasets.length > 0 && c.value.data.metrics.length > 0 && (r = [
+      return d.value.data.datasets && d.value.data.metrics && d.value.data.datasets.length > 0 && d.value.data.metrics.length > 0 && (r = [
         {
-          label: c.value.data.metrics[0],
-          data: c.value.data.datasets.map((i) => i.value),
-          backgroundColor: c.value.data.datasets.map((i, b) => Q({ index: b }))
+          label: d.value.data.metrics[0],
+          data: d.value.data.datasets.map((i) => i.value),
+          backgroundColor: d.value.data.datasets.map((i, w) => Q({ index: w }))
         }
       ]), r;
-    }), m = Ee();
-    function d() {
-      return m.extractChartSize(t.value, n.tileIndex) || { width: 0, height: 0 };
+    }), c = Ee();
+    function u() {
+      return c.extractChartSize(t.value, n.tileIndex) || { width: 0, height: 0 };
     }
     return Se(() => {
       X(() => {
-        d();
+        u();
       });
-    }), J([z], () => {
-      X(() => d());
+    }), J([L], () => {
+      X(() => u());
     }), (r, i) => {
-      const b = P("FmPieChart");
+      const w = V("FmPieChart");
       return W(), N(oe, null, [
         pe(r.$slots, "menu"),
-        V(b, {
+        B(w, {
           ref_key: "chartRef",
           ref: t,
           class: "circular",
           percentage: "70%",
-          datasets: z.value,
-          metrics: c.value.data.datasets.map((v) => v.name),
+          datasets: L.value,
+          metrics: d.value.data.datasets.map((p) => p.name),
           variant: "doughnut",
           legend: {
-            display: l(R).display ?? !0,
-            position: l(R).position ?? "top",
-            maxHeight: l(R).maxHeight ?? 54,
-            maxWidth: l(R).maxWidth,
-            labels: {
-              usePointStyle: l(R).usePointStyle ?? !0
-            }
+            display: l(C).display ?? !0,
+            position: l(C).position ?? "top",
+            maxHeight: l(C).maxHeight ?? 54,
+            maxWidth: l(C).maxWidth,
+            labels: l(C).labels
           },
           datalabels: l(x),
           "maintain-aspect-ratio": !1,
           style: ne({
-            "--chart-width": l(_) !== void 0 ? l(_) + "px" : "100%",
-            "--chart-height": l(L) !== void 0 ? l(L) + "px" : "calc(100% - 36px)"
+            "--chart-width": l(k) !== void 0 ? l(k) + "px" : "100%",
+            "--chart-height": l(z) !== void 0 ? l(z) + "px" : "calc(100% - 36px)"
           })
         }, null, 8, ["datasets", "metrics", "legend", "datalabels", "style"])
       ], 64);
@@ -399,14 +429,14 @@ const da = /* @__PURE__ */ ee({
   },
   emits: ["update:modelValue"],
   setup(e) {
-    const n = te(e, "modelValue"), { t: c } = Me(), { compareDateRange: t, defaultDateSetting: x } = ze(at()), { country: R } = lt(), _ = f(() => {
+    const n = te(e, "modelValue"), { t: d } = Me(), { compareDateRange: t, defaultDateSetting: x } = Le(at()), { country: C } = lt(), k = y(() => {
       var r;
       return ((r = n.value.data) == null ? void 0 : r.value) || "";
-    }), L = f(() => {
+    }), z = y(() => {
       const { data: r } = n.value;
-      return r != null && r.comparison ? Rt(_.value, r.comparison, R) : null;
+      return r != null && r.comparison ? Rt(k.value, r.comparison, C) : null;
     });
-    function z(r) {
+    function L(r) {
       switch (r) {
         case Je.bar:
           return "bar";
@@ -416,10 +446,10 @@ const da = /* @__PURE__ */ ee({
           return "line";
       }
     }
-    const m = f(() => {
+    const c = y(() => {
       var r;
       return (r = n.value.data) == null ? void 0 : r.sparkline;
-    }), d = f(() => m.value.datasets.map((r) => ({
+    }), u = y(() => c.value.datasets.map((r) => ({
       label: r.name,
       data: r.values,
       fill: !0,
@@ -427,46 +457,46 @@ const da = /* @__PURE__ */ ee({
     })));
     return (r, i) => {
       var E;
-      const b = P("FmIcon"), v = P("FmChip"), y = P("FmTooltip"), w = P("FmLineChart");
+      const w = V("FmIcon"), p = V("FmChip"), f = V("FmTooltip"), g = V("FmLineChart");
       return W(), N("div", ma, [
         pe(r.$slots, "menu"),
-        $("p", pa, Le(_.value), 1),
-        $("div", fa, [
-          V(y, {
+        P("p", pa, ze(k.value), 1),
+        P("div", fa, [
+          B(f, {
             content: `vs. ${(E = l(x).defaultCompareType) == null ? void 0 : E.split("_").join(" ")}`,
             placement: "right",
             "hide-arrow": "",
             variant: "plain"
           }, {
             default: q(() => [
-              L.value ? (W(), U(v, {
+              z.value ? (W(), U(p, {
                 key: 0,
-                icon: L.value.icon.name,
-                class: $e(`bg-${L.value.icon.tailwind}`),
+                icon: z.value.icon.name,
+                class: Pe(`bg-${z.value.icon.tailwind}`),
                 compact: ""
               }, {
                 default: q(() => [
-                  V(b, {
-                    name: L.value.icon.name,
-                    color: L.value.icon.color
+                  B(w, {
+                    name: z.value.icon.name,
+                    color: z.value.icon.color
                   }, null, 8, ["name", "color"]),
-                  $("p", {
+                  P("p", {
                     class: "fm-typo-en-body-md-600",
-                    style: ne({ color: L.value.icon.color })
-                  }, Le(L.value.value), 5)
+                    style: ne({ color: z.value.icon.color })
+                  }, ze(z.value.value), 5)
                 ]),
                 _: 1
               }, 8, ["icon", "class"])) : he("", !0),
-              l(t).endDate !== null && l(t).startDate !== null && L.value === null ? (W(), U(v, {
+              l(t).endDate !== null && l(t).startDate !== null && z.value === null ? (W(), U(p, {
                 key: 1,
                 compact: ""
               }, {
                 default: q(() => [
-                  V(b, {
+                  B(w, {
                     name: "arrow_upward",
                     color: "#C7C7CC"
                   }),
-                  i[0] || (i[0] = $("p", { class: "fm-typo-en-body-md-600 text-fm-color-typo-disabled" }, "N/A", -1))
+                  i[0] || (i[0] = P("p", { class: "fm-typo-en-body-md-600 text-fm-color-typo-disabled" }, "N/A", -1))
                 ]),
                 _: 1
               })) : he("", !0)
@@ -474,179 +504,181 @@ const da = /* @__PURE__ */ ee({
             _: 1
           }, 8, ["content"])
         ]),
-        m.value ? (W(), N("div", va, [
-          z(m.value.type) === "line" ? (W(), U(w, {
+        c.value ? (W(), N("div", va, [
+          L(c.value.type) === "line" ? (W(), U(g, {
             key: 0,
             class: "sparkline",
-            datasets: d.value,
+            datasets: u.value,
             legend: {
               display: !1
             },
             datalabels: { display: !1 },
-            "x-axis": { categories: m.value.dimensions },
+            "x-axis": { categories: c.value.dimensions },
             "y-cfg": { display: !1 },
             "x-cfg": { display: !1 },
             "maintain-aspect-ratio": !1
           }, null, 8, ["datasets", "x-axis"])) : he("", !0)
         ])) : (W(), N("div", ga, i[1] || (i[1] = [
-          $("div", { class: "sparkline" }, [
-            $("div", { class: "flex flex-col gap-8" }, [
-              $("div"),
-              $("div")
+          P("div", { class: "sparkline" }, [
+            P("div", { class: "flex flex-col gap-8" }, [
+              P("div"),
+              P("div")
             ]),
-            $("div", { class: "grow" })
+            P("div", { class: "grow" })
           ], -1)
         ])))
       ]);
     };
   }
-}), wa = {};
-function ba(e, n) {
-  const c = P("FmMenuDivider");
-  return W(), U(c);
+}), ba = {};
+function wa(e, n) {
+  const d = V("FmMenuDivider");
+  return W(), U(d);
 }
-const xa = /* @__PURE__ */ na(wa, [["render", ba]]), Ca = "mf-reporttable-dimension", St = oa(Ca, () => {
-  const e = u(0), n = u([]), c = u(!1), t = (h, s) => {
-    e.value = h, R(h, s);
-  }, x = (h, s, g, C) => {
-    n[h] = s, n.value = [...n.value], _(h, s, g, C);
-  }, R = (h, s) => {
-    const g = (s == null ? void 0 : s.querySelectorAll("thead tr")) ?? [], C = (s == null ? void 0 : s.querySelectorAll("tbody tr")) ?? [];
-    [...g, ...C].forEach((D) => {
-      const o = D;
-      o && (o.style.height = `${h}px`);
+const xa = /* @__PURE__ */ na(ba, [["render", wa]]), Ca = "mf-reporttable-dimension", St = oa(Ca, () => {
+  const e = h(0), n = h([]), d = h(!1), t = (m, s) => {
+    e.value = m, C(m, s);
+  }, x = (m, s, b, S) => {
+    n[m] = s, n.value = [...n.value], k(m, s, b, S);
+  }, C = (m, s) => {
+    const b = (s == null ? void 0 : s.querySelectorAll("thead tr")) ?? [], S = (s == null ? void 0 : s.querySelectorAll("tbody tr")) ?? [];
+    [...b, ...S].forEach((A) => {
+      const o = A;
+      o && (o.style.height = `${m}px`);
     });
-  }, _ = (h, s, g, C = !1) => {
-    const S = (g == null ? void 0 : g.querySelectorAll("th")) ?? [];
-    if (h === void 0) return;
-    const D = S[h], o = C ? n[h] : s;
-    if (!D || o === void 0) return;
-    const p = () => {
-      D.style.width = `${o}px`;
+  }, k = (m, s, b, S = !1) => {
+    const _ = (b == null ? void 0 : b.querySelectorAll("th")) ?? [];
+    if (m === void 0) return;
+    const A = _[m], o = S ? n[m] : s;
+    if (!A || o === void 0) return;
+    const v = () => {
+      A.style.width = `${o}px`;
     };
-    C ? requestAnimationFrame(p) : p();
-  }, L = () => {
-    const h = document.querySelectorAll("th"), s = document.querySelectorAll("td"), g = document.querySelector("table");
-    g == null || g.classList.add("table-fixed"), h.forEach((C) => C.classList.add("toggleEditResize")), s.forEach((C) => C.classList.add("toggleEditResize")), c.value = !0;
+    S ? requestAnimationFrame(v) : v();
   }, z = () => {
-    const h = document.querySelectorAll("th"), s = document.querySelectorAll("td"), g = document.querySelectorAll(".col-resize-handle"), C = document.querySelectorAll(".row-resize-handle");
-    h.forEach((S) => S.classList.remove("toggleEditResize")), s.forEach((S) => S.classList.remove("toggleEditResize")), g.forEach((S) => S.remove()), C.forEach((S) => S.remove()), c.value = !1;
-  }, m = () => {
+    const m = document.querySelectorAll("th"), s = document.querySelectorAll("td"), b = document.querySelector("table");
+    b == null || b.classList.add("table-fixed"), m.forEach((S) => S.classList.add("toggleEditResize")), s.forEach((S) => S.classList.add("toggleEditResize")), d.value = !0;
+  }, L = () => {
+    const m = document.querySelectorAll("th"), s = document.querySelectorAll("td"), b = document.querySelectorAll(".col-resize-handle"), S = document.querySelectorAll(".row-resize-handle");
+    m.forEach((_) => _.classList.remove("toggleEditResize")), s.forEach((_) => _.classList.remove("toggleEditResize")), b.forEach((_) => _.remove()), S.forEach((_) => _.remove()), d.value = !1;
+  }, c = () => {
     e.value = 0, n.value = [];
-  }, d = (h, s) => {
+  }, u = (m, s) => {
     if (s) {
-      const g = document.querySelectorAll(`thead th:nth-child(${h + 1})`), C = document.querySelectorAll(`tbody td:nth-child(${h + 1})`);
-      [...g, ...C].forEach((S) => {
-        S.classList.add("highlight-hover-col");
+      const b = document.querySelectorAll(`thead th:nth-child(${m + 1})`), S = document.querySelectorAll(`tbody td:nth-child(${m + 1})`);
+      [...b, ...S].forEach((_) => {
+        _.classList.add("highlight-hover-col");
       });
     } else
       document.querySelectorAll(
-        `thead th:nth-child(${h + 1}), tbody td:nth-child(${h + 1})`
-      ).forEach((g) => g.classList.add("highlight-col"));
-  }, r = (h) => {
-    const s = document.querySelectorAll("thead tr"), g = document.querySelectorAll("tbody tr"), C = [...s, ...g];
-    for (const S of C)
-      h ? S.classList.add("highlight-hover-row") : S.classList.add("highlight-row");
-  }, i = (h) => {
-    const s = h ? ".highlight-hover-row" : ".highlight-row", g = document.querySelectorAll(s);
-    for (const C of g)
-      C.classList.remove(s.slice(1));
-  }, b = (h) => {
-    h ? document.querySelectorAll(".highlight-hover-col").forEach((s) => {
+        `thead th:nth-child(${m + 1}), tbody td:nth-child(${m + 1})`
+      ).forEach((b) => b.classList.add("highlight-col"));
+  }, r = (m) => {
+    const s = document.querySelectorAll("thead tr"), b = document.querySelectorAll("tbody tr"), S = [...s, ...b];
+    for (const _ of S)
+      m ? _.classList.add("highlight-hover-row") : _.classList.add("highlight-row");
+  }, i = (m) => {
+    const s = m ? ".highlight-hover-row" : ".highlight-row", b = document.querySelectorAll(s);
+    for (const S of b)
+      S.classList.remove(s.slice(1));
+  }, w = (m) => {
+    m ? document.querySelectorAll(".highlight-hover-col").forEach((s) => {
       s.classList.remove("highlight-hover-col");
     }) : document.querySelectorAll(".highlight-col").forEach((s) => s.classList.remove("highlight-col"));
-  }, v = (h, s) => {
-    const g = /* @__PURE__ */ new Map(), C = h.clientX, S = h.target.closest("table"), D = S == null ? void 0 : S.querySelectorAll("th")[s], o = D == null ? void 0 : D.getBoundingClientRect().width, p = g.get(s) ? n[s.toString()] || 60 : (g.set(s, !0), o || n[s.toString()] || 60), k = D == null ? void 0 : D.querySelector("p");
-    if (!k) return;
-    const T = k.textContent || "", A = window.getComputedStyle(k), H = `${A.fontWeight} ${A.fontSize} ${A.fontFamily}`, O = document.createElement("canvas").getContext("2d");
+  }, p = (m, s) => {
+    const b = /* @__PURE__ */ new Map(), S = m.clientX, _ = m.target.closest("table"), A = _ == null ? void 0 : _.querySelectorAll("th")[s], o = A == null ? void 0 : A.getBoundingClientRect().width, v = b.get(s) ? n[s.toString()] || 60 : (b.set(s, !0), o || n[s.toString()] || 60), R = A == null ? void 0 : A.querySelector("p");
+    if (!R) return;
+    const T = R.textContent || "", D = window.getComputedStyle(R), H = `${D.fontWeight} ${D.fontSize} ${D.fontFamily}`, O = document.createElement("canvas").getContext("2d");
     if (!O) return;
     O.font = H;
-    const G = O.measureText(T), j = window.getComputedStyle(D), De = parseFloat(j.paddingLeft || "0"), Ae = parseFloat(j.paddingRight || "0"), Pe = G.width + De + Ae;
-    d(s, !1);
+    const G = O.measureText(T), j = window.getComputedStyle(A), Ae = parseFloat(j.paddingLeft || "0"), De = parseFloat(j.paddingRight || "0"), Ve = G.width + Ae + De;
+    u(s, !1);
     const _e = (fe) => {
-      const se = fe.clientX - C, re = Math.max(Pe, p + se);
-      if (S) {
-        x(s, re, S, !0);
+      const se = fe.clientX - S, re = Math.max(Ve, v + se);
+      if (_) {
+        x(s, re, _, !0);
         let ae = 0;
-        S.querySelectorAll("th").forEach((ie, ue) => {
+        _.querySelectorAll("th").forEach((ie, ue) => {
           ae += ue === s ? re : n[ue] || ie.getBoundingClientRect().width;
-        }), S.classList.remove("w-full"), S.style.width = `${ae}px`;
-        const le = S == null ? void 0 : S.parentElement;
+        }), _.classList.remove("w-full"), _.style.width = `${ae}px`;
+        const le = _ == null ? void 0 : _.parentElement;
         if (le) {
           const ie = le.scrollWidth, ue = le.scrollLeft;
           le.offsetWidth + ue >= ie - 100 && (le.scrollLeft = ie);
         }
       }
-    }, Te = () => {
-      const fe = (S == null ? void 0 : S.querySelectorAll("th")) ?? [], se = [...n.value];
+    }, ke = () => {
+      const fe = (_ == null ? void 0 : _.querySelectorAll("th")) ?? [], se = [...n.value];
       fe.forEach((re, ae) => {
         const ve = re.getBoundingClientRect().width;
         n[ae] = ve, se[ae] = ve;
-      }), n.value = se, b(!1), document.removeEventListener("mousemove", _e), document.removeEventListener("mouseup", Te);
+      }), n.value = se, w(!1), document.removeEventListener("mousemove", _e), document.removeEventListener("mouseup", ke);
     };
-    document.addEventListener("mousemove", _e), document.addEventListener("mouseup", Te);
-  }, y = (h) => {
-    const s = h.clientY, g = h.target.closest("table"), C = e.value || 48;
+    document.addEventListener("mousemove", _e), document.addEventListener("mouseup", ke);
+  }, f = (m) => {
+    const s = m.clientY, b = m.target.closest("table"), S = e.value || 48;
     r(!1);
-    const S = (o) => {
-      const p = Math.max(30, C + (o.clientY - s));
-      g && t(p, g);
-    }, D = () => {
-      i(!1), document.removeEventListener("mousemove", S), document.removeEventListener("mouseup", D);
+    const _ = (o) => {
+      const v = Math.max(30, S + (o.clientY - s));
+      b && t(v, b);
+    }, A = () => {
+      i(!1), document.removeEventListener("mousemove", _), document.removeEventListener("mouseup", A);
     };
-    document.addEventListener("mousemove", S), document.addEventListener("mouseup", D);
+    document.addEventListener("mousemove", _), document.addEventListener("mouseup", A);
   };
   return {
     rowHeight: e,
     colWidths: n,
-    isEditing: c,
+    isEditing: d,
     updateRowHeight: t,
     updateColWidth: x,
-    setRowHeights: R,
-    setColWidths: _,
-    enableEditMode: L,
-    disableEditMode: z,
-    resetStore: m,
-    highlightCol: d,
+    setRowHeights: C,
+    setColWidths: k,
+    enableEditMode: z,
+    disableEditMode: L,
+    resetStore: c,
+    highlightCol: u,
     highlightRows: r,
     removeRowHighlight: i,
-    removeColHighlight: b,
-    resizeCol: v,
-    resizeRow: y,
+    removeColHighlight: w,
+    resizeCol: p,
+    resizeRow: f,
     enableCellResizing: () => {
-      const h = document.querySelector("thead"), s = document.querySelectorAll("thead tr"), g = document.querySelectorAll("tbody tr"), C = [...s, ...g];
-      h && h.classList.remove("sticky");
-      const S = (D, o) => {
-        const p = document.createElement("div");
-        return p.className = `${D}-resize-handle`, D === "col" ? (p.addEventListener("mouseenter", () => d(o, !0)), p.addEventListener("mouseleave", () => b(!0)), p.addEventListener("mousedown", (k) => {
-          k.stopPropagation(), v(k, o);
-        })) : (p.addEventListener("mouseenter", () => r(!0)), p.addEventListener("mouseleave", () => i(!0)), p.addEventListener("mousedown", (k) => {
-          k.stopPropagation(), y(k);
-        })), p;
+      const m = document.querySelector("thead"), s = document.querySelectorAll("thead tr"), b = document.querySelectorAll("tbody tr"), S = [...s, ...b];
+      m && m.classList.remove("sticky");
+      const _ = (A, o) => {
+        const v = document.createElement("div");
+        return v.className = `${A}-resize-handle`, A === "col" ? (v.addEventListener("mouseenter", () => u(o, !0)), v.addEventListener("mouseleave", () => w(!0)), v.addEventListener("mousedown", (R) => {
+          R.stopPropagation(), p(R, o);
+        })) : (v.addEventListener("mouseenter", () => r(!0)), v.addEventListener("mouseleave", () => i(!0)), v.addEventListener("mousedown", (R) => {
+          R.stopPropagation(), f(R);
+        })), v;
       };
-      C.forEach((D) => {
-        const o = D.closest("thead") !== null;
-        D.querySelectorAll(o ? "th" : "td").forEach((k, T) => {
-          const A = S("col", T), H = S("row", T);
-          k.appendChild(A), k.appendChild(H);
+      S.forEach((A) => {
+        const o = A.closest("thead") !== null;
+        A.querySelectorAll(o ? "th" : "td").forEach((R, T) => {
+          const D = _("col", T), H = _("row", T);
+          R.appendChild(D), R.appendChild(H);
         });
-      }), L();
+      }), z();
     },
     cancelResizingChanges: () => {
-      z();
+      L();
     }
   };
 });
 function je(e) {
   if (e == null || e === "")
     return "";
-  const n = typeof e == "number" ? e : Number(e);
-  return isNaN(n) ? String(e) : new Intl.NumberFormat("en-US").format(n);
+  const n = String(e), d = Number(n);
+  if (isNaN(d)) return n;
+  const [t, x] = n.split("."), C = new Intl.NumberFormat("en-US").format(Number(t));
+  return x !== void 0 ? `${C}.${x}` : C;
 }
 const Sa = { class: "my-4" }, _a = {
   class: "border-b border-fm-color-neutral-gray-100 hover:bg-fm-color-opacity-sm",
   style: { backgroundColor: "#f9f9f9" }
-}, Ta = { class: "font-bold" }, ka = { class: "text-fm-color-neutral-gray-300" }, Ra = /* @__PURE__ */ ee({
+}, ka = { class: "font-bold" }, Ta = { class: "text-fm-color-neutral-gray-300" }, Ra = /* @__PURE__ */ ee({
   __name: "WidgetTable",
   props: {
     modelValue: { required: !0 },
@@ -654,86 +686,86 @@ const Sa = { class: "my-4" }, _a = {
   },
   emits: ["update:modelValue"],
   setup(e) {
-    const { t: n, te: c } = Me(), t = te(e, "modelValue"), { country: x } = lt(), { isEditing: R, colWidths: _, rowHeight: L } = ze(St()), { setColWidths: z, setRowHeights: m, enableCellResizing: d } = St(), r = u(null), i = f(() => {
+    const { t: n, te: d } = Me(), t = te(e, "modelValue"), { country: x } = lt(), { isEditing: C, colWidths: k, rowHeight: z } = Le(St()), { setColWidths: L, setRowHeights: c, enableCellResizing: u } = St(), r = h(null), i = y(() => {
       var o;
       return ((o = t.value.data) == null ? void 0 : o.columns) || [{ label: "", key: "" }];
-    }), b = f(() => {
+    }), w = y(() => {
       var o;
       return ((o = t.value.data) == null ? void 0 : o.rows) || [];
-    }), v = f(() => t.value.filterText), y = f(() => {
-      var o, p;
-      if (!(v.value && v.value.trim().length > 0 || !((o = b.value[0]) != null && o.isRollup) && !((p = b.value[b.value.length - 1]) != null && p.isRollup))) {
+    }), p = y(() => t.value.filterText), f = y(() => {
+      var o, v;
+      if (!(p.value && p.value.trim().length > 0 || !((o = w.value[0]) != null && o.isRollup) && !((v = w.value[w.value.length - 1]) != null && v.isRollup))) {
         if (t.value.rollupPosition === Z.top || t.value.rollupPosition === void 0)
           return Z.top;
         if (t.value.rollupPosition === Z.bottom)
           return Z.bottom;
       }
-    }), w = f(() => {
-      const T = y.value !== void 0 ? 1 : 0, A = (r.value ? r.value.$el.offsetHeight : 0) - 48;
-      return Math.floor((A - 34.5 - 32) / 48) - T;
-    }), E = f(() => {
-      var p, k;
+    }), g = y(() => {
+      const T = f.value !== void 0 ? 1 : 0, D = (r.value ? r.value.$el.offsetHeight : 0) - 48;
+      return Math.floor((D - 34.5 - 32) / 48) - T;
+    }), E = y(() => {
+      var v, R;
       let o = [];
-      switch (y.value) {
+      switch (f.value) {
         case Z.top:
-          o = [...((p = b.value[0]) == null ? void 0 : p.cells) || []].map((T, A) => {
+          o = [...((v = w.value[0]) == null ? void 0 : v.cells) || []].map((T, D) => {
             var H;
             return {
               main: T,
-              comparison: (H = b.value[0]) == null ? void 0 : H.comparisonCells[A],
-              rowType: i.value[A].type
+              comparison: (H = w.value[0]) == null ? void 0 : H.comparisonCells[D],
+              rowType: i.value[D].type
             };
           });
           break;
         case Z.bottom:
-          o = [...((k = b.value[b.value.length - 1]) == null ? void 0 : k.cells) || []].map((T, A) => {
+          o = [...((R = w.value[w.value.length - 1]) == null ? void 0 : R.cells) || []].map((T, D) => {
             var H;
             return {
               main: T,
-              comparison: (H = b.value[0]) == null ? void 0 : H.comparisonCells[A],
-              rowType: i.value[A].type
+              comparison: (H = w.value[0]) == null ? void 0 : H.comparisonCells[D],
+              rowType: i.value[D].type
             };
           });
           break;
       }
       return o.length > 0 && o[0].main === "" && (o[0].main = "Grand total"), o;
     });
-    function h(o) {
-      const p = {};
-      for (let k = 0; k < i.value.length; k++)
-        if (i.value[k].key !== "") {
-          const T = o.comparisonCells[k];
-          p[i.value[k].key] = {
-            main: o.cells[k],
+    function m(o) {
+      const v = {};
+      for (let R = 0; R < i.value.length; R++)
+        if (i.value[R].key !== "") {
+          const T = o.comparisonCells[R];
+          v[i.value[R].key] = {
+            main: o.cells[R],
             comparison: T
-          }, p.isRollup = o.isRollup;
+          }, v.isRollup = o.isRollup;
         }
-      return p;
+      return v;
     }
     function s(o) {
       return [...new Array(o < 0 ? 0 : o)].map(() => {
-        var k;
-        const p = {};
-        if ((k = t.value.data) != null && k.columns)
+        var R;
+        const v = {};
+        if ((R = t.value.data) != null && R.columns)
           for (let T = 0; T < t.value.data.columns.length; T++)
-            p[t.value.data.columns[T].key] = void 0;
-        return p;
+            v[t.value.data.columns[T].key] = void 0;
+        return v;
       });
     }
-    function g(o) {
-      let p = (o == null ? void 0 : o.main) || "";
-      return p.includes("#") && !p.startsWith("#") && (p = p.split("#")[0]), !o || o.main === "" || o.comparison === "" ? {
-        main: p
+    function b(o) {
+      let v = (o == null ? void 0 : o.main) || "";
+      return v.includes("#") && !v.startsWith("#") && (v = v.split("#")[0]), !o || o.main === "" || o.comparison === "" ? {
+        main: v
       } : {
-        main: p,
+        main: v,
         comparison: o == null ? void 0 : o.comparison,
         difference: Rt(o.main, o.comparison, x)
       };
     }
-    const C = f(() => {
-      var A, H, Y;
-      let o = ((A = t.value.data) == null ? void 0 : A.rows) || [];
-      switch (y.value) {
+    const S = y(() => {
+      var D, H, Y;
+      let o = ((D = t.value.data) == null ? void 0 : D.rows) || [];
+      switch (f.value) {
         case Z.bottom:
           o = (H = o[o.length - 1]) != null && H.isRollup ? o.slice(0, -1) : o;
           break;
@@ -741,43 +773,43 @@ const Sa = { class: "my-4" }, _a = {
           o = (Y = o[0]) != null && Y.isRollup ? o.slice(1, o.length) : o;
           break;
       }
-      const p = o.filter((O) => !(v.value !== "" && (O.isRollup === !0 || !O.cells.some(
+      const v = o.filter((O) => !(p.value !== "" && (O.isRollup === !0 || !O.cells.some(
         (G) => {
           var j;
-          return ((G == null ? void 0 : G.toLowerCase()) || "").includes((j = v.value) == null ? void 0 : j.toLowerCase());
+          return ((G == null ? void 0 : G.toLowerCase()) || "").includes((j = p.value) == null ? void 0 : j.toLowerCase());
         }
-      )))).map((O) => h(O)), k = p.length % w.value;
+      )))).map((O) => m(O)), R = v.length % g.value;
       let T = 0;
-      return k > 0 ? T = Math.abs(k - w.value) : p.length === 0 && (T = w.value), p.push(...s(T)), p;
-    }), S = f(
+      return R > 0 ? T = Math.abs(R - g.value) : v.length === 0 && (T = g.value), v.push(...s(T)), v;
+    }), _ = y(
       () => {
         var o;
-        return (((o = t.value.colWidths) == null ? void 0 : o.length) ?? 0) > 0 || _.value.length > 0;
+        return (((o = t.value.colWidths) == null ? void 0 : o.length) ?? 0) > 0 || k.value.length > 0;
       }
-    ), D = f(() => {
-      var p;
+    ), A = y(() => {
+      var v;
       let o = [];
-      return (p = t.value.data) != null && p.columns && (o = [...t.value.data.columns.map((T) => {
-        const A = xe(n, c, T.label, "other");
+      return (v = t.value.data) != null && v.columns && (o = [...t.value.data.columns.map((T) => {
+        const D = xe(n, d, T.label, "other");
         return {
           accessorKey: T.key,
-          header: () => wt(
+          header: () => bt(
             "p",
             {
               class: `w-full ${T.type === "NUMERIC" ? "text-right" : ""} whitespace-nowrap`
             },
-            A
+            D
           ),
           cell: (H) => {
             var G, j;
-            const Y = g(H.getValue()), O = (j = (G = H == null ? void 0 : H.row) == null ? void 0 : G.original) == null ? void 0 : j.isRollup;
-            return wt(
+            const Y = b(H.getValue()), O = (j = (G = H == null ? void 0 : H.row) == null ? void 0 : G.original) == null ? void 0 : j.isRollup;
+            return bt(
               "div",
               {
                 class: [
                   O ? "fm-typo-en-body-md-600 text-fm-color-typo-secondary" : "fm-typo-en-body-md-400",
                   T.type === "NUMERIC" ? "text-right" : "",
-                  S.value ? "whitespace-normal break-words line-clamp-6" : "whitespace-nowrap"
+                  _.value ? "whitespace-normal break-words line-clamp-6" : "whitespace-nowrap"
                 ].join(" ")
               },
               [T.type === "NUMERIC" ? je(Y.main) : Y.main]
@@ -788,59 +820,59 @@ const Sa = { class: "my-4" }, _a = {
       })]), o;
     });
     return J(
-      () => _.value.length > 0,
+      () => k.value.length > 0,
       async (o) => {
-        o && R.value && (await X(), d());
+        o && C.value && (await X(), u());
       }
     ), J(
-      [() => D.value],
+      [() => A.value],
       async () => {
-        var A;
+        var D;
         await X();
-        const o = (A = r.value) == null ? void 0 : A.$el;
+        const o = (D = r.value) == null ? void 0 : D.$el;
         if (!o) return;
-        const p = o.querySelector("table");
-        if (!p) return;
-        p.classList.add(S.value ? "table-fixed" : "table-auto");
-        let k, T;
-        R.value ? (d(), k = _.value, T = L.value) : (T = t.value.rowHeight, k = t.value.colWidths), typeof T == "number" && m(T, o), k == null || k.forEach((H, Y) => {
-          z(Y, H, o);
+        const v = o.querySelector("table");
+        if (!v) return;
+        v.classList.add(_.value ? "table-fixed" : "table-auto");
+        let R, T;
+        C.value ? (u(), R = k.value, T = z.value) : (T = t.value.rowHeight, R = t.value.colWidths), typeof T == "number" && c(T, o), R == null || R.forEach((H, Y) => {
+          L(Y, H, o);
         });
       },
       { immediate: !0 }
-    ), (o, p) => {
-      const k = P("FmTable");
+    ), (o, v) => {
+      const R = V("FmTable");
       return W(), N(oe, null, [
-        $("div", Sa, [
+        P("div", Sa, [
           pe(o.$slots, "menu")
         ]),
-        V(k, {
+        B(R, {
           ref_key: "table",
           ref: r,
-          "column-defs": D.value,
-          "row-data": C.value,
-          "search-value": v.value,
-          "page-size": w.value,
+          "column-defs": A.value,
+          "row-data": S.value,
+          "search-value": p.value,
+          "page-size": g.value,
           "shrink-at": !1,
           "force-mobile-footer": !0,
           class: "scrollbar-hide-table"
         }, {
           "pin-top": q(() => [
-            $("tbody", null, [
-              $("tr", _a, [
-                (W(!0), N(oe, null, _t(E.value, (T, A) => (W(), N("td", {
-                  key: `${l(Be)()}_${A}`,
+            P("tbody", null, [
+              P("tr", _a, [
+                (W(!0), N(oe, null, _t(E.value, (T, D) => (W(), N("td", {
+                  key: `${l($e)()}_${D}`,
                   class: "h-[48px] text-fm-color-typo-primary px-16"
                 }, [
-                  $("span", {
-                    class: $e([
+                  P("span", {
+                    class: Pe([
                       "items-center text-fm-color-typo-secondary gap-2",
                       T.rowType === "NUMERIC" ? "text-right" : "",
-                      S.value ? "whitespace-normal break-words line-clamp-6" : "whitespace-nowrap"
+                      _.value ? "whitespace-normal break-words line-clamp-6" : "whitespace-nowrap"
                     ])
                   }, [
-                    $("p", Ta, Le(T.rowType === "NUMERIC" ? l(je)(T.main) : T.main), 1),
-                    $("p", ka, Le(T.comparison ? T.rowType === "NUMERIC" ? `(${l(je)(T.comparison)})` : `(${T.comparison})` : ""), 1)
+                    P("p", ka, ze(T.rowType === "NUMERIC" ? l(je)(T.main) : T.main), 1),
+                    P("p", Ta, ze(T.comparison ? T.rowType === "NUMERIC" ? `(${l(je)(T.comparison)})` : `(${T.comparison})` : ""), 1)
                   ], 2)
                 ]))), 128))
               ])
@@ -861,58 +893,56 @@ const Sa = { class: "my-4" }, _a = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const n = e, c = te(e, "modelValue"), t = u(null), x = f(() => {
+    const n = e, d = te(e, "modelValue"), t = h(null), x = y(() => {
       var E;
-      return ((E = c.value.data) == null ? void 0 : E.xAxis) || [];
-    }), R = f(() => {
-      var w;
-      return ((w = c.value.data) == null ? void 0 : w.datasets) ?? [];
-    }), { datalabels: _, xCfg: L, yCfg: z, isTransposed: m, legend: d, chartWidth: r, chartHeight: i } = We(
-      c.value
-    ), b = f(() => R.value.length > 0 ? [
-      ...R.value.map((w, E) => {
-        let h = w.values;
+      return ((E = d.value.data) == null ? void 0 : E.xAxis) || [];
+    }), C = y(() => {
+      var g;
+      return ((g = d.value.data) == null ? void 0 : g.datasets) ?? [];
+    }), { datalabels: k, xCfg: z, yCfg: L, isTransposed: c, legend: u, chartWidth: r, chartHeight: i } = We(
+      d.value
+    ), w = y(() => C.value.length > 0 ? [
+      ...C.value.map((g, E) => {
+        let m = g.values;
         return {
-          label: w.name,
-          data: h,
-          dash: !!w.isCompare,
-          backgroundColor: Q({ index: E, isCompare: w.isCompare })
+          label: g.name,
+          data: m,
+          dash: !!g.isCompare,
+          backgroundColor: Q({ index: E, isCompare: g.isCompare })
         };
       })
-    ] : []), v = Ee();
-    function y() {
-      return v.extractChartSize(t.value, n.tileIndex) || { width: 0, height: 0 };
+    ] : []), p = Ee();
+    function f() {
+      return p.extractChartSize(t.value, n.tileIndex) || { width: 0, height: 0 };
     }
     return Se(() => {
       X(() => {
-        y();
+        f();
       });
-    }), J([b], () => {
-      X(() => y());
-    }), (w, E) => {
-      const h = P("FmBarChart");
+    }), J([w], () => {
+      X(() => f());
+    }), (g, E) => {
+      const m = V("FmBarChart");
       return W(), N(oe, null, [
-        pe(w.$slots, "menu"),
-        V(h, {
+        pe(g.$slots, "menu"),
+        B(m, {
           ref_key: "chartRef",
           ref: t,
           class: "bar-chart",
-          datasets: b.value,
+          datasets: w.value,
           "x-axis": { categories: x.value },
-          "x-cfg": l(L),
-          "y-cfg": l(z),
-          transpose: l(m),
+          "x-cfg": l(z),
+          "y-cfg": l(L),
+          transpose: l(c),
           stacked: !0,
           legend: {
-            display: l(d).display ?? !1,
-            position: l(d).position,
-            maxHeight: l(d).maxHeight,
-            maxWidth: l(d).maxWidth,
-            labels: {
-              usePointStyle: l(d).usePointStyle ?? !0
-            }
+            display: l(u).display ?? !1,
+            position: l(u).position,
+            maxHeight: l(u).maxHeight,
+            maxWidth: l(u).maxWidth,
+            labels: l(u).labels
           },
-          datalabels: l(_),
+          datalabels: l(k),
           "maintain-aspect-ratio": !1,
           style: ne({
             "--chart-width": l(r) !== void 0 ? l(r) + "px" : "100%",
@@ -922,7 +952,7 @@ const Sa = { class: "my-4" }, _a = {
       ], 64);
     };
   }
-}), La = /* @__PURE__ */ ee({
+}), za = /* @__PURE__ */ ee({
   __name: "WidgetStackLineChart",
   props: /* @__PURE__ */ me({
     tileIndex: {}
@@ -932,68 +962,66 @@ const Sa = { class: "my-4" }, _a = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    var h;
-    const n = e, c = te(e, "modelValue"), t = ((h = c.value.data) == null ? void 0 : h.xAxis) ?? [], x = f(
-      () => t.length === 1 && L.value.length > 0 && L.value.every((s) => s.values.length === 1)
-    ), R = f(() => x.value ? ["", t[0], ""] : t), _ = u(null), L = f(() => {
+    var m;
+    const n = e, d = te(e, "modelValue"), t = ((m = d.value.data) == null ? void 0 : m.xAxis) ?? [], x = y(
+      () => t.length === 1 && z.value.length > 0 && z.value.every((s) => s.values.length === 1)
+    ), C = y(() => x.value ? ["", t[0], ""] : t), k = h(null), z = y(() => {
       var s;
-      return ((s = c.value.data) == null ? void 0 : s.datasets) ?? [];
-    }), { datalabels: z, xCfg: m, yCfg: d, isTransposed: r, legend: i, chartWidth: b, chartHeight: v } = We(
-      c.value
-    ), y = f(() => L.value.length > 0 ? [
-      ...L.value.map((s, g) => {
-        let C = s.values;
-        return x.value && (C = [NaN, C[0], NaN]), {
+      return ((s = d.value.data) == null ? void 0 : s.datasets) ?? [];
+    }), { datalabels: L, xCfg: c, yCfg: u, isTransposed: r, legend: i, chartWidth: w, chartHeight: p } = We(
+      d.value
+    ), f = y(() => z.value.length > 0 ? [
+      ...z.value.map((s, b) => {
+        let S = s.values;
+        return x.value && (S = [NaN, S[0], NaN]), {
           label: s.name,
-          data: C,
+          data: S,
           dash: s.isCompare,
           fill: !1,
-          color: Q({ index: g, isCompare: s.isCompare }),
+          color: Q({ index: b, isCompare: s.isCompare }),
           pointRadius: x.value ? 4 : void 0,
           pointHoverRadius: x.value ? 6 : void 0,
-          pointBackgroundColor: x.value ? Q({ index: g, isCompare: s.isCompare }) : void 0,
-          pointBorderColor: x.value ? Q({ index: g, isCompare: s.isCompare }) : void 0,
+          pointBackgroundColor: x.value ? Q({ index: b, isCompare: s.isCompare }) : void 0,
+          pointBorderColor: x.value ? Q({ index: b, isCompare: s.isCompare }) : void 0,
           pointBorderWidth: x.value ? 2 : void 0
         };
       })
-    ] : []), w = Ee();
+    ] : []), g = Ee();
     function E() {
-      return w.extractChartSize(_.value, n.tileIndex) || { width: 0, height: 0 };
+      return g.extractChartSize(k.value, n.tileIndex) || { width: 0, height: 0 };
     }
     return Se(() => {
       X(() => {
         E();
       });
-    }), J([y], () => {
+    }), J([f], () => {
       X(() => E());
-    }), (s, g) => {
-      const C = P("FmLineChart");
+    }), (s, b) => {
+      const S = V("FmLineChart");
       return W(), N(oe, null, [
         pe(s.$slots, "menu"),
-        V(C, {
+        B(S, {
           ref_key: "chartRef",
-          ref: _,
+          ref: k,
           class: "line-chart",
-          datasets: y.value,
-          "x-axis": { categories: R.value },
-          "x-cfg": l(m),
-          "y-cfg": l(d),
+          datasets: f.value,
+          "x-axis": { categories: C.value },
+          "x-cfg": l(c),
+          "y-cfg": l(u),
           transpose: l(r),
           legend: {
             display: l(i).display ?? !1,
             position: l(i).position,
             maxHeight: l(i).maxHeight,
             maxWidth: l(i).maxWidth,
-            labels: {
-              usePointStyle: l(i).usePointStyle ?? !0
-            }
+            labels: l(i).labels
           },
           stacked: !0,
-          datalabels: l(z),
+          datalabels: l(L),
           "maintain-aspect-ratio": !1,
           style: ne({
-            "--chart-width": l(b) !== void 0 ? l(b) + "px" : "100%",
-            "--chart-height": l(v) !== void 0 ? l(v) + "px" : "calc(100% - 36px)"
+            "--chart-width": l(w) !== void 0 ? l(w) + "px" : "100%",
+            "--chart-height": l(p) !== void 0 ? l(p) + "px" : "calc(100% - 36px)"
           })
         }, null, 8, ["datasets", "x-axis", "x-cfg", "y-cfg", "transpose", "legend", "datalabels", "style"])
       ], 64);
@@ -1013,7 +1041,7 @@ const Sa = { class: "my-4" }, _a = {
   "col-span-11",
   "col-span-12"
 ];
-function za(e) {
+function La(e) {
   return e < 12 ? Ce[e - 1] : Ce[11];
 }
 function Ea(e) {
@@ -1022,7 +1050,7 @@ function Ea(e) {
 function Wa(e) {
   return e < 12 ? Ce[Math.min(11, e * 3 - 1)] : Ce[11];
 }
-const Da = /* @__PURE__ */ ee({
+const Aa = /* @__PURE__ */ ee({
   __name: "WidgetLinechart",
   props: /* @__PURE__ */ me({
     tileIndex: {}
@@ -1032,73 +1060,71 @@ const Da = /* @__PURE__ */ ee({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    var h;
-    const n = e, c = te(e, "modelValue"), t = ((h = c.value.data) == null ? void 0 : h.xAxis) ?? [], x = f(
-      () => t.length === 1 && L.value.length > 0 && L.value.every((s) => s.values.length === 1)
-    ), R = f(() => x.value ? ["", t[0], ""] : t), _ = u(null), L = f(() => {
+    var m;
+    const n = e, d = te(e, "modelValue"), t = ((m = d.value.data) == null ? void 0 : m.xAxis) ?? [], x = y(
+      () => t.length === 1 && z.value.length > 0 && z.value.every((s) => s.values.length === 1)
+    ), C = y(() => x.value ? ["", t[0], ""] : t), k = h(null), z = y(() => {
       var s;
-      return ((s = c.value.data) == null ? void 0 : s.datasets) ?? [];
-    }), { datalabels: z, xCfg: m, yCfg: d, isTransposed: r, legend: i, chartWidth: b, chartHeight: v } = We(
-      c.value
-    ), y = f(() => L.value.length > 0 ? [
-      ...L.value.map((s, g) => {
-        let C = s.values;
-        return x.value && (C = [NaN, C[0], NaN]), {
+      return ((s = d.value.data) == null ? void 0 : s.datasets) ?? [];
+    }), { datalabels: L, xCfg: c, yCfg: u, isTransposed: r, legend: i, chartWidth: w, chartHeight: p } = We(
+      d.value
+    ), f = y(() => z.value.length > 0 ? [
+      ...z.value.map((s, b) => {
+        let S = s.values;
+        return x.value && (S = [NaN, S[0], NaN]), {
           label: s.name,
-          data: C,
+          data: S,
           dash: !!s.isCompare,
           fill: !1,
-          color: Q({ index: g, isCompare: s.isCompare }),
+          color: Q({ index: b, isCompare: s.isCompare }),
           pointRadius: x.value ? 4 : void 0,
           pointHoverRadius: x.value ? 6 : void 0,
-          pointBackgroundColor: x.value ? Q({ index: g, isCompare: s.isCompare }) : void 0,
-          pointBorderColor: x.value ? Q({ index: g, isCompare: s.isCompare }) : void 0,
+          pointBackgroundColor: x.value ? Q({ index: b, isCompare: s.isCompare }) : void 0,
+          pointBorderColor: x.value ? Q({ index: b, isCompare: s.isCompare }) : void 0,
           pointBorderWidth: x.value ? 2 : void 0
         };
       })
-    ] : []), w = Ee();
+    ] : []), g = Ee();
     function E() {
-      return w.extractChartSize(_.value, n.tileIndex) || { width: 0, height: 0 };
+      return g.extractChartSize(k.value, n.tileIndex) || { width: 0, height: 0 };
     }
     return Se(() => {
       X(() => {
         E();
       });
-    }), J([y], () => {
+    }), J([f], () => {
       X(() => E());
-    }), (s, g) => {
-      const C = P("FmLineChart");
+    }), (s, b) => {
+      const S = V("FmLineChart");
       return W(), N(oe, null, [
         pe(s.$slots, "menu"),
-        V(C, {
+        B(S, {
           ref_key: "chartRef",
-          ref: _,
+          ref: k,
           class: "line-chart",
-          datasets: y.value,
-          "x-axis": { categories: R.value },
-          "x-cfg": l(m),
-          "y-cfg": l(d),
+          datasets: f.value,
+          "x-axis": { categories: C.value },
+          "x-cfg": l(c),
+          "y-cfg": l(u),
           transpose: l(r),
           legend: {
             display: l(i).display ?? !1,
             position: l(i).position,
             maxHeight: l(i).maxHeight,
             maxWidth: l(i).maxWidth,
-            labels: {
-              usePointStyle: l(i).usePointStyle ?? !0
-            }
+            labels: l(i).labels
           },
-          datalabels: l(z),
+          datalabels: l(L),
           "maintain-aspect-ratio": !1,
           style: ne({
-            "--chart-width": l(b) !== void 0 ? l(b) + "px" : "100%",
-            "--chart-height": l(v) !== void 0 ? l(v) + "px" : "calc(100% - 36px)"
+            "--chart-width": l(w) !== void 0 ? l(w) + "px" : "100%",
+            "--chart-height": l(p) !== void 0 ? l(p) + "px" : "calc(100% - 36px)"
           })
         }, null, 8, ["datasets", "x-axis", "x-cfg", "y-cfg", "transpose", "legend", "datalabels", "style"])
       ], 64);
     };
   }
-}), Aa = { class: "flex flex-col gap-16" }, Pa = { class: "flex flex-row" }, Ha = /* @__PURE__ */ ee({
+}), Da = { class: "flex flex-col gap-16" }, Va = { class: "flex flex-row" }, Ha = /* @__PURE__ */ ee({
   __name: "PdfOrientationDialog",
   props: /* @__PURE__ */ me({
     reportType: {},
@@ -1109,57 +1135,57 @@ const Da = /* @__PURE__ */ ee({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const { t: n } = Me(), { FmForm: c } = sa, t = e, x = u(), R = te(e, "modelValue"), _ = u(!1), L = kt(), { selectedLocationIds: z, dateRange: m, timeRange: d } = ze(at()), r = u(Ye.PORTRAIT);
+    const { t: n } = Me(), { FmForm: d } = sa, t = e, x = h(), C = te(e, "modelValue"), k = h(!1), z = Tt(), { selectedLocationIds: L, dateRange: c, timeRange: u } = Le(at()), r = h(Ye.PORTRAIT);
     function i() {
-      var v;
-      (v = x.value) == null || v.validateInputs();
+      var p;
+      (p = x.value) == null || p.validateInputs();
     }
-    async function b() {
-      _.value = !0;
+    async function w() {
+      k.value = !0;
       try {
-        t.index != null && await Tt({
+        t.index != null && await kt({
           reportType: t.reportType,
           index: t.index,
           orientationTypes: [r.value],
-          timeRange: d.value,
-          dateRange: m.value,
-          locationIds: z.value
+          timeRange: u.value,
+          dateRange: c.value,
+          locationIds: L.value
         });
-      } catch (v) {
-        L.open({ message: v.message, type: "error" });
+      } catch (p) {
+        z.open({ message: p.message, type: "error" });
       } finally {
-        _.value = !1;
+        k.value = !1;
       }
     }
-    return (v, y) => {
-      const w = P("FmRadio"), E = P("FmRadioGroup"), h = P("FmButton"), s = P("FmDialog");
+    return (p, f) => {
+      const g = V("FmRadio"), E = V("FmRadioGroup"), m = V("FmButton"), s = V("FmDialog");
       return W(), U(s, {
-        modelValue: R.value,
-        "onUpdate:modelValue": y[2] || (y[2] = (g) => R.value = g),
+        modelValue: C.value,
+        "onUpdate:modelValue": f[2] || (f[2] = (b) => C.value = b),
         overlay: !0,
         "z-index": 10
       }, {
-        "dialog-header": q(() => y[3] || (y[3] = [
+        "dialog-header": q(() => f[3] || (f[3] = [
           Kt("Select Orientation")
         ])),
         default: q(() => [
-          V(l(c), {
+          B(l(d), {
             ref_key: "form",
             ref: x,
-            onValidationSuccess: b
+            onValidationSuccess: w
           }, {
             default: q(() => [
-              $("div", Aa, [
-                V(E, {
+              P("div", Da, [
+                B(E, {
                   modelValue: r.value,
-                  "onUpdate:modelValue": y[0] || (y[0] = (g) => r.value = g)
+                  "onUpdate:modelValue": f[0] || (f[0] = (b) => r.value = b)
                 }, {
                   default: q(() => [
-                    V(w, {
+                    B(g, {
                       value: l(Ye).PORTRAIT,
                       label: l(n)("report.common.portrait")
                     }, null, 8, ["value", "label"]),
-                    V(w, {
+                    B(g, {
                       value: l(Ye).LANDSCAPE,
                       label: l(n)("report.common.landscape")
                     }, null, 8, ["value", "label"])
@@ -1167,17 +1193,17 @@ const Da = /* @__PURE__ */ ee({
                   _: 1
                 }, 8, ["modelValue"])
               ]),
-              $("div", Pa, [
-                y[4] || (y[4] = $("div", { class: "grow" }, null, -1)),
-                V(h, {
+              P("div", Va, [
+                f[4] || (f[4] = P("div", { class: "grow" }, null, -1)),
+                B(m, {
                   label: l(n)("report.common.cancel"),
                   variant: "tertiary",
-                  onClick: y[1] || (y[1] = (g) => R.value = !1)
+                  onClick: f[1] || (f[1] = (b) => C.value = !1)
                 }, null, 8, ["label"]),
-                $("div", null, [
-                  V(h, {
+                P("div", null, [
+                  B(m, {
                     label: l(n)("report.common.download"),
-                    loading: _.value,
+                    loading: k.value,
                     onClick: i
                   }, null, 8, ["label", "loading"])
                 ])
@@ -1190,10 +1216,10 @@ const Da = /* @__PURE__ */ ee({
       }, 8, ["modelValue"]);
     };
   }
-}), Va = {
+}), Ba = {
   key: 1,
   class: "grow"
-}, Ba = {
+}, $a = {
   key: 2,
   class: "flex"
 }, Ga = /* @__PURE__ */ ee({
@@ -1219,41 +1245,41 @@ const Da = /* @__PURE__ */ ee({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const n = u(!0), c = te(e, "modelValue"), t = c.value.widget.config, { t: x, te: R } = Me(), _ = e, L = u(null), z = u(t.rollup), m = u(Be()), d = u(t.drillDimension), r = f(() => {
+    const n = h(!0), d = te(e, "modelValue"), t = d.value.widget.config, { t: x, te: C } = Me(), k = e, z = h(null), L = h(t.rollup), c = h($e()), u = h(t.drillDimension), r = y(() => {
       if (ce.value.length > 0) {
         const a = ce.value.findIndex(
-          (B) => B.value === d.value
+          ($) => $.value === u.value
         );
         return a >= 0 ? a : 0;
       } else
         return -1;
-    }), i = f(() => r.value !== 0), b = f(
+    }), i = y(() => r.value !== 0), w = y(
       () => r.value != ce.value.length - 1
-    ), v = u(t.showTitle ?? !0), y = u(t.titleFontSize ?? 14), w = u(t.titleBold ?? !1), E = u(t.titleItalic ?? !1), h = u(t.titleUnderline ?? !1), s = u(t.chartWidth ?? void 0), g = u(t.chartHeight ?? void 0), C = u(t.showLabel ?? !1), S = u(t.labelAlign ?? Ze.center), D = u(t.labelAnchor ?? Ke.center), o = u(t.labelRotation ?? 0), p = u(t.labelOffset ?? 0), k = u(t.labelFontSize ?? 12), T = f(() => t.showSearchBar), A = u(t.showX ?? !0), H = u(t.xPosition ?? Qe.bottom), Y = u(t.showXGrid ?? !1), O = u(t.showXTick ?? !0), G = u(t.xTickFontSize ?? 12), j = u(t.showXTitle ?? !1), De = u(t.xTitle ?? ""), Ae = u(t.xTitleFontSize ?? 12), Pe = u(t.showY ?? !0), _e = u(t.yPosition ?? et.left), Te = u(t.showYGrid ?? !1), fe = u(t.showYTick ?? !0), se = u(t.yTickFontSize ?? 12), re = u(t.showYTitle ?? !1), ae = u(t.yTitle ?? ""), ve = u(t.yTitleFontSize ?? 12), le = u(t.showLegend ?? void 0), ie = u(t.legendPosition ?? tt.top), ue = u(t.usePointStyle ?? !0), Ne = u(t.legendMaxHeight ?? 54), ot = u(t.legendMaxWidth ?? 54), nt = u(t.rowHeight ?? 0), st = u(t.colWidths ?? []), Ie = u(!1), qe = u(""), { breakpoints: ge, getBreakpointsBoundary: ke } = ra(), rt = u(), I = f(
-      () => _.customScreenWidth === void 0 ? window.innerWidth : _.customScreenWidth
-    ), Ft = f(
-      () => (I == null ? void 0 : I.value) > ke("xs")[1] && (I == null ? void 0 : I.value) <= ke("sm")[1]
-    ), Lt = f(
-      () => (I == null ? void 0 : I.value) > ke("sm")[1] && (I == null ? void 0 : I.value) <= ke("md")[1]
-    ), zt = f(() => (I == null ? void 0 : I.value) > ke("md")[1]), Et = f(() => {
-      const a = c.value.size.width;
-      return zt.value || Lt.value ? za(a) : Ft.value ? Ea(a) : Wa(a);
-    }), He = f(
-      () => ia.find((a) => a.type === c.value.widget.type)
-    ), ye = bt(() => {
+    ), p = h(t.showTitle ?? !0), f = h(t.titleFontSize ?? 14), g = h(t.titleBold ?? !1), E = h(t.titleItalic ?? !1), m = h(t.titleUnderline ?? !1), s = h(t.chartWidth ?? void 0), b = h(t.chartHeight ?? void 0), S = h(t.showLabel ?? !1), _ = h(t.labelAlign ?? Ze.center), A = h(t.labelAnchor ?? Ke.center), o = h(t.labelRotation ?? 0), v = h(t.labelOffset ?? 0), R = h(t.labelFontSize ?? 12), T = y(() => t.showSearchBar), D = h(t.showX ?? !0), H = h(t.xPosition ?? Qe.bottom), Y = h(t.showXGrid ?? !1), O = h(t.showXTick ?? !0), G = h(t.xTickFontSize ?? 12), j = h(t.showXTitle ?? !1), Ae = h(t.xTitle ?? ""), De = h(t.xTitleFontSize ?? 12), Ve = h(t.showY ?? !0), _e = h(t.yPosition ?? et.left), ke = h(t.showYGrid ?? !1), fe = h(t.showYTick ?? !0), se = h(t.yTickFontSize ?? 12), re = h(t.showYTitle ?? !1), ae = h(t.yTitle ?? ""), ve = h(t.yTitleFontSize ?? 12), le = h(t.showLegend ?? void 0), ie = h(t.legendPosition ?? tt.top), ue = h(t.usePointStyle ?? !0), Ne = h(t.legendMaxHeight ?? 54), ot = h(t.legendMaxWidth ?? 54), nt = h(t.rowHeight ?? 0), st = h(t.colWidths ?? []), Ie = h(!1), qe = h(""), { breakpoints: ge, getBreakpointsBoundary: Te } = ra(), rt = h(), I = y(
+      () => k.customScreenWidth === void 0 ? window.innerWidth : k.customScreenWidth
+    ), Ft = y(
+      () => (I == null ? void 0 : I.value) > Te("xs")[1] && (I == null ? void 0 : I.value) <= Te("sm")[1]
+    ), zt = y(
+      () => (I == null ? void 0 : I.value) > Te("sm")[1] && (I == null ? void 0 : I.value) <= Te("md")[1]
+    ), Lt = y(() => (I == null ? void 0 : I.value) > Te("md")[1]), Et = y(() => {
+      const a = d.value.size.width;
+      return Lt.value || zt.value ? La(a) : Ft.value ? Ea(a) : Wa(a);
+    }), He = y(
+      () => ia.find((a) => a.type === d.value.widget.type)
+    ), ye = wt(() => {
       var a;
-      rt.value = Bt((a = L.value) == null ? void 0 : a.$el.offsetWidth), m.value = Be();
-    }), Wt = f(() => {
-      if (ua(M.value.type, we.value))
-        switch (c.value.widget.type) {
+      rt.value = $t((a = z.value) == null ? void 0 : a.$el.offsetWidth), c.value = $e();
+    }), Wt = y(() => {
+      if (ua(M.value.type, be.value))
+        switch (d.value.widget.type) {
           case F.BarChart:
             return da;
           case F.StackBarChart:
             return Fa;
           case F.LineChart:
-            return Da;
+            return Aa;
           case F.StackLineChart:
-            return La;
+            return za;
           case F.Circular:
             return ha;
           case F.Scorecard:
@@ -1267,52 +1293,52 @@ const Da = /* @__PURE__ */ ee({
         }
       else
         return xt;
-    }), we = u(null), {
+    }), be = h(null), {
       selectedLocationIds: Oe,
       dateRange: it,
-      compareDateRange: Dt,
+      compareDateRange: At,
       timeRange: ut,
-      globalFilters: At,
+      globalFilters: Dt,
       isGlobalFiltersLoading: Ue
-    } = ze(at()), { businessId: Pt } = ze(lt()), M = f(() => {
-      const a = JSON.parse(JSON.stringify(c.value.widget));
+    } = Le(at()), { businessId: Vt } = Le(lt()), M = y(() => {
+      const a = JSON.parse(JSON.stringify(d.value.widget));
       return {
         ...a,
         config: {
           ...a.config,
-          rollup: z.value,
-          drillDimension: d.value,
+          rollup: L.value,
+          drillDimension: u.value,
           showGrandTotal: !1
         }
       };
     });
     function Ht() {
       return {
-        data: we.value,
-        showTitle: v.value,
-        titleFontSize: y.value,
-        titleBold: w.value,
+        data: be.value,
+        showTitle: p.value,
+        titleFontSize: f.value,
+        titleBold: g.value,
         titleItalic: E.value,
-        titleUnderline: h.value,
-        chartHeight: g.value,
+        titleUnderline: m.value,
+        chartHeight: b.value,
         chartWidth: s.value,
-        showLabel: C.value,
-        labelAnchor: D.value,
-        labelAlign: S.value,
+        showLabel: S.value,
+        labelAnchor: A.value,
+        labelAlign: _.value,
         labelRotation: o.value,
-        labelOffset: p.value,
-        labelFontSize: k.value,
-        showX: A.value,
+        labelOffset: v.value,
+        labelFontSize: R.value,
+        showX: D.value,
         xPosition: H.value,
         showXGrid: Y.value,
         showXTick: O.value,
         xTickFontSize: G.value,
         showXTitle: j.value,
-        xTitle: De.value,
-        xTitleFontSize: Ae.value,
-        showY: Pe.value,
+        xTitle: Ae.value,
+        xTitleFontSize: De.value,
+        showY: Ve.value,
         yPosition: _e.value,
-        showYGrid: Te.value,
+        showYGrid: ke.value,
         showYTick: fe.value,
         yTitle: ae.value,
         showYTitle: re.value,
@@ -1326,19 +1352,19 @@ const Da = /* @__PURE__ */ ee({
         legendMaxWidth: ot.value
       };
     }
-    function Vt() {
+    function Bt() {
       return {
-        data: we.value,
+        data: be.value,
         filterText: qe.value,
         rollupPosition: M.value.config.rollupPosition,
         rowHeight: nt.value,
         colWidths: st.value
       };
     }
-    const ct = f(() => {
+    const ct = y(() => {
       switch (M.value.type) {
         case F.Table:
-          return Vt();
+          return Bt();
         case F.BarChart:
         case F.LineChart:
         case F.StackBarChart:
@@ -1346,48 +1372,48 @@ const Da = /* @__PURE__ */ ee({
         case F.Circular:
           return Ht();
         default:
-          return { data: we.value };
+          return { data: be.value };
       }
-    }), dt = f(() => {
-      const { config: a } = c.value.widget;
+    }), dt = y(() => {
+      const { config: a } = d.value.widget;
       if (a.rollup != null) {
-        const B = [...a.dimensions].filter((de) => !de.hide);
-        return B.sort(
+        const $ = [...a.dimensions].filter((de) => !de.hide);
+        return $.sort(
           (de, Re) => (a.rowIds || []).indexOf(Ge(de)) - (a.rowIds || []).indexOf(Ge(Re))
         ), [
-          { label: xe(x, R, "None", "other"), value: null },
-          { label: xe(x, R, "Grand Total", "other"), value: 0 },
-          ...[...B].slice(0, B.length - 1).map((de, Re) => ({
-            label: xe(x, R, de.label, "other"),
+          { label: xe(x, C, "None", "other"), value: null },
+          { label: xe(x, C, "Grand Total", "other"), value: 0 },
+          ...[...$].slice(0, $.length - 1).map((de, Re) => ({
+            label: xe(x, C, de.label, "other"),
             value: Re + 1
           }))
         ];
       }
       return [];
-    }), ce = f(() => {
+    }), ce = y(() => {
       const { config: a } = M.value;
-      return a.isDrillable ? a.dimensions.map((B) => ({
-        label: xe(x, R, B.label, "other"),
-        value: Ge(B)
+      return a.isDrillable ? a.dimensions.map(($) => ({
+        label: xe(x, C, $.label, "other"),
+        value: Ge($)
       })) : [];
     });
     J(
-      () => c.value.widget.config,
+      () => d.value.widget.config,
       (a) => {
-        z.value = a.rollup, v.value = a.showTitle ?? !0, y.value = a.titleFontSize ?? 14, w.value = a.titleBold ?? !1, E.value = a.titleItalic ?? !1, h.value = a.titleUnderline ?? !1, g.value = a.chartHeight ?? void 0, s.value = a.chartWidth ?? void 0, C.value = a.showLabel ?? !1, S.value = a.labelAlign ?? Ze.center, D.value = a.labelAnchor ?? Ke.center, o.value = a.labelRotation ?? 0, p.value = a.labelOffset ?? 0, k.value = a.labelFontSize ?? 12, A.value = a.showX ?? !0, H.value = a.xPosition ?? Qe.bottom, Y.value = a.showXGrid ?? !1, O.value = a.showXTick ?? !0, G.value = a.xTickFontSize ?? 12, j.value = a.showXTitle ?? !1, De.value = a.xTitle ?? "", Ae.value = a.xTitleFontSize ?? 12, Pe.value = a.showY ?? !0, _e.value = a.yPosition ?? et.left, Te.value = a.showYGrid ?? !1, fe.value = a.showYTick ?? !0, se.value = a.yTickFontSize ?? 12, re.value = a.showYTitle ?? !1, ae.value = a.yTitle ?? "", ve.value = a.yTitleFontSize ?? 12, le.value = a.showLegend ?? void 0, ie.value = a.legendPosition ?? tt.top, ue.value = a.usePointStyle ?? !0, Ne.value = a.legendMaxHeight ?? 54, ot.value = a.legendMaxWidth ?? 54, nt.value = a.rowHeight ?? 0, st.value = a.colWidths ?? [];
+        L.value = a.rollup, p.value = a.showTitle ?? !0, f.value = a.titleFontSize ?? 14, g.value = a.titleBold ?? !1, E.value = a.titleItalic ?? !1, m.value = a.titleUnderline ?? !1, b.value = a.chartHeight ?? void 0, s.value = a.chartWidth ?? void 0, S.value = a.showLabel ?? !1, _.value = a.labelAlign ?? Ze.center, A.value = a.labelAnchor ?? Ke.center, o.value = a.labelRotation ?? 0, v.value = a.labelOffset ?? 0, R.value = a.labelFontSize ?? 12, D.value = a.showX ?? !0, H.value = a.xPosition ?? Qe.bottom, Y.value = a.showXGrid ?? !1, O.value = a.showXTick ?? !0, G.value = a.xTickFontSize ?? 12, j.value = a.showXTitle ?? !1, Ae.value = a.xTitle ?? "", De.value = a.xTitleFontSize ?? 12, Ve.value = a.showY ?? !0, _e.value = a.yPosition ?? et.left, ke.value = a.showYGrid ?? !1, fe.value = a.showYTick ?? !0, se.value = a.yTickFontSize ?? 12, re.value = a.showYTitle ?? !1, ae.value = a.yTitle ?? "", ve.value = a.yTitleFontSize ?? 12, le.value = a.showLegend ?? void 0, ie.value = a.legendPosition ?? tt.top, ue.value = a.usePointStyle ?? !0, Ne.value = a.legendMaxHeight ?? 54, ot.value = a.legendMaxWidth ?? 54, nt.value = a.rowHeight ?? 0, st.value = a.colWidths ?? [];
       },
       { deep: !0 }
-    ), J([() => z.value], () => {
-      z.value !== null && (c.value.widget.config.rollup = z.value);
+    ), J([() => L.value], () => {
+      L.value !== null && (d.value.widget.config.rollup = L.value);
     }), J(
       [
         () => M.value,
         () => it.value,
         () => ut.value,
-        () => Dt.value,
-        () => Oe.value,
-        () => Pt.value,
         () => At.value,
+        () => Oe.value,
+        () => Vt.value,
+        () => Dt.value,
         () => Ue.value
       ],
       () => {
@@ -1397,7 +1423,7 @@ const Da = /* @__PURE__ */ ee({
         deep: !0
       }
     ), J(
-      [() => c.value.size],
+      [() => d.value.size],
       () => {
         ye();
       },
@@ -1407,8 +1433,8 @@ const Da = /* @__PURE__ */ ee({
     }), Zt(() => {
       ge.value.sm || ge.value.md || ge.value.xs ? (console.log("Ignoring resize event due to keyboard"), removeEventListener("change", ye)) : removeEventListener("resize", ye);
     });
-    const ht = kt();
-    let Ve;
+    const ht = Tt();
+    let Be;
     async function mt() {
       if (Oe.value.length === 0 || Ue.value) {
         n.value = !1;
@@ -1422,57 +1448,57 @@ const Da = /* @__PURE__ */ ee({
         return;
       }
       try {
-        n.value = !0, Ve && Ve.abort(), Ve = new AbortController();
-        const a = Ve.signal;
-        we.value = await bt(aa, 500)(M.value, a, c.value.id), m.value = Be(), n.value = !1;
+        n.value = !0, Be && Be.abort(), Be = new AbortController();
+        const a = Be.signal;
+        be.value = await wt(aa, 500)(M.value, a, d.value.id), c.value = $e(), n.value = !1;
       } catch (a) {
-        a.code !== "ERR_CANCELED" && (we.value = null, ht.open({ message: `Invalid chart ${M.value.type}`, type: "error" }), console.log(a), n.value = !1);
+        a.code !== "ERR_CANCELED" && (be.value = null, ht.open({ message: `Invalid chart ${M.value.type}`, type: "error" }), console.log(a), n.value = !1);
       }
     }
-    function Bt(a) {
-      switch (c.value.widget.type) {
+    function $t(a) {
+      switch (d.value.widget.type) {
         case "SPACER":
           return;
         case "SCORECARD":
           return;
         case "TABLE":
-          return `${c.value.size.height * 100 + (T.value ? 72 : 0) + 96.5}px`;
+          return `${d.value.size.height * 100 + (T.value ? 72 : 0) + 96.5}px`;
       }
-      return `${Math.max(a / c.value.size.width, 90) * c.value.size.height}px`;
+      return `${Math.max(a / d.value.size.width, 90) * d.value.size.height}px`;
     }
-    function $t() {
+    function Pt() {
       const a = r.value - 1;
-      a >= 0 && (d.value = ce.value[a].value);
+      a >= 0 && (u.value = ce.value[a].value);
     }
     function Mt() {
       const a = r.value + 1;
-      a >= 0 && a < ce.value.length && (d.value = ce.value[a].value);
+      a >= 0 && a < ce.value.length && (u.value = ce.value[a].value);
     }
-    const pt = u(Fe.EXCEL), ft = u(), Nt = Object.values(Fe).map((a) => ({
+    const pt = h(Fe.EXCEL), ft = h(), Nt = Object.values(Fe).map((a) => ({
       label: la(a),
       value: a,
       onClick: async () => {
-        a === Fe.EXCEL || a === Fe.PDFFULLSIZE ? await Tt({
+        a === Fe.EXCEL || a === Fe.PDFFULLSIZE ? await kt({
           reportType: a,
-          index: _.index,
+          index: k.index,
           timeRange: ut.value,
           dateRange: it.value,
           locationIds: Oe.value
-        }) : a === Fe.PDF && (pt.value = a, ft.value = _.index, Ie.value = !0);
+        }) : a === Fe.PDF && (pt.value = a, ft.value = k.index, Ie.value = !0);
       }
     })), It = M.value.type === F.Spacer ? "flat" : "outlined", qt = M.value.type === F.Spacer ? "p-0" : "p-16";
-    return (a, B) => {
-      const de = P("FmTooltip"), Re = P("FmSearch"), Ot = P("FmCheckbox"), Xe = P("FmButton"), Ut = P("FmSelect"), Xt = P("FmMenuItem"), Yt = P("FmMenu"), Gt = P("FmForm"), jt = P("FmCircularProgress"), Jt = P("FmCard");
+    return (a, $) => {
+      const de = V("FmTooltip"), Re = V("FmSearch"), Ot = V("FmCheckbox"), Xe = V("FmButton"), Ut = V("FmSelect"), Xt = V("FmMenuItem"), Yt = V("FmMenu"), Gt = V("FmForm"), jt = V("FmCircularProgress"), Jt = V("FmCard");
       return W(), U(Jt, {
         ref_key: "tileCard",
-        ref: L,
-        class: $e(`${Et.value} ${l(qt)}`),
+        ref: z,
+        class: Pe(`${Et.value} ${l(qt)}`),
         variant: l(It)
       }, {
         default: q(() => [
-          V(Ha, {
+          B(Ha, {
             modelValue: Ie.value,
-            "onUpdate:modelValue": B[0] || (B[0] = (be) => Ie.value = be),
+            "onUpdate:modelValue": $[0] || ($[0] = (we) => Ie.value = we),
             "report-type": pt.value,
             index: ft.value
           }, null, 8, ["modelValue", "report-type", "index"]),
@@ -1481,17 +1507,17 @@ const Da = /* @__PURE__ */ ee({
             style: ne({ height: rt.value })
           }, [
             (W(), U(Qt(Wt.value), {
-              key: m.value,
+              key: c.value,
               modelValue: ct.value,
-              "onUpdate:modelValue": B[4] || (B[4] = (be) => ct.value = be),
-              "tile-index": _.index
+              "onUpdate:modelValue": $[4] || ($[4] = (we) => ct.value = we),
+              "tile-index": k.index
             }, {
               menu: q(() => [
-                V(Gt, { class: "flex items-center gap-2" }, {
+                B(Gt, { class: "flex items-center gap-2" }, {
                   default: q(() => {
-                    var be, vt, gt, yt;
+                    var we, vt, gt, yt;
                     return [
-                      V(de, {
+                      B(de, {
                         variant: "plain",
                         placement: "right",
                         content: M.value.description,
@@ -1499,63 +1525,63 @@ const Da = /* @__PURE__ */ ee({
                         disabled: !M.value.description
                       }, {
                         default: q(() => [
-                          v.value !== !1 ? (W(), N("p", {
+                          p.value !== !1 ? (W(), N("p", {
                             key: 0,
                             style: ne({
-                              fontSize: y.value + "px",
-                              fontWeight: w.value ? "bold" : "normal",
+                              fontSize: f.value + "px",
+                              fontWeight: g.value ? "bold" : "normal",
                               fontStyle: E.value ? "italic" : "normal",
-                              textDecoration: h.value ? "underline" : "none"
+                              textDecoration: m.value ? "underline" : "none"
                             }),
-                            class: $e(["text-fm-color-typo-secondary line-clamp-1", [
-                              y.value <= 18 ? "fm-typo-en-body-md-400" : "",
+                            class: Pe(["text-fm-color-typo-secondary line-clamp-1", [
+                              f.value <= 18 ? "fm-typo-en-body-md-400" : "",
                               M.value.description ? "border-b-2 border-dashed border-gray-300" : ""
                             ]])
-                          }, Le(l(xe)(l(x), l(R), M.value.title, "other")), 7)) : he("", !0)
+                          }, ze(l(xe)(l(x), l(C), M.value.title, "other")), 7)) : he("", !0)
                         ]),
                         _: 1
                       }, 8, ["content", "disabled"]),
-                      (be = He.value) != null && be.showSearchBar ? (W(), U(Re, {
+                      (we = He.value) != null && we.showSearchBar ? (W(), U(Re, {
                         key: 0,
                         modelValue: qe.value,
-                        "onUpdate:modelValue": B[1] || (B[1] = (K) => qe.value = K),
+                        "onUpdate:modelValue": $[1] || ($[1] = (K) => qe.value = K),
                         class: "grow"
-                      }, null, 8, ["modelValue"])) : (W(), N("div", Va)),
-                      ea(V(Ot, {
-                        modelValue: C.value,
-                        "onUpdate:modelValue": B[2] || (B[2] = (K) => C.value = K),
+                      }, null, 8, ["modelValue"])) : (W(), N("div", Ba)),
+                      ea(B(Ot, {
+                        modelValue: S.value,
+                        "onUpdate:modelValue": $[2] || ($[2] = (K) => S.value = K),
                         label: "Label",
                         value: !1
                       }, null, 8, ["modelValue"]), [
                         [ta, (vt = He.value) == null ? void 0 : vt.showLabel]
                       ]),
-                      (gt = He.value) != null && gt.showDrillDimension && ce.value.length > 0 ? (W(), N("div", Ba, [
-                        V(Xe, {
+                      (gt = He.value) != null && gt.showDrillDimension && ce.value.length > 0 ? (W(), N("div", $a, [
+                        B(Xe, {
                           icon: "arrow_upward",
                           variant: "tertiary",
                           disabled: !i.value,
-                          onClick: $t
+                          onClick: Pt
                         }, null, 8, ["disabled"]),
-                        V(Xe, {
+                        B(Xe, {
                           icon: "arrow_downward",
                           variant: "tertiary",
-                          disabled: !b.value,
+                          disabled: !w.value,
                           onClick: Mt
                         }, null, 8, ["disabled"])
                       ])) : he("", !0),
                       (yt = He.value) != null && yt.showRollup && dt.value.length > 0 ? (W(), U(Ut, {
                         key: 3,
-                        modelValue: z.value,
-                        "onUpdate:modelValue": B[3] || (B[3] = (K) => z.value = K),
+                        modelValue: L.value,
+                        "onUpdate:modelValue": $[3] || ($[3] = (K) => L.value = K),
                         class: "w-[150px]",
                         items: dt.value
                       }, null, 8, ["modelValue", "items"])) : he("", !0),
-                      _.hideExport ? he("", !0) : (W(), U(Yt, {
+                      k.hideExport ? he("", !0) : (W(), U(Yt, {
                         key: 4,
                         shift: !0
                       }, {
                         "menu-button": q(() => [
-                          V(Xe, {
+                          B(Xe, {
                             icon: "more_vert",
                             variant: "tertiary"
                           })