New charts

app/dashboard/page.tsx

@@ -2,6 +2,7 @@ import { fetchDashboard } from '@/app/actions';
 import AreaChart from '@/components/Charts/AreaChart/AreaChart';
 import BarChart from '@/components/Charts/BarChart/BarChart';
 import DoughnutChart from '@/components/Charts/DoughnutChart/DoughnutChart';
+import MiddleBarChart from '@/components/Charts/MiddleBarChart/MiddleBarChart';
 import PlayersBarChart from '@/components/Charts/PlayersBarChart/PlayersBarChart';
 import RadarChart from '@/components/Charts/RadarChart/RadarChart';
 import FilterButtons from '@/components/Dashboard/FilterButtons/FilterButtons';
@@ -146,6 +147,9 @@ export default async function page({
             <GridCard title={'Winrate by mod'}>
               <RadarChart winRateModData={data?.modStats} />
             </GridCard>
+            {/* <GridCard title={'Teammates W/L'}>
+          <MiddleBarChart />
+        </GridCard> */}
             <GridCard title={'Average score per mod'}>
               <RadarChart averageModScore={data?.modStats} />
             </GridCard>

app/globals.css

@@ -107,11 +107,22 @@
   --mods-FM-bg-row: 101, 38%, 63%, 0.15;
   --mods-TB-bg: 191, 26%, 57%;
   --mods-TB-bg-row: 191, 26%, 57%, 0.15;
+  --mods-Others-bg: 291, 97%, 73%;
+  --mods-Others-bg-row: 291, 97%, 73%, 0.15;
 
   --accent-color: 216, 100%, 65%;
   --accent-secondary-color: var(--blue-300);
 
   /* CHARTS */
+  --chart-canvas-background-white: 0, 100%, 100%;
+  --chart-canvas-background-dark: 220, 9%, 6%;
+  --chart-canvas-background-inner-lines-white: 0, 0%, 93%;
+  --chart-canvas-background-inner-lines-dark: 220, 4%, 14%;
+  --chart-canvas-text-color-white: 0, 0%, 40%, 1;
+  --chart-canvas-text-color-dark: 0, 0%, 92%, 0.8;
+  --chart-canvas-scales-background-white: var(--background-content-hsl);
+  --chart-canvas-scales-background-dark: 240, 6%, 10%;
+  --chart-players-bar-color: 216, 100%, 65%;
   --tooltip-color: 0, 0%, 100%;
   --tooltip-gain: var(--green-400);
   --tooltip-loss: var(--red-400);
@@ -242,11 +253,22 @@
   --mods-FM-bg-row: 101, 38%, 63%, 0.15;
   --mods-TB-bg: 191, 26%, 57%;
   --mods-TB-bg-row: 191, 26%, 57%, 0.15;
+  --mods-Others-bg: 291, 97%, 73%;
+  --mods-Others-bg-row: 291, 97%, 73%, 0.15;
 
   --accent-color: 216, 100%, 65%;
   --accent-secondary-color: var(--blue-400);
 
   /* CHARTS */
+  --chart-canvas-background-white: 0, 100%, 100%;
+  --chart-canvas-background-dark: 220, 9%, 6%;
+  --chart-canvas-background-inner-lines-white: 0, 0%, 93%;
+  --chart-canvas-background-inner-lines-dark: 220, 4%, 14%;
+  --chart-canvas-text-color-white: 0, 0%, 40%, 1;
+  --chart-canvas-text-color-dark: 0, 0%, 92%, 0.8;
+  --chart-canvas-scales-background-white: 220, 14%, 96%;
+  --chart-canvas-scales-background-dark: var(--background-content-hsl);
+  --chart-players-bar-color: 216, 100%, 65%;
   --tooltip-color: 0, 0%, 100%;
   --tooltip-gain: var(--green-400);
   --tooltip-loss: var(--red-400);
@@ -315,6 +337,30 @@ button {
   font-family: var(--font-families);
 }
 
+.graphs_basic_tooltip {
+  background-color: hsla(var(--background-hsl));
+  box-shadow: 0px 12px 25px 0px hsla(0, 0%, 0%, 0.1);
+  border-radius: 0.7rem;
+  padding: 0.8rem;
+  display: flex;
+  flex-flow: column;
+  gap: 0.5rem 0;
+  font-weight: 400;
+  font-size: 1.05rem;
+  z-index: 2;
+}
+
+.graphs_basic_tooltip-row {
+  width: 100%;
+  display: inline-flex;
+  flex-flow: row;
+  gap: 0 0.4rem;
+}
+
+.graphs_basic_tooltip-row span {
+  font-weight: 600;
+}
+
 /* Mobile */
 @media (max-width: 700px) {
   :root {

app/users/[id]/page.tsx

@@ -2,6 +2,7 @@ import { fetchUserPage, fetchUserPageTitle } from '@/app/actions';
 import AreaChart from '@/components/Charts/AreaChart/AreaChart';
 import BarChart from '@/components/Charts/BarChart/BarChart';
 import DoughnutChart from '@/components/Charts/DoughnutChart/DoughnutChart';
+import MiddleBarChart from '@/components/Charts/MiddleBarChart/MiddleBarChart';
 import PlayersBarChart from '@/components/Charts/PlayersBarChart/PlayersBarChart';
 import RadarChart from '@/components/Charts/RadarChart/RadarChart';
 import FilterButtons from '@/components/Dashboard/FilterButtons/FilterButtons';
@@ -152,6 +153,9 @@ export default async function page({
             <GridCard title={'Winrate by mod'}>
               <RadarChart winRateModData={data?.modStats} />
             </GridCard>
+            {/* <GridCard title={'Teammates W/L'}>
+          <MiddleBarChart />
+        </GridCard> */}
             <GridCard title={'Average score per mod'}>
               <RadarChart averageModScore={data?.modStats} />
             </GridCard>

components/Charts/AreaChart/AreaChart.tsx

@@ -17,6 +17,9 @@ import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 import { Line } from 'react-chartjs-2';
 import styles from './AreaChart.module.css';
+import customChartBackground from '@/lib/chartjs-plugins/customChartBackground';
+import customChartScaleXBackground from '@/lib/chartjs-plugins/customChartScaleXBackground';
+import customChartScaleYBackground from '@/lib/chartjs-plugins/customChartScaleYBackground';
 
 import 'chartjs-adapter-date-fns';
 ChartJS.register(
@@ -67,13 +70,30 @@ export default function AreaChart({
   rankChart?: [];
 }) {
   const [colors, setColors] = useState<string[]>([]);
-
   const [font, setFont] = useState('');
+  const [textColor, setTextColor] = useState([]);
+  const [canvasColor, setCanvasColor] = useState([undefined, undefined]);
+  const [canvasInnerLinesColor, setCanvasInnerLinesColor] = useState([
+    undefined,
+    undefined,
+  ]);
+  const [canvasScalesColor, setCanvasScalesColor] = useState([
+    undefined,
+    undefined,
+  ]);
 
   const { theme } = useTheme();
 
   /* get variables of colors from CSS */
   useEffect(() => {
+    setCanvasColor([
+      getComputedStyle(document.documentElement).getPropertyValue(
+        '--chart-canvas-background-white'
+      ),
+      getComputedStyle(document.documentElement).getPropertyValue(
+        '--chart-canvas-background-dark'
+      ),
+    ]);
     setColors([
       getComputedStyle(document.documentElement).getPropertyValue(
         '--accent-color'
@@ -84,6 +104,30 @@ export default function AreaChart({
         '--font-families'
       )
     );
+    setTextColor([
+      getComputedStyle(document.documentElement).getPropertyValue(
+        '--chart-canvas-text-color-white'
+      ),
+      getComputedStyle(document.documentElement).getPropertyValue(
+        '--chart-canvas-text-color-dark'
+      ),
+    ]);
+    setCanvasInnerLinesColor([
+      getComputedStyle(document.documentElement).getPropertyValue(
+        '--chart-canvas-background-inner-lines-white'
+      ),
+      getComputedStyle(document.documentElement).getPropertyValue(
+        '--chart-canvas-background-inner-lines-dark'
+      ),
+    ]);
+    setCanvasScalesColor([
+      getComputedStyle(document.documentElement).getPropertyValue(
+        '--chart-canvas-scales-background-white'
+      ),
+      getComputedStyle(document.documentElement).getPropertyValue(
+        '--chart-canvas-scales-background-dark'
+      ),
+    ]);
   }, []);
 
   const dateFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
@@ -93,12 +137,6 @@ export default function AreaChart({
   let tournamentsTooltip: object[];
 
   if (ratingStats) {
-    const currentDay = new Date().toLocaleDateString(
-      'en-US',
-      dateFormatOptions
-    );
-    let latestRating = 0;
-
     labels = ratingStats.map((day) => {
       return new Date(day[0].timestamp).toLocaleDateString(
         'en-US',
@@ -121,21 +159,13 @@ export default function AreaChart({
 
     dataForGraph = ratingStats.map((day) => {
       if (day.length > 1) {
-        latestRating = day[day.length - 1].ratingAfter.toFixed(0);
         return day[day.length - 1].ratingAfter.toFixed(0);
       }
 
       if (day.length === 1) {
-        latestRating = day[0].ratingAfter.toFixed(0);
         return day[0].ratingAfter.toFixed(0);
       }
     });
-
-    labels.push(currentDay);
-    tournamentsTooltip.push([
-      { name: 'Decay', ratingChange: 0, timestamp: currentDay },
-    ]);
-    dataForGraph.push(latestRating);
   }
 
   /* if (rankChart) {
@@ -151,10 +181,11 @@ export default function AreaChart({
         label: '',
         data: dataForGraph,
         borderWidth: 3,
-        borderColor:
-          theme === 'light'
+        borderColor: colors[0]
+          ? theme === 'light'
             ? `hsla(${colors[0]}, 0.6)`
-            : `hsla(${colors[0]}, 0.82)`,
+            : `hsla(${colors[0]}, 0.82)`
+          : 'transparent',
         backgroundColor: 'transparent',
         font: font,
       },
@@ -265,6 +296,27 @@ export default function AreaChart({
         position: 'nearest',
         external: ratingStats ? externalTooltipHandler : null,
       },
+      customCanvasBackgroundColor: {
+        color: canvasColor[0]
+          ? theme === 'light'
+            ? `hsl(${canvasColor[0]})`
+            : `hsl(${canvasColor[1]})`
+          : undefined,
+      },
+      customCanvasScaleXBackgroundColor: {
+        color: canvasScalesColor[0]
+          ? theme === 'light'
+            ? `hsl(${canvasScalesColor[0]})`
+            : `hsl(${canvasScalesColor[1]})`
+          : 'transparent',
+      },
+      customCanvasScaleYBackgroundColor: {
+        color: canvasScalesColor[0]
+          ? theme === 'light'
+            ? `hsl(${canvasScalesColor[0]})`
+            : `hsl(${canvasScalesColor[1]})`
+          : 'transparent',
+      },
     },
     elements: {
       line: {
@@ -273,8 +325,11 @@ export default function AreaChart({
       point: {
         radius: 0 /* 0 makes points hidden */,
         hitRadius: 100,
-        pointBackgroundColor:
-          theme === 'light' ? `hsla(${colors[0]}, 0.6)` : `hsla(${colors[0]})`,
+        pointBackgroundColor: colors[0]
+          ? theme === 'light'
+            ? `hsla(${colors[0]}, 0.6)`
+            : `hsla(${colors[0]})`
+          : 'transparent',
       },
     },
     maintainAspectRatio: false,
@@ -295,47 +350,67 @@ export default function AreaChart({
             size: 16,
             family: font,
           },
-          color: theme === 'dark' ? '#999' : '#707070',
+          color:
+            theme === 'light'
+              ? `hsla(${textColor[0]})`
+              : `hsla(${textColor[1]})`,
           autoSkip: true,
           maxTicksLimit: 7,
           major: { enabled: true },
+          z: 2,
         },
         grid: {
-          color:
-            theme === 'dark' ? 'rgba(250,250,250,0.028)' : 'rgba(0,0,0,0.08)',
+          color: canvasInnerLinesColor[0]
+            ? theme === 'light'
+              ? `hsla(${canvasInnerLinesColor[0]})`
+              : `hsla(${canvasInnerLinesColor[1]})`
+            : 'transparent',
         },
         border: {
-          color:
-            theme === 'dark' ? 'rgba(250,250,250,0.040)' : 'rgba(0,0,0,0.08)',
+          display: false,
         },
       },
       y: {
         border: {
-          color:
-            theme === 'dark' ? 'rgba(250,250,250,0.040)' : 'rgba(0,0,0,0.08)',
+          display: false,
         },
         grid: {
-          color:
-            theme === 'dark' ? 'rgba(250,250,250,0.028)' : 'rgba(0,0,0,0.08)',
+          color: canvasInnerLinesColor[0]
+            ? theme === 'light'
+              ? `hsla(${canvasInnerLinesColor[0]})`
+              : `hsla(${canvasInnerLinesColor[1]})`
+            : 'transparent',
         },
         ticks: {
           font: {
             size: 16,
             family: font,
           },
-          color: theme === 'dark' ? '#999' : '#707070',
+          color:
+            theme === 'light'
+              ? `hsla(${textColor[0]})`
+              : `hsla(${textColor[1]})`,
           autoSkip: true,
           maxTicksLimit: 6,
           precision: 0,
           stepSize: 15,
+          z: 2,
         },
       },
     },
   };
 
   return (
     <div className={styles.graphContainer}>
-      <Line options={options} data={data} />
+      <Line
+        options={options}
+        data={data}
+        plugins={[
+          customChartBackground,
+          customChartScaleXBackground,
+          customChartScaleYBackground,
+        ]}
+      />
     </div>
   );
 }