60 lines
1.3 KiB
React
60 lines
1.3 KiB
React
import ChartBox from "../../../../../Components/Charts/ChartBox";
|
|
import AreaChart from "../Charts/AreaChart";
|
|
import AreaChartLegend from "../Charts/AreaChartLegend";
|
|
import SkeletonLayout from "./skeleton";
|
|
import ScoreIcon from "../../../../../assets/icons/monitor-graph-line.svg?react";
|
|
import { Stack } from "@mui/material";
|
|
import PropTypes from "prop-types";
|
|
|
|
import { useTheme } from "@emotion/react";
|
|
|
|
const PageSpeedAreaChart = ({ shouldRender, monitor, metrics, handleMetrics }) => {
|
|
const theme = useTheme();
|
|
|
|
if (!shouldRender) {
|
|
return <SkeletonLayout />;
|
|
}
|
|
|
|
if (typeof monitor === "undefined") {
|
|
return null;
|
|
}
|
|
|
|
const data = monitor?.checks ? [...monitor.checks].reverse() : [];
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(10)}
|
|
>
|
|
<ChartBox
|
|
justifyContent="flex-start"
|
|
icon={<ScoreIcon />}
|
|
header="Score history"
|
|
height="100%"
|
|
borderRadiusRight={16}
|
|
Legend={
|
|
<AreaChartLegend
|
|
metrics={metrics}
|
|
handleMetrics={handleMetrics}
|
|
/>
|
|
}
|
|
>
|
|
<AreaChart
|
|
data={data}
|
|
monitor={monitor}
|
|
metrics={metrics}
|
|
/>
|
|
</ChartBox>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
PageSpeedAreaChart.propTypes = {
|
|
shouldRender: PropTypes.bool,
|
|
monitor: PropTypes.object,
|
|
metrics: PropTypes.object,
|
|
handleMetrics: PropTypes.func,
|
|
};
|
|
|
|
export default PageSpeedAreaChart;
|