@urmzd/github-insights 2.0.0

package/src/components/bar-chart.test.tsx

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { Fragment, h } from "../jsx-factory.js";
+import type { BarItem } from "../types.js";
+import { renderBarChart } from "./bar-chart.js";
+
+void Fragment;
+
+describe("renderBarChart", () => {
+  const items: BarItem[] = [
+    { name: "TypeScript", value: 75, percent: "75.0", color: "#3178c6" },
+    { name: "JavaScript", value: 25, percent: "25.0", color: "#f1e05a" },
+  ];
+
+  it("returns { svg, height }", () => {
+    const result = renderBarChart(items, 0);
+    expect(result).toHaveProperty("svg");
+    expect(result).toHaveProperty("height");
+    expect(typeof result.svg).toBe("string");
+    expect(typeof result.height).toBe("number");
+  });
+
+  it("height matches item count * row height", () => {
+    const result = renderBarChart(items, 0);
+    expect(result.height).toBe(items.length * 48);
+  });
+
+  it("svg contains item names", () => {
+    const result = renderBarChart(items, 0);
+    expect(result.svg).toContain("TypeScript");
+    expect(result.svg).toContain("JavaScript");
+  });
+
+  it("returns empty for empty input", () => {
+    const result = renderBarChart([], 0);
+    expect(result.svg).toBe("");
+    expect(result.height).toBe(0);
+  });
+});

package/src/components/bar-chart.tsx

@@ -0,0 +1,54 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml, truncate } from "../svg-utils.js";
+import { BAR_COLORS, LAYOUT } from "../theme.js";
+import type { BarItem, RenderResult } from "../types.js";
+
+export function renderBarChart(
+  items: BarItem[],
+  y: number,
+  options: Record<string, unknown> = {},
+): RenderResult {
+  if (items.length === 0) return { svg: "", height: 0 };
+
+  const { barHeight, barRowHeight, barMaxWidth, padX } = LAYOUT;
+  const useItemColors = options.useItemColors === true;
+  const maxValue = Math.max(...items.map((d) => d.value));
+
+  const svg = (
+    <>
+      {items.map((item, i) => {
+        const ry = y + i * barRowHeight;
+        const barWidth = Math.max((item.value / maxValue) * barMaxWidth, 4);
+        const color = useItemColors
+          ? item.color || BAR_COLORS[i % BAR_COLORS.length]
+          : BAR_COLORS[i % BAR_COLORS.length];
+        const label = escapeXml(truncate(item.name, 40));
+        const valueLabel = item.percent
+          ? `${item.percent}%`
+          : String(item.value);
+
+        return (
+          <>
+            <text x={padX} y={ry + 14} className="t t-label">
+              {label}
+            </text>
+            <rect
+              x={padX}
+              y={ry + 26}
+              width={barWidth}
+              height={barHeight}
+              rx="3"
+              fill={color}
+              opacity="0.85"
+            />
+            <text x={padX + barWidth + 8} y={ry + 40} className="t t-value">
+              {valueLabel}
+            </text>
+          </>
+        );
+      })}
+    </>
+  );
+
+  return { svg, height: items.length * barRowHeight };
+}

package/src/components/contribution-calendar.test.tsx

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { makeContributionCalendar } from "../__fixtures__/repos.js";
+import { Fragment, h } from "../jsx-factory.js";
+import { renderContributionCalendar } from "./contribution-calendar.js";
+
+void Fragment;
+
+describe("renderContributionCalendar", () => {
+  const calendar = makeContributionCalendar();
+
+  it("returns { svg, height }", () => {
+    const result = renderContributionCalendar(calendar, 0);
+    expect(result).toHaveProperty("svg");
+    expect(result).toHaveProperty("height");
+    expect(typeof result.svg).toBe("string");
+    expect(result.height).toBeGreaterThan(0);
+  });
+
+  it("renders rect cells for each contribution day", () => {
+    const { svg } = renderContributionCalendar(calendar, 0);
+    // 2 weeks x 7 days = 14 rects
+    const rectCount = (svg.match(/<rect /g) || []).length;
+    expect(rectCount).toBe(14);
+  });
+
+  it("includes month labels", () => {
+    const { svg } = renderContributionCalendar(calendar, 0);
+    expect(svg).toContain("Jan");
+  });
+
+  it("includes day labels", () => {
+    const { svg } = renderContributionCalendar(calendar, 0);
+    expect(svg).toContain("Mon");
+    expect(svg).toContain("Wed");
+    expect(svg).toContain("Fri");
+  });
+
+  it("uses colors from the calendar data", () => {
+    const { svg } = renderContributionCalendar(calendar, 0);
+    expect(svg).toContain("#0e4429");
+    expect(svg).toContain("#006d32");
+    expect(svg).toContain("#39d353");
+  });
+});

