Grpah works, but no lines on it

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: {
+	subtitle: {
-        text: 'Source: thesolarfoundation.com'
+		text: 'Dades: open-meteo.com'
-    },
+	},
 
-    yAxis: {
+	yAxis: {
-        title: {
+		title: {
-            text: 'Number of Employees'
+			text: 'Temperatura'
-        }
+		}
-    },
+	},
 
-    xAxis: {
+	xAxis: {
-        accessibility: {
+		type: 'datetime',
-            rangeDescription: 'Range: 2010 to 2017'
+		tickInterval: 36e5,
-        }
+		tickLength: 0,
-    },
+		startOnTick: false,
+		endOnTick: false,
+		title: {
+			text: 'Data'
+		},
+		accessibility: {
+			rangeDescription: 'Temps per hores'
+		}
+	},
 
-    legend: {
+	legend: {
-        layout: 'vertical',
+		layout: 'vertical',
-        align: 'right',
+		align: 'right',
-        verticalAlign: 'middle'
+		verticalAlign: 'middle'
-    },
+	},
 
-    plotOptions: {
+	plotOptions: {
-        series: {
+		series: {
-            label: {
+			marker: {
-                connectorAllowed: false
+				enabled: true,
-            },
+				radius: 2.5
-            pointStart: 2010
+			}
-        }
+		}
-    },
+	},
 
-    series: [{
+	series: series,
-        name: 'Installation',
+	/*
-        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+	series: [{
-    }, {
+		name: 'Installation',
-        name: 'Manufacturing',
+		data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
-        data: [24916, 24064, null, null, 119931, 137133, 154175, 171217]
+	}, {
-    }, {
+		name: 'Manufacturing',
-        name: 'Sales & Distribution',
+		data: [24916, 24064, null, null, 119931, 137133, 154175, 171217]
-        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+	}, {
-    }, {
+		name: 'Sales & Distribution',
-        name: 'Project Development',
+		data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
-        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
+	}, {
-    }, {
+		name: 'Project Development',
-        name: 'Other',
+		data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
-        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+	}, {
-    }],
+		name: 'Other',
+		data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+	}], */
 
-    responsive: {
+	responsive: {
-        rules: [{
+		rules: [{
-            condition: {
+			condition: {
-                maxWidth: 500
+				maxWidth: 500
-            },
+			},
-            chartOptions: {
+			chartOptions: {
-                legend: {
+				legend: {
-                    layout: 'horizontal',
+					layout: 'horizontal',
-                    align: 'center',
+					align: 'center',
-                    verticalAlign: 'bottom'
+					verticalAlign: 'bottom'
-                }
+				}
-            }
+			}
-        }]
+		}]
-    }
+	}
 }
 </script>
 <div class="chart" use:highcharts={config}></div>

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>

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 fmtForecastData: { title: string, data: [Date, number] | [] } = { title: 'Temps', data: [] };
-		let noTimeForecastData: object = Object.fromEntries(Object.entries(forecastData).filter( ([k]) => k !== 'time' ));
+		let regex: RegExp = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/
-		for (const label in noTimeForecastData) {
+		forecastData.time.forEach( (elem, idx) => { 
-			if (noTimeForecastData.hasOwnProperty(label)) {
+			fmtForecastData.data.push([Date.parse(elem), forecastData.temperature_2m[idx]])
-				const data = noTimeForecastData[label];
+		});
-				fmtForecastData.datasets.push({label, data})
-			}
-		}
 		return fmtForecastData;
 	} )
 

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>

src/routes/styles.css

@@ -0,0 +1,3 @@
+body {
+	margin: 0;
+}