(web): dashboard enhancements

This commit is contained in:
Marcel Arndt
2025-06-05 15:24:05 +02:00
parent d8a2930247
commit 44f627499a
123 changed files with 8890 additions and 2052 deletions
@@ -8,7 +8,7 @@
</button>
<div class="flex items-center">
<span class="pr-2">
{{ vm.selectedDate | date : 'MM.yyyy' }}
{{ vm.selectedDate | date : "MM.yyyy" }}
</span>
<input
[formControl]="selectedDate"
@@ -33,18 +33,18 @@
</div>
<mat-chip-listbox (change)="changeSelectedType($event)">
<mat-chip-option
[value]="DiagrammType.Revenue"
[selected]="vm.selectedMetric === DiagrammType.Revenue"
>
Umsatz
</mat-chip-option>
<mat-chip-option
[value]="DiagrammType.TimePerTour"
[selected]="vm.selectedMetric === DiagrammType.TimePerTour"
>
Kapazität pro Tour
</mat-chip-option>
<mat-chip-option
[value]="DiagrammType.BreakEven"
[selected]="vm.selectedMetric === DiagrammType.BreakEven"
>
Deckungsbeitrag
</mat-chip-option>
<mat-chip-option
[value]="DiagrammType.AverageRevenue"
[selected]="vm.selectedMetric === DiagrammType.AverageRevenue"
@@ -85,55 +85,55 @@
(viewTypeSelected)="setSelectedViewType(DashboardViewType.Gesamt)"
></dks-view-type-selector>
</div>
<div
<!-- Visualisation -->
<mat-card
appearance="outlined"
class="grid grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-4"
[ngSwitch]="vm.selectedViewType"
>
<div
*ngSwitchCase="DashboardViewType.BTW"
class="col-span-2 lg:col-span-4 w-full rounded p-2 bg-white shadow"
>
<dks-metric-summary
[metrics]="vm.btwMetrics"
[metricTimeScale]="metricTimeScale"
[selectedMetric]="vm.selectedMetric"
[labelFormat]="'d.M.yy'"
></dks-metric-summary>
</div>
<div
*ngSwitchCase="DashboardViewType.TSW"
class="col-span-2 lg:col-span-4 w-full rounded p-2 bg-white shadow"
>
<dks-metric-summary
[metrics]="vm.tswMetrics"
[metricTimeScale]="metricTimeScale"
[selectedMetric]="vm.selectedMetric"
[labelFormat]="'d.M.yy'"
></dks-metric-summary>
</div>
<div
*ngSwitchCase="DashboardViewType.KTW"
class="col-span-2 lg:col-span-4 w-full rounded p-2 bg-white shadow"
>
<dks-metric-summary
[metrics]="vm.ktwMetrics"
[metricTimeScale]="metricTimeScale"
[selectedMetric]="vm.selectedMetric"
[labelFormat]="'d.M.yy'"
></dks-metric-summary>
</div>
<div
*ngSwitchCase="DashboardViewType.Gesamt"
class="col-span-2 lg:col-span-4 w-full rounded p-2 bg-white shadow"
>
<dks-metric-summary
[metrics]="vm.combinedMetrics"
[metricTimeScale]="metricTimeScale"
[selectedMetric]="vm.selectedMetric"
[labelFormat]="'d.M.yy'"
></dks-metric-summary>
</div>
</div>
<mat-card-content>
@switch (vm.selectedViewType) { @case (DashboardViewType.BTW) {
<div class="col-span-2 lg:col-span-4 w-full">
<dks-metric-summary
[metrics]="vm.btwMetrics"
[metricTimeScale]="metricTimeScale"
[selectedMetric]="vm.selectedMetric"
[labelFormat]="'d.M.yy'"
></dks-metric-summary>
</div>
} @case (DashboardViewType.TSW) {
<div class="col-span-2 lg:col-span-4 w-full">
<dks-metric-summary
[metrics]="vm.tswMetrics"
[metricTimeScale]="metricTimeScale"
[selectedMetric]="vm.selectedMetric"
[labelFormat]="'d.M.yy'"
></dks-metric-summary>
</div>
} @case (DashboardViewType.KTW) {
<div
class="col-span-2 lg:col-span-4 w-full rounded"
>
<dks-metric-summary
[metrics]="vm.ktwMetrics"
[metricTimeScale]="metricTimeScale"
[selectedMetric]="vm.selectedMetric"
[labelFormat]="'d.M.yy'"
></dks-metric-summary>
</div>
} @case (DashboardViewType.Gesamt) {
<div
class="col-span-2 lg:col-span-4 w-full"
>
<dks-metric-summary
[metrics]="vm.combinedMetrics"
[metricTimeScale]="metricTimeScale"
[selectedMetric]="vm.selectedMetric"
[labelFormat]="'d.M.yy'"
></dks-metric-summary>
</div>
} }
</mat-card-content>
</mat-card>
</div>
</ng-container>
<ng-template #loadingTmpl>
@@ -21,10 +21,10 @@ import {
import { mergeMetrics } from '../util/merge-metric';
@Component({
selector: 'dks-monthview',
templateUrl: './monthview.component.html',
styleUrls: ['./monthview.component.css'],
standalone: false
selector: 'dks-monthview',
templateUrl: './monthview.component.html',
styleUrls: ['./monthview.component.css'],
standalone: false,
})
export class MonthviewComponent {
OrdinanceTypes = OrdinanceTypes;
@@ -36,7 +36,7 @@ export class MonthviewComponent {
selectedDate$ = this.selectedDate.valueChanges.pipe(
startWith(this.selectedDate.value)
);
selectedMetric$ = new BehaviorSubject<DiagrammType>(DiagrammType.TimePerTour);
selectedMetric$ = new BehaviorSubject<DiagrammType>(DiagrammType.Revenue);
selectedViewType$ = new BehaviorSubject<DashboardViewType>(
DashboardViewType.Gesamt
);