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

@extends('base')
@section('body-class', 'property')

@section('header')
<span>Property {{ $base['property_platform_id'] }}</span><button popovertarget="prop-details"></button>
<div popover id="prop-details">
    <dl>
        <dt>Region</dt>
        <dd>{{ $base['region_name'] }}</dd>
        <dt>Zum ersten mal gefunden</dt>
        <dd>{{ $base['first_found'] }}</dd>
        <dt>Zum letzten mal gefunden</dt>
        <dd>{{ $base['last_found'] }}</dd>
    </dl>
</div>
@endsection

@section('main')
<article style="grid-area: timeline;">
    <div id="timeline"></div>
</article>
<article class="header" style="grid-area: chart1;">
    <header>
        <h2 id="belegung-title">
            Belegung am {{ json_decode($extractiondates)[0] }}
        </h2>
    </header>
    <div id="chart-calendar"></div>
</article>
<article class="header" style="grid-area: chart3;">
    <header>
        <h2>
            Auslastung nach Monat am 2024-04-15T07:06:22
        </h2>
    </header>
    <div id="chart-capacity-monthly">
    </div>
</article>
<article class="header" style="grid-area: chart2;">
    <header>
        <h2>
            Entwicklung der Verfügbarkeit
        </h2>
        <button popovertarget="chart-capacity-popover"></button>
        <div id="chart-capacity-popover" popover>
            <h2>Erkläung zum Diagramm</h2>
            <p>Das Liniendiagramm zeigt, wie sich die insgesamte Verfügbarkeit des Kurzzeitmietobjekts entwickelt hat.</p>
        </div>
    </header>
    <div id="chart-capacity"></div>
</article>
<article class="header" style="grid-area: chart4;">
    <header>
        <h2>
            Auslastung Tage für Monat
        </h2>
    </header>

</article>
<script type="module">
const chartTimeline = document.getElementById('timeline');
const cTimeline = echarts.init(chartTimeline);

const cTimelineOptions = {
    grid: {
        show: false,
    },
    timeline: {
        data: {!! $extractiondates !!},
        playInterval: 2000,
        axisType: 'time',
        left: 8,
        right: 8,
        bottom: 0,
        label: {
            show: false
        }
    }
};

cTimeline.setOption(cTimelineOptions);

const chartCapacityMonthly = document.getElementById('chart-capacity-monthly');
const cCapacityMonthly = echarts.init(chartCapacityMonthly);

const cCapacityMonthlyOptions = {
    timeline: {
        show: false,
        data: {!! $extractiondates !!},
        axisType: 'time',
    },
    grid: {
        top: 0,
        bottom: 25,
        left: 70,
        right: 10
    },
    xAxis: {
        type: 'value',
        max: 100
    },
    yAxis: {
        type: 'category',
    },
    options: [
        @foreach ($capacitiesMonthly as $cM)
        {
        yAxis: {
            data: {!! json_encode($cM['months']) !!}
        },
        series: [{
            type: 'bar',
            data: {!! json_encode($cM['capacities']) !!}
        }]
    },
    @endforeach
    ]
};

cCapacityMonthly.setOption(cCapacityMonthlyOptions);

const chartCapacity = document.getElementById('chart-capacity');
const cCapacity = echarts.init(chartCapacity);

const cCapacityOptions = {
  tooltip: {
    trigger: 'axis',
    formatter: 'Datum Scraping: {b}<br />Verfügbarkeit: {c} %'
  },
  grid: {
    top: 20,
    left: 25,
    right: 10,
    bottom: 20,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: {!! json_encode($capacities['dates']) !!},
    name: 'Zeitpunkt Scraping',
    nameLocation: 'center',
    nameGap: 24,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100,
    name: 'Auslastung in Prozent',
    nameLocation: 'center',
    nameGap: 38,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  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: {
        show: false,
        data: {!! $extractiondates !!},
        axisType: 'time',
    },
    visualMap: {
        categories: [0,1,2],
        inRange: {
            color: ['#d95f02', '#7570b3', '#1b9e77']
        },
        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: '15%',
          right: 10,
          bottom: '65%',
          left: 50,
        },
        {
          orient: 'horizontal',
          range: '2025',
          top: '47%',
          right: 10,
          bottom: '33%',
          left: 50,
        },
        {
          orient: 'horizontal',
          range: '2026',
          top: '79%',
          right: 10,
          bottom: '1%',
          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);


cTimeline.on('timelinechanged', (e) => {

    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];

    cCapacityMonthly.dispatchAction({
        type: 'timelineChange',
        currentIndex: e.currentIndex
    });

     cCalendar.dispatchAction({
        type: 'timelineChange',
        currentIndex: e.currentIndex
    });

    cCapacity.setOption({
        series: {
            markPoint: {
            data: [{
                    coord: [x, y]
                }]
            }
        }
    });

})

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

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


});


</script>
@endsection