Add Baltimore/Richmond MSAs and employment level chart
- Added Baltimore-Columbia-Towson MSA (CBSA 12580) and Richmond MSA (CBSA 40060) - Now covers 6 geographies: DC, MD, VA states + DC/Baltimore/Richmond MSAs - Added second Chart.js line chart showing employment levels over 24 months - Cards grid updated to 3-column layout (2 rows of 3) - Y-axis auto-formats to K/M for employment chart Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@ -45,7 +45,7 @@
|
||||
.header .subtitle { opacity: 0.7; font-size: 0.875rem; }
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -68,23 +68,26 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.panel h2 { margin: 0 0 20px; font-size: 1rem; color: #333; }
|
||||
.chart-wrap { position: relative; height: 320px; }
|
||||
.chart-wrap { position: relative; height: 340px; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
|
||||
th { text-align: left; padding: 10px 12px; border-bottom: 2px solid #e5e7eb;
|
||||
font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; }
|
||||
font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; }
|
||||
td { padding: 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
.tval { font-weight: 600; font-size: 1rem; }
|
||||
.tchg { font-size: 0.75rem; color: #555; margin-top: 2px; }
|
||||
.up { color: #c0392b; font-weight: 600; }
|
||||
.down { color: #1e8449; font-weight: 600; }
|
||||
.up { color: #c0392b; font-weight: 600; }
|
||||
.down { color: #1e8449; font-weight: 600; }
|
||||
.neutral { color: #888; }
|
||||
.chg-label { background: #eef0f3; border-radius: 3px; padding: 1px 4px;
|
||||
font-size: 0.7rem; font-weight: 600; color: #555; margin-right: 2px; }
|
||||
.note { font-size: 0.75rem; color: #999; margin-top: 8px; }
|
||||
@media (max-width: 900px) {
|
||||
.note { font-size: 0.75rem; color: #999; margin-top: 10px; }
|
||||
@media (max-width: 960px) {
|
||||
.cards { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.cards { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -139,6 +142,26 @@
|
||||
<div><span class="chg-label">YoY</span> <span class="up">▲ +0.6</span> pp</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="border-top: 4px solid #d68910">
|
||||
<div class="card-geo">Baltimore MSA</div>
|
||||
<div class="card-rate" style="color:#d68910">4.3%</div>
|
||||
<div class="card-period">April 2026</div>
|
||||
<div class="card-changes">
|
||||
<div><span class="chg-label">MoM</span> <span class="neutral">— 0.0</span> pp</div>
|
||||
<div><span class="chg-label">YoY</span> <span class="up">▲ +0.9</span> pp</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="border-top: 4px solid #117a65">
|
||||
<div class="card-geo">Richmond MSA</div>
|
||||
<div class="card-rate" style="color:#117a65">3.4%</div>
|
||||
<div class="card-period">April 2026</div>
|
||||
<div class="card-changes">
|
||||
<div><span class="chg-label">MoM</span> <span class="down">▼ -0.3</span> pp</div>
|
||||
<div><span class="chg-label">YoY</span> <span class="up">▲ +0.4</span> pp</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
@ -146,14 +169,22 @@
|
||||
<div class="chart-wrap">
|
||||
<canvas id="rateChart"></canvas>
|
||||
</div>
|
||||
<p class="note">▲ Red = rate rising (more unemployment). ▼ Green = rate falling.</p>
|
||||
<p class="note">▲ Red = rate rising | ▼ Green = rate falling | Not seasonally adjusted</p>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Employment Level Trend — Last 24 Months</h2>
|
||||
<div class="chart-wrap">
|
||||
<canvas id="emplChart"></canvas>
|
||||
</div>
|
||||
<p class="note">State totals (DC/MD/VA) are significantly larger than MSA figures. Hover to compare values.</p>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Current Month Summary</h2>
|
||||
|
||||
<table>
|
||||
<thead><tr><th>Measure</th><th style="color:#c0392b">District of Columbia</th><th style="color:#2471a3">Maryland</th><th style="color:#1e8449">Virginia</th><th style="color:#7d3c98">DC Metro MSA</th></tr></thead>
|
||||
<thead><tr><th>Measure</th><th style="color:#c0392b">District of Columbia</th><th style="color:#2471a3">Maryland</th><th style="color:#1e8449">Virginia</th><th style="color:#7d3c98">DC Metro MSA</th><th style="color:#d68910">Baltimore MSA</th><th style="color:#117a65">Richmond MSA</th></tr></thead>
|
||||
<tbody><tr><td><strong>Unemp Rate</strong></td><td>
|
||||
<div class="tval">5.5%</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -0.2</span> pp</div>
|
||||
@ -170,6 +201,14 @@
|
||||
<div class="tval">3.9%</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -0.2</span> pp</div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +0.6</span> pp</div>
|
||||
</td><td>
|
||||
<div class="tval">4.3%</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="neutral">— 0.0</span> pp</div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +0.9</span> pp</div>
|
||||
</td><td>
|
||||
<div class="tval">3.4%</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -0.3</span> pp</div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +0.4</span> pp</div>
|
||||
</td></tr><tr><td><strong>Unemployed</strong></td><td>
|
||||
<div class="tval">22,184</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -694.0</span></div>
|
||||
@ -186,6 +225,14 @@
|
||||
<div class="tval">134,887</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -7625.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +17530.0</span></div>
|
||||
</td><td>
|
||||
<div class="tval">64,081</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -44.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +13358.0</span></div>
|
||||
</td><td>
|
||||
<div class="tval">24,315</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -2538.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +2734.0</span></div>
|
||||
</td></tr><tr><td><strong>Employed</strong></td><td>
|
||||
<div class="tval">379,272</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -495.0</span></div>
|
||||
@ -202,6 +249,14 @@
|
||||
<div class="tval">3,314,544</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="up">▲ +5437.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -100507.0</span></div>
|
||||
</td><td>
|
||||
<div class="tval">1,436,841</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -3081.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -6069.0</span></div>
|
||||
</td><td>
|
||||
<div class="tval">691,512</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="up">▲ +1189.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -9943.0</span></div>
|
||||
</td></tr><tr><td><strong>Labor Force</strong></td><td>
|
||||
<div class="tval">401,456</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -1189.0</span></div>
|
||||
@ -218,20 +273,26 @@
|
||||
<div class="tval">3,449,431</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -2188.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="neutral">—</span></div>
|
||||
</td><td>
|
||||
<div class="tval">1,500,922</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -3125.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="neutral">—</span></div>
|
||||
</td><td>
|
||||
<div class="tval">715,827</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -1349.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="neutral">—</span></div>
|
||||
</td></tr></tbody>
|
||||
</table>
|
||||
<p class="note">MoM = month-over-month net change | YoY = year-over-year net change | pp = percentage points</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const rateData = {"labels": ["Apr 2024", "May 2024", "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024", "Nov 2024", "Dec 2024", "Jan 2025", "Feb 2025", "Mar 2025", "Apr 2025", "May 2025", "Jun 2025", "Jul 2025", "Aug 2025", "Sep 2025", "Nov 2025", "Dec 2025", "Jan 2026", "Feb 2026", "Mar 2026", "Apr 2026"], "datasets": [{"label": "District of Columbia", "data": [4.5, 5.0, 5.7, 6.0, 6.1, 5.3, 5.2, 5.2, 5.1, 5.8, 6.0, 6.1, 5.5, 5.8, 6.4, 6.8, 7.1, 6.8, 6.8, 6.4, 6.2, 6.1, 5.7, 5.5], "borderColor": "#c0392b", "backgroundColor": "#c0392b22", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Maryland", "data": [2.6, 2.7, 3.5, 3.6, 3.6, 3.1, 3.3, 3.4, 3.0, 3.6, 3.9, 3.8, 3.4, 3.7, 4.2, 4.4, 4.6, 4.3, 4.2, 3.7, 4.6, 4.9, 4.4, 4.4], "borderColor": "#2471a3", "backgroundColor": "#2471a322", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Virginia", "data": [2.5, 2.8, 3.1, 3.2, 3.4, 2.9, 2.9, 3.1, 2.7, 3.2, 3.3, 3.3, 3.0, 3.3, 3.5, 3.5, 3.6, 3.4, 3.9, 3.5, 3.9, 3.9, 3.8, 3.4], "borderColor": "#1e8449", "backgroundColor": "#1e844922", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "DC Metro MSA", "data": [2.6, 2.8, 3.3, 3.4, 3.5, 3.1, 3.2, 3.2, 2.9, 3.4, 3.6, 3.6, 3.3, 3.6, 3.9, 4.1, 4.2, 4.1, 4.3, 3.8, 4.3, 4.5, 4.1, 3.9], "borderColor": "#7d3c98", "backgroundColor": "#7d3c9822", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}]};
|
||||
const rateData = {"labels": ["Apr 2024", "May 2024", "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024", "Nov 2024", "Dec 2024", "Jan 2025", "Feb 2025", "Mar 2025", "Apr 2025", "May 2025", "Jun 2025", "Jul 2025", "Aug 2025", "Sep 2025", "Nov 2025", "Dec 2025", "Jan 2026", "Feb 2026", "Mar 2026", "Apr 2026"], "datasets": [{"label": "District of Columbia", "data": [4.5, 5.0, 5.7, 6.0, 6.1, 5.3, 5.2, 5.2, 5.1, 5.8, 6.0, 6.1, 5.5, 5.8, 6.4, 6.8, 7.1, 6.8, 6.8, 6.4, 6.2, 6.1, 5.7, 5.5], "borderColor": "#c0392b", "backgroundColor": "#c0392b22", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Maryland", "data": [2.6, 2.7, 3.5, 3.6, 3.6, 3.1, 3.3, 3.4, 3.0, 3.6, 3.9, 3.8, 3.4, 3.7, 4.2, 4.4, 4.6, 4.3, 4.2, 3.7, 4.6, 4.9, 4.4, 4.4], "borderColor": "#2471a3", "backgroundColor": "#2471a322", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Virginia", "data": [2.5, 2.8, 3.1, 3.2, 3.4, 2.9, 2.9, 3.1, 2.7, 3.2, 3.3, 3.3, 3.0, 3.3, 3.5, 3.5, 3.6, 3.4, 3.9, 3.5, 3.9, 3.9, 3.8, 3.4], "borderColor": "#1e8449", "backgroundColor": "#1e844922", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "DC Metro MSA", "data": [2.6, 2.8, 3.3, 3.4, 3.5, 3.1, 3.2, 3.2, 2.9, 3.4, 3.6, 3.6, 3.3, 3.6, 3.9, 4.1, 4.2, 4.1, 4.3, 3.8, 4.3, 4.5, 4.1, 3.9], "borderColor": "#7d3c98", "backgroundColor": "#7d3c9822", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Baltimore MSA", "data": [2.7, 2.8, 3.5, 3.7, 3.7, 3.1, 3.3, 3.4, 3.0, 3.6, 3.9, 3.7, 3.4, 3.7, 4.1, 4.4, 4.6, 4.3, 4.1, 3.6, 4.5, 4.8, 4.3, 4.3], "borderColor": "#d68910", "backgroundColor": "#d6891022", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Richmond MSA", "data": [2.6, 2.9, 3.2, 3.3, 3.5, 3.1, 3.1, 3.2, 2.8, 3.3, 3.3, 3.3, 3.0, 3.2, 3.4, 3.4, 3.5, 3.3, 3.8, 3.4, 3.8, 3.8, 3.7, 3.4], "borderColor": "#117a65", "backgroundColor": "#117a6522", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}]};
|
||||
const emplData = {"labels": ["Apr 2024", "May 2024", "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024", "Nov 2024", "Dec 2024", "Jan 2025", "Feb 2025", "Mar 2025", "Apr 2025", "May 2025", "Jun 2025", "Jul 2025", "Aug 2025", "Sep 2025", "Nov 2025", "Dec 2025", "Jan 2026", "Feb 2026", "Mar 2026", "Apr 2026"], "datasets": [{"label": "District of Columbia", "data": [393443.0, 388487.0, 391286.0, 395848.0, 386519.0, 389157.0, 390915.0, 391918.0, 391619.0, 390797.0, 393994.0, 391957.0, 389067.0, 384898.0, 389619.0, 389692.0, 378170.0, 378669.0, 381416.0, 382881.0, 377509.0, 380928.0, 379767.0, 379272.0], "borderColor": "#c0392b", "backgroundColor": "#c0392b22", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Maryland", "data": [3143318.0, 3131519.0, 3155007.0, 3178734.0, 3140716.0, 3137737.0, 3142415.0, 3123311.0, 3127985.0, 3103018.0, 3095182.0, 3122412.0, 3119327.0, 3099783.0, 3120745.0, 3132308.0, 3095791.0, 3089859.0, 3063947.0, 3067773.0, 3021249.0, 3044373.0, 3071190.0, 3066322.0], "borderColor": "#2471a3", "backgroundColor": "#2471a322", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Virginia", "data": [4445795.0, 4427688.0, 4448018.0, 4457130.0, 4405504.0, 4410793.0, 4418560.0, 4382390.0, 4389991.0, 4378048.0, 4375837.0, 4402832.0, 4416983.0, 4389680.0, 4403882.0, 4404038.0, 4359467.0, 4357817.0, 4319110.0, 4320551.0, 4304247.0, 4299374.0, 4318506.0, 4333772.0], "borderColor": "#1e8449", "backgroundColor": "#1e844922", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "DC Metro MSA", "data": [3436946.0, 3424474.0, 3448813.0, 3474714.0, 3420626.0, 3418818.0, 3425602.0, 3407429.0, 3412353.0, 3402547.0, 3398633.0, 3410007.0, 3415051.0, 3390834.0, 3412149.0, 3424411.0, 3364937.0, 3354485.0, 3320220.0, 3322050.0, 3286604.0, 3294226.0, 3309107.0, 3314544.0], "borderColor": "#7d3c98", "backgroundColor": "#7d3c9822", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Baltimore MSA", "data": [1451831.0, 1446924.0, 1456421.0, 1467013.0, 1453733.0, 1449952.0, 1454088.0, 1448342.0, 1451430.0, 1438845.0, 1434143.0, 1445000.0, 1442910.0, 1434397.0, 1441441.0, 1445193.0, 1437482.0, 1435013.0, 1429844.0, 1433070.0, 1416307.0, 1428911.0, 1439922.0, 1436841.0], "borderColor": "#d68910", "backgroundColor": "#d6891022", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Richmond MSA", "data": [701863.0, 702240.0, 706580.0, 710358.0, 699383.0, 696886.0, 699164.0, 694222.0, 696686.0, 698143.0, 695270.0, 698984.0, 701455.0, 699723.0, 704918.0, 708022.0, 699445.0, 697769.0, 691306.0, 692163.0, 690372.0, 687296.0, 690323.0, 691512.0], "borderColor": "#117a65", "backgroundColor": "#117a6522", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}]};
|
||||
|
||||
new Chart(document.getElementById("rateChart"), {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: rateData.labels,
|
||||
datasets: rateData.datasets,
|
||||
},
|
||||
data: { labels: rateData.labels, datasets: rateData.datasets },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
@ -250,10 +311,33 @@ new Chart(document.getElementById("rateChart"), {
|
||||
ticks: { callback: v => v + "%" },
|
||||
grid: { color: "#f0f0f0" },
|
||||
},
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { maxTicksLimit: 12 },
|
||||
x: { grid: { display: false }, ticks: { maxTicksLimit: 12 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
new Chart(document.getElementById("emplChart"), {
|
||||
type: "line",
|
||||
data: { labels: emplData.labels, datasets: emplData.datasets },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { mode: "index", intersect: false },
|
||||
plugins: {
|
||||
legend: { position: "top", labels: { usePointStyle: true, padding: 16 } },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: ctx => ` ${ctx.dataset.label}: ${ctx.parsed.y !== null ? ctx.parsed.y.toLocaleString() : "N/A"}`
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
title: { display: true, text: "Employed Persons" },
|
||||
ticks: { callback: v => (v >= 1000000 ? (v/1000000).toFixed(1)+"M" : (v/1000).toFixed(0)+"K") },
|
||||
grid: { color: "#f0f0f0" },
|
||||
},
|
||||
x: { grid: { display: false }, ticks: { maxTicksLimit: 12 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
"""
|
||||
DC/MD/VA Unemployment — Static HTML Report Generator
|
||||
Run: python3 generate_report.py
|
||||
Output: dc_md_va_unemployment_report.html (open in any browser)
|
||||
Output: dc_md_va_unemployment_report.html (open in any browser, no internet required)
|
||||
"""
|
||||
|
||||
import requests
|
||||
@ -13,15 +13,17 @@ from config import BLS_API_KEY, BLS_API_BASE
|
||||
SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Series config (same as dashboard script)
|
||||
# Series config
|
||||
# ---------------------------------------------------------------------------
|
||||
GEOS = ["DC", "MD", "VA", "DCMSA"]
|
||||
GEOS = ["DC", "MD", "VA", "DCMSA", "BAL", "RIC"]
|
||||
|
||||
LABELS = {
|
||||
"DC": "District of Columbia",
|
||||
"MD": "Maryland",
|
||||
"VA": "Virginia",
|
||||
"DCMSA": "DC Metro MSA",
|
||||
"BAL": "Baltimore MSA",
|
||||
"RIC": "Richmond MSA",
|
||||
}
|
||||
|
||||
COLORS = {
|
||||
@ -29,25 +31,41 @@ COLORS = {
|
||||
"MD": "#2471a3",
|
||||
"VA": "#1e8449",
|
||||
"DCMSA": "#7d3c98",
|
||||
"BAL": "#d68910",
|
||||
"RIC": "#117a65",
|
||||
}
|
||||
|
||||
SERIES = {
|
||||
# District of Columbia (state FIPS 11)
|
||||
"DC_rate": "LAUST110000000000003",
|
||||
"DC_unemployed": "LAUST110000000000004",
|
||||
"DC_employed": "LAUST110000000000005",
|
||||
"DC_laborforce": "LAUST110000000000006",
|
||||
# Maryland (state FIPS 24)
|
||||
"MD_rate": "LAUST240000000000003",
|
||||
"MD_unemployed": "LAUST240000000000004",
|
||||
"MD_employed": "LAUST240000000000005",
|
||||
"MD_laborforce": "LAUST240000000000006",
|
||||
# Virginia (state FIPS 51)
|
||||
"VA_rate": "LAUST510000000000003",
|
||||
"VA_unemployed": "LAUST510000000000004",
|
||||
"VA_employed": "LAUST510000000000005",
|
||||
"VA_laborforce": "LAUST510000000000006",
|
||||
# DC-Arlington-Alexandria MSA (state 11, CBSA 47900)
|
||||
"DCMSA_rate": "LAUMT114790000000003",
|
||||
"DCMSA_unemployed":"LAUMT114790000000004",
|
||||
"DCMSA_employed": "LAUMT114790000000005",
|
||||
"DCMSA_laborforce":"LAUMT114790000000006",
|
||||
# Baltimore-Columbia-Towson MSA (state 24, CBSA 12580)
|
||||
"BAL_rate": "LAUMT241258000000003",
|
||||
"BAL_unemployed": "LAUMT241258000000004",
|
||||
"BAL_employed": "LAUMT241258000000005",
|
||||
"BAL_laborforce": "LAUMT241258000000006",
|
||||
# Richmond MSA (state 51, CBSA 40060)
|
||||
"RIC_rate": "LAUMT514006000000003",
|
||||
"RIC_unemployed": "LAUMT514006000000004",
|
||||
"RIC_employed": "LAUMT514006000000005",
|
||||
"RIC_laborforce": "LAUMT514006000000006",
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
@ -85,15 +103,8 @@ def chg(obs, window):
|
||||
return None
|
||||
|
||||
|
||||
def pct_chg(obs, window):
|
||||
try:
|
||||
return obs["calculations"]["pct_changes"].get(window)
|
||||
except (KeyError, TypeError):
|
||||
return None
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Prepare chart data — chronological, last 24 months, no gaps
|
||||
# Chart data builders
|
||||
# ---------------------------------------------------------------------------
|
||||
MONTH_ORDER = {f"M{i:02d}": i for i in range(1, 13)}
|
||||
MONTH_NAMES = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
||||
@ -101,37 +112,33 @@ MONTH_NAMES = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
||||
|
||||
|
||||
def sort_obs(data):
|
||||
"""Return observations sorted chronologically, monthly only, no nulls."""
|
||||
monthly = [o for o in data if o["period"].startswith("M") and o["value"] != "-"]
|
||||
return sorted(monthly, key=lambda o: (o["year"], MONTH_ORDER.get(o["period"], 0)))
|
||||
|
||||
|
||||
def build_rate_chart_data(results, months=24):
|
||||
"""Return labels list and per-geo value lists for the rate trend chart."""
|
||||
# Build a merged label set from all four geos
|
||||
def build_chart_data(results, measure, months=24):
|
||||
"""Build Chart.js labels + datasets for any measure (rate, employed, etc.)."""
|
||||
all_labels = {}
|
||||
for geo in GEOS:
|
||||
sid = SERIES[f"{geo}_rate"]
|
||||
sid = SERIES[f"{geo}_{measure}"]
|
||||
for obs in sort_obs(results.get(sid, [])):
|
||||
key = (obs["year"], obs["period"])
|
||||
m = MONTH_ORDER.get(obs["period"], 0)
|
||||
label = f"{MONTH_NAMES[m]} {obs['year']}"
|
||||
all_labels[key] = label
|
||||
all_labels[key] = f"{MONTH_NAMES[m]} {obs['year']}"
|
||||
|
||||
sorted_keys = sorted(all_labels.keys())[-months:]
|
||||
labels = [all_labels[k] for k in sorted_keys]
|
||||
|
||||
datasets = []
|
||||
for geo in GEOS:
|
||||
sid = SERIES[f"{geo}_rate"]
|
||||
sid = SERIES[f"{geo}_{measure}"]
|
||||
obs_by_key = {
|
||||
(o["year"], o["period"]): float(o["value"])
|
||||
for o in sort_obs(results.get(sid, []))
|
||||
}
|
||||
values = [obs_by_key.get(k) for k in sorted_keys]
|
||||
datasets.append({
|
||||
"label": LABELS[geo],
|
||||
"data": values,
|
||||
"data": [obs_by_key.get(k) for k in sorted_keys],
|
||||
"borderColor": COLORS[geo],
|
||||
"backgroundColor": COLORS[geo] + "22",
|
||||
"borderWidth": 2,
|
||||
@ -199,10 +206,10 @@ def build_cards(results):
|
||||
|
||||
def build_summary_table(results):
|
||||
measures = [
|
||||
("rate", "Unemp Rate", True),
|
||||
("unemployed", "Unemployed", False),
|
||||
("employed", "Employed", False),
|
||||
("laborforce", "Labor Force", False),
|
||||
("rate", "Unemp Rate", True),
|
||||
("unemployed", "Unemployed", False),
|
||||
("employed", "Employed", False),
|
||||
("laborforce", "Labor Force", False),
|
||||
]
|
||||
rows = []
|
||||
for measure, label, is_rate in measures:
|
||||
@ -211,15 +218,11 @@ def build_summary_table(results):
|
||||
sid = SERIES[f"{geo}_{measure}"]
|
||||
obs = latest(results.get(sid, []))
|
||||
val = fmt_rate(obs.get("value")) if is_rate else fmt_num(obs.get("value"))
|
||||
mom = chg(obs, "1")
|
||||
yoy = chg(obs, "12")
|
||||
suffix = "pp" if is_rate else ""
|
||||
mom_html = arrow(mom)
|
||||
yoy_html = arrow(yoy)
|
||||
row += f"""<td>
|
||||
<div class="tval">{val}</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> {mom_html}{' ' + suffix if suffix else ''}</div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> {yoy_html}{' ' + suffix if suffix else ''}</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> {arrow(chg(obs,"1"))}{' ' + suffix if suffix else ''}</div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> {arrow(chg(obs,"12"))}{' ' + suffix if suffix else ''}</div>
|
||||
</td>"""
|
||||
row += "</tr>"
|
||||
rows.append(row)
|
||||
@ -232,7 +235,7 @@ def build_summary_table(results):
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Main HTML template
|
||||
# HTML template
|
||||
# ---------------------------------------------------------------------------
|
||||
HTML_TEMPLATE = """<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@ -261,7 +264,7 @@ HTML_TEMPLATE = """<!DOCTYPE html>
|
||||
.header .subtitle {{ opacity: 0.7; font-size: 0.875rem; }}
|
||||
.cards {{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}}
|
||||
@ -284,23 +287,26 @@ HTML_TEMPLATE = """<!DOCTYPE html>
|
||||
margin-bottom: 24px;
|
||||
}}
|
||||
.panel h2 {{ margin: 0 0 20px; font-size: 1rem; color: #333; }}
|
||||
.chart-wrap {{ position: relative; height: 320px; }}
|
||||
.chart-wrap {{ position: relative; height: 340px; }}
|
||||
table {{ width: 100%; border-collapse: collapse; font-size: 0.875rem; }}
|
||||
th {{ text-align: left; padding: 10px 12px; border-bottom: 2px solid #e5e7eb;
|
||||
font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; }}
|
||||
font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; }}
|
||||
td {{ padding: 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }}
|
||||
tr:last-child td {{ border-bottom: none; }}
|
||||
.tval {{ font-weight: 600; font-size: 1rem; }}
|
||||
.tchg {{ font-size: 0.75rem; color: #555; margin-top: 2px; }}
|
||||
.up {{ color: #c0392b; font-weight: 600; }}
|
||||
.down {{ color: #1e8449; font-weight: 600; }}
|
||||
.up {{ color: #c0392b; font-weight: 600; }}
|
||||
.down {{ color: #1e8449; font-weight: 600; }}
|
||||
.neutral {{ color: #888; }}
|
||||
.chg-label {{ background: #eef0f3; border-radius: 3px; padding: 1px 4px;
|
||||
font-size: 0.7rem; font-weight: 600; color: #555; margin-right: 2px; }}
|
||||
.note {{ font-size: 0.75rem; color: #999; margin-top: 8px; }}
|
||||
@media (max-width: 900px) {{
|
||||
.note {{ font-size: 0.75rem; color: #999; margin-top: 10px; }}
|
||||
@media (max-width: 960px) {{
|
||||
.cards {{ grid-template-columns: repeat(2, 1fr); }}
|
||||
}}
|
||||
@media (max-width: 600px) {{
|
||||
.cards {{ grid-template-columns: 1fr; }}
|
||||
}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -323,7 +329,15 @@ HTML_TEMPLATE = """<!DOCTYPE html>
|
||||
<div class="chart-wrap">
|
||||
<canvas id="rateChart"></canvas>
|
||||
</div>
|
||||
<p class="note">▲ Red = rate rising (more unemployment). ▼ Green = rate falling.</p>
|
||||
<p class="note">▲ Red = rate rising | ▼ Green = rate falling | Not seasonally adjusted</p>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Employment Level Trend — Last 24 Months</h2>
|
||||
<div class="chart-wrap">
|
||||
<canvas id="emplChart"></canvas>
|
||||
</div>
|
||||
<p class="note">State totals (DC/MD/VA) are significantly larger than MSA figures. Hover to compare values.</p>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
@ -334,13 +348,11 @@ HTML_TEMPLATE = """<!DOCTYPE html>
|
||||
|
||||
<script>
|
||||
const rateData = {rate_chart_json};
|
||||
const emplData = {empl_chart_json};
|
||||
|
||||
new Chart(document.getElementById("rateChart"), {{
|
||||
type: "line",
|
||||
data: {{
|
||||
labels: rateData.labels,
|
||||
datasets: rateData.datasets,
|
||||
}},
|
||||
data: {{ labels: rateData.labels, datasets: rateData.datasets }},
|
||||
options: {{
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
@ -359,10 +371,33 @@ new Chart(document.getElementById("rateChart"), {{
|
||||
ticks: {{ callback: v => v + "%" }},
|
||||
grid: {{ color: "#f0f0f0" }},
|
||||
}},
|
||||
x: {{
|
||||
grid: {{ display: false }},
|
||||
ticks: {{ maxTicksLimit: 12 }},
|
||||
x: {{ grid: {{ display: false }}, ticks: {{ maxTicksLimit: 12 }} }}
|
||||
}}
|
||||
}}
|
||||
}});
|
||||
|
||||
new Chart(document.getElementById("emplChart"), {{
|
||||
type: "line",
|
||||
data: {{ labels: emplData.labels, datasets: emplData.datasets }},
|
||||
options: {{
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {{ mode: "index", intersect: false }},
|
||||
plugins: {{
|
||||
legend: {{ position: "top", labels: {{ usePointStyle: true, padding: 16 }} }},
|
||||
tooltip: {{
|
||||
callbacks: {{
|
||||
label: ctx => ` ${{ctx.dataset.label}}: ${{ctx.parsed.y !== null ? ctx.parsed.y.toLocaleString() : "N/A"}}`
|
||||
}}
|
||||
}}
|
||||
}},
|
||||
scales: {{
|
||||
y: {{
|
||||
title: {{ display: true, text: "Employed Persons" }},
|
||||
ticks: {{ callback: v => (v >= 1000000 ? (v/1000000).toFixed(1)+"M" : (v/1000).toFixed(0)+"K") }},
|
||||
grid: {{ color: "#f0f0f0" }},
|
||||
}},
|
||||
x: {{ grid: {{ display: false }}, ticks: {{ maxTicksLimit: 12 }} }}
|
||||
}}
|
||||
}}
|
||||
}});
|
||||
@ -378,7 +413,7 @@ new Chart(document.getElementById("rateChart"), {{
|
||||
# ---------------------------------------------------------------------------
|
||||
def main():
|
||||
current_year = datetime.now().year
|
||||
start_year = current_year - 2 # 3 years covers 24+ months for the chart
|
||||
start_year = current_year - 2
|
||||
|
||||
print(f"Fetching {len(SERIES)} LAUS series ({start_year}–{current_year})...")
|
||||
results = fetch(list(SERIES.values()), start_year, current_year)
|
||||
@ -389,14 +424,15 @@ def main():
|
||||
with open(chartjs_path) as f:
|
||||
chartjs = f.read()
|
||||
|
||||
labels, datasets = build_rate_chart_data(results, months=24)
|
||||
rate_chart_json = json.dumps({"labels": labels, "datasets": datasets})
|
||||
rate_labels, rate_datasets = build_chart_data(results, "rate", months=24)
|
||||
empl_labels, empl_datasets = build_chart_data(results, "employed", months=24)
|
||||
|
||||
html = HTML_TEMPLATE.format(
|
||||
report_date=report_date,
|
||||
cards=build_cards(results),
|
||||
summary_table=build_summary_table(results),
|
||||
rate_chart_json=rate_chart_json,
|
||||
rate_chart_json=json.dumps({"labels": rate_labels, "datasets": rate_datasets}),
|
||||
empl_chart_json=json.dumps({"labels": empl_labels, "datasets": empl_datasets}),
|
||||
chartjs=chartjs,
|
||||
)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user