working unified chart with different type chart

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts

@@ -393,6 +393,19 @@ export class EditnewdashComponent implements OnInit {
         }
       });
       
+      // Handle charts that use UnifiedChartComponent but have different names
+      // After serialization, these charts have component = "Unified Chart" but their name is still "Line Chart", "Pie Chart", etc.
+      const unifiedChartNames = [
+        'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart', 
+        'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
+        'Dynamic Chart', 'Financial Chart'
+      ];
+      
+      if (dashboard.component === "Unified Chart" && unifiedChartNames.includes(dashboard.name)) {
+        // Restore the actual UnifiedChartComponent reference
+        dashboard.component = UnifiedChartComponent;
+      }
+      
       // Map chart names to unified chart types
       const chartTypeMap = {
         'Radar Chart': 'radar',
@@ -460,6 +473,14 @@ export class EditnewdashComponent implements OnInit {
         // The name is already correct, no need to change it
         dashboard.component = "Unified Chart";
       }
+      // Handle charts that use UnifiedChartComponent but have different names
+      else if (dashboard.component === UnifiedChartComponent && dashboard.chartType) {
+        // Preserve the chartType property for UnifiedChartComponent
+        // The name should already be correct (e.g., "Line Chart", "Pie Chart", etc.)
+        // Instead of changing the component reference, we preserve it and only change the component name for serialization
+        // But we need to ensure the component name is set correctly for proper deserialization
+        dashboard.component = "Unified Chart";
+      }
       
       // Ensure compact filter configuration properties are preserved
       if (dashboard.name === 'Compact Filter') {
@@ -1055,7 +1076,14 @@ export class EditnewdashComponent implements OnInit {
         }
         
         // For unified chart, preserve chart configuration properties
-        if (item.name === 'Unified Chart') {
+        // Check if this item uses UnifiedChartComponent
+        const unifiedChartNames = [
+          'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart', 
+          'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
+          'Dynamic Chart', 'Financial Chart', 'Unified Chart'
+        ];
+        
+        if (unifiedChartNames.includes(item.name)) {
           xyz.chartType = this.gadgetsEditdata.chartType || 'bar';
         }
         
@@ -1348,6 +1376,18 @@ export class EditnewdashComponent implements OnInit {
           this.gadgetsEditdata.filterOptions = updatedItem.filterOptions;
         }
         
+        // For unified chart, preserve chart configuration properties
+        // Check if this item uses UnifiedChartComponent
+        const unifiedChartNames = [
+          'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart', 
+          'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
+          'Dynamic Chart', 'Financial Chart', 'Unified Chart'
+        ];
+        
+        if (unifiedChartNames.includes(item.name)) {
+          updatedItem.chartType = this.gadgetsEditdata.chartType || 'bar';
+        }
+        
         console.log('Updated item:', updatedItem);
         return updatedItem;
       }

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

@@ -35,7 +35,7 @@
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'bar'"
+        [type]="'bar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
@@ -48,7 +48,7 @@
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'line'"
+        [type]="'line'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
@@ -61,7 +61,7 @@
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'pie'"
+        [type]="'pie'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
@@ -74,7 +74,7 @@
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'doughnut'"
+        [type]="'doughnut'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
@@ -86,7 +86,7 @@
         [datasets]="bubbleChartData"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'bubble'"
+        [type]="'bubble'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
@@ -99,7 +99,7 @@
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'radar'"
+        [type]="'radar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
@@ -107,12 +107,15 @@
     
     <!-- Polar Area Chart -->
     <div *ngIf="chartType === 'polar'" class="chart-canvas-container">
+      <div style="position: absolute; top: 0; left: 0; background: magenta; color: white; padding: 5px; z-index: 1000; font-size: 12px;">
+        POLAR CHART RENDERED (chartType: {{chartType}})
+      </div>
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'polarArea'"
+        [type]="'polarArea'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
@@ -120,11 +123,14 @@
     
     <!-- Scatter Chart -->
     <div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
+      <div style="position: absolute; top: 0; left: 0; background: brown; color: white; padding: 5px; z-index: 1000; font-size: 12px;">
+        SCATTER CHART RENDERED (chartType: {{chartType}})
+      </div>
       <canvas baseChart
         [datasets]="chartData"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'scatter'"
+        [type]="'scatter'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
@@ -132,12 +138,15 @@
     
     <!-- Default/Unknown Chart Type -->
     <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
+      <div style="position: absolute; top: 0; left: 0; background: gray; color: white; padding: 5px; z-index: 1000; font-size: 12px;">
+        DEFAULT CHART RENDERED (chartType: {{chartType}})
+      </div>
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'bar'"
+        [type]="'bar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>

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

@@ -11,7 +11,7 @@ import { ChartConfiguration, ChartDataset } from 'chart.js';
   styleUrls: ['./unified-chart.component.scss']
 })
 export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() chartType: string;
