From 482d0b07878b961b61f8250384c8b9d7d45a1ba7 Mon Sep 17 00:00:00 2001
From: pswsm <pauseawesome@protonmail.com>
Date: Wed, 15 Feb 2023 16:20:45 +0100
Subject: [PATCH] Grpah works, but no lines on it

---
 src/components/graph.svelte          | 131 +++++++++++++++------------
 src/routes/+layout.svelte            |   1 +
 src/routes/openmeteo/+page.server.ts |  13 +--
 src/routes/openmeteo/+page.svelte    |   4 +-
 src/routes/styles.css                |   3 +
 5 files changed, 84 insertions(+), 68 deletions(-)
 create mode 100644 src/routes/styles.css

diff --git a/src/components/graph.svelte b/src/components/graph.svelte
index e66035b..776c98a 100644
--- a/src/components/graph.svelte
+++ b/src/components/graph.svelte
@@ -1,73 +1,88 @@
 <script lang="ts">
 import highcharts from "./highcharts";
+export let ubicacio: string = '';
+export let series: Array<any> = [];
 
 let config = {
+chart: {
+	type: 'spline'
+},
 title: {
-        text: 'Solar Employment Growth by Sector, 2010-2016'
-    },
+		text: `Temps a ${ubicacio}`
+	},
 
-    subtitle: {
-        text: 'Source: thesolarfoundation.com'
-    },
+	subtitle: {
+		text: 'Dades: open-meteo.com'
+	},
 
-    yAxis: {
-        title: {
-            text: 'Number of Employees'
-        }
-    },
+	yAxis: {
+		title: {
+			text: 'Temperatura'
+		}
+	},
 
-    xAxis: {
-        accessibility: {
-            rangeDescription: 'Range: 2010 to 2017'
-        }
-    },
+	xAxis: {
+		type: 'datetime',
+		tickInterval: 36e5,
+		tickLength: 0,
+		startOnTick: false,
+		endOnTick: false,
+		title: {
+			text: 'Data'
+		},
+		accessibility: {
+			rangeDescription: 'Temps per hores'
+		}
+	},
 
-    legend: {
-        layout: 'vertical',
-        align: 'right',
-        verticalAlign: 'middle'
-    },
+	legend: {
+		layout: 'vertical',
+		align: 'right',
+		verticalAlign: 'middle'
+	},
 
-    plotOptions: {
-        series: {
-            label: {
-                connectorAllowed: false
-            },
-            pointStart: 2010
-        }
-    },
+	plotOptions: {
+		series: {
+			marker: {
+				enabled: true,
+				radius: 2.5
+			}
+		}
+	},
 
-    series: [{
-        name: 'Installation',
-        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
-    }, {
-        name: 'Manufacturing',
-        data: [24916, 24064, null, null, 119931, 137133, 154175, 171217]
-    }, {
-        name: 'Sales & Distribution',
-        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
-    }, {
-        name: 'Project Development',
-        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
-    }, {
-        name: 'Other',
-        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
-    }],
+	series: series,
+	/*
+	series: [{
+		name: 'Installation',
+		data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+	}, {
+		name: 'Manufacturing',
+		data: [24916, 24064, null, null, 119931, 137133, 154175, 171217]
+	}, {
+		name: 'Sales & Distribution',
+		data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+	}, {
+		name: 'Project Development',
+		data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
+	}, {
+		name: 'Other',
+		data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+	}], */
 
-    responsive: {
-        rules: [{
-            condition: {
-                maxWidth: 500
-            },
-            chartOptions: {
-                legend: {
-                    layout: 'horizontal',
-                    align: 'center',
-                    verticalAlign: 'bottom'
-                }
-            }
-        }]
-    }
+	responsive: {
+		rules: [{
+			condition: {
+				maxWidth: 500
+			},
+			chartOptions: {
+				legend: {
+					layout: 'horizontal',
+					align: 'center',
+					verticalAlign: 'bottom'
+				}
+			}
+		}]
+	}
 }
 </script>
 <div class="chart" use:highcharts={config}></div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1f7c859..b8f94d3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { NavbarObject } from "../classes/NavObject";
     import Navbar from "../components/navbar.svelte";
+	import './styles.css';
 
 	let navbarElemenets: NavbarObject[] = [new NavbarObject('/', 'Home'), new NavbarObject('/temps', 'Temps'), new NavbarObject('/xema', 'Estacions'), new NavbarObject('/openmeteo', 'Dades Open Meteo')]
 </script>
diff --git a/src/routes/openmeteo/+page.server.ts b/src/routes/openmeteo/+page.server.ts
index 27fd9ce..f1935d7 100644
--- a/src/routes/openmeteo/+page.server.ts
+++ b/src/routes/openmeteo/+page.server.ts
@@ -15,14 +15,11 @@ export function load(): object {
 	})
 	.then( (res) => {
 		let forecastData: object = res.hourly;
-		let fmtForecastData: { labels: string[], datasets: Array<object> } = { labels: forecastData.time, datasets: [] };
-		let noTimeForecastData: object = Object.fromEntries(Object.entries(forecastData).filter( ([k]) => k !== 'time' ));
-		for (const label in noTimeForecastData) {
-			if (noTimeForecastData.hasOwnProperty(label)) {
-				const data = noTimeForecastData[label];
-				fmtForecastData.datasets.push({label, data})
-			}
-		}
+		let fmtForecastData: { title: string, data: [Date, number] | [] } = { title: 'Temps', data: [] };
+		let regex: RegExp = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/
+		forecastData.time.forEach( (elem, idx) => { 
+			fmtForecastData.data.push([Date.parse(elem), forecastData.temperature_2m[idx]])
+		});
 		return fmtForecastData;
 	} )
 
diff --git a/src/routes/openmeteo/+page.svelte b/src/routes/openmeteo/+page.svelte
index 69df30d..ecabdf9 100644
--- a/src/routes/openmeteo/+page.svelte
+++ b/src/routes/openmeteo/+page.svelte
@@ -5,7 +5,7 @@
 	let display: string = 'none';
 	let loading: boolean = false;
 
-	export let data: any;
+	export let data: { ubicacio: string, temps: any };
 
 	function toggleDisplay(): void {
 		display = (display === 'none') ? 'block' : 'none';
@@ -21,7 +21,7 @@
 <h2>Ubicació actual: { data.ubicacio }</h2>
 <button type="button" on:click={toggleDisplay}>Canviar ubicació</button>
 <pre>{ JSON.stringify(data) }</pre>
-<Graph />
+<Graph ubicacio={data.ubicacio} series={data.temps} />
 <footer>
 <p>Dades provinents de:</p>
 <ul>
diff --git a/src/routes/styles.css b/src/routes/styles.css
new file mode 100644
index 0000000..9bc75dd
--- /dev/null
+++ b/src/routes/styles.css
@@ -0,0 +1,3 @@
+body {
+	margin: 0;
+}