unified

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

@@ -1,6 +1,10 @@
 <div class="chart-container" *ngIf="!noDataAvailable && !isLoading">
   <!-- Dynamic template container -->
   <div class="dynamic-template-container" *ngIf="dynamicTemplate" [innerHTML]="dynamicTemplate"></div>
+  <!-- Debug: Show when dynamic template is loaded -->
+  <div *ngIf="dynamicTemplate" style="color: red; font-weight: bold; margin: 10px;">
+    DEBUG: Dynamic template loaded - check browser DevTools Elements tab to see if canvas is in DOM
+  </div>
   
   <!-- Back button for drilldown navigation -->
   <div class="drilldown-back" *ngIf="currentDrilldownLevel > 0">
@@ -132,7 +136,7 @@
     </div> -->
 
     <!-- Default/Unknown Chart Type -->
-    <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
+    <div *ngIf="!dynamicTemplate && !['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(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

@@ -85,6 +85,19 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
   setDynamicTemplate(value: string) {
     console.log('Setting dynamic template:', value);
     this.dynamicTemplate = value;
+    // Trigger change detection to ensure the template is rendered
+    setTimeout(() => {
+      console.log('Dynamic template updated in DOM');
+      // 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'));
+      }
+    }, 100);
   }
 
   constructor(
@@ -371,6 +384,21 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  // 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;