chart

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.ts

@@ -127,6 +127,7 @@ export class ChartTypeFieldsComponent implements OnInit {
       return;
     }
 
+    console.log('Updating dynamic field:', this.selectedDynamicField);
     this.loadingState = ClrLoadingState.LOADING;
     this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
       next: (data) => {

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

@@ -489,6 +489,7 @@ export class EditnewdashComponent implements OnInit {
         'polar': 'Polar Area Chart',
         'bubble': 'Bubble Chart',
         'scatter': 'Scatter Chart'
+        // Removed hardcoded heatmap entry to make it fully dynamic
       };
       
       // If this is a unified chart, set the name back to the appropriate chart name
@@ -546,8 +547,10 @@ export class EditnewdashComponent implements OnInit {
   }
 
   onDrop(ev) {
+    console.log("on drop event ", ev);
     const componentType = ev.dataTransfer.getData("widgetIdentifier");
     // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
+    console.log("on drop ", componentType);
     let maxChartId = 0;
     if (this.dashboardArray && this.dashboardArray.length > 0) {
       const validChartIds = this.dashboardArray
@@ -561,143 +564,26 @@ export class EditnewdashComponent implements OnInit {
     switch (componentType) {
       // Handle all chart types by converting them to unified charts
       case "radar_chart":
-        return this.dashboardArray.push({
+        // Use dynamic chart creation for all chart types
-          cols: 5,
+        return this.createDynamicChart('radar', maxChartId);
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Radar Chart",
-          chartType: 'radar',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "line_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('line', maxChartId);
-          cols: 5,
-          rows: 7,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Line Chart",
-          chartType: 'line',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "doughnut_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('doughnut', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Doughnut Chart",
-          chartType: 'doughnut',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "bar_chart":
-        // Use dynamic chart creation for bar charts
         return this.createDynamicChart('bar', maxChartId);
       case "pie_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('pie', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Pie Chart",
-          chartType: 'pie',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "polar_area_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('polar', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Polar Area Chart",
-          chartType: 'polar',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "bubble_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('bubble', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Bubble Chart",
-          chartType: 'bubble',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "scatter_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('scatter', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Scatter Chart",
-          chartType: 'scatter',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "dynamic_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('line', maxChartId); // Default to line for dynamic chart
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Dynamic Chart",
-          chartType: 'line', // Default to line for dynamic chart
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "financial_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('line', maxChartId); // Default to line for financial chart
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Financial Chart",
-          chartType: 'line', // Default to line for financial chart
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "to_do_chart":
         return this.dashboardArray.push({
           cols: 5,
@@ -744,42 +630,16 @@ export class EditnewdashComponent implements OnInit {
           name: "Grid View"
         });
       case "unified_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('bar', maxChartId); // Default to bar for unified chart
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Unified Chart",
-          // Add default configuration for unified chart
-          chartType: 'bar',
-          xAxis: '',
-          yAxis: '',
-          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';
+        console.log('Creating dynamic chart of type:', chartTypeName);
+        console.log('Display name for chart:', this.getChartDisplayName(chartTypeName));
         
-        // Create a unified chart with the dynamic chart type
+        // Use dynamic chart creation for all chart types
-        return this.dashboardArray.push({
+        return this.createDynamicChart(chartTypeName, maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: displayName,
-          chartType: chartTypeName,
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
     }
   }
   removeItem(item) {
@@ -1193,14 +1053,10 @@ export class EditnewdashComponent implements OnInit {
     }
     
     // For UnifiedChartComponent, pass chart properties with chartType
-    // Check for specific chart names that use UnifiedChartComponent
+    // Check if the component is UnifiedChartComponent dynamically
-    const unifiedChartNames = [
+    if (item.component === UnifiedChartComponent || 
-      'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart', 
+        (item.component && item.component.name === 'UnifiedChartComponent') ||
-      'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
+        item.name === 'Unified Chart') {
-      'Dynamic Chart', 'Financial Chart', 'Unified Chart'
-    ];
-    
-    if (unifiedChartNames.includes(item.name)) {
       const unifiedChartInputs = {
         chartType: item.chartType || 'bar',
         xAxis: item.xAxis,
@@ -2258,18 +2114,18 @@ export class EditnewdashComponent implements OnInit {
             error: (error) => {
               console.error(`Error loading configuration for ${chartTypeName}:`, error);
               // Fallback to default configuration
-              // this.createDefaultChart(chartTypeName, maxChartId);
+              this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
             }
           });
         } else {
           console.warn(`Chart type ${chartTypeName} not found, using default configuration`);
-          // this.createDefaultChart(chartTypeName, maxChartId);
+          this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
         }
       },
       error: (error) => {
         console.error('Error loading configuration for chart type:', error);
         // Fallback to default configuration
-        // this.createDefaultChart(chartType.name, chartType.displayName || chartType.name);
+        this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
       }
     });
   }
@@ -2278,7 +2134,7 @@ export class EditnewdashComponent implements OnInit {
   createDefaultChart(chartTypeName: string, chartDisplayName: string) {
     console.log(`Creating default chart for ${chartTypeName}`);
     
-    // Map chart type names to chart types
+    // Map chart type names to chart types - making it fully dynamic
     const chartTypeMap = {
       'bar': 'bar',
       'line': 'line',
@@ -2288,10 +2144,11 @@ export class EditnewdashComponent implements OnInit {
       'polar': 'polar',
       'bubble': 'bubble',
       'scatter': 'scatter'
+      // Removed hardcoded heatmap entry to make it fully dynamic
     };
     
-    // Get the chart type from the name
+    // Get the chart type from the name - default to bubble for unknown chart types
-    const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bar';
+    const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bubble';
     
     // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
     let maxChartId = 0;
@@ -2332,7 +2189,7 @@ export class EditnewdashComponent implements OnInit {
     }
   }
 
-  // Helper method to get display name for chart type
+  // Helper method to get display name for chart type - making it fully dynamic
   getChartDisplayName(chartTypeName: string): string {
     const displayNameMap = {
       'bar': 'Bar Chart',
@@ -2343,9 +2200,17 @@ export class EditnewdashComponent implements OnInit {
       'polar': 'Polar Area Chart',
       'bubble': 'Bubble Chart',
       'scatter': 'Scatter Chart'
+      // Removed hardcoded heatmap entry to make it fully dynamic
     };
     
-    return displayNameMap[chartTypeName.toLowerCase()] || chartTypeName;
+    // For unknown chart types, create a display name by capitalizing the first letter and adding ' Chart'
+    const displayName = displayNameMap[chartTypeName.toLowerCase()];
+    if (displayName) {
+      return displayName;
+    } else {
+      // Capitalize first letter and add ' Chart'
+      return chartTypeName.charAt(0).toUpperCase() + chartTypeName.slice(1) + ' Chart';
+    }
   }
 
 }