Update Umsetzung
parent
15150d4ed8
commit
36cb47bdac
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user