+  @Input() chartType: string = 'bar';
   @Input() xAxis: string;
   @Input() yAxis: string | string[];
   @Input() table: string;
@@ -94,9 +94,10 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       this.filtersInitialized = true;
     }
     
-    // Initialize chart options with default structure
+    // Don't initialize chart options here since inputs might not be set yet
-    this.initializeChartOptions();
+    // Chart options will be initialized in ngOnChanges when inputs are available
-    this.fetchChartData();
+    // this.initializeChartOptions();
+    // this.fetchChartData();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -113,6 +114,11 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       drilldownLayers: this.drilldownLayers
     });
     
+    // Special logging for chartType changes
+    if (changes.chartType) {
+      console.log('Chart type changed from', changes.chartType.previousValue, 'to', changes.chartType.currentValue);
+    }
+    
     // Initialize filter values if they haven't been initialized yet
     if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
       this.initializeFilterValues();
@@ -366,6 +372,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   private initializeBarChartOptions(): void {
+    console.log('Initializing bar chart options');
     this.chartOptions = {
       responsive: true,
       maintainAspectRatio: false,
@@ -448,6 +455,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   private initializeLineChartOptions(): void {
+    console.log('Initializing line chart options');
     this.chartOptions = {
       responsive: true,
       maintainAspectRatio: false,
@@ -694,6 +702,14 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     
     console.log('Starting fetchChartData for chart type:', this.chartType);
     
+    // Log current state for debugging
+    console.log('Current component state:', {
+      chartType: this.chartType,
+      chartData: this.chartData,
+      chartLabels: this.chartLabels,
+      chartOptions: this.chartOptions
+    });
+    
     // If we're in drilldown mode, fetch the appropriate drilldown data
     if (this.currentDrilldownLevel > 0 && this.drilldownStack.length > 0) {
       console.log('Fetching drilldown data');
@@ -778,13 +794,23 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
         this.xAxis, 
         yAxisString, 
         this.connection, 
-        '', 
-        '', 
         filterParams
       ).subscribe(
         (data: any) => {
           console.log('Received chart data:', data);
           
+          // Log data structure for debugging
+          console.log('Data structure analysis:', {
+            hasChartLabels: !!(data && data.chartLabels),
+            hasChartData: !!(data && data.chartData),
+            hasLabels: !!(data && data.labels),
+            hasDatasets: !!(data && data.datasets),
+            chartLabelsLength: data && data.chartLabels ? data.chartLabels.length : 0,
+            chartDataLength: data && data.chartData ? data.chartData.length : 0,
+            labelsLength: data && data.labels ? data.labels.length : 0,
+            datasetsLength: data && data.datasets ? data.datasets.length : 0
+          });
+          
           if (data === null || data === undefined) {
             console.warn('Chart API returned null/undefined data.');
             this.noDataAvailable = true;
@@ -815,6 +841,14 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
             this.noDataAvailable = true;
           }
           
+          // Log final data state
+          console.log('Final data state:', {
+            chartLabels: this.chartLabels,
+            chartData: this.chartData,
+            bubbleChartData: this.bubbleChartData,
+            noDataAvailable: this.noDataAvailable
+          });
+          
           // Reset flags after fetching
           this.isFetchingData = false;
           this.isLoading = false;