Used fixed sizes for legend lines

application/frontend/src/app/core/components/post-solve-timeline-legend/post-solve-timeline-legend.component.html

@@ -1,60 +1,39 @@
-<div class="mat-typography legend-container" #legendContainer>
-  <p class="legend-timeline-container">
-    <svg width="100%" height="14" #legendTimeline>
-      <line
-        class="driving"
-        [attr.x1]="this.timelineLengths.travel[0]"
-        y1="50%"
-        [attr.x2]="this.timelineLengths.travel[1]"
-        y2="50%"
-        *ngIf="this.timelineLengths.travel[1] - this.timelineLengths.travel[0] > 0" />
-      <line
-        class="idle-time"
-        [attr.x1]="this.timelineLengths.idle[0]"
-        y1="50%"
-        [attr.x2]="this.timelineLengths.idle[1]"
-        y2="50%"
-        *ngIf="this.timelineLengths.idle[1] - this.timelineLengths.idle[0] > 0" />
-      <line
-        class="break-time"
-        stroke="url(#BreakPattern)"
-        [attr.x1]="this.timelineLengths.break[0]"
-        y1="50%"
-        [attr.x2]="this.timelineLengths.break[1]"
-        y2="50%"
-        *ngIf="this.timelineLengths.break[1] - this.timelineLengths.break[0] > 0" />
-      <line
-        class="service"
-        [attr.x1]="this.timelineLengths.service[0]"
-        y1="50%"
-        [attr.x2]="this.timelineLengths.service[1]"
-        y2="50%"
-        *ngIf="this.timelineLengths.service[1] - this.timelineLengths.service[0] > 0" />
-    </svg>
-  </p>
-  <div *ngIf="formattedVehicleTimeAverages; else noData">
-    <div class="percent-label margin-right">
-      <span class="mat-body-strong"
-        >{{ formattedVehicleTimeAverages?.serviceTime || 0 | number: '1.0-0' }}%</span
-      >
+<div class="mat-typography" #legendContainer>
+  <div *ngIf="formattedVehicleTimeAverages; else noData" class="legend-container">
+    <div class="percent-label">
+      <svg width="100%" height="14">
+        <line class="service" x1="10%" y1="50%" x2="90%" y2="50%" />
+      </svg>
+      <div class="mat-body-strong">
+        {{ formattedVehicleTimeAverages?.serviceTime || 0 | number: '1.0-0' }}%
+      </div>
       Service
     </div>
-    <div class="percent-label margin-right">
-      <span class="mat-body-strong"
-        >{{ formattedVehicleTimeAverages?.travelTime || 0 | number: '1.0-0' }}%</span
-      >
+    <div class="percent-label">
+      <svg width="100%" height="14">
+        <line class="driving" x1="10%" y1="50%" x2="90%" y2="50%" />
+      </svg>
+      <div class="mat-body-strong">
+        {{ formattedVehicleTimeAverages?.travelTime || 0 | number: '1.0-0' }}%
+      </div>
       Driving
     </div>
-    <div class="percent-label margin-right">
-      <span class="mat-body-strong"
-        >{{ formattedVehicleTimeAverages?.idleTime || 0 | number: '1.0-0' }}%</span
-      >
+    <div class="percent-label">
+      <svg width="100%" height="14">
+        <line class="idle-time" x1="10%" y1="50%" x2="90%" y2="50%" />
+      </svg>
+      <div class="mat-body-strong">
+        {{ formattedVehicleTimeAverages?.idleTime || 0 | number: '1.0-0' }}%
+      </div>
       Idle
     </div>
     <div class="percent-label">
-      <span class="mat-body-strong"
-        >{{ formattedVehicleTimeAverages?.breakTime || 0 | number: '1.0-0' }}%</span
-      >
+      <svg width="100%" height="14">
+        <line class="break-time" stroke="url(#BreakPattern)" x1="10%" y1="50%" x2="90%" y2="50%" />
+      </svg>
+      <div class="mat-body-strong">
+        {{ formattedVehicleTimeAverages?.breakTime || 0 | number: '1.0-0' }}%
+      </div>
       Break
     </div>
   </div>

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;
   }
 }

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 {

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);