CoverageChartComponent.js (react-app that uses chart.js + axios to fetch project coverage over the last 14 days from Codecov and visualize/display)

CoverageChartComponent.js

// react-app that uses chart.js + axios to fetch project coverage over the last 14 days from Codecov and visualize/display

// src/components/CoverageChartComponent.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Line } from 'react-chartjs-2';

const CoverageChartComponent = () => {
  const [coverageData, setCoverageData] = useState(null);

  useEffect(() => {
    const fetchCoverageData = async () => {
      try {
        const response = await axios.get(
          'https://codecov.io/api/gh/your-username/your-repo/commits',
          {
            params: {
              page: 1,
              per_page: 14, // Retrieve coverage data for the last 14 days
            },
          }
        );

        const data = response.data;
        setCoverageData(data);
      } catch (error) {
        console.error('Error fetching coverage data:', error);
      }
    };

    fetchCoverageData();
  }, []);

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString();
  };

  const chartData = {
    labels: coverageData?.commits.map((commit) => formatDate(commit.timestamp)),
    datasets: [
      {
        label: 'Coverage %',
        data: coverageData?.commits.map((commit) => commit.total),
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
    ],
  };

  return (
    <div>
      <h1>Codecov Coverage Over the Last 14 Days</h1>
      {coverageData ? (
        <div>
          <Line data={chartData} />
        </div>
      ) : (
        <p>Loading coverage data...</p>
      )}
    </div>
  );
};

export default CoverageChartComponent;