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  ReferenceLine,11  Legend,12} from "recharts";13import ChartCard from "../components/charts/ChartCard";14 15/* -------------------- Tooltip -------------------- */16function CustomTooltip({ active, payload, label }) {17  if (active && payload && payload.length) {18    return (19      <div20        style={{21          background: "rgba(5,18,35,0.95)",22          padding: "10px 12px",23          borderRadius: 6,24          border: "1px solid #334155",25        }}26      >27        <div style={{ fontWeight: "bold", marginBottom: 6 }}>{label}</div>28        {payload.map((item) => (29          <div key={item.dataKey} style={{ fontSize: 12 }}>30            {item.name}: {item.value.toLocaleString()}31          </div>32        ))}33      </div>34    );35  }36  return null;37}38 39/* -------------------- Chart -------------------- */40export default function PromotionReadyNonVerifiedBarChart({ rows = [] }) {41  const { chartData, medianContributors, medianStars } = useMemo(() => {42    if (!Array.isArray(rows) || rows.length === 0) {43      return { chartData: [], medianContributors: 0, medianStars: 0 };44    }45 46    /* ---- Verified medians ---- */47    const verified = rows.filter(48      (r) => r.is_action_verified === true || r.is_action_verified === "TRUE"49    );50 51    const median = (arr) => (arr.length ? arr[Math.floor(arr.length / 2)] : 0);52 53    const verifiedContributors = verified54      .map((r) => Number(r.no_of_contributors) || 0)55      .filter((v) => v > 0)56      .sort((a, b) => a - b);57 58    const verifiedStars = verified59      .map((r) => Number(r.no_of_stars) || 0)60      .filter((v) => v > 0)61      .sort((a, b) => a - b);62 63    const medianContributors = median(verifiedContributors);64    const medianStars = median(verifiedStars);65 66    /* ---- Promotion-ready non-verified ---- */67    const chartData = rows68      .filter(69        (r) =>70          (r.is_action_verified === false ||71            r.is_action_verified === "FALSE") &&72          Number(r.no_of_contributors) >= medianContributors &&73          Number(r.no_of_stars) >= medianStars74      )75      .map((r) => ({76        name: r.action_title || "Unknown",77        Contributors: Number(r.no_of_contributors),78        Stars: Number(r.no_of_stars),79      }))80      .slice(0, 15); // readable set81 82    return { chartData, medianContributors, medianStars };83  }, [rows]);84 85  if (!chartData.length) {86    return (87      <ChartCard88        title="Promotion-Ready Non-Verified Actions"89        subtitle="No non-verified actions exceed verified medians"90      >91        <p className="small">No promotion candidates found.</p>92      </ChartCard>93    );94  }95 96  return (97    <ChartCard98      title="Promotion-Ready Non-Verified Actions"99      subtitle="Non-verified actions exceeding verified trust benchmarks"100    >101      <div style={{ height: 600 }}>102        <ResponsiveContainer>103          <BarChart104            data={chartData}105            margin={{ top: 20, right: 30, left: 20, bottom: 80 }}106          >107            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />108 109            <XAxis110              dataKey="name"111              tick={{ fill: "#94a3b8", fontSize: 11 }}112              angle={-30}113              textAnchor="end"114              label={{115                value: "GitHub Action",116                position: "insideBottom",117                offset: -60,118                fill: "#94a3b8",119              }}120            />121 122            <YAxis123              tick={{ fill: "#94a3b8", fontSize: 12 }}124              label={{125                value: "Metric Value",126                angle: -90,127                position: "insideLeft",128                fill: "#94a3b8",129              }}130            />131 132            <Tooltip content={<CustomTooltip />} />133            <Legend />134 135            {/* Reference Benchmarks */}136            <ReferenceLine137              y={medianContributors}138              stroke="#60a5fa"139              strokeDasharray="4 4"140              label={{141                value: "Verified Median Contributors",142                position: "right",143                fill: "#60a5fa",144                fontSize: 11,145              }}146            />147 148            <ReferenceLine149              y={medianStars}150              stroke="#10b981"151              strokeDasharray="4 4"152              label={{153                value: "Verified Median Stars",154                position: "right",155                fill: "#10b981",156                fontSize: 11,157              }}158            />159 160            <Bar dataKey="Contributors" fill="#60a5fa" />161            <Bar dataKey="Stars" fill="#10b981" />162          </BarChart>163        </ResponsiveContainer>164      </div>165 166      <div167        style={{168          marginTop: 16,169          fontSize: 12,170          color: "#94a3b8",171          textAlign: "center",172          borderTop: "1px solid #334155",173          paddingTop: 12,174        }}175      >176        <p>177          Each bar compares a non-verified action against verified trust178          baselines.179          <br />180          Actions exceeding both contributor and adoption thresholds are181          promotion-ready.182        </p>183      </div>184    </ChartCard>185  );186}187