From a3121bf58ee4e4b925c7a3371968aeb64da8d011 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gi=C3=B2=20Diani?= Date: Sun, 12 Jan 2025 20:55:46 +0100 Subject: [PATCH] navigation, regions --- dashboard/app/Api.php | 8 +- dashboard/resources/css/app.css | 55 ++++- dashboard/resources/views/overview.blade.php | 30 ++- dashboard/resources/views/property.blade.php | 3 +- dashboard/resources/views/region.blade.php | 215 +++++++++++++++++++ dashboard/routes/web.php | 13 +- etl/src/api/main.py | 4 + 7 files changed, 309 insertions(+), 19 deletions(-) create mode 100644 dashboard/resources/views/region.blade.php diff --git a/dashboard/app/Api.php b/dashboard/app/Api.php index 4fa29b0..5d0033e 100644 --- a/dashboard/app/Api.php +++ b/dashboard/app/Api.php @@ -1,6 +1,7 @@ span{ isolation: isolate; } -nav>ul{ - list-style: none; -} - body>header{ position: fixed; top: 0; @@ -120,6 +116,45 @@ body>header{ padding: 0 1em; } +body>header>nav{ + text-align: center; + max-width: 10em; + width: 100%; + background: #fff; + border-radius: .2em; + position: relative; +} + +body>header>nav>ul{ + position: absolute; + background: #fff; + width: 100%; + list-style: none; + padding: 0; + top: -999em; + left: -999em; +} + +body>header>nav:hover ul{ + top: initial; + left: 0; +} + +body>header>nav>ul>li a, +body>header>nav>strong{ + display: inline-block; + padding: .2em .4em; +} + +a{ + color: #000; +} + +a:hover, +a:focus{ + color: #aaa; +} + main{ width: 100%; @@ -139,7 +174,7 @@ body.overview main{ "chart3 chart3 chart3 chart2 chart2 chart2 chart4 chart4" } -body.timeline main{ +body.property main{ grid-template-columns: repeat(4, minmax(10%, 50%)); grid-template-rows: repeat(3, 1fr) 4em; grid-template-areas: @@ -149,6 +184,16 @@ body.timeline main{ "timeline timeline timeline timeline"; } +body.region main{ + grid-template-columns: repeat(4, minmax(10%, 50%)); + grid-template-rows: repeat(3, 1fr) 4em; + grid-template-areas: + "chart1 chart1 chart2 chart2" + "chart1 chart1 chart3 chart4" + "chart1 chart1 chart3 chart4" + "chart1 chart1 timeline timeline"; +} + article{ background: #f9f9f9; border: .0625em solid #ccc; diff --git a/dashboard/resources/views/overview.blade.php b/dashboard/resources/views/overview.blade.php index 4957555..476288c 100644 --- a/dashboard/resources/views/overview.blade.php +++ b/dashboard/resources/views/overview.blade.php @@ -1,5 +1,15 @@ @extends('base') @section('body-class', 'overview') +@section('header') + +@endsection @section('main')
@@ -63,19 +73,24 @@ const extractionDates = {!! json_encode($regionPropertiesCapacities['scrapeDates const chartHeatmap = document.getElementById('chart-heatmap'); const cHeatmap = echarts.init(chartHeatmap); const cHeatmapOptions = { + animation: false, tooltip: { position: 'top' }, grid: { top: 30, - right: 0, - bottom: 0, - left: 0 + right: 45, + bottom: 50, + left: 5 }, dataZoom: [{ - type: 'inside' - } - ], + type: 'slider' + }, + { + type: 'slider', + show: true, + yAxisIndex: 0, + }], xAxis: { show: false, name: 'Kurzzeitmietobjekt', @@ -122,8 +137,7 @@ const cHeatmapOptions = { }, tooltip: { formatter: (data) => { - let v = data.value - return `Kurzzeitmietobjekte-ID: ${data.name}
Datum Scraping: ${extractionDates[v[1]]}
Auslastung: ${v[2]} %` + return `Kurzzeitmietobjekte-ID: ${data.data[1]}
Datum Scraping: ${data.data[0]}
Auslastung: ${data.data[2].toFixed(2)} %` }, }, emphasis: { diff --git a/dashboard/resources/views/property.blade.php b/dashboard/resources/views/property.blade.php index 5429243..a33b7fb 100644 --- a/dashboard/resources/views/property.blade.php +++ b/dashboard/resources/views/property.blade.php @@ -1,6 +1,5 @@ @extends('base') -@section('body-class', 'timeline') - +@section('body-class', 'property') @section('header') Property {{ $base['property_platform_id'] }}
diff --git a/dashboard/resources/views/region.blade.php b/dashboard/resources/views/region.blade.php new file mode 100644 index 0000000..23cbf66 --- /dev/null +++ b/dashboard/resources/views/region.blade.php @@ -0,0 +1,215 @@ +@extends('base') +@section('body-class', 'region') +@section('header') + +@endsection +@section('main') +
+
+
+
+
+

+
+
+
+
+
+

+ Auslastung nach Monat am 2024-04-15T07:06:22 +

+
+
+
+
+
+
+

+ Entwicklung der Auslastung +

+ +
+

Erkläung zum Diagramm «Entwicklung der Auslastung»

+

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.

+
+
+
+
+
+
+

+ Auslastung Tage für Monat +

+
+
+
+ + +@endsection diff --git a/dashboard/routes/web.php b/dashboard/routes/web.php index 069296d..f7edc0a 100644 --- a/dashboard/routes/web.php +++ b/dashboard/routes/web.php @@ -5,7 +5,9 @@ use App\Api; Route::get('/', function () { - $regionPropertyCapacities = Api::regionPropertyCapacities(-1); + $regionBase = Api::regionBase(-1); + $regionBase[] = ['region_name' => 'Alle Regionen', 'region_id' => -1]; + $regionPropertyCapacities = Api::regionPropertiesCapacities(-1); $propertiesGrowth = Api::propertiesGrowth(); $propsPerRegion = Api::propertiesPerRegion(); $propsPerRegionName = []; @@ -18,7 +20,7 @@ Route::get('/', function () { $propertiesGeo = Api::propertiesGeo(); - return view('overview', ["regionPropertiesCapacities" => $regionPropertyCapacities, "geo" => $propertiesGeo, "growth" => $propertiesGrowth, "propsPerRegion" => [json_encode($propsPerRegionName), json_encode($propsPerRegionCounts)]]); + return view('overview', ["regions" => $regionBase, "regionPropertiesCapacities" => $regionPropertyCapacities, "geo" => $propertiesGeo, "growth" => $propertiesGrowth, "propsPerRegion" => [json_encode($propsPerRegionName), json_encode($propsPerRegionCounts)]]); }); Route::get('/prop/{id}', function (int $id) { @@ -85,11 +87,16 @@ Route::get('/prop/{id}', function (int $id) { Route::get('/region/{id}', function (int $id) { + $regionBaseAll = Api::regionBase(-1); + $regionBaseAll[] = ['region_name' => 'Alle Regionen', 'region_id' => -1]; + $regionBaseRegion = $id >= 0 ? Api::regionBase($id) : [['region_name' => 'Alle Regionen']]; + + $regionPropertiesCapacities = Api::regionPropertiesCapacities($id); $regionCapacitiesRegion = Api::regionCapacities($id); $regionCapacitiesAll = Api::regionCapacities(-1); $regionCapacities = [$regionCapacitiesAll, $regionCapacitiesRegion]; - return view('region', ['regionCapacities' => $regionCapacities]); + return view('region', ['regions' => $regionBaseAll, 'region' => $regionBaseRegion, 'region_id' => $id, 'regionCapacities' => $regionCapacities, 'regionPropertiesCapacities' => $regionPropertiesCapacities]); }); diff --git a/etl/src/api/main.py b/etl/src/api/main.py index 60eec87..21b4307 100644 --- a/etl/src/api/main.py +++ b/etl/src/api/main.py @@ -87,6 +87,10 @@ def region_capacities_data(id: int, startDate: str): result = etl_rmA.region_movingAverage(id, startDate) return result +@app.get("/region/{id}/base") +def region_base_data(id: int): + return d.region_base_data(id).pl().to_dicts() + @app.get("/region/{id}/properties/capacities") def region_property_capacities_data(id: int): capacities = etl_rpc.region_properties_capacities(id)