99 lines
2.3 KiB
PHP
99 lines
2.3 KiB
PHP
|
@extends('base')
|
||
|
|
@section('main')
|
||
|
|
<article class="header">
|
||
|
|
<header>
|
||
|
|
<h2>
|
||
|
|
Properties pro Region
|
||
|
|
</h2>
|
||
|
|
</header>
|
||
|
|
<div id="chart-props-per-region"></div>
|
||
|
|
</article>
|
||
|
|
<article class="header">
|
||
|
|
<header>
|
||
|
|
<h2 id="belegung-title">
|
||
|
|
Belegung am {{ json_decode($extractiondates)[0] }}
|
||
|
|
</h2>
|
||
|
|
</header>
|
||
|
|
<div id="chart-calendar"></div>
|
||
|
|
</article>
|
||
|
|
<script type="module">
|
||
|
|
const chartCalendar = document.getElementById('chart-calendar');
|
||
|
|
const cCalendar = echarts.init(chartCalendar);
|
||
|
|
const h2Belegung = document.getElementById('belegung-title');
|
||
|
|
|
||
|
|
const cCalendarOptions = {
|
||
|
|
timeline: {
|
||
|
|
data: {!! $extractiondates !!},
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
visualMap: {
|
||
|
|
categories: [0,1,2],
|
||
|
|
inRange: {
|
||
|
|
color: ['red', 'purple', 'green']
|
||
|
|
},
|
||
|
|
formatter: (cat) => {
|
||
|
|
switch (cat) {
|
||
|
|
case 0:
|
||
|
|
return 'Ausgebucht';
|
||
|
|
case 1:
|
||
|
|
return 'Verfügbar (kein Anreisetag)';
|
||
|
|
case 2:
|
||
|
|
return 'Verfügbar';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
type: 'piecewise',
|
||
|
|
orient: 'horizontal',
|
||
|
|
left: 'center',
|
||
|
|
top: 0
|
||
|
|
},
|
||
|
|
calendar:[
|
||
|
|
{
|
||
|
|
orient: 'horizontal',
|
||
|
|
range: '2024',
|
||
|
|
top: 50,
|
||
|
|
right: 0,
|
||
|
|
left: 50,
|
||
|
|
bottom: "55%"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
orient: 'horizontal',
|
||
|
|
range: '2025',
|
||
|
|
right: 100,
|
||
|
|
left: 50,
|
||
|
|
bottom: 60,
|
||
|
|
top: '55%'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
options: [
|
||
|
|
@foreach ($calendar as $c)
|
||
|
|
{
|
||
|
|
series: [{
|
||
|
|
type: 'heatmap',
|
||
|
|
coordinateSystem: 'calendar',
|
||
|
|
calendarIndex: 0,
|
||
|
|
data: {!! json_encode($c) !!}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'heatmap',
|
||
|
|
coordinateSystem: 'calendar',
|
||
|
|
calendarIndex: 1,
|
||
|
|
data: {!! json_encode($c) !!}
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
@endforeach
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
cCalendar.setOption(cCalendarOptions);
|
||
|
|
cCalendar.on('timelinechanged', (e) => {
|
||
|
|
|
||
|
|
h2Belegung.innerText = "Belegung am "+cCalendarOptions.timeline.data[e.currentIndex];
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
@endsection
|