@urmzd/github-insights 2.1.0 → 2.2.0

package/src/components/donut-chart.tsx

@@ -1,102 +0,0 @@
-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/project-cards.test.tsx

@@ -1,46 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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 };
-}

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

@@ -1,32 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Fragment, h } from "../jsx-factory.js";
-import type { StatItem } from "../types.js";
-import { renderStatCards } from "./stat-cards.js";
-
-void Fragment;
-
-describe("renderStatCards", () => {
-  const stats: StatItem[] = [
-    { label: "COMMITS", value: "500" },
-    { label: "PRS", value: "42" },
-  ];
-
-  it("returns { svg, height }", () => {
-    const result = renderStatCards(stats, 0);
-    expect(result).toHaveProperty("svg");
-    expect(result).toHaveProperty("height");
-  });
-
-  it("height is card height (72)", () => {
-    const result = renderStatCards(stats, 0);
-    expect(result.height).toBe(72);
-  });
-
-  it("svg contains labels and values", () => {
-    const result = renderStatCards(stats, 0);
-    expect(result.svg).toContain("COMMITS");
-    expect(result.svg).toContain("500");
-    expect(result.svg).toContain("PRS");
-    expect(result.svg).toContain("42");
-  });
-});

package/src/components/stat-cards.tsx

@@ -1,57 +0,0 @@
-import { Fragment, h } from "../jsx-factory.js";
-import { escapeXml } from "../svg-utils.js";
-import { BAR_COLORS, LAYOUT, THEME } from "../theme.js";
-import type { RenderResult, StatItem } from "../types.js";
-
-export function renderStatCards(stats: StatItem[], y: number): RenderResult {
-  const { padX } = LAYOUT;
-  const cardW = 140;
-  const cardH = 72;
-  const gap = 15;
-  const colors = [
-    BAR_COLORS[0],
-    BAR_COLORS[1],
-    BAR_COLORS[2],
-    BAR_COLORS[4],
-    BAR_COLORS[5],
-  ];
-
-  const svg = (
-    <>
-      {stats.map((stat, i) => {
-        const cx = padX + i * (cardW + gap);
-        const color = colors[i % colors.length];
-
-        return (
-          <>
-            <rect
-              x={cx}
-              y={y}
-              width={cardW}
-              height={cardH}
-              rx="8"
-              fill={THEME.cardBg}
-              stroke={THEME.border}
-              stroke-width="1"
-            />
-            <circle cx={cx + 14} cy={y + 16} r="4" fill={color} />
-            <text x={cx + 24} y={y + 20} className="t t-stat-label">
-              {escapeXml(stat.label)}
-            </text>
-            <text
-              x={cx + cardW / 2}
-              y={y + 52}
-              fill={color}
-              className="t t-stat-value"
-              text-anchor="middle"
-            >
-              {escapeXml(String(stat.value))}
-            </text>
-          </>
-        );
-      })}
-    </>
-  );
-
-  return { svg, height: cardH };
-}

package/src/components/tech-highlights.test.tsx

@@ -1,63 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { TechHighlight } from "../types.js";
-import { renderTechHighlights } from "./tech-highlights.js";
-
-describe("renderTechHighlights", () => {
-  it("renders category names in uppercase", () => {
-    const highlights: TechHighlight[] = [
-      { category: "Frontend", items: ["React", "Vue"], score: 85 },
-      { category: "Backend", items: ["Express", "Django"], score: 70 },
-    ];
-    const { svg } = renderTechHighlights(highlights, 0);
-    expect(svg).toContain("FRONTEND");
-    expect(svg).toContain("BACKEND");
-  });
-
-  it("renders skill items joined with middle dot", () => {
-    const highlights: TechHighlight[] = [
-      {
-        category: "Languages",
-        items: ["TypeScript", "Python", "Go"],
-        score: 90,
-      },
-    ];
-    const { svg } = renderTechHighlights(highlights, 0);
-    expect(svg).toContain("TypeScript");
-    expect(svg).toContain("Python");
-    expect(svg).toContain("Go");
-    expect(svg).toContain("\u00B7");
-  });
-
-  it("renders score percentages", () => {
-    const highlights: TechHighlight[] = [
-      { category: "Web Dev", items: ["React", "Astro"], score: 85 },
-      { category: "DevOps", items: ["Docker"], score: 60 },
-    ];
-    const { svg } = renderTechHighlights(highlights, 0);
-    expect(svg).toContain("85%");
-    expect(svg).toContain("60%");
-  });
-
-  it("returns height > 0 for non-empty input", () => {
-    const highlights: TechHighlight[] = [
-      { category: "Tools", items: ["Docker", "Kubernetes"], score: 75 },
-    ];
-    const { height } = renderTechHighlights(highlights, 0);
-    expect(height).toBeGreaterThan(0);
-  });
-
-  it("returns empty result for empty input", () => {
-    const result = renderTechHighlights([], 0);
-    expect(result).toEqual({ svg: "", height: 0 });
-  });
-
-  it("clamps out-of-range scores", () => {
-    const highlights: TechHighlight[] = [
-      { category: "Over", items: ["A"], score: 150 },
-      { category: "Under", items: ["B"], score: -10 },
-    ];
-    const { svg } = renderTechHighlights(highlights, 0);
-    expect(svg).toContain("100%");
-    expect(svg).toContain("0%");
-  });
-});

