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 13/* -------------------- Helpers -------------------- */14function getStarBucket(stars) {15  if (stars < 100) return "0–99";16  if (stars < 1000) return "100–999";17  if (stars < 10000) return "1k–9.9k";18  return "10k+";19}20 21/* -------------------- Chart -------------------- */22export default function VerificationGapByPopularityChart({ rows = [] }) {23  const chartData = useMemo(() => {24    if (!Array.isArray(rows)) return [];25 26    const bucketMap = {27      "0–99": { bucket: "0–99", verified: 0, unverified: 0 },28      "100–999": { bucket: "100–999", verified: 0, unverified: 0 },29      "1k–9.9k": { bucket: "1k–9.9k", verified: 0, unverified: 0 },30      "10k+": { bucket: "10k+", verified: 0, unverified: 0 },31    };32 33    rows.forEach((row) => {34      const stars = Number(row.no_of_stars) || 0;35      const bucket = getStarBucket(stars);36 37      const isVerified =38        row.is_action_verified === true || row.is_action_verified === "TRUE";39 40      if (isVerified) {41        bucketMap[bucket].verified += 1;42      } else {43        bucketMap[bucket].unverified += 1;44      }45    });46 47    return Object.values(bucketMap);48  }, [rows]);49 50  return (51    <ChartCard52      title="Verification Gap by Popularity"53      subtitle="Are widely used GitHub Actions actually verified?"54    >55      <div style={{ height: 400 }}>56        <ResponsiveContainer>57          <BarChart58            data={chartData}59            margin={{ top: 20, right: 30, left: 60, bottom: 40 }}60          >61            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />62 63            {/* X Axis */}64            <XAxis65              dataKey="bucket"66              tick={{ fill: "#94a3b8", fontSize: 12 }}67              label={{68                value: "Star Range",69                position: "insideBottom",70                offset: -5,71                fill: "#94a3b8",72              }}73            />74 75            {/* Y Axis */}76            <YAxis77              tick={{ fill: "#94a3b8", fontSize: 12 }}78              label={{79                value: "Number of Actions",80                angle: -90,81                position: "insideLeft",82                fill: "#94a3b8",83              }}84            />85 86            <Tooltip />87 88            {/* Bars */}89            <Bar90              dataKey="verified"91              stackId="a"92              fill="#10b981"93              name="Verified Actions"94            />95            <Bar96              dataKey="unverified"97              stackId="a"98              fill="#f59e0b"99              name="Unverified Actions"100            />101          </BarChart>102        </ResponsiveContainer>103      </div>104 105      {/* Explanation */}106      <div107        style={{108          marginTop: 12,109          fontSize: 12,110          color: "#94a3b8",111          textAlign: "center",112          borderTop: "1px solid #334155",113          paddingTop: 10,114        }}115      >116        <p>117          This chart shows how verification status changes as actions become118          more popular.119          <br />A large unverified share in high-star ranges indicates a trust120          and governance gap.121        </p>122      </div>123    </ChartCard>124  );125}126