// Tempo — Statistiques : analyse Trading + Habitudes (refonte)
// Composants exposés : StatsPage(props) (desktop) et StatsMobile(props) (mobile), avec
// props = { state, initialView, period, openImport }
// - initialView : 'trading' | 'habits' (sous-onglet d'ouverture)
// - period : 'week' | 'month' | 'year' | 'all' (période d'ouverture ; « Ce mois » par défaut)
// - openImport : fenêtre « Ajouter des trades » (app.jsx) ; l'état vide l'ouvre sur
// l'onglet Saisie manuelle via openImport(null, 'manual') (« Ajouter un trade »).
// Aucune lib externe : tous les graphes sont du SVG inline fait main. Aucune couleur en dur — tout via CSS vars.
// Charte (docs/charte-ui.md) : montants via fmtMoney, nombres via fmtNum / fmtPct / fmtR / fmtPF,
// dates via fmtDayShort / fmtDayRange / fmtMonthYear, tout dans le fuseau du profil.
//
// Données :
// - Trades : state.trades (déjà chargés) filtrés par période côté JS, sur le jour
// civil de chaque trade dans le fuseau du profil.
// - Habitudes : aucune requête ici. L'écran lit state.habitRows / state.habitCtx
// (historique complet chargé par useAppState) et appelle le moteur de calcul
// de design/state.jsx : une seule règle pour l'Accueil, Routines et Statistiques.
//
// Philosophie : « moins mais mieux ». Quelques visualisations vraiment décisionnelles,
// beaucoup d'air, des chiffres-clés discrets plutôt qu'un mur de graphiques.
// ─── Jours civils 'YYYY-MM-DD' (jamais projetés dans un fuseau) ──────
// Tous les calculs de calendrier passent par les fonctions de design/state.jsx
// (habitShiftDay, habitWeekdayNum, habitWeekStart), qui travaillent à midi UTC
// sur le jour civil : le résultat ne dépend jamais du fuseau du navigateur.
// Renvoie { fromISO, toISO } (bornes inclusives, jours civils du fuseau du profil)
// pour la période choisie. Périodes civiles (charte §4) : semaine du lundi, mois
// et année calendaires, jusqu'à aujourd'hui. 'all' renvoie fromISO = null.
function statsPeriodRange(period, today) {
const toISO = today || todayISO();
if (period === 'all') return { fromISO: null, toISO };
if (period === 'week') return { fromISO: habitWeekStart(toISO), toISO };
if (period === 'month') return { fromISO: toISO.slice(0, 8) + '01', toISO };
return { fromISO: toISO.slice(0, 5) + '01-01', toISO }; // year
}
const STATS_PERIODS = [
{ id: 'week', label: 'Cette semaine' },
{ id: 'month', label: 'Ce mois' },
{ id: 'year', label: 'Cette année' },
{ id: 'all', label: 'Tout' },
];
// Plage affichée sous le sélecteur de période (« 21–27 sept. »). Pour « Tout » :
// du premier jour tradé à aujourd'hui (trading), ou du premier jour de suivi de la
// plus ancienne habitude à aujourd'hui (habitudes, §5.14) ; « — » sans donnée.
function statsRangeLabel(range, view, firstDay, habitFirst) {
if (range.fromISO) return fmtDayRange(range.fromISO, range.toISO);
const start = view === 'habits' ? habitFirst : firstDay;
if (!start) return '—';
return fmtDayRange(start > range.toISO ? range.toISO : start, range.toISO);
}
// Titre de la page : table NAV_LABELS (core.jsx), seule source des noms d'écrans.
function statsTitle() {
const n = (typeof NAV_LABELS !== 'undefined' && NAV_LABELS && NAV_LABELS.stats) || null;
return (n && n.titre) || 'Statistiques';
}
// ─── Fuseau, jour d'un trade, signe d'un montant ─────────────────────
function statsTz() { return (typeof window !== 'undefined' && window.__appTz) || 'Europe/Paris'; }
// Clé jour local cohérente avec le calendrier (fuseau du profil).
function statsDayKey(iso) {
if (!iso) return '';
if (window.localDayKey) return window.localDayKey(iso, statsTz());
return localDayInTz(iso);
}
// Signe d'un montant tel qu'il s'affiche (arrondi aux décimales de la devise) :
// un P&L de 0,001 € s'affiche « 0,00 € », il est donc neutre, pas vert.
function statsMoneySign(v) {
return moneySign(v); // règle unique, format-prefs.jsx
}
function statsMoneyTone(v) {
const s = statsMoneySign(v);
return s > 0 ? 'pos' : s < 0 ? 'neg' : undefined;
}
function statsToneColor(tone, fallback = 'var(--fg)') {
return tone === 'pos' ? 'var(--green)' : tone === 'neg' ? 'var(--red)' : fallback;
}
// ─── Nombre animé (montant devise) ───────────────────────────────────
// Relais vers l'AnimatedMoney unique (animations.jsx, charte §2) : elle compte
// avec les décimales de la devise du profil et s'arrête exactement sur
// fmtMoney(value, signed) — jamais sur une valeur arrondie à l'unité.
function StatsAnimatedMoney({ value, signed = true, style }) {
return ;
}
// ─── Primitives UI partagées ─────────────────────────────────────────
// Largeur réelle d'un bloc, mesurée par ref de rappel : fonctionne même quand le
// bloc n'apparaît qu'après un squelette de chargement (contrairement à un effet
// monté une seule fois). Sert à choisir la grille selon la place disponible, et
// non selon le seul mode « mobile » (une tablette de 768 px a la place de 4 colonnes).
function useStatsBodyWidth() {
const [width, setWidth] = React.useState(0);
const roRef = React.useRef(null);
const ref = React.useCallback((el) => {
if (roRef.current) { roRef.current.disconnect(); roRef.current = null; }
if (!el) return;
const read = () => setWidth(Math.round(el.getBoundingClientRect().width));
read();
if (typeof ResizeObserver === 'function') {
roRef.current = new ResizeObserver(read);
roRef.current.observe(el);
}
}, []);
return [ref, width];
}
const STATS_FOUR_COLS_MIN = 680;
// Largeur réelle d'un texte sur une ligne, en px, pour une taille et une graisse
// données : mesurée dans la page (même police, mêmes chiffres tabulaires que
// l'affichage), jamais estimée au nombre de caractères. Sert à décider si un
// montant ou un libellé tient dans sa case AVANT de l'y écrire.
// opts.num : classe .num (chiffres tabulaires), comme l'élément affiché ;
// opts.letterSpacing : approche de l'élément affiché (ex. '-.018em').
// Une mesure n'est gardée en mémoire que si les polices étaient chargées : tant
// qu'Inter arrive, on remesure (voir useStatsFontEpoch, qui relance le rendu).
const statsTextCache = new Map();
let statsTextProbe = null;
function statsFontsLoaded() {
return typeof document === 'undefined' || !document.fonts || document.fonts.status === 'loaded';
}
function statsTextWidth(text, size, weight, opts) {
const str = String(text == null ? '' : text);
if (!str) return 0;
const num = !!(opts && opts.num);
const spacing = (opts && opts.letterSpacing) || '';
const fallback = str.length * size * 0.6;
if (typeof document === 'undefined' || !document.body) return fallback;
const key = size + '|' + weight + '|' + (num ? 1 : 0) + '|' + spacing + '|' + str;
const hit = statsTextCache.get(key);
if (hit !== undefined) return hit;
let el = statsTextProbe;
if (!el || !el.isConnected) {
el = document.createElement('span');
el.setAttribute('aria-hidden', 'true');
el.style.cssText = 'position:absolute;left:-9999px;top:0;visibility:hidden;pointer-events:none;white-space:pre;line-height:1;padding:0;border:0;margin:0;';
document.body.appendChild(el);
statsTextProbe = el;
}
el.className = num ? 'num' : '';
el.style.fontSize = size + 'px';
el.style.fontWeight = String(weight);
el.style.letterSpacing = spacing || (num ? '' : 'normal');
el.textContent = str;
const w = el.getBoundingClientRect().width;
el.textContent = '';
if (!(w > 0)) return fallback;
// Vérifié APRÈS la mesure : c'est elle qui peut déclencher le chargement d'une graisse.
if (statsFontsLoaded()) {
if (statsTextCache.size >= 2000) statsTextCache.clear(); // garde-fou : la mémoire ne grossit pas sans fin
statsTextCache.set(key, w);
}
return w;
}
function statsMaxTextWidth(texts, size, weight, opts) {
let max = 0;
for (const t of texts) { const w = statsTextWidth(t, size, weight, opts); if (w > max) max = w; }
return max;
}
// Relance le rendu quand une police finit de charger : les largeurs mesurées
// avec la police de remplacement ne valent plus.
function useStatsFontEpoch() {
const [epoch, setEpoch] = React.useState(0);
React.useEffect(() => {
const fonts = typeof document !== 'undefined' ? document.fonts : null;
if (!fonts || typeof fonts.addEventListener !== 'function') return undefined;
let alive = true;
const bump = () => { if (!alive) return; statsTextCache.clear(); setEpoch((n) => n + 1); };
fonts.addEventListener('loadingdone', bump);
// Chargement déjà en cours au montage : l'événement peut être passé entre le rendu et cet effet.
if (fonts.status !== 'loaded' && fonts.ready && typeof fonts.ready.then === 'function') fonts.ready.then(bump, () => {});
return () => { alive = false; fonts.removeEventListener('loadingdone', bump); };
}, []);
return epoch;
}
// Les deux vues de l'écran (onglets Trading et Habitudes).
const STATS_VIEW_IDS = [{ id: 'trading' }, { id: 'habits' }];
// `idPrefix` (onglets seulement) : relie chaque onglet à son panneau — l'onglet
// reçoit id « -tab- » et aria-controls « -panel- ».
function StatsSegmented({ options, value, onChange, size = 'md', ariaLabel, kind = 'choice', stretch = false, idPrefix }) {
// Style unique de l'application : SegmentedTabs (core.jsx).
return ;
}
// KPI « héros » : grande carte avec valeur animée optionnelle. `wide` : la carte
// occupe toute la ligne de la grille (montants sur mobile, jamais tronqués).
// Sans ton, la valeur est en var(--fg) (zéro neutre, charte §2).
// `size` : taille de la valeur en px (défaut 30 en `big`, 23 sinon) — réduite
// par l'écran quand la carte est trop étroite pour le montant le plus long.
function StatsKpi({ label, value, animatedMoney, sub, tone, big = false, wide = false, size }) {
const color = statsToneColor(tone, 'var(--fg)');
return (
{/* Libellé en casse de phrase, comme les cartes de l'Accueil et du Tableau de bord (KpiCard). */}
{label}
{animatedMoney != null
?
: {value}}
{sub &&
{sub}
}
);
}
// Bandeau compact de chiffres secondaires : une carte, plusieurs cellules.
// Les libellés passent à la ligne plutôt que d'être coupés ; les valeurs restent
// sur une ligne (nowrap, jamais d'ellipsis sur un chiffre). `cols` et `size`
// (taille des valeurs, 17 px par défaut) sont choisis par l'écran d'après la
// largeur mesurée (statsStripLayout) : une valeur ne sort jamais de sa cellule.
const STATS_STRIP_SIZE = 17; // taille normale des valeurs
const STATS_STRIP_SIZE_MIN = 13; // en dessous, on passe à moins de colonnes
const STATS_STRIP_PAD_X = 16; // marge horizontale d'une cellule
const STATS_STRIP_SPACING = '-.018em';
// Colonnes et taille des valeurs d'un bandeau, pour une zone de `bodyW` px :
// d'abord `cols` colonnes à 17 px ; si la valeur la plus large
// (`maxW`, mesurée à 17 px) ne tient pas, la même grille en plus petit (jusqu'à
// 13 px) ; sinon moitié moins de colonnes, jusqu'à une seule.
function statsStripLayout(bodyW, cols, maxW) {
if (!(bodyW > 0) || !(maxW > 0)) return { cols, size: STATS_STRIP_SIZE };
// Bord de la carte (2 px), marges de la cellule, filet de séparation (1 px) et 1 px de sûreté.
const room = (c) => (bodyW - 2) / c - STATS_STRIP_PAD_X * 2 - 2;
const fit = (c) => Math.floor((STATS_STRIP_SIZE * room(c) / maxW) * 2) / 2; // largeur proportionnelle à la taille
for (let c = cols; c >= 1; c = c > 2 ? Math.ceil(c / 2) : c - 1) {
const size = fit(c);
if (size >= STATS_STRIP_SIZE) return { cols: c, size: STATS_STRIP_SIZE };
if (size >= STATS_STRIP_SIZE_MIN) return { cols: c, size };
if (c === 1) return { cols: 1, size: Math.max(10, size) };
}
return { cols: 1, size: STATS_STRIP_SIZE };
}
function StatsStrip({ items, cols, size = STATS_STRIP_SIZE }) {
const n = cols || items.length;
return (
{items.map((it, i) => {
const color = statsToneColor(it.tone, it.accent || 'var(--fg)');
const startOfRow = i % n === 0;
const secondRow = i >= n;
return (
{it.label}
{it.value}
{it.sub &&
{it.sub}
}
);
})}
);
}
function StatsPanel({ title, subtitle, children, pad = '18px 20px' }) {
return (
{title && (
{title}
{subtitle && {subtitle}}
)}
{children}
);
}
// État vide : une phrase et, si fournie, UNE action principale
// (action = { label, onClick, primary }).
function StatsEmpty({ title, sub, icon, action }) {
// Format unique de l'application : EmptyState (core.jsx).
return (
);
}
// Squelette de chargement (uniquement pendant le premier chargement des trades).
function StatsTradingSkeleton({ compact = false }) {
const bar = (w, h) => ;
return (
{[0, 1, 2, 3].map(i => (
{bar('55%', 10)}{bar('75%', 26)}{bar('40%', 10)}
))}
{bar('100%', compact ? 190 : 250)}
);
}
// Bandeau d'erreur de chargement des trades (charte §7 : une erreur n'est pas un
// compte vide). Lit state.tradesError ; les trades déjà chargés restent affichés.
function StatsLoadError({ state }) {
const err = state && state.tradesError;
if (!err) return null;
const retry = typeof state.refreshTrades === 'function' ? () => state.refreshTrades() : null;
return (
Impossible de charger tes trades. Vérifie ta connexion.
{retry && }
);
}
// Hook : largeur responsive d'un conteneur (pour SVG fluides).
function useStatsWidth(initial) {
const ref = React.useRef(null);
const [w, setW] = React.useState(initial);
React.useEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(entries => {
const cw = entries[0]?.contentRect?.width;
if (cw) setW(Math.max(220, Math.round(cw)));
});
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
return [ref, w];
}
// ═════════════════════════════════════════════════════════════════════
// GRAPHES SVG
// ═════════════════════════════════════════════════════════════════════
// Courbe du P&L cumulé : LA MÊME que celle du Tableau de bord
// (CumulativeChartReal, pages.jsx) — mêmes axes de dates, même échelle, même
// valeur finale exacte (celle du P&L net) — avec en plus la bande de drawdown.
// ddRange (optionnel) : { peak, trough } indices de la plus forte chute pic→creux.
function StatsEquityCurve({ points, dates, height = 240, ddRange = null }) {
if (!points || points.length < 2) {
return ;
}
return ;
}
// Histogramme (barres verticales, +/-).
// data : [{ label, labelShort?, name?, value, color?, valueText?, empty?, emptyText? }]
// · label / labelShort : libellé d'axe, et sa forme courte quand la place manque ;
// · name : nom complet de la barre pour l'info-bulle et le lecteur d'écran
// (« vendredi » pour « Ve ») — à défaut, label ;
// · valueText : valeur en toutes lettres (« 3 trades », « +120,00 €, 4 trades ») ;
// · empty : rien à compter (jour sans trade) : « — », jamais « +0,00 € ».
// La valeur de chaque barre est ÉCRITE en permanence dès qu'elle tient dans la
// place d'une barre (largeur mesurée, même règle que StatsHabitBars : 11 px,
// réduite jusqu'à 9 px), d'abord avec valueFmt, sinon avec valueFmtShort. Quand
// même la forme courte ne tient pas (montants sur téléphone), elle s'affiche à
// la demande — survol, toucher ou focus clavier : chaque barre est alors
// focalisable. Dans tous les cas le graphique est un role="img" dont le libellé
// énonce toutes les valeurs, et chaque barre porte son libellé et son info-bulle.
const STATS_BARS_LABEL_SIZE = 10.5; // taille normale d'un libellé d'axe
const STATS_BARS_LABEL_MIN = 9;
function StatsBars({ data, height = 180, valueFmt, valueFmtShort, ariaLabel }) {
const [ref, w] = useStatsWidth(520);
useStatsFontEpoch(); // largeurs mesurées : à refaire quand la police arrive
const [hover, setHover] = React.useState(null);
const [focus, setFocus] = React.useState(null); // { i, ring } : barre focalisée, anneau si focus clavier
if (!data || !data.length) return
;
const H = height;
const max = Math.max(0, ...data.map(d => d.value));
const min = Math.min(0, ...data.map(d => d.value));
// Sous une barre négative, la valeur a sa propre ligne : elle ne s'écrit
// jamais sur les libellés d'axe.
const padT = 20, padB = 28 + (min < 0 ? 14 : 0), padX = 6;
const innerW = w - padX * 2, innerH = H - padT - padB;
const span = (max - min) || 1;
const zeroY = padT + innerH - ((0 - min) / span) * innerH;
const slot = innerW / data.length;
const bw = Math.min(48, slot * 0.6);
const fmt = valueFmt || (v => fmtMoney(v, true));
const numOpts = { num: true };
// Valeurs : la taille qui fait tenir la plus large dans la place d'une barre.
const rated = data.filter(d => !d.empty);
const fitValues = (f) => {
const widest = statsMaxTextWidth(rated.map(d => f(d.value)), STATS_BAR_VALUE_SIZE, 700, numOpts);
return widest > 0 ? Math.floor((STATS_BAR_VALUE_SIZE * (slot - 2) / widest) * 2) / 2 : STATS_BAR_VALUE_SIZE;
};
let shownFmt = fmt, valueFit = fitValues(fmt);
if (valueFit < STATS_BAR_VALUE_MIN && valueFmtShort) { shownFmt = valueFmtShort; valueFit = fitValues(valueFmtShort); }
const showValues = valueFit >= STATS_BAR_VALUE_MIN;
const valueSize = Math.min(STATS_BAR_VALUE_SIZE, valueFit);
// Libellés d'axe : complets à 10,5 px, puis en plus petit (9 px au moins),
// sinon leur forme courte — deux voisins gardent STATS_BAR_LABEL_GAP entre eux.
const fitLabels = (list) => {
const widest = statsMaxTextWidth(list, STATS_BARS_LABEL_SIZE, 500);
return widest > 0 ? Math.floor((STATS_BARS_LABEL_SIZE * (slot - STATS_BAR_LABEL_GAP) / widest) * 2) / 2 : STATS_BARS_LABEL_SIZE;
};
let labels = data.map(d => d.label), labelFit = fitLabels(labels);
if (labelFit < STATS_BARS_LABEL_MIN && data.some(d => d.labelShort)) {
labels = data.map(d => d.labelShort || d.label);
labelFit = fitLabels(labels);
}
const labelSize = Math.max(STATS_BARS_LABEL_MIN, Math.min(STATS_BARS_LABEL_SIZE, labelFit));
const titles = data.map(d => (d.name || d.label) + ' : ' + (d.empty ? (d.emptyText || 'aucune donnée') : (d.valueText || fmt(d.value))));
const halo = { paintOrder: 'stroke', stroke: 'var(--bg-card)', strokeWidth: 3, strokeLinejoin: 'round' };
// Barre mise en avant : celle survolée, sinon — quand les valeurs sont à la
// demande, seul cas où les barres sont focalisables — celle qui a le focus.
const active = hover != null ? hover : (!showValues && focus ? focus.i : null);
const onFocusBar = (i) => (e) => {
let ring = true;
try { ring = e.currentTarget.matches(':focus-visible'); } catch (err) { ring = true; }
setFocus({ i, ring });
};
return (
);
}
// Barres horizontales (classement par montant). rows: [{ label, value, sub }].
function StatsHBars({ rows }) {
if (!rows || !rows.length) return ;
const maxAbs = Math.max(1, ...rows.map(r => Math.abs(r.value)));
return (
);
}
// ═════════════════════════════════════════════════════════════════════
// TRADING
// ═════════════════════════════════════════════════════════════════════
// Trades de la période : filtre sur le jour civil de chaque trade dans le fuseau
// du profil (jamais sur minuit du navigateur). « Tout » reste sans borne, comme
// le Tableau de bord.
function statsTradesInRange(trades, range) {
if (!Array.isArray(trades)) return [];
if (!range.fromISO) return trades.slice();
return trades.filter(t => {
const k = statsDayKey(t.executed_at);
return !!k && k >= range.fromISO && k <= range.toISO;
});
}
// P&L par jour civil (fuseau du profil) : { 'YYYY-MM-DD': { pnl, count, wins, losses } }.
function statsBuildDayMap(trades) {
const m = {};
for (const t of trades) {
const day = statsDayKey(t.executed_at);
if (!day) continue;
if (!m[day]) m[day] = { pnl: 0, count: 0, wins: 0, losses: 0 };
const v = Number(t.pnl) || 0;
m[day].pnl += v; m[day].count++;
if (v > 0) m[day].wins++; else if (v < 0) m[day].losses++;
}
return m;
}
// Premier jour tradé (pour la plage affichée sous « Tout »).
function useStatsFirstDay(trades) {
return React.useMemo(() => {
let min = null;
for (const t of trades) {
const k = statsDayKey(t.executed_at);
if (k && (!min || k < min)) min = k;
}
return min;
}, [trades]);
}
// tradesByDay / today / nav / openJournal : ceux de l'app (state.tradesByDay,
// state.today), pour que le Calendrier P&L soit identique à celui du Tableau de bord.
function StatsTrading({ trades, range, setPeriod, compact = false, loading = false, error = false, onAddTrade, onImportFile, tradesByDay, today, nav, openJournal }) {
const all = Array.isArray(trades) ? trades : [];
const list = React.useMemo(() => statsTradesInRange(all, range), [trades, range]);
const stats = React.useMemo(() => computeStats(list), [list]);
const [bodyRef, bodyW] = useStatsBodyWidth();
useStatsFontEpoch(); // les bandeaux mesurent leurs valeurs : à refaire quand la police arrive
const sortedAsc = React.useMemo(
() => [...list].sort((a, b) => new Date(a.executed_at) - new Date(b.executed_at)),
[list]
);
// P&L cumulé + dates + métriques dérivées (drawdown, séries).
const { cumulative, cumDates, derived } = React.useMemo(() => {
let run = 0;
const c = [], d = [];
let peak = 0, maxDD = 0, ddPeakIdx = 0, ddTroughIdx = 0, curPeakIdx = 0;
let curWin = 0, curLoss = 0, bestWin = 0, bestLoss = 0;
for (let i = 0; i < sortedAsc.length; i++) {
const p = Number(sortedAsc[i].pnl) || 0;
run += p;
c.push(run); d.push(sortedAsc[i].executed_at);
if (run >= peak) { peak = run; curPeakIdx = i; }
const dd = peak - run;
if (dd > maxDD) { maxDD = dd; ddPeakIdx = curPeakIdx; ddTroughIdx = i; }
if (p > 0) { curWin++; curLoss = 0; if (curWin > bestWin) bestWin = curWin; }
else if (p < 0) { curLoss++; curWin = 0; if (curLoss > bestLoss) bestLoss = curLoss; }
}
return { cumulative: c, cumDates: d, derived: { maxDD, ddPeakIdx, ddTroughIdx, bestWin, bestLoss } };
}, [sortedAsc]);
// Distribution des R multiples — seulement si des R sont renseignés.
// Tranches symétriques autour de zéro, classées sur le R tel qu'il s'écrit
// (deux décimales) : un stop plein à −1,00 R va dans « −2 à −1 R » comme un
// gain de +1,00 R va dans « 1 à 2 R » ; −2,00 R dans « ≤ −2 R », +2,00 R dans « ≥ 2 R ».
const rDist = React.useMemo(() => {
const RED = 'var(--red)', GREEN = 'var(--green)';
const buckets = [
{ label: '≤ −2 R', short: '≤ −2', value: 0, color: RED },
{ label: '−2 à −1 R', short: '−2 à −1', value: 0, color: RED },
{ label: '−1 à 0 R', short: '−1 à 0', value: 0, color: RED },
{ label: '0 à 1 R', short: '0 à 1', value: 0, color: GREEN },
{ label: '1 à 2 R', short: '1 à 2', value: 0, color: GREEN },
{ label: '≥ 2 R', short: '≥ 2', value: 0, color: GREEN },
];
let rTrades = 0;
for (const t of list) {
const rv = Number(t.r_multiple);
if (t.r_multiple == null || t.r_multiple === '' || !Number.isFinite(rv) || rv === 0) continue;
rTrades++;
const size = Math.abs(statsRound(rv, 2));
const k = size >= 2 ? 2 : size >= 1 ? 1 : 0;
buckets[rv < 0 ? 2 - k : 3 + k].value++;
}
return rTrades > 0 ? { buckets, rTrades } : null;
}, [list]);
// Performance par stratégie (P&L net) : les 6 plus significatives, classées par
// P&L décroissant (pertes en bas, même ordre que la page Stratégies), + taux de réussite.
// Un trade appartient à une stratégie quand t.setup === strategy.name (strategy.jsx).
const byStrategy = React.useMemo(() => {
const m = {};
for (const t of list) {
const name = (t.setup && String(t.setup).trim()) || '';
const key = name ? 's:' + name : 'none';
if (!m[key]) m[key] = { label: name || 'Sans stratégie', none: !name, value: 0, count: 0, wins: 0 };
const p = Number(t.pnl) || 0;
m[key].value += p; m[key].count++; if (p > 0) m[key].wins++;
}
const arr = Object.values(m);
return {
hasStrategies: arr.some(s => !s.none),
// Les 6 plus significatives (|P&L|), puis affichées par P&L décroissant.
rows: arr.sort((a, b) => Math.abs(b.value) - Math.abs(a.value)).slice(0, 6).sort((a, b) => b.value - a.value).map(s => ({
label: s.label, value: s.value,
sub: statsTradesText(s.count) + ' · ' + fmtPct(s.count ? (s.wins / s.count) * 100 : 0, 0),
})),
};
}, [list]);
// Performance par jour de la semaine (P&L net), jour civil du fuseau du profil.
const byWeekday = React.useMemo(() => {
const sums = [0, 0, 0, 0, 0, 0, 0];
const counts = [0, 0, 0, 0, 0, 0, 0];
for (const t of list) {
const k = statsDayKey(t.executed_at);
if (!k) continue;
const wd = habitWeekdayNum(k) - 1; // lundi = 0 … dimanche = 6
sums[wd] += Number(t.pnl) || 0; counts[wd]++;
}
const any = counts.some(c => c > 0);
return any ? FR_WEEKDAYS_2.map((lab, i) => ({ label: lab, value: sums[i], count: counts[i] })) : null;
}, [list]);
// P&L par jour de la période choisie (meilleur / pire jour).
const dayMap = React.useMemo(() => statsBuildDayMap(list), [list]);
// Meilleur jour parmi les jours gagnants, pire jour parmi les jours perdants.
const bestWorst = React.useMemo(() => {
const entries = Object.entries(dayMap);
if (!entries.length) return null;
let best = null, worst = null;
for (const [day, v] of entries) {
const s = statsMoneySign(v.pnl);
if (s > 0 && (!best || v.pnl > best.pnl)) best = { day, pnl: v.pnl };
if (s < 0 && (!worst || v.pnl < worst.pnl)) worst = { day, pnl: v.pnl };
}
return { best, worst };
}, [dayMap]);
if (list.length === 0) {
if (loading) return ;
if (error) return null; // le bandeau d'erreur suffit : ce n'est pas un compte vide
// Compte sans aucun trade : l'état vide commun à tous les écrans (core.jsx).
if (all.length === 0) {
return
;
}
return (
setPeriod('all') } : null} />
);
}
const nuls = Number.isFinite(stats.breakeven) ? stats.breakeven : stats.count - stats.wins - stats.losses;
const pfText = stats.wins + stats.losses === 0 ? '—' : fmtPF(stats.profitFactor, stats.count);
const expectancy = stats.count ? stats.netPnl / stats.count : 0;
const ddRange = derived.maxDD > 0 ? { peak: derived.ddPeakIdx, trough: derived.ddTroughIdx } : null;
// Bandeaux secondaires — téléphone : 2 colonnes ; dès qu'il y a la place : 4.
const narrow = compact && bodyW < STATS_FOUR_COLS_MIN;
const gap = compact ? 10 : 14;
// Les 4 indicateurs : colonnes et taille selon la largeur MESURÉE et le texte
// le plus long, pour qu'un montant ne sorte jamais de sa carte (demi-fenêtre
// d'ordinateur, tablette, P&L à six chiffres). Dans l'ordre : 4 colonnes à
// 30 px, 4 colonnes à 24 px, 2 × 2, puis montants en pleine largeur (1-2-1,
// téléphone) avec une taille réduite si même la pleine largeur est juste.
const kpiLongest = [fmtMoney(stats.netPnl, true), fmtPct(stats.winRate, 1), pfText, fmtMoney(expectancy, true)]
.reduce((m, t) => Math.max(m, String(t).length), 0);
const kpiNeed = (font) => kpiLongest * font * 0.56 + 42; // chiffres gras + marges et bord de la carte
const kpiW = (cols) => (bodyW - (cols - 1) * gap) / cols;
let kpiCols = 4, kpiSize = 30, kpiWide = false;
if (bodyW <= 0) { kpiCols = compact ? 2 : 4; kpiWide = compact; }
else if (bodyW >= STATS_FOUR_COLS_MIN && kpiW(4) >= kpiNeed(30)) { /* 4 colonnes, 30 px */ }
else if (bodyW >= STATS_FOUR_COLS_MIN && kpiW(4) >= kpiNeed(24)) kpiSize = 24;
else if (kpiW(2) >= kpiNeed(30)) kpiCols = 2;
else if (kpiW(2) >= kpiNeed(24)) { kpiCols = 2; kpiSize = 24; }
else {
kpiCols = 2; kpiWide = true;
kpiSize = Math.max(18, Math.min(30, Math.floor((bodyW - 42) / (kpiLongest * 0.56))));
}
const streakValue = n => (n > 0 ? statsTradesText(n) : '—');
// Les deux bandeaux de chiffres secondaires : mêmes colonnes et même taille
// (cohérence), choisies d'après la valeur la plus large des deux, MESURÉE.
// Téléphone : 2 colonnes à 17 px, puis en plus petit (CHF à cinq ou six
// chiffres en 320 px), puis une colonne. Un montant n'est jamais abrégé ici
// (fmtMoneyCompact est réservé aux calendriers et aux axes, charte §1).
const stripMain = [
{ label: 'R moyen', value: rDist ? fmtR(stats.avgR) : '—', tone: rDist ? (stats.avgR > 0 ? 'pos' : stats.avgR < 0 ? 'neg' : undefined) : undefined,
sub: rDist ? null : 'aucun R renseigné' },
{ label: 'Gain moyen', value: stats.wins > 0 ? fmtMoney(stats.avgWin, true) : '—', tone: stats.wins > 0 ? 'pos' : undefined,
sub: stats.wins > 0 ? null : 'aucun gain' },
{ label: 'Perte moyenne', value: stats.losses > 0 ? fmtMoney(-stats.avgLoss, true) : '—', tone: stats.losses > 0 ? 'neg' : undefined,
sub: stats.losses > 0 ? null : 'aucune perte' },
{ label: 'Drawdown max', value: derived.maxDD > 0 ? fmtMoney(-derived.maxDD, true) : fmtMoney(0), tone: statsMoneyTone(-derived.maxDD) },
];
// Meilleur / pire jour + plus longues séries.
const stripDays = bestWorst ? [
{ label: 'Meilleur jour', value: bestWorst.best ? fmtMoney(bestWorst.best.pnl, true) : '—', tone: bestWorst.best ? 'pos' : undefined,
sub: bestWorst.best ? fmtDayShort(bestWorst.best.day) : 'aucun jour gagnant' },
{ label: 'Pire jour', value: bestWorst.worst ? fmtMoney(bestWorst.worst.pnl, true) : '—', tone: bestWorst.worst ? 'neg' : undefined,
sub: bestWorst.worst ? fmtDayShort(bestWorst.worst.day) : 'aucun jour perdant' },
{ label: 'Plus longue série gagnante', value: streakValue(derived.bestWin), accent: derived.bestWin > 0 ? 'var(--green)' : undefined,
sub: derived.bestWin > 0 ? 'd’affilée' : 'aucun gain' },
{ label: 'Plus longue série perdante', value: streakValue(derived.bestLoss), accent: derived.bestLoss > 0 ? 'var(--red)' : undefined,
sub: derived.bestLoss > 0 ? 'd’affilée' : 'aucune perte' },
] : null;
const stripMaxW = statsMaxTextWidth(stripMain.concat(stripDays || []).map((it) => it.value),
STATS_STRIP_SIZE, 700, { num: true, letterSpacing: STATS_STRIP_SPACING });
const strip = statsStripLayout(bodyW, narrow ? 2 : 4, stripMaxW);
return (
{/* Indicateurs principaux — les 4 chiffres qui pilotent une décision.
Sur téléphone : montants sur toute la largeur (1-2-1), jamais tronqués. */}
{/* Bandeau secondaire : R moyen, gain / perte moyens, drawdown max */}
{/* P&L cumulé — pièce maîtresse */}
{/* Chiffres-clés discrets : meilleur / pire jour + plus longues séries */}
{stripDays && }
{/* Calendrier P&L : LE MÊME composant que le Tableau de bord (CalendarBlock,
pages.jsx) — mêmes jours, colonne Semaine, pastilles G/P, total du mois,
clic sur un jour = journal du jour. Tout l'historique, mois navigable. */}
{typeof CalendarBlock === 'function' && (
)}
{/* Deux colonnes : distribution des R + P&L par jour de la semaine */}
{/* Performance par stratégie */}
{byStrategy.hasStrategies
?
: }
);
}
// ═════════════════════════════════════════════════════════════════════
// HABITUDES (docs/spec-habitudes.md §8.5)
// ═════════════════════════════════════════════════════════════════════
// Cet écran ne fait AUCUNE requête et ne contient AUCUNE règle de calcul : il
// lit l'état de l'app (state.habitRows, state.habitCtx, state.habitGoal…) et
// appelle le moteur de design/state.jsx (habitDayTally, habitRangeStats,
// habitRate, habitStreaks, habitEvolution, habitWeekdayStats, habitDiscipline).
// Un indicateur a donc la même valeur ici, dans Routines et sur l'Accueil.
// Ordre à l'écran : indicateurs, Calendrier de régularité + Détail du jour,
// Évolution et Par jour de la semaine, Détail par habitude, Discipline et résultats.
const STATS_NB = ' ';
const STATS_NO_ROWS = [];
const STATS_HABIT_MIN_SAMPLE = 5; // jours par groupe pour afficher un écart (§8.5.7)
const STATS_HABIT_SMALL_SAMPLE = 15; // en dessous : pastille « Échantillon réduit »
const STATS_HABIT_LARGE_ZONE = 620; // largeur de zone du calendrier à partir de laquelle les cases sont grandes
const STATS_HABIT_SIDE_MAX = 8; // au-delà, le Détail du jour (une ligne par habitude) passe sous la grille
// Arrondi à `dec` décimales, comme l'affichage (fmtR, fmtMoney) : un écart se
// calcule sur les valeurs telles qu'elles sont écrites à l'écran.
function statsRound(v, dec) {
const p = Math.pow(10, dec);
return Math.round(Number(v) * p * (1 + 8 * Number.EPSILON)) / p;
}
function statsCap(s) {
const t = String(s == null ? '' : s);
return t ? t.charAt(0).toUpperCase() + t.slice(1) : t;
}
// « 0 jour », « 1 jour », « 2 jours » ; forme courte « 5 j » réservée aux
// endroits où le mot « série » ou « record » précède (charte §5).
function statsDaysText(n, short = false) {
const v = Number(n) || 0;
return fmtNum(v, 0) + STATS_NB + (short ? 'j' : v > 1 ? 'jours' : 'jour');
}
// « 0 trade », « 1 trade », « 1 500 trades » : même règle que les jours (charte §1,
// séparateur de milliers ; espace insécable entre le nombre et son unité).
function statsTradesText(n) {
return fmtCount(n, 'trade', STATS_NB);
}
// Écart en points : « +6 pts », « −1 pt », « 0 pt ».
function statsPtsText(delta) {
return fmtNum(delta, 0, true) + STATS_NB + (Math.abs(Number(delta) || 0) > 1 ? 'pts' : 'pt');
}
// Les compteurs passent par fmtNum : « 1 500 faites sur 1 593 prévues » (charte §1).
function statsOutOf(done, planned) { return fmtNum(done, 0) + ' sur ' + fmtNum(planned, 0); }
function statsDonePlanned(done, planned) {
return fmtNum(done, 0) + ' faite' + (done > 1 ? 's' : '') + ' sur ' + fmtNum(planned, 0) + ' prévue' + (planned > 1 ? 's' : '');
}
function statsTallyPct(t) { return t && t.planned > 0 ? (t.done / t.planned) * 100 : null; }
// Mois civils 'YYYY-MM' (arithmétique en UTC, jamais dans le fuseau du navigateur).
function statsMonthShift(ym, n) {
return new Date(Date.UTC(Number(ym.slice(0, 4)), Number(ym.slice(5, 7)) - 1 + n, 1, 12)).toISOString().slice(0, 7);
}
function statsMonthLast(ym) { return habitShiftDay(statsMonthShift(ym, 1) + '-01', -1); }
// Semaines (lundi → dimanche) qui touchent un mois. `a` et `b` : la part de la
// semaine située DANS le mois. Une seule règle pour la colonne « Semaine » du
// calendrier et pour le graphique « Évolution » : « Sem. 40 » y vaut la même chose.
function statsMonthWeeks(ym) {
const firstOfMonth = ym + '-01', lastOfMonth = statsMonthLast(ym);
const out = [];
for (let m = habitWeekStart(firstOfMonth); m <= lastOfMonth; m = habitShiftDay(m, 7)) {
const sun = habitShiftDay(m, 6);
out.push({
monday: m, days: [0, 1, 2, 3, 4, 5, 6].map((k) => habitShiftDay(m, k)),
a: m < firstOfMonth ? firstOfMonth : m, b: sun > lastOfMonth ? lastOfMonth : sun,
});
}
return out;
}
function statsMonthSpan(fromYm, toYm) {
const out = [];
for (let m = fromYm, guard = 0; m <= toYm && guard < 600; m = statsMonthShift(m, 1), guard++) out.push(m);
return out;
}
// Libellé d'un statut habitude × jour (§5.5), en minuscules (colonne de droite
// du Détail du jour, info-bulle d'une case filtrée).
function statsHabitStatusText(status, h, ctx) {
switch (status) {
case 'done': case 'today-done': return 'fait';
case 'missed': return 'manqué';
case 'extra': return 'fait, non compté';
case 'today': return 'à faire';
case 'future': return 'à venir';
case 'off':
if (h && h.section === 'pretrade') return ctx && ctx.tradedDays ? 'pas de trade ce jour' : 'non compté';
return 'pas prévu';
default: return 'non suivie';
}
}
// Info-bulle et libellé accessible d'une case du calendrier.
function statsHabitCellTitle(iso, t, single, ctx) {
const day = statsCap(fmtDayLong(iso));
if (t.state === 'future') return day + ' · à venir';
if (single) {
const st = habitDayStatus(single, iso, ctx);
if (st === 'none') return day + ' · rien de prévu';
return day + ' · ' + (t.state === 'today' ? 'aujourd’hui · ' : '') + statsHabitStatusText(st, single, ctx);
}
if (t.state === 'today') return day + ' · aujourd’hui, en cours · ' + (t.planned ? statsOutOf(t.done, t.planned) : 'rien de prévu');
if (t.state === 'none') return day + ' · rien de prévu';
return day + ' · ' + fmtNum(t.done, 0) + ' habitude' + (t.done > 1 ? 's' : '') + ' faite' + (t.done > 1 ? 's' : '')
+ ' sur ' + fmtNum(t.planned, 0) + ' · ' + fmtPct(statsTallyPct(t), 0);
}
// ─── Case du calendrier ──────────────────────────────────────────────
// Un bouton par jour. kind : 'week' (grande case), 'week-sm' (semaine étroite),
// 'month' (mois entier), 'mini' (mini-calendrier). Semaine et mois : le chiffre
// « 3/3 » est écrit dans la case, la couleur ne fait que le confirmer. Mini :
// la case ne porte que le numéro du jour, coloré selon le niveau. `single` :
// habitude filtrée — le signe (coche, croix, tiret) remplace le COMPTE, jamais
// la date : en mini, la case garde son numéro et prend le fond et le bord du signe.
function StatsHabitCell({ iso, t, kind, dims, theme, selected, onSelect, single, ctx, dim = false }) {
const isToday = t.state === 'today';
const counted = t.state === 'counted';
const st = single ? habitDayStatus(single, iso, ctx) : null;
let look;
if (isToday) look = { background: 'var(--bg-card)', color: 'var(--fg)', border: '1.5px solid var(--blue)' };
else if (t.state === 'future') look = { background: 'transparent', color: 'var(--fg-3)', border: '1px dashed var(--line-2)' };
else if (counted && !single) look = habitLevelStyle(t.level, theme);
else look = { background: 'var(--bg-card)', color: single && st !== 'none' ? 'var(--fg)' : 'var(--fg-3)', border: '1px solid var(--line-2)' };
const shadow = selected ? '0 0 0 1px var(--bg-card), 0 0 0 3px var(--fg)'
: isToday ? '0 0 0 2px rgba(59,130,246,.16)' : 'none';
const title = statsHabitCellTitle(iso, t, single, ctx);
const dayNum = Number(iso.slice(8, 10));
const wd = habitWeekdayNum(iso) - 1;
const frac = t.planned > 0 ? fmtNum(t.done, 0) + '/' + fmtNum(t.planned, 0) : null;
const dot = isToday ? : null;
const showMark = !!single && st !== 'none' && st !== 'future';
// Jour d'un mois voisin (`dim`) : case estompée SANS opacité — une opacité
// estompe aussi le texte, qui tombait à 2:1. Le fond du niveau est mélangé à
// 50 % avec celui de la carte (le même fond qu'une opacité de 0,5) et le texte
// passe en var(--fg) : 4,5:1 au moins sur les cinq niveaux, en clair comme en
// sombre. Sans niveau (à venir, rien de prévu, habitude filtrée), la case garde
// son fond ; l'encre pleine d'une habitude filtrée descend d'un cran (--fg-2).
const dimMix = dim && counted && !single && t.level !== null && t.level !== undefined;
const dimSoft = dim && !dimMix && !isToday && look.color === 'var(--fg)';
const base = {
background: dimMix ? 'color-mix(in srgb, ' + look.background + ' 50%, var(--bg-card))' : look.background,
color: dimMix ? 'var(--fg)' : dimSoft ? 'var(--fg-2)' : look.color,
border: dim ? String(look.border).replace('solid', 'dashed') : look.border,
boxShadow: shadow, cursor: 'pointer', fontFamily: 'inherit',
minWidth: 0, margin: 0, position: 'relative', boxSizing: 'border-box',
};
const common = {
type: 'button', className: 'tap', title, 'aria-label': title, 'aria-pressed': selected ? 'true' : 'false',
'data-day': iso, 'data-state': t.state, 'data-level': counted ? t.level : undefined,
onClick: () => onSelect(iso),
};
// Le compte de la journée en cours reste discret : il n'entre dans aucun taux.
const fracColor = isToday ? 'var(--fg-2)' : 'inherit';
// Fraction à deux chiffres (« 17/20 ») dans une case étroite : police réduite
// et marges rendues, pour qu'aucun chiffre ne passe sous la case voisine.
const cellW = (dims && dims.cellW) || 0;
const longFrac = !!frac && frac.length >= 5 && cellW > 0 && cellW < 46;
if (kind === 'mini') {
const cell = dims.cell;
const ml = showMark ? habitMarkLook(st) : null;
const markStyle = !ml ? null : {
background: isToday && st !== 'today-done' ? 'var(--bg-card)' : ml.box.background,
border: isToday ? '1.5px solid var(--blue)' : String(ml.box.border).replace('1.5px', '1px'),
color: st === 'extra' ? 'var(--green-text)' : ml.ink,
};
const withGlyph = !!(ml && ml.glyph) && cell >= 30;
return (
);
}
if (kind === 'week-sm') {
return (
);
}
if (kind === 'week') {
return (
);
}
// Mois entier : anatomie du Calendrier P&L (numéro en haut à gauche, valeur en bas).
return (
);
}
// ─── Détail du jour (§8.5.3) ─────────────────────────────────────────
// side : panneau à droite de la grille. Sinon le bloc passe sous la grille et
// reste borné en largeur (le statut ne s'éloigne jamais du nom) ; `wide` : assez
// de place pour ranger les moments sur deux colonnes.
function StatsHabitDayDetail({ iso, state, rows, ctx, theme, openJournal, side, wide = false }) {
const [editing, setEditing] = React.useState(false);
const [error, setError] = React.useState(null);
React.useEffect(() => { setEditing(false); setError(null); }, [iso]);
// Panneau encore à l'écran ? Une coche lente peut échouer après le départ
// de Statistiques : l'échec part alors vers l'avis commun de l'application.
const alive = React.useRef(true);
React.useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []);
const today = ctx.today;
const isFuture = iso > today;
const t = habitDayTally(rows, iso, ctx);
// Habitudes à montrer : celles suivies ce jour-là (archivées comprises) ;
// pour un jour à venir, celles qui seront prévues.
const list = rows
.map((h) => ({ h, st: habitDayStatus(h, iso, ctx) }))
.filter((x) => (isFuture ? !x.h.archived && habitIsDue(x.h, iso, ctx) : x.st !== 'none'));
const groups = SECTION_ORDER
.map((sec) => ({ sec, items: list.filter((x) => x.h.section === sec) }))
.filter((g) => g.items.length > 0);
const editable = !isFuture && list.some((x) => !x.h.archived) && typeof state.toggleHabit === 'function';
const dayLong = fmtDayLong(iso);
const toggle = async (h) => {
setError(null);
let res = null;
try { res = await state.toggleHabit(h.id, iso); } catch (e) { res = { error: e }; }
if (!(res && res.error)) return;
if (alive.current) { setError(sbErrorMessage(res.error)); return; }
const text = 'La coche de «\u00A0' + (h.name || 'cette habitude') + '\u00A0» du ' + fmtDayShort(iso) + ' n’a pas été enregistrée. ' + sbErrorMessage(res.error);
if (typeof state.notifyWriteError === 'function') state.notifyWriteError(text);
else console.warn('[Tempo] ' + text);
};
let pill;
if (t.state === 'future') pill = À venir;
else if (t.state === 'today') pill = {t.planned ? 'En cours · ' + statsOutOf(t.done, t.planned) : 'En cours · rien de prévu'};
else if (t.state === 'none') pill = Rien de prévu;
else {
const ls = habitLevelStyle(t.level, theme);
pill = {statsOutOf(t.done, t.planned)} · {fmtPct(statsTallyPct(t), 0)};
}
const dayTrades = state.tradesByDay && state.tradesByDay[iso];
const nTrades = dayTrades && Array.isArray(dayTrades.trades) ? dayTrades.trades.length : 0;
const statusColor = (st) => (st === 'missed' ? 'var(--red-text)' : st === 'done' || st === 'today-done' ? 'var(--green-text)' : 'var(--fg-2)');
return (
Détail du jour
{statsCap(dayLong)}
{pill}
{groups.length === 0 ? (
{isFuture ? 'Aucune habitude prévue ce jour-là.' : 'Aucune habitude n’était suivie ce jour-là.'}
Coche ou décoche : tes chiffres se recalculent aussitôt.
}
)}
);
}
// ─── Calendrier de régularité (§8.5.2) ───────────────────────────────
// La grille suit la période : 7 grandes cases (semaine), mois entier à
// l'anatomie du Calendrier P&L, ou un mini-calendrier par mois (année, tout).
// Année ou tout avec un seul mois à montrer (compte récent, mois de janvier) :
// la grille du mois entier, avec ses fractions, plutôt qu'un mini-mois isolé.
// Elle occupe toute la largeur de sa zone ; les tailles viennent de la largeur
// MESURÉE de la carte, pas du seul mode « mobile ».
function StatsHabitCalendar({ state, rows, ctx, period, range, compact, theme, filterId, setFilterId, selDay, setSelDay, openJournal, anchorRef }) {
const [measureRef, cardW] = useStatsBodyWidth();
const setCardRef = React.useCallback((el) => { measureRef(el); if (anchorRef) anchorRef.current = el; }, [measureRef, anchorRef]);
const [allMonths, setAllMonths] = React.useState(false);
const today = ctx.today;
const curYm = today.slice(0, 7);
const first = habitFirstDay(rows);
// Mois à montrer en année / tout : du premier jour de suivi (ou de janvier) au mois en cours.
let spanMonths = null;
if (period !== 'week' && period !== 'month') {
const firstYm = first ? first.slice(0, 7) : curYm;
const startYm = period === 'year' && firstYm < curYm.slice(0, 4) + '-01' ? curYm.slice(0, 4) + '-01' : firstYm;
spanMonths = statsMonthSpan(startYm > curYm ? curYm : startYm, curYm);
}
const mode = period === 'week' ? 'week' : (period === 'month' || spanMonths.length === 1) ? 'month' : 'months';
const single = filterId ? rows.find((h) => h.id === filterId) || null : null;
const calRows = React.useMemo(() => (single ? [single] : rows), [single, rows]);
const tallies = React.useMemo(() => new Map(), [calRows, ctx]);
const tallyOf = (iso) => {
let t = tallies.get(iso);
if (!t) { t = habitDayTally(calRows, iso, ctx); tallies.set(iso, t); }
return t;
};
const padX = compact ? 14 : 22;
// Jours de la période déjà terminés : pour la légende (en nombre si le compte
// prévu est le même tous les jours comptés, en pourcentage sinon).
const legendPlanned = React.useMemo(() => {
if (single || !first) return null;
const from = range.fromISO && range.fromISO > first ? range.fromISO : first;
const to = habitShiftDay(today, -1);
let n = null;
for (let d = from, guard = 0; d <= to && guard < 4000; d = habitShiftDay(d, 1), guard++) {
const t = tallyOf(d);
if (t.state !== 'counted') continue;
if (n === null) n = t.planned;
else if (n !== t.planned) return null;
}
return n;
}, [single, first, range.fromISO, today, tallies]);
// ── Données de la grille ──
const monday = habitWeekStart(today);
let rangeLabel = '';
let visFrom = today, visTo = today;
let weekDays = null, monthWeeks = null, months = null, hiddenMonths = 0;
if (mode === 'week') {
weekDays = [0, 1, 2, 3, 4, 5, 6].map((k) => habitShiftDay(monday, k));
visFrom = weekDays[0]; visTo = weekDays[6];
rangeLabel = fmtWeekLabel(monday) + ' · ' + fmtWeekRange(monday);
} else if (mode === 'month') {
monthWeeks = statsMonthWeeks(curYm);
visFrom = monthWeeks[0].days[0]; visTo = monthWeeks[monthWeeks.length - 1].days[6];
rangeLabel = statsCap(fmtMonthYear(curYm));
} else {
const all = spanMonths;
hiddenMonths = !allMonths && all.length > 12 ? all.length - 12 : 0;
months = hiddenMonths ? all.slice(-12) : all;
visFrom = months[0] + '-01'; visTo = statsMonthLast(curYm);
const mLabel = (ym) => FR_MONTHS_SHORT[Number(ym.slice(5, 7)) - 1] + STATS_NB + ym.slice(0, 4);
rangeLabel = period === 'year' ? curYm.slice(0, 4)
: all[0] === curYm ? statsCap(fmtMonthYear(curYm))
: mLabel(all[0]) + STATS_NB + '–' + STATS_NB + mLabel(curYm);
}
// Détail du jour à droite : seulement quand la grille a une hauteur comparable.
// · jamais en semaine (une rangée de 7 cases à côté d'un panneau cinq fois
// plus haut laissait la carte à moitié vide) : les 7 cases prennent toute
// la largeur, le détail passe dessous ;
// · en mini-calendriers, tant qu'ils tiennent sur une rangée (3 mois au plus) ;
// · jamais au-delà de STATS_HABIT_SIDE_MAX habitudes (le panneau, une ligne
// par habitude, dépasserait la grille et étirerait la carte) ;
// · et seulement si la zone restante garde ses grandes cases.
// cardW est mesuré bord compris (2 px).
const innerW = Math.max(0, (cardW || (compact ? 340 : 900)) - 2 - padX * 2);
const detailCount = rows.reduce((n, h) => n + (!h.archived || h.archivedDay ? 1 : 0), 0);
const sideDetail = innerW - 320 >= STATS_HABIT_LARGE_ZONE && detailCount <= STATS_HABIT_SIDE_MAX
&& (mode === 'month' || (mode === 'months' && months.length <= 3));
const zoneW = innerW - (sideDetail ? 320 : 0);
// Jour sélectionné : aujourd'hui par défaut, et dès que la sélection sort de la grille.
const sel = selDay && selDay >= visFrom && selDay <= visTo ? selDay : today;
const cellProps = (iso) => ({ iso, t: tallyOf(iso), theme, selected: iso === sel, onSelect: setSelDay, single, ctx });
// ── Grilles ──
let grid;
if (mode === 'week') {
const large = zoneW >= STATS_HABIT_LARGE_ZONE;
const gap = large ? 8 : 4;
const dims = { cellW: (zoneW - gap * 6) / 7 };
grid = (
{monthWeeks.map((wk, wi) => {
// Part de la semaine située dans le mois (les cases estompées n'y entrent pas),
// comme la barre de la même semaine dans « Évolution de la régularité ».
const ws = withWeek ? habitRangeStats(calRows, wk.a, wk.b, ctx) : null;
return (
{single
? <>Chaque case est un jour : «{STATS_NB}{single.name}{STATS_NB}» faite, manquée ou {single.section === 'pretrade' ? 'sans trade ce jour' : 'pas prévue'}.
: mode === 'months'
? 'Chaque case est un jour, colorée selon la part d’habitudes faites. Clique sur un jour pour voir le détail.'
: 'Chaque case est un jour : le nombre d’habitudes faites sur le nombre prévu.'}
{select}
{sideDetail ? (
{grid}
{detail}
) : (
<>
{grid}
{detail}
)}
);
}
// ─── Histogramme de régularité (SVG fait main, échelle absolue 0–100 %) ──
// bars : [{ key, label, sub, subShort, rate (0–100 | null), title, current }]. Barres
// vertes, jamais de rouge ; rien de compté → pas de barre, « — ». `goal` :
// ligne pointillée, nommée par la carte hors du graphique. Une valeur qui
// tomberait sur cette ligne est écrite juste au-dessus : la ligne n'est jamais
// interrompue et ne se lit jamais comme « 75 % ». Barre `current` : hachurée,
// « en cours ». `tag` (facultatif, ex. l'année) : écrit sous la première barre
// LIBELLÉE de chaque groupe, pour qu'aucune année ne manque quand un libellé
// sur deux est sauté.
// Rien n'est décidé sur un seuil fixe : la largeur des textes est MESURÉE
// (statsTextWidth) et comparée à la place d'une barre.
// · Libellés : toutes les barres sont nommées dès que le libellé le plus large
// tient (avec `sub`, sinon avec sa forme courte `subShort`) ; à défaut un
// libellé sur deux, sur trois… — compté depuis la barre en cours (à défaut la
// dernière), qui reste donc toujours nommée.
// · Valeurs : au-dessus de chaque barre jusqu'à 12 barres, en plus petit si la
// place manque (9 px au moins) ; au-delà, ou si même 9 px ne tiennent pas,
// seules la plus haute, la plus basse et la barre en cours portent leur
// valeur (lisibles sans survol ; chaque barre garde son info-bulle).
const STATS_BAR_LABEL_GAP = 4; // blanc minimal entre deux libellés voisins
const STATS_BAR_VALUE_SIZE = 11; // taille normale d'une valeur
const STATS_BAR_VALUE_MIN = 9;
function StatsHabitBars({ bars, goal = null, height = 220, ariaLabel }) {
const [ref, w] = useStatsWidth(520);
useStatsFontEpoch(); // largeurs mesurées : à refaire quand la police arrive
const uid = typeof React.useId === 'function' ? React.useId() : 'hb';
const pid = 'hab-hatch-' + String(uid).replace(/[^a-zA-Z0-9_-]/g, '');
const n = bars.length;
const hasSub = bars.some((b) => b.sub || b.tag);
const hasCurrent = bars.some((b) => b.current);
const padL = 42, padR = 6, padT = 24;
const padB = 20 + (hasSub ? 13 : 0) + (hasCurrent ? 13 : 0);
const H = height;
const innerW = Math.max(40, w - padL - padR), innerH = H - padT - padB;
const slot = innerW / Math.max(1, n);
const bw = Math.max(4, Math.min(52, slot * 0.62));
const Y = (v) => padT + innerH - (Math.max(0, Math.min(100, v)) / 100) * innerH;
const rated = (b) => b.rate !== null && b.rate !== undefined;
// Valeurs : taille qui fait tenir la plus large dans la place d'une barre.
const valueW = statsMaxTextWidth(bars.filter(rated).map((b) => fmtPct(b.rate, 0)), STATS_BAR_VALUE_SIZE, 700, { num: true });
const valueFit = valueW > 0 ? Math.floor((STATS_BAR_VALUE_SIZE * (slot - 2) / valueW) * 2) / 2 : STATS_BAR_VALUE_SIZE;
const showValues = n <= 12 && valueFit >= STATS_BAR_VALUE_MIN;
const valueSize = showValues ? Math.min(STATS_BAR_VALUE_SIZE, valueFit) : STATS_BAR_VALUE_SIZE;
// Libellés (11 px semi-gras) et sous-libellés (10 px, chiffres tabulaires) :
// le plus petit pas qui laisse STATS_BAR_LABEL_GAP entre deux voisins, d'abord
// avec les sous-libellés complets, sinon avec leur forme courte.
const labelW = statsMaxTextWidth(bars.map((b) => b.label), 11, 600);
const tagW = statsMaxTextWidth(bars.map((b) => b.tag || ''), 10, 400, { num: true });
const subLongW = Math.max(tagW, statsMaxTextWidth(bars.map((b) => b.sub || ''), 10, 400, { num: true }));
const hasShort = bars.some((b) => b.subShort);
const subShortW = hasShort ? Math.max(tagW, statsMaxTextWidth(bars.map((b) => b.subShort || b.sub || ''), 10, 400, { num: true })) : subLongW;
let step = Math.max(1, n), shortSubs = hasShort;
for (let k = 1; k <= n; k++) {
const room = slot * k - STATS_BAR_LABEL_GAP;
if (Math.max(labelW, subLongW) <= room) { step = k; shortSubs = false; break; }
if (hasShort && Math.max(labelW, subShortW) <= room) { step = k; shortSubs = true; break; }
}
const halo = { paintOrder: 'stroke', stroke: 'var(--bg-card)', strokeWidth: 3, strokeLinejoin: 'round' };
const g = goal === null || goal === undefined ? null : Math.max(0, Math.min(100, Number(goal)));
const geom = (b, i) => {
const has = rated(b);
return { cx: padL + slot * i + slot / 2, has, bh: has ? Math.max(2, Y(0) - Y(b.rate)) : 0 };
};
// Ligne de base d'une valeur : 6 px au-dessus de la barre, ou 6 px au-dessus
// de la ligne d'objectif si le texte la chevaucherait.
const valueY = (bh) => {
const y = Y(0) - bh - 6;
return g !== null && Y(g) > y - 11 && Y(g) < y + 4 ? Y(g) - 6 : y;
};
// Le pas des libellés est ancré sur la barre en cours (« Ce mois » : elle n'est
// pas forcément la dernière), à défaut sur la dernière : la période en cours
// est donc toujours nommée, même quand un libellé sur deux est sauté.
const curIdx = bars.findIndex((b) => b.current);
const anchor = curIdx >= 0 ? curIdx : n - 1;
const labelled = bars.map((b, i) => Math.abs(anchor - i) % step === 0);
// Première barre : si son libellé, plus large qu'elle, déborderait à gauche sur
// l'échelle (« 0 % »), elle n'est pas nommée — l'année éventuelle passe alors
// sous la barre nommée suivante. La barre en cours, elle, garde toujours son nom.
if (n > 1 && labelled[0] && !bars[0].current) {
const b0 = bars[0];
const firstW = Math.max(statsTextWidth(b0.label, 11, 600),
statsTextWidth((shortSubs && b0.subShort) || b0.sub || b0.tag || '', 10, 400, { num: true }));
if (firstW > slot + 8) labelled[0] = false;
}
let lastTag = null;
const subs = bars.map((b, i) => {
if (!labelled[i]) return '';
if (b.sub) return (shortSubs && b.subShort) || b.sub;
if (b.tag && b.tag !== lastTag) { lastTag = b.tag; return b.tag; }
return '';
});
const valued = new Set();
if (!showValues) {
let hi = -1, lo = -1;
bars.forEach((b, i) => {
if (!rated(b)) return;
if (hi < 0 || b.rate > bars[hi].rate) hi = i;
if (lo < 0 || b.rate < bars[lo].rate) lo = i;
if (b.current) valued.add(i);
});
if (hi >= 0) valued.add(hi);
if (lo >= 0) valued.add(lo);
}
return (
);
}
// Carte titrée des blocs Habitudes (même gabarit que StatsPanel, avec l'attribut de test).
function StatsHabitCard({ card, title, sub, right, children, compact = false }) {
return (
{title}
{right}
{sub &&
{sub}
}
{children}
);
}
// ─── Évolution de la régularité (§8.5.4) ─────────────────────────────
function StatsHabitEvolution({ rows, ctx, period, goal, average, compact }) {
const today = ctx.today;
const curYm = today.slice(0, 7);
const bars = React.useMemo(() => {
const out = [];
const rateTitle = (s) => (s.rate === null ? 'rien de compté' : fmtPct(s.rate, 0) + ', ' + statsDonePlanned(s.done, s.planned));
if (period === 'month') {
for (const wk of statsMonthWeeks(curYm)) {
const m = wk.monday, a = wk.a, b = wk.b;
const s = habitRangeStats(rows, a, b, ctx);
const da = Number(a.slice(8, 10)), db = Number(b.slice(8, 10));
out.push({
key: m, label: fmtWeekLabel(m, true), rate: s.rate, current: today >= a && today <= b,
// Plage de la semaine ; forme courte (« 3–9 ») quand la plage complète ne tient pas sous la barre.
sub: fmtDayRange(a, b), subShort: da === db ? String(da) : da + '–' + db,
title: fmtWeekLabel(m) + ' (' + fmtDayRange(a, b) + ') : ' + rateTitle(s),
});
}
return out;
}
const first = habitFirstDay(rows);
const firstYm = first ? first.slice(0, 7) : curYm;
const yearStart = curYm.slice(0, 4) + '-01';
let list = statsMonthSpan(period === 'year' && firstYm < yearStart ? yearStart : (firstYm > curYm ? curYm : firstYm), curYm);
if (list.length > 24) list = list.slice(-24);
const multiYear = list[0].slice(0, 4) !== curYm.slice(0, 4);
list.forEach((ym, i) => {
const s = habitRangeStats(rows, ym + '-01', statsMonthLast(ym), ctx);
out.push({
key: ym, label: FR_MONTHS_SHORT[Number(ym.slice(5, 7)) - 1], rate: s.rate, current: ym === curYm,
sub: '', tag: multiYear ? ym.slice(0, 4) : '',
title: statsCap(fmtMonthYear(ym)) + ' : ' + rateTitle(s),
});
});
return out;
}, [rows, ctx, period, curYm, today]);
return (
{period === 'month' ? 'Une barre par semaine du mois.' : 'Une barre par mois.'}
Objectif {fmtPct(goal, 0)}
}
right={Moyenne {average === null ? '—' : fmtPct(average, 1)}}>
{/* Une seule barre par mois ne montre aucune évolution : une phrase, pas un graphique vide. */}
{period !== 'month' && bars.length < 2 ? (
Un seul mois à afficher pour l’instant{STATS_NB}: l’évolution apparaîtra à partir du deuxième mois. En attendant, la période «{STATS_NB}Ce mois{STATS_NB}» la montre semaine par semaine.
) : (
)}
);
}
// ─── Par jour de la semaine (§8.5.5) ─────────────────────────────────
function StatsHabitWeekdays({ rows, ctx, range, countedDays, compact }) {
const stats = React.useMemo(() => habitWeekdayStats(rows, range.fromISO, range.toISO, ctx), [rows, ctx, range.fromISO, range.toISO]);
// Sept barres, toutes nommées (§8.5.5) ; « 3 jours » sous la barre, « 3 j » si la place manque.
const bars = stats.map((s, i) => ({
key: 'wd' + i, label: FR_WEEKDAYS_SHORT[i], rate: s.rate, current: false,
sub: s.days > 0 ? statsDaysText(s.days) : '', subShort: s.days > 0 ? statsDaysText(s.days, true) : '',
title: statsCap(FR_WEEKDAYS_LONG[i]) + ' : ' + (s.rate === null ? 'rien de compté'
: fmtPct(s.rate, 0) + ', ' + statsDonePlanned(s.done, s.planned) + ', sur ' + statsDaysText(s.days)),
}));
// Phrase de synthèse : seulement avec assez de recul (14 jours terminés) et un vrai écart (10 points).
let best = -1, worst = -1;
stats.forEach((s, i) => {
if (s.rate === null) return;
if (best < 0 || s.rate > stats[best].rate) best = i;
if (worst < 0 || s.rate < stats[worst].rate) worst = i;
});
const summary = countedDays >= 14 && best >= 0 && worst >= 0 && stats[best].rate - stats[worst].rate >= 10;
return (
{summary && (
Ton jour le plus régulier : {FR_WEEKDAYS_LONG[best]} ({fmtPct(stats[best].rate, 0)}).
{' '}Le moins régulier : {FR_WEEKDAYS_LONG[worst]} ({fmtPct(stats[worst].rate, 0)}).
{pre
? (a.days > 1 ? 'Tes vérifications étaient complètes les ' + fmtNum(a.days, 0) + ' jours tradés.' : 'Tes vérifications étaient complètes le seul jour tradé.')
: (a.days > 1 ? 'Tu as atteint ton objectif les ' + fmtNum(a.days, 0) + ' jours tradés.' : 'Tu as atteint ton objectif le seul jour tradé.')}
)}
{compared > 0 && a.days === 0 && (
{pre ? 'Aucun jour tradé avec toutes tes vérifications sur la période.' : 'Aucun jour tradé avec ton objectif atteint sur la période.'}
)}
{a.days > 0 && b.days > 0 && !enough && (
Peu de jours pour comparer ({fmtNum(a.days, 0)} et {fmtNum(b.days, 0)}){STATS_NB}: à confirmer avec le temps.
)}
{enough && (
Sur {fmtNum(compared, 0)} jours tradés, ton P&L moyen est de {fmtMoney(a.pnlPerDay, true)}
{' '}{pre ? 'les jours où tout est vérifié' : 'les jours où ton objectif est atteint'} ({statsDaysText(a.days)}), contre{' '}
{fmtMoney(b.pnlPerDay, true)}
{' '}les autres jours ({statsDaysText(b.days)}).
)}
{review.length > 0 && (
Jours à revoir
{pre ? 'Les derniers jours tradés sans toutes tes vérifications.' : 'Les derniers jours tradés sous ton objectif.'}
);
}
// Squelette : 4 indicateurs et la grille, pendant le chargement des habitudes
// ou de leur historique (des chiffres partiels seraient faux).
function StatsHabitsSkeleton({ compact = false }) {
const bar = (w, h) => ;
return (
{[0, 1, 2, 3].map((i) => (
{bar('55%', 10)}{bar('70%', 26)}{bar('85%', 10)}
))}
{bar('34%', 14)}{bar('62%', 10)}
{Array.from({ length: 21 }, (_, i) => )}
);
}
function StatsHabits({ state, range, period, nav, openJournal, compact = false }) {
const st = state || {};
const rows = Array.isArray(st.habitRows) ? st.habitRows : STATS_NO_ROWS;
const ctx = st.habitCtx || null;
const goalNum = Number(st.habitGoal);
const goal = Number.isFinite(goalNum) && goalNum > 0 ? goalNum : HABIT_GOAL_DEFAULT;
const { theme } = useTheme();
const [bodyRef, bodyW] = useStatsBodyWidth();
const [filterId, setFilterId] = React.useState('');
const [selDay, setSelDay] = React.useState(null);
const calRef = React.useRef(null);
const fromISO = range.fromISO, toISO = range.toISO;
// Une habitude filtrée qui disparaît (archivée sans date, supprimée) : retour à « Toutes ».
React.useEffect(() => {
if (filterId && !rows.some((h) => h.id === filterId && (!h.archived || h.archivedDay))) setFilterId('');
}, [filterId, rows]);
const summary = React.useMemo(() => {
if (!ctx) return null;
const cur = habitRangeStats(rows, fromISO, toISO, ctx);
const evo = habitEvolution(rows, period, fromISO, ctx);
let best = null;
for (const h of rows) {
if (h.archived) continue;
if (h.section === 'pretrade' && !ctx.tradedDays) continue; // série inconnue sans les trades
const s = habitStreaks(h, ctx);
if (!best || (s.current || 0) > best.current) best = { h, current: s.current || 0, best: s.best || 0 };
}
return { cur, evo, best };
}, [rows, ctx, period, fromISO, toISO]);
const pickHabit = React.useCallback((id) => {
setFilterId((cur) => (cur === id ? '' : id));
const el = calRef.current;
if (el && typeof el.scrollIntoView === 'function') el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, []);
const gapY = compact ? 12 : 16;
const errorBanner = st.habitsError
?
: null;
// Jours tradés : tant que les trades se chargent, les vérifications avant
// trade ne sont pas comptées — des chiffres partiels seraient faux, on attend.
// S'ils n'ont jamais pu être chargés, on affiche le reste et on le dit.
const tradesState = st.habitTradesState || 'ready';
const ready = !!ctx && !st.habitsLoading && !!st.habitHistoryReady && tradesState !== 'loading';
// Erreur ≠ compte vide : le bandeau seul tant que rien de fiable n'est chargé.
if (errorBanner && (!ready || rows.length === 0)) return
{errorBanner}
;
if (!ready) return ;
const active = rows.filter((h) => !h.archived);
const archivedDated = rows.filter((h) => h.archived && h.archivedDay);
if (active.length === 0 && archivedDated.length === 0) {
return (
nav('routines') } : null}/>
);
}
const today = ctx.today;
const { cur, evo, best } = summary;
const yesterday = habitShiftDay(today, -1);
const first = habitFirstDay(rows);
const periodStartsToday = !!fromISO && fromISO > yesterday;
const trackingStartsToday = !periodStartsToday && (!first || first > yesterday);
const narrowKpi = bodyW > 0 ? bodyW < STATS_FOUR_COLS_MIN : compact;
// Carte étroite (téléphone, tablette en 4 colonnes) : valeur plus petite, jamais tronquée.
const kpiCols = narrowKpi ? 2 : 4;
const smallKpi = bodyW > 0 ? (bodyW - (kpiCols - 1) * (compact ? 10 : 14)) / kpiCols < 230 : compact;
const narrow = bodyW > 0 ? bodyW < 700 : compact;
const twoCols = bodyW >= 900;
const gap = compact ? 10 : 14;
const goalReached = cur.rate !== null && cur.rate >= goal;
const delta = evo ? evo.delta : null;
// « — » : soit la période n'a encore aucun jour terminé, soit rien n'était compté avant.
// « Tout » : l'évolution ne porte plus sur la Régularité affichée à côté (tout
// l'historique) mais sur les 30 derniers jours : les deux taux sont écrits.
const pct0 = (v) => fmtPct(v, 0);
const evoSub = !evo ? 'aucun jour terminé à comparer'
: period === 'all' ? (
evo.cur.rate === null ? 'rien de compté sur les 30 derniers jours'
: evo.prev.rate === null ? '30 derniers jours' + STATS_NB + ': ' + pct0(evo.cur.rate) + ' · rien de compté les 30 jours d’avant'
: '30 derniers jours' + STATS_NB + ': ' + pct0(evo.cur.rate) + ' · 30 jours d’avant' + STATS_NB + ': ' + pct0(evo.prev.rate))
: delta !== null ? 'par rapport ' + evo.range.label
: evo.cur.rate === null ? 'rien de compté sur la période'
: period === 'year' ? 'pas de suivi à la même période l’an dernier'
: 'rien de compté ' + evo.range.label;
const hasChecks = rows.some((h) => h.section === 'pretrade' && (!h.archived || h.archivedDay));
const partial = tradesState === 'error' && hasChecks;
return (
{errorBanner}
{tradesState === 'error' && (
)}
{/* Rechargement en échec alors que les trades étaient déjà chargés : les
chiffres restent (charte §7), le bandeau le dit en tête, comme sur l'onglet Trading. */}
{tradesState !== 'error' && st.tradesError && (
)}
Objectif atteint : null}
sub={(cur.planned > 0 ? statsDonePlanned(cur.done, cur.planned) + ' · hors aujourd’hui' : 'rien de compté sur la période') + (partial ? ' · hors vérifications avant trade' : '')}/>
0 ? 'var(--green)' : 'var(--red)'}
sub={evoSub}/>
0 ? statsOutOf(cur.perfectDays, cur.countedDays) : '—'}
sub="jours où tout ce qui était prévu est fait"/>
0 ? best.h.name + ' · record ' + statsDaysText(best.best) : 'aucune série en cours'}/>
{(periodStartsToday || trackingStartsToday) && (
{periodStartsToday ? 'La période commence aujourd’hui' : 'Ton suivi commence aujourd’hui'}{STATS_NB}: tes chiffres apparaîtront demain, une fois la journée terminée.
)}
{period !== 'week' && (
)}
);
}
// ═════════════════════════════════════════════════════════════════════
// BARRE DE CONTRÔLE (sous-onglets + période) — partagée desktop/mobile
// ═════════════════════════════════════════════════════════════════════
function StatsControls({ view, setView, period, setPeriod, rangeLabel, mobile = false }) {
const viewOptions = [
{ id: 'trading', label: 'Trading', ico: {Ico.trades} },
{ id: 'habits', label: 'Habitudes', ico: {Ico.book} },
];
// Plage exacte de la période, sous le sélecteur (charte §4).
const range = {rangeLabel};
if (mobile) {
return (
{/* Pleine largeur sur téléphone, bornée sur tablette. */}
{range}
);
}
return (
{range}
);
}
// État de vue/période partagé (gère initialView + prop period optionnelle).
// La plage suit « aujourd'hui » dans le fuseau du profil (minuit, changement de fuseau).
const STATS_PERIOD_IDS = ['week', 'month', 'year', 'all'];
function useStatsState(initialView, initialPeriod) {
const [view, setView] = React.useState(initialView === 'habits' ? 'habits' : 'trading');
const [period, setPeriod] = React.useState(
STATS_PERIOD_IDS.includes(initialPeriod) ? initialPeriod : 'month'
);
React.useEffect(() => {
if (initialView === 'habits' || initialView === 'trading') setView(initialView);
}, [initialView]);
React.useEffect(() => {
if (STATS_PERIOD_IDS.includes(initialPeriod)) setPeriod(initialPeriod);
}, [initialPeriod]);
const today = todayISO();
const range = React.useMemo(() => statsPeriodRange(period, today), [period, today]);
return { view, setView, period, setPeriod, range };
}
// Action « Ajouter un trade » de l'état vide : fenêtre « Ajouter des trades »
// ouverte sur l'onglet Saisie manuelle (charte §5).
function statsAddTradeAction(openImport) {
return typeof openImport === 'function' ? () => openImport(null, 'manual') : null;
}
// Contenu commun desktop / mobile.
function StatsBody({ state, initialView, periodProp, openImport, nav, openJournal, mobile = false }) {
const { view, setView, period, setPeriod, range } = useStatsState(initialView, periodProp);
const trades = (state && Array.isArray(state.trades)) ? state.trades : [];
const firstDay = useStatsFirstDay(trades);
const loading = !!(state && state.tradesLoading);
const error = !!(state && state.tradesError);
// Premier jour de suivi des habitudes (période « Tout » de la vue Habitudes).
const habitRows = state && state.habitRows;
const habitFirst = React.useMemo(
() => (typeof habitFirstDay === 'function' && Array.isArray(habitRows) ? habitFirstDay(habitRows) : null),
[habitRows]
);
return (
<>
{/* Panneau de l'onglet choisi (Trading ou Habitudes), relié à son onglet :
même forme que la fenêtre du journal du jour (idPrefix + « -panel- »).
Le panneau de l'autre onglet existe aussi, vide et masqué
(TabPanelStubs, core.jsx) : son onglet le désigne par aria-controls. */}