Update bubble-chart.component.ts

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

@@ -63,7 +63,20 @@ export class BubbleChartComponent implements OnInit, OnChanges {
       tooltip: {
         enabled: true,
         mode: 'point',
-        intersect: false
+        intersect: false,
+        callbacks: {
+          label: function(context: any) {
+            const point: any = context.raw;
+            if (point && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
+              const yValue = parseFloat(point.y);
+              const rValue = parseFloat(point.r);
+              if (!isNaN(yValue) && !isNaN(rValue)) {
+                return `Value: ${yValue.toFixed(2)}, Size: ${rValue.toFixed(1)}`;
+              }
+            }
+            return context.dataset.label || '';
+          }
+        }
       }
     },
     animation: {
@@ -73,8 +86,8 @@ export class BubbleChartComponent implements OnInit, OnChanges {
     // Enable individual point styling
     elements: {
       point: {
-        hoverRadius: 10,
+        hoverRadius: 12,
-        hoverBorderWidth: 2
+        hoverBorderWidth: 3
       }
     }
   };
@@ -514,6 +527,21 @@ export class BubbleChartComponent implements OnInit, OnChanges {
     };
   }
   
+  // Helper function to calculate logarithmic scaling
+  private logScale(value: number, min: number, max: number, minRadius: number, maxRadius: number): number {
+    if (min === max) return (minRadius + maxRadius) / 2;
+    
+    // Normalize value to 0-1 range
+    const normalized = (value - min) / (max - min);
+    
+    // Apply logarithmic scaling (base 10)
+    // Add 1 to avoid log(0) and scale to 1-10 range
+    const logValue = Math.log10(normalized * 9 + 1);
+    
+    // Scale to desired radius range
+    return minRadius + (logValue / Math.log10(10)) * (maxRadius - minRadius);
+  }
+  
   // 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
@@ -551,6 +579,46 @@ export class BubbleChartComponent implements OnInit, OnChanges {
       console.log('yValues length:', yValues.length);
       console.log('First few yValues:', yValues.slice(0, 5));
       
+      // Find min and max values for scaling
+      let minValue = Infinity;
+      let maxValue = -Infinity;
+      const validYValues = [];
+      
+      // First pass: collect valid values and find min/max
+      for (let i = 0; i < yValues.length; i++) {
+        let y;
+        if (typeof yValues[i] === 'string') {
+          y = parseFloat(yValues[i]);
+        } else {
+          y = yValues[i];
+        }
+        
+        if (!isNaN(y)) {
+          validYValues.push(y);
+          minValue = Math.min(minValue, y);
+          maxValue = Math.max(maxValue, y);
+        }
+      }
+      
+      console.log('Value range:', { minValue, maxValue });
+      
+      // Adjust radius range based on number of data points
+      // For fewer points, we can use larger bubbles; for more points, smaller bubbles to prevent overlap
+      const dataPointCount = Math.min(labels.length, yValues.length);
+      let minRadius = 3;
+      let maxRadius = 30;
+      
+      // Adjust radius range based on data point count
+      if (dataPointCount > 50) {
+        minRadius = 2;
+        maxRadius = 20;
+      } else if (dataPointCount > 20) {
+        minRadius = 3;
+        maxRadius = 25;
+      }
+      
+      console.log('Radius range:', { minRadius, maxRadius, dataPointCount });
+      
       // Create bubble points from labels (x) and data (y)
       const bubblePoints = [];
       const bubbleColors = [];
@@ -577,8 +645,10 @@ export class BubbleChartComponent implements OnInit, OnChanges {
           continue;
         }
         
-        // Calculate radius based on the y-value
+        // Calculate radius based on the y-value with logarithmic scaling
-        const r = Math.max(5, Math.min(30, Math.abs(y) / 10));
+        const r = this.logScale(y, minValue, maxValue, minRadius, maxRadius);
+        
+        console.log(`Value: ${y}, Radius: ${r}`);
         
         // For x-value, we'll use the index position since labels are strings
         const x = i;