Ryan Chen
e28d71fa5a
- Flask dashboard with Plotly charts (stores, monthly, hourly, weekday, heatmap) - Spotify Wrapped-style summary with year dropdown and inflation toggle - CSV upload flow (ephemeral, no storage) - Homepage with upload and saved data options - Import script for loading CSVs into SQLite - Dockerized with gunicorn for production Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
592 lines
24 KiB
Python
592 lines
24 KiB
Python
import os
|
|
import sqlite3
|
|
import json
|
|
from datetime import datetime
|
|
from collections import defaultdict
|
|
import csv
|
|
import io
|
|
from flask import Flask, render_template_string, request, redirect, url_for, flash
|
|
|
|
DB_PATH = os.environ.get("WEAKNESS_DB_PATH", "doordash.db")
|
|
|
|
# CPI-U annual average multipliers to 2026 dollars
|
|
CPI_TO_2026 = {
|
|
"2019": 1.28, "2020": 1.25, "2021": 1.18, "2022": 1.10,
|
|
"2023": 1.06, "2024": 1.03, "2025": 1.01, "2026": 1.00,
|
|
}
|
|
|
|
app = Flask(__name__)
|
|
app.secret_key = os.environ.get("SECRET_KEY", os.urandom(32))
|
|
app.config["MAX_CONTENT_LENGTH"] = 16 * 1024 * 1024 # 16MB max upload
|
|
|
|
EXPECTED_HEADER = [
|
|
"ITEM", "CATEGORY", "STORE_NAME", "UNIT_PRICE", "QUANTITY",
|
|
"SUBTOTAL", "CREATED_AT", "DELIVERY_TIME", "DELIVERY_ADDRESS",
|
|
]
|
|
|
|
|
|
def compute_wrapped(subset_rows, inflation_adjust=False):
|
|
if not subset_rows:
|
|
return None
|
|
ss = defaultdict(float)
|
|
hc = defaultdict(int)
|
|
wc = defaultdict(int)
|
|
ms = defaultdict(float)
|
|
ic = defaultdict(int)
|
|
orders = set()
|
|
t_spent = 0.0
|
|
for r in subset_rows:
|
|
sub = float(r["SUBTOTAL"])
|
|
if inflation_adjust:
|
|
try:
|
|
yr = str(datetime.fromisoformat(r["CREATED_AT"]).year)
|
|
except (ValueError, TypeError):
|
|
yr = "2026"
|
|
sub *= CPI_TO_2026.get(yr, 1.0)
|
|
t_spent += sub
|
|
ss[r["STORE_NAME"]] += sub
|
|
ic[r["ITEM"]] += 1
|
|
try:
|
|
dt = datetime.fromisoformat(r["CREATED_AT"])
|
|
except (ValueError, TypeError):
|
|
continue
|
|
orders.add(r["CREATED_AT"])
|
|
hc[dt.hour] += 1
|
|
wc[dt.strftime("%A")] += 1
|
|
ms[dt.strftime("%Y-%m")] += sub
|
|
|
|
fs = max(ss.items(), key=lambda x: x[1])
|
|
ph = max(hc.items(), key=lambda x: x[1])
|
|
pd = max(wc.items(), key=lambda x: x[1])
|
|
bm = max(ms.items(), key=lambda x: x[1])
|
|
fi = max(ic.items(), key=lambda x: x[1])
|
|
avg = round(t_spent / len(orders), 2) if orders else 0
|
|
return {
|
|
"fav_store_name": fs[0],
|
|
"fav_store_total": f"${fs[1]:,.2f}",
|
|
"fav_store_pct": round(fs[1] / t_spent * 100, 1) if t_spent else 0,
|
|
"peak_hour_label": f"{ph[0]}:00",
|
|
"peak_hour_count": ph[1],
|
|
"peak_day_name": pd[0],
|
|
"biggest_month_label": datetime.strptime(bm[0], "%Y-%m").strftime("%B %Y"),
|
|
"biggest_month_total": f"${bm[1]:,.2f}",
|
|
"avg_per_order": f"${avg:,.2f}",
|
|
"fav_item_name": fi[0],
|
|
"fav_item_count": fi[1],
|
|
"total_spent": f"${t_spent:,.2f}",
|
|
"total_items": len(subset_rows),
|
|
"total_orders": len(orders),
|
|
}
|
|
|
|
|
|
def render_dashboard(rows):
|
|
import numpy as np
|
|
|
|
total_spent = sum(float(r["SUBTOTAL"]) for r in rows)
|
|
total_orders_set = set()
|
|
store_spend = defaultdict(float)
|
|
month_spend = defaultdict(float)
|
|
hour_counts = defaultdict(int)
|
|
weekday_counts = defaultdict(int)
|
|
week_grid = [[0] * 7 for _ in range(53)]
|
|
|
|
for r in rows:
|
|
store_spend[r["STORE_NAME"]] += float(r["SUBTOTAL"])
|
|
try:
|
|
dt = datetime.fromisoformat(r["CREATED_AT"])
|
|
except (ValueError, TypeError):
|
|
continue
|
|
total_orders_set.add(r["CREATED_AT"])
|
|
month_key = dt.strftime("%Y-%m")
|
|
month_spend[month_key] += float(r["SUBTOTAL"])
|
|
hour_counts[dt.hour] += 1
|
|
weekday_counts[dt.strftime("%A")] += 1
|
|
week = min(dt.isocalendar().week - 1, 52)
|
|
day = dt.isocalendar().weekday - 1
|
|
week_grid[week][day] += float(r["SUBTOTAL"])
|
|
|
|
year_data = defaultdict(list)
|
|
for r in rows:
|
|
try:
|
|
dt = datetime.fromisoformat(r["CREATED_AT"])
|
|
year_data[str(dt.year)].append(r)
|
|
except (ValueError, TypeError):
|
|
pass
|
|
|
|
wrapped_by_year = {"All Time": compute_wrapped(rows)}
|
|
wrapped_by_year_adj = {"All Time": compute_wrapped(rows, inflation_adjust=True)}
|
|
for year in sorted(year_data.keys()):
|
|
wrapped_by_year[year] = compute_wrapped(year_data[year])
|
|
wrapped_by_year_adj[year] = compute_wrapped(year_data[year], inflation_adjust=True)
|
|
|
|
top_stores = sorted(store_spend.items(), key=lambda x: x[1], reverse=True)[:15]
|
|
store_names = [s[0] for s in top_stores]
|
|
store_totals = [round(s[1], 2) for s in top_stores]
|
|
|
|
sorted_months = sorted(month_spend.keys())
|
|
month_totals = [round(month_spend[m], 2) for m in sorted_months]
|
|
|
|
hour_labels = list(range(24))
|
|
hour_values = [hour_counts.get(h, 0) for h in hour_labels]
|
|
hour_labels_str = [f"{h}:00" for h in hour_labels]
|
|
|
|
day_order = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
|
|
weekday_values = [weekday_counts.get(d, 0) for d in day_order]
|
|
|
|
grid = np.array(week_grid)
|
|
heatmap_data = np.rot90(grid).tolist()
|
|
heatmap_days = ["Sun", "Sat", "Fri", "Thu", "Wed", "Tue", "Mon"]
|
|
|
|
return render_template_string(
|
|
TEMPLATE,
|
|
total_spent=f"${total_spent:,.2f}",
|
|
total_items=len(rows),
|
|
total_orders=len(total_orders_set),
|
|
store_names=json.dumps(store_names),
|
|
store_totals=json.dumps(store_totals),
|
|
month_labels=json.dumps(sorted_months),
|
|
month_totals=json.dumps(month_totals),
|
|
hour_labels=json.dumps(hour_labels_str),
|
|
hour_values=json.dumps(hour_values),
|
|
day_order=json.dumps(day_order),
|
|
weekday_values=json.dumps(weekday_values),
|
|
heatmap_data=json.dumps(heatmap_data),
|
|
heatmap_days=json.dumps(heatmap_days),
|
|
wrapped_data=json.dumps(wrapped_by_year),
|
|
wrapped_data_adj=json.dumps(wrapped_by_year_adj),
|
|
)
|
|
|
|
|
|
def parse_csv_to_rows(text):
|
|
reader = csv.reader(io.StringIO(text))
|
|
header = [h.strip().upper() for h in next(reader)]
|
|
if header != EXPECTED_HEADER:
|
|
return None, "Invalid CSV header"
|
|
rows = []
|
|
for row in reader:
|
|
if len(row) != 9:
|
|
continue
|
|
rows.append({
|
|
"ITEM": row[0], "CATEGORY": row[1], "STORE_NAME": row[2],
|
|
"UNIT_PRICE": row[3], "QUANTITY": row[4], "SUBTOTAL": row[5],
|
|
"CREATED_AT": row[6], "DELIVERY_TIME": row[7], "DELIVERY_ADDRESS": row[8],
|
|
})
|
|
return rows, None
|
|
|
|
|
|
@app.route("/")
|
|
def home():
|
|
return render_template_string(HOME_TEMPLATE)
|
|
|
|
|
|
@app.route("/dashboard")
|
|
def dashboard():
|
|
conn = sqlite3.connect(DB_PATH)
|
|
conn.row_factory = sqlite3.Row
|
|
rows = conn.execute(
|
|
"SELECT ITEM, STORE_NAME, UNIT_PRICE, QUANTITY, SUBTOTAL, CREATED_AT FROM doordash"
|
|
).fetchall()
|
|
conn.close()
|
|
return render_dashboard(rows)
|
|
|
|
|
|
@app.route("/upload", methods=["GET", "POST"])
|
|
def upload():
|
|
if request.method == "POST":
|
|
file = request.files.get("csv_file")
|
|
if not file or not file.filename.endswith(".csv"):
|
|
flash("Please upload a .csv file", "error")
|
|
return redirect(url_for("home"))
|
|
|
|
text = file.stream.read().decode("utf-8")
|
|
rows, err = parse_csv_to_rows(text)
|
|
if err:
|
|
flash(err, "error")
|
|
return redirect(url_for("home"))
|
|
|
|
return render_dashboard(rows)
|
|
|
|
return redirect(url_for("home"))
|
|
|
|
|
|
HOME_TEMPLATE = """<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Moments of Weakness</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Nunito', sans-serif;
|
|
background: #f9f3e3;
|
|
color: #5c4a32;
|
|
min-height: 100vh;
|
|
display: flex; justify-content: center; align-items: center;
|
|
background-image:
|
|
radial-gradient(circle at 20% 80%, #e8f5e9 0%, transparent 40%),
|
|
radial-gradient(circle at 80% 20%, #fff8e1 0%, transparent 40%);
|
|
}
|
|
.home {
|
|
text-align: center;
|
|
max-width: 560px; width: 100%;
|
|
padding: 24px;
|
|
}
|
|
h1 { font-size: 42px; color: #3e7c17; font-weight: 800; margin-bottom: 8px; }
|
|
.tagline { color: #8b7355; font-size: 16px; margin-bottom: 40px; }
|
|
.flash { padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; font-weight: 700; }
|
|
.flash.error { background: #fde8e8; color: #c0392b; border: 1px solid #e6b0aa; }
|
|
.cards { display: flex; flex-direction: column; gap: 16px; }
|
|
.card {
|
|
background: #fffef5;
|
|
border: 3px solid #c4a96a;
|
|
border-radius: 20px;
|
|
padding: 32px;
|
|
box-shadow: 2px 3px 0 #c4a96a;
|
|
transition: transform 0.15s, box-shadow 0.15s;
|
|
}
|
|
.card:hover { transform: translateY(-2px); box-shadow: 2px 5px 0 #c4a96a; }
|
|
.card h2 { font-size: 20px; color: #3e7c17; margin-bottom: 6px; }
|
|
.card p { font-size: 14px; color: #8b7355; margin-bottom: 16px; }
|
|
|
|
.drop-zone {
|
|
border: 3px dashed #c4a96a;
|
|
border-radius: 14px;
|
|
padding: 32px 20px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
margin-bottom: 16px;
|
|
}
|
|
.drop-zone:hover, .drop-zone.dragover { background: #f5eed8; }
|
|
.drop-zone .icon { font-size: 36px; margin-bottom: 6px; }
|
|
.drop-zone .label { font-size: 14px; font-weight: 700; color: #5c4a32; }
|
|
.drop-zone .sublabel { font-size: 12px; color: #8b7355; margin-top: 4px; }
|
|
.file-name { font-size: 13px; color: #3e7c17; font-weight: 700; margin-bottom: 12px; display: none; }
|
|
|
|
.btn {
|
|
font-family: 'Nunito', sans-serif;
|
|
font-size: 15px; font-weight: 800;
|
|
border: none; border-radius: 12px;
|
|
padding: 12px 32px;
|
|
cursor: pointer; transition: background 0.2s;
|
|
text-decoration: none; display: inline-block;
|
|
}
|
|
.btn-primary { background: #3e7c17; color: #fff; }
|
|
.btn-primary:hover { background: #2d6b1e; }
|
|
.btn-primary:disabled { background: #aaa; cursor: not-allowed; }
|
|
.btn-outline { background: transparent; color: #3e7c17; border: 2px solid #3e7c17; }
|
|
.btn-outline:hover { background: #3e7c17; color: #fff; }
|
|
.or-divider { color: #c4a96a; font-size: 13px; font-weight: 700; margin: 8px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="home">
|
|
<h1>Moments of Weakness</h1>
|
|
<p class="tagline">See exactly how much you've been spending on delivery</p>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% for cat, msg in messages %}
|
|
<div class="flash {{ cat }}">{{ msg }}</div>
|
|
{% endfor %}
|
|
{% endwith %}
|
|
|
|
<div class="cards">
|
|
<div class="card">
|
|
<h2>Upload Your Data</h2>
|
|
<p>Drop your DoorDash CSV export to see your dashboard. Nothing is stored.</p>
|
|
<form method="POST" action="/upload" enctype="multipart/form-data" id="upload-form">
|
|
<div class="drop-zone" id="drop-zone">
|
|
<div class="icon">📄</div>
|
|
<div class="label">Click or drag a CSV file here</div>
|
|
<div class="sublabel">consumer_order_details.csv from DoorDash</div>
|
|
</div>
|
|
<input type="file" name="csv_file" id="csv-input" accept=".csv" hidden>
|
|
<div class="file-name" id="file-name"></div>
|
|
<button type="submit" class="btn btn-primary" id="submit-btn" disabled>View Dashboard</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="or-divider">or</div>
|
|
|
|
<div class="card">
|
|
<h2>View Saved Data</h2>
|
|
<p>Browse the dashboard with previously imported order history.</p>
|
|
<a href="/dashboard" class="btn btn-outline">Open Dashboard</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const dropZone = document.getElementById('drop-zone');
|
|
const input = document.getElementById('csv-input');
|
|
const fileName = document.getElementById('file-name');
|
|
const submitBtn = document.getElementById('submit-btn');
|
|
|
|
dropZone.addEventListener('click', () => input.click());
|
|
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('dragover'); });
|
|
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
|
|
dropZone.addEventListener('drop', e => {
|
|
e.preventDefault(); dropZone.classList.remove('dragover');
|
|
if (e.dataTransfer.files.length) { input.files = e.dataTransfer.files; showFile(); }
|
|
});
|
|
input.addEventListener('change', showFile);
|
|
|
|
function showFile() {
|
|
if (input.files.length) {
|
|
fileName.textContent = input.files[0].name;
|
|
fileName.style.display = 'block';
|
|
submitBtn.disabled = false;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
"""
|
|
|
|
TEMPLATE = """<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Weakness Dashboard</title>
|
|
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Nunito', sans-serif;
|
|
background: #f9f3e3;
|
|
color: #5c4a32;
|
|
padding: 24px;
|
|
background-image:
|
|
radial-gradient(circle at 20% 80%, #e8f5e9 0%, transparent 40%),
|
|
radial-gradient(circle at 80% 20%, #fff8e1 0%, transparent 40%);
|
|
}
|
|
h1 { font-size: 32px; margin-bottom: 4px; color: #3e7c17; font-weight: 800; }
|
|
.subtitle { color: #8b7355; margin-bottom: 24px; font-size: 14px; }
|
|
.stats { display: flex; gap: 16px; margin-bottom: 24px; }
|
|
.stat {
|
|
background: #fffef5;
|
|
border: 3px solid #c4a96a;
|
|
border-radius: 16px;
|
|
padding: 16px 24px;
|
|
flex: 1;
|
|
box-shadow: 2px 3px 0 #c4a96a;
|
|
}
|
|
.stat .value { font-size: 28px; font-weight: 800; color: #d4652a; }
|
|
.stat .label { color: #8b7355; font-size: 13px; margin-top: 4px; font-weight: 700; }
|
|
.wrapped {
|
|
background: linear-gradient(135deg, #d4652a, #e88b6a, #f4c842);
|
|
border-radius: 20px;
|
|
padding: 32px;
|
|
margin-bottom: 24px;
|
|
color: #fff;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
.wrapped {
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
}
|
|
.wrapped-header {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
}
|
|
.wrapped h2 { font-size: 24px; font-weight: 800; margin-bottom: 2px; }
|
|
.wrapped .tagline { font-size: 14px; opacity: 0.85; }
|
|
#year-select {
|
|
font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700;
|
|
background: rgba(255,255,255,0.2); color: #fff; border: 2px solid rgba(255,255,255,0.4);
|
|
border-radius: 10px; padding: 8px 14px; cursor: pointer; appearance: auto;
|
|
}
|
|
#year-select option { color: #333; background: #fff; }
|
|
#wrapped-cards {
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
}
|
|
.wrap-card {
|
|
background: rgba(255,255,255,0.15);
|
|
backdrop-filter: blur(4px);
|
|
border-radius: 14px;
|
|
padding: 20px;
|
|
}
|
|
.wrap-card .big { font-size: 22px; font-weight: 800; line-height: 1.2; }
|
|
.wrap-card .note { font-size: 13px; opacity: 0.85; margin-top: 6px; }
|
|
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
|
|
.chart-card {
|
|
background: #fffef5;
|
|
border: 3px solid #c4a96a;
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
min-height: 400px;
|
|
box-shadow: 2px 3px 0 #c4a96a;
|
|
}
|
|
.full-width { grid-column: 1 / -1; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
|
<h1>Moments of Weakness</h1>
|
|
<a href="/" style="font-size:14px; font-weight:700; color:#3e7c17; text-decoration:none; background:#fffef5; border:2px solid #c4a96a; border-radius:10px; padding:8px 16px;">Home</a>
|
|
</div>
|
|
<p class="subtitle">DoorDash spending dashboard</p>
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% for cat, msg in messages %}
|
|
<div style="padding:10px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; font-weight:700;
|
|
{% if cat == 'success' %}background:#e8f5e9; color:#27ae60; border:1px solid #a9dfbf;
|
|
{% else %}background:#fde8e8; color:#c0392b; border:1px solid #e6b0aa;{% endif %}">{{ msg }}</div>
|
|
{% endfor %}
|
|
{% endwith %}
|
|
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="value">{{ total_spent }}</div>
|
|
<div class="label">Total Spent</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="value">{{ total_items }}</div>
|
|
<div class="label">Items Ordered</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="value">{{ total_orders }}</div>
|
|
<div class="label">Unique Orders</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapped">
|
|
<div class="wrapped-header">
|
|
<div>
|
|
<h2>Your Weakness Wrapped</h2>
|
|
<p class="tagline">A look at your most questionable financial decisions</p>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:16px;">
|
|
<label style="display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; cursor:pointer;">
|
|
<input type="checkbox" id="inflation-toggle"> Inflation adjusted (2026 $)
|
|
</label>
|
|
<select id="year-select"></select>
|
|
</div>
|
|
</div>
|
|
<div id="wrapped-cards"></div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="chart-card">
|
|
<div id="stores"></div>
|
|
</div>
|
|
<div class="chart-card">
|
|
<div id="monthly"></div>
|
|
</div>
|
|
<div class="chart-card">
|
|
<div id="hourly"></div>
|
|
</div>
|
|
<div class="chart-card">
|
|
<div id="weekday"></div>
|
|
</div>
|
|
<div class="chart-card full-width">
|
|
<div id="heatmap"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const bg = '#fffef5';
|
|
const layout_base = {
|
|
paper_bgcolor: bg, plot_bgcolor: bg,
|
|
font: { family: 'Nunito', color: '#5c4a32', size: 12 },
|
|
margin: { t: 44, b: 60, l: 60, r: 20 },
|
|
height: 370,
|
|
};
|
|
const cfg = { responsive: true };
|
|
|
|
Plotly.newPlot('stores', [{
|
|
x: {{ store_totals|safe }}, y: {{ store_names|safe }},
|
|
type: 'bar', orientation: 'h',
|
|
marker: { color: '#6abf69', line: { color: '#3e7c17', width: 1.5 } },
|
|
}], { ...layout_base, title: { text: 'Top Stores by Spend', font: { size: 16 } }, yaxis: { autorange: 'reversed' }, margin: { ...layout_base.margin, l: 180 } }, cfg);
|
|
|
|
Plotly.newPlot('monthly', [{
|
|
x: {{ month_labels|safe }}, y: {{ month_totals|safe }},
|
|
type: 'bar',
|
|
marker: { color: '#7ecce5', line: { color: '#4a9bb5', width: 1.5 } },
|
|
}], { ...layout_base, title: { text: 'Monthly Spending', font: { size: 16 } } }, cfg);
|
|
|
|
Plotly.newPlot('hourly', [{
|
|
x: {{ hour_labels|safe }}, y: {{ hour_values|safe }},
|
|
type: 'bar',
|
|
marker: { color: '#f4c842', line: { color: '#c4a96a', width: 1.5 } },
|
|
}], { ...layout_base, title: { text: 'Orders by Hour', font: { size: 16 } } }, cfg);
|
|
|
|
Plotly.newPlot('weekday', [{
|
|
x: {{ day_order|safe }}, y: {{ weekday_values|safe }},
|
|
type: 'bar',
|
|
marker: { color: '#e88b6a', line: { color: '#c46a4a', width: 1.5 } },
|
|
}], { ...layout_base, title: { text: 'Orders by Day of Week', font: { size: 16 } } }, cfg);
|
|
|
|
// Wrapped
|
|
const wrappedRaw = {{ wrapped_data|safe }};
|
|
const wrappedAdj = {{ wrapped_data_adj|safe }};
|
|
const yearSelect = document.getElementById('year-select');
|
|
const inflationToggle = document.getElementById('inflation-toggle');
|
|
const cardsDiv = document.getElementById('wrapped-cards');
|
|
|
|
Object.keys(wrappedRaw).forEach(key => {
|
|
const opt = document.createElement('option');
|
|
opt.value = key; opt.textContent = key;
|
|
yearSelect.appendChild(opt);
|
|
});
|
|
|
|
function renderWrapped(key) {
|
|
const src = inflationToggle.checked ? wrappedAdj : wrappedRaw;
|
|
const d = src[key];
|
|
if (!d) { cardsDiv.innerHTML = ''; return; }
|
|
cardsDiv.innerHTML = `
|
|
<div style="display:flex; gap:12px;">
|
|
<div class="wrap-card" style="flex:1; text-align:center;">
|
|
<div class="big">${d.total_spent}</div>
|
|
<div class="note">Total spent${key === 'All Time' ? '' : ' in ' + key}</div>
|
|
</div>
|
|
<div class="wrap-card" style="flex:1; text-align:center;">
|
|
<div class="big">${d.total_orders}</div>
|
|
<div class="note">Orders placed${key === 'All Time' ? '' : ' in ' + key}</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrap-card">
|
|
<div class="big">${d.fav_store_name}</div>
|
|
<div class="note">Your #1 store. You gave them ${d.fav_store_total} (${d.fav_store_pct}% of spending). They should name a menu item after you.</div>
|
|
</div>
|
|
<div class="wrap-card">
|
|
<div class="big">${d.fav_item_name}</div>
|
|
<div class="note">Ordered ${d.fav_item_count} times. At this point it's not a craving, it's a personality trait.</div>
|
|
</div>
|
|
<div class="wrap-card">
|
|
<div class="big">${d.peak_hour_label} on ${d.peak_day_name}s</div>
|
|
<div class="note">Your peak ordering time. ${d.peak_hour_count} orders placed at this hour. The delivery driver knows your face.</div>
|
|
</div>
|
|
<div class="wrap-card">
|
|
<div class="big">${d.biggest_month_label}</div>
|
|
<div class="note">Your weakest month at ${d.biggest_month_total}. Whatever happened that month... we hope you're okay.</div>
|
|
</div>
|
|
<div class="wrap-card" style="text-align: center;">
|
|
<div class="big">${d.avg_per_order} per order</div>
|
|
<div class="note">Your average order total. That's a lot of "I'll just get something small."</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
yearSelect.addEventListener('change', () => renderWrapped(yearSelect.value));
|
|
inflationToggle.addEventListener('change', () => renderWrapped(yearSelect.value));
|
|
renderWrapped('All Time');
|
|
|
|
Plotly.newPlot('heatmap', [{
|
|
z: {{ heatmap_data|safe }}, y: {{ heatmap_days|safe }},
|
|
type: 'heatmap',
|
|
colorscale: [[0, '#fffef5'], [0.25, '#d4e8c2'], [0.5, '#8fc46a'], [0.75, '#4a9b3e'], [1, '#2d6b1e']],
|
|
colorbar: { title: '$' },
|
|
}], { ...layout_base, title: { text: 'Weekly Spending Heatmap', font: { size: 16 } }, height: 300, margin: { ...layout_base.margin, l: 60 } }, cfg);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
"""
|
|
|
|
if __name__ == "__main__":
|
|
import argparse
|
|
|
|
parser = argparse.ArgumentParser()
|
|
parser.add_argument("-p", "--port", type=int, default=5000)
|
|
args = parser.parse_args()
|
|
app.run(debug=True, port=args.port)
|