manager: smoother report health charting (fixes #9896) (#9897)

Co-authored-by: dogi <dogi@users.noreply.github.com>

Author: Mutugiii

package.json

@@ -1,9 +1,9 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.22.63",
+  "version": "0.22.64",
   "myplanet": {
-    "latest": "v0.54.48",
+    "latest": "v0.54.54",
     "min": "v0.52.45"
   },
   "scripts": {

src/app/manager-dashboard/reports/reports-health.component.ts

@@ -1,8 +1,9 @@
 import { Component, Input, OnChanges, EventEmitter, Output, ViewChild } from '@angular/core';
-import { Chart, ChartConfiguration, LineController } from 'chart.js';
+import type { ChartConfiguration } from 'chart.js';
+import { loadChart } from '../../shared/chart-utils';
 import { StateService } from '../../shared/state.service';
 import { HealthService } from '../../health/health.service';
-import { generateWeeksArray, filterByDate, weekDataLabels, scaleLabel } from './reports.utils';
+import { generateWeeksArray, filterByDate, weekDataLabels } from './reports.utils';
 import { ReportsService } from './reports.service';
 import { millisecondsToDay } from '../../meetups/constants';
 import { dedupeShelfReduce, styleVariables } from '../../shared/utils';
@@ -14,8 +15,6 @@ import { MatSelect } from '@angular/material/select';
 import { MatOption } from '@angular/material/autocomplete';
 import { ReportsDetailActivitiesComponent } from './reports-detail-activities.component';
 
-Chart.register(LineController);
-
 @Component({
   selector: 'planet-reports-health',
   templateUrl: './reports-health.component.html',
@@ -130,7 +129,10 @@ export class ReportsHealthComponent implements OnChanges {
     });
   }
 
-  setChart({ data, chartName }) {
+  async setChart({ data, chartName }) {
+    const { Chart } = await loadChart([
+      'LineController', 'LineElement', 'PointElement', 'CategoryScale', 'LinearScale', 'Title', 'Tooltip'
+    ]);
     const updateChart = this.charts.find(chart => chart.canvas.id === chartName);
     if (updateChart) {
       updateChart.data = data;
@@ -141,6 +143,7 @@ export class ReportsHealthComponent implements OnChanges {
       setTimeout(() => this.setChart({ data, chartName }));
       return;
     }
+    const axisTitleFont = { size: 12, weight: 'bold' as const };
     const chartConfig: ChartConfiguration<'line'> = {
       type: 'line',
       data,
@@ -153,9 +156,13 @@ export class ReportsHealthComponent implements OnChanges {
         scales: {
           y: {
             type: 'linear',
-            ticks: {  precision: 0 }
+            ticks: { precision: 0 },
+            title: { display: true, text: $localize`Diagnoses`, font: axisTitleFont }
           },
-          x: { title: { display: true, text: 'Week of' } }
+          x: {
+            type: 'category',
+            title: { display: true, text: $localize`Week of`, font: axisTitleFont }
+          }
         },
       }
     };

src/app/manager-dashboard/reports/reports.utils.ts

@@ -124,10 +124,6 @@ export const generateWeeksArray = (dateRange: { startDate: Date, endDate: Date }
   return weeks;
 };
 
-export const scaleLabel = (labelString: string) => ({
-  display: true, labelString, fontSize: 12, fontStyle: 'bold'
-});
-
 export const sortingOptionsMap = {
   'logins': [
     { name: $localize`Login Time Ascending`, value: 'loginTimeAsc' },