Grpah works, but no lines on it
This commit is contained in:
pare
a06ea205f6
commit
482d0b0787
S'han modificat 5 arxius amb 84 adicions i 68 eliminacions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
} )
|
||||
|
||||
|
|
|
@ -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
3
src/routes/styles.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
margin: 0;
|
||||
}
|
Loading…
Referencia en una nova incidència