@actionexec/dashboards 0.1.0 → 0.5.0

package/README.md

@@ -1,8 +1,7 @@
 # @actionexec/dashboards
 
-Biblioteca React para consumo de dashboards servidos pela API `action-data`.
-Exporta o componente top-level `<Dashboard>`, renderizadores de widgets individuais,
-tipos e utilitarios de paleta.
+Biblioteca React para consumo de dashboards servidos pela plataforma Action.
+Dedicada a API `/external/dashboards` — zero configuracao, so passe o token.
 
 ## Instalacao
 
@@ -10,42 +9,40 @@ tipos e utilitarios de paleta.
 npm install @actionexec/dashboards
 ```
 
-Peer dependencies: `react`, `react-dom`, `recharts`, `react-datepicker`.
+Peer deps: `react`, `react-dom`, `recharts`, `react-datepicker`.
 
-## Uso basico
+## Uso
 
 ```tsx
 import { Dashboard } from '@actionexec/dashboards';
 import '@actionexec/dashboards/styles.css';
 
-function App() {
-  return (
-    <Dashboard
-      apiUrl="https://action.example.com/api"
-      token="token-de-acesso"
-    />
-  );
+export function App() {
+  return <Dashboard token="seu-token-de-acesso" />;
 }
 ```
 
-## Fetcher customizado (auth proprio)
+E so. A lib gerencia fetch, filtros, variaveis, paleta e todas as atualizacoes
+automaticamente.
 
-```tsx
-import { Dashboard, type DashboardFetcher } from '@actionexec/dashboards';
+## API publica
 
-const fetcher: DashboardFetcher = {
-  layout: async () => (await myClient.get('/dashboards/layout')).data,
-  render: async (params) => (await myClient.get('/dashboards/render', { params })).data,
-};
+### `<Dashboard>`
 
-<Dashboard fetcher={fetcher} />
-```
+Unico componente exposto. Renderiza um dashboard completo com interatividade.
 
-## API publica
+| Prop | Tipo | Default | Descricao |
+|---|---|---|---|
+| `token` | `string` | — | Token Bearer do dashboard (obrigatorio) |
+| `rowHeight` | `number` | `2.5` | Altura de cada linha do grid em rem |
+| `gridGap` | `number` | `0.375` | Gap entre widgets em rem |
+| `className` | `string` | — | Classe CSS adicional no container raiz |
+
+### `ApiError`
+
+Erro lancado internamente quando a API retorna status != 2xx. Exposto para quem
+quiser fazer error boundary customizada em torno do `<Dashboard>`.
+
+---
 
-- `<Dashboard>` — orquestrador completo (token + fetcher)
-- `<WidgetRenderer>` — dispatch por tipo (consumo avancado)
-- Widgets individuais: `KPIWidget`, `GaugeWidget`, `ChartWidget`, `FilterWidget`, `VariableWidget`, `ColorPaletteWidget`
-- `<ColorPaletteSelector>` — seletor de paletas (presets + custom)
-- Utils: `getPaletteCssVars`, `getSeries`, `ensurePaletteShape`, `PALETTES`
-- Tipos: `WidgetDefinition`, `LayoutConfig`, `RenderResponse`, configs por tipo, etc.
+Veja [EXAMPLE.md](./EXAMPLE.md) para exemplos end-to-end.

package/dist/Dashboard.d.ts

@@ -1,20 +1,12 @@
-import type { DashboardFetcher } from './api/fetcher';
-type AuthProps = {
-    apiUrl: string;
+interface DashboardProps {
+    /** Token Bearer de acesso ao dashboard. */
     token: string;
-    fetcher?: never;
-} | {
-    fetcher: DashboardFetcher;
-    apiUrl?: never;
-    token?: never;
-};
-type DashboardProps = AuthProps & {
-    /** Altura de cada linha do grid em pixels. Default 40. */
+    /** Altura de cada linha do grid em rem. Default 2.5 (40px no base 16). */
     rowHeight?: number;
-    /** Gap entre widgets em pixels. Default 6. */
+    /** Gap entre widgets em rem. Default 0.375 (6px no base 16). */
     gridGap?: number;
-    /** Renderer customizado para cada widget (avancado). */
+    /** Classe CSS adicional no container raiz. */
     className?: string;
-};
-export declare function Dashboard(props: DashboardProps): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Dashboard({ token, rowHeight, gridGap, className, }: DashboardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/api/fetcher.d.ts

@@ -1,25 +1,11 @@
 import type { LayoutResponse, RenderResponse } from '../types';
-export interface DashboardFetcher {
-    /** Retorna estrutura do dashboard (widgets, paleta, grid, date bounds). */
-    layout(): Promise<LayoutResponse>;
-    /** Retorna dados computados aplicando filtros/variaveis via query params. */
-    render(params?: Record<string, string>): Promise<RenderResponse>;
-}
+/** Sobrescreve a URL base da API. Destinado ao builder da plataforma em dev —
+ *  consumidores externos nao devem chamar (usam a URL de producao por default). */
+export declare function setApiUrl(url: string): void;
 export declare class ApiError extends Error {
     status?: number | undefined;
     payload?: unknown | undefined;
     constructor(message: string, status?: number | undefined, payload?: unknown | undefined);
 }
-interface TokenFetcherOptions {
-    /** URL base da API (ex: "https://action.example.com/api"). */
-    apiUrl: string;
-    /** Token de acesso do dashboard (Bearer). */
-    token: string;
-    /** Fetch customizado (default: globalThis.fetch). */
-    fetch?: typeof fetch;
-    /** Prefixo dos endpoints (default: "/external/dashboards"). */
-    endpointPrefix?: string;
-}
-/** Cria um fetcher baseado em token Bearer, consumindo /external/dashboards. */
-export declare function createTokenFetcher(options: TokenFetcherOptions): DashboardFetcher;
-export {};
+export declare const fetchLayout: (token: string) => Promise<LayoutResponse>;
+export declare const fetchRender: (token: string, params?: Record<string, string>) => Promise<RenderResponse>;

package/dist/hooks/useDashboardData.d.ts

@@ -1,4 +1,3 @@
-import type { DashboardFetcher } from '../api/fetcher';
 import type { LayoutResponse, RenderResponse } from '../types';
 export interface UseDashboardDataResult {
     layout: LayoutResponse | null;
@@ -15,4 +14,4 @@ export interface UseDashboardDataResult {
     setVariable(widgetId: string, value: number): void;
     setPalette(colors: string[]): void;
 }
-export declare function useDashboardData(fetcher: DashboardFetcher): UseDashboardDataResult;
+export declare function useDashboardData(token: string): UseDashboardDataResult;

package/dist/index-C3jiurhg.js

@@ -0,0 +1,519 @@
+import { jsx as u, jsxs as h } from "react/jsx-runtime";
+import N from "react-datepicker";
+const A = "https://action-data-api.fly.dev/api", O = "/external/dashboards";
+let E = A;
+function j(e) {
+  E = e.replace(/\/$/, "");
+}
+class x extends Error {
+  constructor(t, r, a) {
+    super(t), this.status = r, this.payload = a, this.name = "ApiError";
+  }
+}
+async function y(e, t, r) {
+  const a = new URL(`${E}${O}${e}`);
+  if (r)
+    for (const [n, i] of Object.entries(r)) a.searchParams.set(n, i);
+  const s = await fetch(a.toString(), {
+    headers: { Authorization: `Bearer ${t}` }
+  });
+  if (!s.ok) {
+    let n;
+    try {
+      n = await s.json();
+    } catch {
+    }
+    throw new x(
+      `Requisicao falhou (${s.status}) em ${e}`,
+      s.status,
+      n
+    );
+  }
+  return await s.json();
+}
+const J = (e) => y("/layout", e), z = (e, t) => y("/render", e, t), o = {
+  series0: 0,
+  series1: 1,
+  series2: 2,
+  series3: 3,
+  series4: 4,
+  bgDark: 5,
+  bgPaper: 6,
+  bgElevated: 7,
+  textPrimary: 8,
+  textMuted: 9,
+  accent: 10,
+  success: 11,
+  error: 12
+}, L = 5, T = 13, P = {
+  series0: "Série 1",
+  series1: "Série 2",
+  series2: "Série 3",
+  series3: "Série 4",
+  series4: "Série 5",
+  bgDark: "Fundo Escuro",
+  bgPaper: "Fundo Cartão",
+  bgElevated: "Fundo Elevado",
+  textPrimary: "Texto Primário",
+  textMuted: "Texto Secundário",
+  accent: "Destaque",
+  success: "Sucesso",
+  error: "Erro"
+}, S = {
+  action: {
+    label: "Action",
+    colors: [
+      "#ff6b00",
+      "#a3e635",
+      "#e3f544",
+      "#65ffd1",
+      "#ff0404",
+      "#1a1a1a",
+      "#262626",
+      "#333333",
+      "#f5f5f5",
+      "#999999",
+      "#ff6b00",
+      "#a3e635",
+      "#ef4444"
+    ]
+  },
+  westCoast: {
+    label: "West Coast",
+    colors: [
+      "#a3b86c",
+      "#c89b3c",
+      "#8b6f47",
+      "#6b8e23",
+      "#d2691e",
+      "#1f1a14",
+      "#2a241b",
+      "#3a3225",
+      "#e8dcc4",
+      "#a89878",
+      "#c89b3c",
+      "#a3b86c",
+      "#c44536"
+    ]
+  },
+  mono: {
+    label: "Monocromático",
+    colors: [
+      "#f8fafc",
+      "#cbd5e1",
+      "#94a3b8",
+      "#64748b",
+      "#475569",
+      "#0a0a0a",
+      "#171717",
+      "#262626",
+      "#fafafa",
+      "#a3a3a3",
+      "#e5e5e5",
+      "#cbd5e1",
+      "#ef4444"
+    ]
+  },
+  ocean: {
+    label: "Ocean",
+    colors: [
+      "#0ea5e9",
+      "#06b6d4",
+      "#0891b2",
+      "#3b82f6",
+      "#22d3ee",
+      "#0a1929",
+      "#0f2740",
+      "#173554",
+      "#e0f2fe",
+      "#7dd3fc",
+      "#22d3ee",
+      "#10b981",
+      "#f43f5e"
+    ]
+  },
+  princess: {
+    label: "Cute Pink",
+    colors: [
+      "#ff79bc",
+      "#a855f7",
+      "#f472b6",
+      "#d946ef",
+      "#fb7185",
+      "#fff0f6",
+      "#ffe4ec",
+      "#ffffff",
+      "#ff4099",
+      "#ffadd5",
+      "#ec4899",
+      "#10b981",
+      "#e11d48"
+    ]
+  }
+}, v = S.action.colors;
+function _(e) {
+  const t = v;
+  if (!e || e.length === 0) return [...t];
+  if (e.length >= T) return e.slice(0, T);
+  const r = [...e];
+  for (let a = e.length; a < T; a++) r.push(t[a]);
+  return r;
+}
+function w(e) {
+  return _(e).slice(0, L);
+}
+function H(e) {
+  const t = _(e);
+  return {
+    "--bg-dark": t[o.bgDark],
+    "--bg-paper": t[o.bgPaper],
+    "--bg-elevated": t[o.bgElevated],
+    "--text-primary": t[o.textPrimary],
+    "--text-secondary": t[o.textMuted],
+    "--text-muted": t[o.textMuted],
+    "--action-orange": t[o.accent],
+    "--action-green": t[o.success],
+    "--color-success": t[o.success],
+    "--color-error": t[o.error],
+    "--color-info": t[o.series2],
+    "--color-warning": t[o.series3]
+  };
+}
+const V = [
+  "Jan",
+  "Fev",
+  "Mar",
+  "Abr",
+  "Mai",
+  "Jun",
+  "Jul",
+  "Ago",
+  "Set",
+  "Out",
+  "Nov",
+  "Dez"
+], K = [
+  "Janeiro",
+  "Fevereiro",
+  "Marco",
+  "Abril",
+  "Maio",
+  "Junho",
+  "Julho",
+  "Agosto",
+  "Setembro",
+  "Outubro",
+  "Novembro",
+  "Dezembro"
+];
+function q(e) {
+  return { start: `${e}-01-01`, end: `${e}-12-31` };
+}
+function X(e) {
+  if (!e) return null;
+  const t = e.match(/^(\d{4})/);
+  return t ? { year: parseInt(t[1]) } : null;
+}
+function Q(e, t) {
+  const r = new Date(e, t, 0).getDate(), a = (s) => String(s).padStart(2, "0");
+  return {
+    start: `${e}-${a(t)}-01`,
+    end: `${e}-${a(t)}-${a(r)}`
+  };
+}
+function M(e) {
+  const t = new Date(Date.UTC(e.getFullYear(), e.getMonth(), e.getDate()));
+  t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
+  const r = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
+  return Math.ceil(((t.getTime() - r.getTime()) / 864e5 + 1) / 7);
+}
+function Z(e, t) {
+  const r = new Date(e, 0, 4), a = (r.getDay() + 6) % 7, s = new Date(r.getTime() - a * 864e5), n = new Date(s.getTime() + (t - 1) * 7 * 864e5), i = new Date(n.getTime() + 6 * 864e5), f = (g) => String(g).padStart(2, "0"), d = (g) => `${g.getFullYear()}-${f(g.getMonth() + 1)}-${f(g.getDate())}`;
+  return { start: d(n), end: d(i) };
+}
+function B(e, t) {
+  const r = /* @__PURE__ */ new Set(), a = new Date(e, t, 0).getDate();
+  for (let s = 1; s <= a; s++)
+    r.add(M(new Date(e, t - 1, s)));
+  return Array.from(r).sort((s, n) => s - n);
+}
+function ee(e, t) {
+  const r = new Date(e, t, 0).getDate(), a = (f) => String(f).padStart(2, "0"), s = [];
+  let n = 1, i = 1;
+  for (; n <= r; ) {
+    const f = n, d = Math.min(n + 6, r), g = `${e}-${a(t)}-${a(f)}`, c = `${e}-${a(t)}-${a(d)}`, l = `${i}° Semana (${a(f)}/${a(t)} - ${a(d)}/${a(t)})`;
+    s.push({ index: i, startDay: f, endDay: d, start: g, end: c, label: l }), n = d + 1, i++;
+  }
+  return s;
+}
+function te(e, t, r) {
+  if (!e) return 1;
+  const a = (i) => String(i).padStart(2, "0"), s = e.match(new RegExp(`^${t}-${a(r)}-(\\d{2})`));
+  if (!s) return 1;
+  const n = parseInt(s[1]);
+  return Math.ceil(n / 7);
+}
+function ae(e) {
+  if (!e) return null;
+  const t = e.match(/^(\d{4})-(\d{2})/);
+  return t ? { year: parseInt(t[1]), month: parseInt(t[2]) } : null;
+}
+function re(e) {
+  if (!e) return null;
+  const t = /* @__PURE__ */ new Date(e + "T00:00:00");
+  return isNaN(t.getTime()) ? null : { year: t.getFullYear(), week: M(t) };
+}
+function se(e) {
+  const t = /* @__PURE__ */ new Date(), r = e != null && e.min ? parseInt(e.min.slice(0, 4)) : t.getFullYear() - 2, a = e != null && e.max ? parseInt(e.max.slice(0, 4)) : t.getFullYear(), s = [];
+  for (let n = a; n >= r; n--) s.push(n);
+  return s;
+}
+function m(e) {
+  if (!e) return null;
+  const [t, r, a] = e.split("-").map(Number);
+  return !t || !r || !a ? null : new Date(t, r - 1, a);
+}
+function C(e) {
+  if (!e) return "";
+  const t = e.getFullYear(), r = String(e.getMonth() + 1).padStart(2, "0"), a = String(e.getDate()).padStart(2, "0");
+  return `${t}-${r}-${a}`;
+}
+function ne({
+  value: e,
+  onChange: t,
+  minIso: r,
+  maxIso: a,
+  placeholder: s,
+  selectsStart: n,
+  selectsEnd: i,
+  startIso: f,
+  endIso: d,
+  className: g,
+  disabled: c
+}) {
+  return /* @__PURE__ */ u("div", { className: `ddp-field ${g ?? ""}`, children: /* @__PURE__ */ u(
+    N,
+    {
+      selected: m(e),
+      onChange: (l) => t(C(l)),
+      selectsStart: n,
+      selectsEnd: i,
+      startDate: m(f) ?? void 0,
+      endDate: m(d) ?? void 0,
+      minDate: m(r) ?? void 0,
+      maxDate: m(a) ?? void 0,
+      dateFormat: "dd/MM/yyyy",
+      placeholderText: s ?? "Selecione...",
+      disabled: c,
+      portalId: "ddp-portal",
+      popperPlacement: "bottom-start",
+      popperModifiers: [
+        {
+          name: "flip",
+          options: { fallbackPlacements: ["bottom-end", "top-start", "top-end"] },
+          fn: (l) => l
+        }
+      ]
+    }
+  ) });
+}
+const $ = [
+  o.bgDark,
+  o.bgPaper,
+  o.bgElevated,
+  o.accent,
+  o.success
+];
+function I(e) {
+  if (!e) return !0;
+  const t = _(e);
+  return Object.values(S).some(
+    (r) => JSON.stringify(r.colors) === JSON.stringify(t)
+  );
+}
+const k = [
+  { label: "Series", slots: ["series0", "series1", "series2", "series3", "series4"] },
+  { label: "Tema", slots: ["bgDark", "bgPaper", "bgElevated", "textPrimary", "textMuted"] },
+  { label: "Estados", slots: ["accent", "success", "error"] }
+];
+function oe({
+  selected: e,
+  onSelect: t,
+  customMode: r,
+  onCustomModeChange: a,
+  disabled: s
+}) {
+  var g;
+  const n = r ?? !I(e), i = _(e), f = n || (g = Object.entries(S).find(
+    ([, c]) => JSON.stringify(c.colors) === JSON.stringify(i)
+  )) == null ? void 0 : g[0], d = (c, l) => {
+    const p = [...i];
+    for (; p.length < T; ) p.push("#000000");
+    p[c] = l, t(p);
+  };
+  return /* @__PURE__ */ h("div", { className: `palette-selector ${s ? "palette-selector--disabled" : ""}`, children: [
+    a && /* @__PURE__ */ h("label", { className: "config-panel__checkbox", children: [
+      /* @__PURE__ */ u(
+        "input",
+        {
+          type: "checkbox",
+          checked: n,
+          onChange: (c) => a(c.target.checked),
+          disabled: s
+        }
+      ),
+      "Customizar"
+    ] }),
+    n ? /* @__PURE__ */ u("div", { className: "palette-selector__custom", children: k.map((c) => /* @__PURE__ */ h("div", { className: "palette-selector__row", children: [
+      /* @__PURE__ */ u("span", { className: "palette-selector__row-label", children: c.label }),
+      /* @__PURE__ */ u("div", { className: "palette-selector__row-slots", children: c.slots.map((l) => {
+        const p = o[l];
+        return /* @__PURE__ */ u(
+          "input",
+          {
+            type: "color",
+            className: "palette-selector__color-input",
+            value: i[p] || "#000000",
+            onChange: (b) => d(p, b.target.value),
+            disabled: s,
+            title: P[l]
+          },
+          l
+        );
+      }) })
+    ] }, c.label)) }) : /* @__PURE__ */ u("div", { className: "palette-selector__options", children: Object.entries(S).map(([c, l]) => {
+      const p = _(l.colors);
+      return /* @__PURE__ */ h(
+        "button",
+        {
+          className: `palette-selector__option ${f === c ? "palette-selector__option--active" : ""}`,
+          onClick: () => t(l.colors),
+          disabled: s,
+          children: [
+            /* @__PURE__ */ u("div", { className: "palette-selector__bar", children: w(l.colors).map((b, D) => /* @__PURE__ */ u(
+              "span",
+              {
+                className: "palette-selector__swatch",
+                style: { backgroundColor: b }
+              },
+              D
+            )) }),
+            /* @__PURE__ */ u("div", { className: "palette-selector__bar palette-selector__bar--theme", children: $.map((b, D) => /* @__PURE__ */ u(
+              "span",
+              {
+                className: "palette-selector__swatch",
+                style: { backgroundColor: p[b] }
+              },
+              D
+            )) }),
+            /* @__PURE__ */ u("span", { className: "palette-selector__label", children: l.label })
+          ]
+        },
+        c
+      );
+    }) })
+  ] });
+}
+const F = v, R = 30, U = 10, ce = {
+  gridColumns: R,
+  gridRows: U,
+  widgets: []
+}, le = {
+  kpi_card: "KPI Card",
+  gauge: "Gauge",
+  chart: "Gráfico",
+  filter: "Filtro",
+  variable: "Variável",
+  color_palette: "Paleta de Cores"
+}, ie = ["kpi_card", "gauge", "chart"], ue = ["filter", "variable", "color_palette"], fe = /* @__PURE__ */ new Set(["filter", "variable", "color_palette"]), ge = {
+  sum: "Soma",
+  avg: "Média",
+  count: "Contagem",
+  min: "Mínimo",
+  max: "Máximo",
+  count_distinct: "Contagem Distinta"
+}, Y = {
+  currency: "Moeda (R$)",
+  number: "Número",
+  integer: "Inteiro",
+  percentage: "Porcentagem",
+  date: "Data",
+  text: "Texto"
+}, de = Object.entries(Y).filter(([e]) => e !== "date" && e !== "text"), pe = {
+  yoy: "vs Ano Anterior",
+  mom: "vs Mês Anterior",
+  target: "vs Meta",
+  none: "Nenhuma"
+}, be = {
+  bar: "Barras",
+  line: "Linhas",
+  area: "Área",
+  pie: "Pizza"
+}, me = {
+  date_range: "Periodo",
+  select: "Seleção Única",
+  multi_select: "Seleção Múltipla"
+}, _e = {
+  kpi_card: { x: 0, y: 0, w: 6, h: 3 },
+  gauge: { x: 0, y: 0, w: 6, h: 5 },
+  chart: { x: 0, y: 0, w: 6, h: 6 },
+  filter: { x: 0, y: 0, w: 4, h: 2 },
+  variable: { x: 0, y: 0, w: 4, h: 2 },
+  color_palette: { x: 0, y: 0, w: 4, h: 2 }
+}, he = {
+  kpi_card: { label: "Novo KPI", aggregation: "sum", format: "number" },
+  gauge: { label: "Novo Gauge", aggregation: "sum" },
+  chart: { label: "Novo Grafico", chartType: "bar", xAxis: { column: "", granularity: "day" }, series: [] },
+  filter: { label: "Novo Filtro", filterType: "select" },
+  variable: { label: "Nova Variavel", variableValue: 0, variableFormat: "number", locked: !1 },
+  color_palette: { label: "Paleta de Cores", paletteColors: F, locked: !1 }
+};
+export {
+  ge as A,
+  m as B,
+  be as C,
+  ie as D,
+  ce as E,
+  me as F,
+  ae as G,
+  te as H,
+  re as I,
+  X as J,
+  j as K,
+  J as L,
+  K as M,
+  de as N,
+  z as O,
+  S as P,
+  x as Q,
+  L as S,
+  T,
+  le as W,
+  pe as a,
+  fe as b,
+  ue as c,
+  oe as d,
+  he as e,
+  _e as f,
+  R as g,
+  U as h,
+  F as i,
+  v as j,
+  ne as k,
+  Y as l,
+  V as m,
+  o as n,
+  P as o,
+  C as p,
+  _ as q,
+  q as r,
+  M as s,
+  Q as t,
+  ee as u,
+  H as v,
+  w,
+  Z as x,
+  B as y,
+  se as z
+};
+//# sourceMappingURL=index-C3jiurhg.js.map