kyd-shared-badge 0.3.100 → 0.3.101

package/package.json

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

package/src/components/RoleOverviewCard.tsx

@@ -81,7 +81,8 @@ export default function RoleOverviewCard({
         <div className="relative" style={{ width: '100%', aspectRatio: '2 / 1', maxWidth: 360 }}>
           <GaugeComponent
             type="semicircle"
-            style={{ width: '100%', height: '100%' }}
+            style={{ width: 'calc(100% - 16px)', height: '100%', marginLeft: 8, marginRight: 8 }}
+            marginInPercent={{ top: 0.08, bottom: 0.0, left: 0.1, right: 0.1 }}
             value={pct}
             minValue={0}
             maxValue={100}

package/src/components/SkillsBubble.tsx

@@ -13,6 +13,8 @@ type SkillsRadarPoint = {
   self_reported?: number;
   certified?: number;
   experience?: number; // 0-100 saturation driver
+  // Total evidence count (backend computed) per category
+  evidence_count_total?: number;
 };
 
 type HoverTooltipState = {
@@ -50,7 +52,7 @@ const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
 };
 
 
-export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, skillsMeta, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; skillsByCategory?: Record<string, string[]>; skillsMeta?: Record<string, { presence?: 'certified' | 'observed' | 'self-reported'; presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>; years?: number; sources?: string[] }>; headless?: boolean }) {
+export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, skillsMeta, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; skillsByCategory?: Record<string, string[]>; skillsMeta?: Record<string, { presence?: 'certified' | 'observed' | 'self-reported'; presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>; years?: number; sources?: string[]; evidenceCount?: number }>; headless?: boolean }) {
   const hasRadar = !!(skillsCategoryRadar && skillsCategoryRadar.length > 0);
   const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 24);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -85,7 +87,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
   };
   const hideLegendTooltip = () => setLegendTooltip(null);
 
-  // ratio drives size: average of observed/self_reported/certified
+  // ratio drives size by default; prefer backend evidence_count_total when present
   const bubbles = useMemo(() => {
     const seriesAvg = (d: SkillsRadarPoint): number => {
       const vals = [Number(d.observed || 0), Number(d.self_reported || 0), Number(d.certified || 0)];
@@ -94,10 +96,19 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
       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));
+    // Prefer evidence_count_total across categories if available; fallback to ratio
+    const evidenceTotals = (skillsCategoryRadar || []).map((d) => Number((d as any).evidence_count_total || 0));
+    const evidenceAvailable = evidenceTotals.some((v) => v > 0);
+
+    const maxValue = evidenceAvailable
+      ? Math.max(1, ...evidenceTotals)
+      : Math.max(1, ...skillsRadarLimited.map(seriesAvg));
 
     return skillsRadarLimited.map((d) => {
-      const value = seriesAvg(d);
+      const ratio = seriesAvg(d);
+      const evidenceCountTotal = Number((d as any).evidence_count_total || 0);
+      const valueRaw = evidenceAvailable ? evidenceCountTotal : ratio;
+      const value = Math.max(0, Number(valueRaw));
       const experience = Math.max(0, Math.min(100, Number(d.experience || 0)));
       const size = Math.max(2, Math.round((value / maxValue) * 100)); // 2..100
       const color = 'var(--content-card-background)';
@@ -105,11 +116,13 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
         label: d.axis,
         value: size,
         color,
-        tooltip: `${d.axis}\nRatio: ${value}\nExperience: ${experience}`,
-        data: { ratio: value, experience }
+        tooltip: evidenceAvailable
+          ? `${d.axis}\nEvidence: ${value} sources\nExperience: ${experience}`
+          : `${d.axis}\nRatio: ${ratio}\nExperience: ${experience}`,
+        data: { ratio, experience, evidence: value }
       };
     });
