Removed X-axis values, implemented X-axis description manually, implemented mockStats inDevelopment

Author: alwengel

src/client/components/Courses/Course/Stats.tsx

@@ -1,15 +1,9 @@
 import React from 'react'
-import { Paper, Typography } from '@mui/material'
+import { Box, Paper, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
-import {
-  BarChart,
-  Bar,
-  YAxis,
-  Tooltip,
-  XAxis,
-  Label,
-  ResponsiveContainer,
-} from 'recharts'
+import { BarChart, Bar, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
+
+import { inDevelopment } from '../../../../config'
 import { useCourseStatistics } from '../../../hooks/useCourse'
 
 const Stats = ({ courseId }: { courseId: string }) => {
@@ -19,7 +13,48 @@ const Stats = ({ courseId }: { courseId: string }) => {
 
   if (!stats || isLoading) return null
 
-  const { average, usagePercentage, usages } = stats
+  let statsUsed = stats
+
+  if (inDevelopment) {
+    statsUsed = {
+      average: 75,
+      usagePercentage: 0.85,
+      usages: [
+        {
+          id: 'module-1',
+          usageCount: 60,
+          userId: 'user-1',
+          chatInstanceId: 'chat-1',
+        },
+        {
+          id: 'module-2',
+          usageCount: 80,
+          userId: 'user-2',
+          chatInstanceId: 'chat-2',
+        },
+        {
+          id: 'module-3',
+          usageCount: 50,
+          userId: 'user-3',
+          chatInstanceId: 'chat-3',
+        },
+        {
+          id: 'module-4',
+          usageCount: 90,
+          userId: 'user-4',
+          chatInstanceId: 'chat-4',
+        },
+        {
+          id: 'module-5',
+          usageCount: 70,
+          userId: 'user-5',
+          chatInstanceId: 'chat-5',
+        },
+      ],
+    }
+  }
+
+  const { average, usagePercentage, usages } = statsUsed
 
   usages.sort((a, b) => a.usageCount - b.usageCount)
 
@@ -56,13 +91,24 @@ const Stats = ({ courseId }: { courseId: string }) => {
           >
             <Tooltip />
             <YAxis domain={[0, 100]} allowDataOverflow />
-            <XAxis>
-              <Label value={t('course:usageChartTitle')} position="bottom" />
-            </XAxis>
+
             <Bar dataKey="usageCount" fill="#8884d8" />
           </BarChart>
         </ResponsiveContainer>
       )}
+      {usages && usages.length !== 0 && (
+        <Box textAlign="center" ml={8} mr={6}>
+          <Box
+            sx={{
+              width: '100%',
+              height: '1px',
+              backgroundColor: 'lightgray',
+              mb: 1,
+            }}
+          />
+          <Typography>{t('course:usageChartTitle')}</Typography>
+        </Box>
+      )}
     </Paper>
   )
 }