54 lines
1.4 KiB
React
54 lines
1.4 KiB
React
import ChartBox from "../../../../../Components/Charts/ChartBox";
|
|
import PerformanceIcon from "../../../../../assets/icons/performance-report.svg?react";
|
|
import PieChart from "../Charts/PieChart";
|
|
import { Typography } from "@mui/material";
|
|
import { useTheme } from "@emotion/react";
|
|
import PieChartLegend from "../Charts/PieChartLegend";
|
|
import SkeletonLayout from "./skeleton";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const PerformanceReport = ({ shouldRender, audits }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
if (!shouldRender) {
|
|
return <SkeletonLayout />;
|
|
}
|
|
|
|
return (
|
|
<ChartBox
|
|
icon={<PerformanceIcon />}
|
|
header="Performance report"
|
|
Legend={<PieChartLegend audits={audits} />}
|
|
borderRadiusRight={16}
|
|
>
|
|
<PieChart audits={audits} />
|
|
<Typography
|
|
variant="body1"
|
|
mt="auto"
|
|
>
|
|
{t("pageSpeedDetailsPerformanceReport")}{" "}
|
|
<Typography
|
|
component="span"
|
|
fontSize="inherit"
|
|
sx={{
|
|
color: theme.palette.primary.contrastTextTertiary,
|
|
fontWeight: 500,
|
|
textDecoration: "underline",
|
|
textUnderlineOffset: 2,
|
|
transition: "all 200ms",
|
|
cursor: "pointer",
|
|
"&:hover": {
|
|
textUnderlineOffset: 4,
|
|
},
|
|
}}
|
|
>
|
|
{t("pageSpeedDetailsPerformanceReportCalculator")}
|
|
</Typography>
|
|
</Typography>
|
|
</ChartBox>
|
|
);
|
|
};
|
|
|
|
export default PerformanceReport;
|