// Tempo — Tableau de bord : indicateurs clés, P&L cumulé, Calendrier P&L.
// Expose aussi des briques partagées (FilterBar, ChartCard, CumulativeChartReal,
// CalendarBlock, DashKpiRow, DashboardEmpty, dashCumulative,
// dashCumulativeSubtitle, usePgWidth) que la version mobile (app.jsx) et
// d'autres pages réutilisent. KpiCard et LineArea restent internes à ce fichier.
// ─── Utilitaires locaux ───────────────────────────────────────────
// Titre de page lu dans la table unique NAV_LABELS (core.jsx), avec repli.
function pgNavTitle(id, fallback) {
const t = (typeof NAV_LABELS !== 'undefined' && NAV_LABELS) ? NAV_LABELS[id] : null;
if (typeof t === 'string') return t;
return (t && (t.titre || t.title || t.menu)) || fallback;
}
// Jour civil 'YYYY-MM-DD' + n jours (calcul à midi UTC : aucun fuseau en jeu).
function pgAddDaysISO(iso, n) {
const d = new Date(iso + 'T12:00:00Z');
d.setUTCDate(d.getUTCDate() + n);
return d.toISOString().slice(0, 10);
}
// « 0 trade », « 1 trade », « 1 246 trades » : nombre au format français
// (charte §1, séparateur de milliers) et accord du mot : formateur partagé
// fmtCount (format-prefs.jsx), espace ordinaire entre le nombre et le mot.
function pgTrades(n) {
return fmtCount(n, 'trade');
}
// Majuscule initiale (début de ligne ou d'info-bulle).
function pgCap(s) {
return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
}
// Taille de police qui fait tenir un montant sur une ligne dans la largeur de
// son conteneur (container-type: inline-size) : jamais tronqué, jamais coupé.
function pgFitFont(text, maxPx) {
const len = Math.max(1, String(text == null ? '' : text).length);
return `min(${maxPx}px, ${Math.round(10000 / (len * 0.64)) / 100}cqw)`;
}
// Largeur rendue d'un élément, suivie par ResizeObserver (mesure avant l'affichage).
function usePgWidth() {
const ref = React.useRef(null);
const [width, setWidth] = React.useState(0);
React.useLayoutEffect(() => {
const el = ref.current;
if (!el) return undefined;
const read = () => setWidth(Math.round(el.getBoundingClientRect().width));
read();
if (typeof ResizeObserver !== 'function') return undefined;
const ro = new ResizeObserver(read);
ro.observe(el);
return () => ro.disconnect();
}, []);
return [ref, width];
}
// « 24 G · 22 P · 1 nul » (charte §3 et §5), nombres au format français
// (« 1 246 G »).
function pgWinLossText(wins, losses, nuls) {
const n = Math.max(0, Number(nuls) || 0);
return `${fmtNum(Number(wins) || 0, 0)} G · ${fmtNum(Number(losses) || 0, 0)} P` + (n > 0 ? ` · ${fmtNum(n, 0)} nul${n > 1 ? 's' : ''}` : '');
}
// Signe d'un montant TEL QU'IL S'AFFICHE : 1 (gain), −1 (perte), 0 pour tout ce
// que fmtMoney écrit « 0,00 € ». Même arrondi que fmtMoneyCur (décimales de la
// devise du profil) : une somme de P&L laisse du bruit de virgule flottante
// (10,1 + 20,2 − 30,3 = −3,55e-15), qui ne doit colorer ni un texte, ni une
// case, ni une courbe. Toute couleur de montant de ce fichier passe par ici.
function pgSign(v) {
return moneySign(v);
}
// Couleur d'un montant signé : vert, rouge, ou neutre pour zéro (charte §2).
// Gain en var(--green) : --dash-green (#16a34a) ne fait que 3,3:1 sur blanc,
// sous les 4,5:1 de la charte §9 ; il reste réservé aux fonds, barres et
// courbes. --dash-red est conforme (4,75:1).
function pgPnlColor(v) {
const sign = pgSign(v);
return sign > 0 ? 'var(--green)' : sign < 0 ? 'var(--dash-red)' : 'var(--fg)';
}
// Même règle en teinte « texte » (petits montants du calendrier, contraste AA).
function pgPnlTextColor(v) {
const sign = pgSign(v);
return sign > 0 ? 'var(--green-text)' : sign < 0 ? 'var(--red-text)' : 'var(--fg)';
}
// ─── Shared bits ──────────────────────────────────────────────────
function FilterBar({ tabs, activeTab, setActiveTab, right }) {
return (
{tabs.map((t) =>
)}
{right &&
{right}
}
);
}
// P&L cumulé trade après trade (ordre chronologique) et drawdown max, calculé
// comme dans Statistiques (pic initial à 0 ; drawdown = pic − P&L cumulé) pour
// afficher la même valeur au centime. `dates` = executed_at de chaque point.
function dashCumulative(trades) {
const sorted = [...(trades || [])].sort((a, b) => new Date(a.executed_at) - new Date(b.executed_at));
let run = 0, peak = 0, maxDD = 0;
const points = [], dates = [];
for (const t of sorted) {
run += Number(t.pnl) || 0;
points.push(run);
dates.push(t.executed_at);
if (run >= peak) peak = run;
if (peak - run > maxDD) maxDD = peak - run;
}
return { points, dates, maxDD };
}
// Sous-titre de la courbe : « 46 trades · 29 juil. – 25 sept. ».
function dashCumulativeSubtitle(count, dates) {
const n = pgTrades(count);
if (!dates || dates.length < 2) return n;
return `${n} · ${fmtDayRange(dates[0], dates[dates.length - 1])}`;
}
// ─── Dashboard ────────────────────────────────────────────────────
function Dashboard({ nav, navStats, openImport, openJournal, state }) {
// Clic sur une carte d'indicateur → section Statistiques (vue trading). Inerte si navStats absent.
const goStats = navStats ? () => navStats('trading') : undefined;
const { trades, stats, tradesLoading, tradesByDay } = state || { trades: [], stats: computeStats([]), tradesLoading: true, tradesByDay: {} };
const list = trades || [];
const hasTrades = list.length > 0;
// Erreur de chargement ≠ compte vide : bandeau + Réessayer, données déjà chargées conservées.
const loadError = !tradesLoading && !!(state && state.tradesError);
const empty = !tradesLoading && !loadError && !hasTrades;
const cumulative = React.useMemo(() => dashCumulative(list), [list]);
const addTrade = () => openImport && openImport(null, 'manual');
const importFile = () => openImport && openImport(null, 'csv');
return (
{hasTrades && (
)}
{loadError && (
Impossible de charger tes trades. Vérifie ta connexion.
{state && typeof state.refreshTrades === 'function' && (
)}
)}
{tradesLoading && !hasTrades ? (
) : empty ? (
) : hasTrades ? (
{/* Indicateurs clés : P&L net, espérance, drawdown max, gain/perte moyens.
Taux de réussite et profit factor sont portés par les jauges juste dessous. */}
{/* Jauges type compteur : taux de réussite, profit factor, ratio gain/perte */}
{typeof DashGaugesRow === 'function' && }
{/* P&L cumulé */}
{cumulative.points.length > 1 && (
);
}
// Squelette pendant le premier chargement (uniquement pendant le chargement).
function DashKpiSkeleton() {
return (
{[0, 1, 2, 3].map((i) => (
))}
);
}
// État vide du Tableau de bord (ordinateur et mobile) : l'état vide commun
// (EmptyTrades, core.jsx) dans une carte.
function DashboardEmpty({ openImport, compact = false }) {
return (
);
}
// Courbe du P&L cumulé à partir des points réels.
// Le viewBox prend la largeur réelle de la carte (mesurée), pour une courbe
// pleine largeur sans bandes vides ni texte déformé ; `W` n'est que le repli du
// tout premier rendu, avant la mesure. Graduations en format compact ;
// valeur finale exacte (fmtMoney, la même qu'au P&L net) dans l'étiquette posée
// à hauteur du dernier point.
// `ddRange` (optionnel, Statistiques) : { peak, trough } indices de la plus
// forte chute pic → creux, surlignée en rouge pâle. Même courbe, mêmes axes et
// même valeur finale dans le Tableau de bord et dans les Statistiques.
function CumulativeChartReal({ points, dates, W = 720, H = 200, ddRange = null }) {
const [boxRef, boxW] = usePgWidth();
if (!points || points.length < 2) return null;
const width = boxW > 0 ? boxW : W;
const max = Math.max(...points);
const min = Math.min(...points);
const last = points[points.length - 1];
// Teinte sur le signe de la valeur finale telle qu'elle s'affiche dans l'étiquette.
const sign = pgSign(last);
const stroke = sign > 0 ? 'var(--dash-green)' : sign < 0 ? 'var(--dash-red)' : 'var(--fg-3)';
const fill = sign > 0 ? 'rgba(22,163,74,0.14)' : sign < 0 ? 'rgba(225,29,47,0.12)' : 'rgba(100,116,139,0.12)';
// Résumé lu à la place de l'image (role=img) : nombre de trades, période,
// valeur finale, plus bas et plus haut — ce que la courbe montre.
const hasDates = Array.isArray(dates) && dates.length === points.length;
const summary = 'P&L cumulé\u00A0: ' + pgTrades(points.length)
+ (hasDates ? ', du ' + fmtDayShort(dates[0]) + ' au ' + fmtDayShort(dates[dates.length - 1]) : '')
+ '. Valeur finale ' + fmtMoney(last, true) + ', plus bas ' + fmtMoney(min, true) + ', plus haut ' + fmtMoney(max, true) + '.';
return (
);
}
// Carte d'un indicateur clé : libellé, valeur, précision. Cliquable (souris et
// clavier) quand `onClick` est fourni.
function KpiCard({ label, main, sub, onClick }) {
const onKeyDown = onClick ? (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); }
} : undefined;
return (
{label}
{main}
{sub &&
{sub}
}
);
}
function ChartCard({ title, subtitle, children }) {
return (
{title}
{subtitle && {subtitle}}
{children}
);
}
// Courbe lissée avec aire, graduations à droite et infobulle au survol.
// `dates` (optionnel) : instants ISO des points, même longueur que `data` → axe X
// et infobulle datés dans le fuseau du profil (fmtDayShort). Sans `dates`, pas
// d'axe X : on n'invente pas de dates.
// `labelMax` / `labelMin` : graduations haute et basse ; `labelZero` : graduation
// de la ligne 0 quand elle est dans l'intervalle ; `labelLast` : valeur finale,
// étiquetée à hauteur du dernier point. `valueFmt` formate la valeur de l'infobulle.
// `ariaLabel` : résumé de la courbe pour un lecteur d'écran ; fourni, le
// graphique devient une image nommée (role=img).
function LineArea({ data, W, H, stroke, fill, labelMax, labelMin, labelZero, labelLast, hover, dates, valueFmt = (v) => fmtMoney(v, true), band = null, ariaLabel }) {
const hasDates = Array.isArray(dates) && dates.length === data.length;
const tickDate = (iso) => fmtDayShort(iso);
// Largeur d'un caractère à 10 px en police à chasse fixe : la marge droite
// s'adapte aux étiquettes pour que rien ne soit coupé (mobile compris).
const CH = 6.1;
const longest = Math.max(
String(labelMax == null ? '' : labelMax).length, String(labelMin == null ? '' : labelMin).length,
String(labelZero == null ? '' : labelZero).length, String(labelLast == null ? '' : labelLast).length
);
const padL = 6, padR = Math.max(56, Math.ceil(16 + CH * longest)), padT = 14, padB = 22;
const w = W - padL - padR, h = H - padT - padB;
const max = Math.max(...data), min = Math.min(...data);
const sx = w / (data.length - 1);
// Courbe plate (toutes les valeurs égales) : pas d'échelle à graduer, le trait
// est centré dans le graphe et seule l'étiquette finale donne la valeur.
const flat = max === min;
const y = (v) => flat ? padT + h / 2 : padT + h - (v - min) / (max - min) * h;
function smooth(pts) {
if (!pts.length) return '';
let d = `M ${pts[0][0]} ${pts[0][1]}`;
for (let i = 0; i < pts.length - 1; i++) {
const [x0, y0] = pts[i], [x1, y1] = pts[i + 1];
const cx = (x0 + x1) / 2;
d += ` C ${cx} ${y0}, ${cx} ${y1}, ${x1} ${y1}`;
}
return d;
}
const pts = data.map((v, i) => [padL + i * sx, y(v)]);
const path = smooth(pts);
const lastY = y(data[data.length - 1]);
const lastX = padL + (data.length - 1) * sx;
const yZero = y(0);
const yTop = padT, yBot = padT + h;
const area = path + ` L ${lastX} ${yBot} L ${padL} ${yBot} Z`;
const gx = padL + w; // bord droit du tracé
// Une graduation trop proche de l'étiquette finale s'efface derrière elle.
const clearOfLast = (yy) => labelLast == null || Math.abs(yy - lastY) >= 15;
const zeroInside = 0 > min && 0 < max && Math.abs(yZero - yTop) >= 12 && Math.abs(yZero - yBot) >= 12;
const axisText = { fontSize: 10, fill: 'var(--fg-3)', fontFamily: 'JetBrains Mono, monospace' };
// Dates de l'axe : première et dernière, plus celle du milieu quand elle
// apporte quelque chose (différente de ses voisines) et qu'elle tient entre
// les deux avec TICK_GAP px de marge. Largeurs estimées comme les marges
// (CH par caractère). Sur un téléphone étroit, si même les deux dates des
// extrémités ne tiennent pas côte à côte, elles perdent leur année (le
// sous-titre de la carte donne déjà la plage complète) ; partout ailleurs le
// format reste celui de fmtDayShort (charte §4).
const TICK_GAP = 10;
let ticks = [];
if (hasDates) {
const n = data.length;
const mk = (idx, anchor) => { const txt = tickDate(dates[idx]); return { idx, anchor, txt, tw: CH * txt.length }; };
const first = mk(0, 'start');
ticks = [first];
if (n > 1) {
const last = mk(n - 1, 'end');
ticks.push(last);
const midIdx = Math.floor(n / 2);
if (midIdx > 0 && midIdx < n - 1) {
const mid = mk(midIdx, 'middle');
const xm = padL + midIdx * sx;
const fits = xm - mid.tw / 2 >= padL + first.tw + TICK_GAP && xm + mid.tw / 2 <= gx - last.tw - TICK_GAP;
if (fits && mid.txt !== first.txt && mid.txt !== last.txt) ticks.splice(1, 0, mid);
}
if (ticks.length === 2 && first.tw + last.tw + TICK_GAP > w) {
ticks = ticks.map((t) => { const txt = t.txt.replace(/\s\d{4}$/, ''); return { ...t, txt, tw: CH * txt.length }; });
// Toujours trop serré (graphe minuscule) : la date de fin seule.
if (ticks[0].tw + ticks[1].tw + TICK_GAP > w) ticks = [ticks[1]];
}
}
}
const [hoverIdx, setHoverIdx] = React.useState(null);
const svgRef = React.useRef(null);
let tip = null;
if (hover && hoverIdx != null && hoverIdx < data.length) {
const hx = padL + hoverIdx * sx, hy = y(data[hoverIdx]);
const rank = fmtNum(hoverIdx + 1, 0);
const l1 = hasDates ? `Trade ${rank} · ${tickDate(dates[hoverIdx])}` : `Trade ${rank}`;
const l2 = valueFmt(data[hoverIdx]);
const tipW = Math.ceil(12 + Math.max(l1.length * 5.4, l2.length * 6.6));
const tx = hx + 8 + tipW <= W - 4 ? hx + 8 : Math.max(4, hx - 8 - tipW);
const ty = Math.max(hy - 36, 2);
tip = (
{l1}{l2}
);
}
return (
);
}
// ─── Calendrier P&L (Tableau de bord, ordinateur et mobile) ───────
// Semaines du lundi au dimanche. Chaque ligne couvre la semaine complète : les
// jours des mois voisins sont affichés estompés avec leurs données, pour que le
// total de la semaine (colonne « Semaine », numéro ISO) corresponde à ce qu'on
// voit. Le total du mois ne compte que les jours du mois.
// `compact` (mobile) : en-tête empilé, jours « Lu … Di », bouton pleine largeur.
// Sur mobile, et dès que la carte est étroite, les cases n'affichent que la
// couleur : les montants exacts passent dans la liste sous la grille.
// `today` : jour du profil (state.today) ; le mois affiché le suit tant qu'on n'a
// pas navigué. `showAdd` : bouton « Ajouter un trade » (masqué sur un compte vide,
// où la carte d'accueil porte déjà l'action).
function CalendarBlock({ nav, onDayClick, openImport, tradesByDay = {}, compact = false, today: todayProp, showAdd = true }) {
const today = todayProp || todayISO();
const todayMonth = today.slice(0, 7);
const [viewMonth, setViewMonth] = React.useState(todayMonth); // 'YYYY-MM'
const [pinned, setPinned] = React.useState(false);
React.useEffect(() => { if (!pinned) setViewMonth(todayMonth); }, [todayMonth, pinned]);
const [cardRef, cardW] = usePgWidth();
const narrow = compact || (cardW > 0 && cardW < 900);
const year = Number(viewMonth.slice(0, 4));
const monthIdx = Number(viewMonth.slice(5, 7)) - 1;
const shiftMonth = (delta) => {
const next = new Date(Date.UTC(year, monthIdx + delta, 1)).toISOString().slice(0, 7);
setViewMonth(next);
setPinned(next !== todayMonth);
};
// Grille : du lundi de la semaine du 1er au dimanche de la semaine du dernier jour.
const firstDow = (new Date(Date.UTC(year, monthIdx, 1)).getUTCDay() + 6) % 7; // 0 = lundi
const lastDay = new Date(Date.UTC(year, monthIdx + 1, 0)).getUTCDate();
const nWeeks = Math.ceil((firstDow + lastDay) / 7);
const gridStart = pgAddDaysISO(viewMonth + '-01', -firstDow);
const weeks = [];
const monthTotal = { net: 0, n: 0 };
let maxAbsDay = 1;
for (let wi = 0; wi < nWeeks; wi++) {
const monday = pgAddDaysISO(gridStart, 7 * wi);
const days = [];
let net = 0, n = 0;
for (let k = 0; k < 7; k++) {
const iso = pgAddDaysISO(monday, k);
const data = tradesByDay[iso] || null;
const inMonth = iso.slice(0, 7) === viewMonth;
if (data) {
net += data.pnl; n += data.trades.length;
maxAbsDay = Math.max(maxAbsDay, Math.abs(data.pnl));
if (inMonth) { monthTotal.net += data.pnl; monthTotal.n += data.trades.length; }
}
days.push({ iso, day: Number(iso.slice(8, 10)), month: Number(iso.slice(5, 7)) - 1, inMonth, data });
}
weeks.push({ monday, days, net, n });
}
// Intensité de couleur d'un jour (vert/rouge plus ou moins fort), relative au
// plus gros jour visible. color-mix avec --bg-card : lisible en clair ET en sombre.
// Jours des mois voisins : teinte réduite de moitié et fond atténué. Un jour
// tradé à P&L nul (affiché « 0,00 € ») reste repérable (fond neutre) même en
// couleur seule.
const dayBg = (c) => {
if (!c.data) return c.inMonth ? 'var(--bg-card)' : 'var(--bg-soft)';
const sign = pgSign(c.data.pnl);
if (!sign) return 'var(--bg-elev)';
const intensity = Math.min(1, Math.abs(c.data.pnl) / maxAbsDay);
// 12 % → 36 %. Plafond mesuré : au-delà, le montant écrit sur la case
// (--green-text, --red-text) passe sous 4,5:1 — dès 37 % pour le rouge en
// clair. À 36 % : 4,7:1 et 4,6:1 en clair, 5,7:1 en sombre.
const a = Math.round((12 + intensity * 24) * (c.inMonth ? 1 : 0.5));
return sign > 0
? `color-mix(in srgb, var(--dash-green) ${a}%, var(--bg-card))`
: `color-mix(in srgb, var(--dash-red) ${a}%, var(--bg-card))`;
};
// Un jour à venir n'a pas de journal (règle « jamais au-delà d'aujourd'hui »,
// la même que les flèches du journal) : sa case est inerte. Exception : un jour
// à venir qui contient des trades (fichier importé avec une mauvaise date)
// reste ouvrable, sinon ces trades seraient inatteignables depuis le calendrier.
const dayOpenable = (c) => c.iso <= today || !!c.data;
const dayTitle = (c) => pgCap(fmtDayLong(c.iso)) + (c.data
? ` · ${fmtMoney(c.data.pnl, true)} · ${pgTrades(c.data.trades.length)}`
: c.iso > today ? ' · jour à venir' : ' · aucun trade');
const weekTitle = (wk) => `${fmtWeekLabel(wk.monday)} · ${fmtWeekRange(wk.monday)} · ` + (wk.n ? `${fmtMoney(wk.net, true)} · ${pgTrades(wk.n)}` : 'aucun trade')
+ (nav ? ' — ouvrir le bilan hebdomadaire' : '');
const goWeekly = nav ? () => nav('weekly') : undefined;
// Liste sous la grille (mobile / carte étroite) : les semaines tradées (même à
// venir : leur case colorée n'a pas de montant ici), et celle d'aujourd'hui
// même vide ; jamais une semaine vide à venir.
const listWeeks = weeks.filter((wk) => wk.n > 0 || (wk.monday <= today && pgAddDaysISO(wk.monday, 6) >= today));
const addTrade = () => openImport && openImport(today, 'manual');
const dayLabels = compact ? FR_WEEKDAYS_2 : FR_WEEKDAYS_SHORT;
const gridCols = narrow ? 'repeat(7, minmax(0, 1fr))' : 'repeat(7, minmax(0, 1fr)) 126px';
// Mobile : cases de 44 px de côté à 375 px de large (taille tactile, charte
// §8) — écart de 2 px et carte à 8 px de marge intérieure.
const gridGap = compact ? 2 : narrow ? 6 : 8;
const navBtnStyle = (size) => ({ width: size, height: size, borderRadius: 8, border: '1px solid var(--line)', background: 'var(--bg-card)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--fg-2)', flexShrink: 0 });
const monthLabel = {fmtMonthYear(viewMonth)};
return (
{compact ? (
/* En-tête mobile : titre, puis navigation de mois centrée */
Calendrier P&L
{monthLabel}
) : (
Calendrier P&L
{monthLabel}
{/* Action secondaire : l'en-tête de l'écran porte déjà « Ajouter un trade » en bleu (charte §7). */}
{showAdd && }
)}
{/* Cases en couleur seule (mobile, carte étroite) : semaines et jours tradés
en liste, avec les montants exacts. */}
{narrow && listWeeks.length > 0 && (
{listWeeks.map((wk, wi) => (
{wk.days.filter((c) => c.data).map((c) => (
))}
))}
)}
{/* Action mobile : ajouter un trade, pleine largeur */}
{compact && showAdd && (
)}
{/* Total du mois — en bas à gauche du calendrier */}