package/src/components/tech-highlights.tsx

@@ -1,109 +0,0 @@
-import { Fragment, h } from "../jsx-factory.js";
-import { escapeXml, truncate, wrapText } from "../svg-utils.js";
-import { BAR_COLORS, LAYOUT } from "../theme.js";
-import type { RenderResult, TechHighlight } from "../types.js";
-
-export function renderTechHighlights(
-  highlights: TechHighlight[],
-  y: number,
-): RenderResult {
-  if (highlights.length === 0) return { svg: "", height: 0 };
-
-  const { padX, barHeight, barMaxWidth } = LAYOUT;
-  const labelMaxChars = 60;
-  const skillMaxChars = 120;
-  const skillLineHeight = 16;
-  const labelLineHeight = 26;
-  const scoreX = padX + barMaxWidth + 10;
-  const skillY = 16;
-  const rowGap = 14;
-
-  let svg = "";
-  let height = 0;
-
-  for (let hi = 0; hi < highlights.length; hi++) {
-    const group = highlights[hi];
-    const color = BAR_COLORS[hi % BAR_COLORS.length];
-    const score = Math.max(0, Math.min(100, group.score));
-    const fillWidth = (score / 100) * barMaxWidth;
-
-    const baseY = y + height;
-
-    // Category label (uppercase, left-aligned, on its own line)
-    svg += (
-      <text x={padX} y={baseY + 14} className="t t-subhdr">
-        {escapeXml(truncate(group.category.toUpperCase(), labelMaxChars))}
-      </text>
-    );
-
-    // Bar track (full width, low opacity)
-    svg += (
-      <rect
-        x={padX}
-        y={baseY + labelLineHeight}
-        width={barMaxWidth}
-        height={barHeight}
-        rx={4}
-        fill={color}
-        fill-opacity="0.15"
-      />
-    );
-
-    // Bar fill (proportional to score)
-    if (fillWidth > 0) {
-      svg += (
-        <rect
-          x={padX}
-          y={baseY + labelLineHeight}
-          width={fillWidth}
-          height={barHeight}
-          rx={4}
-          fill={color}
-          fill-opacity="0.85"
-        />
-      );
-    }
-
-    // Score label (right of bar)
-    svg += (
-      <text
-        x={scoreX}
-        y={baseY + labelLineHeight + barHeight / 2 + 4}
-        className="t t-value"
-      >
-        {`${score}%`}
-      </text>
-    );
-
-    // Skill items text (below bar, muted, wrapped to avoid overflow)
-    const skillText = group.items
-      .map((item) => truncate(item, 30))
-      .join(" \u00B7 ");
-
-    const skillLines = wrapText(skillText, skillMaxChars);
-    for (let li = 0; li < skillLines.length; li++) {
-      svg += (
-        <text
-          x={padX}
-          y={
-            baseY + labelLineHeight + barHeight + skillY + li * skillLineHeight
-          }
-          className="t t-card-detail"
-        >
-          {escapeXml(skillLines[li])}
-        </text>
-      );
-    }
-
-    height +=
-      labelLineHeight +
-      barHeight +
-      skillY +
-      (skillLines.length - 1) * skillLineHeight +
-      rowGap;
-  }
-
-  return { svg, height };
-}
-
-void Fragment;

package/teasr.toml

@@ -1,14 +0,0 @@
-[server]
-command = "npx serve metrics --listen 3123"
-url = "http://localhost:3123"
-timeout = 10000
-
-[output]
-dir = "./showcase"
-formats = ["png"]
-
-[[scenes]]
-type = "web"
-url = "/index.svg"
-name = "metrics-svg"
-viewport = { width = 1200, height = 900 }