Achsenbeschrftungen, Farben

dashboard/resources/css/app.css

@@ -108,3 +108,16 @@ article>header>h2{
     font-size: 1em;
     font-weight: 600;
 }
+
+@media(max-width: 960px){
+
+  body{
+    height: auto;
+  }
+
+  main{
+    height: auto;
+    grid-template-columns: 100%;
+    grid-template-rows: repeat(4, minmax(20em, 25em));
+  }
+}

dashboard/resources/views/overview.blade.php

@@ -28,25 +28,30 @@
     <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 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 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 = {
@@ -54,16 +59,20 @@ const cHeatmapOptions = {
     position: 'top'
   },
   grid: {
-    top: 0,
+    top: 25,
     right: 0,
     bottom: 0,
     left: 0
   },
   xAxis: {
+    name: 'Kurzzeitmietobjekt',
     type: 'category',
     data: {!! json_encode($heat['property_ids']) !!},
     splitArea: {
       show: false
+    },
+    axisLabel: {
+      show: true,
     }
   },
   yAxis: {
@@ -74,25 +83,32 @@ const cHeatmapOptions = {
     }
   },
   visualMap: {
+    type: 'piecewise',
     min: 0,
     max: 100,
     calculable: true,
     orient: 'horizontal',
     left: 'center',
-    bottom: '15%'
+    top: 0,
+    inRange: {
+      color: ['#f1eef6','#bdc9e1','#74a9cf','#2b8cbe','#045a8d']
+    },
   },
   series: [
     {
-      name: 'Punch Card',
+      name: 'Auslastung',
       type: 'heatmap',
       data: {!! json_encode($heat['values']) !!},
       label: {
         show: false
       },
+      tooltip: {
+        formatter: '{b0}: {c0}<br />{b1}: {c1}',
+      },
       emphasis: {
         itemStyle: {
-          shadowBlur: 10,
+          borderColor: '#000',
-          shadowColor: 'rgba(0, 0, 0, 0.5)'
+          borderWidth: 2
         }
       }
     }
@@ -104,19 +120,25 @@ cHeatmap.setOption(cHeatmapOptions);
 const chartPropsPerRegion = document.getElementById('chart-props-per-region');
 const cPropsPerRegion = echarts.init(chartPropsPerRegion);
 const cPropsPerRegionOptions = {
-    grid: {
+  grid: sharedOptions.basic.grid,
-        top: 20,
-        left: 30,
-        right: 0,
-        bottom: 20
-
-    },
   xAxis: {
+    name: 'Region',
+    nameLocation: 'center',
+    nameGap: 24,
+    nameTextStyle: {
+      fontWeight: 'bold',
+    },
     type: 'category',
     data: {!! $propsPerRegion[0] !!}
   },
   yAxis: {
-    type: 'value'
+    type: 'value',
+    name: 'Anzahl Kurzzeitmietobjekte',
+    nameLocation: 'middle',
+    nameGap: 38,
+    nameTextStyle: {
+      fontWeight: 'bold',
+    },
   },
   series: [
     {
@@ -142,18 +164,26 @@ const cExtractionsOptions = {
   legend: {
     data: filters.regions
   },
-  grid: {
+  color: sharedOptions.basic.color,
-    left: '0',
+  grid: sharedOptions.basic.grid,
-    right: 10,
-    bottom: '0',
-    containLabel: true
-  },
   xAxis: {
+    name: 'Zeitpunkt Scraping',
+    nameLocation: 'center',
+    nameGap: 24,
+    nameTextStyle: {
+      fontWeight: 'bold',
+    },
     type: 'category',
     boundaryGap: false,
     data: extractionDates
   },
   yAxis: {
+    name: 'Anzahl Kurzzeitmietobjekte',
+    nameLocation: 'center',
+    nameGap: 38,
+    nameTextStyle: {
+      fontWeight: 'bold',
+    },
     type: 'value'
   },
   series: [

etl/README.md

@@ -1,4 +1,4 @@
 # How to run
 ```bash
-fastapi dev api/main.py
+fastapi dev api/main.py --port 8080
 ```