@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: chart1;">
    <header>
        <h2 id="belegung-title"></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: ['#f1eef6','#bdc9e1','#74a9cf','#2b8cbe','#045a8d'],
    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[1]['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: 'Auslastung alle Regionen',
      type: 'line',
      symbolSize: 7,
      data: {!! json_encode($regionCapacities[0]['capacities']) !!}
    },
    {
        name: 'Auslastung Region',
        type: 'line',
        symbolSize: 7,
        data: {!! json_encode($regionCapacities[1]['capacities']) !!}
    }]
};

cCapacity.setOption(cCapacityOptions);

const chartHeatmap = document.getElementById('chart-heatmap');
const cHeatmap = echarts.init(chartHeatmap);
const cHeatmapOptions = {
  tooltip: {
    position: 'top'
  },
  grid: {
    top: 30,
    right: 0,
    bottom: 0,
    left: 0
  },
  dataZoom: [{
    type: 'inside'
  }
  ],
  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) => {
          let v = data.value
          return `Kurzzeitmietobjekte-ID: ${data.name}<br />Datum Scraping: ${extractionDates[v[1]]}<br/>Auslastung: ${v[2]} %`
        },
      },
      emphasis: {
        itemStyle: {
          borderColor: '#000',
          borderWidth: 2
        }
      }
    }
  ]
}

cHeatmap.setOption(cHeatmapOptions);
</script>
@endsection