Design Taskgroup-Activity View

frontend/angular.json

@@ -31,7 +31,9 @@
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/apexcharts/dist/apexcharts.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -100,7 +102,9 @@
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/apexcharts/dist/apexcharts.min.js"
+            ]
           }
         }
       }

frontend/package-lock.json

@@ -22,10 +22,13 @@
         "@angular/platform-browser-dynamic": "^16.2.7",
         "@angular/router": "^16.2.7",
         "angular-calendar": "^0.31.0",
+        "apexcharts": "^3.44.0",
         "date-fns": "^2.29.3",
         "luxon": "^3.4.3",
         "moment": "^2.29.4",
+        "ng-apexcharts": "^1.8.0",
         "ngx-material-timepicker": "^13.1.1",
+        "ngx-slider-v2": "^16.0.2",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.13.3"
@@ -4738,6 +4741,11 @@
       "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
       "dev": true
     },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -5036,6 +5044,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.44.0.tgz",
+      "integrity": "sha512-u7Xzrbcxc2yWznN78Jh5NMCYVAsWDfBjRl5ea++rVzFAqjU2hLz4RgKIFwYOBDRQtW1e/Qz8azJTqIJ1+Vu9Qg==",
+      "dependencies": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "node_modules/aproba": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
@@ -6334,12 +6356,25 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/detect-it/-/detect-it-4.0.1.tgz",
+      "integrity": "sha512-dg5YBTJYvogK1+dA2mBUDKzOWfYZtHVba89SyZUhc4+e3i2tzgjANFg5lDRCd3UOtRcw00vUTMK8LELcMdicug=="
+    },
     "node_modules/detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "node_modules/detect-passive-events": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-2.0.3.tgz",
+      "integrity": "sha512-QN/1X65Axis6a9D8qg8Py9cwY/fkWAmAH/edTbmLMcv4m5dboLJ7LcAi8CfaCON2tjk904KwKX/HTdsHC6yeRg==",
+      "dependencies": {
+        "detect-it": "^4.0.1"
+      }
+    },
     "node_modules/di": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
@@ -9753,6 +9788,20 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ng-apexcharts": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/ng-apexcharts/-/ng-apexcharts-1.8.0.tgz",
+      "integrity": "sha512-NwJuMLHoLm52LSzM08RXV6oOOTyUYREAV53WHVGs+L2qi8UWbxCz19hX0kk+F/xFLEhhuiLegO3T1v30jLbKSQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=13.0.0",
+        "@angular/core": ">=13.0.0",
+        "apexcharts": "^3.41.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/ngx-material-timepicker": {
       "version": "13.1.1",
       "resolved": "https://registry.npmjs.org/ngx-material-timepicker/-/ngx-material-timepicker-13.1.1.tgz",
@@ -9765,6 +9814,21 @@
         "luxon": ">= 1.24.0"
       }
     },
