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

@extends('base')
@section('body-class', 'region')
@section('header')
<nav>
  <strong>{{ $region[0]['region_name'] }}</strong>
  <ul>
    <li><a href="/">Start</a></li>
    @foreach($regions as $r)
    @if($r['region_id'] != $region_id)
    <li><a href="/region/{{ $r['region_id'] }}">{{ $r['region_name'] }}</a></li>
    @endif
    @endforeach
  </ul>
</nav>
@endsection
@section('main')
<article style="grid-area: timeline;">
    <div id="timeline"></div>
</article>
<article class="header" style="grid-area: chart6;">
    <header>
        <h2 id="prediction-title">Gleitender Mittelwert für die Auslastung von {{ $region[0]['region_name'] }}</h2>
    </header>
    <div id="chart-prediction"></div>
</article>
<article class="header" style="grid-area: chart1;">
    <header>
        <h2 id="belegung-title">Gesamtauslastung</h2>
    </header>
    <div id="chart-heatmap"></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 Auslastung
        </h2>
        <button popovertarget="chart-capacity-popover"></button>
        <div id="chart-capacity-popover" popover>
            <h2>Erkläung zum Diagramm «Entwicklung der Auslastung»</h2>
            <p>Das Liniendiagramm zeigt die Auslastung von Regionen. 100 % = die Region ist kaum ausgelastet; 100 % der Mietobjekte sind verfügbar. 0 % = Die Region ist komplett ausgelastet; Es stehen keine Mietangebote zur Verfügung.</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>
    <div id="chart-capacity-daily">
</article>

<script type="module">

const sharedOptions = {
  basic: {
    color: ['#9ecae1','#6baed6','#4292c6','#2171b5','#084594'],
    grid: {
      top: 20,
      left: 60,
      right: 0,
      bottom: 50
    },
    name: (opt) => {
      return {
        name: opt.name,
        nameLocation: opt.location,
        nameGap: 24,
        nameTextStyle: {
          fontWeight: 'bold',
        },
      }
    }
  }
}

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

const cCapacityOptions = {
  legend: {
      data: ['Auslastung Region', 'Auslastung alle Regionen']
  },
  tooltip: {
    trigger: 'axis',
    valueFormatter: (value) => value.toFixed(2)+' %'
  },
  grid: {
    top: 20,
    left: 25,
    right: 10,
    bottom: 20,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: {!! json_encode($regionCapacities['region']['dates']) !!},
    name: 'Zeitpunkt Scraping',
    nameLocation: 'center',
    nameGap: 24,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100,
    name: 'Auslastung in %',
    nameLocation: 'center',
    nameGap: 38,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  series: [{
      name: 'Auslastung alle Regionen',
      type: 'line',
      symbolSize: 7,
      data: {!! json_encode($regionCapacities['all']['capacities']) !!}
    },
    {
        name: 'Auslastung Region',
        type: 'line',
        symbolSize: 7,
        data: {!! json_encode($regionCapacities['all']['capacities']) !!}
    }]
};

cCapacity.setOption(cCapacityOptions);

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

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

cCapacityMonthly.setOption(cCapacityMonthlyOptions);

const chartCapacityDaily = document.getElementById('chart-capacity-daily');
const cCapacityDaily = echarts.init(chartCapacityDaily);

const cCapacityDailyOptions = {
    timeline: {
        show: false,
        data: {!! json_encode($regionCapacities['region']['dates']) !!},
        axisType: 'time',
    },
    grid: {
        top: 0,
        bottom: 25,
        left: 70,
        right: 10
    },
    xAxis: {
        type: 'value',
        max: 100
    },
    yAxis: {
        type: 'category',
    },
    options: [
        @foreach ($regionCapacities['region_daily'] as $d)
        {
        yAxis: {
            data: {!! json_encode($d['weekdays']) !!}
        },
        series: [{
            type: 'bar',
            data: {!! json_encode($d['capacities']) !!}
        }]
    },
    @endforeach
    ]
};

cCapacityDaily.setOption(cCapacityDailyOptions);

const chartPrediction = document.getElementById('chart-prediction');
const cPrediction = echarts.init(chartPrediction);

const cPredictionOptions = {
  timeline: {
      show: false,
      data: {!! json_encode($regionCapacities['region']['dates']) !!},
      axisType: 'time',
      replaceMerge: ['graphic', 'series']
  },
  legend: {
    show: true
  },
  tooltip: {
    trigger: 'axis',
    valueFormatter: (value) => value.toFixed(2)+' %'
  },
  grid: {
    top: 20,
    left: 25,
    right: 10,
    bottom: 20,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    name: 'Zeitpunkt Scraping',
    nameLocation: 'center',
    nameGap: 24,
    nameTextStyle: {
      fontWeight: 'bold',
    },
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100,
    name: 'Auslastung in %',
    nameLocation: 'center',
    nameGap: 38,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  options: [
    @foreach ($predictions as $p)
    @if($p === null)
    {
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: 'Keine Daten für Zeitspanne',
              fontSize: 44,
              fontWeight: 'bold',
            }
          }
        ]
      }
    },
    @else
    {
      graphic: {
        elements: []
      },
      xAxis: {
        data: {!! json_encode($p['dates']) !!}
      },
      series: [
        {
          name: 'Gleitender Mittelwert',
          type: 'line',
          symbolSize: 7,
          data: {!! json_encode($p['movAvg']) !!}
        },
        {
            name: 'Daten vom ...',
            type: 'line',
            symbolSize: 7,
            data: {!! json_encode($p['cap_earlierTimeframe']) !!}
        },
        {
            name: 'Daten vom',
            type: 'line',
            symbolSize: 7,
            data: {!! json_encode($p['cap_laterTimeframe']) !!}
        }
      ]
    },
    @endif
    @endforeach
  ]
};

