362 lines
8.2 KiB
PHP
362 lines
8.2 KiB
PHP
@extends('base')
|
||
@section('body-class', 'overview')
|
||
@section('header')
|
||
<nav>
|
||
<strong>Start</strong>
|
||
<ul>
|
||
@foreach($regions as $r)
|
||
<li><a href="/region/{{ $r['region_id'] }}">{{ $r['region_name'] }}</a></li>
|
||
@endforeach
|
||
</ul>
|
||
</nav>
|
||
@endsection
|
||
@section('main')
|
||
<article class="header" style="grid-area: chart3;">
|
||
<header>
|
||
<h2>Auslastung aller Mietobjekte über gesamten beobachteten Zeitraum</h2>
|
||
<button popovertarget="pop1">
|
||
<span>Erklärungen zum Diagramm</span>
|
||
</button>
|
||
<div popover id="pop1">
|
||
<h2>Auslastung aller Mietobjekte über gesamten beobachteten Zeitraum</h2>
|
||
<p>
|
||
Das Diagramm gibt eine Übersicht, wie die Auslastung von Mietobjekten am Datum des Scrapings waren. Dazu wird für jedes Mietobjekt die durchschnittliche Verfügbarkeit ermittelt.
|
||
</p>
|
||
<ul>
|
||
<li>X-Achse: Zeitpunkt Scraping.</li>
|
||
<li>Y-Achse: Mietobjekte.</li>
|
||
<li>Kategorien: 0% = Das Mietobjekt ist komplett verfügbar; 100% = Das Mietobjekt ist komplett ausgebucht.</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
</header>
|
||
<div id="chart-heatmap"></div>
|
||
</article>
|
||
<article class="header" style="grid-area: chart1;">
|
||
<header>
|
||
<h2>
|
||
Anzahl jemals gefundene Kurzzeitmietobjekte pro Region
|
||
</h2>
|
||
<button popovertarget="pop2">
|
||
<span>Erklärungen zum Diagramm</span>
|
||
</button>
|
||
<div popover id="pop2">
|
||
<h2>Anzahl jemals gefundene Kurzzeitmietobjekte pro Region</h2>
|
||
<p>
|
||
Das Balkendiagramm zeigt wieviele Kurzzeitmietobjekte insgesamt pro Region über den gesamten Datenerhebungszeitraum, gefunden wurden.
|
||
</p>
|
||
<ul>
|
||
<li>X-Achse: Bezeichnung der Region.</li>
|
||
<li>Y-Achse: Anzahl Mietobjekte.</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
</header>
|
||
<div id="chart-props-per-region"></div>
|
||
</article>
|
||
<article class="header" style="grid-area: chart2;">
|
||
<header>
|
||
<h2>
|
||
Entwicklung der Anzahl jemals gefunden Kurzzeitmietobjekte
|
||
</h2>
|
||
<button popovertarget="pop3">
|
||
<span>Erklärungen zum Diagramm</span>
|
||
</button>
|
||
<div popover id="pop3">
|
||
<h2>Entwicklung Anzahl jemals gefundener Kurzzeitmietobjekte pro Region</h2>
|
||
<p>
|
||
Das Liniendiagramm zeigt die Entwicklung der gefundenen Mietobjekte pro Region.
|
||
</p>
|
||
<ul>
|
||
<li>X-Achse: Zeitpunkt Scraping.</li>
|
||
<li>Y-Achse: Anzahl Mietobjekte.</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
</header>
|
||
<div id="extractions"></div>
|
||
</article>
|
||
<article style="grid-area: chart4;">
|
||
<div id="leaflet"></div>
|
||
</article>
|
||
<script type="module">
|
||
const sharedOptions = {
|
||
basic: {
|
||
color: {!! $chartOptions['colors'] !!},
|
||
grid: {
|
||
top: 30,
|
||
left: 70,
|
||
right: 0,
|
||
bottom: 45
|
||
},
|
||
name: (opt) => {
|
||
return {
|
||
name: opt.name,
|
||
nameLocation: opt.location,
|
||
nameGap: 50,
|
||
nameTextStyle: {
|
||
fontWeight: 'bold',
|
||
},
|
||
}
|
||
}
|
||
}
|
||
}
|
||
const extractionDates = {!! json_encode($regionPropertiesCapacities['scrapeDates']) !!};
|
||
|
||
const chartHeatmap = document.getElementById('chart-heatmap');
|
||
const cHeatmap = echarts.init(chartHeatmap);
|
||
const cHeatmapOptions = {
|
||
animation: false,
|
||
tooltip: {
|
||
position: 'top'
|
||
},
|
||
grid: {
|
||
show: true,
|
||
borderWidth: 1,
|
||
borderColor: '#aaa',
|
||
top: 30,
|
||
right: 45,
|
||
bottom: 70,
|
||
left: 30
|
||
},
|
||
dataZoom: [{
|
||
type: 'slider'
|
||
},
|
||
{
|
||
type: 'slider',
|
||
show: true,
|
||
yAxisIndex: 0,
|
||
}],
|
||
xAxis: {
|
||
show: true,
|
||
name: 'Zeitpunkt Scraping',
|
||
type: 'category',
|
||
data: extractionDates,
|
||
splitArea: {
|
||
show: false
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
nameLocation: 'center',
|
||
nameGap: 10,
|
||
nameTextStyle: {
|
||
fontWeight: 'bold',
|
||
}
|
||
},
|
||
yAxis: {
|
||
show: true,
|
||
type: 'category',
|
||
data: {!! json_encode($regionPropertiesCapacities['property_ids']) !!},
|
||
splitArea: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
name: 'Mietobjekte',
|
||
nameLocation: 'center',
|
||
nameGap: 10,
|
||
nameTextStyle: {
|
||
fontWeight: 'bold',
|
||
}
|
||
},
|
||
visualMap: {
|
||
type: 'piecewise',
|
||
min: 0,
|
||
max: 100,
|
||
calculable: true,
|
||
orient: 'horizontal',
|
||
left: 'center',
|
||
top: 0,
|
||
formatter: (v1, v2) => {
|
||
return `${v1} – ${v2} %`;
|
||
},
|
||
inRange: {
|
||
color: sharedOptions.basic.color,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Auslastung',
|
||
type: 'heatmap',
|
||
blurSize: 0,
|
||
data: {!! json_encode($regionPropertiesCapacities['values']) !!},
|
||
label: {
|
||
show: false
|
||
},
|
||
tooltip: {
|
||
formatter: (data) => {
|
||
return `Kurzzeitmietobjekte-ID: ${data.data[1]}<br />Datum Scraping: ${data.data[0]}<br/>Auslastung: ${data.data[2].toFixed(2)} %`
|
||
},
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
borderColor: '#000',
|
||
borderWidth: 2
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
cHeatmap.setOption(cHeatmapOptions);
|
||
|
||
const chartPropsPerRegion = document.getElementById('chart-props-per-region');
|
||
const cPropsPerRegion = echarts.init(chartPropsPerRegion);
|
||
const cPropsPerRegionOptions = {
|
||
grid: sharedOptions.basic.grid,
|
||
color: sharedOptions.basic.color,
|
||
xAxis: {
|
||
name: 'Region',
|
||
nameLocation: 'center',
|
||
nameGap: 30,
|
||
nameTextStyle: {
|
||
fontWeight: 'bold',
|
||
},
|
||
type: 'category',
|
||
data: {!! $propsPerRegion[1] !!}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: 'Anzahl Mietobjekte',
|
||
nameLocation: 'middle',
|
||
nameGap: 50,
|
||
nameTextStyle: {
|
||
fontWeight: 'bold',
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: {!! $propsPerRegion[2] !!},
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: (e) => {
|
||
return sharedOptions.basic.color[e.dataIndex];
|
||
}
|
||
}
|
||
},
|
||
]
|
||
};
|
||
|
||
cPropsPerRegion.setOption(cPropsPerRegionOptions);
|
||
|
||
const chartExtractions = document.getElementById('extractions');
|
||
const cExtractions = echarts.init(chartExtractions);
|
||
|
||
const filters = {
|
||
regions: ["Alle", "Davos", "Engadin", "Heidiland", "St. Moritz"]
|
||
}
|
||
|
||
const cExtractionsOptions = {
|
||
color: sharedOptions.basic.color,
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: filters.regions
|
||
},
|
||
grid: sharedOptions.basic.grid,
|
||
xAxis: {
|
||
name: 'Zeitpunkt Scraping',
|
||
nameLocation: 'center',
|
||
nameGap: 24,
|
||
nameTextStyle: {
|
||
fontWeight: 'bold',
|
||
},
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: extractionDates
|
||
},
|
||
yAxis: {
|
||
name: 'Anzahl Mietobjekte',
|
||
nameLocation: 'center',
|
||
nameGap: 50,
|
||
nameTextStyle: {
|
||
fontWeight: 'bold',
|
||
},
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Alle',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: {!! json_encode($growth['total_all']) !!},
|
||
},
|
||
{
|
||
name: 'Davos',
|
||
type: 'line',
|
||
data: {!! json_encode($growth['total_davos']) !!}
|
||
},
|
||
{
|
||
name: 'Engadin',
|
||
type: 'line',
|
||
data: {!! json_encode($growth['total_engadin']) !!}
|
||
},
|
||
{
|
||
name: 'Heidiland',
|
||
type: 'line',
|
||
data: {!! json_encode($growth['total_heidiland']) !!}
|
||
},
|
||
{
|
||
name: 'St. Moritz',
|
||
type: 'line',
|
||
data: {!! json_encode($growth['total_stmoritz']) !!}
|
||
},
|
||
]
|
||
};
|
||
|
||
cExtractions.setOption(cExtractionsOptions);
|
||
|
||
const map = L.map('leaflet');
|
||
|
||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
maxZoom: 19,
|
||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||
}).addTo(map);
|
||
|
||
function icon(id){
|
||
return L.divIcon({
|
||
className: "region"+id,
|
||
html: '<span></span>'
|
||
})
|
||
}
|
||
|
||
const markers = L.featureGroup([
|
||
@foreach($geo as $g)
|
||
L.marker([{{ $g['latlng'] }}], {icon: icon({{ $g['region_id'] }})}).bindPopup('<a href="/property/{{ $g['property_id'] }}">{{ $g['latlng'] }}</a>'),
|
||
@endforeach
|
||
]).addTo(map);
|
||
|
||
map.fitBounds(markers.getBounds(), {padding: [20,20]})
|
||
|
||
cHeatmap.on('click', 'series', (e) => {
|
||
window.open(`/property/${e.value[1]}?date=${e.value[0]}`, '_self');
|
||
})
|
||
|
||
cPropsPerRegion.on('click', 'series', (e) => {
|
||
console.log(e.dataIndex);
|
||
//window.open(`/property/${e.value[1]}?date=${e.value[0]}`, '_self');
|
||
})
|
||
|
||
|
||
|
||
</script>
|
||
@endsection
|