// Bloques principales del dashboard: Rating de stores, Descargas por SO, Reseñas críticas.
// ─────────────────────────────────────────────────────────────────────
// BLOQUE 1 · Rating de las stores
// ─────────────────────────────────────────────────────────────────────
const StoreLogo = ({ id }) => {
if (id === "appstore") return {ICONS.appstore}
;
if (id === "playstore") return {ICONS.playstore}
;
if (id === "trustpilot") return {ICONS.trustpilot}
;
return null;
};
const StoreRatingCard = ({ store, periodLabel, dense = false }) => {
const dRating = +(store.rating - store.ratingPrev).toFixed(1);
const dReviews = store.reviewsDelta;
// Usar historial real si está disponible, si no caer a daily
const sparkValues = store.fullHistory
? store.fullHistory.map(h => h.rating)
: store.daily;
const sparkDateFirst = store.fullHistory?.[0]?.date ?? null;
const sparkDateLast = store.fullHistory?.[store.fullHistory.length - 1]?.date ?? null;
return (
{/* Rating principal */}
{store.rating.toFixed(1).replace(".", ",")}
/ 5
{sparkDateFirst && (
{sparkDateFirst}
{sparkDateLast}
)}
{/* Metricas pie */}
);
};
const Metric = ({ label, value, delta, suffix = "", invert = false }) => (
);
const Block1Rating = ({ data, dense = false }) => (
{data.stores.map(s =>
{/* Evolución agregada */}
v.toFixed(1).replace(".", ",")}
xLabel={(d) => d.x}
series={data.stores.map((s, i) => ({
name: s.name,
color: ["var(--chart-1)", "var(--chart-3)", "var(--chart-2)"][i],
// Si hay historial real usamos las últimas 12 mediciones con fecha real; si no, weeks con semana genérica
data: s.fullHistory
? s.fullHistory.slice(-12).map(h => ({ x: h.date.slice(0, -3).replace("/", "/"), y: h.rating }))
: s.weeks.map((y, j) => ({ x: `S${j + 10}`, y })),
}))}
/>
);
const StoreTabs = () => {
const [active, setActive] = React.useState("todas");
const opts = [["todas", "Todas"], ["appstore", "App Store"], ["playstore", "Google Play"], ["trustpilot", "Trustpilot"]];
return (
{opts.map(([k, l]) => (
setActive(k)} style={active === k ? btn.chipActive : btn.chip}>{l}
))}
);
};
const ChartTypeToggle = ({ current = "line", onChange = () => {} }) => {
const [type, setType] = React.useState(current);
const opts = [["line", "Líneas"], ["bar", "Barras"]];
return (
{opts.map(([k, l]) => (
{ setType(k); onChange(k); }}
style={{
height: 26, padding: "0 12px", borderRadius: 999,
background: type === k ? "#fff" : "transparent",
border: 0, fontWeight: 800, fontSize: 11, cursor: "pointer",
boxShadow: type === k ? "0 1px 2px rgba(0,0,0,.08)" : "none",
}}>{l}
))}
);
};
// ─────────────────────────────────────────────────────────────────────
// BLOQUE 2 · Descargas por SO
// ─────────────────────────────────────────────────────────────────────
const Block2Downloads = ({ data, splitChart = "donut" }) => {
const d = data.downloads;
const total = d.totalWeek;
const totalDelta = ((d.totalWeek - d.totalWeekPrev) / d.totalWeekPrev) * 100;
const iosDelta = ((d.ios - d.iosPrev) / d.iosPrev) * 100;
const andDelta = ((d.android - d.androidPrev) / d.androidPrev) * 100;
const [split, setSplit] = React.useState(splitChart);
return (
{/* KPI principal + sparkline */}
{fmt(total)}
vs sem. anterior · {fmt(d.totalWeekPrev)}
w.ios + w.android)} w={220} h={64} color="var(--brand-blue)" accent />
{d.weekly[0].w}
{d.weekly[d.weekly.length - 1].w}
{/* Reparto */}
{[["donut", "Donut"], ["bar", "Barras"]].map(([k, l]) => (
setSplit(k)}
style={{
height: 26, padding: "0 12px", borderRadius: 999,
background: split === k ? "#fff" : "transparent",
border: 0, fontWeight: 800, fontSize: 11, cursor: "pointer",
boxShadow: split === k ? "0 1px 2px rgba(0,0,0,.08)" : "none",
}}>{l}
))}
) : (
);
};
const SOMetric = ({ color, label, value, delta }) => (
);
const LegendDot = ({ color, label }) => (
);
const SplitBar = ({ ios, android }) => {
const total = ios + android;
const fIos = ios / total;
return (
{fmt(ios)}
iOS · {Math.round(fIos * 100)} %
{fmt(android)}
Android · {Math.round((1 - fIos) * 100)} %
Total: {fmt(total)} descargas esta semana.
);
};
// ─────────────────────────────────────────────────────────────────────
// BLOQUE 3 · Resumen de reseñas críticas
// ─────────────────────────────────────────────────────────────────────
const STATUS_TONES = {
recurrente: { tone: "neg", label: "Recurrente" },
nuevo: { tone: "warn", label: "Nuevo esta semana" },
"en mejora":{ tone: "pos", label: "En mejora" },
estable: { tone: "neutral", label: "Estable" },
};
const Block3Reviews = ({ data, view = "grid" }) => {
const [active, setActive] = React.useState(data.criticalCategories[0].id);
const [vw, setVw] = React.useState(view);
const cat = data.criticalCategories.find(c => c.id === active);
return (
{[["grid", "Grid"], ["table", "Tabla"]].map(([k, l]) => (
setVw(k)} style={{
height: 26, padding: "0 12px", borderRadius: 999,
background: vw === k ? "#fff" : "transparent",
border: 0, fontWeight: 800, fontSize: 11, cursor: "pointer",
boxShadow: vw === k ? "0 1px 2px rgba(0,0,0,.08)" : "none",
}}>{l}
))}
}
/>
{vw === "grid" ? (
{/* Lista categorías */}
Categorías ({data.criticalCategories.length})
{data.criticalCategories.reduce((a, c) => a + c.count, 0)} reseñas críticas
{data.criticalCategories.map(c => (
setActive(c.id)} />
))}
{/* Detalle reseña representativa */}
);
};
const CategoryRow = ({ c, active, onClick }) => {
const delta = c.count - c.countPrev;
const status = STATUS_TONES[c.status] || STATUS_TONES.estable;
return (
{c.name}
{status.label}
★ media {c.avgStars.toFixed(1).replace(".", ",")}
›
);
};
const ReviewDetailCard = ({ cat }) => {
const status = STATUS_TONES[cat.status] || STATUS_TONES.estable;
const delta = cat.count - cat.countPrev;
return (
Reseña representativa
{cat.name}
{status.label}
{/* Mini stats */}
{/* Quote */}
{cat.sampleStore} · {cat.sampleDate}
“{cat.sample}”
— {cat.sampleAuthor}
Ver las {cat.count} reseñas
Asignar a equipo
);
};
const MiniStat = ({ label, value, sub, delta, invert }) => (
{label}
{value}
{delta != null &&
{sub &&
{sub}
}
);
const ReviewTable = ({ data, active, onActive }) => (
{["Categoría", "Reseñas", "Δ vs anterior", "★ media", "Sentimiento", "Estado", "Reseña representativa"].map(h => (
{h}
))}
{data.criticalCategories.map(c => {
const status = STATUS_TONES[c.status] || STATUS_TONES.estable;
const delta = c.count - c.countPrev;
return (
onActive(c.id)} style={{ borderBottom: "1px solid var(--grey-100)", cursor: "pointer", background: c.id === active ? "var(--brand-blue-soft)" : "transparent" }}>
{c.name}
{c.count}
{c.avgStars.toFixed(1).replace(".", ",")}
{c.sentiment.toFixed(2).replace(".", ",")}
{status.label} “{c.sample}”
);
})}
);
Object.assign(window, { Block1Rating, Block2Downloads, Block3Reviews, StoreRatingCard, StoreLogo });