Update editnewdash.component.ts

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-chart-loader.service.ts

@@ -0,0 +1,125 @@
+import { Injectable } from '@angular/core';
+import { Observable, forkJoin } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ApiRequestService } from 'src/app/services/api/api-request.service';
+import { ChartType, UiComponent, ComponentProperty, ChartTemplate, DynamicField } from './chart-config-manager.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DynamicChartLoaderService {
+  private chartTypesUrl = 'api/chart-types';
+  private uiComponentsUrl = 'api/ui-components';
+  private componentPropertiesUrl = 'api/component-properties';
+  private chartTemplatesUrl = 'api/chart-templates';
+  private dynamicFieldsUrl = 'api/dynamic-fields';
+
+  constructor(private apiRequest: ApiRequestService) { }
+
+  /**
+   * Load all chart configurations dynamically
+   * This method fetches all chart types and their associated components, templates, and fields
+   */
+  loadAllChartConfigurations(): Observable<any> {
+    console.log('Loading all chart configurations dynamically');
+
+    // Load all chart types first
+    return this.apiRequest.get(this.chartTypesUrl).pipe(
+      map(chartTypes => {
+        console.log('Loaded chart types:', chartTypes);
+        return chartTypes;
+      })
+    );
+  }
+
+  /**
+   * Load complete configuration for a specific chart type
+   * This includes UI components, templates, and dynamic fields
+   */
+  loadChartConfiguration(chartTypeId: number): Observable<{
+    chartType: ChartType,
+    uiComponents: UiComponent[],
+    templates: ChartTemplate[],
+    dynamicFields: DynamicField[]
+  }> {
+    console.log(`Loading complete configuration for chart type ${chartTypeId}`);
+
+    // Load all related data in parallel
+    return forkJoin({
+      chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`),
+      uiComponents: this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`),
+      templates: this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`),
+      dynamicFields: this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`)
+    }).pipe(
+      map(result => {
+        console.log(`Loaded complete configuration for chart type ${chartTypeId}:`, result);
+        return result;
+      })
+    );
+  }
+
+  /**
+   * Load chart template for a specific chart type
+   * This is used to render the chart UI dynamically
+   */
+  loadChartTemplate(chartTypeId: number): Observable<ChartTemplate[]> {
+    console.log(`Loading chart templates for chart type ${chartTypeId}`);
+    return this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`);
+  }
+
+  /**
+   * Load UI components for a specific chart type
+   * These define what configuration fields are needed for the chart
+   */
+  loadUiComponents(chartTypeId: number): Observable<UiComponent[]> {
+    console.log(`Loading UI components for chart type ${chartTypeId}`);
+    return this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`);
+  }
+
+  /**
+   * Load dynamic fields for a specific chart type
+   * These define additional dynamic fields that can be used in the chart
+   */
+  loadDynamicFields(chartTypeId: number): Observable<DynamicField[]> {
+    console.log(`Loading dynamic fields for chart type ${chartTypeId}`);
+    return this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`);
+  }
+
+  /**
+   * Get chart type by name
+   * This is useful for finding a chart type by its name rather than ID
+   */
+  // getChartTypeByName(name: string): Observable<ChartType | null> {
+  //   console.log(`Finding chart type by name: ${name}`);
+  //   return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`).pipe(
+  //     map((chartTypes: ChartType[]) => {
+  //       console.log('Available chart types:', chartTypes);
+  //       const chartType = chartTypes.find(ct => ct.name === name);
+  //       console.log(`Found chart type for name ${name}:`, chartType);
+  //       return chartType || null;
+  //     })
+  //   );
+  // }
+
+  getChartTypeByName(name: string): Observable<any> {
+    console.log(`Finding chart type by name: ${name}`);
+    return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`);
+  }
+
+
+
+  /**
+   * Load all active chart types
+   * This is used to populate the chart selection in the dashboard editor
+   */
+  loadActiveChartTypes(): Observable<ChartType[]> {
+    console.log('Loading active chart types');
+    return this.apiRequest.get(`${this.chartTypesUrl}`).pipe(
+      map((chartTypes: ChartType[]) => {
+        const activeChartTypes = chartTypes.filter(ct => ct.isActive);
+        console.log('Loaded active chart types:', activeChartTypes);
+        return activeChartTypes;
+      })
+    );
+  }
+}

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

@@ -17,6 +17,9 @@
   <div style="display: inline; float: right;">
     <!-- <button class="btn btn-primary">Build</button>
       <button class="btn btn-primary" (click)="onSchedule()">Schedule</button> -->
+    <button class="btn btn-success" (click)="testDynamicChartCreation()" style="margin-left: 10px;" *ngIf="!fromRunner">
+      <clr-icon shape="test"></clr-icon> Test Dynamic Chart
+    </button>
   </div>
 
 </div>

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

@@ -30,6 +30,8 @@ import { CompactFilterComponent } from '../common-filter';
 import { FilterService } from '../common-filter/filter.service';
 // Add the UnifiedChartComponent import
 import { UnifiedChartComponent } from '../gadgets/unified-chart';
+// Add the DynamicChartLoaderService import
+import { DynamicChartLoaderService } from '../chart-config/dynamic-chart-loader.service';
 
 function isNullArray(arr) {
   return !Array.isArray(arr) || arr.length === 0;
@@ -58,6 +60,7 @@ export class EditnewdashComponent implements OnInit {
   // Add availableKeys property for compact filter
   availableKeys: string[] = [];
 
+  // Initialize with default widgets and update dynamically
   WidgetsMock: WidgetModel[] = [
     {
       name: 'Common Filter',
@@ -75,26 +78,26 @@ export class EditnewdashComponent implements OnInit {
       name: 'Line Chart',
       identifier: 'line_chart'
     },
-    {
-      name: 'Bar Chart',
-      identifier: 'bar_chart'
-    },
-    {
-      name: 'Pie Chart',
-      identifier: 'pie_chart'
-    },
-    {
-      name: 'Polar Area Chart',
-      identifier: 'polar_area_chart'
-    },
-    {
-      name: 'Bubble Chart',
-      identifier: 'bubble_chart'
-    },
-    {
-      name: 'Scatter Chart',
-      identifier: 'scatter_chart'
-    },
+    // {
+    //   name: 'Bar Chart',
+    //   identifier: 'bar_chart'
+    // },
+    // {
+    //   name: 'Pie Chart',
+    //   identifier: 'pie_chart'
+    // },
+    // {
+    //   name: 'Polar Area Chart',
+    //   identifier: 'polar_area_chart'
+    // },
+    // {
+    //   name: 'Bubble Chart',
+    //   identifier: 'bubble_chart'
+    // },
+    // {
+    //   name: 'Scatter Chart',
+    //   identifier: 'scatter_chart'
+    // },
     {
     name: 'Dynamic Chart',
     identifier: 'dynamic_chart'
@@ -206,6 +209,9 @@ export class EditnewdashComponent implements OnInit {
   // Add drilldown column data property
   drilldownColumnData = []; // Add drilldown column data property
 
+  // Add chart types property for dynamic chart selection
+  chartTypes: any[] = [];
+
   constructor(private route: ActivatedRoute,
     private router: Router,
     private dashboardService: Dashboard3Service,
@@ -214,7 +220,8 @@ export class EditnewdashComponent implements OnInit {
     private datastoreService: DatastoreService,
     private alertService: AlertsService,
     private sureconnectService: SureconnectService,
-    private filterService: FilterService) { } // Add SureconnectService and FilterService to constructor
+    private filterService: FilterService,
+    private dynamicChartLoader: DynamicChartLoaderService) { } // Add SureconnectService, FilterService, and DynamicChartLoaderService to constructor
 
   // Add property to track if coming from dashboard runner
   fromRunner: boolean = false;
@@ -299,6 +306,9 @@ export class EditnewdashComponent implements OnInit {
       apiUrl: ['']
     });
     
+    // Load chart types for dynamic chart selection
+    this.loadChartTypesForSelection();
+    
     // Load sureconnect data first, then load dashboard data
     this.loadSureconnectData();
     
@@ -306,6 +316,37 @@ export class EditnewdashComponent implements OnInit {
     this.loadCommonFilterData();
   }
 
+  // Add method to load all chart types for dynamic selection
+  loadChartTypesForSelection() {
+  console.log('Loading chart types for selection');
+  this.dynamicChartLoader.loadActiveChartTypes().subscribe({
+    next: (chartTypes) => {
+      console.log('Loaded chart types for selection:', chartTypes);
+      this.chartTypes = chartTypes;
+
+      // Convert each chart type to a WidgetModel
+      const newWidgets = chartTypes.map(ct => ({
+        name: ct.displayName || ct.name,
+        // identifier: ct.name.toLowerCase().replace(/\s+/g, '_')
+        identifier: `${ct.name.toLowerCase().replace(/\s+/g, '_')}_chart`
+      }));
+
+      // Filter out duplicates by identifier
+      const existingIds = new Set(this.WidgetsMock.map(w => w.identifier));
+      const uniqueNewWidgets = newWidgets.filter(w => !existingIds.has(w.identifier));
+
+      // Append unique new widgets to WidgetsMock
+      this.WidgetsMock = [...this.WidgetsMock, ...uniqueNewWidgets];
+
+      console.log('Updated WidgetsMock:', this.WidgetsMock);
+    },
+    error: (error) => {
+      console.error('Error loading chart types for selection:', error);
+    }
+  });
+}
+
+  
   // Add method to load sureconnect data
   loadSureconnectData() {
     this.sureconnectService.getAll().subscribe((data: any[]) => {
@@ -565,20 +606,8 @@ export class EditnewdashComponent implements OnInit {
           connection: undefined
         });
       case "bar_chart":
-        return this.dashboardArray.push({
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Bar Chart",
-          chartType: 'bar',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
+        // Use dynamic chart creation for bar charts
+        return this.createDynamicChart('bar', maxChartId);
       case "pie_chart":
         return this.dashboardArray.push({
           cols: 5,
@@ -730,6 +759,27 @@ export class EditnewdashComponent implements OnInit {
           table: '',
           connection: undefined
         });
+      default:
+        // Handle any other chart types dynamically
+        // Extract chart type name from identifier (e.g., "heatmap_chart" -> "heatmap")
+        const chartTypeName = componentType.replace('_chart', '');
+        const displayName = chartTypeName.charAt(0).toUpperCase() + chartTypeName.slice(1) + ' Chart';
+        
+        // Create a unified chart with the dynamic chart type
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: displayName,
+          chartType: chartTypeName,
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
     }
   }
   removeItem(item) {
@@ -2045,4 +2095,257 @@ export class EditnewdashComponent implements OnInit {
     }
   }
 
+  // Add method to apply dynamic template to a chart
+  applyDynamicTemplate(chartItem: any, template: any) {
+    console.log('Applying dynamic template to chart:', chartItem, template);
+    
+    // Apply HTML template
+    if (template.templateHtml) {
+      // In a real implementation, you would dynamically render the HTML template
+      // For now, we'll just log it
+      console.log('HTML Template:', template.templateHtml);
+    }
+    
+    // Apply CSS styles
+    if (template.templateCss) {
+      // In a real implementation, you would dynamically apply the CSS styles
+      // For now, we'll just log it
+      console.log('CSS Template:', template.templateCss);
+    }
+    
+    // Return the chart item with template applied
+    return {
+      ...chartItem,
+      template: template
+    };
+  }
+  
+  // Add method to test dynamic chart creation
+  testDynamicChartCreation() {
+    console.log('Testing dynamic chart creation');
+    
+    // Show a success message to the user
+    alert('Dynamic chart test started. Check the browser console for detailed output.');
+    
+    // Load all chart types
+    this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
+      next: (chartTypes) => {
+        console.log('Loaded chart types:', chartTypes);
+        
+        // Find bar chart type
+        const barChartType = chartTypes.find((ct: any) => ct.name === 'bar');
+        if (barChartType) {
+          console.log('Found bar chart type:', barChartType);
+          
+          // Load configuration for bar chart
+          this.dynamicChartLoader.loadChartConfiguration(barChartType.id).subscribe({
+            next: (config) => {
+              console.log('Loaded bar chart configuration:', config);
+              
+              // Create a test chart item
+              const chartItem = {
+                cols: 5,
+                rows: 6,
+                x: 0,
+                y: 0,
+                chartid: 100,
+                component: UnifiedChartComponent,
+                name: 'Test Dynamic Bar Chart',
+                chartType: 'bar',
+                xAxis: '',
+                yAxis: '',
+                table: '',
+                connection: undefined,
+                // Add dynamic fields from configuration
+                dynamicFields: config.dynamicFields || []
+              };
+              
+              console.log('Created test chart item:', chartItem);
+              
+              // If we have templates, apply the default one
+              if (config.templates && config.templates.length > 0) {
+                const defaultTemplate = config.templates.find((t: any) => t.isDefault) || config.templates[0];
+                if (defaultTemplate) {
+                  console.log('Applying default template:', defaultTemplate);
+                  const chartWithTemplate = this.applyDynamicTemplate(chartItem, defaultTemplate);
+                  console.log('Chart with template:', chartWithTemplate);
+                  
+                  // Show success message
+                  alert('Dynamic chart test completed successfully! Check console for details.');
+                }
+              } else {
+                // Show success message even without templates
+                alert('Dynamic chart test completed successfully! No templates found. Check console for details.');
+              }
+            },
+            error: (error) => {
+              console.error('Error loading bar chart configuration:', error);
+              alert('Error loading bar chart configuration. Check console for details.');
+            }
+          });
+        } else {
+          console.warn('Bar chart type not found');
+          alert('Bar chart type not found in the database.');
+        }
+      },
+      error: (error) => {
+        console.error('Error loading chart types:', error);
+        alert('Error loading chart types. Check console for details.');
+      }
+    });
+  }
+
+  // Add method to load dynamic chart configuration
+  loadDynamicChartConfiguration(chartTypeId: number) {
+    console.log(`Loading dynamic chart configuration for chart type ${chartTypeId}`);
+    this.dynamicChartLoader.loadChartConfiguration(chartTypeId).subscribe({
+      next: (config) => {
+        console.log('Loaded dynamic chart configuration:', config);
+        // Here you would apply the configuration to the UI
+        // For example, populate form fields, set up templates, etc.
+      },
+      error: (error) => {
+        console.error('Error loading dynamic chart configuration:', error);
+      }
+    });
+  }
+
+  
+
+  // Add method to create a dynamic chart with configuration from database
+  createDynamicChart(chartTypeName: string, maxChartId: number) {
+    console.log(`Creating dynamic chart of type: ${chartTypeName}`);
+    
+    // First, get the chart type by name
+    this.dynamicChartLoader.getChartTypeByName(chartTypeName).subscribe({
+      next: (chartType) => {
+        if (chartType) {
+          console.log(`Found chart type:`, chartType);
+          
+          // Load the complete configuration for this chart type
+          this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
+            next: (config) => {
+              console.log(`Loaded configuration for ${chartTypeName}:`, config);
+              
+              // Create the chart item with dynamic configuration
+              const chartItem = {
+                cols: 5,
+                rows: 6,
+                x: 0,
+                y: 0,
+                chartid: maxChartId + 1,
+                component: UnifiedChartComponent,
+                name: chartType.displayName || chartTypeName,
+                chartType: chartType.name,
+                xAxis: '',
+                yAxis: '',
+                table: '',
+                connection: undefined,
+                // Add any dynamic fields from the configuration
+                dynamicFields: config.dynamicFields || []
+              };
+              
+              // Add UI components as configuration properties
+              if (config.uiComponents && config.uiComponents.length > 0) {
+                config.uiComponents.forEach(component => {
+                  chartItem[component.componentName] = '';
+                });
+              }
+              
+              this.dashboardArray.push(chartItem);
+              console.log(`Created dynamic chart:`, chartItem);
+            },
+            error: (error) => {
+              console.error(`Error loading configuration for ${chartTypeName}:`, error);
+              // Fallback to default configuration
+              // this.createDefaultChart(chartTypeName, maxChartId);
+            }
+          });
+        } else {
+          console.warn(`Chart type ${chartTypeName} not found, using default configuration`);
+          // this.createDefaultChart(chartTypeName, maxChartId);
+        }
+      },
+      error: (error) => {
+        console.error('Error loading configuration for chart type:', error);
+        // Fallback to default configuration
+        // this.createDefaultChart(chartType.name, chartType.displayName || chartType.name);
+      }
+    });
+  }
+  
+  // Fallback method to create default chart configuration
+  createDefaultChart(chartTypeName: string, chartDisplayName: string) {
+    console.log(`Creating default chart for ${chartTypeName}`);
+    
+    // Map chart type names to chart types
+    const chartTypeMap = {
+      'bar': 'bar',
+      'line': 'line',
+      'pie': 'pie',
+      'doughnut': 'doughnut',
+      'radar': 'radar',
+      'polar': 'polar',
+      'bubble': 'bubble',
+      'scatter': 'scatter'
+    };
+    
+    // Get the chart type from the name
+    const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bar';
+    
+    // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
+    let maxChartId = 0;
+    if (this.dashboardArray && this.dashboardArray.length > 0) {
+      const validChartIds = this.dashboardArray
+        .map(item => item.chartid)
+        .filter(chartid => typeof chartid === 'number' && !isNaN(chartid));
+      
+      if (validChartIds.length > 0) {
+        maxChartId = Math.max(...validChartIds);
+      }
+    }
+    
+    const chartItem = {
+      cols: 5,
+      rows: 6,
+      x: 0,
+      y: 0,
+      chartid: maxChartId + 1,
+      component: UnifiedChartComponent,
+      name: chartDisplayName,
+      chartType: chartType,
+      xAxis: '',
+      yAxis: '',
+      table: '',
+      connection: undefined
+    };
+    
+    this.dashboardArray.push(chartItem);
+    console.log('Created default chart:', chartItem);
+    
+    // Update the dashboard collection
+    this.dashboardCollection.dashboard = this.dashboardArray.slice();
+    
+    // Force gridster to refresh
+    if (this.options && this.options.api) {
+      this.options.api.optionsChanged();
+    }
+  }
+
+  // Helper method to get display name for chart type
+  getChartDisplayName(chartTypeName: string): string {
+    const displayNameMap = {
+      'bar': 'Bar Chart',
+      'line': 'Line Chart',
+      'pie': 'Pie Chart',
+      'doughnut': 'Doughnut Chart',
+      'radar': 'Radar Chart',
+      'polar': 'Polar Area Chart',
+      'bubble': 'Bubble Chart',
+      'scatter': 'Scatter Chart'
+    };
+    
+    return displayNameMap[chartTypeName.toLowerCase()] || chartTypeName;
+  }
+
 }

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

@@ -26,110 +26,21 @@
 
   <!-- Render different chart types based on chartType input -->
   <div class="chart-wrapper">
-    <!-- Bar Chart -->
-    <div *ngIf="chartType === 'bar'" class="chart-canvas-container">
+    <!-- Dynamic Chart Container - uses extracted dynamic options and styles but static template -->
+    <div *ngIf="dynamicTemplate || chartType" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'bar'"
+        [chartType]="chartType || 'bar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
     </div>
 
-    <!-- Line Chart -->
-    <div *ngIf="chartType === 'line'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'line'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Pie Chart -->
-    <div *ngIf="chartType === 'pie'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'pie'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Doughnut Chart -->
-    <div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'doughnut'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Bubble Chart -->
-    <div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="bubbleChartData"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'bubble'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Radar Chart -->
-    <div *ngIf="chartType === 'radar'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'radar'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Polar Area Chart -->
-    <div *ngIf="chartType === 'polar'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'polarArea'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Scatter Chart -->
-    <div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'scatter'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Default/Unknown Chart Type -->
-    <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
+    <!-- Fallback for when no chart type is specified -->
+    <div *ngIf="!dynamicTemplate && !chartType" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"

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

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { Dashboard3Service } from '../../../../../../services/builder/dashboard3.service';
 import { FilterService } from '../../common-filter/filter.service';
 import { Subscription } from 'rxjs';
 import { BaseChartDirective } from 'ng2-charts';
 import { ChartConfiguration, ChartDataset } from 'chart.js';
+import { DynamicChartLoaderService } from '../../chart-config/dynamic-chart-loader.service';
 
 @Component({
   selector: 'app-unified-chart',
@@ -75,9 +76,151 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
   private documentClickHandler: ((event: MouseEvent) => void) | null = null;
   private filtersInitialized: boolean = false;
 
+  // Dynamic template properties
+  dynamicTemplate: string = '';
+  dynamicStyles: string = '';
+  dynamicOptions: any = null;
+  
+  // Properties to hold extracted values from dynamic template
+  extractedChartType: string = '';
+  extractedDatasetsBinding: string = '';
+  extractedLabelsBinding: string = '';
+  extractedOptionsBinding: string = '';
+  extractedLegendBinding: string = '';
+  extractedChartClickBinding: string = '';
+  extractedChartHoverBinding: string = '';
+
+  // Add setter to log when dynamicTemplate changes
+  setDynamicTemplate(value: string) {
+    console.log('Setting dynamic template:', value);
+    this.dynamicTemplate = value;
+    
+    // Extract values from the dynamic template
+    this.extractTemplateValues(value);
+    
+    // Apply dynamic options if they were extracted
+    if (this.dynamicOptions) {
+      this.mergeDynamicOptions();
+    }
+    
+    // Apply dynamic styles if they were extracted
+    if (this.dynamicStyles) {
+      this.applyDynamicStyles();
+    }
+    
+    // Trigger change detection to ensure the template is rendered
+    setTimeout(() => {
+      console.log('Dynamic template updated in DOM');
+      // Check if the dynamic template container exists
+      const dynamicContainer = this.el.nativeElement.querySelector('.dynamic-template-container');
+      console.log('Dynamic template container:', dynamicContainer);
+      if (dynamicContainer) {
+        console.log('Dynamic container innerHTML:', dynamicContainer.innerHTML);
+      }
+      // Check if the canvas element exists in the DOM
+      const canvasElements = this.el.nativeElement.querySelectorAll('canvas');
+      console.log('Canvas elements found in DOM:', canvasElements.length);
+      if (canvasElements.length > 0) {
+        console.log('First canvas element:', canvasElements[0]);
+        // Check if it has the baseChart directive processed
+        const firstCanvas = canvasElements[0];
+        console.log('Canvas has baseChart directive processed:', firstCanvas.classList.contains('chartjs-render-monitor'));
+      } else {
+        console.log('No canvas elements found - checking if template was inserted but not processed');
+        // Check if there's HTML content in the dynamic container
+        if (dynamicContainer) {
+          const htmlContent = dynamicContainer.innerHTML;
+          console.log('HTML content in dynamic container:', htmlContent);
+          if (htmlContent && htmlContent.includes('canvas')) {
+            console.log('Canvas tag found in HTML but not processed by Angular');
+          }
+        }
+      }
+    }, 100);
+  }
+
+  // Extract values from dynamic template HTML
+  private extractTemplateValues(template: string): void {
+    console.log('Extracting values from template:', template);
+    
+    // Reset extracted values
+    this.extractedChartType = this.chartType || '';
+    this.extractedDatasetsBinding = 'chartData';
+    this.extractedLabelsBinding = 'chartLabels';
+    this.extractedOptionsBinding = 'chartOptions';
+    this.extractedLegendBinding = 'chartLegend';
+    this.extractedChartClickBinding = 'chartClicked($event)';
+    this.extractedChartHoverBinding = 'chartHovered($event)';
+    
+    if (!template) {
+      console.log('No template to extract values from');
+      return;
+    }
+    
+    // Parse the template to extract bindings
+    // Look for [chartType] binding
+    const chartTypeMatch = template.match(/\[chartType\]="([^"]+)"/);
+    if (chartTypeMatch && chartTypeMatch[1]) {
+      this.extractedChartType = chartTypeMatch[1];
+      console.log('Extracted chartType binding:', this.extractedChartType);
+    }
+    
+    // Look for [datasets] binding
+    const datasetsMatch = template.match(/\[datasets\]="([^"]+)"/);
+    if (datasetsMatch && datasetsMatch[1]) {
+      this.extractedDatasetsBinding = datasetsMatch[1];
+      console.log('Extracted datasets binding:', this.extractedDatasetsBinding);
+    }
+    
+    // Look for [labels] binding
+    const labelsMatch = template.match(/\[labels\]="([^"]+)"/);
+    if (labelsMatch && labelsMatch[1]) {
+      this.extractedLabelsBinding = labelsMatch[1];
+      console.log('Extracted labels binding:', this.extractedLabelsBinding);
+    }
+    
+    // Look for [options] binding
+    const optionsMatch = template.match(/\[options\]="([^"]+)"/);
+    if (optionsMatch && optionsMatch[1]) {
+      this.extractedOptionsBinding = optionsMatch[1];
+      console.log('Extracted options binding:', this.extractedOptionsBinding);
+    }
+    
+    // Look for [legend] binding
+    const legendMatch = template.match(/\[legend\]="([^"]+)"/);
+    if (legendMatch && legendMatch[1]) {
+      this.extractedLegendBinding = legendMatch[1];
+      console.log('Extracted legend binding:', this.extractedLegendBinding);
+    }
+    
+    // Look for (chartClick) binding
+    const chartClickMatch = template.match(/\(chartClick\)="([^"]+)"/);
+    if (chartClickMatch && chartClickMatch[1]) {
+      this.extractedChartClickBinding = chartClickMatch[1];
+      console.log('Extracted chartClick binding:', this.extractedChartClickBinding);
+    }
+    
+    // Look for (chartHover) binding
+    const chartHoverMatch = template.match(/\(chartHover\)="([^"]+)"/);
+    if (chartHoverMatch && chartHoverMatch[1]) {
+      this.extractedChartHoverBinding = chartHoverMatch[1];
+      console.log('Extracted chartHover binding:', this.extractedChartHoverBinding);
+    }
+    
+    // Extract CSS styles if present in the template
+    const styleMatch = template.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
+    if (styleMatch && styleMatch[1]) {
+      this.dynamicStyles = styleMatch[1];
+      console.log('Extracted CSS styles:', this.dynamicStyles);
+    }
+  }
+
   constructor(
     private dashboardService: Dashboard3Service,
-    private filterService: FilterService
+    private filterService: FilterService,
+    private dynamicChartLoader: DynamicChartLoaderService,
+    private renderer: Renderer2,
+    private el: ElementRef
   ) { }
 
   ngOnInit(): void {
@@ -110,12 +253,21 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
 
     // Initialize chart options with default structure
     this.initializeChartOptions();
+
+    // Load dynamic template and options for this chart type
+    this.loadDynamicChartConfig();
+
     this.fetchChartData();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     console.log('UnifiedChartComponent input changes:', changes);
 
+    // Log chartType changes specifically
+    if (changes.chartType) {
+      console.log('Chart type changed from', changes.chartType.previousValue, 'to', changes.chartType.currentValue);
+    }
+
     // Log all input values for debugging
     console.log('Current input values:', {
       chartType: this.chartType,
@@ -179,10 +331,15 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       });
     }
 
+    // Load dynamic template and options if chart type changed
+    if (chartTypeChanged) {
+      this.loadDynamicChartConfig();
+    }
+
     // Only fetch data if the actual chart configuration changed and we're not already fetching
     if (!this.isFetchingData && (chartTypeChanged || xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
+      drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
+      drilldownLayersChanged)) {
       console.log('Chart configuration changed, fetching new data');
       this.initializeChartOptions();
       this.fetchChartData();
@@ -217,6 +374,175 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  // Load dynamic chart configuration (template, styles, and options) for the current chart type
+  private loadDynamicChartConfig(): void {
+    if (!this.chartType) {
+      console.log('No chart type specified, skipping dynamic chart config loading');
+      return;
+    }
+
+    console.log(`Loading dynamic chart configuration for chart type: ${this.chartType}`);
+    console.log('Current dynamic template:', this.dynamicTemplate);
+
+    // Get chart type by name and load its configuration
+    console.log('Calling getChartTypeByName with:', this.chartType);
+    this.dynamicChartLoader.getChartTypeByName(this.chartType).subscribe({
+      next: (chartType) => {
+        console.log('Received chart type by name :', chartType);
+        if (chartType) {
+          console.log('Found chart type:', chartType);
+
+          // Load the complete configuration for this chart type
+          console.log('Loading chart configuration for chart type ID:', chartType.id);
+          this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
+            next: (config) => {
+              console.log('Received chart configuration:', config);
+              console.log('Loaded chart configuration:', config);
+
+              // Apply the first template if available (for CSS styles)
+              if (config.templates && config.templates.length > 0) {
+                const defaultTemplate = config.templates.find(t => t.isDefault) || config.templates[0];
+                if (defaultTemplate) {
+                  const templateHtml = defaultTemplate.templateHtml || '';
+                  console.log('Template HTML to be set:', templateHtml);
+                  this.setDynamicTemplate(templateHtml);
+                  this.dynamicStyles = defaultTemplate.templateCss || '';
+
+                  // Apply styles to the component
+                  this.applyDynamicStyles();
+
+                  console.log('Applied dynamic template and styles', {
+                    template: this.dynamicTemplate,
+                    styles: this.dynamicStyles
+                  });
+                }
+              } else {
+                console.log('No templates found for chart type:', this.chartType);
+              }
+
+              // Apply dynamic options if available
+              console.log('Checking for dynamic fields:', config.dynamicFields);
+              if (config.dynamicFields && config.dynamicFields.length > 0) {
+                // Find the field that contains chart options
+                const optionsField = config.dynamicFields.find(field =>
+                  field.fieldName === 'chartOptions' || field.fieldName.toLowerCase().includes('options'));
+
+                if (!optionsField) {
+                  console.log('No chartOptions field found in dynamic fields');
+                }
+
+                if (optionsField && optionsField.fieldOptions) {
+                  try {
+                    this.dynamicOptions = JSON.parse(optionsField.fieldOptions);
+                    console.log('Applied dynamic chart options:', this.dynamicOptions);
+
+                    // Merge dynamic options with current chart options
+                    this.mergeDynamicOptions();
+                  } catch (e) {
+                    console.error('Error parsing dynamic chart options:', e);
+                  }
+                }
+              } else {
+                console.log('No dynamic fields found for chart type:', this.chartType);
+              }
+            },
+            error: (error) => {
+              console.error('Error loading chart configuration:', error);
+            }
+          });
+        } else {
+          console.log(`Chart type ${this.chartType} not found in database`);
+          // Log available chart types for debugging
+          console.log('Available chart types in database:');
+          this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
+            next: (chartTypes) => {
+              console.log('All chart types:', chartTypes);
+            },
+            error: (error) => {
+              console.error('Error loading chart types:', error);
+            }
+          });
+        }
+      },
+      error: (error) => {
+        console.error('Error loading chart type:', error);
+      }
+    });
+  }
+
+  // Merge dynamic options with current chart options
+  private mergeDynamicOptions(): void {
+    if (this.dynamicOptions) {
+      console.log('Merging dynamic options with existing chart options:', {
+        existing: this.chartOptions,
+        dynamic: this.dynamicOptions
+      });
+      
+      // Deep merge dynamic options with existing chart options
+      this.chartOptions = this.deepMerge(this.chartOptions, this.dynamicOptions);
+      
+      console.log('Merged chart options:', this.chartOptions);
+
+      // If we have a chart instance, update it
+      if (this.chart) {
+        this.chart.options = this.chartOptions;
+        this.chart.render();
+      }
+    }
+  }
+  
+  // Helper method for deep merging objects
+  private deepMerge(target: any, source: any): any {
+    const result = { ...target };
+    
+    for (const key in source) {
+      if (source.hasOwnProperty(key)) {
+        if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
+          // Recursively merge objects
+          result[key] = this.deepMerge(result[key] || {}, source[key]);
+        } else {
+          // Override with source value
+          result[key] = source[key];
+        }
+      }
+    }
+    
+    return result;
+  }
+
+  // Apply dynamic styles to the component
+  private applyDynamicStyles(): void {
+    // Remove any previously applied dynamic styles
+    const existingStyles = this.el.nativeElement.querySelectorAll('.dynamic-chart-styles');
+    existingStyles.forEach((style: HTMLElement) => {
+      style.remove();
+    });
+
+    // Apply new styles if available
+    if (this.dynamicStyles) {
+      const styleElement = this.renderer.createElement('style');
+      this.renderer.setAttribute(styleElement, 'class', 'dynamic-chart-styles');
+      this.renderer.setProperty(styleElement, 'textContent', this.dynamicStyles);
+      this.renderer.appendChild(this.el.nativeElement, styleElement);
+      console.log('Applied dynamic styles to component');
+    }
+  }
+
+  // Initialize chart after dynamic template is rendered
+  private initializeDynamicChart(): void {
+    // This is a complex issue - Angular directives in dynamically inserted HTML
+    // don't get processed automatically. We would need to use a different approach
+    // such as creating components dynamically or using a different template mechanism.
+    console.log('Initializing dynamic chart - this is where we would handle chart initialization');
+    
+    // NOTE: The baseChart directive in dynamically inserted HTML via [innerHTML] 
+    // will not be processed by Angular. This is a limitation of Angular's change detection.
+    // Possible solutions:
+    // 1. Use Angular's dynamic component creation API
+    // 2. Modify the approach to use a different template mechanism
+    // 3. Keep the canvas element in the static template and only load options dynamically
+  }
+
   // Check if filters are available
   hasFilters(): boolean {
     const hasBaseFilters = this.baseFilters && this.baseFilters.length > 0;
@@ -349,6 +675,12 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       }
     };
 
+    // If we have dynamic options, use them instead of the default ones
+    if (this.dynamicOptions) {
+      this.mergeDynamicOptions();
+      return;
+    }
+
     switch (this.chartType) {
       case 'bar':
         this.initializeBarChartOptions();
@@ -591,7 +923,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
           mode: 'point',
           intersect: false,
           callbacks: {
-            label: function(context: any) {
+            label: function (context: any) {
               const point: any = context.raw;
               if (point && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
                 const yValue = parseFloat(point.y);
@@ -1094,8 +1426,8 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
 
     // If we have the expected bubble data format, return it as is
     if (data && data.length > 0 && data[0].data && data[0].data.length > 0 &&
-        typeof data[0].data[0] === 'object' && data[0].data[0].hasOwnProperty('x') && 
-        data[0].data[0].hasOwnProperty('y') && data[0].data[0].hasOwnProperty('r')) {
+      typeof data[0].data[0] === 'object' && data[0].data[0].hasOwnProperty('x') &&
+      data[0].data[0].hasOwnProperty('y') && data[0].data[0].hasOwnProperty('r')) {
       console.log('Data is already in bubble format, returning as is');
       return data;
     }
@@ -1277,17 +1609,17 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       const hue2rgb = (p: number, q: number, t: number) => {
         if (t < 0) t += 1;
         if (t > 1) t -= 1;
-        if (t < 1/6) return p + (q - p) * 6 * t;
-        if (t < 1/2) return q;
-        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
         return p;
       };
 
       const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
       const p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1/3);
+      r = hue2rgb(p, q, h + 1 / 3);
       g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1/3);
+      b = hue2rgb(p, q, h - 1 / 3);
     }
 
     return {
@@ -1412,9 +1744,9 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
         if (layerIndex < this.drilldownLayers.length) {
           drilldownConfig = this.drilldownLayers[layerIndex];
           hasDrilldownConfig = drilldownConfig.enabled &&
-                              !!drilldownConfig.apiUrl && 
-                              !!drilldownConfig.xAxis && 
-                              !!drilldownConfig.yAxis;
+            !!drilldownConfig.apiUrl &&
+            !!drilldownConfig.xAxis &&
+            !!drilldownConfig.yAxis;
         }
       }
 
@@ -1512,8 +1844,8 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
   // Check if there are active filters
   hasActiveFilters(): boolean {
     return (this.baseFilters && this.baseFilters.length > 0) ||
-           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
-           this.hasActiveLayerFilters();
+      (this.drilldownFilters && this.drilldownFilters.length > 0) ||
+      this.hasActiveLayerFilters();
   }
 
   // Check if there are active layer filters for current drilldown level
@@ -1521,8 +1853,8 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
       const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
       return layerIndex < this.drilldownLayers.length &&
-             this.drilldownLayers[layerIndex].filters && 
-             this.drilldownLayers[layerIndex].filters.length > 0;
+        this.drilldownLayers[layerIndex].filters &&
+        this.drilldownLayers[layerIndex].filters.length > 0;
     }
     return false;
   }
@@ -1532,7 +1864,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
       const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
       if (layerIndex < this.drilldownLayers.length &&
-          this.drilldownLayers[layerIndex].filters) {
+        this.drilldownLayers[layerIndex].filters) {
         return this.drilldownLayers[layerIndex].filters;
       }
     }