harshapitla/github-actions-analytics

1import React, { useMemo } from "react";2import {3  ScatterChart,4  Scatter,5  XAxis,6  YAxis,7  CartesianGrid,8  Tooltip,9  ResponsiveContainer,10  Label,11} from "recharts";12import ChartCard from "../components/charts/ChartCard";13 14function CustomTooltip({ active, payload }) {15  if (active && payload && payload.length) {16    const data = payload[0].payload;17    return (18      <div19        style={{20          background: "rgba(5, 18, 35, 0.9)",21          padding: "8px 12px",22          borderRadius: 6,23          border: "1px solid #334155",24          maxWidth: "300px",25        }}26      >27        <div style={{ marginBottom: 4, fontWeight: "bold" }}>28          {data.action_title}29        </div>30        <div style={{ color: "#8884d8" }}>31          Position: {data.position_on_page}32        </div>33        <div style={{ color: "#ff7c7c" }}>34          Open Issues: {data.no_of_open_issues}35        </div>36        <div style={{ fontSize: 12, color: "#94a3b8", marginTop: 4 }}>37          Publisher: {data.publisher}38        </div>39      </div>40    );41  }42  return null;43}44 45export default function PositionVsIssuesChart({ rows = [] }) {46  const scatterData = useMemo(() => {47    if (!Array.isArray(rows)) return [];48 49    return rows50      .map((row) => {51        const position = parseInt(row.position_on_page) || 0;52        const issues = parseInt(row.no_of_open_issues) || 0;53 54        return {55          x: position,56          y: issues,57          position_on_page: position,58          no_of_open_issues: issues,59          action_title: row.action_title || row.name || "Unknown Action",60          publisher: row.publisher || "(unknown)",61        };62      })63      .filter(64        (point) => point.position_on_page > 0 && point.position_on_page <= 2065      ); // Focus on first page positions66  }, [rows]);67 68  if (!scatterData.length) {69    return (70      <ChartCard71        title="Position vs Open Issues"72        subtitle="Checks if top-ranked actions are better maintained"73      >74        <p className="small">75          No position and issues data available to display.76        </p>77      </ChartCard>78    );79  }80 81  return (82    <ChartCard83      title="Position vs Open Issues"84      subtitle="Checks if top-ranked actions are better maintained"85    >86      <div style={{ height: 400 }}>87        <ResponsiveContainer>88          <ScatterChart89            data={scatterData}90            margin={{ top: 20, right: 30, left: 20, bottom: 40 }}91          >92            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />93            <XAxis94              type="number"95              dataKey="x"96              name="Position on Page"97              domain={[1, 20]}98              ticks={[1, 5, 10, 15, 20]}99            >100              <Label101                value="Position on Page"102                offset={-5}103                position="insideBottom"104              />105            </XAxis>106            <YAxis107              type="number"108              dataKey="y"109              name="Open Issues"110              domain={[0, "dataMax"]}111            >112              <Label value="Open Issues" angle={-90} position="insideLeft" />113            </YAxis>114            <Tooltip content={<CustomTooltip />} />115            <Scatter116              name="Actions"117              data={scatterData}118              fill="#8884d8"119              fillOpacity={0.6}120            />121          </ScatterChart>122        </ResponsiveContainer>123      </div>124    </ChartCard>125  );126}127