+ ${(() => {
+ // 1. Generate last 30 days keys
+ const now = new Date();
+ const days = [];
+ for (let i = 29; i >= 0; i--) {
+ const d = new Date(now);
+ d.setDate(d.getDate() - i);
+ d.setHours(0, 0, 0, 0);
+ days.push(d.getTime());
+ }
+
+ // 2. Aggregate history
+ const dailyTotals = {}; // timestamp -> ml
+ this.history.forEach(h => {
+ const d = new Date(h.timestamp);
+ d.setHours(0, 0, 0, 0);
+ const key = d.getTime();
+ dailyTotals[key] = (dailyTotals[key] || 0) + h.amount;
+ });
+
+ // 3. Render Bars
+ // Max value for scaling
+ const maxVal = Math.max(3000, ...Object.values(dailyTotals)); // Min scale 3000ml
+
+ return days.map((ts, index) => {
+ const date = new Date(ts);
+ const total = dailyTotals[ts] || 0;
+ const heightPct = Math.min((total / maxVal) * 100, 100);
+ const isToday = index === 29;
+ const label = date.getDate(); // Just day number
+
+ return `
+
+
+
+ ${(total / 1000).toFixed(1)}L
+
+
+
${label}
+
+ `;
+ }).join('');
+ })()}
+