working code with dynamic chart load

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

@@ -42,7 +42,8 @@
     </ul>
   </nav>
   <div style="width: 100%;">
-    <gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent;">
+    <!-- Remove the (drop) event binding since it's already handled by gridster's emptyCellDropCallback -->
+    <gridster [options]="options" style="background-color: transparent;">
       <gridster-item [item]="item" *ngFor="let item of dashboardArray">
         <!-- <ng-container *ngIf="addToDashboard && item.addToDashboard"> -->
         <button class="btn btn-icon btn-danger" style="margin-left: 10px; margin-top: 10px;" (click)="removeItem(item)" *ngIf="!fromRunner">

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

@@ -66,18 +66,18 @@ export class EditnewdashComponent implements OnInit {
       name: 'Common Filter',
       identifier: 'common_filter'
     },
-    {
+    // {
-      name: 'Radar Chart',
+    //   name: 'Radar Chart',
-      identifier: 'radar_chart'
+    //   identifier: 'radar_chart'
-    },
+    // },
-    {
+    // {
-      name: 'Doughnut Chart',
+    //   name: 'Doughnut Chart',
-      identifier: 'doughnut_chart'
+    //   identifier: 'doughnut_chart'
-    },
+    // },
-    {
+    // {
-      name: 'Line Chart',
+    //   name: 'Line Chart',
-      identifier: 'line_chart'
+    //   identifier: 'line_chart'
-    },
+    // },
     // {
     //   name: 'Bar Chart',
     //   identifier: 'bar_chart'
@@ -98,22 +98,22 @@ export class EditnewdashComponent implements OnInit {
     //   name: 'Scatter Chart',
     //   identifier: 'scatter_chart'
     // },
-    {
+    // {
-    name: 'Dynamic Chart',
+    // name: 'Dynamic Chart',
-    identifier: 'dynamic_chart'
+    // identifier: 'dynamic_chart'
-    },
+    // },
-    {
+    // {
-    name: 'Financial Chart',
+    // name: 'Financial Chart',
-    identifier: 'financial_chart'
+    // identifier: 'financial_chart'
-    },
+    // },
-    {
+    // {
-      name: 'To Do',
+    //   name: 'To Do',
-      identifier: 'to_do_chart'
+    //   identifier: 'to_do_chart'
-    },
+    // },
-    {
+    // {
-      name: 'Grid View',
+    //   name: 'Grid View',
-      identifier: 'grid_view'
+    //   identifier: 'grid_view'
-    },
+    // },
     {
       name: 'Compact Filter',
       identifier: 'compact_filter'
@@ -2110,6 +2110,9 @@ export class EditnewdashComponent implements OnInit {
               
               this.dashboardArray.push(chartItem);
               console.log(`Created dynamic chart:`, chartItem);
+              
+              // Update the dashboard collection and trigger refresh
+              this.itemChange();
             },
             error: (error) => {
               console.error(`Error loading configuration for ${chartTypeName}:`, error);
@@ -2180,13 +2183,8 @@ export class EditnewdashComponent implements OnInit {
     this.dashboardArray.push(chartItem);
     console.log('Created default chart:', chartItem);
     
-    // Update the dashboard collection
+    // Update the dashboard collection and trigger refresh
-    this.dashboardCollection.dashboard = this.dashboardArray.slice();
+    this.itemChange();
-    
-    // Force gridster to refresh
-    if (this.options && this.options.api) {
-      this.options.api.optionsChanged();
-    }
   }
 
   // Helper method to get display name for chart type - making it fully dynamic

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

@@ -33,7 +33,7 @@
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="chartType || 'bar'"
+        [type]="chartType || 'bar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
@@ -46,7 +46,7 @@
         [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

@@ -682,30 +682,30 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     switch (this.chartType) {
-      case 'bar':
+      // case 'bar':
-        this.initializeBarChartOptions();
+      //   this.initializeBarChartOptions();
-        break;
+      //   break;
-      case 'line':
+      // case 'line':
-        this.initializeLineChartOptions();
+      //   this.initializeLineChartOptions();
-        break;
+      //   break;
-      case 'pie':
+      // case 'pie':
-        this.initializePieChartOptions();
+      //   this.initializePieChartOptions();
-        break;
+      //   break;
-      case 'doughnut':
+      // case 'doughnut':
-        this.initializeDoughnutChartOptions();
+      //   this.initializeDoughnutChartOptions();
-        break;
+      //   break;
-      case 'bubble':
+      // case 'bubble':
-        this.initializeBubbleChartOptions();
+      //   this.initializeBubbleChartOptions();
-        break;
+      //   break;
-      case 'radar':
+      // case 'radar':
-        this.initializeRadarChartOptions();
+      //   this.initializeRadarChartOptions();
-        break;
+      //   break;
-      case 'polar':
+      // case 'polar':
-        this.initializePolarChartOptions();
+      //   this.initializePolarChartOptions();
-        break;
+      //   break;
-      case 'scatter':
+      // case 'scatter':
-        this.initializeScatterChartOptions();
+      //   this.initializeScatterChartOptions();
-        break;
+      //   break;
       default:
         this.initializeDefaultChartOptions();
     }