package/src/components/contribution-calendar.tsx

@@ -0,0 +1,94 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml } from "../svg-utils.js";
+import { LAYOUT, THEME } from "../theme.js";
+import type { ContributionCalendar, RenderResult } from "../types.js";
+
+const CELL_SIZE = 11;
+const CELL_GAP = 2;
+const STEP = CELL_SIZE + CELL_GAP;
+const DAY_LABEL_WIDTH = 30;
+const MONTH_LABEL_HEIGHT = 16;
+const DAY_LABELS = ["", "Mon", "", "Wed", "", "Fri", ""];
+const MONTH_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+export function renderContributionCalendar(
+  calendar: ContributionCalendar,
+  y: number,
+): RenderResult {
+  const { padX } = LAYOUT;
+  const weeks = calendar.weeks;
+  const gridX = padX + DAY_LABEL_WIDTH;
+  const gridY = y + MONTH_LABEL_HEIGHT;
+
+  // Build month labels from the first day of each week
+  const monthLabels: { label: string; x: number }[] = [];
+  let lastMonth = -1;
+  for (let w = 0; w < weeks.length; w++) {
+    const days = weeks[w].contributionDays;
+    if (days.length === 0) continue;
+    const month = new Date(days[0].date).getMonth();
+    if (month !== lastMonth) {
+      monthLabels.push({
+        label: MONTH_NAMES[month],
+        x: gridX + w * STEP,
+      });
+      lastMonth = month;
+    }
+  }
+
+  const svg = (
+    <>
+      {/* Month labels */}
+      {monthLabels.map((m) => (
+        <text x={m.x} y={y + 11} className="t t-value">
+          {escapeXml(m.label)}
+        </text>
+      ))}
+      {/* Day labels */}
+      {DAY_LABELS.map((label, d) =>
+        label ? (
+          <text
+            x={padX}
+            y={gridY + d * STEP + CELL_SIZE - 1}
+            className="t t-value"
+          >
+            {escapeXml(label)}
+          </text>
+        ) : (
+          ""
+        ),
+      )}
+      {/* Cells */}
+      {weeks.map((week, w) =>
+        week.contributionDays.map((day, d) => (
+          <rect
+            x={gridX + w * STEP}
+            y={gridY + d * STEP}
+            width={CELL_SIZE}
+            height={CELL_SIZE}
+            rx="2"
+            fill={day.color || THEME.cardBg}
+          />
+        )),
+      )}
+    </>
+  );
+
+  const height = MONTH_LABEL_HEIGHT + 7 * STEP;
+  return { svg, height };
+}
+
+void Fragment;

package/src/components/contribution-cards.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { Fragment, h } from "../jsx-factory.js";
+import type { ContributionHighlight } from "../types.js";
+import { renderContributionCards } from "./contribution-cards.js";
+
+void Fragment;
+
+describe("renderContributionCards", () => {
+  const highlights: ContributionHighlight[] = [
+    { project: "org/repo-one", detail: "★ 500 · TypeScript" },
+    { project: "org/repo-two", detail: "★ 200 · Go" },
+  ];
+
+  it("returns { svg, height }", () => {
+    const result = renderContributionCards(highlights, 0);
+    expect(result).toHaveProperty("svg");
+    expect(result).toHaveProperty("height");
+  });
+
+  it("height accounts for cards and gaps", () => {
+    const result = renderContributionCards(highlights, 0);
+    // 2 cards of 44px + 1 gap of 8px = 96
+    expect(result.height).toBe(2 * 44 + 1 * 8);
+  });
+
+  it("svg contains project names", () => {
+    const result = renderContributionCards(highlights, 0);
+    expect(result.svg).toContain("org/repo-one");
+    expect(result.svg).toContain("org/repo-two");
+  });
+
+  it("handles empty input", () => {
+    const result = renderContributionCards([], 0);
+    expect(result.height).toBe(0);
+  });
+});

