updated ui of bandpower and candle

Author: Ritika Mishra

src/components/BandPowerGraph.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, {
   useEffect,
   useRef,
@@ -111,108 +112,103 @@ const Graph: React.FC<GraphProps> = ({
       const canvas = canvasRef.current;
       const container = containerRef.current;
       if (!canvas || !container) return;
-
+  
       if (currentBandPowerData.some(isNaN)) {
         console.error("NaN values detected in band power data");
         return;
       }
-
+  
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
-
+  
       // Responsive canvas sizing
       const containerWidth = container.clientWidth;
       const containerHeight = Math.min(containerWidth * 0.5, 400); // Limit max height
       canvas.width = containerWidth;
       canvas.height = containerHeight;
-
+  
       const width = canvas.width;
       const height = canvas.height;
-
+  
       ctx.clearRect(0, 0, width, height);
-
-      // Responsive bar sizing and margins
-      const leftMargin = width < 500 ? 50 : 70;
-
-      const rightMargin = 20;
-      const bottomMargin = width < 640 ? 40 : 50; // Smaller margin on mobile
+  
+      // inside drawGraph:
+      const topMargin = 30;             // space for any in-canvas labels
+      const leftMargin = width < 500 ? 60 : 80;
+      const bottomMargin = width < 640 ? 70 : 80;
+      const rightMargin = 60;
+  
+      // Draw axes
+      const axisColor = theme === "dark" ? "white" : "black";
+      ctx.beginPath();
+      ctx.moveTo(leftMargin, topMargin);
+      ctx.lineTo(leftMargin, height - bottomMargin);
+      ctx.lineTo(width - rightMargin, height - bottomMargin);
+      ctx.strokeStyle = axisColor;
+      ctx.stroke();
+  
       const barWidth = (width - leftMargin - rightMargin) / bandNames.length;
       const barSpacing = barWidth * 0.2; // Space between bars
-
+  
       let minPower = 0;
       let maxPower = 100;
-
       if (maxPower - minPower < 1) {
         maxPower = minPower + 1;
       }
-
-      const axisColor = theme === "dark" ? "white" : "black";
-
-      // Draw axes
-      ctx.beginPath();
-      ctx.moveTo(leftMargin, 10);
-      ctx.lineTo(leftMargin, height - bottomMargin);
-      ctx.lineTo(width - rightMargin, height - bottomMargin);
-      ctx.strokeStyle = axisColor;
-      ctx.stroke();
-
+  
       // Draw bars
-      // Draw bars and beta percentage
       currentBandPowerData.forEach((power, index) => {
         const x = leftMargin + index * barWidth;
         const normalizedHeight = Math.max(0, (power - minPower) / (maxPower - minPower));
-        const barHeight = Math.max(0, normalizedHeight * (height - bottomMargin - 10));
-
+        const barHeight = Math.max(0, normalizedHeight * (height - bottomMargin - topMargin));
+  
         const barX = x + barSpacing / 2;
         const barY = height - bottomMargin - barHeight;
         const actualBarWidth = barWidth - barSpacing * 1.5; // Make it thinner than before
-
+  
         ctx.fillStyle = bandColors[index];
         ctx.fillRect(barX, barY, actualBarWidth, barHeight);
-
-
       });
-
-
-      // Draw labels
+  
+      // Y-axis labels
       ctx.fillStyle = axisColor;
       const fontSize = width < 640 ? 10 : 12; // Smaller text on mobile
       ctx.font = `${fontSize}px Arial`;
-
-      // Y-axis labels (log scale)
       ctx.textAlign = "right";
       ctx.textBaseline = "middle";
-      const yLabelCount = Math.min(5, Math.floor(height / 50)); // Fewer labels on small screens
+      const yLabelCount = Math.min(5, Math.floor(height / 50));
       for (let i = 0; i <= yLabelCount; i++) {
         const value = minPower + (maxPower - minPower) * (i / yLabelCount);
-        const labelY = height - bottomMargin - (i / yLabelCount) * (height - bottomMargin - 10);
+        const labelY = height - bottomMargin - (i / yLabelCount) * (height - bottomMargin - topMargin);
         ctx.fillText(value.toFixed(1), leftMargin - 5, labelY);
       }
-
-      // X-axis labels
+  
+      // X-axis labels, centered under each actual bar
       ctx.textAlign = "center";
       ctx.textBaseline = "top";
       bandNames.forEach((band, index) => {
-        const labelX = leftMargin + index * barWidth + barWidth * 0.5;
+        const barX = leftMargin + index * barWidth + barSpacing / 2;
+        const barW = barWidth - barSpacing * 1.5;
+        const labelX = barX + barW / 2;
         ctx.fillText(band, labelX, height - bottomMargin + 5);
       });
-
-      // EEG Band Power – same as "Frequency (Hz)"
-      ctx.font = "16px Arial";
+  
+      // Title
+      ctx.font = "1.2em Arial";
       ctx.textAlign = "center";
       ctx.fillText("EEG Band Power", (width + leftMargin) / 2, height - 17);
-
-      // Power – same as "Magnitude"
+  
+      // Power (Y-axis name) inside canvas
       ctx.save();
       ctx.rotate(-Math.PI / 2);
-      ctx.font = "20px Arial";
+      ctx.font = "1.2em Arial";
       ctx.textAlign = "center";
       ctx.fillText("Power", -height / 2, 15);
       ctx.restore();
-
     },
     [theme, bandColors, bandNames]
   );
+  
 
   // Rest of the component remains the same (animateGraph, useEffect hooks)
   const animateGraph = useCallback(() => {