diff --git a/dashboard/resources/css/app.css b/dashboard/resources/css/app.css index 76da0d2..3299a37 100644 --- a/dashboard/resources/css/app.css +++ b/dashboard/resources/css/app.css @@ -54,18 +54,21 @@ dd + dt{ margin-top: .2em; } +span + button{ + margin-left: .5em; +} + button[popovertarget]{ + background: no-repeat center / .3em #5470c6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23fff' d='M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z'/%3E%3C/svg%3E%0A"); 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; } @@ -117,19 +120,33 @@ body>header{ padding: 0 1em; } + main{ width: 100%; height: 100vh; padding: 4em 0 1em; display: grid; - grid-template-columns: repeat(4, minmax(10%, 50%)); + gap: .5em; +} + +body.overview main{ + grid-template-columns: repeat(8, minmax(1%, 50%)); + grid-template-rows: repeat(4, 1fr); + grid-template-areas: + "chart3 chart3 chart3 chart1 chart1 chart1 chart4 chart4" + "chart3 chart3 chart3 chart1 chart1 chart1 chart4 chart4" + "chart3 chart3 chart3 chart2 chart2 chart2 chart4 chart4" + "chart3 chart3 chart3 chart2 chart2 chart2 chart4 chart4" +} + +body.property main{ + grid-template-columns: repeat(4, minmax(10%, 50%)); grid-template-rows: repeat(3, 1fr) 4em; grid-template-areas: "chart2 chart2 chart5 chart5" "chart1 chart1 chart3 chart4" "chart1 chart1 chart3 chart4" "timeline timeline timeline timeline"; - gap: .5em; } article{ diff --git a/dashboard/resources/views/base.blade.php b/dashboard/resources/views/base.blade.php index 66eb3e7..b6ddf73 100644 --- a/dashboard/resources/views/base.blade.php +++ b/dashboard/resources/views/base.blade.php @@ -1,22 +1,14 @@ - Dashboard @vite(['resources/css/app.css', 'resources/js/app.js', 'node_modules/leaflet/dist/leaflet.css']) - +
- Dashboard - + @yield('header')
@yield('main') diff --git a/dashboard/resources/views/overview.blade.php b/dashboard/resources/views/overview.blade.php index e29304c..7256173 100644 --- a/dashboard/resources/views/overview.blade.php +++ b/dashboard/resources/views/overview.blade.php @@ -1,14 +1,22 @@ @extends('base') +@section('body-class', 'overview') @section('main') -
+

Anzahl jemals gefundene Kurzzeitmietobjekte pro Region

+ +
+

Das Diagram zeigt...

+
+
-
+

Entwicklung der Anzahl jemals gefunden Kurzzeitmietobjekte @@ -16,10 +24,10 @@

-
+
-
+

Gesamtauslastung @@ -59,12 +67,17 @@ const cHeatmapOptions = { position: 'top' }, grid: { - top: 25, + top: 30, right: 0, bottom: 0, left: 0 }, + dataZoom: [{ + type: 'inside' + } + ], xAxis: { + show: false, name: 'Kurzzeitmietobjekt', type: 'category', data: {!! json_encode($heat['property_ids']) !!}, @@ -76,6 +89,7 @@ const cHeatmapOptions = { } }, yAxis: { + show: false, type: 'category', data: extractionDates, splitArea: { @@ -90,20 +104,27 @@ const cHeatmapOptions = { orient: 'horizontal', left: 'center', top: 0, + formatter: (v1, v2) => { + return `${v1} – ${v2} %`; + }, inRange: { - color: ['#f1eef6','#bdc9e1','#74a9cf','#2b8cbe','#045a8d'] + color: sharedOptions.basic.color, }, }, series: [ { name: 'Auslastung', type: 'heatmap', + blurSize: 0, data: {!! json_encode($heat['values']) !!}, label: { show: false }, tooltip: { - formatter: '{b0}: {c0}
{b1}: {c1}', + formatter: (data) => { + let v = data.value + return `Kurzzeitmietobjekte-ID: ${data.name}
Datum Scraping: ${extractionDates[v[1]]}
Auslastung: ${v[2]} %` + }, }, emphasis: { itemStyle: { diff --git a/dashboard/resources/views/property.blade.php b/dashboard/resources/views/property.blade.php index b5e9469..4769076 100644 --- a/dashboard/resources/views/property.blade.php +++ b/dashboard/resources/views/property.blade.php @@ -1,4 +1,20 @@ @extends('base') +@section('body-class', 'property') + +@section('header') +Property {{ $base['property_platform_id'] }} +
+
+
Region
+
{{ $base['region_name'] }}
+
Zum ersten mal gefunden
+
{{ $base['first_found'] }}
+
Zum letzten mal gefunden
+
{{ $base['last_found'] }}
+
+
+@endsection + @section('main')
@@ -25,6 +41,11 @@

Entwicklung der Verfügbarkeit

+ +
+

Erkläung zum Diagramm

+

Das Liniendiagramm zeigt, wie sich die insgesamte Verfügbarkeit des Kurzzeitmietobjekts entwickelt hat.

+

@@ -99,24 +120,37 @@ const cCapacity = echarts.init(chartCapacity); const cCapacityOptions = { tooltip: { - trigger: 'axis' + trigger: 'axis', + formatter: 'Datum Scraping: {b}
Verfügbarkeit: {c} %' }, grid: { top: 20, - left: 0, + left: 25, right: 10, - bottom: 0, + bottom: 20, containLabel: true }, xAxis: { type: 'category', boundaryGap: false, - data: {!! json_encode($capacities['dates']) !!} + data: {!! json_encode($capacities['dates']) !!}, + name: 'Zeitpunkt Scraping', + nameLocation: 'center', + nameGap: 24, + nameTextStyle: { + fontWeight: 'bold', + } }, yAxis: { type: 'value', min: 0, - max: 100 + max: 100, + name: 'Auslastung in Prozent', + nameLocation: 'center', + nameGap: 38, + nameTextStyle: { + fontWeight: 'bold', + } }, series: { name: 'Alle',