feat: add epam mentors stats (#2426)

client/src/modules/AdminDashboard/components/CountriesChart/CountriesChart.tsx

@@ -2,10 +2,7 @@ import { Bar, BarConfig } from '@ant-design/plots';
 import { Flex, Image, Typography } from 'antd';
 import { CountryStatDto } from 'api';
 import { useCallback, useMemo } from 'react';
-
-export enum Colors {
-  purple = '#9c80f7',
-}
+import { Colors } from '../data';
 
 type Props = {
   data: CountryStatDto[];
@@ -24,7 +21,7 @@ type Datum = Parameters<typeof Bar>[0]['data'][number];
 
 const { Text } = Typography;
 
-function CountriesChart({ data, activeCount, xAxisTitle, color }: Props) {
+function CountriesChart({ data, activeCount, xAxisTitle, color = 'Blue' }: Props) {
   const tooltipFormatter = useCallback(
     (datum: Datum) => {
       const percentage = activeCount ? Math.ceil((datum.count / activeCount) * 100) : 0;
@@ -49,7 +46,7 @@ function CountriesChart({ data, activeCount, xAxisTitle, color }: Props) {
       scrollbar: { type: 'vertical' },
       //Why this affects the size of the chart, I don't know. Do not delete.
       seriesField: 'type',
-      color: () => color || '#1890ff',
+      color: () => Colors[color],
     }),
     [data, tooltipFormatter],
   );

client/src/modules/AdminDashboard/components/EpamMentorsStatsCard/EpamMentorsStatsCard.tsx

@@ -0,0 +1,28 @@
+import { Card, Typography } from 'antd';
+import { CourseMentorsStatsDto } from 'api';
+import dynamic from 'next/dynamic';
+
+type Props = {
+  mentorsStats: CourseMentorsStatsDto;
+};
+
+const { Text } = Typography;
+
+const MentorsStatsChart = dynamic(() => import('../LiquidChart/LiquidChart'), { ssr: false });
+
+export const EpamMentorsStatsCard = ({ mentorsStats }: Props) => {
+  return (
+    <Card title="Epam Mentors">
+      <Text strong>
+        Epam Mentors: {mentorsStats.epamMentorsCount} / {mentorsStats.mentorsActiveCount}
+      </Text>
+      <div style={{ height: 200, width: '100%' }}>
+        <MentorsStatsChart
+          count={mentorsStats.epamMentorsCount}
+          total={mentorsStats.mentorsActiveCount}
+          color="Purple"
+        />
+      </div>
+    </Card>
+  );
+};

client/src/modules/AdminDashboard/components/EpamMentorsStatsCard/index.tsx

@@ -0,0 +1 @@
+export { EpamMentorsStatsCard } from './EpamMentorsStatsCard';

client/src/modules/AdminDashboard/components/StudentsStatsCard/StudentsStatsChart.tsx → client/src/modules/AdminDashboard/components/LiquidChart/LiquidChart.tsx

@@ -1,12 +1,14 @@
 import { Liquid, LiquidConfig } from '@ant-design/plots';
-import { CourseStatsDto } from 'api';
+import { Colors } from '../data';
 
 type Props = {
-  studentsStats: CourseStatsDto;
+  count: number;
+  total: number;
+  color?: keyof typeof Colors;
 };
 
-function StudentsStatsChart({ studentsStats }: Props) {
-  const percent = studentsStats.studentsActiveCount / studentsStats.studentsTotalCount;
+function LiquidChart({ count, total, color = 'Blue' }: Props) {
+  const percent = count / total;
   const config: LiquidConfig = {
     percent: percent,
     outline: {
@@ -16,8 +18,9 @@ function StudentsStatsChart({ studentsStats }: Props) {
     wave: {
       length: 128,
     },
+    color: () => Colors[color],
   };
   return <Liquid {...config} />;
 }
 
-export default StudentsStatsChart;
+export default LiquidChart;

client/src/modules/AdminDashboard/components/MentorsCountriesCard/MentorsCountriesCard.tsx

@@ -14,7 +14,7 @@ export const MentorsCountriesCard = ({ countriesStats, activeCount }: Props) =>
   return (
     <Card title="Mentors Countries Stats">
       <div style={{ height: 400, width: '100%' }}>
-        <CountriesChart data={countries} activeCount={activeCount} xAxisTitle={'Number of Students'} color={'purple'} />
+        <CountriesChart data={countries} activeCount={activeCount} xAxisTitle={'Number of Students'} color={'Purple'} />
       </div>
     </Card>
   );

client/src/modules/AdminDashboard/components/StudentsStatsCard/StudentsStatsCard.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 const { Text } = Typography;
 
-const StudentsStatsChart = dynamic(() => import('./StudentsStatsChart'), { ssr: false });
+const StudentsStatsChart = dynamic(() => import('../LiquidChart/LiquidChart'), { ssr: false });
 
 export const StudentsStatsCard = ({ studentsStats }: Props) => {
   return (
@@ -17,7 +17,7 @@ export const StudentsStatsCard = ({ studentsStats }: Props) => {
         Active Students: {studentsStats.studentsActiveCount} / {studentsStats.studentsTotalCount}
       </Text>
       <div style={{ height: 200, width: '100%' }}>
-        <StudentsStatsChart studentsStats={studentsStats} />
+        <StudentsStatsChart count={studentsStats.studentsActiveCount} total={studentsStats.studentsTotalCount} />
       </div>
     </Card>
   );

client/src/modules/AdminDashboard/components/data.ts

@@ -0,0 +1,6 @@
+export enum Colors {
+  Purple = '#9254de',
+  Gold = '#613400',
+  Blue = '#1677ff',
+  Volcano = '#fa541c',
+}

client/src/modules/AdminDashboard/pages/AdminDashboard.tsx

@@ -6,6 +6,7 @@ import { useCourseStats } from '../hooks';
 import { StudentsStatsCard } from '../components/StudentsStatsCard';
 import css from 'styled-jsx/css';
 import { MentorsCountriesCard } from '../components/MentorsCountriesCard/MentorsCountriesCard';
+import { EpamMentorsStatsCard } from '../components/EpamMentorsStatsCard';
 
 const gapSize = 24;
 
@@ -44,6 +45,10 @@ function AdminDashboard() {
           />
         ),
       },
+    stats?.mentorsStats.epamMentorsCount && {
+      title: 'mentorsStatsCard',
+      component: <EpamMentorsStatsCard mentorsStats={stats.mentorsStats} />,
+    },
   ].filter(Boolean);
 
   return (