improve duedate positioning

Author: Manuela Paula Ritter

src/app/matrix/canvas/canvas.component.ts

@@ -16,7 +16,7 @@ export class CanvasComponent implements OnInit {
   maxDate = new Date();
 
   constructor(public readonly store: Store<AppState>) {
-    this.maxDate = new Date(this.maxDate.setMonth(this.maxDate.getMonth() - 1));
+    this.maxDate = new Date(this.maxDate.setMonth(this.maxDate.getMonth() + 1));
   }
 
   ngOnInit(): void {

src/app/matrix/x-position.pipe.ts

@@ -4,11 +4,27 @@ import { Pipe, PipeTransform } from '@angular/core';
 export class XPositionPipe implements PipeTransform {
   transform(xValue: Date, maxDate: Date): string {
     // | > maxDate ------------- < maxDate | <- today
+    // | 100 --------------------------- 0 |
+    // 100 = maxDate - today
+    // 0 = today
     const today = new Date().getTime();
     const maxDateTime = maxDate.getTime();
-    const maxDiff = maxDateTime - today;
-    const diff = maxDateTime - xValue.getTime();
-    const ratio = diff / maxDiff;
-    return ratio * 94 + '%';
+    const value = xValue.getTime();
+    let ratio: number;
+    if (value < today) {
+      ratio = 0;
+    } else if (value > maxDateTime) {
+      ratio = 1;
+    } else {
+      ratio = (value - today) / (maxDateTime - today);
+    }
+
+    console.log(ratio);
+
+    ratio = Math.max(ratio, 0);
+    ratio = Math.min(ratio, 1);
+
+    console.log(ratio);
+    return (1 - ratio) * 94 + '%';
   }
 }