(web): dashboard enhancements
This commit is contained in:
+54
-54
@@ -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
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user