LFFE-10 bring pie chart and work on polararea

src/components/dashboard/reports/BarChart.jsx

@@ -48,7 +48,6 @@ const BarChart = ({data}) => {
                 fontWeight: 500
             }
         },
-        
         plotOptions: {
             bar: {
                 distributed: true,
@@ -84,7 +83,7 @@ const BarChart = ({data}) => {
         data: usableArray
     }]
     return (
-        <Chart type="bar" specialOption={specialOption} series={series}/>
+        <Chart chartId="درصد پیشرفت تسویه وام" type="bar" specialOption={specialOption} series={series}/>
     )
 };
 

src/components/dashboard/reports/PieChart.jsx

@@ -0,0 +1,37 @@
+import Chart from "@/core/components/Chart";
+
+const Pie = ({data}) => {
+    const specialOption = {
+        title: {
+            text: "کشوری",
+            align: "center",
+            style: {
+                color: "#7e7e7e",
+                fontWeight: 500
+            }
+        },
+        // plotOptions: {
+        //     pie: {
+        //         rings: {
+        //             strokeWidth: 3,
+        //             strokeColor: '#fff',
+        //         },
+        //         spokes: {
+        //             strokeWidth: 3,
+        //             connectorColors: '#fff',
+        //         }
+        //     },
+        // },
+        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
+        colors: ['red', 'blue', 'green', 'yellow', 'pink'],
+        dataLabels: {
+            enabled: true
+        },
+    };
+    const series = [14, 23, 21, 17, 15]
+    return (
+        <Chart type="pie" specialOption={specialOption} series={series}/>
+    )
+};
+
+export default Pie;

src/components/dashboard/reports/PolarChart.jsx

@@ -3,8 +3,24 @@ import Chart from "@/core/components/Chart";
 const PolarChart = ({data}) => {
     const specialOption = {
         title: {
-            text: "مامامیا ماماسیتا",
-            align: "center"
+            text: "کشوری",
+            align: "center",
+            style: {
+                color: "#7e7e7e",
+                fontWeight: 500
+            }
+        },
+        plotOptions: {
+            polarArea: {
+                rings: {
+                    strokeWidth: 3,
+                    strokeColor: '#fff',
+                },
+                spokes: {
+                    strokeWidth: 3,
+                    connectorColors: '#fff',
+                }
+            },
         },
         labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
         colors: ['red', 'blue', 'green', 'yellow', 'pink'],

src/components/dashboard/reports/index.jsx

@@ -1,46 +1,59 @@
-import {Grid, Paper} from "@mui/material";
+import {Chip, Divider, Grid, Paper} from "@mui/material";
 import BarChart from "@/components/dashboard/reports/BarChart";
 import PolarChart from "@/components/dashboard/reports/PolarChart";
+import Pie from "@/components/dashboard/reports/PieChart";
 
 const fakeData = [
-    {name: "قم", data: 0},
-    {name: "اراک", data: 33},
-    {name: "شیراز", data: 90},
+    {name: "آذربایجان شرقی", data: 0},
+    {name: "آذربایجان غربی", data: 33},
+    {name: "اردبیل", data: 90},
     {name: "اصفهان", data: 30},
-    {name: "تبریز", data: 70},
-    {name: "مشهد", data: 32},
-    {name: "تهران", data: 12},
-    {name: "اراک", data: 44},
-    {name: "شیراز", data: 95},
-    {name: "اصفهان", data: 30},
-    {name: "تبریز", data: 70},
-    {name: "مشهد", data: 10},
-    {name: "تهران", data: 28},
-    {name: "شیراز", data: 85},
-    {name: "اصفهان", data: 30},
-    {name: "تبریز", data: 70},
-    {name: "مشهد", data: 10},
-    {name: "تهران", data: 12},
-    {name: "اراک", data: 40},
-    {name: " asdراز", data: 85},
-    {name: "اصفهان", data: 30},
-    {name: "تبریز", data: 67},
-    {name: "مشهد", data: 100}
+    {name: "البرز", data: 70},
+    {name: "ایلام", data: 32},
+    {name: "بوشهر", data: 12},
+    {name: "تهران", data: 44},
+    {name: "چهارمحال و بختیاری", data: 95},
+    {name: "خراسان جنوبی", data: 30},
+    {name: "خراسان رضوی", data: 70},
+    {name: "خراسان شمالی", data: 10},
+    {name: "خوزستان", data: 28},
+    {name: "زنجان", data: 85},
+    {name: "سمنان", data: 30},
+    {name: "سیستان و بلوچستان", data: 70},
+    {name: "فارس", data: 10},
+    {name: "قزوین", data: 12},
+    {name: "قم", data: 40},
+    {name: "کردستان", data: 85},
+    {name: "کرمان", data: 30},
+    {name: "کرمانشاه", data: 67},
+    {name: "کهگیلویه و بویراحمد", data: 100},
+    {name: "گلستان", data: 97},
+    {name: "گیلان", data: 5},
+    {name: "لرستان", data: 27},
+    {name: "مازندران", data: 31},
+    {name: "مرکزی", data: 37},
+    {name: "هرمزگان", data: 46},
+    {name: "همدان", data: 52},
+    {name: "یزد", data: 60}
 ];
 
 const DashboardReportsComponent = (props) => {
     return (
         <>
-            <Paper elevation={3}>
+            <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, py: 2, background: "#f6f6f6"}}>
                 <Grid container spacing={2}>
-                    <Grid item xs={12} sx={{height: "400px",}}>
+                    <Grid item xs={12} sx={{height: "400px"}}>
                         <BarChart data={fakeData}/>
                     </Grid>
                 </Grid>
-                <Grid container spacing={2}>
-                    <Grid item xs={5}>
+                <Divider variant="middle" textAlign="center"><Chip label="درصد توضیع وام ها در هر مرحله"/></Divider>
+                <Grid container spacing={2} sx={{justifyContent: "space-between"}}>
+                    <Grid item xs={5} sx={{height: "300px"}}>
                         <PolarChart data={fakeData}/>
                     </Grid>
+                    <Grid item xs={5} sx={{height: "300px"}}>
+                        <Pie data={fakeData}/>
+                    </Grid>
                 </Grid>
             </Paper>
         </>

src/core/components/Chart.jsx

@@ -1,16 +1,28 @@
 import dynamic from "next/dynamic";
 import useLanguage from "@/lib/app/hooks/useLanguage";
+import ReactDOMServer from 'react-dom/server';
+import WidgetsIcon from '@mui/icons-material/Widgets';
+
+const widgetIconSvgString = ReactDOMServer.renderToString(<WidgetsIcon/>);
 
 const ApexChart = dynamic(() => import("react-apexcharts"), {ssr: false});
 
-const Chart = ({type, series, specialOption}) => {
+const Chart = ({chartId, type, series, specialOption}) => {
     const {languageApp, languageList} = useLanguage();
     const chartLang = languageList.find((item) => item.key == languageApp).chartLocalization
     const options = {
         chart: {
+            id: chartId,
             locales: [chartLang],
             defaultLocale: languageApp,
-            fontFamily: languageList[0].fontFamily
+            fontFamily: languageList[0].fontFamily,
+            toolbar: {
+                tools: {
+                    zoomIn: false,
+                    zoomOut: false,
+                    download: widgetIconSvgString,
+                }
+            }
         },
         ...(specialOption ? specialOption : {})
     }