302 lines
15 KiB
TypeScript
302 lines
15 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
||
import { Spinner } from "react-bootstrap";
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import {
|
||
faBolt, faBookmark, faChartColumn, faChevronDown, faChevronRight, faCodeCompare, faPersonWalking,
|
||
faTriangleExclamation,
|
||
} from "@fortawesome/free-solid-svg-icons";
|
||
import {
|
||
Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, TooltipContentProps, XAxis, YAxis,
|
||
} from "recharts";
|
||
import { ActivityStats, getActivityStats, getWorkoutTemplates } from "../../../types";
|
||
import { StatsRange } from "../enums";
|
||
import { formatBalance, formatCalories } from "../Utils";
|
||
import { StatsBounds, TOOLTIP_STYLE } from "./statsShared";
|
||
import {
|
||
ActivitySeriesRow, PlanNote, TemplateSeries, buildActivitySeries, buildTemplateSeries,
|
||
} from "./activityChartSeries";
|
||
|
||
type Props = {
|
||
range: StatsBounds;
|
||
mode: StatsRange;
|
||
};
|
||
|
||
/** CSS třída odchylky — vynechané je chyba, přidané navíc je v pořádku. */
|
||
function deviationClass(deviation: number): string {
|
||
if (deviation < 0) return 'deviation-minus';
|
||
if (deviation > 0) return 'deviation-plus';
|
||
return '';
|
||
}
|
||
|
||
/** Jedna poznámka o nesplněném použití šablony. Kalorie záměrně chybí — jde o to, co se nedodělalo. */
|
||
function PlanNoteLine({ note }: Readonly<{ note: PlanNote }>) {
|
||
return (
|
||
<div className="plan-note">
|
||
<FontAwesomeIcon icon={faTriangleExclamation} className="plan-note-icon" />
|
||
<div>
|
||
{note.date && <span className="plan-note-date">{note.date} </span>}
|
||
<strong>{note.templateName}</strong>
|
||
{!!note.missing.length && <div>nesplněno: {note.missing.join(', ')}</div>}
|
||
{!!note.changed.length && <div>upraveno: {note.changed.join(', ')}</div>}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Bublina sloupce — díly po šablonách, plán a hlavně co ze šablon nebylo splněno. */
|
||
function ActivityTooltip({ active, payload, label }: Readonly<Partial<TooltipContentProps<number, string>>>) {
|
||
if (!active || !payload?.length) return null;
|
||
const row = payload[0].payload as ActivitySeriesRow;
|
||
const parts = payload.filter(item => item.dataKey !== 'planned' && Number(item.value) > 0);
|
||
return (
|
||
<div className="activity-tooltip" style={TOOLTIP_STYLE}>
|
||
<div className="activity-tooltip-title">{label}</div>
|
||
{!parts.length && <div className="activity-tooltip-empty">bez pohybu</div>}
|
||
{parts.map(item => (
|
||
<div key={String(item.dataKey)} className="activity-tooltip-row">
|
||
<span className="activity-tooltip-swatch" style={{ background: item.color }} />
|
||
<span>{item.name}</span>
|
||
<span className="activity-tooltip-value">{formatCalories(Number(item.value))}</span>
|
||
</div>
|
||
))}
|
||
{row.planned > 0 && (
|
||
<div className="activity-tooltip-row activity-tooltip-plan">
|
||
<span className="activity-tooltip-swatch plan" />
|
||
<span>Plán šablon</span>
|
||
<span className="activity-tooltip-value">{formatCalories(row.planned)}</span>
|
||
</div>
|
||
)}
|
||
{row.notes.map((note, index) => <PlanNoteLine key={index} note={note} />)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
type DotProps = { cx?: number, cy?: number, payload?: ActivitySeriesRow, index?: number };
|
||
|
||
/**
|
||
* Bod plánu. Kde se ze šablony něco nesplnilo, je výraznější a nese "!" —
|
||
* sedí na úrovni plánu, tedy přesně nad mezerou, kterou nesplněné cviky nechaly.
|
||
*/
|
||
function PlanDot({ cx, cy, payload, index }: Readonly<DotProps>) {
|
||
// Na nulovém plánu by body jen zaplevelily osu, čára tam stačí sama
|
||
if (cx == null || cy == null || !payload?.planned) return <g key={index} />;
|
||
if (!payload.notes.length) {
|
||
return <circle key={index} cx={cx} cy={cy} r={3} fill="var(--ft-text-secondary)" />;
|
||
}
|
||
return (
|
||
<g key={index} className="plan-dot-warning">
|
||
<circle cx={cx} cy={cy} r={8} fill="var(--ft-warning)" stroke="var(--ft-bg-card)" strokeWidth={2} />
|
||
<text x={cx} y={cy} dy="0.35em" textAnchor="middle" fontSize={11} fontWeight={700} fill="var(--ft-bg-card)">!</text>
|
||
</g>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Statistiky výdeje pohybem: kolik se spálilo, kterými šablonami a co z nich
|
||
* zůstalo nesplněné, a kolik přibylo mimo ně.
|
||
*/
|
||
export default function ActivityStatsPanel({ range, mode }: Readonly<Props>) {
|
||
const [stats, setStats] = useState<ActivityStats | undefined>();
|
||
const [templateIds, setTemplateIds] = useState<string[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [extrasOpen, setExtrasOpen] = useState(false);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
setLoading(true);
|
||
getActivityStats({ query: range }).then(response => {
|
||
if (cancelled) return;
|
||
setStats(response.data);
|
||
setLoading(false);
|
||
});
|
||
return () => { cancelled = true; };
|
||
}, [range]);
|
||
|
||
// Pořadí všech šablon dává barvy, které se nemění podle zobrazeného období
|
||
useEffect(() => {
|
||
getWorkoutTemplates().then(response => setTemplateIds((response.data ?? []).map(template => template.id)));
|
||
}, []);
|
||
|
||
const { series, templateSeries } = useMemo(() => {
|
||
if (!stats) return { series: [], templateSeries: [] as TemplateSeries[] };
|
||
const used = new Map(stats.byTemplate.map(usage => [usage.templateId, usage.name]));
|
||
const built = buildTemplateSeries(templateIds, used);
|
||
return {
|
||
series: buildActivitySeries(stats.days, range, mode, built.keyOf),
|
||
templateSeries: built.series,
|
||
};
|
||
}, [stats, templateIds, range, mode]);
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="empty-state">
|
||
<Spinner animation="border" variant="success" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!stats?.entryCount) {
|
||
return (
|
||
<div className="card-panel empty-state">
|
||
<div className="empty-icon"><FontAwesomeIcon icon={faChartColumn} /></div>
|
||
<div className="empty-title">Za zvolené období nemáte žádný pohyb</div>
|
||
<p className="empty-description">
|
||
Aktivity přidáte v přehledu dne na záložce Výdej, ručně nebo ze šablony tréninku.
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const deviation = stats.templateCalories - stats.plannedCalories;
|
||
const fulfilment = stats.plannedCalories ? Math.round(stats.templateCalories / stats.plannedCalories * 100) : undefined;
|
||
const skippedItems = stats.byTemplate.reduce(
|
||
(sum, usage) => sum + Math.max(usage.plannedItemCount - usage.doneItemCount, 0), 0);
|
||
const extraCount = stats.extras.reduce((sum, group) => sum + group.count, 0);
|
||
|
||
return (
|
||
<>
|
||
<div className="summary-grid">
|
||
<div className="summary-tile accent">
|
||
<div className="summary-label"><FontAwesomeIcon icon={faBolt} /> Pohybem spáleno</div>
|
||
<div className="summary-value">{formatCalories(stats.totalCalories)}</div>
|
||
<div className="summary-hint">za {stats.dayCount} dní s pohybem</div>
|
||
</div>
|
||
<div className="summary-tile">
|
||
<div className="summary-label"><FontAwesomeIcon icon={faBookmark} /> Ze šablon</div>
|
||
<div className="summary-value">{formatCalories(stats.templateCalories)}</div>
|
||
<div className="summary-hint">
|
||
{fulfilment != null ? `${fulfilment} % plánu šablon` : 'žádná šablona nepoužita'}
|
||
</div>
|
||
</div>
|
||
<div className="summary-tile">
|
||
<div className="summary-label"><FontAwesomeIcon icon={faCodeCompare} /> Odchylka od šablon</div>
|
||
<div className={`summary-value ${deviationClass(deviation)}`}>
|
||
{deviation ? formatBalance(deviation) : '—'}
|
||
</div>
|
||
<div className="summary-hint">
|
||
{skippedItems ? `vynecháno cviků: ${skippedItems}` : 'žádný cvik nevynechán'}
|
||
</div>
|
||
</div>
|
||
<div className="summary-tile">
|
||
<div className="summary-label"><FontAwesomeIcon icon={faPersonWalking} /> Mimo šablonu</div>
|
||
<div className="summary-value">{formatCalories(stats.extraCalories)}</div>
|
||
<div className="summary-hint">z {extraCount} aktivit</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card-panel chart-panel">
|
||
<h2 className="chart-title">Výdej v čase</h2>
|
||
<ResponsiveContainer width="100%" height={280}>
|
||
<ComposedChart data={series} margin={{ top: 12, right: 8, bottom: 0, left: 0 }}>
|
||
<CartesianGrid strokeDasharray="3 3" stroke="var(--ft-border)" vertical={false} />
|
||
<XAxis dataKey="label" tick={{ fontSize: 12 }} stroke="var(--ft-text-muted)" />
|
||
<YAxis tick={{ fontSize: 12 }} stroke="var(--ft-text-muted)" width={56} />
|
||
<Tooltip content={<ActivityTooltip />} cursor={{ fill: 'var(--ft-bg-hover)' }} />
|
||
<Legend />
|
||
{/* Každá šablona vlastní díl sloupce; tenký okraj v barvě karty díly odděluje */}
|
||
{templateSeries.map(item => (
|
||
<Bar
|
||
key={item.key}
|
||
dataKey={item.key}
|
||
name={item.name}
|
||
stackId="vydej"
|
||
fill={item.color}
|
||
stroke="var(--ft-bg-card)"
|
||
strokeWidth={1}
|
||
/>
|
||
))}
|
||
<Bar
|
||
dataKey="extra"
|
||
name="Mimo šablonu"
|
||
stackId="vydej"
|
||
fill="var(--ft-series-other)"
|
||
stroke="var(--ft-bg-card)"
|
||
strokeWidth={1}
|
||
radius={[4, 4, 0, 0]}
|
||
/>
|
||
{/* Čára plánu sedí proti horní hraně dílů šablon — mezera mezi nimi je nesplněná část */}
|
||
<Line
|
||
dataKey="planned"
|
||
name="Plán šablon"
|
||
stroke="var(--ft-text-secondary)"
|
||
strokeWidth={2}
|
||
strokeDasharray="5 4"
|
||
dot={props => <PlanDot {...props} />}
|
||
activeDot={false}
|
||
type="linear"
|
||
/>
|
||
</ComposedChart>
|
||
</ResponsiveContainer>
|
||
<p className="usage-note">
|
||
<FontAwesomeIcon icon={faTriangleExclamation} className="plan-note-icon" /> u bodu plánu
|
||
znamená, že se ze šablony něco nesplnilo — co přesně, ukáže bublina po najetí na sloupec.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="card-panel chart-panel">
|
||
<h2 className="chart-title">Plnění šablon</h2>
|
||
<table className="source-table usage-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Šablona</th>
|
||
<th className="numeric">Použito</th>
|
||
<th className="numeric">Cviky</th>
|
||
<th className="numeric">Plán</th>
|
||
<th className="numeric">Skutečnost</th>
|
||
<th className="numeric">Odchylka</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{stats.byTemplate.map(usage => {
|
||
const usageDeviation = usage.actualCalories - usage.plannedCalories;
|
||
return (
|
||
<tr key={usage.templateId}>
|
||
<td>{usage.name}</td>
|
||
<td className="numeric">{usage.dayCount}×</td>
|
||
<td className="numeric">{usage.doneItemCount}/{usage.plannedItemCount}</td>
|
||
<td className="numeric">{formatCalories(usage.plannedCalories)}</td>
|
||
<td className="numeric">{formatCalories(usage.actualCalories)}</td>
|
||
<td className={`numeric ${deviationClass(usageDeviation)}`}>
|
||
{usageDeviation ? formatBalance(usageDeviation) : '—'}
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
{!!stats.extras.length && (
|
||
<tr className="extras-toggle" onClick={() => setExtrasOpen(open => !open)}>
|
||
<td>
|
||
<FontAwesomeIcon icon={extrasOpen ? faChevronDown : faChevronRight} fixedWidth />
|
||
{' '}Mimo šablonu
|
||
</td>
|
||
<td className="numeric">{extraCount}×</td>
|
||
<td className="numeric" />
|
||
<td className="numeric" />
|
||
<td className="numeric">{formatCalories(stats.extraCalories)}</td>
|
||
<td className="numeric" />
|
||
</tr>
|
||
)}
|
||
{extrasOpen && stats.extras.map(group => (
|
||
<tr key={group.key} className="extras-item">
|
||
<td>{group.key}</td>
|
||
<td className="numeric">{group.count}×</td>
|
||
<td className="numeric" />
|
||
<td className="numeric" />
|
||
<td className="numeric">{formatCalories(group.calories)}</td>
|
||
<td className="numeric" />
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
{!stats.byTemplate.length && (
|
||
<p className="usage-note">V tomto období jste žádnou šablonu tréninku nepoužili.</p>
|
||
)}
|
||
<p className="usage-note">
|
||
Plán je to, co šablona slibovala v den použití. Smazaný nebo zkrácený cvik se
|
||
projeví jako odchylka; když smažete všechny cviky šablony, bere se to jako
|
||
vrácené použití.
|
||
</p>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|