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";12import InsightsBox from "../components/insights/InsightsBox";13 14/* ---------- Helpers ---------- */15const truncate = (text, max = 32) =>16  text.length > max ? text.slice(0, max) + "…" : text;17 18/* ================= CHART ================= */19export default function IssueBacklogRatioChart({ rows = [] }) {20  const data = useMemo(() => {21    if (!Array.isArray(rows)) return [];22 23    return rows24      .map((r) => {25        const issues = Number(r.no_of_open_issues) || 0;26        const prs = Number(r.no_of_PRs) || 0;27 28        if (issues === 0) return null;29 30        return {31          name: r.action_title || "Unknown Action",32          ratio: Number((issues / (prs + 1)).toFixed(2)),33        };34      })35      .filter(Boolean)36      .sort((a, b) => b.ratio - a.ratio)37      .slice(0, 15);38  }, [rows]);39 40  if (!data.length) {41    return (42      <ChartCard43        title="Are Issues Piling Up?"44        subtitle="No enough issue or PR data available"45      >46        <p className="small">Nothing to analyze.</p>47      </ChartCard>48    );49  }50 51  return (52    <ChartCard53      title="Issue Backlog Pressure"54      subtitle="How many open issues exist for each active pull request"55    >56      <div style={{ height: 500 }}>57        <ResponsiveContainer>58          <BarChart59            data={data}60            layout="vertical"61            margin={{ top: 10, right: 30, left: 50, bottom: 10 }}62          >63            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />64 65            {/* X AXIS */}66            <XAxis67              type="number"68              tick={{ fill: "#475569", fontSize: 12 }}69              label={{70                value: "Open issues per pull request",71                position: "insideBottom",72                offset: -5,73                fill: "#475569",74              }}75            />76 77            {/* Y AXIS */}78            <YAxis79              type="category"80              dataKey="name"81              width={280}82              tick={{ fill: "#475569", fontSize: 12 }}83              tickFormatter={(v) => truncate(v)}84            />85 86            <Tooltip87              formatter={(value) => [`${value}`, "Issue backlog ratio"]}88              labelFormatter={(label) => `Action: ${label}`}89            />90 91            <Bar dataKey="ratio" fill="#f97316" radius={[4, 4, 4, 4]} />92          </BarChart>93        </ResponsiveContainer>94      </div>95 96      {/* ================= SIMPLE EXPLANATION ================= */}97      <p className="small center" style={{ marginTop: 10 }}>98        Higher bars mean more issues are waiting compared to active pull99        requests.100      </p>101 102      {/* ================= INSIGHTS ================= */}103      <InsightsBox104        points={[105          "Some actions receive many issues but very few pull requests.",106          "This means maintainers may be overloaded or inactive.",107          "A high ratio shows growing backlog and slow progress.",108          "These actions may struggle to keep up in the long term.",109        ]}110      />111 112      {/* ================= FORMULA ================= */}113      <div114        style={{115          marginTop: 10,116          fontSize: 12,117          color: "#64748b",118          textAlign: "center",119        }}120      >121        Formula used:122        <br />123        <strong>124          Issue Backlog Ratio = Open Issues ÷ (Open Pull Requests + 1)125        </strong>126      </div>127    </ChartCard>128  );129}130