new piechart and stats updated

atlp-rwanda · Nov 14, 2024 · e90781b · e90781b
1 parent 0643d85
commit e90781b
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 10 deletions.
diff --git a/src/Chart/BarChart.tsx b/src/Chart/BarChart.tsx
@@ -40,14 +40,14 @@ const BarChart: React.FC<Props> = () => {
     ],
     datasets: [
       {
-        label: 'Last 8 days',
+        label: 'Nova',
         data: [12, 19, 3, 5, 2, 3, 12, 14, 5, 7, 9, 11],
         backgroundColor: '#5A6ACF',
         borderRadius: 0,
         barThickness: 8,
       },
       {
-        label: 'Last Week',
+        label: 'Fighters',
         data: [10, 15, 5, 8, 6, 9, 13, 9, 6, 8, 7, 10],
         backgroundColor: '#D1D5DB',
         borderRadius: 0,
@@ -63,7 +63,7 @@ const BarChart: React.FC<Props> = () => {
       legend: {
         position: 'bottom' as const,
         labels: {
-          color: '#121212',
+          color: '#D1D5DB',
         },
       },
       tooltip: {

diff --git a/src/Chart/PieChart.tsx b/src/Chart/PieChart.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Doughnut } from 'react-chartjs-2';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+// eslint-disable-next-line react/function-component-definition
+const PieChart: React.FC = () => {
+  const data = {
+    labels: ['new pie chart'],
+    datasets: [
+      {
+        label: 'rates',
+        data: [30, 100],
+        backgroundColor: ['#4F46E5', '#A5B4FC'],
+        hoverOffset: 4,
+      },
+    ],
+  };
+  const data2 = {
+    labels: ['new pie chart'],
+    datasets: [
+      {
+        label: 'rates',
+        data: [30, 70],
+        backgroundColor: ['#4F46E5', '#A5B4FC'],
+        hoverOffset: 4,
+      },
+    ],
+  };
+  const data3 = {
+    labels: ['new pie chart'],
+    datasets: [
+      {
+        label: 'rates',
+        data: [60, 60],
+        backgroundColor: ['#4F46E5', '#A5B4FC'],
+        hoverOffset: 4,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    cutout: '70%',
+    plugins: {
+      tooltip: {
+        callbacks: {
+          // eslint-disable-next-line func-names, object-shorthand
+          label: function (tooltipItem: any) {
+            return `${tooltipItem.label}: ${tooltipItem.raw}%`;
+          },
+        },
+      },
+      legend: {
+        display: false,
+      },
+    },
+  };
+
+  return (
+    <div className="flex flex-col items-center -ml-8 mb-8">
+      <div className="flex space-x-8">
+        <div className="relative w-[200px] h-[200px] bg-red-200 p-2 rounded">
+          <Doughnut data={data} options={options} />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <p className="text-2xl font-semibold text-gray-500">10</p>
+            </div>
+          </div>
+          <p className="text-center mt-2">New Invitations & Registration</p>
+        </div>
+        <div className="relative w-[200px] h-[200px] bg-green-200 p-2 rounded">
+          <Doughnut data={data2} options={options} />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <p className="text-2xl font-semibold text-gray-500">20</p>
+            </div>
+          </div>
+          <p className="text-center mt-2">Upcoming Events</p>
+        </div>
+        <div className="relative w-[200px] h-[200px] bg-yellow-200 p-2 rounded">
+          <Doughnut data={data3} options={options} />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <p className="text-2xl font-semibold text-gray-500">50</p>
+            </div>
+          </div>
+          <p className="text-center mt-2">Active& Progressive Tickets</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PieChart;
diff --git a/src/Chart/AppointmentsChart.tsx → src/Chart/UsersChart.tsx b/src/Chart/AppointmentsChart.tsx → src/Chart/UsersChart.tsx
@@ -22,7 +22,7 @@ ChartJS.register(
 );
 
 // eslint-disable-next-line react/function-component-definition
-const AppointmentsChart: React.FC = () => {
+const usersChart: React.FC = () => {
   const data = {
     labels: [
       '01',
@@ -59,7 +59,7 @@ const AppointmentsChart: React.FC = () => {
     ],
     datasets: [
       {
-        label: 'Last days',
+        label: 'Andela',
         data: [
           1, 3, 0, 2, 1, 3, 2, 0, 2, 1, 3, 0, 2, 1, 4, 1, 2, 4, 7, 2, 3, 4, 4,
           3, 8, 0, 3, 5, 7,
@@ -69,7 +69,7 @@ const AppointmentsChart: React.FC = () => {
         tension: 0.4,
       },
       {
-        label: 'Last days',
+        label: 'NESA',
         data: [
           2, 3, 6, 4, 3, 4, 2, 1, 2, 6, 2, 2, 3, 2, 3, 5, 7, 2, 1, 2, 4, 6, 6,
           1, 2, 3, 4, 5, 6.5,
@@ -110,4 +110,4 @@ const AppointmentsChart: React.FC = () => {
   );
 };
 
-export default AppointmentsChart;
+export default usersChart;
diff --git a/src/pages/AdminDashboard.tsx b/src/pages/AdminDashboard.tsx
@@ -3,8 +3,9 @@ import { t } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from '@apollo/client';
 import { toast } from 'react-toastify';
+import PieChart from '../Chart/PieChart';
 import BarChart from '../Chart/BarChart';
-import AppointmentsChart from '../Chart/AppointmentsChart';
+import UsersChart from '../Chart/usersChart';
 // eslint-disable-next-line import/no-useless-path-segments
 import useDocumentTitle from '../hook/useDocumentTitle';
 import Comingsoon from './Comingsoon';
@@ -25,7 +26,6 @@ function SupAdDashboard() {
   const inviteModel = () => {
     const newState = !inviteTraineeModel;
     setInviteTraineeModel(newState);
-    //  this is true
   };
 
   const [inviteUser] = useMutation(INVITE_USER_MUTATION, {
@@ -125,11 +125,14 @@ function SupAdDashboard() {
       </div>
       <div className="flex flex-col grow bg-light-bg dark:bg-dark-frame-bg">
         <div className="flex flex-col justify-between">
+          <div className="w-[80%] h-[100%] pl-[210px] pb-8  flex flex-row ">
+            <PieChart />
+          </div>
           <div className="w-[80%] h-[100%] pl-[90px] pb-8 flex flex-row ">
             <div className="flex flex-col justify-center">
               <span className="mr-[80px] rotate-90 ">Users</span>
             </div>
-            <AppointmentsChart />
+            <UsersChart />
           </div>
 
           <div className="w-[80%] h-[100%] pl-[90px] pb-8 flex flex-row ">