extract xtick

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 (
-		<Text
-			x={x}
-			y={y + 10}
-			textAnchor="middle"
-			fill={theme.palette.text.secondary}
-			fontSize={11}
-			fontWeight={400}
-		>
-			{formatDateWithTz(payload?.value, format, uiTimezone)}
-		</Text>
-	);
-};
-
 type ResponseTimeToolTipProps = TooltipProps<ValueType, NameType> & {
 	range: string;
 	theme: Theme;

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<ValueType, NameType> & {
 	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 (
-		<Text
-			x={x}
-			y={y + 10}
-			textAnchor="middle"
-			fill={theme.palette.text.secondary}
-			fontSize={11}
-			fontWeight={400}
-		>
-			{formatDateWithTz(payload?.value, format, uiTimezone)}
-		</Text>
-	);
-};
-
 export const HistogramDetailsStacked = ({
 	checks = [],
 	range,

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";

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,

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 (
+		<Text
+			x={x}
+			y={y + 10}
+			textAnchor="middle"
+			fill={theme.palette.text.secondary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatDateWithTz(payload?.value, format, uiTimezone)}
+		</Text>
+	);
+};