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

@extends('base')
@section('main')
<article class="header">
    <header>
        <h2>
            Anzahl jemals gefundene Kurzzeitmietobjekte pro Region
        </h2>
    </header>
    <div id="chart-props-per-region"></div>
</article>
<article class="header">
    <header>
        <h2>
            Entwicklung der Anzahl jemals gefunden Kurzzeitmietobjekte
        </h2>
    </header>
    <div id="extractions"></div>
</article>
<article>
    <div id="leaflet"></div>
</article>
<article class="header">
    <header>
      <h2>
        Gesamtauslastung
      </h2>
    </header>
    <div id="chart-heatmap"></div>
</article>
<script type="module">
const hours = [
    '12a', '1a', '2a', '3a', '4a', '5a', '6a',
    '7a', '8a', '9a', '10a', '11a',
    '12p', '1p', '2p', '3p', '4p', '5p',
    '6p', '7p', '8p', '9p', '10p', '11p'
];

const extractionDates = {!! json_encode($growth['dates']) !!};


// prettier-ignore
let data = [];

for(let i = 0; i <= extractionDates.length; i++){
  for(let j = 0; j <= hours.length; j++){
    data.push([j,i,Math.random() * 3]);
  }
}

const chartHeatmap = document.getElementById('chart-heatmap');
const cHeatmap = echarts.init(chartHeatmap);
const cHeatmapOptions = {
  tooltip: {
    position: 'top'
  },
  grid: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  },
  xAxis: {
    type: 'category',
    data: hours,
    splitArea: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    data: extractionDates,
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: 0,
    max: 10,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [
    {
      name: 'Punch Card',
      type: 'heatmap',
      data: data,
      label: {
        show: false
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

cHeatmap.setOption(cHeatmapOptions);

const chartPropsPerRegion = document.getElementById('chart-props-per-region');
const cPropsPerRegion = echarts.init(chartPropsPerRegion);
const cPropsPerRegionOptions = {
    grid: {
        top: 20,
        left: 30,
        right: 0,
        bottom: 20

    },
  xAxis: {
    type: 'category',
    data: {!! $propsPerRegion[0] !!}
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: {!! $propsPerRegion[1] !!},
      type: 'bar'
    }
  ]
};

cPropsPerRegion.setOption(cPropsPerRegionOptions);

const chartExtractions = document.getElementById('extractions');
const cExtractions = echarts.init(chartExtractions);

const filters = {
  regions: ["Alle", "Davos", "Engadin", "Heidiland", "St. Moritz"]
}

const cExtractionsOptions = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: filters.regions
  },
  grid: {
    left: '0',
    right: 10,
    bottom: '0',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: extractionDates
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Alle',
      type: 'line',
      stack: 'Total',
      data: {!! json_encode($growth['total_all']) !!}
    },
    {
      name: 'Heidiland',
      type: 'line',
      stack: 'Heidiland',
      data: {!! json_encode($growth['total_heidiland']) !!}
    },
    {
      name: 'Davos',
      type: 'line',
      stack: 'Davos',
      data: {!! json_encode($growth['total_davos']) !!}
    },
    {
      name: 'Engadin',
      type: 'line',
      stack: 'Engadin',
      data: {!! json_encode($growth['total_engadin']) !!}
    },
    {
      name: 'St. Moritz',
      type: 'line',
      stack: 'St. Moritz',
      data: {!! json_encode($growth['total_stmoritz']) !!}
    },
  ]
};

cExtractions.setOption(cExtractionsOptions);

const map = L.map('leaflet').setView([46.862962, 9.535296], 9);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

const properties = {!! json_encode($geo) !!}
properties.forEach( prop => {
    let coords = prop.coordinates.split(',');
    L.marker(coords).addTo(map).bindPopup('<a href="/prop/'+prop.id+'">'+prop.coordinates+'</a>');
})


</script>
@endsection