54 lines
1.4 KiB
React
54 lines
1.4 KiB
React
//Components
|
|
import { Stack, Switch, Typography } from "@mui/material";
|
|
import { useState } from "react";
|
|
import DistributedUptimeResponseAreaChart from "./Area";
|
|
import DistributedUptimeResponseBarChart from "./Bar";
|
|
import ChartBox from "../../../../../Components/Charts/ChartBox";
|
|
import ResponseTimeIcon from "../../../../../assets/icons/response-time-icon.svg?react";
|
|
|
|
// Utils
|
|
import PropTypes from "prop-types";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const DistributedUptimeResponseChart = ({ checks }) => {
|
|
const [chartType, setChartType] = useState("bar");
|
|
const { t } = useTranslation();
|
|
let Chart = null;
|
|
if (chartType === "area") {
|
|
Chart = DistributedUptimeResponseAreaChart;
|
|
}
|
|
if (chartType === "bar") {
|
|
Chart = DistributedUptimeResponseBarChart;
|
|
}
|
|
return (
|
|
<Stack>
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
>
|
|
<Typography>{t("bar")}</Typography>
|
|
<Switch
|
|
color="main"
|
|
value={chartType}
|
|
onChange={(e) => setChartType(e.target.checked ? "area" : "bar")}
|
|
/>
|
|
<Typography>{t("area")}</Typography>
|
|
</Stack>
|
|
<ChartBox
|
|
icon={<ResponseTimeIcon />}
|
|
header="Response Times"
|
|
sx={{ padding: 0 }}
|
|
>
|
|
<Chart checks={checks} />
|
|
</ChartBox>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
DistributedUptimeResponseChart.propTypes = {
|
|
checks: PropTypes.array,
|
|
type: PropTypes.string,
|
|
};
|
|
|
|
export default DistributedUptimeResponseChart;
|