104 lines
3.6 KiB
JavaScript
104 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import { BarChart } from '@mui/x-charts/BarChart';
|
|
import { PieChart } from '@mui/x-charts/PieChart';
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
|
|
const darkTheme = createTheme({
|
|
palette: {
|
|
mode: 'dark',
|
|
background: { paper: 'transparent' },
|
|
},
|
|
typography: {
|
|
fontFamily: '\'Rajdhani\', sans-serif',
|
|
},
|
|
});
|
|
|
|
const WIN_COLOR = '#5ee89a';
|
|
const LOSS_COLOR = '#f67d52';
|
|
const DRAW_COLOR = '#95cff5';
|
|
|
|
const axisStyle = {
|
|
tickLabelStyle: { fill: 'rgba(255,255,255,0.4)', fontSize: 11, fontFamily: '\'Rajdhani\', sans-serif' },
|
|
labelStyle: { fill: 'rgba(255,255,255,0.4)', fontSize: 11, fontFamily: '\'Rajdhani\', sans-serif' },
|
|
};
|
|
|
|
export default function ProfileCharts({ chartData }) {
|
|
const { months, wins, losses, draws, pieWins, pieLosses, pieDraws } = chartData;
|
|
const total = pieWins + pieLosses + pieDraws;
|
|
|
|
const hasBars = wins.some(v => 0 < v) || losses.some(v => 0 < v) || draws.some(v => 0 < v);
|
|
|
|
return (
|
|
<ThemeProvider theme={darkTheme}>
|
|
<div className="profile-charts">
|
|
{0 < total && (
|
|
<div className="profile-chart-block">
|
|
<h2 className="profile-section__title">
|
|
<i className="fa fa-pie-chart" /> Result Breakdown
|
|
</h2>
|
|
<div className="profile-chart-inner">
|
|
<PieChart
|
|
series={[{
|
|
data: [
|
|
{ id: 0, value: pieWins, label: `Wins ${pieWins}`, color: WIN_COLOR },
|
|
{ id: 1, value: pieLosses, label: `Losses ${pieLosses}`, color: LOSS_COLOR },
|
|
{ id: 2, value: pieDraws, label: `Draws ${pieDraws}`, color: DRAW_COLOR },
|
|
],
|
|
innerRadius: 52,
|
|
paddingAngle: 3,
|
|
cornerRadius: 4,
|
|
highlightScope: { fade: 'global', highlight: 'item' },
|
|
}]}
|
|
slotProps={{
|
|
legend: {
|
|
labelStyle: {
|
|
fill: 'rgba(255,255,255,0.55)',
|
|
fontSize: 13,
|
|
fontFamily: '\'Rajdhani\', sans-serif',
|
|
},
|
|
},
|
|
}}
|
|
width={320}
|
|
height={200}
|
|
margin={{ top: 10, bottom: 10, left: 10, right: 120 }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{hasBars && (
|
|
<div className="profile-chart-block">
|
|
<h2 className="profile-section__title">
|
|
<i className="fa fa-bar-chart" /> Activity (6 months)
|
|
</h2>
|
|
<div className="profile-chart-inner">
|
|
<BarChart
|
|
xAxis={[{ scaleType: 'band', data: months, ...axisStyle }]}
|
|
yAxis={[{ ...axisStyle }]}
|
|
series={[
|
|
{ data: wins, label: 'Wins', color: WIN_COLOR, stack: 'total' },
|
|
{ data: losses, label: 'Losses', color: LOSS_COLOR, stack: 'total' },
|
|
{ data: draws, label: 'Draws', color: DRAW_COLOR, stack: 'total' },
|
|
]}
|
|
slotProps={{
|
|
legend: {
|
|
labelStyle: {
|
|
fill: 'rgba(255,255,255,0.55)',
|
|
fontSize: 13,
|
|
fontFamily: '\'Rajdhani\', sans-serif',
|
|
},
|
|
},
|
|
}}
|
|
borderRadius={3}
|
|
width={460}
|
|
height={200}
|
|
margin={{ top: 10, bottom: 30, left: 30, right: 120 }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|