Vorbereitung heatmap

dashboard/resources/views/overview.blade.php

@@ -19,8 +19,88 @@
 <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 = {
@@ -71,7 +151,7 @@ const cExtractionsOptions = {
   xAxis: {
     type: 'category',
     boundaryGap: false,
-    data: {!! json_encode($growth['dates']) !!}
+    data: extractionDates
   },
   yAxis: {
     type: 'value'
@@ -121,7 +201,6 @@ L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
 
 const properties = {!! json_encode($geo) !!}
 properties.forEach( prop => {
-    console.log(prop);
     let coords = prop.coordinates.split(',');
     L.marker(coords).addTo(map).bindPopup('<a href="/prop/'+prop.id+'">'+prop.coordinates+'</a>');
 })