kyd-shared-badge 0.3.92 → 0.3.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.92",
+  "version": "0.3.93",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -21,7 +21,7 @@
     "@aws-sdk/lib-dynamodb": "^3.893.0",
     "@chatscope/chat-ui-kit-react": "^2.1.1",
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
-    "@knowyourdeveloper/react-bubble-chart": "^1.0.4",
+    "@knowyourdeveloper/react-bubble-chart": "^1.0.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "ai": "5.0.47",

package/src/components/SkillsBubble.tsx

@@ -3,6 +3,7 @@
 import React, { useMemo, useRef, useState, useEffect } from 'react';
 import { BubbleChart } from '@knowyourdeveloper/react-bubble-chart';
 import '@knowyourdeveloper/react-bubble-chart/style.css';
+import { green1, green2, green3, green4, green5 } from '../colors';
 
 type SkillsRadarPoint = {
   axis: string;
@@ -24,29 +25,37 @@ const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
   if (!state || !state.visible) return null;
   return (
     <div
+      className="rounded-md border shadow-sm px-3 py-2 text-xs"
       style={{
         position: 'absolute',
         left: state.x,
         top: state.y,
         pointerEvents: 'none',
         background: 'var(--content-card-background)',
-        border: '1px solid var(--icon-button-secondary)',
+        borderColor: 'var(--icon-button-secondary)',
         color: 'var(--text-main)',
-        padding: 10,
-        borderRadius: 6,
+        zIndex: 10,
         minWidth: 250,
         maxWidth: 320,
-        zIndex: 10,
       }}
     >
-      <div style={{ fontWeight: 600 }}>{state.title}</div>
+      <div className="font-medium" style={{ color: 'var(--text-main)' }}>{state.title}</div>
       {state.body ? (
-        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{state.body}</div>
+        <div style={{ color: 'var(--text-secondary)' }}>{state.body}</div>
       ) : null}
     </div>
   );
 };
 
+const pickGreenByExperience = (experience: number): string => {
+  const exp = Math.max(0, Math.min(100, Number(experience || 0)));
+  if (exp >= 80) return green1;
+  if (exp >= 60) return green2;
+  if (exp >= 40) return green3;
+  if (exp >= 20) return green4;
+  return green5;
+};
+
 export default function SkillsBubble({ skillsCategoryRadar, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; headless?: boolean }) {
   const hasRadar = !!(skillsCategoryRadar && skillsCategoryRadar.length > 0);
   const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 24);
@@ -78,9 +87,7 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
       const value = seriesAvg(d);
       const experience = Math.max(0, Math.min(100, Number(d.experience || 0)));
       const size = Math.max(2, Math.round((value / maxValue) * 100)); // 2..100
-      // map experience to saturation in HSL; keep hue constant for brand-neutral look
-      const saturation = Math.max(20, Math.min(100, experience));
-      const color = `hsl(210 ${saturation}% 45%)`;
+      const color = 'var(--content-card-background)';
       return {
         label: d.axis,
         value: size,
@@ -101,8 +108,7 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
   }, [bubbles]);
 
   const colorLegend = useMemo(() => {
-    const steps = [20, 35, 50, 65, 80, 90, 100];
-    return steps.map((s) => `hsl(210 ${s}% 45%)`);
+    return [green5, green4, green3, green2, green1];
   }, []);
 
   const percentLegend = useMemo(() => {
@@ -137,17 +143,54 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
           tooltipFunc={(node, d) => {
             try {
               node.innerHTML = '';
+              node.className = 'rounded-md border shadow-sm px-3 py-2 text-xs';
+              (node as HTMLElement).style.background = 'var(--content-card-background)';
+              (node as HTMLElement).style.borderColor = 'var(--icon-button-secondary)';
+              (node as HTMLElement).style.color = 'var(--text-main)';
+              (node as HTMLElement).style.pointerEvents = 'none';
+
+              const header = document.createElement('div');
+              header.className = 'mb-1';
               const title = document.createElement('div');
-              title.style.fontWeight = '600';
+              title.className = 'font-medium';
+              title.style.color = 'var(--text-main)';
               title.textContent = String(d.displayText || d._id || '');
-              const body = document.createElement('div');
-              body.style.fontSize = '12px';
-              body.style.color = 'var(--text-secondary)';
+              header.appendChild(title);
+
+              const content = document.createElement('div');
+              content.className = 'space-y-1';
               const ratio = Number(d.value || 0);
               const experience = Number(d.colorValue || 0);
-              body.textContent = `${ratio}% ratio • Experience ${experience}`;
-              node.appendChild(title);
-              node.appendChild(body);
+
+              const row1 = document.createElement('div');
+              row1.className = 'flex items-center justify-between gap-3';
+              const row1Left = document.createElement('span');
+              row1Left.style.color = 'var(--text-secondary)';
+              row1Left.textContent = 'Ratio';
+              const row1Right = document.createElement('span');
+              row1Right.className = 'font-medium';
+              row1Right.style.color = 'var(--text-main)';
+              row1Right.textContent = `${ratio}%`;
+              row1.appendChild(row1Left);
+              row1.appendChild(row1Right);
+
+              const row2 = document.createElement('div');
+              row2.className = 'flex items-center justify-between gap-3';
+              const row2Left = document.createElement('span');
+              row2Left.style.color = 'var(--text-secondary)';
+              row2Left.textContent = 'Experience';
+              const row2Right = document.createElement('span');
+              row2Right.className = 'font-medium';
+              row2Right.style.color = 'var(--text-main)';
+              row2Right.textContent = String(experience);
+              row2.appendChild(row2Left);
+              row2.appendChild(row2Right);
+
+              content.appendChild(row1);
+              content.appendChild(row2);
+
+              node.appendChild(header);
+              node.appendChild(content);
             } catch {}
           }}
         />
@@ -183,7 +226,7 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
                 }}
                 onMouseLeave={() => setLegendTooltip(null)}
               >
-                <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: `hsl(210 ${Math.max(20, Math.min(100, item.experience))}% 45%)`, flexShrink: 0 }} />
+                <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: pickGreenByExperience(item.experience), flexShrink: 0 }} />
                 <span className="truncate">{item.label}</span>
                 <span className="ml-auto opacity-80">{item.percent}%</span>
               </button>
@@ -193,12 +236,12 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
           {/* Legends */}
           <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
             <div className="flex items-center gap-2">
-              <span className="inline-block h-3 w-3 rounded-full" style={{ background: 'hsl(210 80% 45%)' }} />
+              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green1 }} />
               <span>Bubble size: relative ratio of observed/self-reported/certified</span>
             </div>
             <div className="flex items-center gap-2">
-              <span className="inline-block h-3 w-3 rounded-full" style={{ background: 'hsl(210 20% 45%)' }} />
-              <span>Color saturation: experience (darker = more experienced)</span>
+              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green5 }} />
+              <span>Color shade: experience (darker = more experienced)</span>
             </div>
           </div>
         </div>