@rock10/ui 1.0.17 → 1.0.19

package/dist/charts.d.ts

@@ -0,0 +1 @@
+export { TimelineDrilldownChart, type TimelineDrilldownChartProps, type TimelineItem, type TimelineFetchParams, } from './components/charts/TimelineDrilldownChart';

package/dist/charts.es.js

@@ -0,0 +1,433 @@
+import { c as u, j as e, C as G, a as _, b as O, E as U, D as X, H as J, S as Q, d as Z, e as ee } from "./cn-D4DU2yxV.js";
+import { useState as s, useEffect as re, useMemo as ae } from "react";
+import { ResponsiveContainer as te, LineChart as se, CartesianGrid as oe, XAxis as de, YAxis as le, Tooltip as ne, Line as L } from "recharts";
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ie = [
+  [
+    "path",
+    {
+      d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+      key: "zw3jo"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+      key: "1wduqc"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+      key: "kqbvx6"
+    }
+  ]
+], ce = u("Layers", ie);
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const xe = [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
+], pe = u("RotateCcw", xe);
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const me = [
+  ["polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17", key: "126l90" }],
+  ["polyline", { points: "16 7 22 7 22 13", key: "kwv8wd" }]
+], ue = u("TrendingUp", me);
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const he = [
+  [
+    "path",
+    {
+      d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5",
+      key: "ftymec"
+    }
+  ],
+  ["rect", { x: "2", y: "6", width: "14", height: "12", rx: "2", key: "158x01" }]
+], be = u("Video", he), v = [
+  {
+    key: "videos",
+    prevKey: "prev_videos",
+    name: "Vídeos",
+    color: "#8b5cf6",
+    // Violet
+    prevColor: "#c4b5fd",
+    icon: be
+  },
+  {
+    key: "visualizacoes",
+    prevKey: "prev_visualizacoes",
+    name: "Visualizações",
+    color: "#3b82f6",
+    // Blue
+    prevColor: "#93c5fd",
+    icon: U
+  },
+  {
+    key: "downloads",
+    prevKey: "prev_downloads",
+    name: "Downloads",
+    color: "#f97316",
+    // Orange
+    prevColor: "#fdba74",
+    icon: X
+  },
+  {
+    key: "curtidas",
+    prevKey: "prev_curtidas",
+    name: "Curtidas",
+    color: "#ef4444",
+    // Red
+    prevColor: "#fca5a5",
+    icon: J
+  },
+  {
+    key: "compartilhamentos",
+    prevKey: "prev_compartilhamentos",
+    name: "Compartilhamentos",
+    color: "#10b981",
+    // Emerald
+    prevColor: "#6ee7b7",
+    icon: Q
+  }
+];
+function ve({
+  title: D = "Evolução Temporal & Métricas de Engajamento",
+  titleSuffix: f,
+  onFetchData: M,
+  initialYear: z,
+  className: S
+}) {
+  const l = z ?? (/* @__PURE__ */ new Date()).getFullYear(), [t, p] = s("months"), [i, T] = s(l), [c, $] = s(l - 1), [h, j] = s(null), [K, w] = s(""), [b, y] = s(null), [V, k] = s(""), [n, q] = s([]), [E, N] = s(!0), [x, A] = s(!0), [g, R] = s({
+    videos: !0,
+    visualizacoes: !0,
+    downloads: !0,
+    curtidas: !0,
+    compartilhamentos: !0
+  }), I = (r) => {
+    R((a) => {
+      const o = Object.values(a).filter(Boolean).length;
+      return a[r] && o === 1 ? a : { ...a, [r]: !a[r] };
+    });
+  }, W = async () => {
+    try {
+      N(!0);
+      const r = await M({
+        year: i,
+        compare_year: x ? c : void 0,
+        month: h ?? void 0,
+        day: b ?? void 0
+      });
+      q(r || []);
+    } catch (r) {
+      console.error("Erro ao carregar dados do gráfico drilldown:", r);
+    } finally {
+      N(!1);
+    }
+  };
+  re(() => {
+    W();
+  }, [i, c, h, b, x]);
+  const Y = (r) => {
+    if (!r) return;
+    let a;
+    r.activePayload && r.activePayload.length > 0 ? a = r.activePayload[0].payload : r.activeTooltipIndex !== void 0 && n[r.activeTooltipIndex] ? a = n[r.activeTooltipIndex] : r.activeLabel !== void 0 ? a = n.find((o) => String(o.label) === String(r.activeLabel)) : r.payload && (a = r.payload), a && (t === "months" ? (j(a.key ?? a.month ?? null), w(a.label), p("days")) : t === "days" && (y(a.key ?? a.day ?? null), k(a.label), p("hours")));
+  }, m = () => {
+    j(null), w(""), y(null), k(""), p("months");
+  }, C = () => {
+    y(null), k(""), p("days");
+  }, P = ae(() => n.reduce(
+    (r, a) => ({
+      videos: r.videos + (a.videos || 0),
+      visualizacoes: r.visualizacoes + (a.visualizacoes || 0),
+      downloads: r.downloads + (a.downloads || 0),
+      curtidas: r.curtidas + (a.curtidas || 0),
+      compartilhamentos: r.compartilhamentos + (a.compartilhamentos || 0),
+      prev_videos: r.prev_videos + (a.prev_videos || 0),
+      prev_visualizacoes: r.prev_visualizacoes + (a.prev_visualizacoes || 0),
+      prev_downloads: r.prev_downloads + (a.prev_downloads || 0),
+      prev_curtidas: r.prev_curtidas + (a.prev_curtidas || 0),
+      prev_compartilhamentos: r.prev_compartilhamentos + (a.prev_compartilhamentos || 0)
+    }),
+    {
+      videos: 0,
+      visualizacoes: 0,
+      downloads: 0,
+      curtidas: 0,
+      compartilhamentos: 0,
+      prev_videos: 0,
+      prev_visualizacoes: 0,
+      prev_downloads: 0,
+      prev_curtidas: 0,
+      prev_compartilhamentos: 0
+    }
+  ), [n]), B = ({ active: r, payload: a, label: o }) => r && a && a.length ? /* @__PURE__ */ e.jsxs("div", { className: "bg-white/95 dark:bg-dark-surface/95 backdrop-blur-md p-3.5 rounded-xl border border-gray-200 dark:border-dark-border shadow-xl min-w-[200px] pointer-events-none select-none", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between pb-2 mb-2 border-b border-gray-100 dark:border-dark-border/60", children: [
+      /* @__PURE__ */ e.jsxs("span", { className: "text-xs font-black uppercase text-gray-700 dark:text-dark-text tracking-wide", children: [
+        t === "months" && `Mês: ${o}`,
+        t === "days" && `Dia: ${o}`,
+        t === "hours" && `Horário: ${o}`
+      ] }),
+      /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-gray-400 font-semibold uppercase", children: i })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "space-y-1.5", children: a.map((d, H) => {
+      const F = d.dataKey.startsWith("prev_");
+      return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-4 text-xs font-semibold", children: [
+        /* @__PURE__ */ e.jsxs("span", { className: "flex items-center gap-1.5", style: { color: d.color }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "w-2 h-2 rounded-full inline-block", style: { backgroundColor: d.color } }),
+          /* @__PURE__ */ e.jsxs("span", { className: "text-gray-600 dark:text-dark-text-muted", children: [
+            d.name,
+            " ",
+            F ? `(${c})` : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("span", { className: "font-bold text-gray-900 dark:text-dark-text", children: Number(d.value).toLocaleString("pt-BR") })
+      ] }, H);
+    }) }),
+    t !== "hours" && /* @__PURE__ */ e.jsxs("div", { className: "mt-2.5 pt-2 border-t border-dashed border-gray-200 dark:border-dark-border/40 text-[10px] text-primary-600 dark:text-primary-400 font-medium text-center", children: [
+      "💡 Clique para detalhar ",
+      t === "months" ? "os dias do mês" : "as horas do dia"
+    ] })
+  ] }) : null;
+  return /* @__PURE__ */ e.jsxs("div", { className: ee("bg-white dark:bg-dark-surface p-6 rounded-2xl border border-gray-200 dark:border-dark-border shadow-sm space-y-5", S), children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center justify-between gap-4", children: [
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "p-1.5 rounded-lg bg-primary-100 dark:bg-primary-900/40 text-primary-600 dark:text-primary-400", children: /* @__PURE__ */ e.jsx(ue, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ e.jsxs("h2", { className: "text-lg font-bold text-gray-900 dark:text-dark-text", children: [
+            D,
+            " ",
+            f ? `— ${f}` : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center flex-wrap gap-1.5 text-xs font-semibold text-gray-500 dark:text-dark-text-muted mt-2", children: [
+          /* @__PURE__ */ e.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: m,
+              className: `flex items-center gap-1 px-2.5 py-1 rounded-lg transition-colors cursor-pointer ${t === "months" ? "bg-primary-50 dark:bg-primary-950/40 text-primary-600 dark:text-primary-400 font-bold" : "hover:bg-gray-100 dark:hover:bg-dark-surface-light text-gray-600 dark:text-dark-text"}`,
+              children: [
+                /* @__PURE__ */ e.jsx(G, { className: "w-3.5 h-3.5" }),
+                "Ano ",
+                i,
+                " (Meses)"
+              ]
+            }
+          ),
+          h !== null && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx(_, { className: "w-3.5 h-3.5 text-gray-400" }),
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: C,
+                className: `flex items-center gap-1 px-2.5 py-1 rounded-lg transition-colors cursor-pointer ${t === "days" ? "bg-primary-50 dark:bg-primary-950/40 text-primary-600 dark:text-primary-400 font-bold" : "hover:bg-gray-100 dark:hover:bg-dark-surface-light text-gray-600 dark:text-dark-text"}`,
+                children: [
+                  "Mês ",
+                  K,
+                  " (Dias)"
+                ]
+              }
+            )
+          ] }),
+          b !== null && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx(_, { className: "w-3.5 h-3.5 text-gray-400" }),
+            /* @__PURE__ */ e.jsxs("span", { className: "flex items-center gap-1 px-2.5 py-1 rounded-lg bg-primary-50 dark:bg-primary-950/40 text-primary-600 dark:text-primary-400 font-bold", children: [
+              "Dia ",
+              V,
+              " (24 Horas)"
+            ] })
+          ] }),
+          t !== "months" && /* @__PURE__ */ e.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: t === "hours" ? C : m,
+              className: "ml-2 flex items-center gap-1 text-[11px] font-bold text-gray-500 hover:text-gray-800 dark:hover:text-dark-text bg-gray-100 dark:bg-dark-surface-light px-2 py-0.5 rounded-md cursor-pointer transition-colors",
+              title: "Voltar ao nível anterior",
+              children: [
+                /* @__PURE__ */ e.jsx(O, { className: "w-3.5 h-3.5" }),
+                "Voltar"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center flex-wrap gap-2", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e.jsx("label", { className: "text-xs font-bold text-gray-500 dark:text-dark-text-muted", children: "Ano:" }),
+          /* @__PURE__ */ e.jsx(
+            "select",
+            {
+              value: i,
+              onChange: (r) => {
+                const a = Number(r.target.value);
+                T(a), $(a - 1), m();
+              },
+              className: "h-9 px-3 bg-gray-50 dark:bg-dark-bg border border-gray-200 dark:border-dark-border rounded-xl text-xs font-bold text-gray-800 dark:text-dark-text focus:outline-none focus:ring-2 focus:ring-primary-500/20 cursor-pointer",
+              children: [l, l - 1, l - 2, l - 3].map((r) => /* @__PURE__ */ e.jsx("option", { value: r, children: r }, r))
+            }
+          )
+        ] }),
+        t === "months" && /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => A(!x),
+            className: `h-9 px-3 rounded-xl text-xs font-bold border transition-colors flex items-center gap-1.5 cursor-pointer ${x ? "bg-primary-50 dark:bg-primary-950/40 border-primary-300 dark:border-primary-800/40 text-primary-600 dark:text-primary-400" : "bg-white dark:bg-dark-surface border-gray-200 dark:border-dark-border text-gray-600 dark:text-dark-text hover:bg-gray-50"}`,
+            children: [
+              /* @__PURE__ */ e.jsx(ce, { className: "w-3.5 h-3.5" }),
+              "Comparar ",
+              c
+            ]
+          }
+        ),
+        t !== "months" && /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: m,
+            className: "h-9 px-3 rounded-xl text-xs font-bold border border-gray-200 dark:border-dark-border text-gray-700 dark:text-dark-text hover:bg-gray-50 dark:hover:bg-dark-surface-light transition-colors flex items-center gap-1.5 cursor-pointer",
+            children: [
+              /* @__PURE__ */ e.jsx(pe, { className: "w-3.5 h-3.5" }),
+              "Ver Ano Completo"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2 border-t border-gray-100 dark:border-dark-border/40", children: [
+      /* @__PURE__ */ e.jsx("span", { className: "text-xs font-bold text-gray-400 dark:text-dark-text-muted uppercase tracking-wider mr-1", children: "Métricas:" }),
+      v.map((r) => {
+        const a = g[r.key], o = r.icon, d = P[r.key] || 0;
+        return /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => I(r.key),
+            className: `flex items-center gap-2 px-3 py-1.5 rounded-xl text-xs font-bold border transition-all cursor-pointer ${a ? "bg-white dark:bg-dark-surface shadow-xs text-gray-900 dark:text-dark-text" : "opacity-40 bg-gray-50 dark:bg-dark-bg text-gray-400 border-dashed border-gray-300"}`,
+            style: {
+              borderColor: a ? r.color : void 0
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(
+                "span",
+                {
+                  className: "w-2.5 h-2.5 rounded-full inline-block",
+                  style: { backgroundColor: a ? r.color : "#9ca3af" }
+                }
+              ),
+              /* @__PURE__ */ e.jsx(o, { className: "w-3.5 h-3.5", style: { color: a ? r.color : "#9ca3af" } }),
+              /* @__PURE__ */ e.jsx("span", { children: r.name }),
+              /* @__PURE__ */ e.jsx("span", { className: "text-[11px] font-black text-gray-500 dark:text-dark-text-muted bg-gray-100 dark:bg-dark-surface-light px-1.5 py-0.5 rounded-md", children: d.toLocaleString("pt-BR") })
+            ]
+          },
+          r.key
+        );
+      })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "relative w-full h-80 pt-2", children: [
+      E ? /* @__PURE__ */ e.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-white/70 dark:bg-dark-surface/70 backdrop-blur-xs z-10", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500" }),
+        /* @__PURE__ */ e.jsx("span", { className: "text-xs font-bold text-gray-500 dark:text-dark-text-muted mt-2", children: "Processando camadas de métricas..." })
+      ] }) : null,
+      /* @__PURE__ */ e.jsx(te, { width: "100%", height: "100%", children: /* @__PURE__ */ e.jsxs(
+        se,
+        {
+          data: n,
+          onClick: Y,
+          margin: { top: 10, right: 20, left: 0, bottom: 5 },
+          style: { cursor: t !== "hours" ? "pointer" : "default" },
+          children: [
+            /* @__PURE__ */ e.jsx(oe, { strokeDasharray: "3 3", stroke: "#e5e7eb", opacity: 0.5 }),
+            /* @__PURE__ */ e.jsx(
+              de,
+              {
+                dataKey: "label",
+                tick: { fontSize: 11, fill: "#6b7280", fontWeight: 600 },
+                tickLine: !1,
+                axisLine: { stroke: "#e5e7eb" }
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              le,
+              {
+                tick: { fontSize: 11, fill: "#6b7280", fontWeight: 600 },
+                tickLine: !1,
+                axisLine: { stroke: "#e5e7eb" },
+                allowDecimals: !1
+              }
+            ),
+            /* @__PURE__ */ e.jsx(ne, { content: /* @__PURE__ */ e.jsx(B, {}), wrapperStyle: { pointerEvents: "none" } }),
+            v.map((r) => g[r.key] ? /* @__PURE__ */ e.jsx(
+              L,
+              {
+                type: "monotone",
+                dataKey: r.key,
+                name: r.name,
+                stroke: r.color,
+                strokeWidth: 2.5,
+                dot: { r: 3, fill: r.color, strokeWidth: 1 },
+                activeDot: { r: 6, fill: r.color, stroke: "#fff", strokeWidth: 2, cursor: "pointer" }
+              },
+              r.key
+            ) : null),
+            t === "months" && x && v.map((r) => g[r.key] ? /* @__PURE__ */ e.jsx(
+              L,
+              {
+                type: "monotone",
+                dataKey: r.prevKey,
+                name: `${r.name} (${c})`,
+                stroke: r.prevColor,
+                strokeDasharray: "4 4",
+                strokeWidth: 2,
+                dot: { r: 2, fill: r.prevColor },
+                activeDot: { r: 5, fill: r.prevColor }
+              },
+              r.prevKey
+            ) : null)
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between pt-3 border-t border-gray-100 dark:border-dark-border/40 text-xs text-gray-500 dark:text-dark-text-muted", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ e.jsx(Z, { className: "w-3.5 h-3.5 text-primary-500" }),
+        /* @__PURE__ */ e.jsxs("span", { children: [
+          t === "months" && "💡 Dica: Clique em qualquer mês para abrir a visão diária.",
+          t === "days" && "💡 Dica: Clique em qualquer dia para analisar a distribuição por hora.",
+          t === "hours" && "Visão detalhada por hora (00h às 23h)."
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("span", { className: "font-semibold text-gray-400 dark:text-dark-text-muted", children: [
+        "Camada ativa: ",
+        /* @__PURE__ */ e.jsx("strong", { className: "text-gray-700 dark:text-dark-text uppercase", children: t === "months" ? "1. Meses" : t === "days" ? "2. Dias" : "3. Horas" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ve as TimelineDrilldownChart
+};