Merge branch 'develop'

BoundfoxStudios · Aug 10, 2023 · f4e0f69 · f4e0f69
2 parents fd08ebe + dc40109
commit f4e0f69
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 8 deletions.
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
diff --git a/src/app/components/history-chart/history-chart.component.ts b/src/app/components/history-chart/history-chart.component.ts
@@ -1,14 +1,27 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, inject, Input, OnDestroy, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TimeEntryGroup } from '../../services/time-tracking/time.models';
-import { Milliseconds, millisecondsToHumanReadable, unixTimeToDate } from '../../services/time.utils';
+import {
+    calculateRemainingAndOvertime,
+    durationToHumanReadable,
+    Milliseconds,
+    millisecondsToHumanReadable,
+    unixTimeToDate,
+} from '../../services/time.utils';
 import { MillisecondsToTimePipe } from '../../pipes/milliseconds-to-time.pipe';
 import { DurationPipe } from '../../pipes/duration.pipe';
 import { UnixDatePipe } from '../../pipes/unix-date.pipe';
 import { Chart } from 'chart.js';
 import { StyleService } from '../../services/style.service';
 import { Duration } from 'luxon';
 
+interface ChartData {
+    key: string;
+    value: number;
+    overtime?: Duration;
+    remainingTime?: Duration;
+}
+
 @Component({
     selector: 'kw-history-chart',
     standalone: true,
@@ -22,7 +35,7 @@ export class HistoryChartComponent implements AfterViewInit, OnDestroy {
     @Input() dailyWork: Milliseconds = 0;
     @ViewChild('chart', { static: true }) chartElement!: ElementRef<HTMLCanvasElement>;
     private readonly styleService = inject(StyleService);
-    private chart?: Chart;
+    private chart?: Chart<'line', ChartData[]>;
 
     @Input() set data(input: TimeEntryGroup[]) {
         // Sorry :(
@@ -37,6 +50,10 @@ export class HistoryChartComponent implements AfterViewInit, OnDestroy {
                 datasets: [],
             },
             options: {
+                parsing: {
+                    xAxisKey: 'key',
+                    yAxisKey: 'value',
+                },
                 scales: {
                     x: {
                         type: 'category',
@@ -66,9 +83,36 @@ export class HistoryChartComponent implements AfterViewInit, OnDestroy {
                     },
                     tooltip: {
                         displayColors: false,
+                        backgroundColor: 'rgba(0, 0, 0, 1)',
                         callbacks: {
+                            beforeBody: (context): string => {
+                                return millisecondsToHumanReadable(context[0].parsed.y);
+                            },
                             label: (context): string => {
-                                return millisecondsToHumanReadable(context.parsed.y);
+                                const { overtime, remainingTime } = context.raw as ChartData;
+
+                                if (overtime) {
+                                    return `+${durationToHumanReadable(overtime)}`;
+                                }
+
+                                if (remainingTime) {
+                                    return `-${durationToHumanReadable(remainingTime)}`;
+                                }
+
+                                return '';
+                            },
+                            labelTextColor: (context): string => {
+                                const { overtime, remainingTime } = context.raw as ChartData;
+
+                                if (overtime) {
+                                    return this.styleService.getCssVariable('--color-green');
+                                }
+
+                                if (remainingTime) {
+                                    return this.styleService.getCssVariable('--color-red');
+                                }
+
+                                return '';
                             },
                         },
                     },
@@ -98,16 +142,25 @@ export class HistoryChartComponent implements AfterViewInit, OnDestroy {
         }
 
         const labels: string[] = [];
-        const data: number[] = [];
+        const data: ChartData[] = [];
+        const dailyWorkDuration = Duration.fromMillis(this.dailyWork);
 
         for (const timeEntryGroup of timeEntryGroups) {
-            labels.push(unixTimeToDate(timeEntryGroup.utcDate));
-            data.push(timeEntryGroup.duration.toMillis());
+            const key = unixTimeToDate(timeEntryGroup.utcDate);
+            const { remainingTime, overtime } = calculateRemainingAndOvertime(dailyWorkDuration, timeEntryGroup.duration);
+            labels.push(key);
+            data.push({ key, value: timeEntryGroup.duration.toMillis(), remainingTime, overtime });
         }
 
         this.chart.data = {
             labels,
-            datasets: [{ data, borderColor: this.styleService.getCssVariable('--color-blue'), borderWidth: 1.5 }],
+            datasets: [
+                {
+                    data,
+                    borderColor: this.styleService.getCssVariable('--color-blue'),
+                    borderWidth: 1.5,
+                },
+            ],
         };
         this.chart.update();
     }