ConsultancyProject_2_ETL/dashboard/resources/views/property.blade.php

@extends('base')
@section('main')
<article class="header">
    <header>
        <h2>
            Angaben zur Property
        </h2>
    </header>
    <dl>
        @foreach ($base as $dt => $dd)
        <dt>{{ $dt }}</dt>
        <dd>
            @if ($dt === 'property_platform_id')
            <a href="https://www.e-domizil.ch/rental/{{ $dd }}" rel="noopener noreferrer" target="_blank">
                {{ $dd }}
            </a>
            @else
                {{ $dd }}
            @endif
        </dd>
        @endforeach
    </dl>
</article>
<article class="header" style="grid-row-start: 1; grid-row-end: 3;">
    <header>
        <h2 id="belegung-title">
            Belegung am {{ json_decode($extractiondates)[0] }}
        </h2>
    </header>
    <div id="chart-calendar"></div>
</article>
<article class="header">
    <header>
        <h2>
            Entwicklung der Verfügbarkeit
        </h2>
    </header>
    <div id="chart-capacity"></div>
</article>
<script type="module">
const chartCapacity = document.getElementById('chart-capacity');
const cCapacity = echarts.init(chartCapacity);

const cCapacityOptions = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '0',
    right: 10,
    bottom: '0',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: {!! json_encode($capacities['dates']) !!}
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100
  },
  series: {
      name: 'Alle',
      type: 'line',
      stack: 'Total',
      symbolSize: 7,
      data: {!! json_encode($capacities['capacities']) !!}
    }
};

cCapacity.setOption(cCapacityOptions);


const chartCalendar = document.getElementById('chart-calendar');
const cCalendar = echarts.init(chartCalendar);
const h2Belegung = document.getElementById('belegung-title');

const cCalendarOptions = {
    timeline: {
        data: {!! $extractiondates !!},
        playInterval: 2000,
        axisType: 'time',
        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: '6.25%',
          right: 10,
          bottom: '68.75%',
          left: 50,
        },
        {
          orient: 'horizontal',
          range: '2025',
          top: '37.5%',
          right: 10,
          bottom: '37.25%',
          left: 50,
        },
        {
          orient: 'horizontal',
          range: '2026',
          top: '68.75%',
          right: 10,
          bottom: '6.25%',
          left: 50,
        }
    ],
    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) !!}
            },
            {
                type: 'heatmap',
                coordinateSystem: 'calendar',
                calendarIndex: 2,
                data: {!! json_encode($c) !!}
            }]
        },
        @endforeach
    ]
};

cCalendar.setOption(cCalendarOptions);
cCalendar.on('timelinechanged', (e) => {
    // Change header text according to datapoint
    h2Belegung.innerText = "Belegung am "+cCalendarOptions.timeline.data[e.currentIndex];

    // Set markpoint on linechart
    let x = cCapacityOptions.xAxis.data[e.currentIndex];
    let y = cCapacityOptions.series.data[e.currentIndex];
    cCapacity.setOption({
        series: {
            markPoint: {
            data: [{
                    coord: [x, y]
                }]
            }
        }
    });
})

cCapacity.on('click', 'series', (e) => {

    // Switch to correct calendar in the timeline
    cCalendar.dispatchAction({
        type: 'timelineChange',
        currentIndex: e.dataIndex
    });

});


</script>
@endsection