mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-18 07:39:54 -06:00
modify date format to ISO standard, remove toTimeStamp method
This commit is contained in:
@@ -12,12 +12,11 @@ import { Box, Stack, Typography } from "@mui/material";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { formatDateWithTz, toTimeStamp } from "../../../Utils/timeUtils";
|
||||
import { formatDateWithTz } from "../../../Utils/timeUtils";
|
||||
import "./index.css";
|
||||
|
||||
const CustomToolTip = ({ active, payload, label }) => {
|
||||
const uiTimezone = useSelector((state) => state.ui.timezone);
|
||||
const dateFormat = label?.length === 10 ? "YYYY-MM-DD" : "YYYY-MM-DD-HH";
|
||||
const theme = useTheme();
|
||||
if (active && payload && payload.length) {
|
||||
const responseTime = payload[0]?.payload?.originalAvgResponseTime
|
||||
@@ -42,11 +41,7 @@ const CustomToolTip = ({ active, payload, label }) => {
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{formatDateWithTz(
|
||||
toTimeStamp(label, dateFormat),
|
||||
"ddd, MMMM D, YYYY, h:mm A",
|
||||
uiTimezone
|
||||
)}
|
||||
{formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
|
||||
</Typography>
|
||||
<Box mt={theme.spacing(1)}>
|
||||
<Box
|
||||
@@ -112,7 +107,6 @@ const CustomTick = ({ x, y, payload, index }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const uiTimezone = useSelector((state) => state.ui.timezone);
|
||||
const dateFormat = payload?.value.length === 10 ? "YYYY-MM-DD" : "YYYY-MM-DD-HH";
|
||||
// Render nothing for the first tick
|
||||
if (index === 0) return null;
|
||||
return (
|
||||
@@ -124,7 +118,7 @@ const CustomTick = ({ x, y, payload, index }) => {
|
||||
fontSize={11}
|
||||
fontWeight={400}
|
||||
>
|
||||
{formatDateWithTz(toTimeStamp(payload?.value, dateFormat), "h:mm a", uiTimezone)}
|
||||
{formatDateWithTz(payload?.value, "h:mm a", uiTimezone)}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import PropTypes from "prop-types";
|
||||
import { useSelector } from "react-redux";
|
||||
import { formatDateWithTz, toTimeStamp } from "../../../../Utils/timeUtils";
|
||||
import { formatDateWithTz } from "../../../../Utils/timeUtils";
|
||||
|
||||
const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) => {
|
||||
const uiTimezone = useSelector((state) => state.ui.timezone);
|
||||
const formatString = type === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH";
|
||||
const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D";
|
||||
|
||||
return (
|
||||
@@ -16,11 +15,7 @@ const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type })
|
||||
textAnchor="start"
|
||||
fontSize={11}
|
||||
>
|
||||
{formatDateWithTz(
|
||||
toTimeStamp(firstDataPoint._id, formatString),
|
||||
dateFormat,
|
||||
uiTimezone
|
||||
)}
|
||||
{formatDateWithTz(firstDataPoint._id, dateFormat, uiTimezone)}
|
||||
</text>
|
||||
<text
|
||||
x={width}
|
||||
@@ -29,11 +24,7 @@ const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type })
|
||||
textAnchor="end"
|
||||
fontSize={11}
|
||||
>
|
||||
{formatDateWithTz(
|
||||
toTimeStamp(lastDataPoint._id, formatString),
|
||||
dateFormat,
|
||||
uiTimezone
|
||||
)}
|
||||
{formatDateWithTz(lastDataPoint._id, dateFormat, uiTimezone)}
|
||||
</text>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -24,7 +24,6 @@ import { formatDateWithTz, formatDurationSplit } from "../../../Utils/timeUtils"
|
||||
import { useIsAdmin } from "../../../Hooks/useIsAdmin";
|
||||
import IconBox from "../../../Components/IconBox";
|
||||
import StatBox from "../../../Components/StatBox";
|
||||
import { toTimeStamp } from "../../../Utils/timeUtils";
|
||||
import UpBarChart from "./Charts/UpBarChart";
|
||||
import DownBarChart from "./Charts/DownBarChart";
|
||||
import ResponseGaugeChart from "./Charts/ResponseGaugeChart";
|
||||
@@ -320,10 +319,7 @@ const DetailsPage = () => {
|
||||
color={theme.palette.text.tertiary}
|
||||
>
|
||||
{formatDateWithTz(
|
||||
toTimeStamp(
|
||||
hoveredUptimeData._id,
|
||||
dateRange === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH"
|
||||
),
|
||||
hoveredUptimeData._id,
|
||||
dateFormat,
|
||||
uiTimezone
|
||||
)}
|
||||
@@ -380,10 +376,7 @@ const DetailsPage = () => {
|
||||
color={theme.palette.text.tertiary}
|
||||
>
|
||||
{formatDateWithTz(
|
||||
toTimeStamp(
|
||||
hoveredIncidentsData._id,
|
||||
dateRange === "month" ? "YYYY-MM-DD" : "YYYY-MM-DD-HH"
|
||||
),
|
||||
hoveredIncidentsData._id,
|
||||
dateFormat,
|
||||
uiTimezone
|
||||
)}
|
||||
|
||||
@@ -75,12 +75,6 @@ export const formatDurationSplit = (ms) => {
|
||||
: { time: 0, format: "seconds" };
|
||||
};
|
||||
|
||||
export const toTimeStamp = (date, format) => {
|
||||
const dayJsDate = dayjs.utc(date, format);
|
||||
const timestamp = dayJsDate.valueOf();
|
||||
return timestamp;
|
||||
};
|
||||
|
||||
export const formatDate = (date, customOptions) => {
|
||||
const options = {
|
||||
year: "numeric",
|
||||
|
||||
@@ -323,9 +323,9 @@ const getUptimeDetailsById = async (req) => {
|
||||
const { dateRange, normalize } = req.query;
|
||||
const dates = getDateRange(dateRange);
|
||||
const formatLookup = {
|
||||
day: "%Y-%m-%d-%H",
|
||||
week: "%Y-%m-%d-%H",
|
||||
month: "%Y-%m-%d",
|
||||
day: "%Y-%m-%dT%H:00:00Z",
|
||||
week: "%Y-%m-%dT%H:00:00Z",
|
||||
month: "%Y-%m-%dT00:00:00Z",
|
||||
};
|
||||
|
||||
const dateString = formatLookup[dateRange];
|
||||
|
||||
Reference in New Issue
Block a user