refactored DreamCharts to consolidate chart rendering logic into reusable renderChart function; improved chart resize handling for better responsiveness and maintainability

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>

src/components/DreamCharts.tsx

@@ -16,6 +16,10 @@ export const EEGChart: React.FC<{ chipInput: ChipInput }> = ({chipInput}) => {
             {name: 'Delta', values: chipInput.eeg.delta}
         ];
 
+        // Function to render the chart
+        const renderChart = () => {
+            if (!chartRef.current) return;
+            
             // Clear previous chart
             d3.select(chartRef.current).selectAll('*').remove();
 
@@ -98,14 +102,15 @@ export const EEGChart: React.FC<{ chipInput: ChipInput }> = ({chipInput}) => {
                 .attr('dy', '0.32em')
                 .style('fill', 'var(--text)')
                 .text(d => d.name);
+        };
+
+        // Initial render
+        renderChart();
 
         // Handle resize
         const handleResize = () => {
             if (!chartRef.current) return;
-
+            renderChart();
-            // Re-render chart on resize
-            d3.select(chartRef.current).selectAll('*').remove();
-            // We would re-render the chart here, but for simplicity we'll just reload the component
         };
 
         window.addEventListener('resize', handleResize);
@@ -127,6 +132,10 @@ export const VitalsChart: React.FC<{ chipInput: ChipInput }> = ({chipInput}) =>
             {name: 'HRV', values: chipInput.hrv}
         ];
 
+        // Function to render the chart
+        const renderChart = () => {
+            if (!chartRef.current) return;
+            
             // Clear previous chart
             d3.select(chartRef.current).selectAll('*').remove();
 
@@ -211,14 +220,15 @@ export const VitalsChart: React.FC<{ chipInput: ChipInput }> = ({chipInput}) =>
                 .attr('dy', '0.32em')
                 .style('fill', 'var(--text)')
                 .text(d => d.name);
+        };
+
+        // Initial render
+        renderChart();
 
         // Handle resize
         const handleResize = () => {
             if (!chartRef.current) return;
-
+            renderChart();
-            // Re-render chart on resize
-            d3.select(chartRef.current).selectAll('*').remove();
-            // We would re-render the chart here, but for simplicity we'll just reload the component
         };
 
         window.addEventListener('resize', handleResize);
@@ -239,6 +249,10 @@ export const MovementChart: React.FC<{ chipInput: ChipInput }> = ({chipInput}) =
             {name: 'Bewegung', values: chipInput.bewegung.map(v => v * 100)} // Scale movement for better visibility
         ];
 
+        // Function to render the chart
+        const renderChart = () => {
+            if (!chartRef.current) return;
+            
             // Clear previous chart
             d3.select(chartRef.current).selectAll('*').remove();
 
@@ -317,14 +331,15 @@ export const MovementChart: React.FC<{ chipInput: ChipInput }> = ({chipInput}) =
                 .attr('dy', '0.32em')
                 .style('fill', 'var(--text)')
                 .text(d => d.name);
+        };
+
+        // Initial render
+        renderChart();
 
         // Handle resize
         const handleResize = () => {
             if (!chartRef.current) return;
-
+            renderChart();
-            // Re-render chart on resize
-            d3.select(chartRef.current).selectAll('*').remove();
-            // We would re-render the chart here, but for simplicity we'll just reload the component
         };
 
         window.addEventListener('resize', handleResize);