cPrediction.setOption(cPredictionOptions);

const chartHeatmap = document.getElementById('chart-heatmap');
const cHeatmap = echarts.init(chartHeatmap);
const cHeatmapOptions = {
  animation: false,
  tooltip: {
    position: 'top'
  },
  grid: {
    top: 30,
    right: 45,
    bottom: 50,
    left: 5
  },
  dataZoom: [{
      type: 'slider'
    },
    {
      type: 'slider',
      show: true,
      yAxisIndex: 0,
  }],
  xAxis: {
    show: false,
    name: 'Kurzzeitmietobjekt',
    type: 'category',
    data: {!! json_encode($regionPropertiesCapacities['scrapeDates']) !!},
    splitArea: {
      show: false
    },
    axisLabel: {
      show: true,
    }
  },
  yAxis: {
    show: false,
    type: 'category',
    data: {!! json_encode($regionPropertiesCapacities['property_ids']) !!},
    splitArea: {
      show: true
    }
  },
  visualMap: {
    type: 'piecewise',
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    top: 0,
    formatter: (v1, v2) => {
      return `${v1} – ${v2} %`;
    },
    inRange: {
      color: sharedOptions.basic.color,
    },
  },
  series: [
    {
      name: 'Auslastung',
      type: 'heatmap',
      blurSize: 0,
      data: {!! json_encode($regionPropertiesCapacities['values']) !!},
      label: {
        show: false
      },
      tooltip: {
        formatter: (data) => {
          return `Kurzzeitmietobjekte-ID: ${data.data[1]}<br />Datum Scraping: ${data.data[0]}<br/>Auslastung: ${data.data[2].toFixed(2)} %`
        },
      },
      emphasis: {
        itemStyle: {
          borderColor: '#000',
          borderWidth: 2
        }
      }
    }
  ]
}

cHeatmap.setOption(cHeatmapOptions);

const chartTimeline = document.getElementById('timeline');
const cTimeline = echarts.init(chartTimeline);

const cTimelineOptions = {
    grid: {
        show: false,
    },
    timeline: {
        data: {!! json_encode($regionCapacities['region']['dates']) !!},
        playInterval: 2000,
        axisType: 'time',
        left: 8,
        right: 8,
        bottom: 0,
        label: {
            show: false
        }
    },
};

cTimeline.setOption(cTimelineOptions);

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

    // Set markpoint on linechart
    let x = cCapacityOptions.xAxis.data[e.currentIndex];
    let y = cCapacityOptions.series[0].data[e.currentIndex];

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

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

    cPrediction.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