harshapitla/github-actions-analytics

1import React, { useMemo } from "react";2import {3  ResponsiveContainer,4  BarChart,5  Bar,6  XAxis,7  YAxis,8  CartesianGrid,9  Tooltip,10  Cell,11} from "recharts";12import ChartCard from "../components/charts/ChartCard";13 14const COLORS = [15  "#8884d8",16  "#82ca9d",17  "#ffc658",18  "#ff7c7c",19  "#8dd1e1",20  "#d084d0",21  "#ffb347",22  "#87ceeb",23  "#dda0dd",24  "#98fb98",25];26 27function CustomTooltip({ active, payload, label }) {28  if (active && payload && payload.length) {29    return (30      <div31        style={{32          background: "rgba(5, 18, 35, 0.9)",33          padding: "8px 12px",34          borderRadius: 6,35          border: "1px solid #334155",36        }}37      >38        <div style={{ marginBottom: 4, fontWeight: "bold" }}>Page {label}</div>39        <div style={{ color: payload[0].color }}>40          Actions: {payload[0].value}41        </div>42        <div style={{ fontSize: 12, color: "#94a3b8", marginTop: 4 }}>43          {((payload[0].value / payload[0].payload.total) * 100).toFixed(1)}% of44          total actions45        </div>46      </div>47    );48  }49  return null;50}51 52export default function PageWiseDistributionChart({ rows = [] }) {53  const pageData = useMemo(() => {54    if (!Array.isArray(rows)) return [];55 56    const pageCounts = {};57 58    rows.forEach((row) => {59      const pageNumber = parseInt(row.page_number);60      if (!isNaN(pageNumber)) {61        pageCounts[pageNumber] = (pageCounts[pageNumber] || 0) + 1;62      }63    });64 65    // Convert to array and sort by page number66    const sortedPages = Object.entries(pageCounts)67      .map(([page, count]) => ({68        page: parseInt(page),69        count,70        total: rows.length,71      }))72      .sort((a, b) => a.page - b.page); // Sort by page number ascending73 74    return sortedPages;75  }, [rows]);76 77  if (!pageData.length) {78    return (79      <ChartCard80        title="Page-wise Distribution"81        subtitle="How actions are spread across marketplace pages"82      >83        <p className="small">No page data available to display.</p>84      </ChartCard>85    );86  }87 88  return (89    <ChartCard90      title="Page-wise Distribution"91      subtitle="How actions are spread across marketplace pages"92    >93      <div style={{ height: 400 }}>94        <ResponsiveContainer>95          <BarChart96            data={pageData}97            margin={{ top: 20, right: 30, left: 20, bottom: 60 }}98          >99            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />100            <XAxis101              dataKey="page"102              stroke="#94a3b8"103              tickFormatter={(value) => `Page ${value}`}104              angle={-45}105              textAnchor="end"106              height={60}107            />108            <YAxis stroke="#94a3b8" tickFormatter={(value) => `${value}`} />109            <Tooltip content={<CustomTooltip />} />110            <Bar dataKey="count" name="Actions" radius={[4, 4, 0, 0]}>111              {pageData.map((entry, index) => (112                <Cell113                  key={`cell-${index}`}114                  fill={COLORS[index % COLORS.length]}115                />116              ))}117            </Bar>118          </BarChart>119        </ResponsiveContainer>120      </div>121 122      <div123        style={{124          marginTop: 16,125          fontSize: 12,126          color: "#94a3b8",127          textAlign: "center",128        }}129      >130        <div>131          📊 Showing distribution across {pageData.length} pages with actions132        </div>133        <div style={{ marginTop: 4 }}>134          Total actions: {pageData[0]?.total || 0}135        </div>136      </div>137    </ChartCard>138  );139}140