manager: smoother submission chart library loading (fixes #9179) (#9158)

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

Author: dogi

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.39",
+  "version": "0.20.40",
   "myplanet": {
     "latest": "v0.33.52",
     "min": "v0.32.52"

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 { Chart, ChartConfiguration, BarController, DoughnutController, BarElement, ArcElement, LinearScale, CategoryScale } from 'chart.js';
+import type { Chart as ChartType, ChartConfiguration } from 'chart.js';
 import htmlToPdfmake from 'html-to-pdfmake';
 import { findDocuments } from '../shared/mangoQueries';
 import { CouchService } from '../shared/couchdb.service';
@@ -18,8 +18,24 @@ 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;
+}
+
 pdfMake.vfs = pdfFonts.pdfMake.vfs;
-Chart.register(BarController, DoughnutController, BarElement, ArcElement, LinearScale, CategoryScale);
 
 @Injectable({
   providedIn: 'root'
@@ -552,75 +568,91 @@ 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 isBar = data.chartType === 'bar';
     const isRatingScale = data.isRatingScale || false;
     const ctx = canvas.getContext('2d');
 
-    return new Promise<string>((resolve) => {
-      const maxCount = Math.max(...data.data);
-      const chartConfig: ChartConfiguration<'bar' | 'doughnut'> = {
-        type: isBar ? 'bar' : 'doughnut',
-        data: {
-          labels: data.labels,
-          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'
-            ],
-          } ]
-        },
-        options: {
-          responsive: false,
-          maintainAspectRatio: false,
-          indexAxis: 'x',
-          plugins: {
-            legend: {
-              display: true,
-              labels: {
-                boxWidth: isBar ? 0 : 50,
-                boxHeight: isBar ? 0 : 20
-              }
-            }
-          },
-          scales: isBar ? {
-            y: {
-              type: 'linear',
-              beginAtZero: true,
-              max: isRatingScale ? maxCount > 0 ? Math.ceil(maxCount / 10) * 10 : 10 : 100,
-              ticks: { precision: 0, stepSize: 2 }
-            }
-          } : {},
-          animation: {
-            onComplete: function() {
-              if (isBar && data.userCounts) {
-                this.getDatasetMeta(0).data.forEach((bar, index) => {
-                  const count = data.userCounts[index];
-                  if (count > 0) {
-                    ctx.fillText(`${count}`, bar.x - 2.5 , bar.y);
-                  }
-                });
-              } else {
-                const total = data.data.reduce((sum, val) => sum + val, 0);
-                this.getDatasetMeta(0).data.forEach((element, index) => {
-                  const count = data.data[index];
-                  const percentage = total > 0 ? ((count / total) * 100).toFixed(1) : '0';
-                  if (count > 0) {
-                    const pos = element.tooltipPosition();
-                    ctx.fillText(`${count}(${percentage}%)`, pos.x - 15, pos.y);
-                  }
-                });
-              }
-              resolve(this.toBase64Image());
+    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');
+    }
+
+    const maxCount = Math.max(...data.data);
+    const chartConfig: ChartConfiguration<'bar' | 'doughnut', number[], string> = {
+      type: isBar ? 'bar' : 'doughnut',
+      data: {
+        labels: data.labels,
+        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'
+          ],
+        } ]
+      },
+      options: {
+        responsive: false,
+        maintainAspectRatio: false,
+        indexAxis: 'x',
+        plugins: {
+          legend: {
+            display: true,
+            labels: {
+              boxWidth: isBar ? 0 : 50,
+              boxHeight: isBar ? 0 : 20
             }
           }
-        }
-      };
-      return new Chart(ctx, chartConfig);
-    });
+        },
+        scales: isBar ? {
+          y: {
+            type: 'linear',
+            beginAtZero: true,
+            max: isRatingScale ? maxCount > 0 ? Math.ceil(maxCount / 10) * 10 : 10 : 100,
+            ticks: { precision: 0, stepSize: 2 }
+          }
+        } : {},
+        animation: false
+      }
+    };
+
+    const chart = new Chart<'bar' | 'doughnut', number[], string>(ctx, chartConfig);
+    try {
+      chart.update();
+
+      if (isBar && data.userCounts) {
+        chart.getDatasetMeta(0).data.forEach((bar, index) => {
+          const count = data.userCounts[index];
+          if (count > 0) {
+            ctx.fillText(`${count}`, bar.x - 2.5 , bar.y);
+          }
+        });
+      } else {
+        const total = data.data.reduce((sum, val) => sum + val, 0);
+        chart.getDatasetMeta(0).data.forEach((element, index) => {
+          const count = data.data[index];
+          const percentage = total > 0 ? ((count / total) * 100).toFixed(1) : '0';
+          if (count > 0) {
+            const pos = element.tooltipPosition();
+            ctx.fillText(`${count}(${percentage}%)`, pos.x - 15, pos.y);
+          }
+        });
+      }
+
+      return chart.toBase64Image();
+    } finally {
+      chart.destroy();
+    }
   }
 
   calculateAverageRating(question, submissions): number {