@actionexec/dashboards 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,106 +1,80 @@
-import { jsxs as _, jsx as l } from "react/jsx-runtime";
-import { useState as N, useRef as M, useEffect as T, useCallback as R, useMemo as G } from "react";
-import { J as z, z as I, G as E, m as D, u as x, H as X, k as L, t as H, r as U, d as q, w as J, v as Q, b as Z } from "./index-BHv7_r-h.js";
-import { PieChart as B, Pie as ee, Cell as te, Tooltip as W, LineChart as ae, Line as re, AreaChart as le, Area as ne, BarChart as ie, Bar as se, CartesianGrid as ce, XAxis as oe, YAxis as de, Legend as he } from "recharts";
-const ue = "https://action-data-api.fly.dev/api", ge = "/external/dashboards";
-class pe extends Error {
-  constructor(r, n, t) {
-    super(r), this.status = n, this.payload = t, this.name = "ApiError";
-  }
-}
-async function Y(a, r, n) {
-  const t = new URL(`${ue}${ge}${a}`);
-  if (n)
-    for (const [i, s] of Object.entries(n)) t.searchParams.set(i, s);
-  const e = await fetch(t.toString(), {
-    headers: { Authorization: `Bearer ${r}` }
-  });
-  if (!e.ok) {
-    let i;
-    try {
-      i = await e.json();
-    } catch {
-    }
-    throw new pe(
-      `Requisicao falhou (${e.status}) em ${a}`,
-      e.status,
-      i
-    );
-  }
-  return await e.json();
-}
-const me = (a) => Y("/layout", a), _e = (a, r) => Y("/render", a, r), fe = 300;
-function be(a) {
-  const [r, n] = N(null), [t, e] = N(null), [i, s] = N({}), [c, p] = N({}), [o, d] = N(null), [h, g] = N(!0), [w, u] = N(null), m = M(), $ = M(!1);
+import { jsxs as _, jsx as r } from "react/jsx-runtime";
+import { useState as N, useRef as x, useEffect as T, useCallback as M, useMemo as G } from "react";
+import { L as j, O as z, J as H, z as I, G as W, m as D, u as R, H as X, k as L, t as q, r as Q, d as U, w as J, v as Z, b as B } from "./index-C3jiurhg.js";
+import { Q as Ke } from "./index-C3jiurhg.js";
+import { PieChart as ee, Pie as te, Cell as ae, Tooltip as P, LineChart as re, Line as le, AreaChart as ne, Area as ie, BarChart as se, Bar as ce, CartesianGrid as oe, XAxis as de, YAxis as ge, Legend as he } from "recharts";
+const ue = 300;
+function me(l) {
+  const [a, n] = N(null), [t, e] = N(null), [i, s] = N({}), [c, m] = N({}), [o, d] = N(null), [g, u] = N(!0), [w, h] = N(null), p = x(), k = x(!1);
   T(() => {
     let v = !1;
-    return me(a).then((b) => {
-      v || n(b);
-    }).catch((b) => {
-      v || u(b.message);
+    return j(l).then((f) => {
+      v || n(f);
+    }).catch((f) => {
+      v || h(f.message);
     }), () => {
       v = !0;
     };
-  }, [a]), T(() => {
-    if (r)
-      return m.current && clearTimeout(m.current), m.current = setTimeout(() => {
-        const v = ve(i, c);
-        g(!0), _e(a, v).then((b) => {
-          e(b), !$.current && b.applied && ($.current = !0, s((k) => ({ ...we(b.applied), ...k }))), u(null);
-        }).catch((b) => u(b.message)).finally(() => g(!1));
-      }, fe), () => {
-        m.current && clearTimeout(m.current);
+  }, [l]), T(() => {
+    if (a)
+      return p.current && clearTimeout(p.current), p.current = setTimeout(() => {
+        const v = pe(i, c);
+        u(!0), z(l, v).then((f) => {
+          e(f), !k.current && f.applied && (k.current = !0, s(($) => ({ ..._e(f.applied), ...$ }))), h(null);
+        }).catch((f) => h(f.message)).finally(() => u(!1));
+      }, ue), () => {
+        p.current && clearTimeout(p.current);
       };
-  }, [a, r, i, c]);
-  const f = R((v, b) => {
-    s((k) => ({ ...k, [v]: b }));
-  }, []), C = R((v, b) => {
-    p((k) => ({ ...k, [v]: b }));
-  }, []), y = R((v) => {
+  }, [l, a, i, c]);
+  const b = M((v, f) => {
+    s(($) => ({ ...$, [v]: f }));
+  }, []), C = M((v, f) => {
+    m(($) => ({ ...$, [v]: f }));
+  }, []), y = M((v) => {
     d(v);
   }, []), S = G(
-    () => o ?? (r == null ? void 0 : r.palette) ?? [],
-    [o, r]
+    () => o ?? (a == null ? void 0 : a.palette) ?? [],
+    [o, a]
   );
   return {
-    layout: r,
+    layout: a,
     renderData: t,
-    loading: h,
+    loading: g,
     error: w,
     filters: i,
     variables: c,
     palette: S,
-    setFilter: f,
+    setFilter: b,
     setVariable: C,
     setPalette: y
   };
 }
-function ve(a, r) {
+function pe(l, a) {
   const n = {};
-  for (const [t, e] of Object.entries(a))
+  for (const [t, e] of Object.entries(l))
     if (e.includes("|")) {
       const [i, s] = e.split("|");
       i && (n.f_date_start = i), s && (n.f_date_end = s);
     } else
       n[`f_${t}`] = e;
-  for (const [t, e] of Object.entries(r))
+  for (const [t, e] of Object.entries(a))
     n[`v_${t}`] = String(e);
   return n;
 }
-function we(a) {
-  const r = {};
-  for (const [n, t] of Object.entries(a))
+function _e(l) {
+  const a = {};
+  for (const [n, t] of Object.entries(l))
     if (t && typeof t == "object" && "start" in t) {
       const e = t;
-      r[n] = `${e.start || ""}|${e.end || ""}`;
-    } else Array.isArray(t) ? r[n] = t.join(",") : typeof t == "string" && (r[n] = t);
-  return r;
+      a[n] = `${e.start || ""}|${e.end || ""}`;
+    } else Array.isArray(t) ? a[n] = t.join(",") : typeof t == "string" && (a[n] = t);
+  return a;
 }
-function ye({ data: a, label: r }) {
-  const n = r || String(a.label || ""), t = String(a.formatted || "-"), e = a.comparison, i = (e == null ? void 0 : e.trend) === "up" ? "widget-kpi__trend--up" : (e == null ? void 0 : e.trend) === "down" ? "widget-kpi__trend--down" : "", s = (e == null ? void 0 : e.trend) === "up" ? "↑" : (e == null ? void 0 : e.trend) === "down" ? "↓" : "";
+function be({ data: l, label: a }) {
+  const n = a || String(l.label || ""), t = String(l.formatted || "-"), e = l.comparison, i = (e == null ? void 0 : e.trend) === "up" ? "widget-kpi__trend--up" : (e == null ? void 0 : e.trend) === "down" ? "widget-kpi__trend--down" : "", s = (e == null ? void 0 : e.trend) === "up" ? "↑" : (e == null ? void 0 : e.trend) === "down" ? "↓" : "";
   return /* @__PURE__ */ _("div", { className: "widget widget-kpi", children: [
-    /* @__PURE__ */ l("span", { className: "widget-kpi__label", children: n }),
-    /* @__PURE__ */ l("span", { className: "widget-kpi__value", children: t }),
+    /* @__PURE__ */ r("span", { className: "widget-kpi__label", children: n }),
+    /* @__PURE__ */ r("span", { className: "widget-kpi__value", children: t }),
     e && e.variance_pct != null && /* @__PURE__ */ _("div", { className: `widget-kpi__trend ${i}`, children: [
       /* @__PURE__ */ _("span", { className: "widget-kpi__variance", children: [
         s,
@@ -109,101 +83,101 @@ function ye({ data: a, label: r }) {
         e.variance_pct.toFixed(1),
         "%"
       ] }),
-      e.label && /* @__PURE__ */ l("span", { className: "widget-kpi__trend-label", children: e.label })
+      e.label && /* @__PURE__ */ r("span", { className: "widget-kpi__trend-label", children: e.label })
     ] })
   ] });
 }
-const Ne = "var(--bg-elevated)";
-function P(a, r, n, t) {
+const fe = "var(--bg-elevated)";
+function O(l, a, n, t) {
   if (t <= 0) return "";
   if (t >= 1)
-    return `M ${a - n} ${r} A ${n} ${n} 0 0 1 ${a} ${r - n} A ${n} ${n} 0 0 1 ${a + n} ${r}`;
-  const e = t * Math.PI, i = a - n * Math.cos(e), s = r - n * Math.sin(e);
-  return `M ${a - n} ${r} A ${n} ${n} 0 0 1 ${i} ${s}`;
+    return `M ${l - n} ${a} A ${n} ${n} 0 0 1 ${l} ${a - n} A ${n} ${n} 0 0 1 ${l + n} ${a}`;
+  const e = t * Math.PI, i = l - n * Math.cos(e), s = a - n * Math.sin(e);
+  return `M ${l - n} ${a} A ${n} ${n} 0 0 1 ${i} ${s}`;
 }
-function A(a) {
-  const r = Math.abs(a);
-  return r >= 1e6 ? `${(a / 1e6).toFixed(1)}M` : r >= 1e3 ? `${(a / 1e3).toFixed(1)}K` : a.toLocaleString("pt-BR");
+function A(l) {
+  const a = Math.abs(l);
+  return a >= 1e6 ? `${(l / 1e6).toFixed(1)}M` : a >= 1e3 ? `${(l / 1e3).toFixed(1)}K` : l.toLocaleString("pt-BR");
 }
-function $e({ data: a, palette: r, label: n }) {
-  const t = n || String(a.label || ""), e = typeof a.value == "number" ? a.value : null, i = e != null ? A(e) : "-", s = String(a.formatted || "-"), c = typeof a.ratio == "number" ? a.ratio : 0, p = a.target_value, o = a.comparison_label, d = c >= 1, h = Math.min(Math.max(c, 0), 1), g = d ? "var(--action-green)" : c >= 0.7 ? r[0] || "var(--color-info)" : c >= 0.4 ? "var(--color-warning)" : "var(--color-error)", w = p != null ? A(p) : "-", u = 50, m = 50, $ = 44, f = 10;
+function ve({ data: l, palette: a, label: n }) {
+  const t = n || String(l.label || ""), e = typeof l.value == "number" ? l.value : null, i = e != null ? A(e) : "-", s = String(l.formatted || "-"), c = typeof l.ratio == "number" ? l.ratio : 0, m = l.target_value, o = l.comparison_label, d = c >= 1, g = Math.min(Math.max(c, 0), 1), u = d ? "var(--action-green)" : c >= 0.7 ? a[0] || "var(--color-info)" : c >= 0.4 ? "var(--color-warning)" : "var(--color-error)", w = m != null ? A(m) : "-", h = 50, p = 50, k = 44, b = 10;
   return /* @__PURE__ */ _("div", { className: "widget widget-gauge", children: [
-    /* @__PURE__ */ l("span", { className: "widget-gauge__label", children: t }),
+    /* @__PURE__ */ r("span", { className: "widget-gauge__label", children: t }),
     /* @__PURE__ */ _("div", { className: "widget-gauge__chart", children: [
       /* @__PURE__ */ _("svg", { viewBox: "0 0 100 56", preserveAspectRatio: "xMidYMax meet", children: [
-        /* @__PURE__ */ l("path", { d: P(u, m, $, 1), fill: "none", stroke: Ne, strokeWidth: f, strokeLinecap: "butt" }),
-        h > 0 && /* @__PURE__ */ l("path", { d: P(u, m, $, h), fill: "none", stroke: g, strokeWidth: f, strokeLinecap: "butt" })
+        /* @__PURE__ */ r("path", { d: O(h, p, k, 1), fill: "none", stroke: fe, strokeWidth: b, strokeLinecap: "butt" }),
+        g > 0 && /* @__PURE__ */ r("path", { d: O(h, p, k, g), fill: "none", stroke: u, strokeWidth: b, strokeLinecap: "butt" })
       ] }),
       /* @__PURE__ */ _("div", { className: "widget-gauge__center", children: [
-        /* @__PURE__ */ l("span", { className: "widget-gauge__percent", children: s }),
+        /* @__PURE__ */ r("span", { className: "widget-gauge__percent", children: s }),
         /* @__PURE__ */ _("span", { className: "widget-gauge__comparison", children: [
           i,
           " / ",
           w
         ] }),
-        d && /* @__PURE__ */ l("span", { className: "widget-gauge__badge", children: o || "Meta batida" }),
-        !d && o && /* @__PURE__ */ l("span", { className: "widget-gauge__comparison", children: o })
+        d && /* @__PURE__ */ r("span", { className: "widget-gauge__badge", children: o || "Meta batida" }),
+        !d && o && /* @__PURE__ */ r("span", { className: "widget-gauge__comparison", children: o })
       ] })
     ] })
   ] });
 }
-const O = { fontSize: 10, fill: "var(--text-muted)" }, ke = "var(--bg-elevated)", V = {
+const E = { fontSize: 10, fill: "var(--text-muted)" }, we = "var(--bg-elevated)", Y = {
   backgroundColor: "var(--bg-elevated)",
   border: "1px solid var(--bg-paper)",
   borderRadius: "6px",
   color: "var(--text-primary)"
-}, j = {
+}, V = {
   color: "var(--text-primary)",
   fontWeight: 600
 };
-function K(a, r) {
+function K(l, a) {
   var e;
-  const n = Array.isArray(r) ? r[0] : void 0, t = (e = n == null ? void 0 : n.payload) == null ? void 0 : e.tooltipLabel;
-  return typeof t == "string" && t ? t : String(a ?? "");
+  const n = Array.isArray(a) ? a[0] : void 0, t = (e = n == null ? void 0 : n.payload) == null ? void 0 : e.tooltipLabel;
+  return typeof t == "string" && t ? t : String(l ?? "");
 }
-function Ce(a) {
-  const [r, n] = N({ width: 0, height: 0 });
+function ye(l) {
+  const [a, n] = N({ width: 0, height: 0 });
   return T(() => {
-    const t = a.current;
+    const t = l.current;
     if (!t) return;
     const e = new ResizeObserver(([i]) => {
       const { width: s, height: c } = i.contentRect;
       n(
-        (p) => p.width !== Math.floor(s) || p.height !== Math.floor(c) ? { width: Math.floor(s), height: Math.floor(c) } : p
+        (m) => m.width !== Math.floor(s) || m.height !== Math.floor(c) ? { width: Math.floor(s), height: Math.floor(c) } : m
       );
     });
     return e.observe(t), () => e.disconnect();
-  }, [a]), r;
+  }, [l]), a;
 }
-function F({ Chart: a, chartData: r, xKey: n, series: t, palette: e, renderSeries: i, width: s, height: c }) {
-  return /* @__PURE__ */ _(a, { data: r, width: s, height: c, children: [
-    /* @__PURE__ */ l(ce, { strokeDasharray: "3 3", stroke: ke }),
-    /* @__PURE__ */ l(oe, { dataKey: n, tick: O }),
-    /* @__PURE__ */ l(de, { tick: O }),
-    /* @__PURE__ */ l(
-      W,
+function F({ Chart: l, chartData: a, xKey: n, series: t, palette: e, renderSeries: i, width: s, height: c }) {
+  return /* @__PURE__ */ _(l, { data: a, width: s, height: c, children: [
+    /* @__PURE__ */ r(oe, { strokeDasharray: "3 3", stroke: we }),
+    /* @__PURE__ */ r(de, { dataKey: n, tick: E }),
+    /* @__PURE__ */ r(ge, { tick: E }),
+    /* @__PURE__ */ r(
+      P,
       {
-        contentStyle: V,
-        labelStyle: j,
+        contentStyle: Y,
+        labelStyle: V,
         labelFormatter: K,
         cursor: { fill: "var(--bg-paper)", opacity: 0.3 }
       }
     ),
-    t.length > 1 && /* @__PURE__ */ l(he, {}),
-    t.map((p, o) => i(p, e[o % e.length], o))
+    t.length > 1 && /* @__PURE__ */ r(he, {}),
+    t.map((m, o) => i(m, e[o % e.length], o))
   ] });
 }
-function Se({ data: a, palette: r, label: n }) {
-  const t = String(a.chartType || "bar"), e = n || String(a.label || ""), i = String(a.xKey || "label"), s = a.series || [], c = a.data || [], p = M(null), { width: o, height: d } = Ce(p);
+function Ne({ data: l, palette: a, label: n }) {
+  const t = String(l.chartType || "bar"), e = n || String(l.label || ""), i = String(l.xKey || "label"), s = l.series || [], c = l.data || [], m = x(null), { width: o, height: d } = ye(m);
   return c.length ? /* @__PURE__ */ _("div", { className: "widget widget-chart", children: [
-    e && /* @__PURE__ */ l("h4", { className: "widget-chart__title", children: e }),
-    /* @__PURE__ */ l("div", { ref: p, className: "widget-chart__container", children: (() => {
+    e && /* @__PURE__ */ r("h4", { className: "widget-chart__title", children: e }),
+    /* @__PURE__ */ r("div", { ref: m, className: "widget-chart__container", children: (() => {
       var w;
       if (o <= 0 || d <= 0) return null;
       if (t === "pie")
-        return /* @__PURE__ */ _(B, { width: o, height: d, children: [
-          /* @__PURE__ */ l(
-            ee,
+        return /* @__PURE__ */ _(ee, { width: o, height: d, children: [
+          /* @__PURE__ */ r(
+            te,
             {
               data: c,
               dataKey: ((w = s[0]) == null ? void 0 : w.key) || "s0",
@@ -211,64 +185,64 @@ function Se({ data: a, palette: r, label: n }) {
               cx: "50%",
               cy: "50%",
               outerRadius: "75%",
-              label: ({ name: u, percent: m }) => `${u}: ${(m * 100).toFixed(0)}%`,
+              label: ({ name: h, percent: p }) => `${h}: ${(p * 100).toFixed(0)}%`,
               labelLine: !1,
-              children: c.map((u, m) => /* @__PURE__ */ l(te, { fill: r[m % r.length] }, m))
+              children: c.map((h, p) => /* @__PURE__ */ r(ae, { fill: a[p % a.length] }, p))
             }
           ),
-          /* @__PURE__ */ l(
-            W,
+          /* @__PURE__ */ r(
+            P,
             {
-              contentStyle: V,
-              labelStyle: j,
+              contentStyle: Y,
+              labelStyle: V,
               labelFormatter: K
             }
           )
         ] });
-      const g = { chartData: c, xKey: i, series: s, palette: r, width: o, height: d };
-      return t === "line" ? /* @__PURE__ */ l(F, { ...g, Chart: ae, renderSeries: (u, m) => /* @__PURE__ */ l(
-        re,
+      const u = { chartData: c, xKey: i, series: s, palette: a, width: o, height: d };
+      return t === "line" ? /* @__PURE__ */ r(F, { ...u, Chart: re, renderSeries: (h, p) => /* @__PURE__ */ r(
+        le,
         {
           type: "monotone",
-          dataKey: u.key,
-          name: u.label,
-          stroke: m,
+          dataKey: h.key,
+          name: h.label,
+          stroke: p,
           strokeWidth: 2,
           dot: c.length <= 31
         },
-        u.key
-      ) }) : t === "area" ? /* @__PURE__ */ l(F, { ...g, Chart: le, renderSeries: (u, m) => /* @__PURE__ */ l(
-        ne,
+        h.key
+      ) }) : t === "area" ? /* @__PURE__ */ r(F, { ...u, Chart: ne, renderSeries: (h, p) => /* @__PURE__ */ r(
+        ie,
         {
           type: "monotone",
-          dataKey: u.key,
-          name: u.label,
-          fill: m,
-          stroke: m,
+          dataKey: h.key,
+          name: h.label,
+          fill: p,
+          stroke: p,
           fillOpacity: 0.3
         },
-        u.key
-      ) }) : /* @__PURE__ */ l(F, { ...g, Chart: ie, renderSeries: (u, m) => /* @__PURE__ */ l(
-        se,
+        h.key
+      ) }) : /* @__PURE__ */ r(F, { ...u, Chart: se, renderSeries: (h, p) => /* @__PURE__ */ r(
+        ce,
         {
-          dataKey: u.key,
-          name: u.label,
-          fill: m,
+          dataKey: h.key,
+          name: h.label,
+          fill: p,
           radius: [3, 3, 0, 0]
         },
-        u.key
+        h.key
       ) });
     })() })
-  ] }) : /* @__PURE__ */ l("div", { className: "widget widget-chart widget-chart--empty", children: "Sem dados" });
+  ] }) : /* @__PURE__ */ r("div", { className: "widget widget-chart widget-chart--empty", children: "Sem dados" });
 }
-function Re({ config: a, value: r, options: n = [], dateBounds: t, onChange: e }) {
-  const i = a.filterType || "select", s = a.label || "Filtro", c = a.dateFilterMode || "range";
+function ke({ config: l, value: a, options: n = [], dateBounds: t, onChange: e }) {
+  const i = l.filterType || "select", s = l.label || "Filtro", c = l.dateFilterMode || "range";
   return /* @__PURE__ */ _("div", { className: "widget-filter", children: [
-    /* @__PURE__ */ l("label", { className: "widget-filter__label", children: s }),
-    i === "date_range" ? c === "yearly" ? /* @__PURE__ */ l(Fe, { value: r, dateBounds: t, onChange: e }) : c === "monthly" ? /* @__PURE__ */ l(Me, { value: r, dateBounds: t, onChange: e }) : c === "weekly" ? /* @__PURE__ */ l(Te, { value: r, dateBounds: t, onChange: e }) : /* @__PURE__ */ l(xe, { value: r, dateBounds: t, onChange: e }) : /* @__PURE__ */ l(
-      Ie,
+    /* @__PURE__ */ r("label", { className: "widget-filter__label", children: s }),
+    i === "date_range" ? c === "yearly" ? /* @__PURE__ */ r(Ce, { value: a, dateBounds: t, onChange: e }) : c === "monthly" ? /* @__PURE__ */ r(Se, { value: a, dateBounds: t, onChange: e }) : c === "weekly" ? /* @__PURE__ */ r(Me, { value: a, dateBounds: t, onChange: e }) : /* @__PURE__ */ r($e, { value: a, dateBounds: t, onChange: e }) : /* @__PURE__ */ r(
+      Re,
       {
-        value: r,
+        value: a,
         options: n,
         multi: i === "multi_select",
         onChange: e
@@ -276,15 +250,15 @@ function Re({ config: a, value: r, options: n = [], dateBounds: t, onChange: e }
     )
   ] });
 }
-function xe({ value: a, dateBounds: r, onChange: n }) {
-  const [t, e] = a ? a.split("|") : ["", ""];
+function $e({ value: l, dateBounds: a, onChange: n }) {
+  const [t, e] = l ? l.split("|") : ["", ""];
   return /* @__PURE__ */ _("div", { className: "widget-filter__date-range widget-filter__date-range--stacked", children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ r(
       L,
       {
         value: t,
-        minIso: r == null ? void 0 : r.min,
-        maxIso: e || (r == null ? void 0 : r.max),
+        minIso: a == null ? void 0 : a.min,
+        maxIso: e || (a == null ? void 0 : a.max),
         selectsStart: !0,
         startIso: t,
         endIso: e,
@@ -292,12 +266,12 @@ function xe({ value: a, dateBounds: r, onChange: n }) {
         onChange: (i) => n(`${i}|${e}`)
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ r(
       L,
       {
         value: e,
-        minIso: t || (r == null ? void 0 : r.min),
-        maxIso: r == null ? void 0 : r.max,
+        minIso: t || (a == null ? void 0 : a.min),
+        maxIso: a == null ? void 0 : a.max,
         selectsEnd: !0,
         startIso: t,
         endIso: e,
@@ -307,96 +281,96 @@ function xe({ value: a, dateBounds: r, onChange: n }) {
     )
   ] });
 }
-function Fe({ value: a, dateBounds: r, onChange: n }) {
-  const [t] = a ? a.split("|") : [""], e = z(t), i = /* @__PURE__ */ new Date(), s = (e == null ? void 0 : e.year) ?? i.getFullYear(), c = I(r), p = (o) => {
-    const d = U(o);
+function Ce({ value: l, dateBounds: a, onChange: n }) {
+  const [t] = l ? l.split("|") : [""], e = H(t), i = /* @__PURE__ */ new Date(), s = (e == null ? void 0 : e.year) ?? i.getFullYear(), c = I(a), m = (o) => {
+    const d = Q(o);
     n(`${d.start}|${d.end}`);
   };
-  return /* @__PURE__ */ l("div", { className: "widget-filter__date-range widget-filter__date-range--year", children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ r("div", { className: "widget-filter__date-range widget-filter__date-range--year", children: /* @__PURE__ */ r(
     "select",
     {
       className: "widget-filter__select",
       value: s,
-      onChange: (o) => p(parseInt(o.target.value)),
-      children: c.map((o) => /* @__PURE__ */ l("option", { value: o, children: o }, o))
+      onChange: (o) => m(parseInt(o.target.value)),
+      children: c.map((o) => /* @__PURE__ */ r("option", { value: o, children: o }, o))
     }
   ) });
 }
-function Me({ value: a, dateBounds: r, onChange: n }) {
-  const [t] = a ? a.split("|") : [""], e = E(t), i = /* @__PURE__ */ new Date(), s = (e == null ? void 0 : e.year) ?? i.getFullYear(), c = (e == null ? void 0 : e.month) ?? i.getMonth() + 1, p = I(r), o = (d, h) => {
-    const g = H(d, h);
-    n(`${g.start}|${g.end}`);
+function Se({ value: l, dateBounds: a, onChange: n }) {
+  const [t] = l ? l.split("|") : [""], e = W(t), i = /* @__PURE__ */ new Date(), s = (e == null ? void 0 : e.year) ?? i.getFullYear(), c = (e == null ? void 0 : e.month) ?? i.getMonth() + 1, m = I(a), o = (d, g) => {
+    const u = q(d, g);
+    n(`${u.start}|${u.end}`);
   };
   return /* @__PURE__ */ _("div", { className: "widget-filter__date-range widget-filter__date-range--month", children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ r(
       "select",
       {
         className: "widget-filter__select",
         value: c,
         onChange: (d) => o(s, parseInt(d.target.value)),
-        children: D.map((d, h) => /* @__PURE__ */ l("option", { value: h + 1, children: d }, h + 1))
+        children: D.map((d, g) => /* @__PURE__ */ r("option", { value: g + 1, children: d }, g + 1))
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ r(
       "select",
       {
         className: "widget-filter__select",
         value: s,
         onChange: (d) => o(parseInt(d.target.value), c),
-        children: p.map((d) => /* @__PURE__ */ l("option", { value: d, children: d }, d))
+        children: m.map((d) => /* @__PURE__ */ r("option", { value: d, children: d }, d))
       }
     )
   ] });
 }
-function Te({ value: a, dateBounds: r, onChange: n }) {
-  const [t] = a ? a.split("|") : [""], e = E(t), i = /* @__PURE__ */ new Date(), s = (e == null ? void 0 : e.year) ?? i.getFullYear(), c = (e == null ? void 0 : e.month) ?? i.getMonth() + 1, p = I(r), o = x(s, c), d = X(t, s, c) || 1;
+function Me({ value: l, dateBounds: a, onChange: n }) {
+  const [t] = l ? l.split("|") : [""], e = W(t), i = /* @__PURE__ */ new Date(), s = (e == null ? void 0 : e.year) ?? i.getFullYear(), c = (e == null ? void 0 : e.month) ?? i.getMonth() + 1, m = I(a), o = R(s, c), d = X(t, s, c) || 1;
   return /* @__PURE__ */ _("div", { className: "widget-filter__date-range widget-filter__date-range--week", children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ r(
       "select",
       {
         className: "widget-filter__select",
         value: s,
-        onChange: (h) => {
-          const g = parseInt(h.target.value), u = x(g, c)[0];
-          u && n(`${u.start}|${u.end}`);
+        onChange: (g) => {
+          const u = parseInt(g.target.value), h = R(u, c)[0];
+          h && n(`${h.start}|${h.end}`);
         },
-        children: p.map((h) => /* @__PURE__ */ l("option", { value: h, children: h }, h))
+        children: m.map((g) => /* @__PURE__ */ r("option", { value: g, children: g }, g))
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ r(
       "select",
       {
         className: "widget-filter__select",
         value: c,
-        onChange: (h) => {
-          const g = parseInt(h.target.value), u = x(s, g)[0];
-          u && n(`${u.start}|${u.end}`);
+        onChange: (g) => {
+          const u = parseInt(g.target.value), h = R(s, u)[0];
+          h && n(`${h.start}|${h.end}`);
         },
-        children: D.map((h, g) => /* @__PURE__ */ l("option", { value: g + 1, children: h }, g + 1))
+        children: D.map((g, u) => /* @__PURE__ */ r("option", { value: u + 1, children: g }, u + 1))
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ r(
       "select",
       {
         className: "widget-filter__select",
         value: d,
-        onChange: (h) => {
-          const g = o[parseInt(h.target.value) - 1];
-          g && n(`${g.start}|${g.end}`);
+        onChange: (g) => {
+          const u = o[parseInt(g.target.value) - 1];
+          u && n(`${u.start}|${u.end}`);
         },
-        children: o.map((h) => /* @__PURE__ */ l("option", { value: h.index, children: h.label }, h.index))
+        children: o.map((g) => /* @__PURE__ */ r("option", { value: g.index, children: g.label }, g.index))
       }
     )
   ] });
 }
-function Ie({ value: a, options: r, multi: n, onChange: t }) {
+function Re({ value: l, options: a, multi: n, onChange: t }) {
   if (n) {
-    const e = a ? a.split(",") : [], i = (s) => {
-      const c = e.includes(s) ? e.filter((p) => p !== s) : [...e, s];
+    const e = l ? l.split(",") : [], i = (s) => {
+      const c = e.includes(s) ? e.filter((m) => m !== s) : [...e, s];
       t(c.join(","));
     };
-    return /* @__PURE__ */ l("div", { className: "widget-filter__multi", children: r.map((s) => /* @__PURE__ */ _("label", { className: "widget-filter__multi-option", children: [
-      /* @__PURE__ */ l(
+    return /* @__PURE__ */ r("div", { className: "widget-filter__multi", children: a.map((s) => /* @__PURE__ */ _("label", { className: "widget-filter__multi-option", children: [
+      /* @__PURE__ */ r(
         "input",
         {
           type: "checkbox",
@@ -411,74 +385,74 @@ function Ie({ value: a, options: r, multi: n, onChange: t }) {
     "select",
     {
       className: "widget-filter__select",
-      value: a,
+      value: l,
       onChange: (e) => t(e.target.value),
       children: [
-        /* @__PURE__ */ l("option", { value: "", children: "Todos" }),
-        r.map((e) => /* @__PURE__ */ l("option", { value: e, children: e }, e))
+        /* @__PURE__ */ r("option", { value: "", children: "Todos" }),
+        a.map((e) => /* @__PURE__ */ r("option", { value: e, children: e }, e))
       ]
     }
   );
 }
-const Le = {
+const Fe = {
   currency: "R$",
   percentage: "%"
 };
-function Pe({ config: a, value: r, onChange: n }) {
-  const t = a.label || "Variavel", e = a.locked || !1, i = a.variableFormat || "number", s = Le[i] || "";
+function xe({ config: l, value: a, onChange: n }) {
+  const t = l.label || "Variavel", e = l.locked || !1, i = l.variableFormat || "number", s = Fe[i] || "";
   return /* @__PURE__ */ _("div", { className: `widget-variable ${e ? "widget-variable--locked" : ""}`, children: [
-    /* @__PURE__ */ l("label", { className: "widget-variable__label", children: t }),
+    /* @__PURE__ */ r("label", { className: "widget-variable__label", children: t }),
     /* @__PURE__ */ _("div", { className: "widget-variable__input-wrapper", children: [
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ r(
         "input",
         {
           className: "widget-variable__input",
           type: "number",
-          value: r,
+          value: a,
           onChange: (c) => n(parseFloat(c.target.value) || 0),
           disabled: e,
           step: i === "integer" ? 1 : 0.01
         }
       ),
-      s && /* @__PURE__ */ l("span", { className: "widget-variable__suffix", children: s })
+      s && /* @__PURE__ */ r("span", { className: "widget-variable__suffix", children: s })
     ] }),
-    e && /* @__PURE__ */ l("span", { className: "widget-variable__lock-icon", title: "Bloqueado", children: "🔒" })
+    e && /* @__PURE__ */ r("span", { className: "widget-variable__lock-icon", title: "Bloqueado", children: "🔒" })
   ] });
 }
-function Ae({ config: a, palette: r, onChange: n }) {
-  const t = a.label || "Cores", e = a.locked || !1;
+function Te({ config: l, palette: a, onChange: n }) {
+  const t = l.label || "Cores", e = l.locked || !1;
   return /* @__PURE__ */ _("div", { className: `widget-palette ${e ? "widget-palette--locked" : ""}`, children: [
-    /* @__PURE__ */ l("label", { className: "widget-palette__label", children: t }),
-    /* @__PURE__ */ l(q, { selected: r, onSelect: n, customMode: !0, disabled: e }),
-    e && /* @__PURE__ */ l("span", { className: "widget-palette__lock-icon", title: "Bloqueado", children: "🔒" })
+    /* @__PURE__ */ r("label", { className: "widget-palette__label", children: t }),
+    /* @__PURE__ */ r(U, { selected: a, onSelect: n, customMode: !0, disabled: e }),
+    e && /* @__PURE__ */ r("span", { className: "widget-palette__lock-icon", title: "Bloqueado", children: "🔒" })
   ] });
 }
-function Oe({
-  type: a,
-  computed: r,
+function Ie({
+  type: l,
+  computed: a,
   palette: n,
   config: t,
   filterValue: e,
   filterOptions: i,
   dateBounds: s,
   onFilterChange: c,
-  variableValue: p,
+  variableValue: m,
   onVariableChange: o,
   onPaletteChange: d
 }) {
-  if (r.error)
-    return /* @__PURE__ */ l("div", { className: "widget widget--error", children: /* @__PURE__ */ l("span", { className: "widget__error-text", children: String(r.error) }) });
-  const h = J(n);
-  switch (a) {
+  if (a.error)
+    return /* @__PURE__ */ r("div", { className: "widget widget--error", children: /* @__PURE__ */ r("span", { className: "widget__error-text", children: String(a.error) }) });
+  const g = J(n);
+  switch (l) {
     case "kpi_card":
-      return /* @__PURE__ */ l(ye, { data: r, label: t == null ? void 0 : t.label });
+      return /* @__PURE__ */ r(be, { data: a, label: t == null ? void 0 : t.label });
     case "gauge":
-      return /* @__PURE__ */ l($e, { data: r, palette: h, label: t == null ? void 0 : t.label });
+      return /* @__PURE__ */ r(ve, { data: a, palette: g, label: t == null ? void 0 : t.label });
     case "chart":
-      return /* @__PURE__ */ l(Se, { data: r, palette: h, label: t == null ? void 0 : t.label });
+      return /* @__PURE__ */ r(Ne, { data: a, palette: g, label: t == null ? void 0 : t.label });
     case "filter":
-      return t && c ? /* @__PURE__ */ l(
-        Re,
+      return t && c ? /* @__PURE__ */ r(
+        ke,
         {
           config: t,
           value: e || "",
@@ -488,19 +462,19 @@ function Oe({
         }
       ) : null;
     case "variable": {
-      const g = t;
-      return g && o ? /* @__PURE__ */ l(
-        Pe,
+      const u = t;
+      return u && o ? /* @__PURE__ */ r(
+        xe,
         {
-          config: g,
-          value: p ?? g.variableValue ?? 0,
+          config: u,
+          value: m ?? u.variableValue ?? 0,
           onChange: o
         }
       ) : null;
     }
     case "color_palette":
-      return t && d ? /* @__PURE__ */ l(
-        Ae,
+      return t && d ? /* @__PURE__ */ r(
+        Te,
         {
           config: t,
           palette: n,
@@ -510,15 +484,15 @@ function Oe({
     default:
       return /* @__PURE__ */ _("div", { className: "widget", children: [
         "Widget: ",
-        a
+        l
       ] });
   }
 }
-const Ee = 40, De = 6;
-function Ke({
-  token: a,
-  rowHeight: r = Ee,
-  gridGap: n = De,
+const Le = 2.5, Oe = 0.375;
+function Pe({
+  token: l,
+  rowHeight: a = Le,
+  gridGap: n = Oe,
   className: t
 }) {
   const {
@@ -526,63 +500,63 @@ function Ke({
     renderData: i,
     loading: s,
     error: c,
-    filters: p,
+    filters: m,
     variables: o,
     palette: d,
-    setFilter: h,
-    setVariable: g,
+    setFilter: g,
+    setVariable: u,
     setPalette: w
-  } = be(a);
+  } = me(l);
   if (c && !e)
-    return /* @__PURE__ */ l("div", { className: `preview-tab ${t ?? ""}`, children: /* @__PURE__ */ l("div", { className: "preview-tab__error", children: c }) });
+    return /* @__PURE__ */ r("div", { className: `preview-tab ${t ?? ""}`, children: /* @__PURE__ */ r("div", { className: "preview-tab__error", children: c }) });
   if (!e)
-    return /* @__PURE__ */ l("div", { className: `preview-tab ${t ?? ""}`, children: /* @__PURE__ */ l("div", { className: "preview-tab__loading", children: "Carregando dashboard..." }) });
+    return /* @__PURE__ */ r("div", { className: `preview-tab ${t ?? ""}`, children: /* @__PURE__ */ r("div", { className: "preview-tab__loading", children: "Carregando dashboard..." }) });
   if (e.widgets.length === 0)
-    return /* @__PURE__ */ l("div", { className: `preview-tab ${t ?? ""}`, children: /* @__PURE__ */ l("div", { className: "preview-tab__empty", children: "Este dashboard nao possui widgets." }) });
-  const u = (i == null ? void 0 : i.widgets) ?? {}, m = (i == null ? void 0 : i.date_bounds) ?? null, $ = {
+    return /* @__PURE__ */ r("div", { className: `preview-tab ${t ?? ""}`, children: /* @__PURE__ */ r("div", { className: "preview-tab__empty", children: "Este dashboard nao possui widgets." }) });
+  const h = (i == null ? void 0 : i.widgets) ?? {}, p = (i == null ? void 0 : i.date_bounds) ?? null, k = {
     display: "grid",
     gridTemplateColumns: `repeat(${e.gridColumns}, 1fr)`,
-    gridTemplateRows: `repeat(${e.gridRows}, ${r}px)`,
-    gap: `${n}px`,
-    ...Q(d)
+    gridTemplateRows: `repeat(${e.gridRows}, ${a}rem)`,
+    gap: `${n}rem`,
+    ...Z(d)
   };
   return /* @__PURE__ */ _("div", { className: `preview-tab ${t ?? ""}`, children: [
-    c && !i && /* @__PURE__ */ l("div", { className: "preview-tab__error", children: c }),
-    i && /* @__PURE__ */ l("div", { className: "preview-tab__grid", style: $, children: e.widgets.map((f) => {
-      const C = Z.has(f.type), y = u[f.id], S = {
-        gridColumn: `${f.grid.x + 1} / span ${f.grid.w}`,
-        gridRow: `${f.grid.y + 1} / span ${f.grid.h}`
-      }, v = f.type === "variable" ? o[f.id] ?? (y == null ? void 0 : y.value) ?? f.config.variableValue ?? 0 : void 0;
-      return /* @__PURE__ */ l(
+    c && !i && /* @__PURE__ */ r("div", { className: "preview-tab__error", children: c }),
+    i && /* @__PURE__ */ r("div", { className: "preview-tab__grid", style: k, children: e.widgets.map((b) => {
+      const C = B.has(b.type), y = h[b.id], S = {
+        gridColumn: `${b.grid.x + 1} / span ${b.grid.w}`,
+        gridRow: `${b.grid.y + 1} / span ${b.grid.h}`
+      }, v = b.type === "variable" ? o[b.id] ?? (y == null ? void 0 : y.value) ?? b.config.variableValue ?? 0 : void 0;
+      return /* @__PURE__ */ r(
         "div",
         {
           className: `preview-tab__widget ${C ? "preview-tab__widget--control" : ""}`,
           style: S,
-          children: C || y ? /* @__PURE__ */ l(
-            Oe,
+          children: C || y ? /* @__PURE__ */ r(
+            Ie,
             {
-              type: f.type,
+              type: b.type,
               computed: y || {},
               palette: d,
-              config: f.config,
-              filterValue: p[f.id] || "",
+              config: b.config,
+              filterValue: m[b.id] || "",
               filterOptions: (y == null ? void 0 : y.available_values) || [],
-              dateBounds: m,
-              onFilterChange: (b) => h(f.id, b),
+              dateBounds: p,
+              onFilterChange: (f) => g(b.id, f),
               variableValue: v,
-              onVariableChange: (b) => g(f.id, b),
+              onVariableChange: (f) => u(b.id, f),
               onPaletteChange: w
             }
-          ) : /* @__PURE__ */ l("div", { className: "preview-tab__widget-loading", children: s ? "Carregando..." : "Sem dados" })
+          ) : /* @__PURE__ */ r("div", { className: "preview-tab__widget-loading", children: s ? "Carregando..." : "Sem dados" })
         },
-        f.id
+        b.id
       );
     }) }),
-    s && i && /* @__PURE__ */ l("div", { className: "preview-tab__recalculating", children: "Atualizando..." })
+    s && i && /* @__PURE__ */ r("div", { className: "preview-tab__recalculating", children: "Atualizando..." })
   ] });
 }
 export {
-  pe as ApiError,
-  Ke as Dashboard
+  Ke as ApiError,
+  Pe as Dashboard
 };
 //# sourceMappingURL=index.js.map