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: 50,
        right: 10
    },
    xAxis: {
        type: 'value',
        max: 100
    },
    yAxis: {
        type: 'category',
    },
    options: [{
        yAxis: {
            data: ['Apr 24', 'May 24', 'Jun 24', 'Aug 24', 'Sep 24', 'Oct 24', 'Nov 24', 'Dec 24', 'Jan 25', 'Feb 25', 'Mar 25', 'Apr 25', 'May 25', 'Jun 25', 'Jul 25', 'Aug 25', 'Sep 25', 'Oct 25']
        },
        series: [{
            type: 'bar',
            data: [100, 80, 20, 20, 3, 23, 34, 23, 45, 12, 34,23,45,12,34,45,12,34]
        }]
    }]
};

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