kyd-shared-badge 0.2.26 → 0.2.28

package/src/components/Skills.tsx

@@ -0,0 +1,422 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { green } from '../colors';
+import { SkillsMatrix } from '../types';
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+} from 'recharts';
+
+
+type SkillsRadarPoint = {
+  axis: string;
+  observed?: number;
+  self_reported?: number;
+  certified?: number;
+};
+
+
+type BubbleDatum = { label: string; value: number; color: string };
+type PackedBubble = { x: number; y: number; r: number; label: string; value: number; color: string };
+
+const packBubbles = (data: BubbleDatum[], width: number, height: number, padding: number): PackedBubble[] => {
+  const filtered = data.filter((d) => Number(d.value) > 0);
+  if (filtered.length === 0) return [];
+  const maxVal = Math.max(...filtered.map((d) => d.value));
+  const maxR = Math.min(width, height) * 0.24;
+  const nodes: PackedBubble[] = filtered
+    .sort((a, b) => b.value - a.value)
+    .map((d) => ({
+      label: d.label,
+      value: d.value,
+      color: d.color,
+      r: Math.max(6, Math.sqrt(d.value / maxVal) * maxR),
+      x: width / 2,
+      y: height / 2,
+    }));
+
+  const placed: PackedBubble[] = [];
+  const centerX = width / 2;
+  const centerY = height / 2;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (i === 0) {
+      placed.push({ ...node });
+      continue;
+    }
+    let angle = 0;
+    let radiusFromCenter = node.r + padding;
+    let found = false;
+    const maxAttempts = 2000;
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      const x = centerX + radiusFromCenter * Math.cos(angle);
+      const y = centerY + radiusFromCenter * Math.sin(angle);
+      const withinBounds = (x - node.r >= 0) && (x + node.r <= width) && (y - node.r >= 0) && (y + node.r <= height);
+      if (withinBounds) {
+        let overlaps = false;
+        for (let j = 0; j < placed.length; j++) {
+          const p = placed[j];
+          const dx = x - p.x;
+          const dy = y - p.y;
+          const dist2 = dx * dx + dy * dy;
+          const minDist = node.r + p.r + padding;
+          if (dist2 < minDist * minDist) {
+            overlaps = true;
+            break;
+          }
+        }
+        if (!overlaps) {
+          placed.push({ ...node, x, y });
+          found = true;
+          break;
+        }
+      }
+      angle += Math.PI / 18; // 10 degrees
+      if (angle >= Math.PI * 2) {
+        angle = 0;
+        radiusFromCenter += Math.max(4, node.r * 0.25);
+      }
+    }
+    if (!found) {
+      placed.push({ ...node, x: Math.min(Math.max(node.r, centerX), width - node.r), y: Math.min(Math.max(node.r, centerY), height - node.r) });
+    }
+  }
+  return placed;
+};
+
+// Compute up to two centered lines that fit inside a circle of given radius.
+// Uses a rough char width approximation to avoid expensive text measurement.
+const buildLabelLines = (label: string, radius: number): { lines: string[]; fontSize: number } => {
+  const clean = String(label || '').trim();
+  if (!clean) return { lines: [], fontSize: 10 };
+
+  // Choose font size based on radius, within reasonable bounds
+  const fontSize = Math.max(8, Math.min(14, Math.floor(radius * 0.45)));
+  const charWidth = fontSize * 0.58; // approx width per character
+  const maxLineWidth = Math.max(0, (radius * 2) * 0.85);
+  const maxCharsPerLine = Math.max(2, Math.floor(maxLineWidth / charWidth));
+
+  // Prefer breaking on spaces; fallback to hard cut
+  const words = clean.split(/\s+/);
+  const lines: string[] = [];
+  let current = '';
+  for (let i = 0; i < words.length; i++) {
+    const w = words[i];
+    const candidate = current ? current + ' ' + w : w;
+    if (candidate.length <= maxCharsPerLine) {
+      current = candidate;
+    } else {
+      if (current) lines.push(current);
+      current = w.length > maxCharsPerLine ? w.slice(0, Math.max(1, maxCharsPerLine - 1)) + '…' : w;
+    }
+    if (lines.length >= 2) break;
+  }
+  if (lines.length < 2 && current) lines.push(current);
+
+  // If still too many words, force truncate to 2 lines
+  if (lines.length > 2) lines.length = 2;
+  // Ensure each line within limit
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].length > maxCharsPerLine) {
+      lines[i] = lines[i].slice(0, Math.max(1, maxCharsPerLine - 1)) + '…';
+    }
+  }
+
+  return { lines, fontSize };
+};
+
+type HoverTooltipState = {
+  visible: boolean;
+  x: number;
+  y: number;
+  title: string;
+  body?: string;
+} | null;
+
+const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
+  if (!state || !state.visible) return null;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: state.x,
+        top: state.y,
+        pointerEvents: 'none',
+        background: 'var(--content-card-background)',
+        border: '1px solid var(--icon-button-secondary)',
+        color: 'var(--text-main)',
+        padding: 10,
+        borderRadius: 6,
+        minWidth: 250,
+        maxWidth: 320,
+        zIndex: 10,
+      }}
+    >
+      <div style={{ fontWeight: 600 }}>{state.title}</div>
+      {state.body ? (
+        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{state.body}</div>
+      ) : null}
+    </div>
+  );
+};
+
+const Skills = ({ skillsCategoryRadar }: { skillsMatrix?: SkillsMatrix; skillsCategoryRadar?: SkillsRadarPoint[] }) => {
+  // const hasMatrix = !!(skillsMatrix && Array.isArray(skillsMatrix.skills) && skillsMatrix.skills.length > 0);
+  const hasRadar = !!(skillsCategoryRadar && skillsCategoryRadar.length > 0);
+
+  const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 8);
+  
+  const containerRef = useRef<HTMLDivElement>(null);
+  const footprintLegendRef = useRef<HTMLDivElement>(null);
+  const barLegendRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const [footprintChartTooltip, setFootprintChartTooltip] = useState<HoverTooltipState>(null);
+  const [footprintLegendTooltip, setFootprintLegendTooltip] = useState<HoverTooltipState>(null);
+  const [barLegendTooltip, setBarLegendTooltip] = useState<HoverTooltipState>(null);
+
+  useEffect(() => {
+    const measure = () => setContainerWidth(containerRef.current?.clientWidth || 0);
+    measure();
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, []);
+
+  const combinedBubbleData: BubbleDatum[] = useMemo(() => {
+    return skillsRadarLimited.map((d) => {
+      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, color: green };
+    });
+  }, [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]);
+
+  return (
+    <div className="space-y-6">
+
+      {/* Skills Coverage and Breakdown: two charts side-by-side */}
+      {hasRadar && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className={'rounded-lg p-4 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+            <h4 className={'font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills Footprint</h4>
+            <p className={'text-sm mb-4'} style={{ color: 'var(--text-secondary)' }}>The bubble chart visualizes individual skills, where bubble size reflects the weight of supporting evidence and placement indicates relative strength across the skill set.</p>
+            <div ref={containerRef} style={{ width: '100%', height: 340, position: 'relative' }}>
+              {(() => {
+                const width = containerWidth || 600;
+                const height = 300;
+                const innerWidth = Math.max(0, width);
+                const innerHeight = Math.max(0, height);
+                const packed = packBubbles(combinedBubbleData, innerWidth, innerHeight, 6);
+                return (
+                  <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+                    <g transform={`translate(-25, -20)`}>
+                      {packed.map((b, idx) => {
+                        const clipId = `bubble-clip-${idx}`;
+                        const canShowText = b.r >= 14;
+                        const labelSpec = canShowText ? buildLabelLines(b.label, b.r) : { lines: [], fontSize: 10 };
+                        const lineGap = Math.max(2, Math.floor(labelSpec.fontSize * 0.2));
+                        const totalTextHeight = labelSpec.lines.length * labelSpec.fontSize + Math.max(0, (labelSpec.lines.length - 1) * lineGap);
+                        const startY = -Math.floor(totalTextHeight / 2) + Math.floor(labelSpec.fontSize * 0.85);
+                        return (
+                          <g
+                            key={idx}
+                            transform={`translate(${b.x},${b.y})`}
+                            onMouseEnter={(e) => {
+                              const rect = containerRef.current?.getBoundingClientRect();
+                              if (!rect) return;
+                              setFootprintChartTooltip({
+                                visible: true,
+                                x: e.clientX - rect.left + 12,
+                                y: e.clientY - rect.top + 12,
+                                title: b.label,
+                                body: `Score: ${b.value}`,
+                              });
+                            }}
+                            onMouseMove={(e) => {
+                              if (!footprintChartTooltip || !containerRef.current) return;
+                              const rect = containerRef.current.getBoundingClientRect();
+                              setFootprintChartTooltip({ ...footprintChartTooltip, x: e.clientX - rect.left + 12, y: e.clientY - rect.top + 12 });
+                            }}
+                            onMouseLeave={() => setFootprintChartTooltip(null)}
+                          >
+                            <defs>
+                              <clipPath id={clipId}>
+                                <circle r={b.r} />
+                              </clipPath>
+                            </defs>
+                            <circle r={b.r} fill={'var(--bubble-foreground)'} stroke={'var(--icon-button-secondary)'} />
+                            <title>{`${b.label}: ${b.value}`}</title>
+                            {canShowText && labelSpec.lines.length > 0 ? (
+                              <g clipPath={`url(#${clipId})`} style={{ pointerEvents: 'none' }}>
+                                {labelSpec.lines.map((line, li) => (
+                                  <text key={li} y={startY + li * (labelSpec.fontSize + lineGap)} fontSize={labelSpec.fontSize} textAnchor="middle" fill={'var(--bubble-background)'}>
+                                    {line}
+                                  </text>
+                                ))}
+                              </g>
+                            ) : null}
+                          </g>
+                        );
+                      })}
+                    </g>
+                  </svg>
+                );
+              })()}
+              <TooltipBox state={footprintChartTooltip} />
+            </div>
+            {/* Legend */}
+            <div className={'mt-3'}>
+              {/* <div className={'text-xs mb-2'} style={{ color: 'var(--text-secondary)' }}>Legend</div> */}
+              <div ref={footprintLegendRef} style={{ position: 'relative' }}>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1">
+                  {legendData.map((item, idx) => (
+                    <div
+                      key={idx}
+                      className="flex items-center gap-2 text-xs"
+                      style={{ color: 'var(--text-secondary)' }}
+                      onMouseEnter={(e) => {
+                        const rect = footprintLegendRef.current?.getBoundingClientRect();
+                        if (!rect) return;
+                        const x = e.clientX - rect.left + 12;
+                        const y = e.clientY - rect.top + 12;
+                        setFootprintLegendTooltip({
+                          visible: true,
+                          x,
+                          y,
+                          title: item.label,
+                          body: `${item.label} represents ${item.percent}% of the Developer’s observable technical skills.`,
+                        });
+                      }}
+                      onMouseMove={(e) => {
+                        if (!footprintLegendTooltip || !footprintLegendRef.current) return;
+                        const rect = footprintLegendRef.current.getBoundingClientRect();
+                        setFootprintLegendTooltip({ ...footprintLegendTooltip, x: e.clientX - rect.left + 12, y: e.clientY - rect.top + 12 });
+                      }}
+                      onMouseLeave={() => setFootprintLegendTooltip(null)}
+                    >
+                      <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: 'var(--text-secondary)', flexShrink: 0 }} />
+                      <span className="truncate">{item.label}</span>
+                      <span className="ml-auto opacity-80">{item.percent}%</span>
+                    </div>
+                  ))}
+                </div>
+                <TooltipBox state={footprintLegendTooltip} />
+              </div>
+            </div>
+          </div>
+          <div className={'rounded-lg p-4 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+            <h4 className={'font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills by Validation Type</h4>
+            <p className={'text-sm mb-4'} style={{ color: 'var(--text-secondary)' }}>The bar chart shows how each skill is supported by self-attested claims, observed practice, or certified evidence.</p>
+            <div className="space-y-6 flex-col items-center" >
+              <div style={{ height: 360 }} >
+                <div className="flex-1 min-h-0 h-full">
+                  <ResponsiveContainer>
+                    <BarChart data={skillsRadarLimited} margin={{ top: 8, right: 8, left: 8, bottom: 36 }}>
+                      <CartesianGrid strokeDasharray="3 3" stroke={'var(--icon-button-secondary)'} />
+                      <XAxis dataKey="axis" tick={{ fill: 'var(--text-secondary)', fontSize: 12 }} interval={0} angle={-20} textAnchor="end" height={50} />
+                      <YAxis domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} />
+                      <Tooltip contentStyle={{ background: 'var(--content-card-background)', border: `1px solid var(--icon-button-secondary)`, color: 'var(--text-main)' }} />
+                      <Bar dataKey="observed" name="Observed" fill={'var(--bar-observed)'} />
+                      <Bar dataKey="self_reported" name="Self-reported" fill={'var(--bar-self-reported)'} />
+                      <Bar dataKey="certified" name="Certified" fill={'var(--bar-certified)'} />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+              <div ref={barLegendRef} className="mt-2" style={{ position: 'relative' }}>
+                <div className="grid grid-cols-3 gap-3 text-xs" style={{ color: 'var(--text-secondary)' }}>
+                  <div
+                    className="flex items-center gap-2"
+                    onMouseEnter={(e) => {
+                      const rect = barLegendRef.current?.getBoundingClientRect();
+                      if (!rect) return;
+                      setBarLegendTooltip({
+                        visible: true,
+                        x: e.clientX - rect.left + 12,
+                        y: e.clientY - rect.top + 12,
+                        title: 'Observed',
+                        body: 'Observed: Skills evidenced through third-party activity or recognition.',
+                      });
+                    }}
+                    onMouseMove={(e) => {
+                      if (!barLegendTooltip || !barLegendRef.current) return;
+                      const rect = barLegendRef.current.getBoundingClientRect();
+                      setBarLegendTooltip({ ...barLegendTooltip, x: e.clientX - rect.left + 12, y: e.clientY - rect.top + 12 });
+                    }}
+                    onMouseLeave={() => setBarLegendTooltip(null)}
+                  >
+                    <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: 'var(--bar-observed)' }} />
+                    <span>Observed</span>
+                  </div>
+                  <div
+                    className="flex items-center gap-2"
+                    onMouseEnter={(e) => {
+                      const rect = barLegendRef.current?.getBoundingClientRect();
+                      if (!rect) return;
+                      setBarLegendTooltip({
+                        visible: true,
+                        x: e.clientX - rect.left + 12,
+                        y: e.clientY - rect.top + 12,
+                        title: 'Self-Attested',
+                        body: 'Self-Attested: Skills claimed directly by the developer.',
+                      });
+                    }}
+                    onMouseMove={(e) => {
+                      if (!barLegendTooltip || !barLegendRef.current) return;
+                      const rect = barLegendRef.current.getBoundingClientRect();
+                      setBarLegendTooltip({ ...barLegendTooltip, x: e.clientX - rect.left + 12, y: e.clientY - rect.top + 12 });
+                    }}
+                    onMouseLeave={() => setBarLegendTooltip(null)}
+                  >
+                    <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: 'var(--bar-self-reported)' }} />
+                    <span>Self-reported</span>
+                  </div>
+                  <div
+                    className="flex items-center gap-2"
+                    onMouseEnter={(e) => {
+                      const rect = barLegendRef.current?.getBoundingClientRect();
+                      if (!rect) return;
+                      setBarLegendTooltip({
+                        visible: true,
+                        x: e.clientX - rect.left + 12,
+                        y: e.clientY - rect.top + 12,
+                        title: 'Certified',
+                        body: 'Certified: Skills verified by formal credentials or certifications',
+                      });
+                    }}
+                    onMouseMove={(e) => {
+                      if (!barLegendTooltip || !barLegendRef.current) return;
+                      const rect = barLegendRef.current.getBoundingClientRect();
+                      setBarLegendTooltip({ ...barLegendTooltip, x: e.clientX - rect.left + 12, y: e.clientY - rect.top + 12 });
+                    }}
+                    onMouseLeave={() => setBarLegendTooltip(null)}
+                  >
+                    <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: 'var(--bar-certified)' }} />
+                    <span>Certified</span>
+                  </div>
+                </div>
+                <TooltipBox state={barLegendTooltip} />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Skills;

