Überarbeitung Detailansicht.

dashboard/resources/css/app.css

@@ -54,6 +54,45 @@ dd + dt{
   margin-top: .2em;
 }
 
+button[popovertarget]{
+  cursor: pointer;
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  background: #5470c6;
+}
+
+button[popovertarget]::before{
+  content: '?';
+  color: #fff;
+  font-weight: 700;
+}
+
+button[popovertarget]>span{
+  position: absolute;
+  left: -999em;
+  top: -999em;
+}
+
+[popover] {
+  border: none;
+  border-radius: 1em;
+  background: #fff;
+  padding: 1.5em;
+  border-radius: var(--small-border);
+  box-shadow: .0625em .0625em .625em rgba(0, 0, 0, 0.1);
+  max-width: 40em;
+  top: 4em;
+  margin: 0 auto;
+}
+
+[popover]::backdrop{
+  background-color: rgba(0,0,0,.5);
+}
+
+
 /*
   9. Create a root stacking context
 */
@@ -65,7 +104,6 @@ nav>ul{
   list-style: none;
 }
 
-
 body>header{
     position: fixed;
     top: 0;
@@ -81,31 +119,41 @@ body>header{
 
 main{
     width: 100%;
-    height: calc(100vh - 4em);
+    height: 100vh;
-    padding-top: 4em;
+    padding: 4em 0 1em;
     display: grid;
-    grid-template-columns: repeat(2, minmax(25%, 50%));
+    grid-template-columns: repeat(4, minmax(10%, 50%));
-    grid-template-rows: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr) 4em;
-    gap: 1em;
+    grid-template-areas:
-
+      "chart2 chart2 chart5 chart5"
+      "chart1 chart1 chart3 chart4"
+      "chart1 chart1 chart3 chart4"
+      "timeline timeline timeline timeline";
+    gap: .5em;
 }
 
 article{
     background: #f9f9f9;
     border: .0625em solid #ccc;
-    box-shadow: 0 0 .3em #ccc;
+    box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 15px 40px rgba(166,173,201,.2);
-    border-radius: 3px;
+    border-radius: .2em;
     display: grid;
 }
 
 article.header{
     grid-template-columns: 100%;
-    grid-template-rows: 2em 1fr;
+    grid-template-rows: minmax(1%, 10%) 1fr;
-    padding: 1em;
+    padding: .5em 1em 1em .5em;
+}
+
+article>header{
+  display: grid;
+  grid-template-columns: 1fr 1em;
+  grid-template-rows: 1fr;
 }
 
 article>header>h2{
-    font-size: 1em;
+    font-size: .8em;
     font-weight: 600;
 }
 

dashboard/resources/views/property.blade.php

@@ -1,27 +1,9 @@
 @extends('base')
 @section('main')
-<article class="header">
+<article style="grid-area: timeline;">
-    <header>
+    <div id="timeline"></div>
-        <h2>
-            Angaben zur Property
-        </h2>
-    </header>
-    <dl>
-        @foreach ($base as $dt => $dd)
-        <dt>{{ $dt }}</dt>
-        <dd>
-            @if ($dt === 'property_platform_id')
-            <a href="https://www.e-domizil.ch/rental/{{ $dd }}" rel="noopener noreferrer" target="_blank">
-                {{ $dd }}
-            </a>
-            @else
-                {{ $dd }}
-            @endif
-        </dd>
-        @endforeach
-    </dl>
 </article>
-<article class="header" style="grid-row-start: 1; grid-row-end: 3;">
+<article class="header" style="grid-area: chart1;">
     <header>
         <h2 id="belegung-title">
             Belegung am {{ json_decode($extractiondates)[0] }}
@@ -29,7 +11,16 @@
     </header>
     <div id="chart-calendar"></div>
 </article>
-<article class="header">
+<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 Verfügbarkeit
@@ -37,7 +28,72 @@
     </header>
     <div id="chart-capacity"></div>
 </article>
+<article class="header" style="grid-area: chart4;">
+    <header>
+        <h2>
+            Auslastung Tage für Monat
+        </h2>
+    </header>
+
+</article>
 <script type="module">
+const chartTimeline = document.getElementById('timeline');
+const cTimeline = echarts.init(chartTimeline);
+
+const cTimelineOptions = {
+    grid: {
+        show: false,
+    },
+    timeline: {
+        data: {!! $extractiondates !!},
+        playInterval: 2000,
+        axisType: 'time',
+        left: 8,
+        right: 8,
+        bottom: 0,
+        label: {
+            show: false
+        }
+    }
+};
+
+cTimeline.setOption(cTimelineOptions);
+
+const chartCapacityMonthly = document.getElementById('chart-capacity-monthly');
+const cCapacityMonthly = echarts.init(chartCapacityMonthly);
+
+const cCapacityMonthlyOptions = {
+    timeline: {
+        show: false,
+        data: {!! $extractiondates !!},
+        axisType: 'time',
+    },
+    grid: {
+        top: 0,
+        bottom: 25,
+        left: 50,
+        right: 10
+    },
+    xAxis: {
+        type: 'value',
+        max: 100
+    },
+    yAxis: {
+        type: 'category',
+    },
+    options: [{
+        yAxis: {
+            data: ['Apr 24', 'May 24', 'Jun 24', 'Aug 24', 'Sep 24', 'Oct 24', 'Nov 24', 'Dec 24', 'Jan 25', 'Feb 25', 'Mar 25', 'Apr 25', 'May 25', 'Jun 25', 'Jul 25', 'Aug 25', 'Sep 25', 'Oct 25']
+        },
+        series: [{
+            type: 'bar',
+            data: [100, 80, 20, 20, 3, 23, 34, 23, 45, 12, 34,23,45,12,34,45,12,34]
+        }]
+    }]
+};
+
+cCapacityMonthly.setOption(cCapacityMonthlyOptions);
+
 const chartCapacity = document.getElementById('chart-capacity');
 const cCapacity = echarts.init(chartCapacity);
 
@@ -46,9 +102,10 @@ const cCapacityOptions = {
     trigger: 'axis'
   },
   grid: {
-    left: '0',
+    top: 20,
+    left: 0,
     right: 10,
-    bottom: '0',
+    bottom: 0,
     containLabel: true
   },
   xAxis: {
@@ -72,26 +129,20 @@ const cCapacityOptions = {
 
 cCapacity.setOption(cCapacityOptions);
 
-
 const chartCalendar = document.getElementById('chart-calendar');
 const cCalendar = echarts.init(chartCalendar);
 const h2Belegung = document.getElementById('belegung-title');
 
 const cCalendarOptions = {
     timeline: {
+        show: false,
         data: {!! $extractiondates !!},
-        playInterval: 2000,
         axisType: 'time',
-        left: 0,
-        right: 0,
-        label: {
-            show: false
-        }
     },
     visualMap: {
         categories: [0,1,2],
         inRange: {
-            color: ['red', 'purple', 'green']
+            color: ['#d95f02', '#7570b3', '#1b9e77']
         },
         formatter: (cat) => {
             switch (cat) {
@@ -112,25 +163,25 @@ const cCalendarOptions = {
         {
           orient: 'horizontal',
           range: '2024',
-          top: '6.25%',
+          top: '15%',
           right: 10,
-          bottom: '68.75%',
+          bottom: '65%',
           left: 50,
         },
         {
           orient: 'horizontal',
           range: '2025',
-          top: '37.5%',
+          top: '47%',
           right: 10,
-          bottom: '37.25%',
+          bottom: '33%',
           left: 50,
         },
         {
           orient: 'horizontal',
           range: '2026',
-          top: '68.75%',
+          top: '79%',
           right: 10,
-          bottom: '6.25%',
+          bottom: '1%',
           left: 50,
         }
     ],
@@ -161,13 +212,26 @@ const cCalendarOptions = {
 };
 
 cCalendar.setOption(cCalendarOptions);
-cCalendar.on('timelinechanged', (e) => {
+
-    // Change header text according to datapoint
+
+cTimeline.on('timelinechanged', (e) => {
+
     h2Belegung.innerText = "Belegung am "+cCalendarOptions.timeline.data[e.currentIndex];
 
     // Set markpoint on linechart
     let x = cCapacityOptions.xAxis.data[e.currentIndex];
     let y = cCapacityOptions.series.data[e.currentIndex];
+
+    cCapacityMonthly.dispatchAction({
+        type: 'timelineChange',
+        currentIndex: e.currentIndex
+    });
+
+     cCalendar.dispatchAction({
+        type: 'timelineChange',
+        currentIndex: e.currentIndex
+    });
+
     cCapacity.setOption({
         series: {
             markPoint: {
@@ -177,16 +241,18 @@ cCalendar.on('timelinechanged', (e) => {
             }
         }
     });
+
 })
 
 cCapacity.on('click', 'series', (e) => {
 
     // Switch to correct calendar in the timeline
-    cCalendar.dispatchAction({
+    cTimeline.dispatchAction({
         type: 'timelineChange',
         currentIndex: e.dataIndex
     });
 
+
 });