/* global React */
// ─── FloodsFlow — les statistiques des comptes branchés ───────────────────────────────
//
// D'OÙ VIENNENT CES CHIFFRES. bundle.social relève chaque compte connecté : abonnés, vues,
// impressions, j'aime, commentaires, nombre de publications. Il le fait tout seul UNE FOIS
// PAR 24 H — d'où le forçage, et d'où le bouton « Relever maintenant ».
//
// CE QUI FAISAIT CROIRE À UNE FAUSSE DONNÉE, et qui n'en était pas une. Les tuiles du haut
// donnent le TOTAL DU PARC (16 publications) pendant que la courbe donnait le détail PAR
// COMPTE (8 au plus haut). Deux chiffres justes, jamais présentés comme différents — on lisait
// donc un graphique qui contredisait son propre en-tête. D'où le sélecteur « Total du parc /
// Par compte » : à tout instant, l'écran dit lequel des deux il montre.
//
// (Et non, `@chlosasa_b` ne baisse pas par erreur : le fournisseur rend bien 3 → 8 → 7
// publications. Une publication a été supprimée. On affiche ce qu'il dit.)
//
// UNE MESURE À LA FOIS, ET C'EST UNE RÈGLE. Les abonnés se comptent en dizaines, les
// impressions en centaines de milliers. Les mettre sur le même graphique demanderait deux axes
// verticaux — la faute la plus classique de la lecture de données : deux échelles côte à côte
// laissent croire à une corrélation que le tracé a fabriquée.
//
// LES VUES UNIQUES NE SONT PAS PROPOSÉES : Instagram les renvoie toujours à zéro (vérifié sur
// les quatre comptes du parc). Un zéro constant se lit comme une mesure ; c'est une absence.
// Palette catégorielle de référence, validée pour les DEUX surfaces de l'application
// (#121826 en sombre, #ffffff en clair) : bande de clarté, plancher de chroma, séparation pour
// les daltonismes et contraste. L'ordre des teintes EST le mécanisme de sécurité — on assigne
// dans cet ordre, on ne recycle jamais.
const FS_SERIES_SOMBRE = ["#3987e5", "#d95926", "#199e70", "#c98500",
"#d55181", "#008300", "#9085e9", "#e66767"];
const FS_SERIES_CLAIR = ["#2a78d6", "#eb6834", "#1baf7a", "#eda100",
"#e87ba4", "#008300", "#4a3aa7", "#e34948"];
const FS_PLAGES = [{ id: 1, label: "24 h" }, { id: 7, label: "7 jours" },
{ id: 14, label: "14 jours" }, { id: 30, label: "30 jours" }];
const fsBase = () => (window.Backend && window.Backend.base) || "";
// 1 284 · 12,9 k · 4,2 M — un compteur d'impressions à sept chiffres ne se lit pas.
const fsCompact = (n) => {
const v = Number(n) || 0;
const s = v < 0 ? "−" : "";
const a = Math.abs(v);
if (a >= 1e6) return s + (a / 1e6).toFixed(1).replace(".", ",") + " M";
if (a >= 1e4) return s + Math.round(a / 1e3) + " k";
return s + a.toLocaleString("fr-FR");
};
const fsEntier = (n) => (Number(n) || 0).toLocaleString("fr-FR");
const fsJourCourt = (iso) => iso.slice(8) + "/" + iso.slice(5, 7);
const fsJourLong = (iso) => {
try {
return new Date(iso + "T12:00:00Z").toLocaleDateString("fr-FR",
{ weekday: "long", day: "numeric", month: "long" });
} catch (e) { return iso; }
};
const fsSombre = () => {
try {
const t = document.documentElement.getAttribute("data-theme");
if (t) return t !== "light";
return !window.matchMedia || window.matchMedia("(prefers-color-scheme: dark)").matches;
} catch (e) { return true; }
};
// Des graduations rondes : 0 / 20 000 / 40 000, jamais 0 / 17 384 / 34 768.
function fsEchelle(min, max) {
const bas = Math.min(0, min);
const etendue = Math.max(1, max - bas);
const brut = etendue / 4;
const ordre = Math.pow(10, Math.floor(Math.log10(brut)));
const pas = [1, 2, 2.5, 5, 10].map((m) => m * ordre).find((p) => p >= brut) || ordre * 10;
const plancher = Math.floor(bas / pas) * pas;
const haut = Math.ceil(max / pas) * pas || pas;
const ticks = [];
for (let v = plancher; v <= haut + 1e-9; v += pas) ticks.push(v);
return { bas: plancher, haut, ticks };
}
// Une trace de 12 points, dans la tuile. Elle ne porte pas de valeur : elle dit la FORME.
function FsTrace({ valeurs, couleur }) {
const v = (valeurs || []).slice(-12);
if (v.length < 2) return null;
const mn = Math.min(...v), mx = Math.max(...v), amp = mx - mn || 1;
const d = v.map((y, i) => (i ? "L" : "M") + (i / (v.length - 1)) * 62 + " "
+ (16 - ((y - mn) / amp) * 14)).join(" ");
return (
);
}
// ── LA JOURNÉE ────────────────────────────────────────────────────────────────────────
//
// CE QUE LES COURBES NE DIRONT JAMAIS. Elles viennent du fournisseur, ne bougent qu'une fois
// par 24 h, et racontent la CONSÉQUENCE : des vues, des abonnés. Ce bandeau raconte la CAUSE,
// et il vient de nos propres plannings : combien de publications doivent sortir aujourd'hui,
// combien sont réellement sorties, et sur quels comptes ça a raté.
//
// LA FORME EST UNE JAUGE, pas un graphique. Un rapport unique contre une limite — livrées sur
// prévues — se lit d'un coup sur une barre et jamais sur une courbe.
// Une jauge : la part faite, sur la même piste que le reste. Les segments sont séparés de 2 px
// de surface, sinon deux couleurs voisines se lisent comme une seule.
function FsJauge({ parts, total }) {
const t = Math.max(1, total || 0);
return (
);
}
function FsBandeauJournee({ j }) {
if (!j || !j.ok) return null;
const t = j.totaux || {};
const rien = !t.a_livrer;
return (
{/* « VALIDÉES » ET « LIVRÉES » NE SONT PAS LE MÊME NOMBRE, et c'est la distinction que
l'opérateur demandait. Validée = acceptée par bundle.social, elle partira toute
seule. Livrée = son heure est passée, elle est sortie. */}
{t.bloquees > 0 && (
)}
{t.comptes_actifs} compte(s) sur {t.branches} branché(s) publient aujourd'hui
{t.comptes_ko ? " · " + t.comptes_ko + " demandent une décision" : ""}
);
}
// ── LES COMPTES, SOUS LE GRAPHIQUE ────────────────────────────────────────────────────
//
// « il faut que je sache aussi les comptes qui ont échoué et si on a la data sur la
// problématique ». On l'a : quand un envoi est refusé, le motif du fournisseur est écrit sur
// la ligne du planning, et un envoi réussi l'efface. Un motif non vide veut donc dire : la
// dernière tentative a échoué, et voici pourquoi.
//
// LA FORME EST UN TABLEAU. Au-delà de sept lignes qui portent toutes du sens, un graphique
// cesse d'aider — et ici chaque ligne porte un pseudo, quatre nombres et une phrase.
function FsComptes({ j }) {
const [tout, setTout] = React.useState(false);
if (!j || !j.ok || !(j.comptes || []).length) return null;
const souci = (f) => f.refus || f.souci;
const aVoir = j.comptes.filter((f) => souci(f) || f.a_livrer || f.echecs);
const calmes = j.comptes.filter((f) => aVoir.indexOf(f) < 0);
const lignes = tout ? j.comptes : aVoir;
const cell = { padding: "7px 9px", fontSize: 12, borderTop: "1px solid var(--border)" };
const tete = { padding: "6px 9px", fontSize: 10, textTransform: "uppercase",
letterSpacing: ".05em", color: "var(--faint)", textAlign: "left", fontWeight: 600 };
const nb = { ...cell, textAlign: "right", fontVariantNumeric: "tabular-nums", width: 74 };
return (
Compte par compte, aujourd'hui
compte
à livrer
livrées
échecs
état
{lignes.map((f) => {
const mal = !!souci(f);
return (
{/* L'ÉTAT NE PASSE JAMAIS PAR LA SEULE COULEUR : un signe, un mot, et la
cause en toutes lettres quand on l'a. */}
{mal ? "⨯ " + souci(f)
: !f.branche ? "· pas branché"
: f.a_livrer ? "✓ rien ne s'y oppose"
: "· rien de prévu aujourd'hui"}
);
})}
{calmes.length > 0 && (
setTout(!tout)}
style={{ padding: "8px 10px", fontSize: 11.5, color: "var(--faint)",
borderTop: "1px solid var(--border)", cursor: "pointer" }}>
{tout ? "▾ tous les comptes sont affichés — n'afficher que ceux à traiter"
: "▸ et " + calmes.length + " compte(s) sans rien à signaler"}
)}
);
}
function VueStats() {
const [jours, setJours] = React.useState(7);
// CE QUE L'ECRAN MONTRE EN S'OUVRANT. Il ouvrait sur « Abonnes, par compte » : quatre
// courbes dont deux plates au ras de l'axe, sur un parc de douze a trente-six abonnes.
// C'est vrai, et c'est illisible. « Vues, tout le parc » raconte quelque chose des le
// premier coup d'oeil ; le detail par compte reste a un clic.
const [mesure, setMesure] = React.useState("views");
const [vue, setVue] = React.useState("total"); // comptes | total
const [pas, setPas] = React.useState("cumul"); // cumul | jour
const [donnees, setDonnees] = React.useState(null);
const [erreur, setErreur] = React.useState("");
const [occupe, setOccupe] = React.useState("");
const [avis, setAvis] = React.useState(null);
const [tableau, setTableau] = React.useState(false);
const [survol, setSurvol] = React.useState(null);
const [jrn, setJrn] = React.useState(null); // la journee, cote plannings
const [isole, setIsole] = React.useState(null); // compte mis en avant à la demande
const svg = React.useRef(null);
const charger = React.useCallback(async (n) => {
try {
const r = await fetch(fsBase() + "/api/floodsflow/stats/" + (n || jours),
{ cache: "no-store" });
const d = await r.json();
if (d && d.ok) { setDonnees(d); setErreur(""); }
else setErreur((d && d.error) || "statistiques indisponibles");
} catch (e) { setErreur("backend injoignable — " + e.message); }
}, [jours]);
React.useEffect(() => { charger(jours); }, [jours, charger]);
// LA JOURNEE SE LIT A PART, ET C'EST VOULU. Elle vient de NOS plannings, pas du
// fournisseur : elle est fraiche a la seconde, alors que les releves ont jusqu'a 24 h de
// retard. Les melanger dans un seul appel ferait attendre l'un pour l'autre.
const chargerJournee = React.useCallback(async () => {
try {
const r = await fetch(fsBase() + "/api/floodsflow/journee", { cache: "no-store" });
const d = await r.json();
if (d && d.ok) setJrn(d);
} catch (e) { /* le reste du panneau reste utilisable */ }
}, []);
React.useEffect(() => {
chargerJournee();
const surEnvoi = () => setTimeout(chargerJournee, 1500);
window.addEventListener("floodsflow:envoi", surEnvoi);
return () => window.removeEventListener("floodsflow:envoi", surEnvoi);
}, [chargerJournee]);
const relever = async () => {
if (occupe) return;
setOccupe("relève"); setAvis(null);
try {
const r = await fetch(fsBase() + "/api/floodsflow/stats", {
method: "POST", headers: { "content-type": "application/json" },
body: JSON.stringify({ jours: jours, forcer: true }),
});
const d = await r.json();
if (!d.ok) { setAvis({ ton: "ko", texte: d.error || "relève refusée" }); return; }
if (d.historique) setDonnees(d.historique);
setAvis({ ton: (d.erreurs || []).length ? "ko" : "ok",
texte: d.comptes.length + " compte(s) relevé(s) · " + d.releves_neufs
+ " nouveau(x) relevé(s) · " + d.forcages + " forçage(s)"
+ ((d.erreurs || []).length ? " — " + d.erreurs.length + " refus : "
+ d.erreurs.slice(0, 2).join(" · ") : "") });
} catch (e) {
setAvis({ ton: "ko", texte: "relève interrompue — " + e.message });
} finally { setOccupe(""); }
};
const noirs = fsSombre();
const teintes = noirs ? FS_SERIES_SOMBRE : FS_SERIES_CLAIR;
const parCompte = (donnees && donnees.par_compte) || {};
const libelles = (donnees && donnees.libelles) || {};
const cumul = (donnees && donnees.cumul) || [];
const pouls = donnees && donnees.pouls; // ce que NOS plannings savent de la journee
// L'ORDRE DES SÉRIES EST STABLE, ALPHABÉTIQUE. La couleur suit le compte, jamais son rang :
// isoler une série ne doit pas repeindre les autres.
const noms = Object.keys(parCompte).sort();
const couleur = (u) => teintes[noms.indexOf(u) % teintes.length];
const NEUTRE = noirs ? "#3987e5" : "#2a78d6";
const dates = [...new Set(noms.flatMap((u) => (parCompte[u].points || []).map((p) => p.jour)))]
.sort();
// ── les séries à tracer ────────────────────────────────────────────────────────────
// « Par jour » soustrait le jour précédent : pour des abonnés ou des vues, c'est ce qui
// s'est passé CE jour-là, et c'est presque toujours la question. Le cumul, lui, dit où on
// en est. Les deux sont vrais ; ils ne répondent pas à la même chose.
const valeurAu = (u, j) => {
const pts = parCompte[u] ? parCompte[u].points || [] : [];
let v = null;
for (const p of pts) { if (p.jour <= j) v = Number(p[mesure]) || 0; }
return v;
};
const brut = (u, j) => {
const p = (parCompte[u].points || []).find((x) => x.jour === j);
return p ? Number(p[mesure]) || 0 : null;
};
const serie = (u) => dates.map((j, i) => {
const v = pas === "cumul" ? brut(u, j) : (() => {
const a = valeurAu(u, j), b = i ? valeurAu(u, dates[i - 1]) : null;
return brut(u, j) === null || b === null ? null : a - b;
})();
return { jour: j, v };
});
const serieTotal = dates.map((j, i) => {
const c = cumul.find((x) => x.jour === j);
const a = c ? Number(c[mesure]) || 0 : null;
if (pas === "cumul") return { jour: j, v: a };
const cp = i ? cumul.find((x) => x.jour === dates[i - 1]) : null;
return { jour: j, v: cp && a !== null ? a - (Number(cp[mesure]) || 0) : null };
});
const series = vue === "total"
? [{ cle: "__total", nom: "Tout le parc", couleur: NEUTRE, points: serieTotal, muet: false }]
: noms.map((u) => ({ cle: u, nom: "@" + u, couleur: couleur(u), points: serie(u),
muet: !!parCompte[u].muet, retard: parCompte[u].retard_jours }));
const toutes = series.flatMap((s) => s.points.map((p) => p.v)).filter((v) => v !== null);
const ech = fsEchelle(toutes.length ? Math.min(...toutes) : 0,
toutes.length ? Math.max(...toutes) : 1);
// ── géométrie ──────────────────────────────────────────────────────────────────────
const L = 900, H = 300, mg = { g: 58, d: 118, h: 18, b: 34 };
const px = (i) => mg.g + (dates.length <= 1 ? (L - mg.g - mg.d) / 2
: (i / (dates.length - 1)) * (L - mg.g - mg.d));
const py = (v) => H - mg.b - (((Number(v) || 0) - ech.bas) / (ech.haut - ech.bas || 1))
* (H - mg.h - mg.b);
const der = cumul.length ? cumul[cumul.length - 1] : null;
const prem = cumul.length ? cumul[0] : null;
// LE TEMPS D'ENGAGEMENT A ETE DEMANDE, ET LE FOURNISSEUR NE LE DONNE PAS.
// `GET /analytics/social-account` rend followers, following, views, viewsUnique,
// impressions, impressionsUnique, likes, comments, postCount -- et rien sur la duree de
// visionnage. Fabriquer une moyenne a partir des vues serait un chiffre invente. Ce qui
// s'en approche honnetement, c'est le taux de reaction : on le calcule, on le nomme, et on
// ecrit l'absence de l'autre a cote.
// L'ÂGE DE LA DONNÉE, EN JOURS. On prend la relève la plus RÉCENTE du parc : si un seul
// compte répond encore, les courbes ne sont pas mortes — elles sont incomplètes, et c'est
// une autre phrase.
const retard = donnees && donnees.collecte_le
? Math.max(0, (Date.now() - Date.parse(donnees.collecte_le)) / 86400000)
: 0;
const muets = Object.keys(parCompte).filter((u) => parCompte[u].muet).sort();
const engagement = der && der.views
? (((der.likes + der.comments) / der.views) * 100).toFixed(1).replace(".", ",") + " %"
: "—";
const surSouris = (e) => {
if (!svg.current || dates.length < 1) return;
const b = svg.current.getBoundingClientRect();
const x = ((e.clientX - b.left) / b.width) * L;
const t = dates.length <= 1 ? 0
: Math.round(((x - mg.g) / (L - mg.g - mg.d)) * (dates.length - 1));
setSurvol(Math.max(0, Math.min(dates.length - 1, t)));
};
const cadre = { padding: "16px 18px", background: "var(--surface)",
border: "1px solid var(--border)", borderRadius: 13, marginBottom: 16 };
const onglet = (actif) => ({
padding: "5px 11px", borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: "pointer",
font: "inherit", border: "1px solid " + (actif ? "var(--accent)" : "var(--border)"),
background: actif ? "var(--accent-soft, rgba(0,224,138,.12))" : "transparent",
color: actif ? "var(--accent)" : "var(--muted)",
});
const segment = (actif, premier, dernier) => ({
padding: "5px 10px", fontSize: 12, fontWeight: 600, cursor: "pointer", font: "inherit",
border: "1px solid " + (actif ? "var(--accent)" : "var(--border)"),
borderRadius: (premier ? "8px 0 0 8px" : dernier ? "0 8px 8px 0" : 0),
marginLeft: premier ? 0 : -1,
background: actif ? "var(--accent-soft, rgba(0,224,138,.12))" : "transparent",
color: actif ? "var(--accent)" : "var(--muted)", position: "relative",
zIndex: actif ? 1 : 0,
});
const titreMesure = (libelles[mesure] || mesure)
+ (pas === "jour" ? " — évolution par jour" : "")
+ (vue === "total" ? " · tout le parc" : " · par compte");
return (
Comptes branchés — statistiques
{donnees && donnees.collecte_le
? "dernière relève " + new Date(donnees.collecte_le).toLocaleString("fr-FR",
{ day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" })
: "jamais relevé"}
{" · automatique toutes les 4 h"}
{/* LES FILTRES AU-DESSUS DU GRAPHIQUE, sur deux lignes : d'abord QUAND, puis QUOI. */}
Aucun relevé. Branche un compte à l'API, puis « Relever maintenant » —
bundle.social ne mesure que les comptes connectés.
) : (
<>
{/* LA FRAÎCHEUR SE DIT EN GRAND OU ELLE NE SE DIT PAS. La date de relève vivait en
gris minuscule à côté du titre : la courbe s'arrêtait au 2 septembre, on était le
6, et rien ne le criait. Une courbe qui a l'air de finir aujourd'hui alors qu'elle
a quatre jours de retard, c'est le pire mensonge qu'un tableau de bord puisse
faire — parce qu'il est involontaire et qu'on ne le cherche pas. */}
{retard >= 1.5 && (
⚠ Les courbes s'arrêtent il y a {retard.toFixed(1).replace(".", ",")} jours.
{" "}bundle.social ne relève qu'une fois par 24 h et la collecte automatique n'a
pas tourné depuis — « ↻ Relever maintenant » va chercher les chiffres du jour.
{muets.length ? " " + muets.length + " compte(s) ne répondent plus du tout : "
+ muets.slice(0, 3).join(", ") + "." : ""}
)}
{/* Les tuiles disent le TOTAL DU PARC — c'est écrit, parce que la courbe peut
montrer le détail par compte et qu'on comparait alors deux choses différentes. */}
{["views", "impressions", "likes", "comments", "followers", "postCount"].map((m) => {
const v = der ? der[m] : 0;
const ec = v - (prem ? prem[m] : 0);
const actif = mesure === m;
return (
);
})}
Les six totaux ci-dessus portent sur tout le parc ({der ? der.comptes : 0}
{" "}compte(s) branché(s)), et viennent de bundle.social. Le graphique montre :{" "}
{titreMesure}. Le temps d'engagement n'est pas mesuré par
bundle.social — il ne rend que ces six-là. Ce qui s'en approche :{" "}
{engagement} de réactions par vue (j'aime + commentaires ÷ vues).
Un seul relevé sur cette plage — il faut deux points pour tracer une courbe.
Élargis la plage, ou attends la prochaine relève.
) : (
{/* L'INFOBULLE : la date en toutes lettres, puis chaque compte avec sa valeur,
du plus grand au plus petit. C'est ce qui manquait — on voyait des courbes
sans jamais pouvoir lire un jour précis. */}
{survol !== null && (
Tout le parc
{(() => {
const t = serieTotal[survol];
return t && t.v !== null ? fsEntier(t.v) : "—";
})()}
)}
)}
)}
{/* La légende est toujours là dès deux séries : l'identité ne tient jamais à la
seule couleur. Un clic isole une courbe — les autres s'effacent sans changer de
teinte, sinon la couleur cesserait de désigner le compte. */}
{vue === "comptes" && (
)}
{/* SOUS LE GRAPHIQUE, LES COMPTES — c'est l'ordre demandé, et c'est le bon : les
courbes disent ce qui s'est passé, le tableau dit à qui parler maintenant. */}
)}