Files
Rasadyar_FrontEnd/src/features/aviculture/components/aviculture-reports-charts/AvicultureReportsCharts.js

85 lines
2.5 KiB
JavaScript

import { Card, CardActionArea, CardContent, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import ChartBar from "../../../../components/chart-bar/ChartBar";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { PropTypes } from "prop-types";
import { formatJustDate } from "../../../../utils/formatTime";
import ChartLinear from "../../../../components/chart-linear/ChartLenear";
export const AvicultureReportsCharts = ({ data }) => {
const [hatching, setHatching] = useState({ datasets: [] });
const [hatchingWeight, setHatchingWeight] = useState({ datasets: [] });
useEffect(() => {
setHatching({
labels: data?.hatchingChart?.map((data) => formatJustDate(data?.date)),
datasets: [
{
label: "تعداد",
backgroundColor: ["rgba(33, 72, 214, 0.7)"],
data: data?.hatchingChart?.map((data) => data?.quantity),
borderRadius: 5,
},
{
label: "تلفات",
backgroundColor: ["rgba(100, 130, 160, 0.7)"],
data: data.hatchingChart?.map((data) => data?.losses),
borderRadius: 5,
},
],
});
setHatchingWeight({
labels: data?.weightChart?.map((data) => formatJustDate(data?.date)),
datasets: [
{
label: "قیمت",
backgroundColor: ["rgba(33, 72, 214, 0.7)"],
data: data?.weightChart?.map((data) => data?.weight),
borderRadius: 5,
},
],
});
}, []);
return (
<Grid mb={SPACING.LARGE}>
<Grid
container
mt={SPACING.MEDIUM}
gap={SPACING.SMALL}
justifyContent="space-between"
>
<Card sx={{ width: "45%" }}>
<CardActionArea>
<CardContent>
<Typography gutterBottom variant="body1">
نمودار حجم جوجه ریزی و تلفات دوره
</Typography>
<ChartBar chartData={hatching} />
</CardContent>
</CardActionArea>
</Card>
<Card sx={{ width: "45%" }}>
<CardActionArea>
<CardContent>
<Typography gutterBottom variant="body1">
نمودار پایش وزن و بهره وری وزن
</Typography>
<ChartLinear chartData={hatchingWeight} />
</CardContent>
</CardActionArea>
</Card>
</Grid>
</Grid>
);
};
AvicultureReportsCharts.propTypes = {
data: PropTypes.any,
};