@urmzd/github-insights 2.1.0 → 2.2.0

package/src/components/contribution-rhythm.tsx

@@ -0,0 +1,152 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml } from "../svg-utils.js";
+import { BAR_COLORS, LAYOUT, THEME } from "../theme.js";
+import type { ContributionRhythm, RenderResult } from "../types.js";
+
+const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+export function renderContributionRhythm(
+  rhythm: ContributionRhythm,
+  y: number,
+): RenderResult {
+  const { padX } = LAYOUT;
+
+  // Radar chart dimensions
+  const radarCx = padX + 120;
+  const radarCy = y + 120;
+  const radarR = 90;
+  const maxVal = Math.max(...rhythm.dayTotals, 1);
+
+  // Guide circles
+  const guides = [0.25, 0.5, 0.75, 1.0];
+  const guidesSvg = guides.map((pct) => (
+    <circle
+      cx={radarCx}
+      cy={radarCy}
+      r={radarR * pct}
+      fill="none"
+      stroke={THEME.border}
+      stroke-width="1"
+      stroke-opacity="0.4"
+    />
+  ));
+
+  // Spoke lines
+  const spokesSvg = DAY_NAMES.map((_, i) => {
+    const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2;
+    const x2 = radarCx + radarR * Math.cos(angle);
+    const y2 = radarCy + radarR * Math.sin(angle);
+    return (
+      <line
+        x1={radarCx}
+        y1={radarCy}
+        x2={x2}
+        y2={y2}
+        stroke={THEME.border}
+        stroke-width="1"
+        stroke-opacity="0.3"
+      />
+    );
+  });
+
+  // Day labels
+  const labelsSvg = DAY_NAMES.map((name, i) => {
+    const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2;
+    const labelR = radarR + 16;
+    const lx = radarCx + labelR * Math.cos(angle);
+    const ly = radarCy + labelR * Math.sin(angle) + 4;
+    return (
+      <text x={lx} y={ly} className="t t-value" text-anchor="middle">
+        {escapeXml(name)}
+      </text>
+    );
+  });
+
+  // Data polygon
+  const points = rhythm.dayTotals
+    .map((val, i) => {
+      const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2;
+      const r = (val / maxVal) * radarR;
+      const px = radarCx + r * Math.cos(angle);
+      const py = radarCy + r * Math.sin(angle);
+      return `${px},${py}`;
+    })
+    .join(" ");
+
+  // Stats section (right side)
+  const statsX = padX + 300;
+  const statsStartY = y + 30;
+  const statColors = [
+    BAR_COLORS[0],
+    BAR_COLORS[1],
+    BAR_COLORS[2],
+    BAR_COLORS[4],
+    BAR_COLORS[5],
+  ];
+
+  const statsSvg = rhythm.stats.map((stat, i) => {
+    const sy = statsStartY + i * 42;
+    const color = statColors[i % statColors.length];
+    return (
+      <>
+        <text x={statsX} y={sy} className="t t-stat-label">
+          {escapeXml(stat.label)}
+        </text>
+        <text x={statsX} y={sy + 22} fill={color} className="t t-stat-value">
+          {escapeXml(stat.value)}
+        </text>
+      </>
+    );
+  });
+
+  const height = 250;
+
+  const svg = (
+    <>
+      {/* Guide circles */}
+      {guidesSvg.join("")}
+
+      {/* Spokes */}
+      {spokesSvg.join("")}
+
+      {/* Data polygon */}
+      <polygon
+        points={points}
+        fill={BAR_COLORS[0]}
+        fill-opacity="0.2"
+        stroke={BAR_COLORS[0]}
+        stroke-width="2"
+        stroke-opacity="0.8"
+        className="fade-2"
+        style={`transform-origin: ${radarCx}px ${radarCy}px`}
+      />
+
+      {/* Data points */}
+      {rhythm.dayTotals.map((val, i) => {
+        const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2;
+        const r = (val / maxVal) * radarR;
+        const px = radarCx + r * Math.cos(angle);
+        const py = radarCy + r * Math.sin(angle);
+        return (
+          <circle
+            cx={px}
+            cy={py}
+            r="3"
+            fill={BAR_COLORS[0]}
+            className={`fade-${Math.min(i + 1, 6)}`}
+          />
+        );
+      })}
+
+      {/* Day labels */}
+      {labelsSvg.join("")}
+
+      {/* Stats */}
+      {statsSvg.join("")}
+    </>
+  );
+
+  return { svg, height };
+}
+
+void Fragment;

package/src/components/full-svg.test.tsx

@@ -35,7 +35,10 @@ describe("generateFullSvg", () => {
         filename: "b.svg",
         title: "Section B",
         subtitle: "Subtitle B",
-        items: [{ name: "Go", value: 10 }],
+        renderBody: (y) => ({
+          svg: `<text y="${y}">Go</text>`,
+          height: 30,
+        }),
       },
     ];
     const result = generateFullSvg(sections);

package/src/components/full-svg.tsx

@@ -1,7 +1,6 @@
 import { Fragment, h } from "../jsx-factory.js";
 import { LAYOUT, THEME } from "../theme.js";
 import type { SectionDef } from "../types.js";
-import { renderBarChart } from "./bar-chart.js";
 import { renderSectionHeader } from "./section.js";
 import { StyleDefs } from "./style-defs.js";
 
@@ -15,7 +14,13 @@ export function wrapSectionSvg(bodySvg: string, height: number): string {
       viewBox={`0 0 ${width} ${height}`}
     >
       <StyleDefs />
-      <rect width={width} height={height} rx="12" fill={THEME.bg} />
+      <rect
+        width={width}
+        height={height}
+        rx="12"
+        className="bg-fill"
+        fill={THEME.bg}
+      />
       {bodySvg}
     </svg>
   );
@@ -35,10 +40,6 @@ export function generateFullSvg(sections: SectionDef[]): string {
       const body = section.renderBody(y);
       bodySvg += body.svg;
       y += body.height + sectionGap;
-    } else if (section.items) {
-      const bars = renderBarChart(section.items, y, section.options || {});
-      bodySvg += bars.svg;
-      y += bars.height + sectionGap;
     }
   }
 
@@ -52,7 +53,13 @@ export function generateFullSvg(sections: SectionDef[]): string {
       viewBox={`0 0 ${width} ${totalHeight}`}
     >
       <StyleDefs />
-      <rect width={width} height={totalHeight} rx="12" fill={THEME.bg} />
+      <rect
+        width={width}
+        height={totalHeight}
+        rx="12"
+        className="bg-fill"
+        fill={THEME.bg}
+      />
       {bodySvg}
     </svg>
   );

package/src/components/impact-trail.tsx

@@ -0,0 +1,90 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml, truncate } from "../svg-utils.js";
+import { BAR_COLORS, LAYOUT, THEME } from "../theme.js";
+import type { ExternalRepo, RenderResult } from "../types.js";
+
+export function renderImpactTrail(
+  repos: ExternalRepo[],
+  y: number,
+): RenderResult {
+  if (repos.length === 0) return { svg: "", height: 0 };
+
+  const { padX } = LAYOUT;
+  const rowHeight = 36;
+  const nameWidth = 280;
+  const barMaxWidth = 400;
+  const gap = 6;
+
+  // Sort by stars (impact proxy)
+  const sorted = [...repos].sort((a, b) => b.stargazerCount - a.stargazerCount);
+  const maxStars = Math.max(sorted[0]?.stargazerCount || 1, 1);
+  const maxLog = Math.log2(maxStars + 1);
+
+  let svg = "";
+
+  for (let i = 0; i < sorted.length; i++) {
+    const repo = sorted[i];
+    const ry = y + i * (rowHeight + gap);
+    const color = BAR_COLORS[i % BAR_COLORS.length];
+    const delay = Math.min(i + 1, 6);
+
+    // Bar width proportional to log(stars)
+    const logStars = Math.log2(repo.stargazerCount + 1);
+    const barWidth = Math.max(4, (logStars / maxLog) * barMaxWidth);
+
+    // Language dot
+    const langName = repo.primaryLanguage?.name || "";
+
+    svg += (
+      <>
+        {/* Repo name */}
+        <text
+          x={padX}
+          y={ry + rowHeight / 2 + 4}
+          className={`t t-card-title fade-${delay}`}
+        >
+          {escapeXml(truncate(repo.nameWithOwner, 38))}
+        </text>
+
+        {/* Impact bar */}
+        <rect
+          x={padX + nameWidth}
+          y={ry + rowHeight / 2 - 6}
+          width={barWidth}
+          height="12"
+          rx="3"
+          fill={color}
+          fill-opacity="0.7"
+          className={`fade-${delay}`}
+        />
+
+        {/* Star count */}
+        <text
+          x={padX + nameWidth + barMaxWidth + 16}
+          y={ry + rowHeight / 2 + 4}
+          className={`t t-value fade-${delay}`}
+        >
+          {`\u2605 ${repo.stargazerCount.toLocaleString()}`}
+        </text>
+
+        {/* Language label */}
+        {langName ? (
+          <text
+            x={padX + nameWidth + barMaxWidth + 80}
+            y={ry + rowHeight / 2 + 4}
+            className={`t t-value fade-${delay}`}
+          >
+            {escapeXml(langName)}
+          </text>
+        ) : (
+          ""
+        )}
+      </>
+    );
+  }
+
+  const totalHeight = sorted.length * (rowHeight + gap) - gap;
+  return { svg, height: totalHeight };
+}
+
+void Fragment;

package/src/components/language-velocity.tsx

@@ -0,0 +1,181 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml } from "../svg-utils.js";
+import { LAYOUT, THEME } from "../theme.js";
+import type { MonthlyLanguageBucket, RenderResult } from "../types.js";
+
+export function renderLanguageVelocity(
+  velocity: MonthlyLanguageBucket[],
+  y: number,
+): RenderResult {
+  if (velocity.length === 0) return { svg: "", height: 0 };
+
+  const { padX } = LAYOUT;
+  const chartWidth = 760;
+  const chartHeight = 140;
+  const labelHeight = 20;
+  const totalHeight = chartHeight + labelHeight;
+
+  // Collect all unique languages across all months
+  const langSet = new Map<string, string>();
+  for (const bucket of velocity) {
+    for (const lang of bucket.languages) {
+      if (!langSet.has(lang.name)) {
+        langSet.set(lang.name, lang.color);
+      }
+    }
+  }
+
+  // Get top languages by total commits
+  const langTotals = new Map<string, number>();
+  for (const bucket of velocity) {
+    for (const lang of bucket.languages) {
+      langTotals.set(
+        lang.name,
+        (langTotals.get(lang.name) || 0) + lang.commits,
+      );
+    }
+  }
+  const topLangs = [...langTotals.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 8)
+    .map(([name]) => name);
+
+  // Compute max total per month for scaling
+  const monthTotals = velocity.map((bucket) =>
+    bucket.languages
+      .filter((l) => topLangs.includes(l.name))
+      .reduce((sum, l) => sum + l.commits, 0),
+  );
+  const maxTotal = Math.max(...monthTotals, 1);
+
+  // Build stacked area data
+  const stepX = chartWidth / Math.max(velocity.length - 1, 1);
+  const paths: { path: string; color: string; name: string }[] = [];
+
+  // For each language, build a path from bottom of its stack to top
+  for (let li = topLangs.length - 1; li >= 0; li--) {
+    const langName = topLangs[li];
+    const color = langSet.get(langName) || "#8b949e";
+
+    // Compute cumulative values for this language
+    const upperPoints: { x: number; y: number }[] = [];
+    const lowerPoints: { x: number; y: number }[] = [];
+
+    for (let mi = 0; mi < velocity.length; mi++) {
+      const bucket = velocity[mi];
+      const x = padX + mi * stepX;
+
+      // Sum commits for all languages below this one (for stacking)
+      let below = 0;
+      let current = 0;
+      for (let k = 0; k < topLangs.length; k++) {
+        const langCommits =
+          bucket.languages.find((l) => l.name === topLangs[k])?.commits || 0;
+        if (k < li) below += langCommits;
+        if (k === li) current = langCommits;
+      }
+
+      const bottomY = y + chartHeight - (below / maxTotal) * chartHeight;
+      const topY =
+        y + chartHeight - ((below + current) / maxTotal) * chartHeight;
+
+      lowerPoints.push({ x, y: bottomY });
+      upperPoints.push({ x, y: topY });
+    }
+
+    // Build smooth path using the points
+    if (upperPoints.length < 2) continue;
+
+    let d = `M ${upperPoints[0].x},${upperPoints[0].y}`;
+
+    // Upper edge (left to right) with smooth curves
+    for (let i = 1; i < upperPoints.length; i++) {
+      const prev = upperPoints[i - 1];
+      const curr = upperPoints[i];
+      const cpx = (prev.x + curr.x) / 2;
+      d += ` C ${cpx},${prev.y} ${cpx},${curr.y} ${curr.x},${curr.y}`;
+    }
+
+    // Lower edge (right to left) with smooth curves
+    d += ` L ${lowerPoints[lowerPoints.length - 1].x},${lowerPoints[lowerPoints.length - 1].y}`;
+    for (let i = lowerPoints.length - 2; i >= 0; i--) {
+      const prev = lowerPoints[i + 1];
+      const curr = lowerPoints[i];
+      const cpx = (prev.x + curr.x) / 2;
+      d += ` C ${cpx},${prev.y} ${cpx},${curr.y} ${curr.x},${curr.y}`;
+    }
+
+    d += " Z";
+    paths.push({ path: d, color, name: langName });
+  }
+
+  // Month labels
+  const monthLabels = velocity
+    .filter((_, i) => i % Math.max(1, Math.floor(velocity.length / 6)) === 0)
+    .map((bucket) => {
+      const originalIndex = velocity.indexOf(bucket);
+      const x = padX + originalIndex * stepX;
+      const monthName = new Date(`${bucket.month}-01`).toLocaleDateString(
+        "en",
+        { month: "short" },
+      );
+      return { x, label: monthName };
+    });
+
+  const svg = (
+    <>
+      {/* Streamgraph paths */}
+      {paths.map((p, i) => (
+        <path
+          d={p.path}
+          fill={p.color}
+          fill-opacity="0.75"
+          className={`fade-${Math.min(i + 1, 6)}`}
+        />
+      ))}
+
+      {/* Language legend (inline, below chart) */}
+      {(() => {
+        let legendX = padX;
+        return topLangs.map((name) => {
+          const color = langSet.get(name) || "#8b949e";
+          const x = legendX;
+          legendX += name.length * 7 + 28;
+          return (
+            <>
+              <rect
+                x={x}
+                y={y + chartHeight + 6}
+                width="8"
+                height="8"
+                rx="2"
+                fill={color}
+                opacity="0.85"
+              />
+              <text x={x + 12} y={y + chartHeight + 14} className="t t-value">
+                {escapeXml(name)}
+              </text>
+            </>
+          );
+        });
+      })()}
+
+      {/* Month labels */}
+      {monthLabels.map((m) => (
+        <text
+          x={m.x}
+          y={y + chartHeight + 14}
+          className="t t-value"
+          text-anchor="start"
+          opacity="0"
+        >
+          {escapeXml(m.label)}
+        </text>
+      ))}
+    </>
+  );
+
+  return { svg, height: totalHeight };
+}
+
+void Fragment;

package/src/components/project-constellation.tsx

