loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LFFE-10 work on filter and specialize components of chart types

Browse Source
This commit is contained in:
Mohammad Jalali
2023-11-06 17:26:21 +03:30
parent 46371dc3ec
commit 1de7036f4b
9 changed files with 337 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/dashboard/reports/Filter/index.jsx Normal file
View File

@@ -0,0 +1,137 @@
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Button,
Chip,
FormControl,
InputLabel,
MenuItem,
OutlinedInput,
Select,
Stack,
Typography
} from "@mui/material";
import {useFormik} from "formik";
import {useState} from "react";
import QueryStatsIcon from '@mui/icons-material/QueryStats';
const provinceList = [
'قزوین',
'تبریز',
'مشهد',
];
const yearList = [
'1401',
'1402',
'1403',
]
const Filter = ({title}) => {
const [province, setProvince] = useState([]);
const [year, setYear] = useState([]);
const provinceChange = (event) => {
const {
target: {value},
} = event;
setProvince(typeof value === 'string' ? value.split(',') : value);
};
const yearChange = (event) => {
const {
target: {value},
} = event;
setYear(typeof value === 'string' ? value.split(',') : value);
};
const formik = useFormik({
initialValues: {
date: "",
province_id: "",
}, onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("date", values.date);
formData.append("province_id", values.province_id);
},
});
return (
<Accordion elevation='0' sx={{
mb: 2,
borderBottom: 2,
borderBottomColor: "divider",
backgroundColor: "#f8f8f8"
}}>
<AccordionSummary sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
<Box>
<Typography sx={{fontWeight: 500, color: "primary.main"}}>{title}</Typography>
</Box>
<Box>
<Button variant="contained" size="small" endIcon={<QueryStatsIcon/>}>فیلتر</Button>
</Box>
</AccordionSummary>
<AccordionDetails>
<Stack sx={{flexDirection: {xs: "column", sm: "row"}, alignItems: "center",}}>
<FormControl sx={{width: 300, mx: 1}}>
<InputLabel size="small">انتخاب استان</InputLabel>
<Select
multiple
size="small"
variant="outlined"
value={province}
onChange={provinceChange}
input={<OutlinedInput label="انتخاب استان"/>}
renderValue={(selected) => (
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
{selected.map((value) => (
<Chip key={value} label={value}
sx={{color: "#fff", backgroundColor: "primary.dark"}}/>
))}
</Box>
)}
>
{provinceList.map((province) => (
<MenuItem
key={province}
value={province}
>
{province}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl sx={{width: 300, mx: 1}}>
<InputLabel size="small">انتخاب سال</InputLabel>
<Select
multiple
size="small"
variant="outlined"
value={year}
onChange={yearChange}
input={<OutlinedInput label="انتخاب سال"/>}
renderValue={(selected) => (
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
{selected.map((value) => (
<Chip key={value} label={value}
sx={{color: "#fff", backgroundColor: "primary.dark"}}/>
))}
</Box>
)}
>
{yearList.map((year) => (
<MenuItem
key={year}
value={year}
>
{year}
</MenuItem>
))}
</Select>
</FormControl>
</Stack>
</AccordionDetails>
</Accordion>
)
};
export default Filter;

37
src/components/dashboard/reports/LoanDistribution/PieChart.jsx Normal file
View File

@@ -0,0 +1,37 @@
import Chart from "@/core/components/Chart";
const Pie = ({data}) => {
const specialOption = {
title: {
text: undefined,
},
plotOptions: {
pie: {
rings: {
strokeWidth: 3,
strokeColor: '#fff',
},
fill: {
colors: ['red', 'blue', 'green', 'yellow', 'pink']
}
},
},
fill: {
opacity: 0.9,
},
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
dataLabels: {
enabled: true,
style: {
fontSize: '14px',
fontWeight: 300,
},
},
};
const series = [14, 23, 21, 17, 15]
return (
<Chart chartId="LoanDistributionPie" type="pie" specialOption={specialOption} series={series}/>
)
};
export default Pie;

37
src/components/dashboard/reports/LoanDistribution/PolarChart.jsx Normal file
View File

@@ -0,0 +1,37 @@
import Chart from "@/core/components/Chart";
const PolarChart = ({data}) => {
const specialOption = {
title: {
text: undefined,
},
plotOptions: {
polarArea: {
rings: {
strokeWidth: 2,
strokeColor: '#e3e3e3',
},
fill: {
colors: ['red', 'blue', 'green', 'yellow', 'pink']
}
},
},
fill: {
opacity: 0.9,
},
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
dataLabels: {
enabled: true,
style: {
fontSize: '14px',
fontWeight: 400,
},
},
};
const series = [14, 23, 21, 17, 15]
return (
<Chart chartId="LoanDistributionPolar" type="polarArea" specialOption={specialOption} series={series}/>
)
};
export default PolarChart;

57
src/components/dashboard/reports/LoanDistribution/index.jsx Normal file
View File

@@ -0,0 +1,57 @@
import {Chip, Divider, Grid, Paper} from "@mui/material";
import PolarChart from "./PolarChart";
import Pie from "./PieChart";
const fakeData = [
{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: "کردستان", 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 LoanDistribution = (props) => {
return (
<Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, py: 2, background: "#f7f7f7e6"}}>
<Divider variant="middle" textAlign="center">
<Chip variant="outlined" label="درصد توضیع وام ها در هر مرحله" sx={{color: "#7e7e7e"}}/>
</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>
)
};
export default LoanDistribution;

22
src/components/dashboard/reports/BarChart.jsx → src/components/dashboard/reports/LoanProgress/BarChart.jsx
View File

@@ -41,12 +41,7 @@ const BarChart = ({data}) => {
let colorArray = data.map(obj => calculateGradientColor(obj.data));
const specialOption = {
title: {
text: "درصد پیشرفت تسویه وام",
align: "center",
style: {
color: "#7e7e7e",
fontWeight: 500
}
text: undefined,
},
plotOptions: {
bar: {
@@ -72,10 +67,19 @@ const BarChart = ({data}) => {
},
yaxis: {
min: 0,
max: 100
max: 100,
labels: {
formatter: function (val) {
return val + '%'
}
}
},
dataLabels: {
enabled: true
enabled: true,
style: {
fontSize: '14px',
fontWeight: 400,
},
},
};
const series = [{
@@ -83,7 +87,7 @@ const BarChart = ({data}) => {
data: usableArray
}]
return (
<Chart chartId="درصد پیشرفت تسویه وام" type="bar" specialOption={specialOption} series={series}/>
<Chart chartId="LoanProgressBar" type="bar" specialOption={specialOption} series={series}/>
)
};

52
src/components/dashboard/reports/LoanProgress/index.jsx Normal file
View File

@@ -0,0 +1,52 @@
import {Grid, Paper} from "@mui/material";
import BarChart from "./BarChart";
import Filter from "../Filter";
const fakeData = [
{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: "کردستان", 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 LoanProgress = (props) => {
return (
<Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
<Filter title="درصد پیشرفت تسویه وام"/>
<Grid container spacing={2}>
<Grid item xs={12} sx={{height: "400px"}}>
<BarChart data={fakeData}/>
</Grid>
</Grid>
</Paper>
)
};
export default LoanProgress;

37
src/components/dashboard/reports/PieChart.jsx
View File

@@ -1,37 +0,0 @@
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;

37
src/components/dashboard/reports/PolarChart.jsx
View File

@@ -1,37 +0,0 @@
import Chart from "@/core/components/Chart";
const PolarChart = ({data}) => {
const specialOption = {
title: {
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'],
dataLabels: {
enabled: true
},
};
const series = [14, 23, 21, 17, 15]
return (
<Chart type="polarArea" specialOption={specialOption} series={series}/>
)
};
export default PolarChart;

58
src/components/dashboard/reports/index.jsx
View File

@@ -1,61 +1,11 @@
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: 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: "کردستان", 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}
];
import LoanProgress from "@/components/dashboard/reports/LoanProgress";
import LoanDistribution from "@/components/dashboard/reports/LoanDistribution";
const DashboardReportsComponent = (props) => {
return (
<>
<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"}}>
<BarChart data={fakeData}/>
</Grid>
</Grid>
<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>
<LoanProgress/>
<LoanDistribution/>
</>
)
};