Grpah works, but no lines on it

This commit is contained in:
pswsm 2023-02-15 16:20:45 +01:00
pare a06ea205f6
commit 482d0b0787
S'han modificat 5 arxius amb 84 adicions i 68 eliminacions

Veure arxiu

@ -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>

Veure arxiu

@ -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>

Veure arxiu

@ -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;
} )

Veure arxiu

@ -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>

3
src/routes/styles.css Normal file
Veure arxiu

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