134 lines
3.3 KiB
Plaintext
134 lines
3.3 KiB
Plaintext
const AdminStatics = () => {
|
|
const UserDataBase = [
|
|
{ id: 1, year: 1401, userGain: 6400, userLost: 400 },
|
|
{ id: 2, year: 1401, userGain: 7100, userLost: 250 },
|
|
{ id: 3, year: 1402, userGain: 10000, userLost: 500 },
|
|
{ id: 3, year: 1399, userGain: 3500, userLost: 110 },
|
|
];
|
|
const [userData] = useState({
|
|
labels: UserDataBase.map((data) => data.year),
|
|
datasets: [
|
|
{
|
|
label: "Users Gained",
|
|
data: UserDataBase.map((data) => data.userGain),
|
|
backgroundColor: [
|
|
"rgba(255, 29, 255, 0.5)",
|
|
"rgba(0, 255, 0, 0.5)",
|
|
"rgba(0, 172, 62, 0.5)",
|
|
"rgba(255, 0, 0, 0.5)",
|
|
"rgba(255, 121, 189, 0.5)",
|
|
],
|
|
hoverBackgroundColor: "rgba(119, 222, 227, 0.5)",
|
|
opacity: "10%",
|
|
borderColor: "green",
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
});
|
|
|
|
const [userBarData] = useState({
|
|
labels: UserDataBase.map((data) => data.year),
|
|
datasets: [
|
|
{
|
|
label: "تعداد",
|
|
fillColor: "blue",
|
|
data: [3, 7, 4],
|
|
},
|
|
{
|
|
label: "تلفات",
|
|
fillColor: "red",
|
|
data: [4, 3, 5],
|
|
},
|
|
{
|
|
label: "کشتار شده",
|
|
fillColor: "green",
|
|
data: [7, 2, 6],
|
|
},
|
|
],
|
|
});
|
|
|
|
const myUserDataBase = [
|
|
{ id: 1, year: 15, userGain: 20, userLost: 10 },
|
|
{ id: 2, year: 10, userGain: 2, userLost: 10 },
|
|
{ id: 2, year: 30, userGain: 15, userLost: 10 },
|
|
{ id: 2, year: 20, userGain: 20, userLost: 13 },
|
|
];
|
|
|
|
let mydata = myUserDataBase.map((data) => {
|
|
return { x: data.userGain, y: data.userLost, r: data.year };
|
|
});
|
|
|
|
console.log(mydata);
|
|
|
|
const [bubbleData] = useState({
|
|
datasets: [
|
|
{
|
|
label: "Users Gained",
|
|
data: mydata,
|
|
backgroundColor: [
|
|
"rgba(255, 29, 255, 0.8)",
|
|
"rgba(0, 255, 0, 0.9)",
|
|
"rgba(0, 172, 62, 0.6)",
|
|
"rgba(255, 0, 0, 0.5)",
|
|
"rgba(255, 121, 189, 0.2)",
|
|
],
|
|
opacity: "10%",
|
|
borderColor: "green",
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
});
|
|
|
|
return (
|
|
<Box display={"flex"} justifyContent="center">
|
|
<Grid
|
|
container
|
|
direction="column"
|
|
justifyContent="center"
|
|
xs={12}
|
|
sm={12}
|
|
md={10}
|
|
lg={10}
|
|
>
|
|
<Grid
|
|
display="flex"
|
|
justifyContent="space-between"
|
|
gap={SPACING.SMALL}
|
|
mt={SPACING.SMALL}
|
|
maxWidth="400px"
|
|
maxHeight="300px"
|
|
>
|
|
<ChartBar chartData={userBarData} />
|
|
<ChartLinear chartData={userBarData} />
|
|
<ChartPie chartData={userData} />
|
|
</Grid>
|
|
<Grid
|
|
display="flex"
|
|
justifyContent="space-between"
|
|
gap={SPACING.SMALL}
|
|
mt={SPACING.SMALL}
|
|
maxWidth="400px"
|
|
maxHeight="300px"
|
|
>
|
|
<ChartDoughnut chartData={userData} />
|
|
<ChartPolarArea chartData={userData} />
|
|
<ChartRadar chartData={userData} />
|
|
</Grid>{" "}
|
|
<Grid
|
|
display="flex"
|
|
justifyContent="space-between"
|
|
gap={SPACING.SMALL}
|
|
mt={SPACING.SMALL}
|
|
maxWidth="400px"
|
|
maxHeight="300px"
|
|
>
|
|
<ChartScatter chartData={userData} />
|
|
<ChartBubble chartData={bubbleData} />
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default AdminStatics;
|