kyd-shared-badge 0.3.87 → 0.3.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.87",
+  "version": "0.3.89",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -21,6 +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.1",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "ai": "5.0.47",

package/src/components/ReportHeader.tsx

@@ -73,29 +73,15 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
           </div>
         );
       })()}
-      <div className="flex flex-col md:flex-row items-center md:items-stretch gap-6">
-        {/* Left Half: Badge Image with robust centered overlay */}
-        <div className="w-full md:w-1/3 flex items-center justify-center self-stretch">
-          <div className="relative w-full max-w-xs select-none">
-            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={400} height={400} priority className='w-full h-auto pointer-events-none p-10'/>
-            {/* Centered overlay slightly lower on Y axis, responsive and readable */}
-            <div className="pointer-events-none absolute left-1/2 top-[66%] -translate-x-1/2 -translate-y-1/2">
-              <div className="font-extrabold text-black text-3xl " >
-                {Math.round(score || 0)}%
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Right Half: Title, Candidate, Details and Summary section */}
-        <div className="w-full md:w-2/3">
-          <div className={'space-y-4'}>
+      <div className="flex flex-col gap-6">
+        {/* Info section: Title, Candidate, Details and Summary */}
+        <div className="w-full">
+          <div className='space-y-2'>
             <span className='flex gap-2 w-full items-end text-start justify-start'>
               <h2 className={'text-xl font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate Report:</h2>
               <div className={'text-xl font-bold'} style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</div>
             </span>
-            <div className={'text-sm space-y-2'}>
-              
+            <div className={'text-sm'}>
               {Array.isArray(countries) && countries.length > 0 && (
                 (() => {
                   const countryNames = countries
@@ -145,6 +131,18 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
             )}
           </div>
         </div>
+
+        {/* Badge Image with robust centered overlay */}
+        <div className="w-full flex items-center justify-center self-stretch">
+          <div className="relative w-full max-w-xs select-none">
+            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={400} height={400} priority className='w-full h-auto pointer-events-none p-10'/>
+            <div className="pointer-events-none absolute left-1/2 top-[66%] -translate-x-1/2 -translate-y-1/2">
+              <div className="font-extrabold text-black text-3xl ">
+                {Math.round(score || 0)}%
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

package/src/components/SkillsBubble.tsx

@@ -1,13 +1,15 @@
-'use client';
+"use client";
 
 import React, { useMemo, useRef, useState, useEffect } from 'react';
-import { ResponsiveContainer, ScatterChart, Scatter, ZAxis, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
+import { BubbleChart } from '@knowyourdeveloper/react-bubble-chart';
+import '@knowyourdeveloper/react-bubble-chart/style.css';
 
 type SkillsRadarPoint = {
   axis: string;
   observed?: number;
   self_reported?: number;
   certified?: number;
+  experience?: number; // 0-100 saturation driver
 };
 
 type HoverTooltipState = {
@@ -47,8 +49,7 @@ const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
 
 export default function SkillsBubble({ skillsCategoryRadar, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; headless?: boolean }) {
   const hasRadar = !!(skillsCategoryRadar && skillsCategoryRadar.length > 0);
-  const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 8);
-
+  const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 24);
   const containerRef = useRef<HTMLDivElement>(null);
   const legendRef = useRef<HTMLDivElement>(null);
   const [legendTooltip, setLegendTooltip] = useState<HoverTooltipState>(null);
@@ -62,61 +63,98 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
     }
   }, []);
 
-  const combinedBubbleData = useMemo(() => {
-    return skillsRadarLimited.map((d) => {
+  // ratio drives size: average of observed/self_reported/certified
+  const bubbles = useMemo(() => {
+    const seriesAvg = (d: SkillsRadarPoint): number => {
       const vals = [Number(d.observed || 0), Number(d.self_reported || 0), Number(d.certified || 0)];
       const nonZero = vals.filter((v) => v > 0);
       const base = (nonZero.length > 0 ? nonZero : vals);
-      const avg = Math.round(base.reduce((a, b) => a + b, 0) / (base.length || 1));
-      return { label: d.axis, value: avg };
+      return Math.max(0, Math.min(100, Math.round(base.reduce((a, b) => a + b, 0) / (base.length || 1))));
+    };
+
+    const maxValue = Math.max(1, ...skillsRadarLimited.map(seriesAvg));
+
+    return skillsRadarLimited.map((d) => {
+      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%)`;
+      return {
+        label: d.axis,
+        value: size,
+        color,
+        tooltip: `${d.axis}\nRatio: ${value}\nExperience: ${experience}`,
+        data: { ratio: value, experience }
+      };
     });
   }, [skillsRadarLimited]);
 
-  const legendData = useMemo(() => {
-    const total = combinedBubbleData.reduce((sum, d) => sum + d.value, 0);
-    return combinedBubbleData
-      .slice()
-      .sort((a, b) => b.value - a.value)
-      .map((d) => ({ label: d.label, percent: total > 0 ? Math.round((d.value / total) * 100) : 0 }));
-  }, [combinedBubbleData]);
+  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
+      .map((b) => ({ label: b.label, percent: total > 0 ? Math.round(((b.data?.ratio || 0) / total) * 100) : 0, experience: b.data?.experience || 0 }))
+      .sort((a, b) => b.percent - a.percent);
+  }, [bubbles]);
 
   if (!hasRadar) return null;
 
   return (
     <div className={'kyd-avoid-break'}>
       <div ref={containerRef} style={{ width: '100%', height: 340 }}>
-        {(() => {
-          const data = combinedBubbleData.map((d, idx) => ({ x: (idx % 4) + 1, y: Math.floor(idx / 4) + 1, value: d.value, label: d.label }));
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const BubbleTooltip = ({ active, payload }: any) => {
-            if (!active || !payload || !payload.length) return null;
-            const p = payload[0]?.payload;
-            return (
-              <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
-                <div style={{ fontWeight: 600 }}>{p?.label}</div>
-                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Score: {p?.value}</div>
-              </div>
-            );
-          };
-          return (
-            <ResponsiveContainer>
-              <ScatterChart margin={{ top: 8, right: 8, bottom: 8, left: 8 }}>
-                <CartesianGrid strokeDasharray={'3 3'} stroke={'var(--icon-button-secondary)'} />
-                <XAxis type={'number'} dataKey={'x'} tick={false} axisLine={false} domain={[0, 5]} />
-                <YAxis type={'number'} dataKey={'y'} tick={false} axisLine={false} domain={[0, Math.ceil(data.length / 4) + 1]} />
-                <ZAxis dataKey={'value'} range={[80, 360]} />
-                <Tooltip content={<BubbleTooltip />} cursor={{ stroke: 'var(--icon-button-secondary)' }} />
-                <Scatter data={data} fill={'var(--bubble-foreground)'} />
-              </ScatterChart>
-            </ResponsiveContainer>
-          );
-        })()}
+        <BubbleChart
+          data={bubbleData}
+          legend={false}
+          tooltip
+          colorLegend={colorLegend}
+          fixedDomain={{ min: 0, max: 100 }}
+          onClick={(d) => {
+            try {
+              if (typeof window !== 'undefined') {
+                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 {}
+          }}
+          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>
-      {/* Legend */}
       <div className={'mt-3'}>
         <div ref={legendRef} className={'kyd-avoid-break'} style={{ position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1">
-            {legendData.map((item, idx) => (
+            {percentLegend.map((item, idx) => (
               <button
                 key={idx}
                 className="flex items-center gap-2 text-xs text-left hover:underline underline-offset-2"
@@ -135,7 +173,7 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
                   if (!rect) return;
                   const x = e.clientX - rect.left + 12;
                   const y = e.clientY - rect.top + 12;
-                  setLegendTooltip({ visible: true, x, y, title: item.label, body: `${item.label} represents ${item.percent}% of the Developer’s observable technical skills.` });
+                  setLegendTooltip({ visible: true, x, y, title: item.label, body: `${item.label} • ${item.percent}% of ratio • Experience ${item.experience}` });
                 }}
                 onMouseMove={(e) => {
                   if (!legendTooltip || !legendRef.current) return;
@@ -144,13 +182,24 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
                 }}
                 onMouseLeave={() => setLegendTooltip(null)}
               >
-                <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: 'var(--text-secondary)', flexShrink: 0 }} />
+                <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="truncate">{item.label}</span>
                 <span className="ml-auto opacity-80">{item.percent}%</span>
               </button>
             ))}
           </div>
           {!headless && <TooltipBox state={legendTooltip} />}
+          {/* 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>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>
+            </div>
+          </div>
         </div>
       </div>
     </div>

package/src/types.ts

@@ -378,6 +378,8 @@ export interface GraphInsightsPayload {
     observed?: number; // 0-100
     self_reported?: number; // 0-100
     certified?: number; // 0-100
+    // New: experience metric (0-100) for color saturation
+    experience?: number;
   }>;
   // New: Flattened list of business rule selections (for appendix)
   business_rules_all?: Array<{