// Copyright (c) 2021, Marcelo Jorge Vieira // Licensed under the BSD 3-Clause License import { useTheme } from "@material-ui/core"; import React from "react"; import { Tooltip, PieChart, Pie, ResponsiveContainer, Cell } from "recharts"; import { chartColors } from "./chartColors"; import ChartTooltip from "./ChartTooltip"; const WalletPieChart = ({ data, outerRadius }) => { const theme = useTheme(); const RADIAN = Math.PI / 180; const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, index, name, }) => { const radius = 25 + innerRadius + (outerRadius - innerRadius); const x = cx + radius * Math.cos(-midAngle * RADIAN); const y = cy + radius * Math.sin(-midAngle * RADIAN); return ( <text x={x} y={y} textAnchor={x > cx ? "start" : "end"} dominantBaseline="central" style={{ fill: theme.palette.secondary.main }} > {name} </text> ); }; return ( <ResponsiveContainer> <PieChart> <Pie data={data} cx="50%" cy="50%" outerRadius={outerRadius} dataKey="value" label={renderCustomizedLabel} > {data.map((entry, index) => ( <Cell key={`cell-${index}`} fill={chartColors[index % chartColors.length]} /> ))} </Pie> <Tooltip content={<ChartTooltip />} /> </PieChart> </ResponsiveContainer> ); }; export default WalletPieChart;