kyd-shared-badge 0.3.96 → 0.3.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.96",
+  "version": "0.3.98",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -21,7 +21,8 @@
     "@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.5",
+    "@knowyourdeveloper/react-bubble-chart": "^1.0.6",
+    "@knowyourdeveloper/react-gauge-component": "^1.1.30",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "ai": "5.0.47",

package/src/SharedBadgeDisplay.tsx

@@ -291,10 +291,11 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             <SkillsBubble skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} skillsByCategory={assessmentResult?.graph_insights?.skillsByCategory} skillsMeta={assessmentResult?.graph_insights?.skillsMeta} />
           </div>
         </Reveal>
-        <div className={'pt-6 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
+        
+      </div>
+      <div className={'pt-6 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
           Report Completed: {formatLocalDateTime(updatedAt)}
         </div>
-      </div>
     </div>
   );
 

package/src/components/GaugeCard.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import React from 'react';
+import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { hexToRgba, scoreToColorHex, scoreToCssVar, clampPercent } from '../colors';
+import { hexToRgba, scoreToColorHex, scoreToCssVar, clampPercent, red, yellow, green } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
@@ -28,13 +29,7 @@ export default function GaugeCard({
 }) {
   const pct = clampPercent(percent);
   const displayLabel = label || '';
-  // Use a fixed internal coordinate system and scale the SVG to container for responsiveness
-  const size = 280;
-  const strokeWidth = 32;
-  const radius = (size - strokeWidth) / 2;
-  const circumference = Math.PI * radius;
-  const progress = pct / 100;
-  const dash = circumference * progress;
+  // Keep card tinting consistent with score
   const progressColor = scoreToCssVar(pct);
   const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
 
@@ -69,11 +64,23 @@ export default function GaugeCard({
       </div>
       <div className="flex-grow flex flex-col items-center justify-center" style={{ minHeight: 200 }}>
         <div className="relative group" style={{ width: '100%', aspectRatio: '2 / 1', maxWidth: 360 }}>
-          <svg width={'100%'} height={'100%'} viewBox={`0 0 ${size} ${size/2}`} preserveAspectRatio={'xMidYMid meet'}>
-            <path d={`M ${strokeWidth/2} ${size/2} A ${radius} ${radius} 0 0 1 ${size-strokeWidth/2} ${size/2}`} stroke={'var(--icon-button-secondary)'} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" />
-            <path d={`M ${strokeWidth/2} ${size/2} A ${radius} ${radius} 0 0 1 ${size-strokeWidth/2} ${size/2}`} stroke={progressColor} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" strokeDasharray={`${dash},${circumference}`} />
-            <line x1={size/2} y1={size/2} x2={size/2 + radius * Math.cos(Math.PI * progress - Math.PI)} y2={size/2 + radius * Math.sin(Math.PI * progress - Math.PI)} stroke={'var(--text-main)'} strokeWidth="2" />
-          </svg>
+          <GaugeComponent
+            type="semicircle"
+            style={{ width: '100%', height: '100%' }}
+            value={pct}
+            minValue={0}
+            maxValue={100}
+            arc={{
+              padding: 0.02,
+              // Explicit subArcs ensure left->right map: red -> yellow -> green
+              subArcs: [
+                { limit: 33, color: red },
+                { limit: 66, color: yellow },
+                { limit: 100, color: green },
+              ],
+            }}
+            pointer={{ type: 'blob', elastic: true, animationDelay: 0 }}
+          />
           {(tooltipText || description) && (
             <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
               <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>

package/src/components/SkillsBubble.tsx

@@ -57,6 +57,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
   const legendRef = useRef<HTMLDivElement>(null);
   const [legendTooltip, setLegendTooltip] = useState<HoverTooltipState>(null);
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
+  const [legendHovered, setLegendHovered] = useState<boolean>(false);
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const id = window.setTimeout(() => {
@@ -114,9 +115,10 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
       _id: String(b.label || ''),
       value: Number(b.value || 0),
       displayText: String(b.label || ''),
-      colorValue: Number(b.data?.experience || 0)
+      colorValue: Number(b.data?.experience || 0),
+      selected: legendHovered && !!activeCategory && String(b.label || '') === String(activeCategory)
     }));
-  }, [bubbles]);
+  }, [bubbles, legendHovered, activeCategory]);
 
   const colorLegend = useMemo(() => {
     return [green5, green4, green3, green2, green1];
@@ -215,7 +217,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
         <div className="flex flex-col min-w-0 justify-center">
           <div className="flex items-center gap-2 min-w-0 text-lg text-[var(--text-main)]">
             <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: entry ? 'var(--icon-button-secondary)' : 'transparent', flexShrink: 0 }} />
-            <span className="shrink-0 opacity-70">{idx + (isLeft ? 1 : 6)}.</span>
+            <span className="shrink-0 opacity-70 ">{idx + (isLeft ? 1 : 6)}.</span>
             {entry && typeof entry !== 'string' ? (
               <span className="truncate" title={entry.label}>{entry.label}</span>
             ) : (
@@ -254,7 +256,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
         </div>
         {entry && typeof entry !== 'string' ? (
           <div className="flex flex-col items-end leading-tight h-full justify-between text-base">
-            {entry.years ? <span className="whitespace-nowrap text-[var(--text-main)]">{`${entry.years} Years`}</span> : <span className="opacity-0 whitespace-nowrap text-[var(--text-main)]">0 Years</span>}
+            {entry.years ? <span className="whitespace-nowrap text-[var(--text-secondary)]">{`${entry.years} Years`}</span> : <span className="opacity-0 whitespace-nowrap text-[var(--text-secondary)]">0 Years</span>}
             {entry.presence ? (
               <div className="flex items-center gap-1">
                 <span className="inline-block h-2 w-2 rounded-full text-sm" style={{ background: presenceColor(entry.presence) }} />
@@ -340,7 +342,13 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
         />
       </div>
       <div className='mt-8'>
-        <div ref={legendRef} className={'kyd-avoid-break'} style={{ position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
+        <div
+          ref={legendRef}
+          className={'kyd-avoid-break'}
+          style={{ position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}
+          onMouseEnter={() => setLegendHovered(true)}
+          onMouseLeave={() => setLegendHovered(false)}
+        >
           <div className="mb-2 text-xs font-medium" style={{ color: 'var(--text-main)' }}>
             
             {activeCategory ? (