GitHub Stars

1"use client";
2 
3import { useEffect, useId, useMemo, useState } from "react";
4 
5import { cn } from "@/lib/utils";
6 
7interface GitHubStarsProps extends React.HTMLAttributes<HTMLDivElement> {
8  owner: string;
9  repo: string;
10  days?: number;
11  staticStars?: number;
12  staticData?: number[];
13}
14 
15function formatNumber(num: number): string {
16  if (num >= 1000000) {
17    return `${(num / 1000000).toFixed(1)}M`;
18  }
19  if (num >= 1000) {
20    return `${(num / 1000).toFixed(1)}K`;
21  }
22  return num.toString();
23}
24 
25function generateLinePath(
26  data: number[],
27  width: number,
28  height: number,
29  offsetY: number = 0,
30): string {
31  if (data.length === 0) return "";
32 
33  const max = Math.max(...data);
34  const min = Math.min(...data);
35  const range = max - min || 1;
36  const normalized = data.map((v) => (v - min) / range);
37 
38  const points = normalized.map((value, i) => {
39    const x = (i / (data.length - 1)) * width;
40    const y = height - value * height + offsetY;
41    return { x, y };
42  });
43 
44  return points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
45}
46 
47function generateAreaPath(
48  data: number[],
49  width: number,
50  height: number,
51): string {
52  if (data.length === 0) return "";
53 
54  const linePath = generateLinePath(data, width, height);
55  return `${linePath} L${width},${height} L0,${height} Z`;
56}
57 
58function generateHatchLines(
59  width: number,
60  height: number,
61  spacing: number,
62): string {
63  const lines: string[] = [];
64  const diagonal = Math.sqrt(width * width + height * height);
65  const count = Math.ceil(diagonal / spacing) * 2;
66 
67  for (let i = -count; i < count; i++) {
68    const offset = i * spacing;
69    lines.push(
70      `M${offset - height},${height + 10} L${offset + width + 10},-10`,
71    );
72  }
73 
74  return lines.join(" ");
75}
76 
77interface AreaChartProps {
78  data: number[];
79  className?: string;
80}
81 
82const AREA_CHART_VIEWBOX_WIDTH = 300;
83const AREA_CHART_VIEWBOX_HEIGHT = 200;
84 
85function AreaChart({ data, className }: AreaChartProps) {
86  const id = useId();
87  const gradientId = `gradient-${id}`;
88  const maskId = `mask-${id}`;
89 
90  const width = AREA_CHART_VIEWBOX_WIDTH;
91  const height = AREA_CHART_VIEWBOX_HEIGHT;
92 
93  const mainLinePath = useMemo(
94    () => generateLinePath(data, width, height),
95    [data, height, width],
96  );
97 
98  const areaPath = useMemo(
99    () => generateAreaPath(data, width, height),
100    [data, height, width],
101  );
102 
103  const hatchPath = useMemo(
104    () => generateHatchLines(width, height, 10),
105    [height, width],
106  );
107 
108  return (
109    <svg
110// … truncated