Merge pull request #4971 from OneCommunityGlobal/Sayali_Task21_Fix_Dashboard_Chart_Resize

SAYALI: fix dashboard chart resize and dark mode styling for skills profile page

Author: one-community

src/components/HGNSkillsDashboard/SkillsProfilePage/components/RadarChart.jsx

@@ -1,16 +1,16 @@
-import { Radar } from 'react-chartjs-2';
-import { useSelector } from 'react-redux';
 import {
   Chart as ChartJS,
-  RadialLinearScale,
-  PointElement,
-  LineElement,
   Filler,
-  Tooltip,
   Legend,
+  LineElement,
+  PointElement,
+  RadialLinearScale,
+  Tooltip,
 } from 'chart.js';
-import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import { Radar } from 'react-chartjs-2';
+import { useSelector } from 'react-redux';
 import styles from '../styles/RadarChart.module.css';
 
 ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);
@@ -225,35 +225,28 @@ function RadarChart({ profileData, compact = true }) {
     );
   }
 
-  const { general = {}, frontend = {}, backend = {} } = profileData?.skillInfo || {};
-
   const chartData = {
     labels: skillsData.map(skill => (compact ? skill.shortLabel || skill.label : skill.label)),
     datasets: [
       {
         label: 'Skills',
-        data: SKILL_MAPPINGS.map(skill => skill.value(general, frontend, backend) ?? 0),
-        backgroundColor: 'rgba(37, 99, 235, 0.16)',
-        borderColor: '#2563eb',
-        borderWidth: 2,
-        pointBackgroundColor: '#1d4ed8',
-        pointBorderColor: '#eff6ff',
-        pointHoverBackgroundColor: '#eff6ff',
-        pointHoverBorderColor: '#1d4ed8',
+        data: skillsData.map(skill => skill.score),
+        backgroundColor: compact ? 'rgba(133, 146, 226, 0.35)' : 'rgba(62, 160, 203, 0.2)',
+        borderColor: compact ? 'rgba(110, 125, 215, 0.9)' : 'rgba(62, 160, 203, 1)',
+        borderWidth: compact ? 2 : 3,
+        pointBackgroundColor: compact ? 'rgba(110, 125, 215, 0.95)' : 'rgba(62, 160, 203, 1)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: compact ? 'rgba(110,125,215,1)' : 'rgba(62,160,203,1)',
+        pointRadius: compact ? 4 : 6,
+        pointHoverRadius: compact ? 6 : 8,
+        pointBorderWidth: 1.5,
+        pointHoverBorderWidth: 2,
+        fill: true,
       },
     ],
   };
 