+    "node_modules/ngx-slider-v2": {
+      "version": "16.0.2",
+      "resolved": "https://registry.npmjs.org/ngx-slider-v2/-/ngx-slider-v2-16.0.2.tgz",
+      "integrity": "sha512-Lpl7SlErL+tJJvTRZYdyZoXTThKN8Ro1z3vscJQ1O5azHXwvbv3pnTcsOwY4ltfaP+dpzY27KL1QXyDr6QMaxQ==",
+      "dependencies": {
+        "detect-passive-events": "^2.0.3",
+        "rxjs": "^7.4.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^16.0.0",
+        "@angular/core": "^16.0.0",
+        "@angular/forms": "^16.0.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -12181,6 +12245,89 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",

frontend/package.json

@@ -24,10 +24,13 @@
     "@angular/platform-browser-dynamic": "^16.2.7",
     "@angular/router": "^16.2.7",
     "angular-calendar": "^0.31.0",
+    "apexcharts": "^3.44.0",
     "date-fns": "^2.29.3",
     "luxon": "^3.4.3",
     "moment": "^2.29.4",
+    "ng-apexcharts": "^1.8.0",
     "ngx-material-timepicker": "^13.1.1",
+    "ngx-slider-v2": "^16.0.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.3"

frontend/src/app/app-routing.module.ts

@@ -15,6 +15,7 @@ import {DraggableSchedulerComponent} from "./schedules/draggable-scheduler/dragg
 import {
   ForgottenTaskStartDialogComponent
 } from "./dashboard/forgotten-task-start-dialog/forgotten-task-start-dialog.component";
+import {TaskgroupActivityComponent} from "./statistics/taskgroup-activity/taskgroup-activity.component";
 
 const routes: Routes = [
   {path: '', component: MainComponent},
@@ -30,7 +31,8 @@ const routes: Routes = [
   {path: 'upcoming', component: UpcomingTaskOverviewComponent},
   {path: 'active', component: ActiveTaskOverviewComponent},
   {path: 'scheduler', component: DraggableSchedulerComponent},
-  {path: 'forgotten', component: ForgottenTaskStartDialogComponent}
+  {path: 'forgotten', component: ForgottenTaskStartDialogComponent},
+  {path: 'statistics/taskgroup-activity', component: TaskgroupActivityComponent}
 ];
 
 @NgModule({

frontend/src/app/app.component.html

@@ -2,6 +2,7 @@
   <span>TimeManager</span>
 
   <button mat-button aria-label="Organize" *ngIf="authService.hasKey" [matMenuTriggerFor]="organizeMenu">Organize &#9662;</button>
+  <button mat-button aria-label="Statistics" *ngIf="authService.hasKey" [matMenuTriggerFor]="statisticsMenu">Statistics &#9662;</button>
   <mat-menu #organizeMenu=matMenu>
     <button mat-menu-item routerLink="taskgroups/" aria-label="Task groups">Taskgroups</button>
     <button mat-menu-item routerLink="scheduler/" aria-label="Task groups">Scheduler</button>
@@ -10,6 +11,10 @@
     <button mat-menu-item routerLink="overdue/" aria-label="Overdue Tasks">Overdue Tasks</button>
     <button mat-menu-item routerLink="reschedule/" aria-label="Missed Schedules">Missed Schedules</button>
   </mat-menu>
+
+  <mat-menu #statisticsMenu=matMenu>
+    <button mat-menu-item routerLink="statistics/taskgroup-activity">Activity</button>
+  </mat-menu>
   <span class="example-spacer"></span>
 
 

frontend/src/app/app.module.ts

@@ -80,6 +80,9 @@ import { DateTimePickerComponent } from './date-time-picker/date-time-picker.com
 import {MatSliderModule} from "@angular/material/slider";
 import {MatLegacySliderModule} from "@angular/material/legacy-slider";
 import { DraggableSchedulerComponent } from './schedules/draggable-scheduler/draggable-scheduler.component';
+import { TaskgroupActivityComponent } from './statistics/taskgroup-activity/taskgroup-activity.component';
+import {NgxSliderModule} from "ngx-slider-v2";
+import {NgApexchartsModule} from "ng-apexcharts";
 @NgModule({
   declarations: [
     AppComponent,
@@ -120,6 +123,7 @@ import { DraggableSchedulerComponent } from './schedules/draggable-scheduler/dra
     AdvancedSchedulerComponent,
     DateTimePickerComponent,
     DraggableSchedulerComponent,
+    TaskgroupActivityComponent,
   ],
   imports: [
     BrowserModule,
@@ -158,7 +162,9 @@ import { DraggableSchedulerComponent } from './schedules/draggable-scheduler/dra
     MatTreeModule,
     MatAutocompleteModule,
     NgxMaterialTimepickerModule,
-    MatSliderModule
+    MatSliderModule,
+    NgxSliderModule,
+    NgApexchartsModule,
   ],
   providers: [
     HttpClientModule,

frontend/src/app/statistics/taskgroup-activity/taskgroup-activity.component.css

@@ -0,0 +1,66 @@
+.container {
+  margin: 20px auto;
+  width: 80%;
+}
+
+.spacer {
+  margin-bottom: 2.5%;
+}
+
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+    margin: 20px 10px;
+  }
+}
+
+#date-range-selector {
+  width: 100%;
+}
+
+::ng-deep {
+  .custom-slider .ngx-slider .ngx-slider-bar {
+    background: #ffe4d1;
+    height: 2px;
+  }
+  .custom-slider .ngx-slider .ngx-slider-selection {
+    background: orange;
+  }
+
+  .custom-slider .ngx-slider .ngx-slider-pointer {
+    width: 8px;
+    height: 16px;
+    top: auto; /* to remove the default positioning */
+    bottom: 0;
+    background-color: #333;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  .custom-slider .ngx-slider .ngx-slider-pointer:after {
+    display: none;
+  }
+
+  .custom-slider .ngx-slider .ngx-slider-bubble {
+    bottom: 14px;
+  }
+
+  .custom-slider .ngx-slider .ngx-slider-limit {
+    font-weight: bold;
+    color: orange;
+  }
+
+  .custom-slider .ngx-slider .ngx-slider-tick {
+    width: 1px;
+    height: 10px;
+    margin-left: 4px;
+    border-radius: 0;
+    background: #ffe4d1;
+    top: -1px;
+  }
+
+  .custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
+    background: orange;
+  }
+}

frontend/src/app/statistics/taskgroup-activity/taskgroup-activity.component.html

@@ -0,0 +1,14 @@
+<div class="container">
+  <app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
+  <div style="text-align:center">
+    <apx-chart
+      [series]="chartOptions.series!"
+      [chart]="chartOptions.chart!"
+      [xaxis]="chartOptions.xaxis!"
+      [title]="chartOptions.title!"
+    ></apx-chart>
+  </div>
+ <div class="custom-slider">
+   <ngx-slider class="ngx-slider" [(value)]="minValue" [(highValue)]="maxValue" [options]="options"></ngx-slider>
+ </div>
+</div>

frontend/src/app/statistics/taskgroup-activity/taskgroup-activity.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskgroupActivityComponent } from './taskgroup-activity.component';
+
+describe('TaskgroupActivityComponent', () => {
+  let component: TaskgroupActivityComponent;
+  let fixture: ComponentFixture<TaskgroupActivityComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TaskgroupActivityComponent]
+    });
+    fixture = TestBed.createComponent(TaskgroupActivityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/statistics/taskgroup-activity/taskgroup-activity.component.ts

@@ -0,0 +1,89 @@
+import {Component, ViewChild} from '@angular/core';
+import {NavigationLink} from "../../navigation-link-list/navigation-link-list.component";
+import * as moment from "moment";
+import {LabelType, Options} from "ngx-slider-v2";
+import {
+  ChartComponent,
+  ApexAxisChartSeries,
+  ApexChart,
+  ApexXAxis,
+  ApexTitleSubtitle
+} from "ng-apexcharts";
+
+export type ChartOptions = {
+  series: ApexAxisChartSeries;
+  chart: ApexChart;
+  xaxis: ApexXAxis;
+  title: ApexTitleSubtitle;
+};
+@Component({
+  selector: 'app-taskgroup-activity',
+  templateUrl: './taskgroup-activity.component.html',
+  styleUrls: ['./taskgroup-activity.component.css']
+})
+export class TaskgroupActivityComponent {
+  defaultNavigationLinkPath: NavigationLink[] = [
+    {
+      linkText: 'Dashboard',
+      routerLink: ['/']
+    },
+    {
+      linkText: 'Statistics',
+      routerLink: []
+    },
+    {
+      linkText: 'Taskgroup Activity',
+      routerLink: ['/statistics/taskgroup-activity']
+    }
+  ];
+
+  minValue: number = 50;
+  maxValue: number = 200;
+  /*options: Options = {
+    floor: 0,
+    ceil: 250
+  };*/
+
+  dateRange: Date[] = this.createDateRange();
+  value: number = this.dateRange[0].getTime();
+  options: Options = {
+    stepsArray: this.dateRange.map((date: Date) => {
+      return { value: date.getTime() };
+    }),
+    translate: (value: number, label: LabelType): string => {
+      return new Date(value).toDateString();
+    },
+    floor: 0,
+    ceil: this.dateRange.length,
+  };
+
+  @ViewChild("chart") chart?: ChartComponent;
+  public chartOptions: Partial<ChartOptions> = {
+    series: [
+      {
+        name: "My-series",
+        data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
+      }
+    ],
+    chart: {
+      height: 350,
+      type: "bar"
+    },
+    title: {
+      text: "My First Angular Chart"
+    },
+    xaxis: {
+      categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
+    }
+  };
+
+  createDateRange(): Date[] {
+    const dates: Date[] = [];
+    for (let i: number = 1; i <= 31; i++) {
+
+      dates.push(moment().subtract(30-i, 'd').toDate());
+    }
+    return dates;
+  }
+
+}