Optimize Chart.js bundle size in DataVisualization component

- Implement dynamic import for Chart.js and react-chartjs-2
- Use tree shaking by importing only necessary Chart.js components
- Register only required chart elements to reduce bundle size
- Remove unused chart styles and colors to further minimize payload

src/components/advanced/DataVisualization.js

@@ -5,8 +5,8 @@ function DataVisualization() {
 
   useEffect(() => {
     const loadChart = async () => {
-      const { Chart, registerables } = await import('chart.js');
-      Chart.register(...registerables);
+      const { Chart, BarController, CategoryScale, LinearScale, BarElement } = await import('chart.js');
+      Chart.register(BarController, CategoryScale, LinearScale, BarElement);
       const { Bar } = await import('react-chartjs-2');
       setChartComponent(() => Bar);
     };
@@ -19,22 +19,8 @@ function DataVisualization() {
     datasets: [{
       label: '# of Votes',
       data: [12, 19, 3, 5, 2, 3],
-      backgroundColor: [
-        'rgba(255, 99, 132, 0.2)',
-        'rgba(54, 162, 235, 0.2)',
-        'rgba(255, 206, 86, 0.2)',
-        'rgba(75, 192, 192, 0.2)',
-        'rgba(153, 102, 255, 0.2)',
-        'rgba(255, 159, 64, 0.2)'
-      ],
-      borderColor: [
-        'rgba(255, 99, 132, 1)',
-        'rgba(54, 162, 235, 1)',
-        'rgba(255, 206, 86, 1)',
-        'rgba(75, 192, 192, 1)',
-        'rgba(153, 102, 255, 1)',
-        'rgba(255, 159, 64, 1)'
-      ],
+      backgroundColor: 'rgba(75, 192, 192, 0.2)',
+      borderColor: 'rgba(75, 192, 192, 1)',
       borderWidth: 1
     }]
   };