From acf19895769cac4c9137e3694ecc88d37f9def3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gi=C3=B2=20Diani?= Date: Sun, 19 Jan 2025 12:42:04 +0100 Subject: [PATCH] =?UTF-8?q?Predition=20charts=20symbols=20ausblenden,=20Po?= =?UTF-8?q?povers=20=C3=BCberarbeitet.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dashboard/resources/css/app.css | 14 +++++ dashboard/resources/views/overview.blade.php | 38 +++++++----- dashboard/resources/views/region.blade.php | 61 ++++++++++++++++---- 3 files changed, 89 insertions(+), 24 deletions(-) diff --git a/dashboard/resources/css/app.css b/dashboard/resources/css/app.css index a1a11d2..624fead 100644 --- a/dashboard/resources/css/app.css +++ b/dashboard/resources/css/app.css @@ -108,6 +108,20 @@ button[popovertarget]>span{ font-size: 1em; } +[popover] h3{ + font-size: .95em; + margin-top: 1em; +} + +p.formula{ + font-family: monospace; + border: 1px solid #aaa; + padding: .5em 1em; +} + +p + p{ + margin-top: 1em; +} /* 9. Create a root stacking context diff --git a/dashboard/resources/views/overview.blade.php b/dashboard/resources/views/overview.blade.php index 5f3aff9..8474e10 100644 --- a/dashboard/resources/views/overview.blade.php +++ b/dashboard/resources/views/overview.blade.php @@ -20,12 +20,22 @@

Verfügbarkeit aller Mietobjekte über gesamten beobachteten Zeitraum

- Das Diagramm gibt eine Übersicht, wie die Verfügbarkeit von Mietobjekten am Datum des Scrapings waren. Dazu wird für jedes Mietobjekt die durchschnittliche Verfügbarkeit ermittelt. + Das Diagramm zeigt die Verfügbarkeit aller Mietobjekte zu allen beobachteten Zeitpunkten.

+ +

Berrechnung Verfügbarkeit

+

Die Verfügbarkeit eines Mietobjekt errechnet sich folgendermassen:

+

+ Verfügbarkeit = (100 / (Anzahl Buchungsdaten * 2)) * Summe Status +

+
@@ -41,13 +51,13 @@ Erklärungen zum Diagramm
-

Anzahl jemals gefundene Kurzzeitmietobjekte pro Region

+

Anzahl jemals gefundener Mietobjekte pro Region

- Das Balkendiagramm zeigt wieviele Kurzzeitmietobjekte insgesamt pro Region über den gesamten Datenerhebungszeitraum, gefunden wurden. + Das Balkendiagramm zeigt die Anzahl jemals gefundener Mietobjekte pro Region.

    -
  • X-Achse: Bezeichnung der Region.
  • -
  • Y-Achse: Anzahl Mietobjekte.
  • +
  • X-Achse: Region
  • +
  • Y-Achse: Anzahl Mietobjekte
@@ -63,13 +73,13 @@ Erklärungen zum Diagramm
-

Entwicklung Anzahl jemals gefundener Kurzzeitmietobjekte pro Region

+

Entwicklung Anzahl jemals gefundener Mietobjekte pro Region

- Das Liniendiagramm zeigt die Entwicklung der gefundenen Mietobjekte pro Region. + Das Liniendiagramm zeigt die Entwicklung aller jemals gefundener Mietobjekte pro Region.

    -
  • X-Achse: Zeitpunkt Scraping.
  • -
  • Y-Achse: Anzahl Mietobjekte.
  • +
  • X-Achse: Zeitpunkt Beobachtung
  • +
  • Y-Achse: Anzahl Mietobjekte
@@ -129,7 +139,7 @@ const cHeatmapOptions = { }], xAxis: { show: true, - name: 'Zeitpunkt Scraping', + name: 'Zeitpunkt Beobachtung', type: 'category', data: extractionDates, splitArea: { @@ -202,7 +212,7 @@ const cHeatmapOptions = { }, tooltip: { formatter: (data) => { - return `Kurzzeitmietobjekte-ID: ${data.data[1]}
Datum Scraping: ${data.data[0]}
Verfügbarkeit: ${data.data[2].toFixed(2)} %` + return `Kurzzeitmietobjekte-ID: ${data.data[1]}
Beobachtungszeitpunkt: ${data.data[0]}
Verfügbarkeit: ${data.data[2].toFixed(2)} %` }, }, emphasis: { @@ -269,7 +279,7 @@ const cExtractionsOptions = { }, grid: sharedOptions.basic.grid, xAxis: { - name: 'Zeitpunkt Scraping', + name: 'Zeitpunkt Beobachtung', nameLocation: 'center', nameGap: 24, nameTextStyle: { diff --git a/dashboard/resources/views/region.blade.php b/dashboard/resources/views/region.blade.php index d02f95c..b5fafff 100644 --- a/dashboard/resources/views/region.blade.php +++ b/dashboard/resources/views/region.blade.php @@ -20,19 +20,50 @@

Gleitender Mittelwert für die Verfügbarkeit der Region

+ +
+

Gleitender Mittelwert für die Verfügbarkeit der Region

+

Das Diagramm...

+
    +
  • X-Achse: Zeitpunkt der Beobachtung
  • +
  • Y-Achse: Verfügbarkeit einer Region. 0% = Alle Mietobjekte der Region sind komplett ausgebucht; 100% = Alle Mietobjekte der Region können zu allen verfügbaren Daten gebucht werden.
  • +
+
-

Verfügbarkeit aller Mietobjekte über Gesamte Zeit der Region

+

Verfügbarkeit aller Mietobjekte der Region über gesamten beobachteten Zeitraum

+ +

- Verfügbarkeit Region nach Monat am {{ $startDate }} + Verfügbarkeit nach Monat am {{ $startDate }}

@@ -45,8 +76,12 @@
-

Erkläung zum Diagramm «Entwicklung der Verfügbarkeit»

-

Das Liniendiagramm zeigt die Verfügbarkeit 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.

+

Entwicklung der Verfügbarkeit

+

Das Liniendiagramm zeigt die Entwicklung Verfügbarkeit der Region im Vergleich zu allen Regionen an.

+
    +
  • X-Achse: Zeitpunkt der Beobachtung
  • +
  • Y-Achse: Verfügbarkeit einer Region. 0% = Alle Mietobjekte der Region sind komplett ausgebucht; 100% = Alle Mietobjekte der Region können zu allen verfügbaren Daten gebucht werden.
  • +
@@ -54,7 +89,7 @@

- Verfügbarkeit Wochentage am {{ $startDate }} + Verfügbarkeit nach Wochentage am {{ $startDate }}

@@ -109,7 +144,7 @@ const cCapacityOptions = { type: 'category', boundaryGap: false, data: {!! $diagramsOptions['capacity']['xAxis']['data'] !!}, - name: 'Zeitpunkt Scraping', + name: 'Zeitpunkt Beobachtung', nameLocation: 'center', nameGap: 24, nameTextStyle: { @@ -245,7 +280,7 @@ const chartPrediction = document.getElementById('chart-prediction'); const cPrediction = echarts.init(chartPrediction); const cPredictionOptions = { - color: sharedOptions.basic.color, + color: [sharedOptions.basic.color[0], sharedOptions.basic.color[4], sharedOptions.basic.color[5]], timeline: { show: false, data: {!! $diagramsOptions['capacity']['xAxis']['data'] !!}, @@ -266,7 +301,7 @@ const cPredictionOptions = { xAxis: { type: 'category', boundaryGap: false, - name: 'Zeitpunkt Scraping', + name: 'Zeitpunkt Beobachtung', nameLocation: 'center', nameGap: 24, nameTextStyle: { @@ -315,18 +350,24 @@ const cPredictionOptions = { series: [ { name: 'Gleitender Mittelwert', + showSymbol: false, + connectNulls: true, type: 'line', symbolSize: 7, data: {!! json_encode($p['capacities_moving_average']) !!} }, { name: 'Ausgangsdaten', + showSymbol: false, + connectNulls: true, type: 'line', symbolSize: 7, data: {!! json_encode($p['capacities_timeframe_before']) !!} }, { name: 'Vergleichsdaten', + showSymbol: false, + connectNulls: true, type: 'line', symbolSize: 7, data: {!! json_encode($p['capacities_timeframe_after']) !!} @@ -366,7 +407,7 @@ const cHeatmapOptions = { }], xAxis: { show: true, - name: 'Zeitpunkt Scraping', + name: 'Zeitpunkt Beobachtung', type: 'category', data: {!! $diagramsOptions['heatmap']['xAxis']['data'] !!}, splitArea: { @@ -439,7 +480,7 @@ const cHeatmapOptions = { }, tooltip: { formatter: (data) => { - return `Kurzzeitmietobjekte-ID: ${data.data[1]}
Datum Scraping: ${data.data[0]}
Verfügbarkeit: ${data.data[2].toFixed(2)} %` + return `Kurzzeitmietobjekte-ID: ${data.data[1]}
Beobachtungszeitpunkt: ${data.data[0]}
Verfügbarkeit: ${data.data[2].toFixed(2)} %` }, }, emphasis: {