kyd-shared-badge 0.3.104 → 0.3.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.104",
+  "version": "0.3.106",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/GaugeCard.tsx

@@ -34,7 +34,7 @@ export default function GaugeCard({
   // Technical evidence tiers from backend thresholds
   const tickLabels = useMemo(() => ({
     type: 'outer' as const,
-    hideMinMax: false,
+    hideMinMax: true,
     defaultTickLineConfig: {
       length: 7,
       width: 1,
@@ -48,11 +48,9 @@ export default function GaugeCard({
       }
     },
     ticks: [
-      { value: 0, valueConfig: { formatTextValue: () => 'Very Low' } },
-      { value: 25, valueConfig: { formatTextValue: () => 'Low' } },
+      { value: 16, valueConfig: { formatTextValue: () => 'Low' } },
       { value: 50, valueConfig: { formatTextValue: () => 'Moderate' } },
-      { value: 75, valueConfig: { formatTextValue: () => 'High' } },
-      { value: 100, valueConfig: { formatTextValue: () => 'Very High' } },
+      { value: 83, valueConfig: { formatTextValue: () => 'High' } },
     ]
   }), []);
 

package/src/components/SkillsBubble.tsx

@@ -4,7 +4,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';
-import { ProviderIcon } from '../utils/provider';
+import { ProviderIcon, getProviderDisplayName } from '../utils/provider';
 import { providers } from '../types';
 
 type SkillsRadarPoint = {
@@ -21,7 +21,7 @@ type HoverTooltipState = {
   visible: boolean;
   x: number;
   y: number;
-  title: string;
+  title?: string;
   body?: React.ReactNode;
 } | null;
 
@@ -43,7 +43,7 @@ const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
         maxWidth: 320,
       }}
     >
-      <div className="font-medium" style={{ color: 'var(--text-main)' }}>{state.title}</div>
+      {state.title ? <div className="font-medium mb-1" style={{ color: 'var(--text-main)' }}>{state.title}</div> : null}
       {state.body ? (
         <div style={{ color: 'var(--text-secondary)' }}>{state.body}</div>
       ) : null}
@@ -80,7 +80,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
     const y = rect.bottom - hostRect.top + 6;
     return { x, y };
   };
-  const showLegendTooltipAt = (target: EventTarget | null, title: string, body?: React.ReactNode) => {
+  const showLegendTooltipAt = (target: EventTarget | null, title?: string, body?: React.ReactNode) => {
     if (!(target instanceof HTMLElement)) return;
     const { x, y } = computeTooltipPosition(target);
     setLegendTooltip({ visible: true, x, y, title, body });
@@ -213,7 +213,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
     return 'var(--icon-button-secondary)';
   };
 
-  const presenceLegendTooltip = (): { title: string; body: React.ReactNode } => {
+  const presenceLegendTooltip = (): { body: React.ReactNode } => {
     const Row = ({ color, label }: { color: string; label: string }) => (
       <div className="flex items-center gap-2">
         <span className="inline-block h-2 w-2 rounded-full" style={{ background: color }} />
@@ -221,7 +221,6 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
       </div>
     );
     return {
-      title: 'Presence types',
       body: (
         <div className="grid gap-1">
           <Row color={presenceColor('certified')} label="Certified — Verified by credential issuers." />
@@ -255,8 +254,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
       <div key={idx} className="flex items-stretch justify-between gap-3 min-w-0">
         <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>
+            {entry ? <span className="shrink-0 opacity-70 ">{idx + (isLeft ? 1 : 6)}.</span> : <span className="opacity-0 whitespace-nowrap">\u00A0</span>}
             {entry && typeof entry !== 'string' ? (
               <span className="truncate" title={entry.label}>
                 {entry.label}
@@ -292,12 +290,12 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
             {entry && typeof entry !== 'string' ? (
               <>
                 <span
-                  className="underline decoration-dotted underline-offset-2 cursor-help"
+                  className="cursor-help"
                   onMouseEnter={(e) => showLegendTooltipAt(e.currentTarget, 'Sources', 'The source where we observed this skill.')}
                   onMouseLeave={hideLegendTooltip}
                 >
-                  Sources
-                </span>:
+                  Sources:
+                </span>
                 {Array.isArray((entry as any).sources) && (entry as any).sources.length > 0 ? (
                   (() => {
                     const sourceProviders: string[] = ((entry as any).sources as string[]).map((src: string) => {
@@ -314,7 +312,20 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
                       providers.includes(provider.toLowerCase())
                     );
                     return filteredProviders.map((provider) => (
-                      <ProviderIcon key={provider} name={provider} />
+                      <span
+                        key={provider}
+                        onMouseEnter={(e) =>
+                          showLegendTooltipAt(
+                            e.currentTarget,
+                            undefined,
+                            getProviderDisplayName(provider)
+                          )
+                        }
+                        onMouseLeave={hideLegendTooltip}
+                        className="inline-flex items-center"
+                      >
+                        <ProviderIcon name={provider} />
+                      </span>
                     ));
                   })()
                 ) : null}
@@ -331,7 +342,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
             <div className="pb-1">
               {entry.years ? (
                 <span
-                  className="whitespace-nowrap text-[var(--text-secondary)] underline decoration-dotted underline-offset-2 cursor-help"
+                  className="whitespace-nowrap text-[var(--text-secondary)] cursor-help"
                   onMouseEnter={(e) => {
                     const copy = experienceLegendTooltip();
                     showLegendTooltipAt(e.currentTarget, copy.title, copy.body);
@@ -347,12 +358,12 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
             <div
               onMouseEnter={(e) => {
                 const copy = presenceLegendTooltip();
-                showLegendTooltipAt(e.currentTarget, copy.title, copy.body);
+                showLegendTooltipAt(e.currentTarget, undefined, copy.body);
               }}
               onMouseLeave={hideLegendTooltip}
               className="pt-1"
             >
-            {(() => {
+              {(() => {
               const types = Array.isArray(entry.presenceTypes) ? entry.presenceTypes : (entry.presence ? [String(entry.presence) as any] : []);
               const hasAny = types.length > 0;
               return hasAny ? (
@@ -366,6 +377,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
                 </div>
               ) : <span className="opacity-0 whitespace-nowrap">.</span>;
             })()}
+            
             </div>
           </div>
         ) : null}
@@ -448,7 +460,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
             
             {activeCategory ? (
               <span
-                className="ml-1 underline decoration-dotted underline-offset-2 cursor-help"
+                className="ml-1 cursor-help"
                 onMouseEnter={(e) =>
                   showLegendTooltipAt(
                     e.currentTarget,
@@ -462,13 +474,13 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
               </span>
             ) : null}
           </div>
-          <div className="grid grid-cols-2 gap-x-4 text-xs" style={{ color: 'var(--text-secondary)', minHeight: 250 }}>
-            <div className="grid gap-2">
+          <div className="grid grid-cols-2 gap-x-8 text-xs" style={{ color: 'var(--text-secondary)', minHeight: 250 }}>
+            <div className="grid gap-3">
               {leftColumnGrid.map((entry, idx) => (
                 columnComponent(entry, idx, true)
               ))}
             </div>
-            <div className="grid gap-2">
+            <div className="grid gap-3">
               {rightColumnGrid.map((entry, idx) => (
                 columnComponent(entry, idx, false)
               ))}