manager: smoother reports charts loading (fixes #9183) (#9184)

Co-authored-by: dogi <[email protected]>

Author: Mutugiii

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.48",
+  "version": "0.20.49",
   "myplanet": {
-    "latest": "v0.34.32",
-    "min": "v0.33.32"
+    "latest": "v0.34.54",
+    "min": "v0.33.54"
   },
   "scripts": {
     "ng": "ng",

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

@@ -5,7 +5,8 @@ import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Location } from '@angular/common';
 import { combineLatest, Subject, of } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
-import { Chart, ChartConfiguration, BarController, CategoryScale, LinearScale, BarElement, Title, Legend, Tooltip } from 'chart.js';
+import type { Chart as ChartJs, ChartConfiguration } from 'chart.js';
+import { loadChart } from '../../shared/chart-utils';
 import { ReportsService } from './reports.service';
 import { StateService } from '../../shared/state.service';
 import { styleVariables, formatDate } from '../../shared/utils';
@@ -28,7 +29,7 @@ import { UserProfileDialogComponent } from '../../users/users-profile/users-prof
 import { findDocuments } from '../../shared/mangoQueries';
 import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 
-Chart.register(BarController, CategoryScale, LinearScale, BarElement, Title, Legend, Tooltip);
+type ChartModule = typeof import('chart.js');
 
 @Component({
   templateUrl: './reports-detail.component.html',
@@ -43,7 +44,7 @@ export class ReportsDetailComponent implements OnInit, OnDestroy {
   planetCode = '';
   planetName = '';
   reports: any = {};
-  charts: Chart[] = [];
+  charts: ChartJs[] = [];
   users: any[] = [];
   onDestroy$ = new Subject<void>();
   filter: ReportDetailFilter = { app: '', members: [], startDate: new Date(0), endDate: new Date() };
@@ -89,6 +90,7 @@ export class ReportsDetailComponent implements OnInit, OnDestroy {
   week2Label = $localize`Week 2`;
   comparisonData1: any = {};
   comparisonData2: any = {};
+  private chartModule: ChartModule | null = null;
 
   constructor(
     private activityService: ReportsService,
@@ -156,6 +158,8 @@ export class ReportsDetailComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.onDestroy$.next();
     this.onDestroy$.complete();
+    this.charts.forEach((chart) => chart.destroy());
+    this.charts = [];
   }
 
   @HostListener('window:resize')
@@ -460,22 +464,26 @@ export class ReportsDetailComponent implements OnInit, OnDestroy {
     });
   }
 
-  setChart({ data, labels, chartName }) {
-    const updateChart = this.charts.find(chart => chart.canvas.id === chartName);
+  async setChart({ data, labels, chartName }) {
+    const { Chart } = await loadChart([
+      'BarController', 'DoughnutController', 'CategoryScale', 'LinearScale', 'BarElement', 'Title', 'Legend', 'Tooltip'
+    ]);
+    const updateChart = this.charts.find(newChart => newChart.canvas.id === chartName);
     if (updateChart) {
       updateChart.data = { ...data, labels };
-      updateChart.update();
+      updateChart.update('none');
       return;
     }
     const chartConfig: ChartConfiguration<'bar'> = {
       type: 'bar',
-      data,
+      data: { ...data, labels },
       options: {
         plugins: {
           title: { display: true, text: titleOfChartName(chartName), font: { size: 16 } },
           legend: { position: 'bottom' }
         },
         maintainAspectRatio: false,
+        animation: false,
         scales: {
           x: { type: 'category' },
           y: {

src/app/shared/chart-utils.ts

@@ -0,0 +1,64 @@
+import type { Chart } from 'chart.js';
+
+type ChartJsModule = typeof import('chart.js');
+type RegisterableKey = 'ArcElement' | 'BarController' | 'BarElement' | 'CategoryScale' | 'DoughnutController'
+  | 'Legend' | 'LinearScale' | 'Title' | 'Tooltip' | 'LineController' | 'PointElement' | 'LineElement';
+
+let chartJsPromise: Promise<ChartJsModule> | null = null;
+const registeredKeys = new Set<RegisterableKey>();
+
+function registerOnce(module: ChartJsModule, keys: RegisterableKey[]): void {
+  const pending = keys.filter((key) => {
+    if (registeredKeys.has(key)) {
+      return false;
+    }
+    if (!(key in module)) {
+      console.warn(`Chart.js registerable "${key}" is not available on the module export.`);
+      return false;
+    }
+    registeredKeys.add(key);
+    return true;
+  }).map((key) => module[key]);
+
+  if (pending.length) {
+    module.Chart.register(...pending);
+  }
+}
+
+export async function loadChart(keys: RegisterableKey[] = []): Promise<ChartJsModule> {
+  if (!chartJsPromise) {
+    chartJsPromise = import('chart.js').catch((error) => {
+      chartJsPromise = null;
+      throw error;
+    });
+  }
+
+  const module = await chartJsPromise;
+  if (keys.length) {
+    registerOnce(module, keys);
+  }
+  return module;
+}
+
+export type ChartJs = Chart;
+
+export function createChartCanvas(width = 300, height = 400): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D | null } {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  return { canvas, ctx: canvas.getContext('2d') };
+}
+
+export function renderNoDataPlaceholder(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, message = 'No data available'): string {
+  ctx.fillStyle = '#666666';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.font = '16px sans-serif';
+  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+  return canvas.toDataURL('image/png');
+}
+
+export const CHART_COLORS = [
+  '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
+  '#FF9F40', '#C9CBCF', '#8DD4F2', '#A8E6CF', '#DCE775'
+];

src/app/submissions/submissions.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Subject, of, forkJoin, throwError } from 'rxjs';
 import { catchError, map, switchMap, tap } from 'rxjs/operators';
-import type { Chart as ChartType, ChartConfiguration } from 'chart.js';
+import type { ChartConfiguration } from 'chart.js';
 import htmlToPdfmake from 'html-to-pdfmake';
 import { findDocuments } from '../shared/mangoQueries';
 import { CouchService } from '../shared/couchdb.service';
@@ -17,23 +17,7 @@ import { attachNamesToPlanets, codeToPlanetName, fullLabel } from '../manager-da
 import { TeamsService } from '../teams/teams.service';
 import { ChatService } from '../shared/chat.service';
 import { surveyAnalysisPrompt } from '../shared/ai-prompts.constants';
-
-type ChartJsModule = typeof import('chart.js');
-
-let chartJsPromise: Promise<ChartJsModule> | null = null;
-
-async function loadChart(): Promise<ChartJsModule> {
-  if (!chartJsPromise) {
-    chartJsPromise = import('chart.js').then((module) => {
-      const { Chart, BarController, DoughnutController, BarElement, ArcElement, LinearScale, CategoryScale } = module;
-      Chart.register(BarController, DoughnutController, BarElement, ArcElement, LinearScale, CategoryScale);
-
-      return module;
-    });
-  }
-
-  return chartJsPromise;
-}
+import { loadChart, createChartCanvas, renderNoDataPlaceholder, CHART_COLORS } from '../shared/chart-utils';
 
 pdfMake.vfs = pdfFonts.pdfMake.vfs;
 
@@ -571,24 +555,18 @@ export class SubmissionsService {
   }
 
   async generateChartImage(data: any): Promise<string> {
-    const { Chart } = await loadChart();
-    const canvas = document.createElement('canvas');
-    canvas.width = 300;
-    canvas.height = 400;
+    const { Chart } = await loadChart([
+      'BarController', 'DoughnutController', 'BarElement', 'ArcElement', 'LinearScale', 'CategoryScale', 'Legend', 'Tooltip', 'Title'
+    ]);
+    const { canvas, ctx } = createChartCanvas(300, 400);
     const isBar = data.chartType === 'bar';
     const isRatingScale = data.isRatingScale || false;
-    const ctx = canvas.getContext('2d');
 
     if (!ctx) { return ''; }
     const hasData = Array.isArray(data.data) && data.data.some((value: number) => Number(value) > 0);
 
     if (!hasData) {
-      ctx.fillStyle = '#666666';
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.font = '16px sans-serif';
-      ctx.fillText('No data available', canvas.width / 2, canvas.height / 2);
-      return canvas.toDataURL('image/png');
+      renderNoDataPlaceholder(ctx, canvas, 'No data available');
     }
 
     const maxCount = Math.max(...data.data);
@@ -599,9 +577,7 @@ export class SubmissionsService {
         datasets: [ {
           data: data.data,
           label: isRatingScale ? 'selection/choices(1-9)' : (isBar ? '% of responders/selection' : undefined),
-          backgroundColor: [
-            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF', '#8DD4F2', '#A8E6CF', '#DCE775'
-          ],
+          backgroundColor: CHART_COLORS
         } ]
       },
       options: {