@@ -376,53 +376,41 @@ const FFT = forwardRef(
376376 const canvas = canvasRef . current ;
377377 const container = containerRef . current ;
378378 if ( ! canvas || ! container ) return ;
379-
379+
380380 const ctx = canvas . getContext ( "2d" ) ;
381381 if ( ! ctx ) return ;
382-
383- const containerWidth = container . clientWidth ;
384- const containerHeight = Math . min ( containerWidth * 0.6 , 500 ) ;
385- canvas . width = containerWidth ;
386- canvas . height = containerHeight ;
387-
388- const width = canvas . width ;
382+
383+ canvas . width = container . clientWidth ;
384+ canvas . height = container . clientHeight ;
385+
386+ const width = canvas . width - 20 ;
389387 const height = canvas . height ;
390-
391- ctx . clearRect ( 0 , 0 , width , height ) ;
392-
393- // Unified padding and spacing logic
394- const padding = Math . min ( width , height ) * 0.08 ;
395- const yAxisLabelOffset = 30 ;
396- const leftMargin = padding + yAxisLabelOffset + 20 ;
397- const rightMargin = padding ;
398- const topMargin = padding ;
399- const bottomMargin = padding + 40 ;
400-
401- // Axis color and font setup
388+
389+ const leftMargin = 90 ;
390+ const bottomMargin = 50 ;
391+ const topMargin = 30 ; // added top margin
392+
393+ ctx . clearRect ( 0 , 0 , canvas . width , height ) ;
394+
402395 const axisColor = theme === "dark" ? "white" : "black" ;
403- const fontSize = width < 640 ? 12 : width < 768 ? 14 : width < 1024 ? 16 : 18 ;
404- const labelFont = `${ fontSize } ;
405- const titleFont = `${ fontSize + 2 } ;
406-
407- ctx . strokeStyle = axisColor ;
408- ctx . fillStyle = axisColor ;
409- ctx . font = labelFont ;
410-
411- // Draw axes
396+
412397 ctx . beginPath ( ) ;
413- ctx . moveTo ( leftMargin , topMargin ) ;
398+ ctx . moveTo ( leftMargin , topMargin ) ; // use topMargin
414399 ctx . lineTo ( leftMargin , height - bottomMargin ) ;
415- ctx . lineTo ( width - rightMargin , height - bottomMargin ) ;
400+ ctx . lineTo ( width - 10 , height - bottomMargin ) ;
401+ ctx . strokeStyle = axisColor ;
416402 ctx . stroke ( ) ;
417-
403+
418404 const freqStep = currentSamplingRate / fftSize ;
419405 const displayPoints = Math . min ( Math . ceil ( maxFreq / freqStep ) , fftSize / 2 ) ;
420- const xScale = ( width - leftMargin - rightMargin ) / displayPoints ;
421-
422- let yMax = Math . max ( ...fftData . flat ( ) , 1 ) ;
423- const yScale = ( height - topMargin - bottomMargin ) / yMax ;
424-
425- // Plot lines
406+
407+ const xScale = ( width - leftMargin - 10 ) / displayPoints ;
408+
409+ let yMax = 1 ; // Default to prevent division by zero
410+ yMax = Math . max ( ...fftData . flat ( ) ) ;
411+
412+ const yScale = ( height - bottomMargin - topMargin ) / yMax ;
413+
426414 fftData . forEach ( ( channelData , index ) => {
427415 ctx . beginPath ( ) ;
428416 ctx . strokeStyle = channelColors [ index ] ;
@@ -433,46 +421,49 @@ const FFT = forwardRef(
433421 }
434422 ctx . stroke ( ) ;
435423 } ) ;
436-
437- // Y-axis labels
424+
425+ ctx . fillStyle = axisColor ;
426+ ctx . font = "12px Arial" ;
427+
438428 ctx . textAlign = "right" ;
439429 ctx . textBaseline = "middle" ;
440- const yTicks = 5 ;
441- for ( let i = 0 ; i <= yTicks ; i ++ ) {
442- const value = ( yMax * i ) / yTicks ;
443- const labelY = height - bottomMargin - ( i / yTicks ) * ( height - topMargin - bottomMargin ) ;
444- ctx . fillText ( value . toFixed ( 2 ) , leftMargin - 10 , labelY ) ;
430+ for ( let i = 0 ; i <= 5 ; i ++ ) {
431+ const labelY = height - bottomMargin - ( i / 5 ) * ( height - bottomMargin - topMargin ) ;
432+ ctx . fillText ( ( ( yMax * i ) / 5 ) . toFixed ( 3 ) , leftMargin - 10 , labelY ) ;
445433 }
446-
447- // X-axis labels (Frequency)
434+
448435 ctx . textAlign = "center" ;
449436 ctx . textBaseline = "top" ;
450- const minLabelSpacing = fontSize * 4 ;
451- const labelFreqStep = Math . ceil ( ( minLabelSpacing / xScale ) / 10 ) * 10 ;
452- const maxFreqToLabel = Math . floor ( Math . min ( maxFreq , currentSamplingRate / 2 ) ) ;
453-
454- for ( let freq = 0 ; freq <= maxFreqToLabel ; freq += labelFreqStep ) {
437+ const numLabels = Math . min ( maxFreq / 10 , Math . floor ( currentSamplingRate / 2 / 10 ) ) ;
438+ let lastLabelX = - Infinity ;
439+ const labelSpacing = 50 ; // Increased spacing
440+
441+ for ( let i = 0 ; i <= numLabels ; i ++ ) {
442+ const freq = i * 10 ;
455443 const labelX = leftMargin + ( freq / freqStep ) * xScale ;
456- ctx . fillText ( freq . toString ( ) , labelX , height - bottomMargin + 5 ) ;
444+
445+ // Only draw label if it is far enough from the last one
446+ if ( labelX - lastLabelX >= labelSpacing ) {
447+ ctx . fillText ( freq . toString ( ) , labelX , height - bottomMargin + 10 ) ; // Moved label further up
448+ lastLabelX = labelX ;
449+ }
457450 }
458-
459- // X-axis title
460- ctx . font = titleFont ;
451+
452+ ctx . font = "14px Arial" ;
461453 ctx . textAlign = "center" ;
462- ctx . textBaseline = "top" ;
463- ctx . fillText ( "Frequency (Hz)" , width / 2 , height - padding * 0.9 ) ;
464-
465- // Y-axis title
454+ ctx . textBaseline = "bottom" ;
455+ ctx . fillText ( "Frequency (Hz)" , ( width + leftMargin ) / 2 , height - 10 ) ;
456+
466457 ctx . save ( ) ;
467458 ctx . rotate ( - Math . PI / 2 ) ;
468- ctx . font = titleFont ;
459+ ctx . font = "14px Arial" ;
469460 ctx . textAlign = "center" ;
470- ctx . textBaseline = "bottom " ;
471- ctx . fillText ( "Magnitude" , - height / 2 , padding ) ;
461+ ctx . textBaseline = "top " ;
462+ ctx . fillText ( "Magnitude" , - height / 2 , topMargin - 5 ) ;
472463 ctx . restore ( ) ;
473464 } , [ fftData , theme , maxFreq , currentSamplingRate , fftSize , channelColors ] ) ;
474-
475-
465+
466+
476467 useEffect ( ( ) => {
477468 if ( fftData . some ( ( channel ) => channel . length > 0 ) ) {
478469 plotData ( ) ;
0 commit comments