-  }, [skillsRadarLimited]);
+  }, [skillsRadarLimited, skillsCategoryRadar]);
 
   const bubbleData = useMemo(() => {
     return bubbles.map((b) => ({
@@ -245,39 +258,70 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
             <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 && typeof entry !== 'string' ? (
-              <span className="truncate" title={entry.label}>{entry.label}</span>
+              <span className="truncate" title={entry.label}>
+                {entry.label}
+                {/* Evidence count bullet */}
+                {(() => {
+                  const meta = skillsMeta?.[entry.label];
+                  const count = Number((meta as any)?.evidenceCount || 0);
+                  return count > 0 ? (
+                    <>
+                      {' '}<span className="opacity-60">•</span>{' '}
+                      <span
+                        className="underline decoration-dotted underline-offset-2 cursor-help opacity-80"
+                        onMouseEnter={(e) =>
+                          showLegendTooltipAt(
+                            e.currentTarget,
+                            'Evidence count',
+                            'Total number of sources across observed, certified, and self-reported evidence for this skill.'
+                          )
+                        }
+                        onMouseLeave={hideLegendTooltip}
+                      >
+                        {count}
+                      </span>
+                    </>
+                  ) : null;
+                })()}
+              </span>
             ) : (
               <span className="truncate">{typeof entry === 'string' ? entry : '\u00A0'}</span>
             )}
           </div>
           <span className="text-xs text-[var(--text-secondary)] flex flex-wrap items-center gap-1">
-            <span
-              className="underline decoration-dotted underline-offset-2 cursor-help"
-              onMouseEnter={(e) => showLegendTooltipAt(e.currentTarget, 'Sources', 'The source where we observed this skill.')}
-              onMouseLeave={hideLegendTooltip}
-            >
-              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) => {
-                  const str = String(src);
-                  let provider = str.split(':')[0] || '';
-                  if (!provider || provider === str) {
-                    // If split(':')[0] didn't find a delimiter or provider (i.e., no ':'), try split('.')
-                    provider = str.split('.')[0] || '';
-                  }
-                  return provider.toLowerCase();
-                });
-                const uniqueProviders = Array.from(new Set<string>(sourceProviders));
-                const filteredProviders = uniqueProviders.filter((provider) =>
-                  providers.includes(provider.toLowerCase())
-                );
-                return filteredProviders.map((provider) => (
-                  <ProviderIcon key={provider} name={provider} />
-                ));
-              })()
-            ) : null}
+            {entry && typeof entry !== 'string' ? (
+              <>
+                <span
+                  className="underline decoration-dotted underline-offset-2 cursor-help"
+                  onMouseEnter={(e) => showLegendTooltipAt(e.currentTarget, 'Sources', 'The source where we observed this skill.')}
+                  onMouseLeave={hideLegendTooltip}
+                >
+                  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) => {
+                      const str = String(src);
+                      let provider = str.split(':')[0] || '';
+                      if (!provider || provider === str) {
+                        // If split(':')[0] didn't find a delimiter or provider (i.e., no ':'), try split('.')
+                        provider = str.split('.')[0] || '';
+                      }
+                      return provider.toLowerCase();
+                    });
+                    const uniqueProviders = Array.from(new Set<string>(sourceProviders));
+                    const filteredProviders = uniqueProviders.filter((provider) =>
+                      providers.includes(provider.toLowerCase())
+                    );
+                    return filteredProviders.map((provider) => (
+                      <ProviderIcon key={provider} name={provider} />
+                    ));
+                  })()
+                ) : null}
+              </>
+            ) : (
+              <span className="opacity-0 whitespace-nowrap">'\u00A0'</span>
+            )}
           </span>
         </div>
         {entry && typeof entry !== 'string' ? (
@@ -348,7 +392,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
           >
             <div className="flex items-center gap-2">
               <span className="inline-block h-3 w-3 rounded-full" style={{ background: green1 }} />
-              <span>Size = ratio of observed/self-reported/certified</span>
+              <span>Size = evidence count per category</span>
             </div>
             <div className="flex items-center gap-2 mt-1">
               <span className="inline-block h-3 w-3 rounded-full" style={{ background: green5 }} />

package/src/types.ts

@@ -397,11 +397,21 @@ export interface GraphInsightsPayload {
     certified?: number; // 0-100
     // New: experience metric (0-100) for color saturation
     experience?: number;
+    // New: total evidence count across all skills in this category
+    evidence_count_total?: number;
   }>;
   // New: mapping of category -> list of skills contributing to that category
   skillsByCategory?: Record<string, string[]>;
   // New: per-skill metadata used by UI (e.g., presence label, experience years)
-  skillsMeta?: Record<string, { presence?: 'certified' | 'observed' | 'self-reported'; years?: number; sources?: string[] }>; 
+  skillsMeta?: Record<string, { 
+    presence?: 'certified' | 'observed' | 'self-reported'; 
+    // New: list of presence types for multi-dot rendering
+    presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>;
+    years?: number; 
+    sources?: string[];
+    // New: total number of evidence sources across observed/self-reported/certified
+    evidenceCount?: number; 
+  }>; 
   // New: Flattened list of business rule selections (for appendix)
   business_rules_all?: Array<{
     provider: string;