\n \n {/* Horizontal grid lines at each y-tick */}\n {yTicks.map((v) => (\n \n ))}\n\n {/* Y-axis labels */}\n {yTicks.map((v) => (\n \n ${(v / 100).toFixed(0)}\n \n ))}\n\n {/* Bars */}\n {data.map((d, i) => {\n const barH = (d.total_cents / maxValue) * chartH;\n return (\n \n );\n })}\n\n {/* Rolling average line */}\n \n\n {/* Rolling average dots */}\n {data.map((d, i) => (\n \n ))}\n\n {/* X-axis labels */}\n {data.map((d, i) => {\n if (i % xLabelEvery !== 0 && i !== n - 1) return null;\n return (\n \n {formatShortDate(d.day)}\n \n );\n })}\n \n

\n );\n}\n\ninterface Props {\n onBack: () => void;\n}\n\nexport default function HistoryPage({ onBack }: Props) {\n const [period, setPeriod] = useState(\"week\");\n const [totalCents, setTotalCents] = useState(0);\n const [chartData, setChartData] = useState([]);\n const [loadingTotal, setLoadingTotal] = useState(true);\n const [loadingChart, setLoadingChart] = useState(true);\n\n useEffect(() => {\n fetchTotal(period);\n }, [period]);\n\n useEffect(() => {\n fetchChart();\n }, []);\n\n const fetchTotal = async (p: Period) => {\n setLoadingTotal(true);\n try {\n const resp = await fetch(`/api/savings?period=${p}`);\n const data = await resp.json();\n setTotalCents(data.total_cents ?? 0);\n } catch (err) {\n console.error(\"Failed to fetch savings:\", err);\n } finally {\n setLoadingTotal(false);\n }\n };\n\n const fetchChart = async () => {\n setLoadingChart(true);\n try {\n const resp = await fetch(\"/api/savings/chart\");\n const data = await resp.json();\n setChartData(data.days ?? []);\n } catch (err) {\n console.error(\"Failed to fetch chart:\", err);\n } finally {\n setLoadingChart(false);\n }\n };\n\n return (\n \n {/* ── Header: back button ── */}\n \n \n ←\n \n \n\n {/* ── Period selector pills ── */}\n

\n {PERIODS.map(({ label, value }) => (\n setPeriod(value)}\n style={{\n flex: 1,\n padding: \"10px 0\",\n borderRadius: \"50px\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"15px\",\n fontWeight: period === value ? 500 : 300,\n fontFamily: FONT,\n backgroundColor: period === value ? \"#FFCF48\" : \"#f3f4f6\",\n color: \"#000000\",\n transition: \"background-color 0.15s ease\",\n }}\n >\n {label}\n \n ))}\n

\n\n {/* ── Dashed divider ── */}\n

\n\n {/* ── Total saved display ── */}\n \n \n Total Saved\n

\n \n {formatCents(totalCents)}\n \n \n\n {/* ── Dashed divider ── */}\n

\n\n {/* ── Chart ── */}\n

\n \n Last 30 Days\n

\n\n {loadingChart ? (\n \n Loading…\n

\n ) : chartData.length === 0 ? (\n \n No data yet — start saving!\n \n ) : (\n \n )}\n\n {/* Legend */}\n {chartData.length > 0 && (\n \n

\n \n Daily total\n

\n \n 7-day avg\n

\n \n )}\n \n \n );\n}\n","deleted","label",[185,186,166],"frontend","components","permalink","https://www.val.town/x/figleaf/boymath/code/frontend/components/HistoryPage.tsx","extension","actionData","errors"]