framepexls-ui-lib 0.1.23 → 0.1.25

package/dist/AnalyticsCharts.d.mts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Campania = {
+    id: number;
+    titulo: string;
+    destino: string;
+    prioridad: number;
+    impresiones: number;
+    clicks: number;
+    ctr: number;
+};
+declare function TopImpresionesBar({ data, limit, }: {
+    data: Campania[];
+    limit?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function CtrHorizontalBar({ data, limit }: {
+    data: Campania[];
+    limit?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function DestinoDonut({ data }: {
+    data: Campania[];
+}): react_jsx_runtime.JSX.Element;
+
+export { type Campania, CtrHorizontalBar, DestinoDonut, TopImpresionesBar };

package/dist/AnalyticsCharts.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Campania = {
+    id: number;
+    titulo: string;
+    destino: string;
+    prioridad: number;
+    impresiones: number;
+    clicks: number;
+    ctr: number;
+};
+declare function TopImpresionesBar({ data, limit, }: {
+    data: Campania[];
+    limit?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function CtrHorizontalBar({ data, limit }: {
+    data: Campania[];
+    limit?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function DestinoDonut({ data }: {
+    data: Campania[];
+}): react_jsx_runtime.JSX.Element;
+
+export { type Campania, CtrHorizontalBar, DestinoDonut, TopImpresionesBar };

package/dist/AnalyticsCharts.js

@@ -0,0 +1,307 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AnalyticsCharts_exports = {};
+__export(AnalyticsCharts_exports, {
+  CtrHorizontalBar: () => CtrHorizontalBar,
+  DestinoDonut: () => DestinoDonut,
+  TopImpresionesBar: () => TopImpresionesBar
+});
+module.exports = __toCommonJS(AnalyticsCharts_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_recharts = require("recharts");
+const COLORS = [
+  "#0ea5e9",
+  "#22c55e",
+  "#a855f7",
+  "#ef4444",
+  "#f59e0b",
+  "#6366f1",
+  "#06b6d4",
+  "#84cc16"
+];
+const clamp01 = (n) => Math.max(0, Math.min(1, n));
+const hexToRgb = (hex) => {
+  const h = hex.replace("#", "");
+  const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const num = parseInt(v, 16);
+  return { r: num >> 16 & 255, g: num >> 8 & 255, b: num & 255 };
+};
+const hexToRgba = (hex, a = 1) => {
+  const { r, g, b } = hexToRgb(hex);
+  return `rgba(${r},${g},${b},${clamp01(a)})`;
+};
+const textOnBg = (hex) => {
+  const { r, g, b } = hexToRgb(hex);
+  const lin = [r, g, b].map((v) => v / 255).map((v) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
+  const L = 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+  return L > 0.5 ? "#0f172a" : "#ffffff";
+};
+const axisStroke = "var(--grid, rgba(148,163,184,.18))";
+const tickStyle = { fill: "var(--muted, rgba(100,116,139,1))", fontSize: 12 };
+const nf = (n) => Intl.NumberFormat().format(n);
+const nfc = (n) => Intl.NumberFormat(void 0, { notation: "compact", maximumFractionDigits: 1 }).format(n);
+function ChartPanel({
+  title,
+  subtitle,
+  right,
+  children
+}) {
+  const cardVars = " [--card-bg:theme(colors.white/0.7)] [--card-border:theme(colors.slate.200/0.8)]  [--fg:theme(colors.slate.800)] [--muted:theme(colors.slate.500)] [--grid:rgba(148,163,184,.18)]  dark:[--card-bg:theme(colors.white/0.06)] dark:[--card-border:theme(colors.white/0.08)]  dark:[--fg:theme(colors.slate.100)] dark:[--muted:theme(colors.slate.400)] dark:[--grid:rgba(255,255,255,.12)]";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `rounded-2xl border p-4 md:p-5 backdrop-blur h-full${cardVars}`,
+      style: { background: "var(--card-bg)", borderColor: "var(--card-border)" },
+      "aria-label": title,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-3 flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", style: { color: "var(--fg)" }, children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs", style: { color: "var(--muted)" }, children: subtitle })
+          ] }),
+          right
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function TooltipBox(props) {
+  const { label, payload, unit, valueFormatter } = props || {};
+  if (!(payload == null ? void 0 : payload.length)) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "rounded-xl border px-3 py-2 text-xs shadow-xl backdrop-blur",
+      style: {
+        background: "color-mix(in oklab, var(--card-bg) 85%, #ffffff)",
+        borderColor: "var(--card-border)"
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 font-medium", style: { color: "var(--fg)" }, children: label }),
+        payload.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-block h-2 w-2 rounded-full", style: { backgroundColor: p.color } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[11px]", style: { color: "var(--muted)" }, children: [
+            p.name,
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-semibold", style: { color: "var(--fg)" }, children: [
+            valueFormatter ? valueFormatter(p.value) : nf(p.value),
+            unit != null ? unit : ""
+          ] })
+        ] }, p.dataKey))
+      ]
+    }
+  );
+}
+const TopCompactLabel = (props) => {
+  const { x, y, width, value } = props;
+  const tx = (x != null ? x : 0) + (width != null ? width : 0) / 2;
+  const ty = (y != null ? y : 0) - 6;
+  const text = typeof value === "number" ? nfc(value) : String(value != null ? value : "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: tx, y: ty, textAnchor: "middle", fill: "var(--fg)", fontSize: 11, children: text });
+};
+function TopImpresionesBar({
+  data,
+  limit = 10
+}) {
+  const rows = (0, import_react.useMemo)(
+    () => [...data].sort((a, b) => b.impresiones - a.impresiones).slice(0, limit).map((d) => ({ name: d.titulo, impresiones: d.impresiones })),
+    [data, limit]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ChartPanel, { title: "Top campa\xF1as por impresiones", subtitle: "\xDAltimas campa\xF1as con mayor alcance", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-56 w-full", children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid h-full place-items-center text-sm", style: { color: "var(--muted)" }, children: "Sin datos." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.BarChart, { data: rows, margin: { top: 8, right: 8, bottom: 0, left: 8 }, barCategoryGap: "28%", barSize: 16, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.CartesianGrid, { vertical: false, strokeDasharray: "3 3", stroke: axisStroke }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.XAxis, { dataKey: "name", hide: true, stroke: axisStroke }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.YAxis, { stroke: axisStroke, tick: tickStyle, tickFormatter: nfc, width: 56 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipBox, { valueFormatter: nf }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_recharts.Bar,
+        {
+          dataKey: "impresiones",
+          name: "Impresiones",
+          radius: [10, 10, 10, 10],
+          isAnimationActive: true,
+          animationDuration: 700,
+          animationEasing: "ease-out",
+          children: [
+            rows.map((_, i) => {
+              const base = COLORS[i % COLORS.length];
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Cell, { fill: hexToRgba(base, 0.9), stroke: base, strokeOpacity: 0.95 }, i);
+            }),
+            rows.length <= 8 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.LabelList, { dataKey: "impresiones", content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TopCompactLabel, {}) })
+          ]
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 text-xs", style: { color: "var(--muted)" }, children: "Pasa el cursor para ver el detalle. Valores compactos cuando hay muchas barras." })
+  ] });
+}
+const InsideRightPctLabel = (props) => {
+  const { x, y, width, height, value, index } = props;
+  const base = COLORS[(index != null ? index : 0) % COLORS.length];
+  const fill = textOnBg(base);
+  const tx = (x != null ? x : 0) + (width != null ? width : 0) - 6;
+  const ty = (y != null ? y : 0) + (height != null ? height : 0) / 2 + 4;
+  const text = typeof value === "number" ? `${value.toFixed(1)}%` : String(value != null ? value : "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: tx, y: ty, textAnchor: "end", fill, fontSize: 11, children: text });
+};
+function CtrHorizontalBar({ data, limit = 10 }) {
+  const rows = (0, import_react.useMemo)(
+    () => [...data].filter((d) => d.impresiones > 0).sort((a, b) => {
+      var _a, _b;
+      return ((_a = b.ctr) != null ? _a : 0) - ((_b = a.ctr) != null ? _b : 0);
+    }).slice(0, limit).map((d) => {
+      var _a;
+      return { name: d.titulo, ctr: ((_a = d.ctr) != null ? _a : 0) * 100 };
+    }),
+    [data, limit]
+  );
+  if (rows.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartPanel, { title: "Mejor CTR por campa\xF1a", subtitle: "% de clics sobre impresiones", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-56 grid place-items-center text-sm", style: { color: "var(--muted)" }, children: "Sin datos." }) });
+  }
+  const maxCtr = Math.max(5, Math.ceil(Math.max(...rows.map((r) => r.ctr))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartPanel, { title: "Mejor CTR por campa\xF1a", subtitle: "% de clics sobre impresiones", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-56 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_recharts.BarChart,
+    {
+      data: rows,
+      layout: "vertical",
+      margin: { top: 8, right: 12, bottom: 0, left: 8 },
+      barCategoryGap: "28%",
+      barSize: 14,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.CartesianGrid, { horizontal: true, strokeDasharray: "3 3", stroke: axisStroke }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.XAxis, { type: "number", stroke: axisStroke, tick: tickStyle, domain: [0, maxCtr], tickFormatter: (v) => `${v}%` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.YAxis, { type: "category", dataKey: "name", width: 160, stroke: axisStroke, tick: tickStyle, interval: 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ReferenceLine, { x: 0, stroke: axisStroke }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipBox, { unit: "%", valueFormatter: (v) => v.toFixed(2) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.Bar, { dataKey: "ctr", name: "CTR", radius: [6, 12, 12, 6], isAnimationActive: true, animationDuration: 750, animationEasing: "ease-out", children: [
+          rows.map((_, i) => {
+            const base = COLORS[i % COLORS.length];
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Cell, { fill: hexToRgba(base, 0.9), stroke: base, strokeOpacity: 0.95 }, i);
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.LabelList, { dataKey: "ctr", content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsideRightPctLabel, {}) })
+        ] })
+      ]
+    }
+  ) }) }) });
+}
+function DestinoDonut({ data }) {
+  const rows = (0, import_react.useMemo)(() => {
+    const grouped = data.reduce((acc, d) => {
+      var _a;
+      acc[d.destino] = ((_a = acc[d.destino]) != null ? _a : 0) + d.impresiones;
+      return acc;
+    }, {});
+    return Object.entries(grouped).map(([k, v]) => ({ name: k, value: v }));
+  }, [data]);
+  const total = rows.reduce((a, b) => a + b.value, 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ChartPanel, { title: "Distribuci\xF3n por destino", subtitle: "Participaci\xF3n de impresiones por ubicaci\xF3n", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-56 w-full", children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid h-full place-items-center text-sm", style: { color: "var(--muted)" }, children: "Sin datos suficientes." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.PieChart, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_recharts.Pie,
+        {
+          data: rows,
+          dataKey: "value",
+          nameKey: "name",
+          innerRadius: 70,
+          outerRadius: 88,
+          cornerRadius: 8,
+          startAngle: 210,
+          endAngle: -150,
+          paddingAngle: 2.5,
+          stroke: "rgba(255,255,255,.85)",
+          isAnimationActive: true,
+          animationDuration: 850,
+          animationEasing: "ease-out",
+          children: [
+            rows.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_recharts.Cell,
+              {
+                fill: COLORS[i % COLORS.length],
+                fillOpacity: 0.9,
+                stroke: COLORS[i % COLORS.length],
+                strokeOpacity: 0.95
+              },
+              i
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_recharts.Label,
+              {
+                content: (props) => {
+                  const { viewBox } = props;
+                  if (!viewBox || !("cx" in viewBox)) return null;
+                  const cx = viewBox.cx, cy = viewBox.cy;
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: cx, y: cy - 2, textAnchor: "middle", fill: "var(--muted)", fontSize: 12, children: "Total" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "text",
+                      {
+                        x: cx,
+                        y: cy + 16,
+                        textAnchor: "middle",
+                        fill: "var(--fg)",
+                        fontSize: 16,
+                        className: "font-semibold",
+                        children: nfc(total)
+                      }
+                    )
+                  ] });
+                },
+                position: "center"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipBox, { valueFormatter: nf }) })
+    ] }) }) }),
+    rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-2 text-xs", style: { color: "var(--muted)" }, children: [
+        "Total impresiones: ",
+        nf(total)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 flex flex-wrap gap-2", children: rows.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs",
+          style: { borderColor: "var(--card-border)", color: "var(--fg)" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-2.5 w-2.5 rounded-full", style: { background: COLORS[i % COLORS.length] } }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "capitalize", children: r.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[11px]", style: { color: "var(--muted)" }, children: [
+              "(",
+              Math.round(r.value / (total || 1) * 100),
+              "%)"
+            ] })
+          ]
+        },
+        r.name
+      )) })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CtrHorizontalBar,
+  DestinoDonut,
+  TopImpresionesBar
+});

