Update bubble-chart.component.ts

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

@@ -69,6 +69,13 @@ export class BubbleChartComponent implements OnInit, OnChanges {
     animation: {
       duration: 800,
       easing: 'easeInOutQuart'
+    },
+    // Enable individual point styling
+    elements: {
+      point: {
+        hoverRadius: 10,
+        hoverBorderWidth: 2
+      }
     }
   };
 
@@ -454,6 +461,59 @@ export class BubbleChartComponent implements OnInit, OnChanges {
     this.fetchChartData();
   }
   
+  // Helper function to replace alpha value in RGBA color string
+  private replaceAlpha(color: string, newAlpha: number): string {
+    // Match rgba(r, g, b, a) format and replace alpha value
+    return color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, `rgba($1, $2, $3, ${newAlpha})`);
+  }
+  
+  // Function to generate different colors for bubbles
+  private generateBubbleColor(index: number, value: number, total: number): string {
+    // Generate colors based on index or value
+    // Using HSL color model for better color distribution
+    const hue = (index * 137.508) % 360; // Golden angle approximation for good distribution
+    const saturation = 80 + (index % 20); // High saturation for vibrant colors
+    const lightness = 40 + (index % 30); // Vary lightness for contrast
+    
+    // Convert HSL to RGB
+    const h = hue / 360;
+    const s = saturation / 100;
+    const l = lightness / 100;
+    
+    const rgb = this.hslToRgb(h, s, l);
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)`;
+  }
+  
+  // Helper function to convert HSL to RGB
+  private hslToRgb(h: number, s: number, l: number): { r: number, g: number, b: number } {
+    let r, g, b;
+    
+    if (s === 0) {
+      r = g = b = l; // achromatic
+    } else {
+      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;
+        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);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1/3);
+    }
+    
+    return {
+      r: Math.round(r * 255),
+      g: Math.round(g * 255),
+      b: Math.round(b * 255)
+    };
+  }
+  
   // Transform data to bubble chart format
   private transformToBubbleData(labels: any[], data: any[]): ChartDataset[] {
     // For bubble charts, we need to transform the data into bubble format
@@ -493,6 +553,7 @@ export class BubbleChartComponent implements OnInit, OnChanges {
       
       // Create bubble points from labels (x) and data (y)
       const bubblePoints = [];
+      const bubbleColors = [];
       const minLength = Math.min(labels.length, yValues.length);
       
       console.log('Processing data points:', { labels, yValues, minLength });
@@ -522,6 +583,12 @@ export class BubbleChartComponent implements OnInit, OnChanges {
         // For x-value, we'll use the index position since labels are strings
         const x = i;
         
+        // Generate a unique color for this bubble
+        const backgroundColor = this.generateBubbleColor(i, y, minLength);
+        
+        // Store the color for the dataset
+        bubbleColors.push(backgroundColor);
+        
         // Add the point
         const point = { 
           x, 
@@ -534,6 +601,7 @@ export class BubbleChartComponent implements OnInit, OnChanges {
       
       console.log('Generated bubble points:', bubblePoints);
       console.log('Generated bubble points count:', bubblePoints.length);
+      console.log('Generated bubble colors count:', bubbleColors.length);
       
       // If we have no valid points, return empty array
       if (bubblePoints.length === 0) {
@@ -546,11 +614,11 @@ export class BubbleChartComponent implements OnInit, OnChanges {
         {
           data: bubblePoints,
           label: label,
-          backgroundColor: 'rgba(255, 99, 132, 0.6)',
-          borderColor: 'rgba(255, 99, 132, 1)',
-          hoverBackgroundColor: 'rgba(255, 99, 132, 0.8)',
-          hoverBorderColor: 'rgba(255, 99, 132, 1)',
-          borderWidth: 1,
+          backgroundColor: bubbleColors,
+          borderColor: bubbleColors.map(color => this.replaceAlpha(color, 1)), // Slightly more opaque border
+          hoverBackgroundColor: bubbleColors.map(color => this.replaceAlpha(color, 0.9)),
+          hoverBorderColor: 'rgba(255, 255, 255, 1)',
+          borderWidth: 2,
           pointHoverRadius: 10,
         }
       ];