CityViz Report Builder
Urban Planning Report GeneratorProject Metadata
Demographic Data Input (For Charting)
Year
Value
Analysis & Recommendations
Prepared for: ${data.area}
CHAPTER 1: EXECUTIVE SUMMARY
${data.summary}
`;
html += `CHAPTER 2: CONTEXT AND ANALYSIS
`;
html += `2.1. Demographic and Growth Trends
`;
// Placeholder for the chart visualization
html += `2.2. Existing Conditions Analysis
`;
html += `Key Findings and Data Summary:
${data.findings}
`;
html += `CHAPTER 3: STRATEGY AND IMPLEMENTATION
`;
html += `3.1. Proposed Interventions and Strategy
`;
html += `${data.strategy}
`;
paper.innerHTML = html;
}
function uprgRenderChart(demographicData, metricName) {
const ctx = document.getElementById('uprg-chart-canvas');
if (!ctx) return;
if (uprgChartInstance) uprgChartInstance.destroy();
const labels = demographicData.map(d => d.year);
const dataValues = demographicData.map(d => d.value);
uprgChartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: metricName,
data: dataValues,
borderColor: '#0984e3',
backgroundColor: 'rgba(9, 132, 227, 0.2)',
borderWidth: 2,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: true },
title: { display: true, text: `Trend Analysis: ${metricName}` }
},
scales: {
x: { title: { display: true, text: 'Year' } },
y: { title: { display: true, text: 'Value' } }
}
}
});
}
function uprgLoadExampleDataToForm() {
// Set text inputs
document.getElementById('inp-title').value = "Central Corridor Mobility Study";
document.getElementById('inp-area').value = "City of Springfield Planning Department";
document.getElementById('inp-summary').value = "This report analyzes current traffic patterns and population growth along the central corridor to propose a phased implementation of a Bus Rapid Transit (BRT) system, aiming to reduce single-occupancy vehicle use by 15% by 2035.";
document.getElementById('inp-findings').value = "Traffic is concentrated on I-40 during peak hours, exceeding capacity by 30%. 60% of all new housing growth within the corridor is multi-family, signaling demand for high-capacity transit and reduced parking requirements.";
document.getElementById('inp-strategy').value = "Implement a form-based code to allow mixed-use development within 1/4 mile of proposed stations. Prioritize the acquisition of right-of-way for dedicated BRT lanes (Phase 1: 2026-2028).";
document.getElementById('inp-metric-name').value = "Population (Thousands)";
// Clear and fill dynamic rows
document.getElementById('uprg-data-rows-container').innerHTML = '';
uprgAddDataRow(2010, 45);
uprgAddDataRow(2020, 52);
uprgAddDataRow(2025, 60);
uprgAddDataRow(2030, 75); // Projection
}
function uprgLoadExample() {
uprgLoadExampleDataToForm();
uprgRenderReport();
uprgSwitchTab('preview');
}
/* --- PDF Generation --- */
async function uprgGeneratePDF() {
uprgRenderReport();
const data = {
title: document.getElementById('inp-title').value || "Urban Planning Report",
area: document.getElementById('inp-area').value || "Geographic Area",
summary: document.getElementById('inp-summary').value || "Executive summary pending.",
findings: document.getElementById('inp-findings').value || "Analysis findings pending.",
strategy: document.getElementById('inp-strategy').value || "Implementation strategy pending.",
demographicData: uprgGetDemographicData(),
metricName: document.getElementById('inp-metric-name').value || "Data Metric"
};
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'mm', 'a4');
const navy = [52, 73, 94];
const blue = [9, 132, 227];
let y = 20;
// 1. Header Block
doc.setFillColor(...navy);
doc.rect(0, 0, 210, 20, 'F');
doc.setTextColor(255, 255, 255);
doc.setFontSize(16);
doc.text(data.title, 14, 13);
doc.setFontSize(10);
doc.text(`Prepared for: ${data.area}`, 14, 17);
y = 30;
// Helper to add narrative sections
const addSection = (title, content, startY) => {
if (startY > 270) { doc.addPage(); startY = 20; }
doc.setFont("helvetica", "bold");
doc.setFontSize(12);
doc.setTextColor(...blue);
doc.text(title, 14, startY);
startY += 5;
doc.setFont("times", "normal");
doc.setFontSize(10);
doc.setTextColor(0, 0, 0);
const splitContent = doc.splitTextToSize(content, 180);
doc.text(splitContent, 14, startY);
return startY + (splitContent.length * 5) + 8;
};
// 2. Executive Summary (Chapter 1)
doc.setFontSize(14);
doc.text("CHAPTER 1: EXECUTIVE SUMMARY", 14, y);
y = addSection("Summary:", data.summary, y + 5);
// 3. Analysis (Chapter 2)
doc.setFontSize(14);
doc.text("CHAPTER 2: EXISTING CONDITIONS ANALYSIS", 14, y);
y += 5;
// --- CHART INTEGRATION ---
const chartCanvas = document.getElementById('uprg-chart-canvas');
if (chartCanvas) {
const chartImg = chartCanvas.toDataURL('image/png');
if (y > 200) { doc.addPage(); y = 20; }
doc.setFont("helvetica", "bold");
doc.setFontSize(12);
doc.text(`Trend Analysis: ${data.metricName}`, 14, y);
y += 5;
doc.addImage(chartImg, 'PNG', 14, y, 180, 80);
y += 90;
}
// Data Table of Trends
const tableBody = data.demographicData.map(d => [d.year, d.value]);
if (tableBody.length > 0) {
doc.autoTable({
startY: y,
head: [['Year', data.metricName]],
body: tableBody,
theme: 'grid',
headStyles: { fillColor: blue, fontSize: 10 },
styles: { fontSize: 9 },
columnStyles: { 0: { cellWidth: 20, fontStyle: 'bold' } }
});
y = doc.lastAutoTable.finalY + 10;
}
y = addSection("Key Findings:", data.findings, y);
// 4. Strategy (Chapter 3)
doc.setFontSize(14);
doc.text("CHAPTER 3: STRATEGY AND IMPLEMENTATION", 14, y);
y = addSection("Strategy & Interventions:", data.strategy, y + 5);
doc.save(`UrbanPlanning_Report_${data.title.replace(/\s/g, '_')}.pdf`);
}