package/src/components/contribution-cards.tsx

@@ -0,0 +1,58 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml, truncate } from "../svg-utils.js";
+import { BAR_COLORS, LAYOUT, THEME } from "../theme.js";
+import type { ContributionHighlight, RenderResult } from "../types.js";
+
+export function renderContributionCards(
+  highlights: ContributionHighlight[],
+  y: number,
+): RenderResult {
+  const { padX } = LAYOUT;
+  const cardW = 760;
+  const cardH = 44;
+  const gap = 8;
+
+  const svg = (
+    <>
+      {highlights.map((hl, i) => {
+        const cy = y + i * (cardH + gap);
+        const color = BAR_COLORS[i % BAR_COLORS.length];
+
+        return (
+          <>
+            <rect
+              x={padX}
+              y={cy}
+              width={cardW}
+              height={cardH}
+              rx="6"
+              fill={THEME.cardBg}
+              stroke={THEME.border}
+              stroke-width="1"
+            />
+            <rect
+              x={padX}
+              y={cy}
+              width="4"
+              height={cardH}
+              rx="2"
+              fill={color}
+            />
+            <text x={padX + 16} y={cy + 18} className="t t-card-title">
+              {escapeXml(truncate(hl.project, 40))}
+            </text>
+            <text x={padX + 16} y={cy + 34} className="t t-card-detail">
+              {escapeXml(truncate(hl.detail, 80))}
+            </text>
+          </>
+        );
+      })}
+    </>
+  );
+
+  return {
+    svg,
+    height:
+      highlights.length * (cardH + gap) - (highlights.length > 0 ? gap : 0),
+  };
+}

package/src/components/donut-chart.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { Fragment, h } from "../jsx-factory.js";
+import type { LanguageItem } from "../types.js";
+import { renderDonutChart } from "./donut-chart.js";
+
+void Fragment;
+
+describe("renderDonutChart", () => {
+  const items: LanguageItem[] = [
+    { name: "TypeScript", value: 60000, percent: "60.0", color: "#3178c6" },
+    { name: "Python", value: 40000, percent: "40.0", color: "#3572A5" },
+  ];
+
+  it("returns { svg, height }", () => {
+    const result = renderDonutChart(items, 0);
+    expect(result).toHaveProperty("svg");
+    expect(result).toHaveProperty("height");
+  });
+
+  it("height is at least 180", () => {
+    const result = renderDonutChart(items, 0);
+    expect(result.height).toBeGreaterThanOrEqual(180);
+  });
+
+  it("svg contains language names", () => {
+    const result = renderDonutChart(items, 0);
+    expect(result.svg).toContain("TypeScript");
+    expect(result.svg).toContain("Python");
+  });
+
+  it("svg contains percentages", () => {
+    const result = renderDonutChart(items, 0);
+    expect(result.svg).toContain("60.0%");
+    expect(result.svg).toContain("40.0%");
+  });
+});

package/src/components/donut-chart.tsx

