Source: componenets/layouts/InsightsGraph.js

/**
 * Component to display insights graph based on completed and incomplete tasks.
 * 
 * This component renders a bar chart graphically representing the count of completed and incomplete tasks.
 * 
 * @module InsightsGraph
 * @param {Object} props - The properties passed to the component.
 * @param {Array} props.tasks - The list of tasks to be used for generating insights.
 */
'use client'

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Chart from 'chart.js/auto';


/**
 * @returns {JSX.Element} The JSX element representing the InsightsGraph component.
 */
const InsightsGraph = ({ tasks }) => {
  const chartRef = React.createRef();
  let myChart;

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    /* eslint-disable */
const completedTasksCount = tasks?.filter((task) => task.completed).length;
const incompleteTasksCount = tasks?.filter((task) => !task.completed).length;

    myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Completed Tasks', 'Incomplete Tasks'],
        datasets: [
          {
            label: 'Tasks Count',
            data: [completedTasksCount, incompleteTasksCount],
            backgroundColor: ['#4CAF50', '#FF5733'],
            barThickness: 20, // Adjust this value to make the bars smaller
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              stepSize: 1,
            },
          },
        },
      },
    });

    return () => {
      if (myChart) {
        myChart.destroy();
      }
    };
  }, [tasks]);

  return (
    <div className="bg-white p-4 rounded shadow-md">
      <div className="flex justify-center items-center">
        <div className="mr-8">
          <p className="text-gray-600">Completed Tasks</p>
          <p className="text-2xl font-bold">{tasks?.filter(task => task.completed).length}</p>
        </div>
        <div>
          <p className="text-gray-600">Incomplete Tasks</p>
          <p className="text-2xl font-bold">{tasks?.filter(task => !task.completed).length}</p>
        </div>
      </div>
      <div className="mt-4">
        <canvas ref={chartRef}  width="400" height="40" ></canvas>
      </div>
    </div>
  );
};

InsightsGraph.propTypes = {
  tasks: PropTypes.arrayOf(
    PropTypes.shape({
      item_id: PropTypes.number.isRequired,
      description: PropTypes.string.isRequired,
      completed: PropTypes.bool.isRequired,
    })
  ).isRequired,
};

export default InsightsGraph;