MineSeeker/assets/js/components/ProfileCharts.jsx

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>
  );
}