package/src/components/SkillsAppendixTable.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { SkillsAll, SkillRow } from '../types';
+import { green } from '../colors';
+
+const slugify = (name: string) =>
+  String(name || '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+
+const SkillsAppendixTable = ({ skillsAll }: { skillsAll?: SkillsAll }) => {
+  const rows = (skillsAll?.skills || []).filter((row: SkillRow) => row.observed?.present || row.self_reported?.present || row.certified?.present);
+  useEffect(() => {
+    const flash = () => {
+      const hash = typeof window !== 'undefined' ? window.location.hash : '';
+      if (!hash || !hash.startsWith('#appendix-skills-')) return;
+      const id = hash.slice(1);
+      const el = document.getElementById(id) as HTMLElement | null;
+      if (!el) return;
+      const originalBg = el.style.backgroundColor;
+      el.style.transition = 'background-color 300ms ease';
+      el.style.backgroundColor = 'rgba(2, 163, 137, 0.14)';
+      setTimeout(() => {
+        el.style.backgroundColor = originalBg || '';
+      }, 1200);
+    };
+    flash();
+    window.addEventListener('hashchange', flash);
+    return () => window.removeEventListener('hashchange', flash);
+  }, []);
+
+  if (!rows.length) return null;
+  return (
+    <div id="appendix-skills" className="mt-4">
+      <div className={'overflow-auto rounded-lg border'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr style={{ backgroundColor: 'var(--content-card-background)' }}>
+              <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Skill</th>
+              <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Observed</th>
+              <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Self-reported</th>
+              <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Certified</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, idx: number) => (
+              <tr id={`appendix-skills-${slugify(row.name)}`} key={idx} className="border-t" style={{ borderColor: 'var(--icon-button-secondary)' }}>
+                <td className="p-3" style={{ color: 'var(--text-main)' }}>{row.name}</td>
+                {(['observed','self_reported','certified'] as const).map((b) => {
+                  const bucket = row[b];
+                  const present = !!bucket.present;
+                  const dot = present ? green : 'var(--icon-button-secondary)';
+                  const ev = bucket.evidence;
+                  const sources = (bucket.sources || []).slice(0,4);
+                  return (
+                    <td key={b} className="p-3 align-top" style={{ color: 'var(--text-secondary)' }}>
+                      <div className="flex items-start gap-2">
+                        <div className={'mt-1 rounded-full'} style={{ backgroundColor: dot, minHeight: '8px', minWidth: '8px', height: '8px', width: '8px', flexShrink: 0 }} />
+                        <div>
+                          {(ev || (sources && sources.length > 0)) && (
+                            <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>
+                              {ev ? <div>{ev}</div> : null}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default SkillsAppendixTable;
+
+