From 7de0a679e017a316f4c8234f341793d7e725ab86 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 12 Aug 2024 17:23:56 +0530
Subject: [PATCH] dashboard charts

---
 src/Components/Doughnut/ApexDonut.jsx |   2 +-
 src/Components/Doughnut/ApexLine.jsx  | 104 +++++++++++++-------------
 src/Pages/Dashbaord.jsx               |  42 +++++------
 3 files changed, 76 insertions(+), 72 deletions(-)

diff --git a/src/Components/Doughnut/ApexDonut.jsx b/src/Components/Doughnut/ApexDonut.jsx
index 4ba80c8..01640d5 100644
--- a/src/Components/Doughnut/ApexDonut.jsx
+++ b/src/Components/Doughnut/ApexDonut.jsx
@@ -48,7 +48,7 @@ const ApexChart = ({ data }) => {
   });
 
   return (
-    <ApexCharts options={options} series={data?.values} type="donut" width={350} />
+    <ApexCharts options={options} series={data?.values} type="donut" width={300} />
   );
 };
 
diff --git a/src/Components/Doughnut/ApexLine.jsx b/src/Components/Doughnut/ApexLine.jsx
index 1f1ddf9..5c842e5 100644
--- a/src/Components/Doughnut/ApexLine.jsx
+++ b/src/Components/Doughnut/ApexLine.jsx
@@ -1,62 +1,66 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactApexChart from 'react-apexcharts';
 
-const ApexLine = () => {
-  const [series] = React.useState([{
-    name: 'Rate',
-    data: [45, 23, 70, 65, 5, 34, 32]
-  }]);
-
-  const options = {
-    chart: {
-      height: 350,
-      type: 'line',
-      toolbar: {
-        show: false // Hide the action icons
-      }
-    },
-    stroke: {
-      width: 5,
-      curve: 'smooth',
-      colors: ['#598369'], // Customize the line color here
+function ApexLine() {
+  const [chartOptions, setChartOptions] = useState({
+    series: [{
+      name: 'Rate',
+      data: [45, 23, 70, 65, 5, 34, 32],
+      gradientToColors: ['#004017'],
+    }],
+    options: {
+      chart: {
+        height: 350,
+        type: 'line',
+        toolbar: {
+          show: false // Hide the action icons
+        }
+      },
+      stroke: {
+        width: 5,
+        curve: 'smooth',
+        colors: ['#598369'], // Customize the line color here
+      },
       markers: {
         size: 6, // Size of markers
-        colors: ['#FF0000'], // Marker (dot) color
-        strokeColor: '#000000', // Stroke color of the marker
+        colors: ['#004118'], // Marker (dot) color
+        strokeColor: '#fff', // Stroke color of the marker
         strokeWidth: 2
-      }
-    },
-    xaxis: {
-      type: 'category', // Change from 'datetime' to 'category'
-      categories: ['BH', 'KW', 'OM', 'QA', 'SA', 'UAE', 'IND'],
-      tickAmount: 7
-    },
-    title: {
-      text: 'Exchange rate currency', // Adjust the title if needed
-      align: 'left',
-      style: {
-        fontSize: '15px',
-        color: '#000',
-        fontWeight:400
-      }
-    },
-    fill: {
-      type: 'gradient',
-      gradient: {
-        shade: 'dark',
-        gradientToColors: ['#004017'],
-        shadeIntensity: 4,
-        type: 'horizontal',
-        opacityFrom: 1,
-        opacityTo: 1,
-        stops: [0, 100] // Gradient stops
       },
+      xaxis: {
+        type: 'category', // Change from 'datetime' to 'category'
+        categories: ['BH', 'KW', 'OM', 'QA', 'SA', 'UAE', 'IND'],
+        tickAmount: 7
+      },
+      title: {
+        text: 'Exchange Rate Currency', // Adjust the title if needed
+        align: 'left',
+        style: {
+          fontSize: '15px',
+          color: '#000',
+          fontWeight: 400
+        }
+      },
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: 'dark',
+          gradientToColors: ['#004017'],
+          shadeIntensity: 4,
+          type: 'horizontal',
+          opacityFrom: 1,
+          opacityTo: 1,
+          stops: [0, 100] // Gradient stops
+        },
+      }
     }
-  };
+  });
 
   return (
-    <ReactApexChart options={options} series={series} type="line" height={350} width={700} />
+    <div>
+      <ReactApexChart options={chartOptions.options} series={chartOptions.series} type="line" height={"100%"} width={"600"} />
+    </div>
   );
-};
+}
 
 export default ApexLine;
