harshapitla/github-actions-analytics

1import React, { useMemo } from "react";2import {3  BarChart,4  Bar,5  XAxis,6  YAxis,7  CartesianGrid,8  Tooltip,9  ResponsiveContainer,10} from "recharts";11import ChartCard from "../components/charts/ChartCard";12 13export default function AuthorConcentrationChart({ rows = [] }) {14  const chartData = useMemo(() => {15    if (!Array.isArray(rows)) return [];16 17    const authorStarsMap = {};18 19    rows.forEach((row) => {20      const author = row.author_name || "unknown";21      const stars = Number(row.no_of_stars) || 0;22 23      if (!authorStarsMap[author]) {24        authorStarsMap[author] = 0;25      }26 27      authorStarsMap[author] += stars;28    });29 30    return Object.entries(authorStarsMap)31      .map(([author, totalStars]) => ({32        author,33        totalStars,34      }))35      .sort((a, b) => b.totalStars - a.totalStars)36      .slice(0, 5); // ✅ TOP 5 AUTHORS ONLY37  }, [rows]);38 39  return (40    <ChartCard41      title="Author Concentration Risk"42      subtitle="Top 5 authors by total stars across all their GitHub Actions"43    >44      <div style={{ height: 400 }}>45        <ResponsiveContainer>46          <BarChart47            data={chartData}48            margin={{ top: 20, right: 30, left: 60, bottom: 40 }}49          >50            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />51 52            {/* X Axis */}53            <XAxis dataKey="author" tick={{ fill: "#94a3b8", fontSize: 12 }} />54 55            {/* Y Axis */}56            <YAxis57              tick={{ fill: "#94a3b8", fontSize: 12 }}58              label={{59                value: "Total Stars",60                angle: -90,61                position: "insideLeft",62                fill: "#94a3b8",63              }}64            />65 66            <Tooltip />67            <Bar dataKey="totalStars" fill="#6366f1" radius={[6, 6, 0, 0]} />68          </BarChart>69        </ResponsiveContainer>70      </div>71 72      {/* Explanation */}73      <div74        style={{75          marginTop: 12,76          fontSize: 12,77          color: "#94a3b8",78          textAlign: "center",79          borderTop: "1px solid #334155",80          paddingTop: 10,81        }}82      >83        <p>84          This chart shows how much of the GitHub Actions ecosystem is85          controlled by the top 5 authors.86          <br />87          Heavy concentration increases ecosystem risk if key maintainers step88          away.89        </p>90      </div>91    </ChartCard>92  );93}94