fix(ui): fix manager chart bug on firefox

glasskube · Dec 20, 2024 · 4eb9153 · 4eb9153
1 parent 483b59e
commit 4eb9153
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 51 deletions.
diff --git a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
@@ -1,12 +1,14 @@
-<apx-chart
-  class="block h-60 max-w-full max-h-full overflow-hidden"
-  [series]="chartOptions.series!"
-  [labels]="chartOptions.labels!"
-  [colors]="chartOptions.colors!"
-  [chart]="chartOptions.chart!"
-  [stroke]="chartOptions.stroke!"
-  [tooltip]="chartOptions.tooltip!"
-  [xaxis]="chartOptions.xaxis!"
-  [legend]="chartOptions.legend!"
-  [title]="chartOptions.title!">
-</apx-chart>
+@if (chartOptions) {
+  <apx-chart
+    class="block h-60 max-w-full max-h-full overflow-hidden"
+    [series]="chartOptions.series!"
+    [labels]="chartOptions.labels!"
+    [colors]="chartOptions.colors!"
+    [chart]="chartOptions.chart!"
+    [stroke]="chartOptions.stroke!"
+    [tooltip]="chartOptions.tooltip!"
+    [xaxis]="chartOptions.xaxis!"
+    [legend]="chartOptions.legend!"
+    [title]="chartOptions.title!">
+  </apx-chart>
+}
diff --git a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.ts b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.ts
@@ -10,56 +10,56 @@ import {UserAccountWithRole} from '../../../types/user-account';
   imports: [NgApexchartsModule],
 })
 export class ChartTypeComponent implements OnDestroy {
-  public chartOptions: ApexOptions;
+  public chartOptions?: ApexOptions;
 
   private readonly deploymentTargets = inject(DeploymentTargetsService);
   private readonly deploymentTargets$ = this.deploymentTargets.list();
 
   private readonly destroyed$ = new Subject<void>();
 
   constructor() {
-    this.chartOptions = {
-      series: [],
-      labels: [],
-      colors: ['#0db7ed', '#326CE5', '#174c76'],
-      chart: {
-        height: 192,
-        type: 'donut',
-        sparkline: {
-          enabled: true,
+    this.deploymentTargets$.pipe(takeUntil(this.destroyed$)).subscribe((dts) => {
+      this.chartOptions = {
+        series: [],
+        labels: [],
+        colors: ['#0db7ed', '#326CE5', '#174c76'],
+        chart: {
+          height: 192,
+          type: 'donut',
+          sparkline: {
+            enabled: true,
+          },
         },
-      },
-      stroke: {
-        curve: 'smooth',
-      },
-      tooltip: {
-        enabled: false,
-      },
-      legend: {
-        show: true,
-        position: 'top',
-        fontFamily: 'Inter',
-        labels: {
-          colors: 'rgb(156, 163, 175)',
-          useSeriesColors: false,
+        stroke: {
+          curve: 'smooth',
         },
-      },
-      title: {
-        text: 'Deployment Managers',
-        align: 'center',
-        offsetY: 10,
-        style: {
-          color: 'rgb(156, 163, 175)',
-          fontFamily: 'Poppins',
+        tooltip: {
+          enabled: false,
         },
-      },
-      plotOptions: {
-        pie: {
-          customScale: 0.8,
+        legend: {
+          show: true,
+          position: 'top',
+          fontFamily: 'Inter',
+          labels: {
+            colors: 'rgb(156, 163, 175)',
+            useSeriesColors: false,
+          },
         },
-      },
-    };
-    this.deploymentTargets$.pipe(takeUntil(this.destroyed$)).subscribe((dts) => {
+        title: {
+          text: 'Deployment Managers',
+          align: 'center',
+          offsetY: 10,
+          style: {
+            color: 'rgb(156, 163, 175)',
+            fontFamily: 'Poppins',
+          },
+        },
+        plotOptions: {
+          pie: {
+            customScale: 0.8,
+          },
+        },
+      };
       const managers: {[key: string]: UserAccountWithRole} = {};
       const counts: {[key: string]: number} = {};
       for (const dt of dts) {
@@ -70,6 +70,7 @@ export class ChartTypeComponent implements OnDestroy {
           counts[dt.createdBy.id] = counts[dt.createdBy.id] + 1;
         }
       }
+
       this.chartOptions.labels = Object.values(managers).map((v) => v.name ?? v.email);
       this.chartOptions.series = Object.values(counts);
     });