ConsultancyProject_2_ETL/dashboard/resources/views/overview.blade.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>
            Anzahl Properties p. Extractions
        </h2>
    </header>
    <div id="extractions"></div>
</article>
<article class="header">
    <header>
        <h2>
            Anzahl Properties p. Extractions
        </h2>
    </header>
    <div id="capacity"></div>
</article>
<article>
    <div id="leaflet"></div>
</article>

<script type="module">
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: ["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: ['2024-04-14','2024-04-15','2024-04-16','2024-04-19','2024-04-22','2024-04-25','2024-04-28','2024-05-01','2024-05-04','2024-05-07','2024-05-10','2024-05-13','2024-05-16','2024-05-19','2024-05-22','2024-05-25','2024-05-28','2024-05-31','2024-06-01','2024-06-04','2024-06-07','2024-06-10','2024-06-13','2024-06-16','2024-06-19','2024-06-22','2024-06-25','2024-06-28','2024-07-01','2024-07-04','2024-07-07','2024-07-10','2024-07-13','2024-07-16','2024-07-19','2024-07-22','2024-07-25','2024-07-28','2024-07-31','2024-08-01','2024-08-04','2024-08-07','2024-08-10','2024-08-13','2024-08-16','2024-08-19','2024-08-22']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Alle',
      type: 'line',
      stack: 'Total',
      data: [596, 239, 835, 673, 863, 1803, 904, 915, 958, 966, 1001, 1031, 1044, 1055, 1158, 1162, 1181, 1203, 1207, 1214, 1254, 1258, 1264, 1288, 1296, 1305, 1318, 1323, 1330, 1333, 1342, 1350, 1436, 1454, 1461, 1469, 1492, 1504, 1506, 1510, 1512, 1518, 1534, 1535, 1541, 1544, 1500]
    },
    {
      name: 'Heidiland',
      type: 'line',
      stack: 'Heidiland',
      data: [133,64,197,151,197,417,210,213,215,220,226,239,247,251,251,252,262,275,276,277,281,283,284,286,287,287,287,287,287,287,287,289,290,292,293,294,294,294,295,295,295,296,312,313,313,313,301]
    },
    {
      name: 'Davos',
      type: 'line',
      stack: 'Davos',
      data: [133,56,189,152,196,409,206,209,209,209,221,223,223,224,226,227,230,234,236,238,250,252,252,259,261,263,267,270,272,272,274,274,277,278,279,281,286,289,289,289,289,290,290,290,293,296,285]
    },
    {
      name: 'Engadin',
      type: 'line',
      stack: 'Engadin',
      data: [185,73,258,212,278,569,284,289,326,326,340,346,350,355,413,413,413,413,414,415,438,438,442,455,460,463,470,472,477,479,484,486,544,554,558,561,578,585,586,590,592,595,595,595,597,597,583]
    },
    {
      name: 'St. Moritz',
      type: 'line',
      stack: 'St. Moritz',
      data: [145,46,191,158,192,408,204,204,208,211,214,223,224,225,268,270,276,281,281,284,285,285,286,288,288,292,294,294,294,295,297,301,325,330,331,333,334,336,336,336,336,337,337,337,338,338,331]
    },
  ]
};

cExtractions.setOption(cExtractionsOptions);
</script>
@endsection