// Slide compositions for the V1 dashboard deck.
// Each slide is 1920×1080. SlideFrame provides shared header + footer chrome.
const SlideFrame = ({ eyebrow, title, sub, children, footer = true, slideIndex, totalSlides, periodLabel, headerRight, padding = "56px 80px 32px" }) => (
{/* Slide header */}
{(eyebrow || title) && (
{eyebrow && (
{eyebrow}
)}
{title && (
{title}
)}
{sub && (
{sub}
)}
{headerRight}
}
)}
{/* Slide content */}
{children}
{/* Slide footer */}
{footer && (
)}
{/* Subtle brand-blue tint top-left */}
General Review · Semanal
UX Insights
KPIs de experiencia
{data.period.range}
Comparado con la semana anterior ({data.period.prevRange}). Fuentes: App Store, Google Play y Trustpilot.
{data.stores.map(s =>
);
const SlideStoreCard = ({ store }) => {
const dRating = +(store.rating - store.ratingPrev).toFixed(1);
const sparkValues = store.fullHistory ? store.fullHistory.map(h => h.rating) : store.daily;
const sparkFirst = store.fullHistory?.[0]?.date ?? null;
const sparkLast = store.fullHistory?.[store.fullHistory.length - 1]?.date ?? null;
return (
{store.rating.toFixed(1).replace(".", ",")}
/ 5
{/* Sparkline con historial real + fechas */}
{sparkFirst && (
{sparkFirst}
{sparkLast}
)}
);
};
const SlideMetric = ({ label, value, delta, suffix = "", invert = false }) => (
);
// ─── 03 · Evolución comparada ──────────────────────────────────────
const SlideRatingEvolution = ({ data, slideIndex, totalSlides, periodLabel }) => (
v.toFixed(1).replace(".", ",")}
xLabel={(d) => d.x}
showLegend={false}
axisFontSize={22}
padding={{ l: 80, r: 24, t: 18, b: 52 }}
series={data.stores.map((s, i) => ({
name: s.name,
color: ["var(--chart-1)", "var(--chart-3)", "var(--chart-2)"][i],
data: s.fullHistory
? s.fullHistory.slice(-12).map(h => ({ x: h.date.replace("/26", ""), y: h.rating }))
: s.weeks.map((y, j) => ({ x: `S${j + 10}`, y })),
}))}
/>
);
const DeckLegendStores = ({ data }) => (
{data.stores.map((s, i) => (
))}
);
// ─── 04 · Distribución de estrellas ────────────────────────────────
const SlideStars = ({ data, slideIndex, totalSlides, periodLabel }) => (
{data.stores.map(s => (
{s.name}
{s.rating.toFixed(1).replace(".", ",")}
{" · "}
{fmt(s.reviews)} valoraciones
))}
);
// Larger version of RatingBars for slide.
const SlideRatingBars = ({ stars }) => {
const order = [5, 4, 3, 2, 1];
return (
{order.map((k) => {
const v = stars[k] || 0;
const tone = k >= 4 ? "var(--pos-600)" : k === 3 ? "var(--grey-700)" : "var(--neg-600)";
return (
);
})}
{/* Total + sparkline + per-SO breakdown */}
Descargas totales
{fmt(total)}
vs sem. anterior · {fmt(d.totalWeekPrev)}
w.ios + w.android)} w={340} h={120} color="var(--brand-blue)" accent />
{d.weekly[0].w}
{d.weekly[d.weekly.length - 1].w}
{/* Donut */}
Reparto por SO
iOS vs Android
{splitChart === "donut"
?
:
}
);
};
const SlideSOMetric = ({ color, label, value, delta }) => (
);
// SplitBar copy with bigger sizing for slide.
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.
);
};
// ─── 06 · Reseñas críticas ─────────────────────────────────────────
const SlideReviews = ({ data, slideIndex, totalSlides, periodLabel }) => {
const [active, setActive] = React.useState(data.criticalCategories[0].id);
const cat = data.criticalCategories.find(c => c.id === active);
return (
{/* 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 */}
);
};
const SlideCategoryRow = ({ 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 SlideReviewDetail = ({ cat }) => {
const status = STATUS_TONES[cat.status] || STATUS_TONES.estable;
const delta = cat.count - cat.countPrev;
return (
Reseña representativa
{cat.name}
{status.label}
{cat.sampleStore} · {cat.sampleDate}
“{cat.sample}”
— {cat.sampleAuthor}
);
};
const SlideMiniStat = ({ label, value, sub, delta, invert }) => (
{label}
{value}
{delta != null &&
{sub &&
{sub}
}
);
// ─── 07 · Heatmap de menciones ─────────────────────────────────────
const SlideHeatmap = ({ data, slideIndex, totalSlides, periodLabel }) => {
const weeks = ["S14", "S15", "S16", "S17", "S18", "S19", "S20", "S21"];
return (
Menor
{[96, 84, 72, 60, 48, 36].map(l =>
)}
Mayor
Login y acceso es la categoría que más ha emergido (+126 % en 4 semanas).
);
};
const SlideHeatmapGrid = ({ rows, weekLabels }) => {
const allVals = rows.flatMap(r => r.weeks);
const max = Math.max(...allVals);
const tone = (v) => `hsl(220 100% ${96 - (v / max) * 60}%)`;
return (
{weekLabels.map((w, i) => (
{w}
))}
{rows.map((r) => (
{r.name}
{r.weeks.map((v, wi) => (
0.55 ? "#fff" : "#000",
}}>{v}
))}
))}
);
};
// ─── 08 · Atención a reseñas ───────────────────────────────────────
const SlideResponse = ({ data, slideIndex, totalSlides, periodLabel }) => (
);
const SlideBigStat = ({ label, value, delta, suffix, invert, sub }) => (
{label}
{value}
{delta != null &&
{sub &&
{sub}
}
);
// ─── 09 · Cierre ───────────────────────────────────────────────────
const SlideClose = ({ data, slideIndex, totalSlides, periodLabel }) => (
Cierre · Fuentes y siguientes pasos
Gracias.
Este reporte se actualiza cada lunes y se presenta en la General Review semanal. Para preguntas o propuestas de mejora del dashboard, escribid al equipo de UX.
Fuentes de datos
{ICONS.appstore}
App Store Connect Valoraciones, reseñas, descargas iOS
{ICONS.playstore}
Google Play Console Valoraciones, reseñas, descargas Android
{ICONS.trustpilot}
Trustpilot Business Reseñas y atención a clientes web
Datos ficticios — esquema visual sin datos reales. v0.1 · esquema · MyInvestor UX.
{String(slideIndex).padStart(2, "0")} / {String(totalSlides).padStart(2, "0")}
);
Object.assign(window, {
SlideFrame, SlideCover, SlideStoreRating, SlideRatingEvolution,
SlideStars, SlideDownloads, SlideReviews, SlideHeatmap, SlideResponse, SlideClose,
});
General Review · Semanal