Add statistical areas

1 files changed, 89 insertions, 288 deletions

diff --git a/app/main.js b/app/main.js
index 1273a11..3995a07 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,12 +1,15 @@
-// main.js
-import { Dom, DomOptions, Modal, Widgets } from "dom";
-import { ColorParameter, MapEl } from "map";
+// main.js - Updated with Sidebar class
+
+import { Modal, Sidebar } from "components";
+import { Dom, DomOptions } from "dom";
+import { AreaColorParameter, ColorParameter, MapEl } from "map";
 import {
 	DataProvider,
 	District,
 	Filters,
 	House,
 	ScoringEngine,
+	StatisticalArea,
 	TrainStation,
 	TrainTracks,
 	Weights,
@@ -19,6 +22,8 @@ export class App {
 	#trainTracks = [];
 	/** @type {TrainStation[]} */
 	#trainStations = [];
+	/** @type {StatisticalArea[]} */
+	#statAreas = [];
 	/** @type {House[]} */
 	#filtered = [];
 	/** @type {Filters} */
@@ -31,14 +36,16 @@ export class App {
 	#map;
 	/** @type {HTMLElement} */
 	#stats;
-	/** @type {HTMLElement} */
-	#controls;
+	/** @type {Sidebar} */
+	#sidebar;
 	/** @type {Modal|null} */
 	#modal = null;
 	/** @type {boolean} */
 	#persistent = false;
 	/** @type {string} */
 	#colorParameter = ColorParameter.price;
+	/** @type {string} */
+	#areaColorParameter = AreaColorParameter.unemploymentRate;
 
 	constructor() {
 		// Set up main layout container
@@ -50,29 +57,14 @@ export class App {
 			margin: "0",
 		});
 
-		this.#controls = App.buildControls(
+		// Create sidebar instance
+		this.#sidebar = new Sidebar(
 			this.#filters,
 			this.#weights,
-			() => {
-				this.#filtered = this.#houses.filter((h) => h.matchesFilters(this.#filters));
-				if (this.#map) {
-					const filteredIds = this.#filtered.map((h) => h.id);
-					this.#map.updateHouseVisibility(filteredIds);
-				}
-				this.#updateStats();
-			},
-			(key, value) => {
-				if (key in this.#weights) {
-					this.#weights[/** @type {keyof Weights} */ (key)] = value;
-				}
-				App.#recalculateScores(this.#houses, this.#weights);
-				this.#map?.setColorParameter(this.#colorParameter);
-				this.#updateStats();
-			},
-			(param) => {
-				this.#colorParameter = param;
-				this.#map?.setColorParameter(this.#colorParameter);
-			},
+			() => this.#onFilterChange(),
+			(key, value) => this.#onWeightChange(key, value),
+			(param) => this.#onColorChange(param),
+			(param) => this.#onAreaColorChange(param),
 		);
 
 		this.#map = new MapEl({
@@ -125,7 +117,7 @@ export class App {
 			Dom.div(
 				new DomOptions({
 					children: [
-						this.#controls,
+						this.#sidebar.render(),
 						Dom.div(
 							new DomOptions({
 								children: [this.#map.svg, this.#stats],
@@ -134,7 +126,7 @@ export class App {
 									display: "flex",
 									flex: "1",
 									flexDirection: "column",
-									minWidth: "0", // Prevents flex overflow
+									minWidth: "0",
 								},
 							}),
 						),
@@ -152,246 +144,47 @@ export class App {
 	}
 
 	/**
-	 * Build controls container
-	 * @param {Filters} filters
-	 * @param {Weights} weights
-	 * @param {() => void} onFilterChange
-	 * @param {(key: string, value: number) => void} onWeightChange
-	 * @param {(param: string) => void} onColorChange
-	 * @returns {HTMLElement}
+	 * Handle filter changes
 	 */
-	static buildControls(filters, weights, onFilterChange, onWeightChange, onColorChange) {
-		const controls = Dom.div(
-			new DomOptions({
-				children: [
-					Dom.div(
-						new DomOptions({
-							children: [
-								Dom.heading(
-									3,
-									"Map Colors",
-									new DomOptions({
-										styles: {
-											color: "#333",
-											fontSize: "1.1rem",
-											margin: "0 0 1rem 0",
-										},
-									}),
-								),
-								Dom.div(
-									new DomOptions({
-										children: [
-											Dom.label(
-												"color-parameter",
-												"Color houses by",
-												new DomOptions({
-													styles: {
-														fontSize: "0.85rem",
-														fontWeight: "bold",
-														marginBottom: "0.25rem",
-													},
-												}),
-											),
-											Dom.select(
-												(e) => {
-													const target = /** @type {HTMLSelectElement} */ (e.target);
-													onColorChange(target.value);
-												},
-												new DomOptions({
-													children: [
-														Dom.option(ColorParameter.price, "Price"),
-														Dom.option(ColorParameter.score, "Score"),
-														Dom.option(ColorParameter.year, "Construction Year"),
-														Dom.option(ColorParameter.area, "Living Area"),
-													],
-													id: "color-parameter",
-													styles: {
-														border: "1px solid #ddd",
-														borderRadius: "4px",
-														fontSize: "0.9rem",
-														padding: "0.5rem",
-													},
-												}),
-											),
-										],
-										styles: { display: "flex", flexDirection: "column" },
-									}),
-								),
-							],
-							styles: {
-								borderBottom: "1px solid #eee",
-								paddingBottom: "1rem",
-							},
-						}),
-					),
-				],
-				id: "color-section",
-				styles: {
-					background: "#fff",
-					borderRight: "1px solid #ddd",
-					display: "flex",
-					flexDirection: "column",
-					flexShrink: "0",
-					gap: "1rem",
-					overflowY: "auto",
-					padding: "1rem",
-					width: "300px",
-				},
-			}),
-		);
-
-		controls.append(
-			Dom.div(
-				new DomOptions({
-					children: [
-						Dom.heading(
-							3,
-							"Filters",
-							new DomOptions({
-								styles: {
-									color: "#333",
-									fontSize: "1.1rem",
-									margin: "0 0 1rem 0",
-								},
-							}),
-						),
-
-						Dom.div(
-							new DomOptions({
-								children: [
-									Widgets.numberFilter("min-price", "Min price (€)", (v) => {
-										filters.minPrice = v ?? 0;
-										onFilterChange();
-									}),
+	#onFilterChange() {
+		this.#filtered = this.#houses.filter((h) => h.matchesFilters(this.#filters));
+		if (this.#map) {
+			const filteredIds = this.#filtered.map((h) => h.id);
+			this.#map.updateHouseVisibility(filteredIds);
+		}
+		this.#updateStats();
+	}
 
-									Widgets.numberFilter("max-price", "Max price (€)", (v) => {
-										filters.maxPrice = v ?? Number.POSITIVE_INFINITY;
-										onFilterChange();
-									}),
-								],
-								id: "price-row",
-								styles: {
-									display: "flex",
-									gap: "0.5rem",
-								},
-							}),
-						),
-						Widgets.numberFilter("min-year", "Min year", (v) => {
-							filters.minYear = v ?? 0;
-							onFilterChange();
-						}),
+	/**
+	 * Handle weight changes
+	 * @param {string} key
+	 * @param {number} value
+	 */
+	#onWeightChange(key, value) {
+		if (key in this.#weights) {
+			this.#weights[/** @type {keyof Weights} */ (key)] = value;
+		}
+		App.#recalculateScores(this.#houses, this.#weights);
+		this.#map?.setColorParameter(this.#colorParameter);
+		this.#updateStats();
+	}
 
-						Widgets.numberFilter("min-area", "Min area (m²)", (v) => {
-							filters.minArea = v ?? 0;
-							onFilterChange();
-						}),
-						Dom.div(
-							new DomOptions({
-								children: [
-									Dom.label(
-										"district-select",
-										"Districts",
-										new DomOptions({
-											styles: { fontSize: "0.85rem", fontWeight: "bold", marginBottom: "0.25rem" },
-										}),
-									),
-									Dom.select(
-										(e) => {
-											const target = /** @type {HTMLSelectElement} */ (e.target);
-											const selectedOptions = Array.from(target.selectedOptions).map(
-												(opt) => opt.value,
-											);
-											filters.districts = selectedOptions;
-											onFilterChange();
-										},
-										new DomOptions({
-											attributes: { multiple: "true" },
-											children: [],
-											id: "district-select",
-											styles: {
-												border: "1px solid #ddd",
-												borderRadius: "4px",
-												minHeight: "120px",
-												padding: "0.5rem",
-											},
-										}),
-									),
-								],
-								id: "district-multi-select",
-								styles: { display: "flex", flexDirection: "column" },
-							}),
-						),
-					],
-					id: "filter-section",
-					styles: {
-						borderBottom: "1px solid #eee",
-						paddingBottom: "1rem",
-					},
-				}),
-			),
-			Dom.div(
-				new DomOptions({
-					children: [
-						Dom.heading(
-							3,
-							"Weights",
-							new DomOptions({
-								styles: {
-									color: "#333",
-									fontSize: "1.1rem",
-									margin: "0 0 1rem 0",
-								},
-							}),
-						),
-						Widgets.slider("w-price", "Price weight", "price", weights.price, onWeightChange),
-						Widgets.slider(
-							"w-market",
-							"Market distance",
-							"distanceMarket",
-							weights.distanceMarket,
-							onWeightChange,
-						),
-						Widgets.slider(
-							"w-school",
-							"School distance",
-							"distanceSchool",
-							weights.distanceSchool,
-							onWeightChange,
-						),
-						Widgets.slider("w-crime", "Crime rate", "crimeRate", weights.crimeRate, onWeightChange),
-						Widgets.slider("w-safety", "Safety index", "safety", weights.safety, onWeightChange),
-						Widgets.slider(
-							"w-students",
-							"S2 students",
-							"s2Students",
-							weights.s2Students,
-							onWeightChange,
-						),
-						Widgets.slider(
-							"w-railway",
-							"Railway distance",
-							"distanceRailway",
-							weights.distanceRailway,
-							onWeightChange,
-						),
-						Widgets.slider(
-							"w-year",
-							"Construction year",
-							"constructionYear",
-							weights.constructionYear,
-							onWeightChange,
-						),
-					],
-					id: "weights-section",
-					styles: {
-						borderBottom: "1px solid #eee",
-						paddingBottom: "1rem",
-					},
-				}),
-			),
-		);
+	/**
+	 * Handle color parameter changes
+	 * @param {string} param
+	 */
+	#onColorChange(param) {
+		this.#colorParameter = param;
+		this.#map?.setColorParameter(this.#colorParameter);
+	}
 
-		return controls;
+	/**
+	 * Handle area color parameter changes
+	 * @param {string} param
+	 */
+	#onAreaColorChange(param) {
+		this.#areaColorParameter = param;
+		this.#map?.setAreaColorParameter(this.#areaColorParameter);
 	}
 
 	/**
@@ -441,13 +234,14 @@ export class App {
 		document.body.appendChild(this.#modal.render());
 		this.#modal.show();
 	}
+
 	/**
 	 * Load data and initialize application
 	 * @param {HTMLElement} loading
 	 */
 	async #initialize(loading) {
 		try {
-			const [districts, houses, trainStations, trainTracks, coastLine, mainRoads] =
+			const [districts, houses, trainStations, trainTracks, coastLine, mainRoads, statAreas] =
 				await Promise.all([
 					DataProvider.getDistricts(),
 					DataProvider.getHouses(),
@@ -455,11 +249,13 @@ export class App {
 					DataProvider.getTrainTracks(),
 					DataProvider.getCoastline(),
 					DataProvider.getMainRoads(),
+					DataProvider.getStatisticalAreas(),
 				]);
 			this.#districts = districts;
 			this.#houses = houses;
 			this.#trainStations = trainStations;
 			this.#trainTracks = trainTracks;
+			this.#statAreas = statAreas;
 
 			this.#filtered = houses.slice();
 
@@ -470,15 +266,16 @@ export class App {
 				trainTracks,
 				trainStations,
 				houses,
+				statAreas,
 				this.#colorParameter,
 			);
 
-			// Populate district multi-select
-			const districtOptions = App.#renderDistrictOptions(this.#districts, this.#houses);
-			const districtSelect = this.#controls.querySelector("#district-select");
-			if (districtSelect) {
-				districtSelect.append(...districtOptions);
-			}
+			// Set default area coloring to unemployment rate
+			this.#map.setAreaColorParameter(this.#areaColorParameter);
+
+			// Update sidebar with districts and area color parameter
+			this.#sidebar.updateDistricts(this.#districts, this.#houses);
+			this.#sidebar.setAreaColorParameter(this.#areaColorParameter);
 
 			this.#updateStats();
 		} finally {
@@ -487,18 +284,6 @@ export class App {
 	}
 
 	/**
-	 * Render district options for multi-select
-	 * @param {District[]} _districts
-	 * @param {House[]} houses
-	 * @returns {HTMLOptionElement[]}
-	 */
-	static #renderDistrictOptions(_districts, houses) {
-		// Get unique districts from houses (they might have districts not in the district polygons)
-		const houseDistricts = [...new Set(houses.map((h) => h.district).filter((d) => d))].sort();
-		return houseDistricts.map((districtName) => Dom.option(districtName, districtName));
-	}
-
-	/**
 	 * Recalculate scores statically
 	 * @param {House[]} houses
 	 * @param {Weights} weights
@@ -509,16 +294,32 @@ export class App {
 		}
 	}
 
+	/**
+	 * Update statistics display using DOM methods
+	 */
 	#updateStats() {
 		const count = this.#filtered.length;
 		const avg = count
 			? Math.round(this.#filtered.reduce((s, h) => s + h.scores.current, 0) / count)
 			: 0;
-		this.#stats.innerHTML = `
-      <strong>${count}</strong> houses shown
-      • Average score: <strong>${avg}</strong>
-      • Use weights sliders to adjust scoring
-    `;
+
+		// Clear existing content
+		this.#stats.innerHTML = "";
+
+		// Create elements using DOM methods
+		const countStrong = document.createElement("strong");
+		countStrong.textContent = count.toString();
+
+		const avgStrong = document.createElement("strong");
+		avgStrong.textContent = avg.toString();
+
+		// Append all elements
+		this.#stats.append(
+			countStrong,
+			document.createTextNode(" houses shown • Average score: "),
+			avgStrong,
+			document.createTextNode(" • Use weights sliders to adjust scoring"),
+		);
 	}
 }