diff --git a/src/Pages/Dashbaord.jsx b/src/Pages/Dashbaord.jsx
index 5f71e43..135f51d 100644
--- a/src/Pages/Dashbaord.jsx
+++ b/src/Pages/Dashbaord.jsx
@@ -16,6 +16,8 @@ import { PiChartLineUpDuotone } from 'react-icons/pi'
 import ApexChart from '../Components/Doughnut/ApexDonut'
 import ApexLine from '../Components/Doughnut/ApexLine'
 import ReactApexChart from 'react-apexcharts'
+import { BsGraphUpArrow } from "react-icons/bs";
+
 
 const Dashbaord = () => {
   const navigate = useNavigate()
@@ -96,50 +98,48 @@ const Dashbaord = () => {
 
   return (
     isIoPreLoading || isIoLoading || isInvestorLoading ? <FullscreenLoaders /> :
-    <Box height={'100vh'} bg={'#fff'} roundedTop={0} mt={0}>
+    <Box height={'100vh'} bg={'#fff'} roundedTop={0} mt={0} overflowX={"hidden"}>
       <Box display={'flex'} gap={6} w={'100%'} pt={3} pb={3} p={3} >
         <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investor-details")} boxShadow={'lg'} color={"#fff"} p={4} rounded={'xl'} w={'25%'} display={'flex'} bg={'#004118'} flexDirection={'column'} alignItems={'start'}  >
           <Icon bg={'#fff'} rounded={9} p={2} color={"#004118"} as={TbTransactionDollar} mb={6} boxSize={12} />
-          <Text as={'span'} fontSize={'xs'}>Total Investors</Text>
-          <Text as={'span'} fontSize={'36px'} fontWeight={700}>{investorDetails?.data?.totalItems}</Text>
-          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
-
-
+          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total Investors</Text>
+          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{investorDetails?.data?.totalItems}</Text>
+          <Icon  position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow}  />
           {/* <ReactApexChart position={'absolute'} right={6} bottom={6} options={options1} series={series1} type="line" height={35} width={100} /> */}
         </Box>
         <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/view-io")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
           <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={HiOutlineChartSquareBar} mb={6} boxSize={12} />
-          <Text as={'span'} fontSize={'xs'}>Total IO</Text>
-          <Text as={'span'} fontSize={'40px'} fontWeight={700}>{IO?.data?.totalItems}</Text>
-          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
+          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total IO</Text>
+          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{IO?.data?.totalItems}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
         </Box>
         <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/sponser")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
           <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={RiMoneyDollarBoxLine} mb={6} boxSize={12} />
-          <Text as={'span'} fontSize={'xs'}>Total sponors</Text>
-          <Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.sponsor?.length}</Text>
-          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
+          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total sponors</Text>
+          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{data?.data?.sponsor?.length}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
         </Box>
         <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investment-type")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
           <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={VscSymbolClass} mb={6} boxSize={12} />
-          <Text as={'span'} fontSize={'xs'}>Total Investment Type</Text>
-          <Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.investmentType?.length}</Text>
-          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
+          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total Investment Type</Text>
+          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{data?.data?.investmentType?.length}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
         </Box>
       </Box>
-      <Box h={'330px'} display={'flex'} pe={4} >
+      <Box h={'70%'} w={"100%"} display={'flex'} pe={4} mt={2}>
         <Box w={'60%'} h={'100%'} p={4} pe={6} pt={1}  >
           <Box position={'relative'} h={'100%'} boxShadow={'lg'} display={'flex'} justifyContent={'center'} rounded={'xl'} p={5} ps={0} pe={0}>
-            <Text position={'absolute'} top={3} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text> 
-             <LineChart />
-            {/* <ApexLine/> */}
+            {/* <Text position={'absolute'} top={0} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text>  */}
+             {/* <LineChart /> */}
+            <ApexLine/>
           </Box>
         </Box>
 
 
 
 
-        <Box  boxShadow={'lg'} bg={'#fff'} rounded={'xl'} w={'50%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={"95%"} mt={1} p={4}>
-          <Text as={'span'} fontSize={'sm'}>IO Status</Text>
+        <Box  boxShadow={'lg'} position={"relative"} bg={'#fff'} rounded={'xl'} w={'40%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={"95%"} mt={1} p={4}>
+          <Text  as={'span'} fontSize={'sm'}>IO Status</Text>
           <Box display={'flex'} w={'100%'} h={'100%'} alignItems={'center'}  justifyContent={'space-around'} >
           {/* <Box display={'flex'} w={'70%'} alignItems={'center'} h={325} p={6}> */}
             {/* <DonutChart data={chartData} /> */}