react-charts-sm/src/index.js

A package providing bar and circle charts

import React, { useEffect, useState } from "react";
import "./circleChart.scss";
import "./bar.scss";

// CircleChart Component
export const CircleChart = ({
  percentage,
  radius,
  strokeWidth,
  progressColor,
  label,
}) => {
  const circumference = 2 * Math.PI * radius;
  const initialOffset = circumference - (percentage / 100) * circumference;

  const [offset, setOffset] = useState(initialOffset);
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    if (isMounted) {
      const newOffset = circumference - (percentage / 100) * circumference;
      setOffset(newOffset);
    } else {
      setIsMounted(true);
    }
  }, [percentage, circumference, isMounted]);

  return (
    <div className="circle-wrapper d-flex flex-column justify-content-center align-items-center">
      <div className="circle-chart">
        <svg width="120" height="120">
          <circle
            className="circle-bg"
            cx="60"
            cy="60"
            r={radius}
            strokeWidth={strokeWidth}
          />
          <circle
            className="circle-progress"
            cx="60"
            cy="60"
            r={radius}
            strokeWidth={strokeWidth}
            strokeDasharray={circumference}
            strokeDashoffset={offset}
            style={{ stroke: progressColor }}
          />
          <text
            x="50%"
            y="50%"
            textAnchor="middle"
            dy=".3em"
            className="circle-text fw-bold fs-14"
          >
            {percentage}%
          </text>
        </svg>
      </div>
      <p className="circle-label fs-13 text-wrap">{label}</p>
    </div>
  );
};

// Bar Component
export const Bar = ({ value, label, barColor, progressColor }) => {
  const [barFill, setBarFill] = useState(0);

  useEffect(() => {
    if (value >= 0 && value <= 100) {
      setBarFill(value);
    } else {
      console.log("Please enter a value between 0 to 100");
    }
  }, [value]);

  return (
    <div className="bar-wrapper">
      <p className="">{barFill}%</p>
      <div className="bar-container" style={{ backgroundColor: `${barColor}` }}>
        <div
          className="bar-fill"
          style={{
            height: `${barFill}%`,
            backgroundColor: `${progressColor}`,
          }}
        ></div>
      </div>
      <p className="bar-label">{label}</p>
    </div>
  );
};