Predition charts symbols ausblenden, Popovers überarbeitet.
Giò Diani
parent
cdb92ac50f
commit
acf1989576
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -20,12 +20,22 @@
|
|||
<div popover id="pop1">
|
||||
<h2>Verfügbarkeit aller Mietobjekte über gesamten beobachteten Zeitraum</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<ul>
|
||||
<li>X-Achse: Zeitpunkt Scraping.</li>
|
||||
<li>X-Achse: Zeitpunkt Beobachtung.</li>
|
||||
<li>Y-Achse: Mietobjekte.</li>
|
||||
<li>Kategorien: 0% = Das Mietobjekt ist komplett verfügbar; 100% = Das Mietobjekt ist komplett ausgebucht.</li>
|
||||
<li>Kategorien: 0% = Das Mietobjekt ist komplett Ausgebucht; 100% = Das Mietobjekt kann zu allen Verfügbaren Daten gebucht werden.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Berrechnung Verfügbarkeit</h3>
|
||||
<p>Die Verfügbarkeit eines Mietobjekt errechnet sich folgendermassen:</p>
|
||||
<p class="formula">
|
||||
Verfügbarkeit = (100 / (Anzahl Buchungsdaten * 2)) * Summe Status
|
||||
</p>
|
||||
<ul>
|
||||
<li>Status: Jeder verfügbare Kalendertag kann den Status «Nicht Verfügbar» (0), «Verfügbar (kein Anreisetag)» (1) oder «Verfügbar» (2) aufweisen.</li>
|
||||
<li>Anzahl Buchungsdaten: Die Summe aller angebotenen Buchungsdaten mit zwei multipliziert (= Alle Buchungdaten haben den Status «Verfügbar»)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -41,13 +51,13 @@
|
|||
<span>Erklärungen zum Diagramm</span>
|
||||
</button>
|
||||
<div popover id="pop2">
|
||||
<h2>Anzahl jemals gefundene Kurzzeitmietobjekte pro Region</h2>
|
||||
<h2>Anzahl jemals gefundener Mietobjekte pro Region</h2>
|
||||
<p>
|
||||
Das Balkendiagramm zeigt wieviele Kurzzeitmietobjekte insgesamt pro Region über den gesamten Datenerhebungszeitraum, gefunden wurden.
|
||||
Das Balkendiagramm zeigt die Anzahl jemals gefundener Mietobjekte pro Region.
|
||||
</p>
|
||||
<ul>
|
||||
<li>X-Achse: Bezeichnung der Region.</li>
|
||||
<li>Y-Achse: Anzahl Mietobjekte.</li>
|
||||
<li>X-Achse: Region</li>
|
||||
<li>Y-Achse: Anzahl Mietobjekte</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -63,13 +73,13 @@
|
|||
<span>Erklärungen zum Diagramm</span>
|
||||
</button>
|
||||
<div popover id="pop3">
|
||||
<h2>Entwicklung Anzahl jemals gefundener Kurzzeitmietobjekte pro Region</h2>
|
||||
<h2>Entwicklung Anzahl jemals gefundener Mietobjekte pro Region</h2>
|
||||
<p>
|
||||
Das Liniendiagramm zeigt die Entwicklung der gefundenen Mietobjekte pro Region.
|
||||
Das Liniendiagramm zeigt die Entwicklung aller jemals gefundener Mietobjekte pro Region.
|
||||
</p>
|
||||
<ul>
|
||||
<li>X-Achse: Zeitpunkt Scraping.</li>
|
||||
<li>Y-Achse: Anzahl Mietobjekte.</li>
|
||||
<li>X-Achse: Zeitpunkt Beobachtung</li>
|
||||
<li>Y-Achse: Anzahl Mietobjekte</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -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]}<br />Datum Scraping: ${data.data[0]}<br/>Verfügbarkeit: ${data.data[2].toFixed(2)} %`
|
||||
return `Kurzzeitmietobjekte-ID: ${data.data[1]}<br />Beobachtungszeitpunkt: ${data.data[0]}<br/>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: {
|
||||
|
|
|
|||
|
|
@ -20,19 +20,50 @@
|
|||
<article class="header" style="grid-area: chart6;">
|
||||
<header>
|
||||
<h2 id="prediction-title">Gleitender Mittelwert für die Verfügbarkeit der Region</h2>
|
||||
<button popovertarget="chart-prediction-popover"></button>
|
||||
<div id="chart-prediction-popover" popover>
|
||||
<h2>Gleitender Mittelwert für die Verfügbarkeit der Region</h2>
|
||||
<p>Das Diagramm...</p>
|
||||
<ul>
|
||||
<li>X-Achse: Zeitpunkt der Beobachtung</li>
|
||||
<li>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. </li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div id="chart-prediction"></div>
|
||||
</article>
|
||||
<article class="header" style="grid-area: chart1;">
|
||||
<header>
|
||||
<h2 id="belegung-title">Verfügbarkeit aller Mietobjekte über Gesamte Zeit der Region</h2>
|
||||
<h2 id="belegung-title">Verfügbarkeit aller Mietobjekte der Region über gesamten beobachteten Zeitraum</h2>
|
||||
<button popovertarget="popup-heat"></button><div popover id="popup-heat">
|
||||
<h2>Verfügbarkeit aller Mietobjekte der Region über gesamten beobachteten Zeitraum</h2>
|
||||
<p>
|
||||
Das Diagramm zeigt die Verfügbarkeit aller Mietobjekte der Region zu allen beobachteten Zeitpunkten.
|
||||
</p>
|
||||
<ul>
|
||||
<li>X-Achse: Zeitpunkt Beobachtung.</li>
|
||||
<li>Y-Achse: Mietobjekte.</li>
|
||||
<li>Kategorien: 0% = Das Mietobjekt ist komplett Ausgebucht; 100% = Das Mietobjekt kann zu allen Verfügbaren Daten gebucht werden.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Berrechnung Verfügbarkeit</h3>
|
||||
<p>Die Verfügbarkeit eines Mietobjekt errechnet sich folgendermassen:</p>
|
||||
<p class="formula">
|
||||
Verfügbarkeit = (100 / (Anzahl Buchungsdaten * 2)) * Summe Status
|
||||
</p>
|
||||
<ul>
|
||||
<li>Status: Jeder verfügbare Kalendertag kann den Status «Nicht Verfügbar» (0), «Verfügbar (kein Anreisetag)» (1) oder «Verfügbar» (2) aufweisen.</li>
|
||||
<li>Anzahl Buchungsdaten: Die Summe aller angebotenen Buchungsdaten mit zwei multipliziert (= Alle Buchungdaten haben den Status «Verfügbar»)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
</header>
|
||||
<div id="chart-heatmap"></div>
|
||||
</article>
|
||||
<article class="header" style="grid-area: chart3;">
|
||||
<header>
|
||||
<h2>
|
||||
Verfügbarkeit Region nach Monat am <span class="date">{{ $startDate }}</span>
|
||||
Verfügbarkeit nach Monat am <span class="date">{{ $startDate }}</span>
|
||||
</h2>
|
||||
</header>
|
||||
<div id="chart-capacity-monthly">
|
||||
|
|
@ -45,8 +76,12 @@
|
|||
</h2>
|
||||
<button popovertarget="chart-capacity-popover"></button>
|
||||
<div id="chart-capacity-popover" popover>
|
||||
<h2>Erkläung zum Diagramm «Entwicklung der Verfügbarkeit»</h2>
|
||||
<p>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.</p>
|
||||
<h2>Entwicklung der Verfügbarkeit</h2>
|
||||
<p>Das Liniendiagramm zeigt die Entwicklung Verfügbarkeit der Region im Vergleich zu allen Regionen an.</p>
|
||||
<ul>
|
||||
<li>X-Achse: Zeitpunkt der Beobachtung</li>
|
||||
<li>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. </li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div id="chart-capacity"></div>
|
||||
|
|
@ -54,7 +89,7 @@
|
|||
<article class="header" style="grid-area: chart4;">
|
||||
<header>
|
||||
<h2>
|
||||
Verfügbarkeit Wochentage am <span class="date">{{ $startDate }}</span>
|
||||
Verfügbarkeit nach Wochentage am <span class="date">{{ $startDate }}</span>
|
||||
</h2>
|
||||
</header>
|
||||
<div id="chart-capacity-daily">
|
||||
|
|
@ -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]}<br />Datum Scraping: ${data.data[0]}<br/>Verfügbarkeit: ${data.data[2].toFixed(2)} %`
|
||||
return `Kurzzeitmietobjekte-ID: ${data.data[1]}<br />Beobachtungszeitpunkt: ${data.data[0]}<br/>Verfügbarkeit: ${data.data[2].toFixed(2)} %`
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue