@urmzd/github-insights 2.1.0 → 2.3.0

package/src/components/growth-arc.tsx

@@ -0,0 +1,119 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml } from "../svg-utils.js";
+import { LAYOUT, THEME } from "../theme.js";
+import type { GrowthArcPoint, RenderResult } from "../types.js";
+
+export function renderGrowthArc(
+  points: GrowthArcPoint[],
+  y: number,
+): RenderResult {
+  if (points.length < 2) return { svg: "", height: 0 };
+
+  const { padX } = LAYOUT;
+  const chartWidth = 760;
+  const chartHeight = 120;
+  const labelHeight = 20;
+  const totalHeight = chartHeight + labelHeight;
+
+  const maxComplexity = Math.max(...points.map((p) => p.avgComplexity));
+  const minComplexity = Math.min(...points.map((p) => p.avgComplexity));
+  const range = maxComplexity - minComplexity || 1;
+
+  const stepX = chartWidth / Math.max(points.length - 1, 1);
+
+  // Compute point positions
+  const coords = points.map((p, i) => ({
+    x: padX + i * stepX,
+    y:
+      y +
+      chartHeight -
+      ((p.avgComplexity - minComplexity) / range) * (chartHeight - 20) -
+      10,
+    ...p,
+  }));
+
+  // Build smooth path
+  let pathD = `M ${coords[0].x},${coords[0].y}`;
+  for (let i = 1; i < coords.length; i++) {
+    const prev = coords[i - 1];
+    const curr = coords[i];
+    const cpx = (prev.x + curr.x) / 2;
+    pathD += ` C ${cpx},${prev.y} ${cpx},${curr.y} ${curr.x},${curr.y}`;
+  }
+
+  // Build filled area path
+  let areaD = pathD;
+  areaD += ` L ${coords[coords.length - 1].x},${y + chartHeight}`;
+  areaD += ` L ${coords[0].x},${y + chartHeight} Z`;
+
+  const svg = (
+    <>
+      {/* Filled area under curve */}
+      <path d={areaD} fill="#58a6ff" fill-opacity="0.15" className="fade-1" />
+
+      {/* Line */}
+      <path
+        d={pathD}
+        fill="none"
+        stroke="#58a6ff"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className="fade-1"
+      />
+
+      {/* Data points */}
+      {coords.map((p, i) => (
+        <circle
+          cx={p.x}
+          cy={p.y}
+          r="4"
+          fill="#58a6ff"
+          className={`fade-${Math.min(i + 1, 6)}`}
+        />
+      ))}
+
+      {/* Point labels (complexity value) */}
+      {coords.map((p) => (
+        <text
+          x={p.x}
+          y={p.y - 10}
+          className="t t-value"
+          text-anchor="middle"
+          font-size="10"
+        >
+          {p.avgComplexity.toFixed(0)}
+        </text>
+      ))}
+
+      {/* X-axis labels (relative time) */}
+      {coords.map((p) => (
+        <text
+          x={p.x}
+          y={y + chartHeight + 14}
+          className="t t-value"
+          text-anchor="middle"
+        >
+          {escapeXml(p.label)}
+        </text>
+      ))}
+
+      {/* Repo count annotations */}
+      {coords.map((p) => (
+        <text
+          x={p.x}
+          y={y + chartHeight + 24}
+          className="t t-muted"
+          text-anchor="middle"
+          font-size="9"
+        >
+          {`${p.repoCount} repo${p.repoCount !== 1 ? "s" : ""}`}
+        </text>
+      ))}
+    </>
+  );
+
+  return { svg, height: totalHeight + 10 };
+}
+
+void Fragment;

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>