@@ -0,0 +1,102 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml } from "../svg-utils.js";
+import { BAR_COLORS, LAYOUT, THEME } from "../theme.js";
+import type { LanguageItem, RenderResult } from "../types.js";
+
+export function renderDonutChart(
+  items: LanguageItem[],
+  y: number,
+): RenderResult {
+  const { padX } = LAYOUT;
+  const cx = padX + 90;
+  const cy = y + 90;
+  const r = 70;
+  const strokeW = 28;
+  const circumference = 2 * Math.PI * r;
+
+  let offset = 0;
+  const segments = items.map((item, i) => {
+    const pct = parseFloat(item.percent) / 100;
+    const dash = pct * circumference;
+    const color = item.color || BAR_COLORS[i % BAR_COLORS.length];
+    const seg = (
+      <circle
+        cx={cx}
+        cy={cy}
+        r={r}
+        fill="none"
+        stroke={color}
+        stroke-width={strokeW}
+        stroke-dasharray={`${dash} ${circumference - dash}`}
+        stroke-dashoffset={-offset}
+        transform={`rotate(-90 ${cx} ${cy})`}
+        opacity="0.85"
+      />
+    );
+    offset += dash;
+    return seg;
+  });
+
+  const legendX = padX + 220;
+  const legendItemH = 24;
+  const legend = items.map((item, i) => {
+    const ly = y + 10 + i * legendItemH;
+    const color = item.color || BAR_COLORS[i % BAR_COLORS.length];
+    return (
+      <>
+        <rect
+          x={legendX}
+          y={ly}
+          width="12"
+          height="12"
+          rx="2"
+          fill={color}
+          opacity="0.85"
+        />
+        <text x={legendX + 20} y={ly + 10} className="t t-label">
+          {escapeXml(item.name)}
+        </text>
+        <text
+          x={legendX + 200}
+          y={ly + 10}
+          className="t t-value"
+          text-anchor="end"
+        >
+          {item.percent}%
+        </text>
+      </>
+    );
+  });
+
+  const height = Math.max(180, items.length * legendItemH + 20);
+
+  const svg = (
+    <>
+      {segments.join("")}
+      <text
+        x={cx}
+        y={cy + 5}
+        className="t"
+        fill={THEME.text}
+        font-size="14"
+        font-weight="700"
+        text-anchor="middle"
+      >
+        {String(items.length)}
+      </text>
+      <text
+        x={cx}
+        y={cy + 20}
+        className="t"
+        fill={THEME.muted}
+        font-size="10"
+        text-anchor="middle"
+      >
+        languages
+      </text>
+      {legend.join("")}
+    </>
+  );
+
+  return { svg, height };
+}

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

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { Fragment, h } from "../jsx-factory.js";
+import type { SectionDef } from "../types.js";
+import { generateFullSvg, wrapSectionSvg } from "./full-svg.js";
+
+void Fragment;
+
+describe("wrapSectionSvg", () => {
+  it("returns an svg string", () => {
+    const result = wrapSectionSvg("<text>hi</text>", 100);
+    expect(result).toContain("<svg");
+    expect(result).toContain("</svg>");
+    expect(result).toContain("<text>hi</text>");
+  });
+
+  it("includes width and height", () => {
+    const result = wrapSectionSvg("", 200);
+    expect(result).toContain('height="200"');
+  });
+});
+
+describe("generateFullSvg", () => {
+  it("combines multiple sections", () => {
+    const sections: SectionDef[] = [
+      {
+        filename: "a.svg",
+        title: "Section A",
+        subtitle: "Subtitle A",
+        renderBody: (y) => ({
+          svg: `<text y="${y}">A body</text>`,
+          height: 50,
+        }),
+      },
+      {
+        filename: "b.svg",
+        title: "Section B",
+        subtitle: "Subtitle B",
+        items: [{ name: "Go", value: 10 }],
+      },
+    ];
+    const result = generateFullSvg(sections);
+    expect(result).toContain("<svg");
+    expect(result).toContain("SECTION A");
+    expect(result).toContain("SECTION B");
+    expect(result).toContain("A body");
+    expect(result).toContain("Go");
+  });
+
+  it("returns valid svg for empty sections", () => {
+    const result = generateFullSvg([]);
+    expect(result).toContain("<svg");
+    expect(result).toContain("</svg>");
+  });
+});

package/src/components/full-svg.tsx

