-
{{ formattedVehicleTimeAverages?.travelTime || 0 | number: '1.0-0' }}%
+
+
+
+ {{ formattedVehicleTimeAverages?.travelTime || 0 | number: '1.0-0' }}%
+
Driving
-
-
{{ formattedVehicleTimeAverages?.idleTime || 0 | number: '1.0-0' }}%
+
+
+
+ {{ formattedVehicleTimeAverages?.idleTime || 0 | number: '1.0-0' }}%
+
Idle
-
{{ formattedVehicleTimeAverages?.breakTime || 0 | number: '1.0-0' }}%
+
+
+ {{ formattedVehicleTimeAverages?.breakTime || 0 | number: '1.0-0' }}%
+
Break
diff --git a/application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.scss b/application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.scss
index 3acd44a9..7537dcce 100644
--- a/application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.scss
+++ b/application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.scss
@@ -1,19 +1,12 @@
.legend-container {
+ display: flex;
+ flex-direction: row;
white-space: nowrap;
-
- p {
- margin: 0;
-
- &.legend-timeline-container {
- display: flex;
- }
- }
-
- .margin-right {
- margin-right: 1rem;
- }
+ gap: 0.5rem;
.percent-label {
- display: inline;
+ display: flex;
+ flex-direction: column;
+ min-width: 70px;
}
}
diff --git a/application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.ts b/application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.ts
index c427d5f7..a71b38a3 100644
--- a/application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.ts
+++ b/application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.ts
@@ -21,9 +21,7 @@ import {
OnChanges,
ElementRef,
ViewChild,
- AfterViewInit,
ChangeDetectorRef,
- OnDestroy,
} from '@angular/core';
import { TimeSet } from '../../models';
@@ -33,14 +31,12 @@ import { TimeSet } from '../../models';
styleUrls: ['./post-solve-timeline-legend.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class PostSolveTimelineLegendComponent implements AfterViewInit, OnDestroy, OnChanges {
+export class PostSolveTimelineLegendComponent implements OnChanges {
@ViewChild('legendContainer') legendContainer: ElementRef;
- @ViewChild('legendTimeline') legendTimeline: ElementRef;
@Input() vehicleTimeAverages: TimeSet;
formattedVehicleTimeAverages: TimeSet;
- timelineOffset = 4;
timelineLengths = {
break: [0, 0],
@@ -49,25 +45,8 @@ export class PostSolveTimelineLegendComponent implements AfterViewInit, OnDestro
travel: [0, 0],
};
- observer: ResizeObserver;
-
constructor(private changeRef: ChangeDetectorRef) {}
- ngOnDestroy(): void {
- this.observer.disconnect();
- }
-
- ngAfterViewInit(): void {
- this.observer = new ResizeObserver((entries) => {
- if (entries.length) {
- this.calculateTimelineSections();
- }
- });
- this.observer.observe(this.legendContainer.nativeElement);
-
- this.calculateTimelineSections();
- }
-
ngOnChanges(): void {
if (this.vehicleTimeAverages) {
this.formattedVehicleTimeAverages = {
@@ -86,35 +65,6 @@ export class PostSolveTimelineLegendComponent implements AfterViewInit, OnDestro
};
}
}
-
- this.calculateTimelineSections();
- }
-
- private calculateTimelineSections(): void {
- if (!this.legendTimeline || !this.vehicleTimeAverages) {
- return;
- }
- const timelineWidth = this.legendTimeline.nativeElement.getBoundingClientRect().width;
- const adjustedTimelineWidth = timelineWidth - this.timelineOffset;
-
- this.timelineLengths.service = [
- this.timelineOffset,
- this.vehicleTimeAverages.serviceTime * adjustedTimelineWidth,
- ];
- this.timelineLengths.travel = [
- this.timelineLengths.service[1],
- this.timelineLengths.service[1] + this.vehicleTimeAverages.travelTime * adjustedTimelineWidth,
- ];
- this.timelineLengths.idle = [
- this.timelineLengths.travel[1],
- this.timelineLengths.travel[1] + this.vehicleTimeAverages.idleTime * adjustedTimelineWidth,
- ];
- this.timelineLengths.break = [
- this.timelineLengths.idle[1],
- this.timelineLengths.idle[1] + this.vehicleTimeAverages.breakTime * adjustedTimelineWidth,
- ];
-
- this.changeRef.detectChanges();
}
invalidTimeAverages(): boolean {
diff --git a/application/frontend/src/styles/main.scss b/application/frontend/src/styles/main.scss
index 2ad1d5d9..a14eef8b 100644
--- a/application/frontend/src/styles/main.scss
+++ b/application/frontend/src/styles/main.scss
@@ -957,7 +957,7 @@ app-post-solve-map-legend .legend-panel mat-checkbox label .mat-checkbox-label {
border-radius: 5px;
padding: 5px 20px;
text-align: center;
- flex-grow: 1;
+ flex: 1;
border: 1px solid #d5dee5;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);