-  const customTooltipPlugin = {
-    id: 'customTooltip',
-    afterDraw: chart => {
-      const tooltip = chart.tooltip;
-      if (tooltip && tooltip.opacity === 0) {
-        return;
-      }
-    },
-  };
-
   const chartOptions = {
     responsive: true,
     maintainAspectRatio: true,
@@ -262,10 +255,18 @@ function RadarChart({ profileData, compact = true }) {
       r: {
         angleLines: {
           display: true,
-          color: compact ? 'rgba(0,0,0,0.08)' : 'rgba(0, 0, 0, 0.1)',
+          color: darkMode
+            ? 'rgba(255,255,255,0.15)'
+            : compact
+            ? 'rgba(0,0,0,0.08)'
+            : 'rgba(0,0,0,0.1)',
         },
         grid: {
-          color: compact ? 'rgba(0,0,0,0.08)' : 'rgba(0, 0, 0, 0.1)',
+          color: darkMode
+            ? 'rgba(255,255,255,0.15)'
+            : compact
+            ? 'rgba(0,0,0,0.08)'
+            : 'rgba(0,0,0,0.1)',
         },
         pointLabels: {
           font: {
@@ -279,7 +280,7 @@ function RadarChart({ profileData, compact = true }) {
             },
             weight: '500',
           },
-          color: compact ? '#555' : '#333',
+          color: darkMode ? '#ccc' : compact ? '#333' : '#222',
           padding: compact ? 10 : 15,
           callback: function(value, index) {
             // Truncate long labels on small screens
@@ -293,7 +294,11 @@ function RadarChart({ profileData, compact = true }) {
         suggestedMax: 10,
         ticks: {
           stepSize: 2,
-          display: false,
+          display: compact ? false : true,
+          color: '#666',
+          font: {
+            size: 10,
+          },
         },
       },
     },
@@ -332,9 +337,6 @@ function RadarChart({ profileData, compact = true }) {
           return tooltipItem.parsed.r > 0;
         },
       },
-      datalabels: {
-        display: false,
-      },
     },
     interaction: {
       intersect: false,

src/components/HGNSkillsDashboard/SkillsProfilePage/components/RightSection.jsx

@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
-import ProfileDetails from './ProfileDetails';
-import Skills from './Skills';
-import RadarChart from './RadarChart';
-import FrontendSkills from './FrontendSkills';
+import styles from '../styles/RightSection.module.css';
+import AdditionalInfo from './AdditionalInfo';
 import BackendSkills from './BackendSkills';
 import DeploymentSkills from './DeploymentSkills';
+import FrontendSkills from './FrontendSkills';
+import ProfileDetails from './ProfileDetails';
+import RadarChart from './RadarChart';
+import Skills from './Skills';
 import SoftwarePractices from './SoftwarePractices';
-import AdditionalInfo from './AdditionalInfo';
-import styles from '../styles/RightSection.module.css';
 
 /* function RightSection({ profileData }) { */
 function RightSection() {
@@ -25,7 +25,7 @@ function RightSection() {
   const renderContent = () => {
     switch (selectedSkill) {
       case 'Dashboard':
-        return <RadarChart profileData={profileData} />;
+        return <RadarChart key={selectedSkill} profileData={profileData} />;
       case 'Frontend':
         return <FrontendSkills profileData={profileData} />;
       case 'Backend':
@@ -35,7 +35,7 @@ function RightSection() {
       case 'Software Practices':
         return <SoftwarePractices profileData={profileData} />;
       default:
-        return <RadarChart profileData={profileData} />;
+        return <RadarChart key={selectedSkill} profileData={profileData} />;
     }
   };
 

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/LeftSection.module.css

@@ -1,12 +1,13 @@
-.leftSection h1 {
-  margin: 5px 0;
-  color: #111827;
-}
-
-.leftSection h3 {
-  margin: 0;
-  font-size: 20px;
-  color: #1f2933;
+.leftSection {
+  padding: 8px 8px 24px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background: linear-gradient(135deg, #fff 0%, #f1f5f9 100%);
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
 }
 
 .profilePic {
@@ -17,7 +18,18 @@
   margin-bottom: 15px;
 }
 
-@media (max-width: 1100px) {
+.leftSection h1 {
+  margin: 5px 0;
+  color: #333;
+}
+
+.leftSection h3 {
+  margin: 0;
+  font-size: 20px;
+  color: #666;
+}
+
+@media (width <= 768px) {
   .leftSection {
     width: 100%;
     padding: 16px 0 12px;
@@ -34,3 +46,8 @@
 :global(.dark-mode) .leftSection h3 {
   color: #ccc;
 }
+
+:global(.dark-mode) .leftSection {
+  background: linear-gradient(135deg, #2a2f3e 0%, #1e2330 100%);
+  border-color: #3a4a5a;
+}

src/components/HGNSkillsDashboard/SkillsProfilePage/styles/RadarChart.module.css

@@ -4,27 +4,22 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 10px 0;
-  margin: 0 auto;
-  max-width: 720px;
-  width: 100%;
-}
-
-.radarChart canvas {
-  width: 100% !important;
-  height: auto !important;
-  max-width: 720px;
-  max-height: 640px;
+  padding: 20px;
+  background: linear-gradient(145deg, #fff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
+  border: 1px solid rgb(62 160 203 / 10%);
+  min-height: 500px;
+  position: relative;
 }
 
-@media (max-width: 1100px) {
-  .radarChart {
-    padding: 12px 0;
-  }
-
-  .radarChart canvas {
-    max-height: 540px;
-  }
+.radarChart.compact {
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  min-height: auto;
+  align-items: stretch;
 }
 
 .chartTitle {
@@ -38,7 +33,7 @@
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 8px;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
 }
 
 .chartTitle p {
@@ -61,7 +56,7 @@
 .chartContainer canvas {
   width: 100% !important;
   height: 100% !important;
-  filter: drop-shadow(0 2px 8px rgba(62, 160, 203, 0.15));
+  filter: drop-shadow(0 2px 8px rgb(62 160 203 / 15%));
 }
 
 .chartLegend {
@@ -84,10 +79,10 @@
 .legendColor {
   width: 18px;
   height: 18px;
-  background: linear-gradient(135deg, rgba(62, 160, 203, 0.8) 0%, rgba(62, 160, 203, 0.6) 100%);
-  border: 2px solid rgba(62, 160, 203, 1);
+  background: linear-gradient(135deg, rgb(62 160 203 / 80%) 0%, rgb(62 160 203 / 60%) 100%);
+  border: 2px solid rgb(62 160 203 / 100%);
   border-radius: 50%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
 }
 
 /* Loading state */
@@ -99,7 +94,7 @@
 .loadingSpinner {
   width: 40px;
   height: 40px;
-  border: 4px solid rgba(62, 160, 203, 0.2);
+  border: 4px solid rgb(62 160 203 / 20%);
   border-left: 4px solid #3ea0cb;
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -128,22 +123,72 @@
 }
 
 /* Responsive breakpoints */
-@media (max-width: 768px) {
+@media (width <= 768px) {
+  .radarChart {
+    padding: 15px;
+    min-height: 450px;
+  }
+
+  .chartTitle h4 {
+    font-size: 20px;
+  }
+
+  .chartTitle p {
+    font-size: 13px;
+  }
+
+  .chartContainer {
+    max-width: clamp(280px, 58vw, 500px);
+  }
+
+  .legendItem {
+    font-size: 13px;
+  }
+}
+
+@media (width <= 480px) {
   .radarChart {
-    padding: 10px 0;
+    padding: 10px;
+    min-height: 400px;
+  }
+
+  .chartTitle h4 {
+    font-size: 18px;
+  }
+
+  .chartTitle p {
+    font-size: 12px;
+  }
+
+  .chartContainer {
+    max-width: clamp(240px, 78vw, 420px);
+  }
+
+  .chartLegend {
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 15px;
+  }
+
+  .legendItem {
+    font-size: 12px;
   }
 
-  .radarChart canvas {
-    max-height: 460px;
+  .legendColor {
+    width: 16px;
+    height: 16px;
   }
 }
 
-@media (max-width: 480px) {
-  .radarChart canvas {
-    max-height: 380px;
+/* High DPI displays */
+@media (resolution >= 192dpi) {
+  .chartContainer canvas {
+    image-rendering: crisp-edges;
   }
 }
 
-:global(.dark-mode) .radarChart canvas {
-  filter: invert(1) hue-rotate(180deg);
+:global(.dark-mode) .radarChart {
+  background: linear-gradient(145deg, #2a2f3e 0%, #1e2330 100%);
+  border-color: rgb(62 160 203 / 30%);
+  box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
 }