stoffelmauro
/
ConsultancyProject_2_ETL
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

info button, dashboard startseite

main
Giò Diani 2025-01-05 13:26:51 +01:00
parent 281d9d3f5a
commit 8655255782
4 changed files with 90 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
dashboard/resources/css/app.css
View File

@ -54,18 +54,21 @@ dd + dt{
margin-top: .2em; margin-top: .2em;
} }
span + button{
margin-left: .5em;
}
button[popovertarget]{ 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; cursor: pointer;
display: inline-block; display: inline-block;
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
border-radius: 50%; border-radius: 50%;
border: 1px solid #fff; border: 1px solid #fff;
background: #5470c6;
} }
button[popovertarget]::before{ button[popovertarget]::before{
content: '?';
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
} }
@ -117,19 +120,33 @@ body>header{
padding: 0 1em; padding: 0 1em;
} }
main{ main{
width: 100%; width: 100%;
height: 100vh; height: 100vh;
padding: 4em 0 1em; padding: 4em 0 1em;
display: grid; 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-rows: repeat(3, 1fr) 4em;
grid-template-areas: grid-template-areas:
"chart2 chart2 chart5 chart5" "chart2 chart2 chart5 chart5"
"chart1 chart1 chart3 chart4" "chart1 chart1 chart3 chart4"
"chart1 chart1 chart3 chart4" "chart1 chart1 chart3 chart4"
"timeline timeline timeline timeline"; "timeline timeline timeline timeline";
gap: .5em;
} }
article{ article{

12
dashboard/resources/views/base.blade.php
View File

@ -1,22 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title> <title>Dashboard</title>
@vite(['resources/css/app.css', 'resources/js/app.js', 'node_modules/leaflet/dist/leaflet.css']) @vite(['resources/css/app.css', 'resources/js/app.js', 'node_modules/leaflet/dist/leaflet.css'])
</head> </head>
<body> <body class="@yield('body-class')">
<header> <header>
<span>Dashboard</span> @yield('header')
<nav>
<ul>
<li>
<a href="/">Start</a>
</li>
</ul>
</nav>
</header> </header>
<main> <main>
@yield('main') @yield('main')

35
dashboard/resources/views/overview.blade.php
View File

@ -1,14 +1,22 @@
@extends('base') @extends('base')
@section('body-class', 'overview')
@section('main') @section('main')
<article class="header"> <article class="header" style="grid-area: chart1;">
<header> <header>
<h2> <h2>
Anzahl jemals gefundene Kurzzeitmietobjekte pro Region Anzahl jemals gefundene Kurzzeitmietobjekte pro Region
</h2> </h2>
<button popovertarget="pop1">
<span>Erklärungen zum Diagramm</span>
</button>
<div popover id="pop1">
<p>Das Diagram zeigt...</p>
</div>
<div>
</header> </header>
<div id="chart-props-per-region"></div> <div id="chart-props-per-region"></div>
</article> </article>
<article class="header"> <article class="header" style="grid-area: chart2;">
<header> <header>
<h2> <h2>
Entwicklung der Anzahl jemals gefunden Kurzzeitmietobjekte Entwicklung der Anzahl jemals gefunden Kurzzeitmietobjekte
@ -16,10 +24,10 @@
</header> </header>
<div id="extractions"></div> <div id="extractions"></div>
</article> </article>
<article> <article style="grid-area: chart4;">
<div id="leaflet"></div> <div id="leaflet"></div>
</article> </article>
<article class="header"> <article class="header" style="grid-area: chart3;">
<header> <header>
<h2> <h2>
Gesamtauslastung Gesamtauslastung
@ -59,12 +67,17 @@ const cHeatmapOptions = {
position: 'top' position: 'top'
}, },
grid: { grid: {
top: 25, top: 30,
right: 0, right: 0,
bottom: 0, bottom: 0,
left: 0 left: 0
}, },
dataZoom: [{
type: 'inside'
}
],
xAxis: { xAxis: {
show: false,
name: 'Kurzzeitmietobjekt', name: 'Kurzzeitmietobjekt',
type: 'category', type: 'category',
data: {!! json_encode($heat['property_ids']) !!}, data: {!! json_encode($heat['property_ids']) !!},
@ -76,6 +89,7 @@ const cHeatmapOptions = {
} }
}, },
yAxis: { yAxis: {
show: false,
type: 'category', type: 'category',
data: extractionDates, data: extractionDates,
splitArea: { splitArea: {
@ -90,20 +104,27 @@ const cHeatmapOptions = {
orient: 'horizontal', orient: 'horizontal',
left: 'center', left: 'center',
top: 0, top: 0,
formatter: (v1, v2) => {
return `${v1} – ${v2} %`;
},
inRange: { inRange: {
color: ['#f1eef6','#bdc9e1','#74a9cf','#2b8cbe','#045a8d'] color: sharedOptions.basic.color,
}, },
}, },
series: [ series: [
{ {
name: 'Auslastung', name: 'Auslastung',
type: 'heatmap', type: 'heatmap',
blurSize: 0,
data: {!! json_encode($heat['values']) !!}, data: {!! json_encode($heat['values']) !!},
label: { label: {
show: false show: false
}, },
tooltip: { tooltip: {
formatter: '{b0}: {c0}<br />{b1}: {c1}', formatter: (data) => {
let v = data.value
return `Kurzzeitmietobjekte-ID: ${data.name}<br />Datum Scraping: ${extractionDates[v[1]]}<br/>Auslastung: ${v[2]} %`
},
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {

44
dashboard/resources/views/property.blade.php
View File

@ -1,4 +1,20 @@
@extends('base') @extends('base')
@section('body-class', 'property')
@section('header')
<span>Property {{ $base['property_platform_id'] }}</span><button popovertarget="prop-details"></button>
<div popover id="prop-details">
<dl>
<dt>Region</dt>
<dd>{{ $base['region_name'] }}</dd>
<dt>Zum ersten mal gefunden</dt>
<dd>{{ $base['first_found'] }}</dd>
<dt>Zum letzten mal gefunden</dt>
<dd>{{ $base['last_found'] }}</dd>
</dl>
</div>
@endsection
@section('main') @section('main')
<article style="grid-area: timeline;"> <article style="grid-area: timeline;">
<div id="timeline"></div> <div id="timeline"></div>
@ -25,6 +41,11 @@
<h2> <h2>
Entwicklung der Verfügbarkeit Entwicklung der Verfügbarkeit
</h2> </h2>
<button popovertarget="chart-capacity-popover"></button>
<div id="chart-capacity-popover" popover>
<h2>Erkläung zum Diagramm</h2>
<p>Das Liniendiagramm zeigt, wie sich die insgesamte Verfügbarkeit des Kurzzeitmietobjekts entwickelt hat.</p>
</div>
</header> </header>
<div id="chart-capacity"></div> <div id="chart-capacity"></div>
</article> </article>
@ -99,24 +120,37 @@ const cCapacity = echarts.init(chartCapacity);
const cCapacityOptions = { const cCapacityOptions = {
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
formatter: 'Datum Scraping: {b}<br />Verfügbarkeit: {c} %'
}, },
grid: { grid: {
top: 20, top: 20,
left: 0, left: 25,
right: 10, right: 10,
bottom: 0, bottom: 20,
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: {!! json_encode($capacities['dates']) !!} data: {!! json_encode($capacities['dates']) !!},
name: 'Zeitpunkt Scraping',
nameLocation: 'center',
nameGap: 24,
nameTextStyle: {
fontWeight: 'bold',
}
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
min: 0, min: 0,
max: 100 max: 100,
name: 'Auslastung in Prozent',
nameLocation: 'center',
nameGap: 38,
nameTextStyle: {
fontWeight: 'bold',
}
}, },
series: { series: {
name: 'Alle', name: 'Alle',