Merge branch 'main' of https://gitea.fhgr.ch/stoffelmauro/ConsultancyProject_2_ETL
mmaurostoffel
commit
281d9d3f5a
|
|
@ -38,7 +38,7 @@ BROADCAST_CONNECTION=log
|
|||
FILESYSTEM_DISK=local
|
||||
QUEUE_CONNECTION=database
|
||||
|
||||
CACHE_STORE=database
|
||||
CACHE_STORE=file
|
||||
CACHE_PREFIX=
|
||||
|
||||
MEMCACHED_HOST=127.0.0.1
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
use Illuminate\Support\Facades\Cache;
|
||||
use Illuminate\Support\Facades\Http;
|
||||
|
||||
class Api
|
||||
|
|
@ -16,10 +17,17 @@ class Api
|
|||
|
||||
$endpoint = env('FASTAPI_URI');
|
||||
$request = $endpoint.$path;
|
||||
|
||||
if (Cache::has($request)) {
|
||||
return Cache::get($request);
|
||||
}
|
||||
|
||||
$get = Http::get($request);
|
||||
|
||||
if($get->successful()){
|
||||
return $get->json();
|
||||
$result = $get->json();
|
||||
Cache::put($request, $result);
|
||||
return $result;
|
||||
}
|
||||
|
||||
return null;
|
||||
|
|
@ -55,6 +63,11 @@ class Api
|
|||
return self::get("/property/{$id}/base");
|
||||
}
|
||||
|
||||
public static function regionCapacities(int $id): mixed
|
||||
{
|
||||
return self::get("/region/{$id}/capacities");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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,30 +119,53 @@ body>header{
|
|||
|
||||
main{
|
||||
width: 100%;
|
||||
height: calc(100vh - 4em);
|
||||
padding-top: 4em;
|
||||
height: 100vh;
|
||||
padding: 4em 0 1em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(25%, 50%));
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 1em;
|
||||
|
||||
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{
|
||||
background: #f9f9f9;
|
||||
border: .0625em solid #ccc;
|
||||
box-shadow: 0 0 .3em #ccc;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 15px 40px rgba(166,173,201,.2);
|
||||
border-radius: .2em;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
article.header{
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 2em 1fr;
|
||||
padding: 1em;
|
||||
grid-template-rows: minmax(1%, 10%) 1fr;
|
||||
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;
|
||||
}
|
||||
|
||||
@media(max-width: 960px){
|
||||
|
||||
body{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
main{
|
||||
height: auto;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: repeat(4, minmax(20em, 25em));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -28,24 +28,29 @@
|
|||
<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 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 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']) !!};
|
||||
|
||||
const chartHeatmap = document.getElementById('chart-heatmap');
|
||||
const cHeatmap = echarts.init(chartHeatmap);
|
||||
|
|
@ -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: hours,
|
||||
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: 10,
|
||||
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: data,
|
||||
data: {!! json_encode($heat['values']) !!},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: '{b0}: {c0}<br />{b1}: {c1}',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
borderColor: '#000',
|
||||
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: {
|
||||
top: 20,
|
||||
left: 30,
|
||||
right: 0,
|
||||
bottom: 20
|
||||
|
||||
},
|
||||
grid: sharedOptions.basic.grid,
|
||||
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: {
|
||||
left: '0',
|
||||
right: 10,
|
||||
bottom: '0',
|
||||
containLabel: true
|
||||
},
|
||||
color: sharedOptions.basic.color,
|
||||
grid: sharedOptions.basic.grid,
|
||||
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: [
|
||||
|
|
|
|||
|
|
@ -1,27 +1,9 @@
|
|||
@extends('base')
|
||||
@section('main')
|
||||
<article class="header">
|
||||
<header>
|
||||
<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 style="grid-area: timeline;">
|
||||
<div id="timeline"></div>
|
||||
</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
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ use App\Api;
|
|||
|
||||
Route::get('/', function () {
|
||||
|
||||
|
||||
$regionHeat = Api::regionCapacities(1);
|
||||
$propertiesGrowth = Api::propertiesGrowth();
|
||||
$propsPerRegion = Api::propertiesPerRegion();
|
||||
$propsPerRegionName = [];
|
||||
$propsPerRegionCounts = [];
|
||||
|
||||
// dump($regionHeat);
|
||||
|
||||
foreach ($propsPerRegion as $el) {
|
||||
$propsPerRegionName[] = $el['name'];
|
||||
$propsPerRegionCounts[] = $el['count_properties'];
|
||||
|
|
@ -18,7 +20,7 @@ Route::get('/', function () {
|
|||
|
||||
$propertiesGeo = Api::propertiesGeo();
|
||||
|
||||
return view('overview', ["geo" => $propertiesGeo, "growth" => $propertiesGrowth, "propsPerRegion" => [json_encode($propsPerRegionName), json_encode($propsPerRegionCounts)]]);
|
||||
return view('overview', ["heat" => $regionHeat, "geo" => $propertiesGeo, "growth" => $propertiesGrowth, "propsPerRegion" => [json_encode($propsPerRegionName), json_encode($propsPerRegionCounts)]]);
|
||||
});
|
||||
|
||||
Route::get('/prop/{id}', function (int $id) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# How to run
|
||||
```bash
|
||||
fastapi dev api/main.py
|
||||
fastapi dev api/main.py --port 8080
|
||||
```
|
||||
Loading…
Reference in New Issue