Predition charts symbols ausblenden, Popovers überarbeitet.
parent
cdb92ac50f
commit
acf1989576
|
@ -108,6 +108,20 @@ button[popovertarget]>span{
|
||||||
font-size: 1em;
|
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
|
9. Create a root stacking context
|
||||||
|
|
|
@ -20,12 +20,22 @@
|
||||||
<div popover id="pop1">
|
<div popover id="pop1">
|
||||||
<h2>Verfügbarkeit aller Mietobjekte über gesamten beobachteten Zeitraum</h2>
|
<h2>Verfügbarkeit aller Mietobjekte über gesamten beobachteten Zeitraum</h2>
|
||||||
<p>
|
<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>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>X-Achse: Zeitpunkt Scraping.</li>
|
<li>X-Achse: Zeitpunkt Beobachtung.</li>
|
||||||
<li>Y-Achse: Mietobjekte.</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -41,13 +51,13 @@
|
||||||
<span>Erklärungen zum Diagramm</span>
|
<span>Erklärungen zum Diagramm</span>
|
||||||
</button>
|
</button>
|
||||||
<div popover id="pop2">
|
<div popover id="pop2">
|
||||||
<h2>Anzahl jemals gefundene Kurzzeitmietobjekte pro Region</h2>
|
<h2>Anzahl jemals gefundener Mietobjekte pro Region</h2>
|
||||||
<p>
|
<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>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>X-Achse: Bezeichnung der Region.</li>
|
<li>X-Achse: Region</li>
|
||||||
<li>Y-Achse: Anzahl Mietobjekte.</li>
|
<li>Y-Achse: Anzahl Mietobjekte</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -63,13 +73,13 @@
|
||||||
<span>Erklärungen zum Diagramm</span>
|
<span>Erklärungen zum Diagramm</span>
|
||||||
</button>
|
</button>
|
||||||
<div popover id="pop3">
|
<div popover id="pop3">
|
||||||
<h2>Entwicklung Anzahl jemals gefundener Kurzzeitmietobjekte pro Region</h2>
|
<h2>Entwicklung Anzahl jemals gefundener Mietobjekte pro Region</h2>
|
||||||
<p>
|
<p>
|
||||||
Das Liniendiagramm zeigt die Entwicklung der gefundenen Mietobjekte pro Region.
|
Das Liniendiagramm zeigt die Entwicklung aller jemals gefundener Mietobjekte pro Region.
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>X-Achse: Zeitpunkt Scraping.</li>
|
<li>X-Achse: Zeitpunkt Beobachtung</li>
|
||||||
<li>Y-Achse: Anzahl Mietobjekte.</li>
|
<li>Y-Achse: Anzahl Mietobjekte</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -129,7 +139,7 @@ const cHeatmapOptions = {
|
||||||
}],
|
}],
|
||||||
xAxis: {
|
xAxis: {
|
||||||
show: true,
|
show: true,
|
||||||
name: 'Zeitpunkt Scraping',
|
name: 'Zeitpunkt Beobachtung',
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: extractionDates,
|
data: extractionDates,
|
||||||
splitArea: {
|
splitArea: {
|
||||||
|
@ -202,7 +212,7 @@ const cHeatmapOptions = {
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
formatter: (data) => {
|
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: {
|
emphasis: {
|
||||||
|
@ -269,7 +279,7 @@ const cExtractionsOptions = {
|
||||||
},
|
},
|
||||||
grid: sharedOptions.basic.grid,
|
grid: sharedOptions.basic.grid,
|
||||||
xAxis: {
|
xAxis: {
|
||||||
name: 'Zeitpunkt Scraping',
|
name: 'Zeitpunkt Beobachtung',
|
||||||
nameLocation: 'center',
|
nameLocation: 'center',
|
||||||
nameGap: 24,
|
nameGap: 24,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
|
|
|
@ -20,19 +20,50 @@
|
||||||
<article class="header" style="grid-area: chart6;">
|
<article class="header" style="grid-area: chart6;">
|
||||||
<header>
|
<header>
|
||||||
<h2 id="prediction-title">Gleitender Mittelwert für die Verfügbarkeit der Region</h2>
|
<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>
|
</header>
|
||||||
<div id="chart-prediction"></div>
|
<div id="chart-prediction"></div>
|
||||||
</article>
|
</article>
|
||||||
<article class="header" style="grid-area: chart1;">
|
<article class="header" style="grid-area: chart1;">
|
||||||
<header>
|
<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>
|
</header>
|
||||||
<div id="chart-heatmap"></div>
|
<div id="chart-heatmap"></div>
|
||||||
</article>
|
</article>
|
||||||
<article class="header" style="grid-area: chart3;">
|
<article class="header" style="grid-area: chart3;">
|
||||||
<header>
|
<header>
|
||||||
<h2>
|
<h2>
|
||||||
Verfügbarkeit Region nach Monat am <span class="date">{{ $startDate }}</span>
|
Verfügbarkeit nach Monat am <span class="date">{{ $startDate }}</span>
|
||||||
</h2>
|
</h2>
|
||||||
</header>
|
</header>
|
||||||
<div id="chart-capacity-monthly">
|
<div id="chart-capacity-monthly">
|
||||||
|
@ -45,8 +76,12 @@
|
||||||
</h2>
|
</h2>
|
||||||
<button popovertarget="chart-capacity-popover"></button>
|
<button popovertarget="chart-capacity-popover"></button>
|
||||||
<div id="chart-capacity-popover" popover>
|
<div id="chart-capacity-popover" popover>
|
||||||
<h2>Erkläung zum Diagramm «Entwicklung der Verfügbarkeit»</h2>
|
<h2>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>
|
<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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div id="chart-capacity"></div>
|
<div id="chart-capacity"></div>
|
||||||
|
@ -54,7 +89,7 @@
|
||||||
<article class="header" style="grid-area: chart4;">
|
<article class="header" style="grid-area: chart4;">
|
||||||
<header>
|
<header>
|
||||||
<h2>
|
<h2>
|
||||||
Verfügbarkeit Wochentage am <span class="date">{{ $startDate }}</span>
|
Verfügbarkeit nach Wochentage am <span class="date">{{ $startDate }}</span>
|
||||||
</h2>
|
</h2>
|
||||||
</header>
|
</header>
|
||||||
<div id="chart-capacity-daily">
|
<div id="chart-capacity-daily">
|
||||||
|
@ -109,7 +144,7 @@ const cCapacityOptions = {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: {!! $diagramsOptions['capacity']['xAxis']['data'] !!},
|
data: {!! $diagramsOptions['capacity']['xAxis']['data'] !!},
|
||||||
name: 'Zeitpunkt Scraping',
|
name: 'Zeitpunkt Beobachtung',
|
||||||
nameLocation: 'center',
|
nameLocation: 'center',
|
||||||
nameGap: 24,
|
nameGap: 24,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
|
@ -245,7 +280,7 @@ const chartPrediction = document.getElementById('chart-prediction');
|
||||||
const cPrediction = echarts.init(chartPrediction);
|
const cPrediction = echarts.init(chartPrediction);
|
||||||
|
|
||||||
const cPredictionOptions = {
|
const cPredictionOptions = {
|
||||||
color: sharedOptions.basic.color,
|
color: [sharedOptions.basic.color[0], sharedOptions.basic.color[4], sharedOptions.basic.color[5]],
|
||||||
timeline: {
|
timeline: {
|
||||||
show: false,
|
show: false,
|
||||||
data: {!! $diagramsOptions['capacity']['xAxis']['data'] !!},
|
data: {!! $diagramsOptions['capacity']['xAxis']['data'] !!},
|
||||||
|
@ -266,7 +301,7 @@ const cPredictionOptions = {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
name: 'Zeitpunkt Scraping',
|
name: 'Zeitpunkt Beobachtung',
|
||||||
nameLocation: 'center',
|
nameLocation: 'center',
|
||||||
nameGap: 24,
|
nameGap: 24,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
|
@ -315,18 +350,24 @@ const cPredictionOptions = {
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'Gleitender Mittelwert',
|
name: 'Gleitender Mittelwert',
|
||||||
|
showSymbol: false,
|
||||||
|
connectNulls: true,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbolSize: 7,
|
symbolSize: 7,
|
||||||
data: {!! json_encode($p['capacities_moving_average']) !!}
|
data: {!! json_encode($p['capacities_moving_average']) !!}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Ausgangsdaten',
|
name: 'Ausgangsdaten',
|
||||||
|
showSymbol: false,
|
||||||
|
connectNulls: true,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbolSize: 7,
|
symbolSize: 7,
|
||||||
data: {!! json_encode($p['capacities_timeframe_before']) !!}
|
data: {!! json_encode($p['capacities_timeframe_before']) !!}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Vergleichsdaten',
|
name: 'Vergleichsdaten',
|
||||||
|
showSymbol: false,
|
||||||
|
connectNulls: true,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbolSize: 7,
|
symbolSize: 7,
|
||||||
data: {!! json_encode($p['capacities_timeframe_after']) !!}
|
data: {!! json_encode($p['capacities_timeframe_after']) !!}
|
||||||
|
@ -366,7 +407,7 @@ const cHeatmapOptions = {
|
||||||
}],
|
}],
|
||||||
xAxis: {
|
xAxis: {
|
||||||
show: true,
|
show: true,
|
||||||
name: 'Zeitpunkt Scraping',
|
name: 'Zeitpunkt Beobachtung',
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: {!! $diagramsOptions['heatmap']['xAxis']['data'] !!},
|
data: {!! $diagramsOptions['heatmap']['xAxis']['data'] !!},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
|
@ -439,7 +480,7 @@ const cHeatmapOptions = {
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
formatter: (data) => {
|
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: {
|
emphasis: {
|
||||||
|
|
Loading…
Reference in New Issue