package/dist/AnalyticsCharts.mjs

@@ -0,0 +1,295 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  PieChart,
+  Pie,
+  Cell,
+  CartesianGrid,
+  Label,
+  LabelList,
+  ReferenceLine
+} from "recharts";
+const COLORS = [
+  "#0ea5e9",
+  "#22c55e",
+  "#a855f7",
+  "#ef4444",
+  "#f59e0b",
+  "#6366f1",
+  "#06b6d4",
+  "#84cc16"
+];
+const clamp01 = (n) => Math.max(0, Math.min(1, n));
+const hexToRgb = (hex) => {
+  const h = hex.replace("#", "");
+  const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const num = parseInt(v, 16);
+  return { r: num >> 16 & 255, g: num >> 8 & 255, b: num & 255 };
+};
+const hexToRgba = (hex, a = 1) => {
+  const { r, g, b } = hexToRgb(hex);
+  return `rgba(${r},${g},${b},${clamp01(a)})`;
+};
+const textOnBg = (hex) => {
+  const { r, g, b } = hexToRgb(hex);
+  const lin = [r, g, b].map((v) => v / 255).map((v) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
+  const L = 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+  return L > 0.5 ? "#0f172a" : "#ffffff";
+};
+const axisStroke = "var(--grid, rgba(148,163,184,.18))";
+const tickStyle = { fill: "var(--muted, rgba(100,116,139,1))", fontSize: 12 };
+const nf = (n) => Intl.NumberFormat().format(n);
+const nfc = (n) => Intl.NumberFormat(void 0, { notation: "compact", maximumFractionDigits: 1 }).format(n);
+function ChartPanel({
+  title,
+  subtitle,
+  right,
+  children
+}) {
+  const cardVars = " [--card-bg:theme(colors.white/0.7)] [--card-border:theme(colors.slate.200/0.8)]  [--fg:theme(colors.slate.800)] [--muted:theme(colors.slate.500)] [--grid:rgba(148,163,184,.18)]  dark:[--card-bg:theme(colors.white/0.06)] dark:[--card-border:theme(colors.white/0.08)]  dark:[--fg:theme(colors.slate.100)] dark:[--muted:theme(colors.slate.400)] dark:[--grid:rgba(255,255,255,.12)]";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded-2xl border p-4 md:p-5 backdrop-blur h-full${cardVars}`,
+      style: { background: "var(--card-bg)", borderColor: "var(--card-border)" },
+      "aria-label": title,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", style: { color: "var(--fg)" }, children: title }),
+            subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs", style: { color: "var(--muted)" }, children: subtitle })
+          ] }),
+          right
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function TooltipBox(props) {
+  const { label, payload, unit, valueFormatter } = props || {};
+  if (!(payload == null ? void 0 : payload.length)) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-xl border px-3 py-2 text-xs shadow-xl backdrop-blur",
+      style: {
+        background: "color-mix(in oklab, var(--card-bg) 85%, #ffffff)",
+        borderColor: "var(--card-border)"
+      },
+      children: [
+        label && /* @__PURE__ */ jsx("div", { className: "mb-1 font-medium", style: { color: "var(--fg)" }, children: label }),
+        payload.map((p) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-block h-2 w-2 rounded-full", style: { backgroundColor: p.color } }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[11px]", style: { color: "var(--muted)" }, children: [
+            p.name,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "font-semibold", style: { color: "var(--fg)" }, children: [
+            valueFormatter ? valueFormatter(p.value) : nf(p.value),
+            unit != null ? unit : ""
+          ] })
+        ] }, p.dataKey))
+      ]
+    }
+  );
+}
+const TopCompactLabel = (props) => {
+  const { x, y, width, value } = props;
+  const tx = (x != null ? x : 0) + (width != null ? width : 0) / 2;
+  const ty = (y != null ? y : 0) - 6;
+  const text = typeof value === "number" ? nfc(value) : String(value != null ? value : "");
+  return /* @__PURE__ */ jsx("text", { x: tx, y: ty, textAnchor: "middle", fill: "var(--fg)", fontSize: 11, children: text });
+};
+function TopImpresionesBar({
+  data,
+  limit = 10
+}) {
+  const rows = useMemo(
+    () => [...data].sort((a, b) => b.impresiones - a.impresiones).slice(0, limit).map((d) => ({ name: d.titulo, impresiones: d.impresiones })),
+    [data, limit]
+  );
+  return /* @__PURE__ */ jsxs(ChartPanel, { title: "Top campa\xF1as por impresiones", subtitle: "\xDAltimas campa\xF1as con mayor alcance", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-56 w-full", children: rows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center text-sm", style: { color: "var(--muted)" }, children: "Sin datos." }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: rows, margin: { top: 8, right: 8, bottom: 0, left: 8 }, barCategoryGap: "28%", barSize: 16, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3", stroke: axisStroke }),
+      /* @__PURE__ */ jsx(XAxis, { dataKey: "name", hide: true, stroke: axisStroke }),
+      /* @__PURE__ */ jsx(YAxis, { stroke: axisStroke, tick: tickStyle, tickFormatter: nfc, width: 56 }),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(TooltipBox, { valueFormatter: nf }) }),
+      /* @__PURE__ */ jsxs(
+        Bar,
+        {
+          dataKey: "impresiones",
+          name: "Impresiones",
+          radius: [10, 10, 10, 10],
+          isAnimationActive: true,
+          animationDuration: 700,
+          animationEasing: "ease-out",
+          children: [
+            rows.map((_, i) => {
+              const base = COLORS[i % COLORS.length];
+              return /* @__PURE__ */ jsx(Cell, { fill: hexToRgba(base, 0.9), stroke: base, strokeOpacity: 0.95 }, i);
+            }),
+            rows.length <= 8 && /* @__PURE__ */ jsx(LabelList, { dataKey: "impresiones", content: /* @__PURE__ */ jsx(TopCompactLabel, {}) })
+          ]
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs", style: { color: "var(--muted)" }, children: "Pasa el cursor para ver el detalle. Valores compactos cuando hay muchas barras." })
+  ] });
+}
+const InsideRightPctLabel = (props) => {
+  const { x, y, width, height, value, index } = props;
+  const base = COLORS[(index != null ? index : 0) % COLORS.length];
+  const fill = textOnBg(base);
+  const tx = (x != null ? x : 0) + (width != null ? width : 0) - 6;
+  const ty = (y != null ? y : 0) + (height != null ? height : 0) / 2 + 4;
+  const text = typeof value === "number" ? `${value.toFixed(1)}%` : String(value != null ? value : "");
+  return /* @__PURE__ */ jsx("text", { x: tx, y: ty, textAnchor: "end", fill, fontSize: 11, children: text });
+};
+function CtrHorizontalBar({ data, limit = 10 }) {
+  const rows = useMemo(
+    () => [...data].filter((d) => d.impresiones > 0).sort((a, b) => {
+      var _a, _b;
+      return ((_a = b.ctr) != null ? _a : 0) - ((_b = a.ctr) != null ? _b : 0);
+    }).slice(0, limit).map((d) => {
+      var _a;
+      return { name: d.titulo, ctr: ((_a = d.ctr) != null ? _a : 0) * 100 };
+    }),
+    [data, limit]
+  );
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(ChartPanel, { title: "Mejor CTR por campa\xF1a", subtitle: "% de clics sobre impresiones", children: /* @__PURE__ */ jsx("div", { className: "h-56 grid place-items-center text-sm", style: { color: "var(--muted)" }, children: "Sin datos." }) });
+  }
+  const maxCtr = Math.max(5, Math.ceil(Math.max(...rows.map((r) => r.ctr))));
+  return /* @__PURE__ */ jsx(ChartPanel, { title: "Mejor CTR por campa\xF1a", subtitle: "% de clics sobre impresiones", children: /* @__PURE__ */ jsx("div", { className: "h-56 w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+    BarChart,
+    {
+      data: rows,
+      layout: "vertical",
+      margin: { top: 8, right: 12, bottom: 0, left: 8 },
+      barCategoryGap: "28%",
+      barSize: 14,
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { horizontal: true, strokeDasharray: "3 3", stroke: axisStroke }),
+        /* @__PURE__ */ jsx(XAxis, { type: "number", stroke: axisStroke, tick: tickStyle, domain: [0, maxCtr], tickFormatter: (v) => `${v}%` }),
+        /* @__PURE__ */ jsx(YAxis, { type: "category", dataKey: "name", width: 160, stroke: axisStroke, tick: tickStyle, interval: 0 }),
+        /* @__PURE__ */ jsx(ReferenceLine, { x: 0, stroke: axisStroke }),
+        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(TooltipBox, { unit: "%", valueFormatter: (v) => v.toFixed(2) }) }),
+        /* @__PURE__ */ jsxs(Bar, { dataKey: "ctr", name: "CTR", radius: [6, 12, 12, 6], isAnimationActive: true, animationDuration: 750, animationEasing: "ease-out", children: [
+          rows.map((_, i) => {
+            const base = COLORS[i % COLORS.length];
+            return /* @__PURE__ */ jsx(Cell, { fill: hexToRgba(base, 0.9), stroke: base, strokeOpacity: 0.95 }, i);
+          }),
+          /* @__PURE__ */ jsx(LabelList, { dataKey: "ctr", content: /* @__PURE__ */ jsx(InsideRightPctLabel, {}) })
+        ] })
+      ]
+    }
+  ) }) }) });
+}
+function DestinoDonut({ data }) {
+  const rows = useMemo(() => {
+    const grouped = data.reduce((acc, d) => {
+      var _a;
+      acc[d.destino] = ((_a = acc[d.destino]) != null ? _a : 0) + d.impresiones;
+      return acc;
+    }, {});
+    return Object.entries(grouped).map(([k, v]) => ({ name: k, value: v }));
+  }, [data]);
+  const total = rows.reduce((a, b) => a + b.value, 0);
+  return /* @__PURE__ */ jsxs(ChartPanel, { title: "Distribuci\xF3n por destino", subtitle: "Participaci\xF3n de impresiones por ubicaci\xF3n", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-56 w-full", children: rows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center text-sm", style: { color: "var(--muted)" }, children: "Sin datos suficientes." }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+      /* @__PURE__ */ jsxs(
+        Pie,
+        {
+          data: rows,
+          dataKey: "value",
+          nameKey: "name",
+          innerRadius: 70,
+          outerRadius: 88,
+          cornerRadius: 8,
+          startAngle: 210,
+          endAngle: -150,
+          paddingAngle: 2.5,
+          stroke: "rgba(255,255,255,.85)",
+          isAnimationActive: true,
+          animationDuration: 850,
+          animationEasing: "ease-out",
+          children: [
+            rows.map((_, i) => /* @__PURE__ */ jsx(
+              Cell,
+              {
+                fill: COLORS[i % COLORS.length],
+                fillOpacity: 0.9,
+                stroke: COLORS[i % COLORS.length],
+                strokeOpacity: 0.95
+              },
+              i
+            )),
+            /* @__PURE__ */ jsx(
+              Label,
+              {
+                content: (props) => {
+                  const { viewBox } = props;
+                  if (!viewBox || !("cx" in viewBox)) return null;
+                  const cx = viewBox.cx, cy = viewBox.cy;
+                  return /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx("text", { x: cx, y: cy - 2, textAnchor: "middle", fill: "var(--muted)", fontSize: 12, children: "Total" }),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: cx,
+                        y: cy + 16,
+                        textAnchor: "middle",
+                        fill: "var(--fg)",
+                        fontSize: 16,
+                        className: "font-semibold",
+                        children: nfc(total)
+                      }
+                    )
+                  ] });
+                },
+                position: "center"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(TooltipBox, { valueFormatter: nf }) })
+    ] }) }) }),
+    rows.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs", style: { color: "var(--muted)" }, children: [
+        "Total impresiones: ",
+        nf(total)
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: rows.map((r, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs",
+          style: { borderColor: "var(--card-border)", color: "var(--fg)" },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full", style: { background: COLORS[i % COLORS.length] } }),
+            /* @__PURE__ */ jsx("span", { className: "capitalize", children: r.name }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[11px]", style: { color: "var(--muted)" }, children: [
+              "(",
+              Math.round(r.value / (total || 1) * 100),
+              "%)"
+            ] })
+          ]
+        },
+        r.name
+      )) })
+    ] })
+  ] });
+}
+export {
+  CtrHorizontalBar,
+  DestinoDonut,
+  TopImpresionesBar
+};

package/dist/AppTopbar.d.mts

@@ -1,16 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import Button from './Button.mjs';
+import React__default from 'react';
 
 type TopbarAction = {
     label: string;
     onClick?: () => void;
 };
+type ButtonColor = NonNullable<React__default.ComponentProps<typeof Button>["color"]>;
 type Props = {
     title: string;
     subtitle?: string;
     primary?: TopbarAction;
     secondary?: TopbarAction;
     actions?: TopbarAction[];
+    color?: ButtonColor;
 };
-declare function AppTopbar({ title, subtitle, secondary, primary, actions }: Props): react_jsx_runtime.JSX.Element;
+declare function AppTopbar({ title, subtitle, secondary, primary, actions, color }: Props): react_jsx_runtime.JSX.Element;
 
 export { AppTopbar as default };