<script lang="ts">
import highcharts from "./highcharts";
export let ubicacio: string = '';
export let series: Array<any> = [];

let config = {
chart: {
	type: 'spline'
},
title: {
		text: `Temps a ${ubicacio}`
	},

	subtitle: {
		text: 'Dades: open-meteo.com'
	},

	yAxis: {
		title: {
			text: 'Temperatura'
		}
	},

	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'
	},

	plotOptions: {
		series: {
			marker: {
				enabled: true,
				radius: 2.5
			}
		}
	},

	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'
				}
			}
		}]
	}
}
</script>
<div class="chart" use:highcharts={config}></div>
