new: usr: add more stats and a dialog for the recent battle that can be shareable #4

2026-04-12 20:03:20 +02:00
parent fb8a54f687
commit e9c6795eb7
11 changed files with 6679 additions and 10 deletions
--- a/assets/js/components/ProfileCharts.jsx
+++ b/assets/js/components/ProfileCharts.jsx
@@ -0,0 +1,103 @@
+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>
+  );
+}