harshapitla/github-actions-analytics

1import React, { useMemo } from "react";2import {3  ResponsiveContainer,4  CartesianGrid,5  XAxis,6  YAxis,7  Tooltip,8  ScatterChart,9  Scatter,10} from "recharts";11import ChartCard from "../components/charts/ChartCard";12 13export default function PopularityMaintenanceHeatmapChart({ rows = [] }) {14  const data = useMemo(() => {15    const bins = {};16 17    rows.forEach((r) => {18      const stars = Number(r.no_of_stars) || 0;19      const issues = Number(r.no_of_open_issues) || 0;20      if (stars <= 0) return;21 22      const starBucket = stars < 100 ? "Low" : stars < 1000 ? "Medium" : "High";23      const issueBucket = issues < 5 ? "Low" : issues < 15 ? "Medium" : "High";24 25      const key = `${starBucket}-${issueBucket}`;26      bins[key] = (bins[key] || 0) + 1;27    });28 29    return Object.entries(bins).map(([k, count]) => {30      const [stars, issues] = k.split("-");31      return { stars, issues, count };32    });33  }, [rows]);34 35  return (36    <ChartCard37      title="Popularity vs Maintenance Load (Distribution)"38      subtitle="Where GitHub Actions cluster by popularity and unresolved issues"39    >40      <div style={{ height: 420 }}>41        <ResponsiveContainer>42          <ScatterChart>43            <CartesianGrid strokeDasharray="3 3" />44            <XAxis45              dataKey="stars"46              type="category"47              label={{ value: "Popularity (Stars)", position: "insideBottom" }}48            />49            <YAxis50              dataKey="issues"51              type="category"52              label={{53                value: "Unresolved Issues",54                angle: -90,55                position: "insideLeft",56              }}57            />58            <Tooltip />59            <Scatter data={data} dataKey="count" fill="#38bdf8" />60          </ScatterChart>61        </ResponsiveContainer>62      </div>63      <p className="small">64        Heavier clusters in the high–high area indicate ecosystem maintenance65        risk.66      </p>67    </ChartCard>68  );69}70