// Tempo — Bilan hebdomadaire (design system Tempo)
// Une carte par semaine ISO (lundi → dimanche), de la plus récente à la plus ancienne.
// Pour chaque semaine : P&L net, nombre de trades, gagnants, perdants, taux de
// réussite, profit factor, moyenne par jour et 7 mini-barres jour (vert = gain,
// rouge = perte, gris = pas de trade).
// Réutilise les globaux : computeStats, localDayKey (trades-api.jsx), fmtMoney
// (app.jsx) et les formateurs de format-prefs.jsx. Tous les jours sont calculés
// dans le fuseau du profil, sans jamais passer par l'heure du navigateur.
// Titre de la page : table NAV_LABELS (core.jsx), seule source des noms d'écrans.
// Lu au rendu (et non au chargement du fichier) ; repli sur le libellé de la charte.
function weeklyTitle() {
const n = (typeof NAV_LABELS !== 'undefined' && NAV_LABELS && NAV_LABELS.weekly) || null;
return (n && n.titre) || 'Bilan hebdomadaire';
}
// ── Jours civils 'YYYY-MM-DD' (aucune projection dans le fuseau du navigateur) ──
// Jour civil d'un trade dans le fuseau du profil — même regroupement que le
// calendrier (groupTradesByDay) et le Journal quotidien.
function weeklyDayOf(t, tz) {
if (!t || !t.executed_at) return null;
const day = (typeof localDayKey === 'function')
? localDayKey(t.executed_at, tz)
: localDayInTz(t.executed_at, tz);
return /^\d{4}-\d{2}-\d{2}$/.test(day || '') ? day : null;
}
// Rang du jour dans la semaine : 0 = lundi … 6 = dimanche.
function weeklyDowOf(day) {
return (new Date(day + 'T12:00:00Z').getUTCDay() + 6) % 7;
}
// Jour civil décalé de n jours (calcul à midi UTC, sans effet d'heure d'été).
function weeklyAddDays(day, n) {
const dt = new Date(day + 'T12:00:00Z');
dt.setUTCDate(dt.getUTCDate() + n);
return dt.toISOString().slice(0, 10);
}
// « Mer. 16 sept. » : même format que l'en-tête du journal (« Lun. 21 sept. »).
function weeklyDayLabel(day) {
const wd = fmtWeekdayShort(day);
return wd.charAt(0).toUpperCase() + wd.slice(1) + ' ' + fmtDayShort(day);
}
// Regroupe les trades par semaine ISO. Retourne un tableau trié du plus récent au plus ancien.
// Chaque élément : { key (lundi 'YYYY-MM-DD'), weekLabel, rangeLabel, trades, stats,
// days: [7 × { iso, pnl, count }], tradedDays, lastTradedISO, avgPerDay }
function weeklyBuildWeeks(trades, tz) {
const buckets = {};
for (const t of (trades || [])) {
const day = weeklyDayOf(t, tz);
if (!day) continue;
const key = weeklyAddDays(day, -weeklyDowOf(day));
if (!buckets[key]) buckets[key] = { key, items: [] };
buckets[key].items.push({ t, day });
}
const weeks = Object.values(buckets).map(b => {
// 7 cases jour (lundi → dimanche), chacune avec son jour civil.
const days = [];
for (let i = 0; i < 7; i++) days.push({ iso: weeklyAddDays(b.key, i), pnl: 0, count: 0 });
for (const item of b.items) {
const slot = days[weeklyDowOf(item.day)];
if (slot) { slot.pnl += Number(item.t.pnl) || 0; slot.count += 1; }
}
const rawTrades = b.items.map(x => x.t);
const traded = days.filter(d => d.count > 0);
const stats = computeStats(rawTrades);
return {
key: b.key,
weekLabel: fmtWeekLabel(b.key),
rangeLabel: fmtWeekRange(b.key),
trades: rawTrades,
stats,
days,
tradedDays: traded.length,
// Une semaine n'existe que si elle a au moins un trade.
lastTradedISO: (traded[traded.length - 1] || days[0]).iso,
avgPerDay: traded.length > 0 ? stats.netPnl / traded.length : 0,
};
});
weeks.sort((a, b) => (a.key < b.key ? 1 : a.key > b.key ? -1 : 0));
return weeks;
}
// Signe d'un montant TEL QU'IL S'AFFICHE : −1, 0 ou 1. Un montant qui s'écrit
// « 0,00 € » une fois arrondi aux décimales de la devise vaut 0, même si la
// somme flottante laisse un résidu (10,10 + 20,20 − 30,30 ≠ 0 en machine).
// Même règle que les pages Stratégies et Statistiques (charte §2).
function weeklySign(v) {
return moneySign(v);
}
// Couleur d'un montant signé : vert pour un gain, rouge pour une perte, neutre pour zéro.
function weeklyTone(v) {
const sign = weeklySign(v);
return sign > 0 ? 'var(--green)' : sign < 0 ? 'var(--red)' : 'var(--fg)';
}
// « 1 200 trades » : nombre au format français et accord du pluriel.
function weeklyTradesLabel(count) {
return fmtCount(count, 'trade');
}
// ── Mini-barres jour (7) ──────────────────────────────────────────────
// onDayClick(iso) : un jour avec trades devient un bouton qui ouvre son journal.
function WeeklyDayBars({ days, height = 34, compact = false, onDayClick }) {
// Échelle relative à la plus grosse amplitude de la semaine, plancher pour rester lisible.
const maxAbs = Math.max(1, ...days.map(d => Math.abs(d.pnl)));
return (
);
}
// ── Une stat de la grille ─────────────────────────────────────────────
// Ne crée pas de boîte (display: contents) : son libellé, sa valeur et son
// sous-texte se placent chacun dans une rangée de la grille du groupe
// (WeeklyStatsGrid). Les valeurs d'un même groupe restent ainsi sur une seule
// ligne, même quand un libellé voisin passe sur deux lignes (320 px).
// L'ordre libellé → valeur → sous-texte est aussi l'ordre de lecture.
// wide : colonne du montant ; le libellé ne doit pas fixer la largeur minimale
// de la colonne (c'est le montant qui la fixe), il se replie donc dedans. Le
// montant réserve la largeur du plus long montant de la liste
// (--weekly-avg-w, voir useWeeklyAvgWidth) : mêmes colonnes dans toutes les cartes.
function WeeklyStat({ label, value, tone, sub, wide = false }) {
return (
{label}
{wide ? {value} : value}
{sub
?
{sub}
: }
);
}
// Largeur commune de la colonne « Moyenne par jour ». Chaque carte a sa propre
// grille : sans cela, la colonne suivrait le montant de SA semaine et les
// colonnes se décaleraient de quelques pixels d'une carte à l'autre dès qu'un
// montant dépasse un tiers de la largeur. On mesure donc le plus long montant
// de la liste et on le publie dans --weekly-avg-w sur le conteneur. Mesuré
// après chaque rendu (les montants changent avec les trades et la devise) et
// quand les polices ont fini de charger. Sans la variable, chaque colonne
// garde au moins la largeur de son propre montant : rien n'est jamais coupé.
function useWeeklyAvgWidth() {
const ref = React.useRef(null);
React.useLayoutEffect(() => {
const root = ref.current;
if (!root) return undefined;
let alive = true;
const measure = () => {
if (!alive) return;
let max = 0;
root.querySelectorAll('[data-weekly-avg]').forEach(el => { if (el.offsetWidth > max) max = el.offsetWidth; });
// offsetWidth est arrondi à l'entier : + 1 px pour ne jamais être en dessous.
const next = max > 0 ? (max + 1) + 'px' : '';
if (root.style.getPropertyValue('--weekly-avg-w') !== next) {
if (next) root.style.setProperty('--weekly-avg-w', next); else root.style.removeProperty('--weekly-avg-w');
}
};
measure();
if (typeof document !== 'undefined' && document.fonts && document.fonts.ready && typeof document.fonts.ready.then === 'function') {
document.fonts.ready.then(measure, () => {});
}
return () => { alive = false; };
});
return ref;
}
// ── Grille de stats d'une semaine (mêmes libellés et formats partout) ──
// Deux groupes de trois : côte à côte quand la place le permet (6 colonnes),
// sinon l'un sous l'autre (3 × 2). Chaque groupe est une grille de 3 colonnes
// et 3 rangées (libellés, valeurs, sous-textes), remplie colonne par colonne.
// Aucun montant n'est jamais coupé : la colonne « Moyenne par jour » prend au
// moins la largeur du plus long montant de la liste (les trois colonnes restent
// égales tant qu'il tient dans un tiers).
// compact (mobile) : la moyenne par jour passe au format compact au-delà de 10 000.
function WeeklyStatsGrid({ week, compact = false }) {
const s = week.stats;
const nuls = s.count - s.wins - s.losses;
const group = {
flex: compact ? '1 1 100%' : '1 1 330px', minWidth: 0,
display: 'grid', gridTemplateRows: 'auto auto auto', gridAutoFlow: 'column',
gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', columnGap: compact ? 10 : 18, rowGap: 0,
};
const moneyGroup = { ...group, gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr) minmax(max-content, 1fr)' };
const avg = compact ? fmtMoneyCompact(week.avgPerDay, true) : fmtMoney(week.avgPerDay, true);
return (
);
}
// ── Bouton « Journal du 25 sept. » : ouvre le dernier jour tradé de la semaine ──
function WeeklyJournalButton({ week, openJournal, style }) {
if (!openJournal) return null;
const day = fmtDayShort(week.lastTradedISO);
return (
);
}
// ── Carte semaine (desktop) ───────────────────────────────────────────
function WeeklyCard({ week, openJournal }) {
const s = week.stats;
return (
{/* Gauche : semaine + plage + mini-barres */}
{week.weekLabel}{week.rangeLabel}
openJournal(iso)) : undefined} />
{/* Droite : P&L + bouton Journal */}
{fmtMoney(s.netPnl, true)}
P&L de la semaine
{/* Grille de stats */}
);
}
// ── État vide : une phrase et une action ──────────────────────────────
function WeeklyEmpty({ compact = false, openImport }) {
return (
);
}
// ── Chargement : squelette, uniquement tant qu'aucune donnée n'est chargée ──
function WeeklySkeleton({ compact = false }) {
const bar = (w, h) => ;
return (