doughnut

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.html

@@ -284,13 +284,12 @@
   <div class="chart-wrapper">
     <div class="chart-content" [class.loading]="isLoading">
       <!-- Show no data message -->
-      <div class="no-data-message" *ngIf="noDataAvailable">
+      <div class="no-data-message" *ngIf="noDataAvailable && doughnutChartLabels.length === 0">
         <p>No chart data available</p>
       </div>
       
       <!-- Show chart when data is available -->
       <canvas baseChart 
-        *ngIf="!noDataAvailable && doughnutChartLabels.length > 0 && doughnutChartData.length > 0"
         [datasets]="doughnutChartData" 
         [labels]="doughnutChartLabels" 
         [type]="doughnutChartType"
@@ -306,7 +305,7 @@
     </div>
   </div>
   
-  <div class="chart-legend" *ngIf="!noDataAvailable && showlabel && doughnutChartLabels && doughnutChartLabels.length > 0">
+  <div class="chart-legend" *ngIf="showlabel && doughnutChartLabels && doughnutChartLabels.length > 0">
     <div class="legend-item" *ngFor="let label of doughnutChartLabels; let i = index">
       <span class="legend-color" [style.background-color]="getLegendColor(i)"></span>
       <span class="legend-label">{{ label }}</span>

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.ts

@@ -148,8 +148,11 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
     
     // Validate initial data
     this.validateChartData();
+    // Only fetch data if we have the required inputs, otherwise show default data
+    if (this.table && this.xAxis && this.yAxis) {
       this.fetchChartData();
     }
+  }
   
   /**
    * Validate and sanitize chart data
@@ -237,6 +240,12 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
       console.log('Chart configuration changed, fetching new data');
       this.fetchChartData();
     }
+    
+    // If we have the required inputs and haven't fetched data yet, fetch it
+    if ((xAxisChanged || yAxisChanged || tableChanged) && this.table && this.xAxis && this.yAxis && !this.isFetchingData) {
+      console.log('Required inputs available, fetching data');
+      this.fetchChartData();
+    }
   }
   
   ngAfterViewChecked() {
@@ -674,11 +683,31 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
             // Backend has already filtered the data, just display it
             this.noDataAvailable = data.chartLabels.length === 0;
             this.doughnutChartLabels = data.chartLabels;
+            
+            // Handle different data structures
+            let chartDataValues;
+            if (Array.isArray(data.chartData)) {
+              // If chartData is already an array of values
+              if (data.chartData.length > 0 && typeof data.chartData[0] !== 'object') {
+                chartDataValues = data.chartData;
+              } 
+              // If chartData is an array with one object containing the data
+              else if (data.chartData.length > 0 && data.chartData[0].data) {
+                chartDataValues = data.chartData[0].data;
+              }
+              // Default case
+              else {
+                chartDataValues = data.chartData;
+              }
+            } else {
+              chartDataValues = [data.chartData];
+            }
+            
             this.doughnutChartData = [
               {
-                data: data.chartData,
+                data: chartDataValues,
-                backgroundColor: this.chartColors.slice(0, data.chartData.length),
+                backgroundColor: this.chartColors.slice(0, chartDataValues.length),
-                hoverBackgroundColor: this.chartColors.slice(0, data.chartData.length)
+                hoverBackgroundColor: this.chartColors.slice(0, chartDataValues.length)
               }
             ];
             console.log('Updated doughnut chart with data:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
@@ -691,12 +720,21 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
           } else {
             console.warn('Received data does not have expected structure', data);
             this.noDataAvailable = true;
-            this.doughnutChartLabels = [];
+            // Keep default data instead of empty arrays
+            this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
             this.doughnutChartData = [
               {
-                data: [],
+                data: [30, 50, 20],
-                backgroundColor: [],
+                backgroundColor: [
-                hoverBackgroundColor: []
+                  '#FF6384',
+                  '#36A2EB',
+                  '#FFCE56'
+                ],
+                hoverBackgroundColor: [
+                  '#FF6384',
+                  '#36A2EB',
+                  '#FFCE56'
+                ]
               }
             ];
           }
@@ -707,12 +745,26 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
         (error) => {
           console.error('Error fetching doughnut chart data:', error);
           this.noDataAvailable = true;
-          this.doughnutChartLabels = [];
+          // Keep default data in case of error
-          this.doughnutChartData = [];
+          this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
+          this.doughnutChartData = [
+            {
+              data: [30, 50, 20],
+              backgroundColor: [
+                '#FF6384',
+                '#36A2EB',
+                '#FFCE56'
+              ],
+              hoverBackgroundColor: [
+                '#FF6384',
+                '#36A2EB',
+                '#FFCE56'
+              ]
+            }
+          ];
           // Reset flags after fetching
           this.isFetchingData = false;
           this.isLoading = false;
-          // Keep default data in case of error
         }
       );
     } else {
@@ -869,11 +921,31 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
           // Backend has already filtered the data, just display it
           this.noDataAvailable = data.chartLabels.length === 0;
           this.doughnutChartLabels = data.chartLabels;
+          
+          // Handle different data structures
+          let chartDataValues;
+          if (Array.isArray(data.chartData)) {
+            // If chartData is already an array of values
+            if (data.chartData.length > 0 && typeof data.chartData[0] !== 'object') {
+              chartDataValues = data.chartData;
+            } 
+            // If chartData is an array with one object containing the data
+            else if (data.chartData.length > 0 && data.chartData[0].data) {
+              chartDataValues = data.chartData[0].data;
+            }
+            // Default case
+            else {
+              chartDataValues = data.chartData;
+            }
+          } else {
+            chartDataValues = [data.chartData];
+          }
+          
           this.doughnutChartData = [
             {
-              data: data.chartData,
+              data: chartDataValues,
-              backgroundColor: this.chartColors.slice(0, data.chartData.length),
+              backgroundColor: this.chartColors.slice(0, chartDataValues.length),
-              hoverBackgroundColor: this.chartColors.slice(0, data.chartData.length)
+              hoverBackgroundColor: this.chartColors.slice(0, chartDataValues.length)
             }
           ];
           console.log('Updated doughnut chart with drilldown data:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
@@ -890,14 +962,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
         } else {
           console.warn('Drilldown received data does not have expected structure', data);
           this.noDataAvailable = true;
-          this.doughnutChartLabels = [];
+          // Keep current data instead of empty arrays
-          this.doughnutChartData = [
-            {
-              data: [],
-              backgroundColor: [],
-              hoverBackgroundColor: []
-            }
-          ];
           // Set loading state to false
           this.isLoading = false;
         }
@@ -905,11 +970,9 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
       (error) => {
         console.error('Error fetching drilldown data:', error);
         this.noDataAvailable = true;
-        this.doughnutChartLabels = [];
+        // Keep current data in case of error
-        this.doughnutChartData = [];
         // Set loading state to false
         this.isLoading = false;
-        // Keep current data in case of error
       }
     );