@@ -0,0 +1,97 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml, truncate } from "../svg-utils.js";
+import { LAYOUT, THEME } from "../theme.js";
+import type { ConstellationNode, RenderResult } from "../types.js";
+
+export function renderProjectConstellation(
+  nodes: ConstellationNode[],
+  y: number,
+): RenderResult {
+  if (nodes.length === 0) return { svg: "", height: 0 };
+
+  const { padX } = LAYOUT;
+  const height = 380;
+
+  // Draw connection lines first (behind nodes)
+  const drawnConnections = new Set<string>();
+  const connectionsSvg = nodes.flatMap((node, i) =>
+    node.connections
+      .filter((j) => {
+        const key = [Math.min(i, j), Math.max(i, j)].join("-");
+        if (drawnConnections.has(key)) return false;
+        drawnConnections.add(key);
+        return true;
+      })
+      .map((j) => {
+        const other = nodes[j];
+        return (
+          <line
+            x1={padX + node.x}
+            y1={y + node.y}
+            x2={padX + other.x}
+            y2={y + other.y}
+            stroke={THEME.border}
+            stroke-width="1"
+            stroke-opacity="0.15"
+            stroke-dasharray="4 4"
+          />
+        );
+      }),
+  );
+
+  // Draw nodes
+  const nodesSvg = nodes.map((node, i) => {
+    const cx = padX + node.x;
+    const cy = y + node.y;
+    const delay = Math.min(i + 1, 6);
+
+    return (
+      <>
+        {/* Glow effect */}
+        <circle
+          cx={cx}
+          cy={cy}
+          r={node.radius + 4}
+          fill={node.color}
+          fill-opacity="0.08"
+          className={`fade-${delay}`}
+        />
+        {/* Main circle */}
+        <circle
+          cx={cx}
+          cy={cy}
+          r={node.radius}
+          fill={node.color}
+          fill-opacity="0.7"
+          stroke={node.color}
+          stroke-width="1.5"
+          stroke-opacity="0.9"
+          className={`fade-${delay}`}
+        />
+        {/* Label */}
+        <text
+          x={cx}
+          y={cy + node.radius + 14}
+          className={`t t-value fade-${delay}`}
+          text-anchor="middle"
+        >
+          {escapeXml(truncate(node.name, 18))}
+        </text>
+      </>
+    );
+  });
+
+  const svg = (
+    <>
+      {/* Connection lines */}
+      {connectionsSvg.join("")}
+
+      {/* Nodes */}
+      {nodesSvg.join("")}
+    </>
+  );
+
+  return { svg, height };
+}
+
+void Fragment;

package/src/components/section.test.tsx

@@ -61,9 +61,11 @@ describe("renderSection", () => {
     expect(result.height).toBeGreaterThan(0);
   });
 
-  it("returns { svg, height } with items array", () => {
-    const items = [{ name: "Go", value: 10 }];
-    const result = renderSection("Tech", "Detected", items);
+  it("returns { svg, height } with another render function", () => {
+    const result = renderSection("Tech", "Detected", (y) => ({
+      svg: `<text y="${y}">Go</text>`,
+      height: 30,
+    }));
     expect(result.svg).toContain("Go");
   });
 });

package/src/components/section.tsx

@@ -1,8 +1,7 @@
 import { Fragment, h } from "../jsx-factory.js";
 import { escapeXml } from "../svg-utils.js";
 import { LAYOUT, THEME } from "../theme.js";
