From 58f1ae7fe9293545d6962a288c074f69d1d3a538 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 29 Jul 2026 11:04:11 -0700 Subject: [PATCH] extract xtick --- .../charts/{ChartUtils.ts => ChartUtils.tsx} | 0 .../monitors/charts/HistogramDetails.tsx | 34 ++----------------- .../charts/HistogramDetailsStacked.tsx | 33 ++---------------- .../charts/HistogramInfrastructure.tsx | 2 +- .../charts/HistogramPageSpeedDetails.tsx | 2 +- .../src/Components/monitors/charts/XTick.tsx | 30 ++++++++++++++++ 6 files changed, 36 insertions(+), 65 deletions(-) rename client/src/Components/monitors/charts/{ChartUtils.ts => ChartUtils.tsx} (100%) create mode 100644 client/src/Components/monitors/charts/XTick.tsx diff --git a/client/src/Components/monitors/charts/ChartUtils.ts b/client/src/Components/monitors/charts/ChartUtils.tsx similarity index 100% rename from client/src/Components/monitors/charts/ChartUtils.ts rename to client/src/Components/monitors/charts/ChartUtils.tsx diff --git a/client/src/Components/monitors/charts/HistogramDetails.tsx b/client/src/Components/monitors/charts/HistogramDetails.tsx index 29bf63f09..3ad0e03b3 100644 --- a/client/src/Components/monitors/charts/HistogramDetails.tsx +++ b/client/src/Components/monitors/charts/HistogramDetails.tsx @@ -8,19 +8,14 @@ import { Tooltip, CartesianGrid, ResponsiveContainer, - Text, } from "recharts"; import type { TooltipProps } from "recharts"; import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent"; import Typography from "@mui/material/Typography"; import prettyMilliseconds from "pretty-ms"; - +import { XTick } from "@/Components/monitors/charts/XTick"; import { useSelector } from "react-redux"; -import { - formatDateWithTz, - tickDateFormatLookup, - tooltipDateFormatLookup, -} from "@/Utils/TimeUtils"; +import { formatDateWithTz, tooltipDateFormatLookup } from "@/Utils/TimeUtils"; import { useTheme } from "@mui/material/styles"; import type { Theme } from "@mui/material/styles"; import type { GroupedCheck } from "@/Types/Check"; @@ -28,31 +23,6 @@ import type { RootState } from "@/Types/state"; import { useMemo } from "react"; import { computeYAxisCap } from "@/Components/monitors/charts/ChartUtils"; -type XTickProps = { - x: number; - y: number; - payload: { value: string }; - range: string; -}; - -export const XTick = ({ x, y, payload, range }: XTickProps) => { - const format = tickDateFormatLookup(range); - const theme = useTheme(); - const uiTimezone = useSelector((state: RootState) => state.ui.timezone); - return ( - - {formatDateWithTz(payload?.value, format, uiTimezone)} - - ); -}; - type ResponseTimeToolTipProps = TooltipProps & { range: string; theme: Theme; diff --git a/client/src/Components/monitors/charts/HistogramDetailsStacked.tsx b/client/src/Components/monitors/charts/HistogramDetailsStacked.tsx index 46377cedd..2ef74f56b 100644 --- a/client/src/Components/monitors/charts/HistogramDetailsStacked.tsx +++ b/client/src/Components/monitors/charts/HistogramDetailsStacked.tsx @@ -14,17 +14,13 @@ import { ResponsiveContainer, YAxis, XAxis, - Text, Tooltip, } from "recharts"; import { BaseBox, BaseChart, Dot } from "@/Components/design-elements"; import Typography from "@mui/material/Typography"; +import { XTick } from "@/Components/monitors/charts/XTick"; -import { - formatDateWithTz, - tickDateFormatLookup, - tooltipDateFormatLookup, -} from "@/Utils/TimeUtils"; +import { formatDateWithTz, tooltipDateFormatLookup } from "@/Utils/TimeUtils"; import { useSelector } from "react-redux"; import { useMemo } from "react"; import { useTheme } from "@mui/material"; @@ -64,13 +60,6 @@ type TimingPhaseToolTipProps = TooltipProps & { uiTimezone: string; }; -type XTickProps = { - x: number; - y: number; - payload: { value: string }; - range: string; -}; - const TimingPhasesToolTip = ({ active, payload, @@ -110,24 +99,6 @@ const TimingPhasesToolTip = ({ ); }; -export const XTick = ({ x, y, payload, range }: XTickProps) => { - const format = tickDateFormatLookup(range); - const theme = useTheme(); - const uiTimezone = useSelector((state: RootState) => state.ui.timezone); - return ( - - {formatDateWithTz(payload?.value, format, uiTimezone)} - - ); -}; - export const HistogramDetailsStacked = ({ checks = [], range, diff --git a/client/src/Components/monitors/charts/HistogramInfrastructure.tsx b/client/src/Components/monitors/charts/HistogramInfrastructure.tsx index 8dd15ae03..8163898aa 100644 --- a/client/src/Components/monitors/charts/HistogramInfrastructure.tsx +++ b/client/src/Components/monitors/charts/HistogramInfrastructure.tsx @@ -8,7 +8,7 @@ import { ResponsiveContainer, } from "recharts"; import { Fragment, useId } from "react"; -import { XTick } from "@/Components/monitors"; +import { XTick } from "@/Components/monitors/charts/XTick"; import { useTheme } from "@mui/material/styles"; import type { HardwareCheckStats } from "@/Types/Monitor"; diff --git a/client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx b/client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx index f89994437..22001602c 100644 --- a/client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx +++ b/client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx @@ -1,6 +1,6 @@ import { BaseChart } from "@/Components/design-elements"; import { TrendingUp } from "lucide-react"; -import { XTick } from "@/Components/monitors"; +import { XTick } from "@/Components/monitors/charts/XTick"; import { XAxis, AreaChart, diff --git a/client/src/Components/monitors/charts/XTick.tsx b/client/src/Components/monitors/charts/XTick.tsx new file mode 100644 index 000000000..9cb57ffab --- /dev/null +++ b/client/src/Components/monitors/charts/XTick.tsx @@ -0,0 +1,30 @@ +import { formatDateWithTz, tickDateFormatLookup } from "@/Utils/TimeUtils"; +import { useSelector } from "react-redux"; +import { Text } from "recharts"; +import { useTheme } from "@mui/material"; +import type { RootState } from "@/Types/state"; + +type XTickProps = { + x: number; + y: number; + payload: { value: string }; + range: string; +}; + +export const XTick = ({ x, y, payload, range }: XTickProps) => { + const format = tickDateFormatLookup(range); + const theme = useTheme(); + const uiTimezone = useSelector((state: RootState) => state.ui.timezone); + return ( + + {formatDateWithTz(payload?.value, format, uiTimezone)} + + ); +};