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

@extends('base')
@section('body-class', 'region')
@section('header')
<nav>
  <strong>{{ $region[0]['name'] }}</strong>
  <ul>
    <li><a href="/">Start</a></li>
    @foreach($regions as $r)
    @if($r['id'] != $regionId)
    <li><a href="/region/{{ $r['id'] }}">{{ $r['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 Verfügbarkeit der Region</h2>
    </header>
    <div id="chart-prediction"></div>
</article>
<article class="header" style="grid-area: chart1;">
    <header>
        <h2 id="belegung-title">Verfügbarkeit aller Mietobjekte über Gesamte Zeit der Region</h2>
    </header>
    <div id="chart-heatmap"></div>
</article>
<article class="header" style="grid-area: chart3;">
    <header>
        <h2>
            Verfügbarkeit Region nach Monat am <span class="date">{{ $startDate }}</span>
        </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 «Entwicklung der Verfügbarkeit»</h2>
            <p>Das Liniendiagramm zeigt die Verfügbarkeit 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>
            Verfügbarkeit Wochentage am <span class="date">{{ $startDate }}</span>
        </h2>
    </header>
    <div id="chart-capacity-daily">
</article>

<script type="module">

const sharedOptions = {
  basic: {
    color: {!! $diagramsOptions['shared']['colors'] !!},
    grid: {
      top: 20,
      left: 60,
      right: 0,
      bottom: 50
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        valueFormatter: (value) => value == null ? 'N/A' : value.toFixed(2)+' %'
    },
    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: {
    show: true
  },
  tooltip: sharedOptions.basic.tooltip,
  color: sharedOptions.basic.color,
  grid: {
    top: 20,
    left: 25,
    right: 10,
    bottom: 20,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: {!! $diagramsOptions['capacity']['xAxis']['data'] !!},
    name: 'Zeitpunkt Scraping',
    nameLocation: 'center',
    nameGap: 24,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100,
    name: 'Verfügbarkeit in %',
    nameLocation: 'center',
    nameGap: 38,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  series: [{
      name: 'Verfügbarkeit alle Regionen',
      type: 'line',
      symbolSize: 7,
      data: {!! $diagramsOptions['capacity']['series']['all']['data'] !!}
    },
    {
        name: 'Verfügbarkeit Region',
        type: 'line',
        symbolSize: 7,
        data: {!! $diagramsOptions['capacity']['series']['region']['data'] !!}
    }]
};

cCapacity.setOption(cCapacityOptions);

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

const cCapacityMonthlyOptions = {
    timeline: {
        show: false,
        data: {!! $diagramsOptions['capacity']['xAxis']['data'] !!},
        axisType: 'time',
    },
    grid: {
        top: 5,
        bottom: 40,
        left: 70,
        right: 10
    },
    xAxis: {
        type: 'value',
        max: 100,
        name: 'Verfügbarkeit in %',
        nameLocation: 'center',
        nameGap: 25,
            nameTextStyle: {
          fontWeight: 'bold',
        }
    },
    yAxis: {
        type: 'category',
    },
    tooltip: sharedOptions.basic.tooltip,
    options: [
        @foreach ($diagramsOptions['capacityMonthly']['options'] as $m)
        {
        yAxis: {
            data: {!! json_encode($m['months']) !!}
        },
        series: [{
            type: 'bar',
            itemStyle: {
                color: sharedOptions.basic.color[3]
            },
            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: {!! $diagramsOptions['capacity']['xAxis']['data'] !!},
        axisType: 'time',
    },
    tooltip: sharedOptions.basic.tooltip,
    grid: {
        top: 5,
        bottom: 40,
        left: 70,
        right: 10
    },
    xAxis: {
        type: 'value',
        max: 100,
        name: 'Verfügbarkeit in %',
        nameLocation: 'center',
        nameGap: 25,
        nameTextStyle: {
          fontWeight: 'bold',
        }
    },
    yAxis: {
        type: 'category',
    },
    options: [
        @foreach ($diagramsOptions['capacityDaily']['options'] as $d)
        {
        yAxis: {
            data: {!! json_encode($d['weekdays']) !!}
        },
        series: [{
            type: 'bar',
            itemStyle: {
                color: sharedOptions.basic.color[3]
            },
            data: {!! json_encode($d['capacities']) !!}
        }]
    },
    @endforeach
    ]
};

cCapacityDaily.setOption(cCapacityDailyOptions);

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

const cPredictionOptions = {
  color: sharedOptions.basic.color,
  timeline: {
      show: false,
      data: {!! $diagramsOptions['capacity']['xAxis']['data'] !!},
      axisType: 'time',
      replaceMerge: ['graphic', 'series']
  },
  legend: {
    show: true
  },
  tooltip: sharedOptions.basic.tooltip,
  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: 'Verfügbarkeit in %',
    nameLocation: 'center',
    nameGap: 38,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  options: [
    @foreach ($diagramsOptions['predictions']['options'] 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
    {
      color: sharedOptions.basic.color,
      graphic: {
        elements: []
      },
      xAxis: {
        data: {!! json_encode($p['dates']) !!}
      },
      series: [
        {
          name: 'Gleitender Mittelwert',
          type: 'line',
          symbolSize: 7,
          data: {!! json_encode($p['movAvg']) !!}
        },
        {
            name: 'Ausgangsdaten',
            type: 'line',
            symbolSize: 7,
            data: {!! json_encode($p['cap_earlierTimeframe']) !!}
        },
        {
            name: 'Vergleichsdaten',
            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: {
    show: true,
    borderWidth: 1,
    borderColor: '#aaa',
    top: 30,
    right: 45,
    bottom: 70,
    left: 30
  },
  dataZoom: [{
      type: 'slider'
    },
    {
      type: 'slider',
      show: true,
      yAxisIndex: 0,
  }],
  xAxis: {
    show: true,
    name: 'Zeitpunkt Scraping',
    type: 'category',
    data: {!! $diagramsOptions['heatmap']['xAxis']['data'] !!},
    splitArea: {
      show: false
    },
    splitArea: {
      show: false
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
        show: false,
    },
    axisLine: {
        show: false,
    },
    nameLocation: 'center',
    nameGap: 10,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  yAxis: {
    show: true,
    type: 'category',
    data: {!! $diagramsOptions['heatmap']['yAxis']['data'] !!},
    splitArea: {
      show: false
    },
    axisTick: {
        show: false,
    },
    axisLine: {
        show: false,
    },
    axisLabel: {
      show: false,
    },
    name: 'Mietobjekte',
    nameLocation: 'center',
    nameGap: 10,
    nameTextStyle: {
      fontWeight: 'bold',
    }
  },
  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: 'Verfügbarkeit',
      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/>Verfügbarkeit: ${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: {!! $diagramsOptions['capacity']['xAxis']['data'] !!},
        playInterval: 2000,
        axisType: 'time',
        left: 8,
        right: 8,
        bottom: 0,
        label: {
            show: false
        }
    },
};

cTimeline.setOption(cTimelineOptions);

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

    let dateTitles = document.querySelectorAll('span.date');
    dateTitles.forEach(el => {
        el.innerText = cTimelineOptions.timeline.data[e.currentIndex];
    });

    // 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]
                }]
            }
        }
    });

})


document.querySelector('header').addEventListener('click', () => {
    console.log('test');
    cCapacityMonthly.dispatchAction({
        type: 'timelineChange',
        currentIndex: 10
    });
})


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

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

});

cHeatmap.on('click', 'series', (e) => {
  window.open(`/property/${e.value[1]}?date=${e.value[0]}`, '_self');
})

</script>
@endsection