-import type { BarItem, RenderResult } from "../types.js";
-import { renderBarChart } from "./bar-chart.js";
+import type { RenderResult } from "../types.js";
 
 export function renderSectionHeader(
   title: string,
@@ -53,8 +52,7 @@ export function renderDivider(y: number): RenderResult {
 export function renderSection(
   title: string,
   subtitle: string,
-  itemsOrRenderBody: ((y: number) => RenderResult) | BarItem[],
-  options: Record<string, unknown> = {},
+  renderBody: (y: number) => RenderResult,
 ): RenderResult {
   let y = LAYOUT.padY;
   let svg = "";
@@ -63,15 +61,9 @@ export function renderSection(
   svg += header.svg;
   y += header.height;
 
-  if (typeof itemsOrRenderBody === "function") {
-    const body = itemsOrRenderBody(y);
-    svg += body.svg;
-    y += body.height + LAYOUT.padY;
-  } else {
-    const bars = renderBarChart(itemsOrRenderBody, y, options);
-    svg += bars.svg;
-    y += bars.height + LAYOUT.padY;
-  }
+  const body = renderBody(y);
+  svg += body.svg;
+  y += body.height + LAYOUT.padY;
 
   return { svg, height: y };
 }

package/src/components/style-defs.tsx

@@ -1,13 +1,13 @@
 import { Fragment, h } from "../jsx-factory.js";
-import { FONT, THEME } from "../theme.js";
+import { FONT, THEME, THEME_LIGHT } from "../theme.js";
 
 export function StyleDefs(): string {
   return (
     <defs>
       <style>
         {`
-  .t { font-family: ${FONT}; }
-  .t-h { font-size: 13px; fill: ${THEME.text}; letter-spacing: 1.5px; font-weight: 600; }
+  .t { font-family: ${FONT}; font-variant-numeric: tabular-lining; }
+  .t-h { font-size: 14px; fill: ${THEME.text}; letter-spacing: 2px; font-weight: 600; }
   .t-sub { font-size: 11px; fill: ${THEME.muted}; }
   .t-label { font-size: 12px; fill: ${THEME.secondary}; }
   .t-value { font-size: 11px; fill: ${THEME.muted}; }
@@ -18,6 +18,47 @@ export function StyleDefs(): string {
   .t-card-detail { font-size: 11px; fill: ${THEME.secondary}; }
   .t-pill { font-size: 11px; font-weight: 600; }
   .t-bullet { font-size: 12px; fill: ${THEME.text}; }
+  .bg-fill { fill: ${THEME.bg}; }
+  .card-fill { fill: ${THEME.cardBg}; }
+  .border-stroke { stroke: ${THEME.border}; }
+
+  @media (prefers-color-scheme: light) {
+    .bg-fill { fill: ${THEME_LIGHT.bg}; }
+    .card-fill { fill: ${THEME_LIGHT.cardBg}; }
+    .border-stroke { stroke: ${THEME_LIGHT.border}; }
+    .t-h { fill: ${THEME_LIGHT.text}; }
+    .t-sub { fill: ${THEME_LIGHT.muted}; }
+    .t-label { fill: ${THEME_LIGHT.secondary}; }
+    .t-value { fill: ${THEME_LIGHT.muted}; }
+    .t-subhdr { fill: ${THEME_LIGHT.secondary}; }
+    .t-stat-label { fill: ${THEME_LIGHT.secondary}; }
+    .t-card-title { fill: ${THEME_LIGHT.link}; }
+    .t-card-detail { fill: ${THEME_LIGHT.secondary}; }
+    .t-bullet { fill: ${THEME_LIGHT.text}; }
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes scaleIn {
+    from { transform: scale(0); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+  }
+  @keyframes drawPath {
+    from { stroke-dashoffset: var(--path-length); }
+    to { stroke-dashoffset: 0; }
+  }
+  @keyframes radarReveal {
+    from { transform: scale(0); opacity: 0; }
+    to { transform: scale(1); opacity: 0.6; }
+  }
+  .fade-1 { animation: fadeIn 0.6s ease-out 0.1s both; }
+  .fade-2 { animation: fadeIn 0.6s ease-out 0.25s both; }
+  .fade-3 { animation: fadeIn 0.6s ease-out 0.4s both; }
+  .fade-4 { animation: fadeIn 0.6s ease-out 0.55s both; }
+  .fade-5 { animation: fadeIn 0.6s ease-out 0.7s both; }
+  .fade-6 { animation: fadeIn 0.6s ease-out 0.85s both; }
 `}
       </style>
     </defs>