Dashboard disease burden (#298)

* Disease burden section

* List and table views

* Add translations

Author: danielrus

src/app/_constants/api.ts

@@ -229,6 +229,11 @@ export const API_ROUTE_EVENT_GROUPS = {
   DELETE: 'eventGroups/delete',
 };
 
+export const API_ROUTE_DISEASE_BURDEN = {
+  ENDPOINT: 'dashboard',
+  GET_ALL: 'dashboard/diseaseBurden',
+};
+
 export const API_ROUTE_IMMUNIZATIONS = {
   ENDPOINT: 'immunizations',
   GET_ALL: 'immunizations/indexList',

src/app/_constants/icons.ts

@@ -9,6 +9,9 @@ export enum IconsMap {
   false = 'not_interested',
   EMAIL = 'mail_outline',
   PHONE = 'call',
+  RISING = 'keyboard_arrow_up',
+  FALLING = 'keyboard_arrow_down',
+  STAGNANT = 'keyboard_arrow_right',
 }
 
 export enum CaseOutcomeIcons {

src/app/_models/cardAppearance.ts

@@ -34,4 +34,5 @@ export type CardType =
   | 'therapy_prescriptions'
   | 'sample_pathogen'
   | 'sample_additional'
+  | 'disease'
   | undefined;

src/app/_models/common.ts

@@ -116,3 +116,10 @@ export const FormGroupStyleType = {
   CARD: 'CARD' as FormGroupStyle,
   COLLAPSABLE: 'COLLAPSABLE' as FormGroupStyle,
 };
+
+export type ViewOptions = 'PRIMARY' | 'SECONDARY';
+
+export const VIEW_OPTIONS = {
+  PRIMARY: 'PRIMARY' as ViewOptions,
+  SECONDARY: 'SECONDARY' as ViewOptions,
+};

src/app/_serializers/disease-burden.serializer.ts

@@ -0,0 +1,16 @@
+/* eslint-disable no-param-reassign */
+import { Serializer } from './base.serializer';
+import { deserializeDates, serializeDates } from './date-parse';
+
+export class DiseaseBurdenSerializer implements Serializer {
+  fromJson(json: any): any {
+    json.id = json.id ?? json.uuid;
+    deserializeDates(json);
+    return json;
+  }
+
+  toJson(item: any): any {
+    serializeDates(item);
+    return item;
+  }
+}

src/app/_services/api/dashboard.service.ts

@@ -1,12 +1,9 @@
 import { Inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-
 import { map } from 'rxjs/operators';
-
 import { Resource } from '../../_models/resource';
 import { Serializer } from '../../_serializers/base.serializer';
-
 import { HelperService } from '../helper.service';
 
 @Injectable({
@@ -22,12 +19,7 @@ export class DashboardService {
   ) {}
 
   getCalculated(filters?: any): Observable<Resource> {
-    // endpoint
-    let endpoint = this.endpoint.ENDPOINT;
-    if (this.endpoint.GET_ALL) {
-      endpoint = this.endpoint.GET_ALL;
-    }
-
+    const endpoint = this.endpoint.GET_ALL || this.endpoint.ENDPOINT;
     const requestPayload: any = {};
 
     if (filters.length) {

src/app/_services/api/disease-burden.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import * as constants from '../../app.constants';
+import { HelperService } from '../helper.service';
+import { DashboardService } from './dashboard.service';
+import { DiseaseBurdenSerializer } from '../../_serializers/disease-burden.serializer';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DiseaseBurdenService extends DashboardService {
+  constructor(protected httpClient: HttpClient, protected helperService: HelperService) {
+    super(
+      httpClient,
+      helperService,
+      '',
+      constants.API_ROUTE_DISEASE_BURDEN,
+      new DiseaseBurdenSerializer()
+    );
+  }
+}

src/app/dashboard/components/dashboard-difference-cases/dashboard-difference-cases.component.html

@@ -1 +1,13 @@
-<p>dashboard-difference-cases works!</p>
+<section>
+  <h2>{{ 'captions.dashboardDiseaseDifference' | translate }}</h2>
+  <p>
+    {{
+      'captions.dashboardComparedToPreviousPeriod'
+        | translate
+        | replace: '%s':period
+        | replace: '%s':previousPeriod
+    }}
+  </p>
+
+  <div>graph here</div>
+</section>

src/app/dashboard/components/dashboard-difference-cases/dashboard-difference-cases.component.scss

@@ -1 +1,11 @@
-/* stylelint-disable */
+@use '/src/variables.scss' as *;
+
+h2 {
+  font-size: 16px;
+  line-height: 1;
+  margin-bottom: 4px;
+}
+
+p {
+  color: map-get($sormas-accent, 500);
+}

src/app/dashboard/components/dashboard-difference-cases/dashboard-difference-cases.component.spec.ts

@@ -1,4 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { PipesModule } from '../../../_pipes/pipes.module';
 
 import { DashboardDifferenceCasesComponent } from './dashboard-difference-cases.component';
 
@@ -9,6 +11,7 @@ describe('DashboardDifferenceCasesComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [DashboardDifferenceCasesComponent],
+      imports: [TranslateModule.forRoot(), PipesModule],
     }).compileComponents();
   });
 

src/app/dashboard/components/dashboard-difference-cases/dashboard-difference-cases.component.ts

@@ -1,8 +1,42 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { format, isSameDay } from 'date-fns';
+import { COMMON_DATE_FORMAT } from '../../../app.constants';
+import { Filter } from '../../../_models/common';
 
 @Component({
   selector: 'app-dashboard-difference-cases',
   templateUrl: './dashboard-difference-cases.component.html',
   styleUrls: ['./dashboard-difference-cases.component.scss'],
 })
-export class DashboardDifferenceCasesComponent {}
+export class DashboardDifferenceCasesComponent {
+  @Input() data: any;
+  private _filters: Filter[];
+  @Input() set filters(raw: Filter[]) {
+    this._filters = raw;
+    this.setPeriod();
+  }
+  get filters(): Filter[] {
+    return this._filters;
+  }
+
+  period: string;
+  previousPeriod: string;
+
+  setPeriod(): void {
+    const dateFrom = this.filters.find((item) => item.field === 'dateFrom')?.value;
+    const dateTo = this.filters.find((item) => item.field === 'dateTo')?.value;
+    const previousDateFrom = this.filters.find((item) => item.field === 'previousDateFrom')?.value;
+    const previousDateTo = this.filters.find((item) => item.field === 'previousDateTo')?.value;
+    this.period =
+      !dateTo || isSameDay(dateFrom, dateTo)
+        ? format(dateFrom, COMMON_DATE_FORMAT)
+        : `${format(dateFrom, COMMON_DATE_FORMAT)} - ${format(dateTo, COMMON_DATE_FORMAT)}`;
+    this.previousPeriod =
+      !previousDateTo || isSameDay(previousDateFrom, previousDateTo)
+        ? format(previousDateFrom, COMMON_DATE_FORMAT)
+        : `${format(previousDateFrom, COMMON_DATE_FORMAT)} - ${format(
+            previousDateTo,
+            COMMON_DATE_FORMAT
+          )}`;
+  }
+}

src/app/dashboard/components/dashboard-disease-burden/dashboard-disease-burden.component.html

@@ -0,0 +1,29 @@
+<ng-container *ngIf="data">
+  <div [ngClass]="visible ? 'hide-section' : 'show-section'">
+    <mat-checkbox color="primary" class="small" (change)="toggleSection($event)">
+      {{ 'captions.dashboardHideOverview' | translate }}
+    </mat-checkbox>
+  </div>
+
+  <mat-card *ngIf="visible">
+    <div [ngClass]="{ grid: view.value === viewOptions.PRIMARY }">
+      <app-dashboard-disease-overview
+        [data]="view.value === viewOptions.PRIMARY ? data.slice(0, 6) : data"
+        class="overview"
+      ></app-dashboard-disease-overview>
+      <app-dashboard-difference-cases
+        [data]="view.value === viewOptions.PRIMARY ? data.slice(0, 6) : data"
+        [filters]="filters"
+        class="graph"
+      ></app-dashboard-difference-cases>
+    </div>
+    <div [hidden]="data.length <= 6" class="expand-view">
+      <app-toggle-view
+        #view
+        iconViewPrimary="expand_less_black"
+        iconViewSecondary="expand_more_black"
+        iconSize="large"
+      ></app-toggle-view>
+    </div>
+  </mat-card>
+</ng-container>

src/app/dashboard/components/dashboard-disease-burden/dashboard-disease-burden.component.scss

@@ -0,0 +1,49 @@
+@use '/src/variables.scss' as *;
+
+:host {
+  display: block;
+  position: relative;
+}
+
+.mat-card {
+  padding: 24px;
+  margin-bottom: 16px;
+  z-index: 1;
+}
+
+.overview,
+.graph {
+  display: block;
+  margin-bottom: 24px;
+}
+
+.show-section {
+  padding-right: 24px;
+  margin-top: -8px;
+  margin-bottom: 8px;
+  text-align: right;
+}
+
+.hide-section {
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  z-index: 2;
+
+  .mat-label {
+    font-weight: normal;
+  }
+}
+
+.expand-view {
+  margin-bottom: -16px !important;
+  text-align: center;
+}
+
+@media (min-width: map-get($grid-breakpoints, xl)) {
+  .grid {
+    display: grid;
+    grid-template-columns: 40% 60%;
+    column-gap: 24px;
+  }
+}

src/app/dashboard/components/dashboard-disease-burden/dashboard-disease-burden.component.spec.ts

@@ -0,0 +1,27 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MaterialModule } from '../../../material.module';
+
+import { DashboardDiseaseBurdenComponent } from './dashboard-disease-burden.component';
+
+describe('DashboardDiseaseBurdenComponent', () => {
+  let component: DashboardDiseaseBurdenComponent;
+  let fixture: ComponentFixture<DashboardDiseaseBurdenComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DashboardDiseaseBurdenComponent],
+      imports: [HttpClientTestingModule, MaterialModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardDiseaseBurdenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/components/dashboard-disease-burden/dashboard-disease-burden.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Filter, VIEW_OPTIONS } from '../../../_models/common';
+import { DiseaseBurdenService } from '../../../_services/api/disease-burden';
+import { FilterService } from '../../../_services/filter.service';
+import { NotificationService } from '../../../_services/notification.service';
+
+@Component({
+  selector: 'app-dashboard-disease-burden',
+  templateUrl: './dashboard-disease-burden.component.html',
+  styleUrls: ['./dashboard-disease-burden.component.scss'],
+})
+export class DashboardDiseaseBurdenComponent implements OnInit, OnDestroy {
+  data: any;
+  subscriptions: Subscription[] = [];
+  filters: Filter[] = [];
+  visible = true;
+  viewOptions = VIEW_OPTIONS;
+
+  constructor(
+    private diseaseBurdenService: DiseaseBurdenService,
+    public filterService: FilterService,
+    private notificationService: NotificationService
+  ) {}
+
+  ngOnInit(): void {
+    this.subscriptions.push(
+      this.filterService.getFilters().subscribe((response) => {
+        this.filters = response.filters;
+        this.fetchDiseaseBurden();
+      })
+    );
+  }
+
+  fetchDiseaseBurden(): void {
+    this.subscriptions.push(
+      this.diseaseBurdenService.getCalculated(this.filters).subscribe({
+        next: (data: any) => {
+          this.data = data;
+        },
+        error: (err: any) => {
+          this.notificationService.error(err);
+        },
+        complete: () => {},
+      })
+    );
+  }
+
+  toggleSection(event: any): void {
+    this.visible = !event.checked;
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+}