{"size": 820, "ext": "js", "max_stars_repo_path": "src/components/Dashboard/components/SideBar/BudgetRing.js", "max_stars_repo_name": "BloomTech-Labs/nutrivurv-fe", "max_stars_repo_stars_event_min_datetime": "2020-07-09T02:00:03.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-09T02:00:03.000Z", "max_issues_repo_path": "src/components/Dashboard/components/SideBar/BudgetRing.js", "max_issues_repo_name": "Afrodo1/nutrivurv-fe", "max_issues_repo_issues_event_min_datetime": "2020-06-04T07:59:07.000Z", "max_issues_repo_issues_event_max_datetime": "2020-08-18T03:14:22.000Z", "max_forks_repo_path": "src/components/Dashboard/components/SideBar/BudgetRing.js", "max_forks_repo_name": "Afrodo1/nutrivurv-fe", "max_forks_repo_forks_event_min_datetime": "2020-08-28T03:44:21.000Z", "max_forks_repo_forks_event_max_datetime": "2021-06-05T21:18:37.000Z"}
{"max_stars_count": 1, "max_issues_count": 51, "max_forks_count": 8, "avg_line_length": 20.0, "max_line_length": 67, "alphanum_fraction": 0.5268292683}
import * as React from "react";
import { Chart } from "react-google-charts";

export const BudgetRing = ({ totals, user, size, pH, c1, c2 }) => {
  const total = Math.round(totals);
  const data = [
    ["Budget", "Amount"],
    ["Total Consumed", total],
    ["Remaining", user - total < 0 ? 0 : user - total],
  ];

  const options = {
    pieHole: pH,
    is3D: false,
    legend: {
      position: "none",
    },
    chartArea: {
      width: size,
      height: size,
    },
    backgroundColor: "none",
    enableInteractivity: false,
    fontSize: 12,
    colors: [c1, c2],
    pieSliceText: "none",
  };

  return (
    <div style={{ margin: "10px 0" }}>
      <Chart
        chartType="PieChart"
        width={185}
        height={185}
        data={data}
        options={options}
      />
    </div>
  );
};