@@ -0,0 +1,59 @@
+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";
+
+export function wrapSectionSvg(bodySvg: string, height: number): string {
+  const { width } = LAYOUT;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+    >
+      <StyleDefs />
+      <rect width={width} height={height} rx="12" fill={THEME.bg} />
+      {bodySvg}
+    </svg>
+  );
+}
+
+export function generateFullSvg(sections: SectionDef[]): string {
+  const { width, padY, sectionGap } = LAYOUT;
+  let y = padY;
+  let bodySvg = "";
+
+  for (const section of sections) {
+    const header = renderSectionHeader(section.title, section.subtitle, y);
+    bodySvg += header.svg;
+    y += header.height;
+
+    if (section.renderBody) {
+      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;
+    }
+  }
+
+  const totalHeight = y + padY;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={totalHeight}
+      viewBox={`0 0 ${width} ${totalHeight}`}
+    >
+      <StyleDefs />
+      <rect width={width} height={totalHeight} rx="12" fill={THEME.bg} />
+      {bodySvg}
+    </svg>
+  );
+}

package/src/components/project-cards.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { Fragment, h } from "../jsx-factory.js";
+import type { ProjectItem } from "../types.js";
+import { renderProjectCards } from "./project-cards.js";
+
+void Fragment;
+
+describe("renderProjectCards", () => {
+  const projects: ProjectItem[] = [
+    {
+      name: "big-app",
+      url: "https://github.com/u/big-app",
+      description: "A large app",
+      stars: 120,
+    },
+    {
+      name: "small-lib",
+      url: "https://github.com/u/small-lib",
+      description: "",
+      stars: 45,
+    },
+  ];
+
+  it("returns { svg, height }", () => {
+    const result = renderProjectCards(projects, 0);
+    expect(result).toHaveProperty("svg");
+    expect(result).toHaveProperty("height");
+  });
+
+  it("height is positive for non-empty input", () => {
+    const result = renderProjectCards(projects, 0);
+    expect(result.height).toBeGreaterThan(0);
+  });
+
+  it("svg contains project names and star counts", () => {
+    const result = renderProjectCards(projects, 0);
+    expect(result.svg).toContain("big-app");
+    expect(result.svg).toContain("\u2605 120");
+    expect(result.svg).toContain("small-lib");
+  });
+
+  it("handles empty input", () => {
+    const result = renderProjectCards([], 0);
+    expect(result.height).toBe(0);
+  });
+});

package/src/components/project-cards.tsx

@@ -0,0 +1,66 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml, truncate } from "../svg-utils.js";
+import { BAR_COLORS, LAYOUT, THEME } from "../theme.js";
+import type { ProjectItem, RenderResult } from "../types.js";
+
+export function renderProjectCards(
+  projects: ProjectItem[],
+  y: number,
+): RenderResult {
+  const { padX } = LAYOUT;
+  const cardW = 760;
+  const gap = 10;
+  let svg = "";
+  let totalHeight = 0;
+
+  for (let i = 0; i < projects.length; i++) {
+    const cy = y + totalHeight;
+    const color = BAR_COLORS[i % BAR_COLORS.length];
+    const p = projects[i];
+    const desc = truncate(p.description, 90);
+
+    let innerH = 20;
+    if (desc) innerH += 16;
+    const cardH = Math.max(innerH + 16, 44);
+
+    // Card background + accent bar
+    svg += (
+      <>
+        <rect
+          x={padX}
+          y={cy}
+          width={cardW}
+          height={cardH}
+          rx="6"
+          fill={THEME.cardBg}
+          stroke={THEME.border}
+          stroke-width="1"
+        />
+        <rect x={padX} y={cy} width="4" height={cardH} rx="2" fill={color} />
+        <text x={padX + 16} y={cy + 18} className="t t-card-title">
+          {escapeXml(truncate(p.name, 40))}
+        </text>
+        <text
+          x={padX + cardW - 16}
+          y={cy + 18}
+          className="t t-value"
+          text-anchor="end"
+        >
+          {`\u2605 ${p.stars.toLocaleString()}`}
+        </text>
+      </>
+    );
+
+    if (desc) {
+      svg += (
+        <text x={padX + 16} y={cy + 34} className="t t-card-detail">
+          {escapeXml(desc)}
+        </text>
+      );
+    }
+
+    totalHeight += cardH + gap;
+  }
+
+  return { svg, height: totalHeight > 0 ? totalHeight - gap : 0 };
+}