kyd-shared-badge 0.3.88 → 0.3.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.88",
+  "version": "0.3.90",
   "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.0",
+    "@knowyourdeveloper/react-bubble-chart": "^1.0.2",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "ai": "5.0.47",

package/src/components/SkillsBubble.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import React, { useMemo, useRef, useState, useEffect } from 'react';
-import BubbleChart from '@knowyourdeveloper/react-bubble-chart';
+import { BubbleChart } from '@knowyourdeveloper/react-bubble-chart';
+import '@knowyourdeveloper/react-bubble-chart/style.css';
 
 type SkillsRadarPoint = {
   axis: string;
@@ -90,6 +91,20 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
     });
   }, [skillsRadarLimited]);
 
+  const bubbleData = useMemo(() => {
+    return bubbles.map((b) => ({
+      _id: String(b.label || ''),
+      value: Number(b.value || 0),
+      displayText: String(b.label || ''),
+      colorValue: Number(b.data?.experience || 0)
+    }));
+  }, [bubbles]);
+
+  const colorLegend = useMemo(() => {
+    const steps = [20, 35, 50, 65, 80, 90, 100];
+    return steps.map((s) => `hsl(210 ${s}% 45%)`);
+  }, []);
+
   const percentLegend = useMemo(() => {
     const total = bubbles.reduce((sum, b) => sum + (b.data?.ratio || 0), 0);
     return bubbles
@@ -103,24 +118,37 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
     <div className={'kyd-avoid-break'}>
       <div ref={containerRef} style={{ width: '100%', height: 340 }}>
         <BubbleChart
-          width={'100%'}
-          height={'100%'}
-          graph={{ zoom: 1 }}
-          showLegend={false}
-          data={bubbles}
+          data={bubbleData}
           legend={false}
-          valueFont={{ family: 'system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, sans-serif', size: 11, color: 'var(--text-main)' }}
-          labelFont={{ family: 'system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, sans-serif', size: 12, color: 'var(--text-main)' }}
-          bubbleClickFun={(_evt: unknown, b: { label?: string }) => {
+          tooltip
+          colorLegend={colorLegend}
+          fixedDomain={{ min: 0, max: 100 }}
+          onClick={(d) => {
             try {
               if (typeof window !== 'undefined') {
-                const anchor = `#appendix-skills-cat-${encodeURIComponent(String(b?.label || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''))}`;
+                const label = String(d.displayText || d._id || '');
+                const anchor = `#appendix-skills-cat-${encodeURIComponent(label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''))}`;
                 const url = `#appendix${anchor}`;
                 window.location.hash = url;
               }
             } catch {}
           }}
-          tooltip
+          tooltipFunc={(node, d) => {
+            try {
+              node.innerHTML = '';
+              const title = document.createElement('div');
+              title.style.fontWeight = '600';
+              title.textContent = String(d.displayText || d._id || '');
+              const body = document.createElement('div');
+              body.style.fontSize = '12px';
+              body.style.color = 'var(--text-secondary)';
+              const ratio = Number(d.value || 0);
+              const experience = Number(d.colorValue || 0);
+              body.textContent = `${ratio}% ratio • Experience ${experience}`;
+              node.appendChild(title);
+              node.appendChild(body);
+            } catch {}
+          }}
         />
       </div>
       <div className={'mt-3'}>