hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Umsetzung

Tim Herbst 2021-01-28 08:52:52 +00:00
parent 15150d4ed8
commit 36cb47bdac
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Projektarbeit-3/Umsetzung.md

@ -370,7 +370,7 @@ for (const accident of data) {
}
const accidentLayer = L.layerGroup(accidents);
```
Wir iterieren durch das API-Response und setzen als Erstes mit der Hilfsmethode `getAccidentColor` die Farbe des Markers. Diese unterscheidet lediglich nach Schwere des Unfalls zwischen Gelb, Orange und Rot.
Wir iterieren durch den API-Response und setzen als Erstes mit der Hilfsmethode `getAccidentColor` die Farbe des Markers. Diese unterscheidet lediglich nach Schwere des Unfalls zwischen Gelb, Orange und Rot.
Anschließend erstellen wir für jeden Unfall ein Objekt vom Typ `Circle`. Auch die Unfälle fügen wir der Map nicht direkt hinzu, sondern gehen über die `L.layerGroup`. So können wir auch die Unfälle in unserem Menü nach Belieben an- und abwählen.
@ -512,7 +512,7 @@ this.interval = setInterval(() => {
</tr>
</table>
Ist der Auto-Refresh aktiv, wird alle 10 Sekunden eine Methode im Map Service aufgerufen, welche das Backend für neue Informationen anspricht und alle Layer neu generiert.
Ist der Auto-Refresh aktiv, wird alle 10 Sekunden eine Methode im `MapService` aufgerufen, welche das Backend für neue Informationen anspricht und alle Layer neu generiert.
### Dashboard
Das Dashboard selbst ist wieder in einzelne Unterkomponenten gegliedert. Dies sieht folgendermaßen aus:
@ -549,7 +549,7 @@ Besonderheit unserer Herangehensweise ist, dass wir alle Visualisierungen aufbau
### Table
Die zwei Tabellen haben bei der Implementierung die größte Aufmerksamkeit genossen. Da wir die Interaktion mit der Mini-Map als Must-have angesehen haben, ist hier auch sehr viel Fleiß in den Aufbau und die Generierung der Marker auf der Mini-Map geflossen.
Folgender schematischer Ablauf liegt der TableComponent zugrunde:
Folgender schematischer Ablauf liegt der `TableComponent` zugrunde:
<div align="center">
<img src="uploads/69a7b928dde0ae76403687209136e0d5/image.png"/>
@ -588,7 +588,7 @@ Vom Backend erhalten wir folgende Daten:
<img src="uploads/6c157d203af52da3779bc2a507ca2293/image.png"/>
</div>
Wir erhalten also ein Array mit der Anzahl der Fahrten für die jeweilige Zeitspanne. Also setzen wir in den ChartOptions diese entsprechend.
Wir erhalten also ein Array mit der Anzahl der Fahrten für die jeweilige Zeitspanne. Also setzen wir in den `ChartOptions` diese entsprechend.
<table>
<tr>
@ -665,7 +665,7 @@ async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> {
Die Variable `isLoading` ist nötig, sodass der Progress Spinner während des Ladens angezeigt wird.
### Rent Time
Diese Komponente unterscheidet sich programmatisch nicht von der RentDurationChartComponent. In den ChartOptions werden hier lediglich andere Parameter gesetzt, natürlich entsprechend dem Datenmodell.
Diese Komponente unterscheidet sich programmatisch nicht von der `RentDurationChartComponent`. In den `ChartOptions` werden hier lediglich andere Parameter gesetzt, natürlich entsprechend dem Datenmodell.
Folgende Daten erhalten wir aus dem Backend:
@ -673,7 +673,7 @@ Folgende Daten erhalten wir aus dem Backend:
<img src="uploads/21650291359283db5274f1307f29008f/image.png"/>
</div>
Diese werden dann wie folgt in den ChartOptions eingebunden:
Diese werden dann wie folgt in den `ChartOptions` eingebunden:
```typescript
this.chartOptions = {