{options.map(o => {
const on = o.id === value;
return (
);
})}
);
}
// KPI « héros » : grande carte avec valeur animée optionnelle.
function StatsKpi({ label, value, animatedMoney, sub, tone, accent, big = false }) {
const color = tone === 'pos' ? 'var(--green)' : tone === 'neg' ? 'var(--red)' : (accent || 'var(--fg)');
return (
{dayLabels.map((d, i) => (
{d}
))}
{weeks.map((wk, wi) => (
{wk.map((c, di) => (
1 ? 's' : ''}` : ''}
style={{
width: cell, height: cell, borderRadius: 3,
background: c ? colorFor(c.ratio) : 'transparent',
border: c ? '1px solid var(--line)' : '1px solid transparent',
}} />
))}
))}
Moins
{['var(--bg-elev)', 'var(--green-soft)', 'var(--green)', 'var(--green-text)'].map((c, i) => (
))}
Plus
);
}
// ═════════════════════════════════════════════════════════════════════
// TRADING
// ═════════════════════════════════════════════════════════════════════
function statsTradesInRange(trades, range) {
if (!Array.isArray(trades)) return [];
if (!range.fromISO) return trades.slice();
const fromMs = statsDateFromISO(range.fromISO).getTime();
const toMs = statsDateFromISO(range.toISO).getTime() + 24 * 3600 * 1000 - 1;
return trades.filter(t => {
const ts = new Date(t.executed_at).getTime();
return ts >= fromMs && ts <= toMs;
});
}
function StatsTrading({ trades, range, period, compact = false }) {
const list = React.useMemo(() => statsTradesInRange(trades, range), [trades, range]);
const stats = React.useMemo(() => computeStats(list), [list]);
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, extrêmes).
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;
let largestWin = 0, largestLoss = 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; }
if (p > largestWin) largestWin = p;
if (p < largestLoss) largestLoss = p;
}
return { cumulative: c, cumDates: d, derived: { maxDD, ddPeakIdx, ddTroughIdx, bestWin, bestLoss, largestWin, largestLoss } };
}, [sortedAsc]);
// Distribution des R-multiples — seulement si des R sont renseignés.
const rDist = React.useMemo(() => {
const RED = 'var(--red)', GREEN = 'var(--green)';
const buckets = [
{ label: '≤ −2R', min: -Infinity, max: -2, value: 0, color: RED },
{ label: '−2…−1', min: -2, max: -1, value: 0, color: RED },
{ label: '−1…0', min: -1, max: 0, value: 0, color: RED },
{ label: '0…1', min: 0, max: 1, value: 0, color: GREEN },
{ label: '1…2', min: 1, max: 2, value: 0, color: GREEN },
{ label: '≥ 2R', min: 2, max: Infinity, 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++;
for (const b of buckets) { if (rv >= b.min && (rv < b.max || b.max === Infinity)) { b.value++; break; } }
}
return rTrades > 0 ? { buckets, rTrades } : null;
}, [list]);
// Performance par setup (P&L net), top 6 par |valeur|, + win rate.
const bySetup = React.useMemo(() => {
const m = {};
for (const t of list) {
const key = (t.setup && String(t.setup).trim()) || 'Sans setup';
if (!m[key]) m[key] = { label: key, 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 {
hasSetups: arr.some(s => s.label !== 'Sans setup'),
rows: arr.sort((a, b) => Math.abs(b.value) - Math.abs(a.value)).slice(0, 6).map(s => ({
label: s.label, value: s.value,
sub: `${s.count}T · ${statsPct(s.count ? (s.wins / s.count) * 100 : 0, 0)}`,
})),
};
}, [list]);
// Performance par jour de la semaine (P&L net).
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 d = statsDateFromISO(statsDayKey(t.executed_at));
const wd = statsWeekday(d);
sums[wd] += Number(t.pnl) || 0; counts[wd]++;
}
const any = counts.some(c => c > 0);
return any ? STATS_WD_LABELS.map((lab, i) => ({ label: lab, value: sums[i], count: counts[i] })) : null;
}, [list]);
// P&L par jour (pour calendrier + meilleur/pire jour).
const dayMap = React.useMemo(() => {
const m = {};
for (const t of list) {
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;
}, [list]);
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) {
if (!best || v.pnl > best.pnl) best = { day, pnl: v.pnl };
if (!worst || v.pnl < worst.pnl) worst = { day, pnl: v.pnl };
}
return { best, worst };
}, [dayMap]);
// Mois affiché dans le calendrier P&L (navigable).
const [calMonth, setCalMonth] = React.useState(() => {
const t = statsDateFromISO(typeof todayISO === 'function' ? todayISO() : statsISO(new Date()));
return new Date(t.getFullYear(), t.getMonth(), 1);
});
const todayMonth = React.useMemo(() => {
const t = statsDateFromISO(typeof todayISO === 'function' ? todayISO() : statsISO(new Date()));
return new Date(t.getFullYear(), t.getMonth(), 1);
}, []);
const minMonth = React.useMemo(() => {
const keys = Object.keys(dayMap).sort();
if (!keys.length) return todayMonth;
const d = statsDateFromISO(keys[0]);
return new Date(d.getFullYear(), d.getMonth(), 1);
}, [dayMap, todayMonth]);
const canPrev = calMonth > minMonth;
const canNext = calMonth < todayMonth;
if (list.length === 0) {
return (
{Ico.trades}}
title="Aucun trade sur cette période"
sub="Change de période ou importe tes trades pour voir ton analyse de performance." />
);
}
const pf = stats.profitFactor;
const pfLabel = stats.count === 0 ? '—' : !Number.isFinite(pf) ? '∞' : statsNum(pf, 2);
const expectancy = stats.count ? stats.netPnl / stats.count : 0;
const ddRange = derived.maxDD > 0 ? { peak: derived.ddPeakIdx, trough: derived.ddTroughIdx } : null;
const kpiCols = compact ? 2 : 4;
const gap = compact ? 10 : 14;
return (
{/* KPI principaux — les 4 chiffres qui pilotent une décision */}
= 0 ? 'pos' : 'neg'}
sub={`${stats.count} trade${stats.count > 1 ? 's' : ''}`} />
0 ? `gain/perte ${statsNum(stats.avgWin / stats.avgLoss, 2)}×` : 'aucune perte'} />
= 0 ? 'pos' : 'neg'}
sub="P&L moyen par position" />
{/* Bandeau secondaire : R moyen, gain/perte moyens, nb trades */}
0 ? 'pos' : stats.avgR < 0 ? 'neg' : undefined },
{ label: 'Gain moyen', value: statsMoney(stats.avgWin, true), tone: 'pos' },
{ label: 'Perte moyenne', value: stats.avgLoss > 0 ? statsMoney(-stats.avgLoss, true) : statsMoney(0), tone: stats.avgLoss > 0 ? 'neg' : undefined },
{ label: 'Drawdown max', value: derived.maxDD > 0 ? statsMoney(-derived.maxDD, true) : statsMoney(0), tone: derived.maxDD > 0 ? 'neg' : undefined },
]} />
{/* Courbe d'équité — pièce maîtresse */}
1 ? 's' : ''}`}>
{/* Chiffres-clés discrets : meilleur/pire jour + extrêmes + séries */}
{bestWorst && (
1 ? ' victoires' : ' victoire'), accent: 'var(--green)', sub: 'd\'affilée' },
{ label: 'Série pertes', value: derived.bestLoss + (derived.bestLoss > 1 ? ' pertes' : ' perte'), accent: 'var(--red)', sub: 'd\'affilée' },
]} />
)}
{/* Calendrier P&L mensuel — affiché si pas en mode ultra-compact */}
canPrev && setCalMonth(m => new Date(m.getFullYear(), m.getMonth() - 1, 1))}
onNext={() => canNext && setCalMonth(m => new Date(m.getFullYear(), m.getMonth() + 1, 1))}
canPrev={canPrev} canNext={canNext}
/>
{/* Deux colonnes : distribution R + perf par jour de semaine (ou setup) */}
1 ? 's' : ''} avec R` : null}>
{rDist
? ({ label: b.label, value: b.value, color: b.value > 0 ? b.color : 'var(--line-2)' }))}
height={compact ? 160 : 186} valueFmt={v => String(v)} />
: }
{byWeekday
? ({ label: d.label, value: d.value }))} height={compact ? 160 : 186} />
: }
{/* Performance par setup */}
{bySetup.hasSetups
?
: }
);
}
// ═════════════════════════════════════════════════════════════════════
// HABITUDES
// ═════════════════════════════════════════════════════════════════════
function useHabitStats(range) {
const [data, setData] = React.useState({ loading: true, error: null, habits: [], completions: [] });
React.useEffect(() => {
let live = true;
(async () => {
if (!window.sb) { setData({ loading: false, error: 'offline', habits: [], completions: [] }); return; }
setData(d => ({ ...d, loading: true, error: null }));
try {
let cq = window.sb.from('habit_completions').select('habit_id, date');
if (range.fromISO) cq = cq.gte('date', range.fromISO);
cq = cq.lte('date', range.toISO);
const [habRes, compRes] = await Promise.all([
window.sb.from('habits').select('id, name, section, position, archived').eq('archived', false),
cq,
]);
if (!live) return;
if (habRes.error || compRes.error) { setData({ loading: false, error: 'load', habits: [], completions: [] }); return; }
setData({ loading: false, error: null, habits: habRes.data || [], completions: compRes.data || [] });
} catch (e) {
if (live) setData({ loading: false, error: 'load', habits: [], completions: [] });
}
})();
return () => { live = false; };
}, [range.fromISO, range.toISO]);
return data;
}
// Liste des dates ISO d'une plage (bornée, max 120 jours pour 'all').
function statsDateList(range) {
const to = statsDateFromISO(range.toISO);
const from = range.fromISO ? statsDateFromISO(range.fromISO) : statsAddDays(to, -119);
const out = [];
let d = new Date(from), guard = 0;
while (d <= to && guard < 1000) { out.push(statsISO(d)); d = statsAddDays(d, 1); guard++; }
return out;
}
function StatsHabits({ range, compact = false }) {
const { loading, error, habits, completions } = useHabitStats(range);
const agg = React.useMemo(() => {
const dates = statsDateList(range);
const dateSet = new Set(dates);
const perDate = {}; // date -> count
const perHabit = {}; // habit_id -> Set(date)
for (const c of completions) {
if (!dateSet.has(c.date)) continue;
perDate[c.date] = (perDate[c.date] || 0) + 1;
if (!perHabit[c.habit_id]) perHabit[c.habit_id] = new Set();
perHabit[c.habit_id].add(c.date);
}
const nbDays = dates.length || 1;
const nbHabits = habits.length || 0;
const habitRows = habits.map(h => {
const set = perHabit[h.id] || new Set();
const done = set.size;
let streak = 0;
for (let i = dates.length - 1; i >= 0; i--) { if (set.has(dates[i])) streak++; else break; }
let best = 0, cur = 0;
for (const d of dates) { if (set.has(d)) { cur++; best = Math.max(best, cur); } else cur = 0; }
return { id: h.id, name: h.name, done, rate: (done / nbDays) * 100, streak, best };
}).sort((a, b) => b.rate - a.rate);
const heat = dates.map(d => {
const count = perDate[d] || 0;
return { date: d, count, ratio: nbHabits > 0 ? count / nbHabits : 0 };
});
const totalDone = completions.filter(c => dateSet.has(c.date)).length;
const possible = nbHabits * nbDays;
const globalRate = possible > 0 ? (totalDone / possible) * 100 : 0;
let globalStreak = 0;
for (let i = dates.length - 1; i >= 0; i--) { if ((perDate[dates[i]] || 0) > 0) globalStreak++; else break; }
const trend = heat.map(h => h.ratio);
const half = Math.floor(nbDays / 2);
const avg = a => (a.length ? a.reduce((s, v) => s + v, 0) / a.length : 0);
const firstHalf = avg(trend.slice(0, half)) * 100;
const lastHalf = avg(trend.slice(half)) * 100;
const trendDelta = half > 0 ? lastHalf - firstHalf : 0;
return { habitRows, heat, totalDone, globalRate, nbHabits, nbDays, globalStreak, trend, trendDelta };
}, [habits, completions, range.fromISO, range.toISO]);
if (loading) {
return
;
}
if (error === 'offline' || error === 'load') {
return
;
}
if (!habits.length) {
return (
{Ico.book}}
title="Aucune habitude active"
sub="Crée des habitudes depuis Routines pour suivre ta régularité ici." />
);
}
const kpiCols = compact ? 2 : 4;
const gap = compact ? 10 : 14;
const dlt = agg.trendDelta;
const trendTone = Math.abs(dlt) < 0.5 ? undefined : dlt > 0 ? 'pos' : 'neg';
const trendVal = (dlt > 0 ? '+' : dlt < 0 ? '−' : '') + statsPct(Math.abs(dlt), 0);
return (
{/* KPI */}
1 ? 's' : ''}`} />
1 ? 's' : ''}`} />
{/* Tendance de régularité */}
{/* Heatmap calendrier */}
{/* Taux par habitude */}
({ label: h.name, value: Math.round(h.rate), sub: `${h.done} j` }))}
valueFmt={v => statsPct(v, 0)} colorFor={() => 'var(--blue)'} />
{/* Séries (streaks) */}
{agg.habitRows.map((h, i) => (
{h.name}
0 ? 'var(--green-soft)' : 'var(--bg-elev)', color: h.streak > 0 ? 'var(--green-text)' : 'var(--fg-3)', border: '1px solid var(--line)' }}>
{h.streak} en cours
{h.best} record
))}
);
}
// ═════════════════════════════════════════════════════════════════════
// BARRE DE CONTRÔLE (sous-onglets + période) — partagée desktop/mobile
// ═════════════════════════════════════════════════════════════════════
function StatsControls({ view, setView, period, setPeriod, mobile = false }) {
const viewOptions = [
{ id: 'trading', label: 'Trading', ico:
{Ico.trades} },
{ id: 'habits', label: 'Habitudes', ico:
{Ico.book} },
];
if (mobile) {
return (
);
}
return (
);
}
// État de vue/période partagé (gère initialView + prop period optionnelle).
function useStatsState(initialView, initialPeriod) {
const [view, setView] = React.useState(initialView === 'habits' ? 'habits' : 'trading');
const [period, setPeriod] = React.useState(
['week', 'month', 'year', 'all'].includes(initialPeriod) ? initialPeriod : 'month'
);
React.useEffect(() => {
if (initialView === 'habits' || initialView === 'trading') setView(initialView);
}, [initialView]);
const range = React.useMemo(() => statsPeriodRange(period), [period]);
return { view, setView, period, setPeriod, range };
}
// ═════════════════════════════════════════════════════════════════════
// PAGE DESKTOP
// ═════════════════════════════════════════════════════════════════════
function StatsPage({ state, initialView, period: periodProp }) {
const { view, setView, period, setPeriod, range } = useStatsState(initialView, periodProp);
const trades = (state && state.trades) || [];
return (
{view === 'trading'
?
: }
);
}
// ═════════════════════════════════════════════════════════════════════
// PAGE MOBILE
// ═════════════════════════════════════════════════════════════════════
function StatsMobile({ state, initialView, period: periodProp }) {
const { view, setView, period, setPeriod, range } = useStatsState(initialView, periodProp);
const trades = (state && state.trades) || [];
return (
Statistiques
{view === 'trading'
?
: }
);
}
Object.assign(window, { StatsPage, StatsMobile });