ReportsHealth: Add trend chart (connects #6469) (#6471)

open-learning-exchange · Jun 4, 2020 · 61f6584 · 61f6584
1 parent 57fc17b
commit 61f6584
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 5 deletions.
diff --git a/src/app/manager-dashboard/reports/reports-detail.component.html b/src/app/manager-dashboard/reports/reports-detail.component.html
@@ -173,8 +173,8 @@ <h1 class="mat-title" i18n>Courses</h1>
       <mat-tab i18n-label label="Courses">
         <planet-reports-detail-activities [activitiesByDoc]="courseActivities.byDoc" [ratings]="ratings.courses" activityType="courses" (itemClick)="openCourseView($event)"></planet-reports-detail-activities>
       </mat-tab>
-      <mat-tab i18n-label label="Health" *planetBeta>
-        <planet-reports-health [planetCode]="planetCode" [dateRange]="dateFilterForm?.value" (changeDateRange)="resetDateFilter($event)"></planet-reports-health>
+      <mat-tab i18n-label label="Health" *planetBeta #healthTab>
+        <planet-reports-health [planetCode]="planetCode" [dateRange]="dateFilterForm?.value" [isActive]="healthTab.isActive" (changeDateRange)="resetDateFilter($event)"></planet-reports-health>
       </mat-tab>
     </mat-tab-group>
   </div>

diff --git a/src/app/manager-dashboard/reports/reports-health.component.html b/src/app/manager-dashboard/reports/reports-health.component.html
@@ -10,6 +10,9 @@ <h1 class="mat-title" i18n>Diagnoses</h1>
     <planet-label [label]="condition"></planet-label>: {{headlineData?.conditions[condition]}}
   </span>
 </div>
+<div class="chart-container">
+  <canvas id="diagnosesTrend" #diagnosesChart></canvas>
+</div>
 <h1 class="mat-title" i18n>Weekly Data</h1>
 <planet-reports-detail-activities
   [activitiesByDoc]="weeklyHealthData"

diff --git a/src/app/manager-dashboard/reports/reports-health.component.ts b/src/app/manager-dashboard/reports/reports-health.component.ts
@@ -1,10 +1,11 @@
-import { Component, Input, OnChanges, EventEmitter, Output } from '@angular/core';
+import { Component, Input, OnChanges, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Chart } from 'chart.js';
 import { StateService } from '../../shared/state.service';
 import { HealthService } from '../../health/health.service';
-import { generateWeeksArray, filterByDate } from './reports.utils';
+import { generateWeeksArray, filterByDate, weekDataLabels } from './reports.utils';
 import { ReportsService } from './reports.service';
 import { millisecondsToDay } from '../../meetups/constants';
-import { dedupeShelfReduce } from '../../shared/utils';
+import { dedupeShelfReduce, styleVariables } from '../../shared/utils';
 import { conditions } from '../../health/health.constants';
 
 @Component({
@@ -17,14 +18,20 @@ import { conditions } from '../../health/health.constants';
       grid-gap: 0.25rem;
       grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     }
+    .chart-container {
+      height: 30vh;
+    }
   ` ]
 })
 export class ReportsHealthComponent implements OnChanges {
 
   @Input() planetCode = this.stateService.configuration.code;
   @Input() dateRange: { startDate: Date, endDate: Date };
+  @Input() isActive: boolean;
   @Output() changeDateRange = new EventEmitter<{ startDate: Date, endDate: Date }>();
   @Output() updateHealthData = new EventEmitter<any[]>();
+  @ViewChild('diagnosesChart', { static: false }) diagnosesChart;
+  charts: any[] = [];
   examinations;
   weeklyHealthData = [];
   headlineData: { total: number, unique: string[], conditions: any };
@@ -68,10 +75,47 @@ export class ReportsHealthComponent implements OnChanges {
         data.conditions
       )
     }), { total: filteredExaminations.length, unique: [], conditions: {} });
+    this.setWeeklyChart('COVID-19');
   }
 
   showWeek(weekOf) {
     this.changeDateRange.emit({ startDate: new Date(weekOf), endDate: new Date(weekOf + (millisecondsToDay * 6)) });
   }
 
+  setWeeklyChart(diagnosis: string) {
+    if (this.weeklyHealthData.length === 0) {
+      return;
+    }
+    this.weeklyHealthData.sort((a, b) => a.weekOf - b.weekOf);
+    const data = this.weeklyHealthData.map(week => week.docs.filter(doc => doc.conditions[diagnosis] === true).length);
+    const labels = this.weeklyHealthData.map(week => weekDataLabels(week.weekOf));
+    this.setChart({
+      data: { labels, datasets: [ { label: diagnosis, data, borderColor: styleVariables.primary, lineTension: 0 } ] },
+      chartName: 'diagnosesTrend'
+    });
+  }
+
+  setChart({ data, chartName }) {
+    const updateChart = this.charts.find(chart => chart.canvas.id === chartName);
+    if (updateChart) {
+      updateChart.data = data;
+      updateChart.update();
+      return;
+    }
+    this.charts.push(new Chart(this.diagnosesChart.nativeElement.getContext('2d'), {
+      type: 'line',
+      data,
+      options: {
+        title: { display: true, text: 'Diagnosis Trend', fontSize: 16 },
+        maintainAspectRatio: false,
+        scales: {
+          yAxes: [ {
+            type: 'linear',
+            ticks: { beginAtZero: true, precision: 0, suggestedMax: 10 }
+          } ]
+        }
+      }
+    }));
+  }
+
 }
diff --git a/src/app/manager-dashboard/reports/reports.utils.ts b/src/app/manager-dashboard/reports/reports.utils.ts
@@ -62,6 +62,8 @@ export const reportsDetailParams = (type) => ({
 
 export const monthDataLabels = (date) => new Date(date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
 
+export const weekDataLabels = (date) => new Date(date).toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+
 export const xyChartData = (data, unique) => data.map((visit: any) => ({
   x: monthDataLabels(visit.date),
   y: unique ? visit.unique.length : visit.count || 0