radio

client/src/components/common/HistogramResponseTime.tsx

@@ -7,7 +7,7 @@ import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
 
 interface HistogramResponseTimeProps {
   checks: ICheck[];
-  height?: number | string;
+  height?: ResponsiveStyleValue<number | string>;
   gap?: ResponsiveStyleValue<number | string>;
 }
 

client/src/components/status-pages/StatusPageRow.tsx

@@ -1,13 +1,16 @@
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import { HeatmapResponseTime } from "../common/HeatmapResponseTime";
+import { HistogramResponseTime } from "../common/HistogramResponseTime";
 import { StatusLabel } from "@/components/design-elements";
-import { useTheme } from "@mui/material/styles";
 
+import { useTheme } from "@mui/material/styles";
+import { useAppSelector } from "@/hooks/AppHooks";
 import type { IMonitor } from "@/types/monitor";
 
 export const StatusPageRow = ({ monitor }: { monitor: IMonitor }) => {
   const theme = useTheme();
+  const type = useAppSelector((state) => state?.ui?.chartType || "heatmap");
 
   return (
     <Grid container>
@@ -23,22 +26,31 @@ export const StatusPageRow = ({ monitor }: { monitor: IMonitor }) => {
         <StatusLabel status={monitor?.status} sx={{ py: 1 }} />
       </Grid>
       <Grid size={12} marginTop={theme.spacing(2)}>
-        <HeatmapResponseTime
-          gap={{ xs: theme.spacing(0.5), md: theme.spacing(2) }}
-          checks={monitor?.latestChecks}
-          availabilityCellSx={{
-            borderRadius: {
-              xs: theme.spacing(0.5),
-              md: theme.shape.borderRadius,
-            },
-          }}
-          responseCellSx={{
-            borderRadius: {
-              xs: theme.spacing(0.5),
-              md: theme.shape.borderRadius,
-            },
-          }}
-        />
+        {type === "heatmap" && (
+          <HeatmapResponseTime
+            gap={{ xs: theme.spacing(0.5), md: theme.spacing(2) }}
+            checks={monitor?.latestChecks}
+            availabilityCellSx={{
+              borderRadius: {
+                xs: theme.spacing(0.5),
+                md: theme.shape.borderRadius,
+              },
+            }}
+            responseCellSx={{
+              borderRadius: {
+                xs: theme.spacing(0.5),
+                md: theme.shape.borderRadius,
+              },
+            }}
+          />
+        )}
+        {type === "histogram" && (
+          <HistogramResponseTime
+            checks={monitor?.latestChecks}
+            height={{ xs: 50, md: 100 }}
+            gap={{ xs: 0.5, md: theme.spacing(4) }}
+          />
+        )}
       </Grid>
     </Grid>
   );

client/src/pages/settings/Settings.tsx

@@ -1,6 +1,7 @@
 import Stack from "@mui/material/Stack";
 import { BasePage, ConfigBox } from "@/components/design-elements";
 import { AutoComplete, Select, LanguageSelector } from "@/components/inputs";
+import { RadioWithDescription } from "@/components/inputs/RadioInput";
 import MenuItem from "@mui/material/MenuItem";
 import Typography from "@mui/material/Typography";
 import { SettingsForm } from "@/pages/settings/SettingsForm";
@@ -100,22 +101,26 @@ const SettingsPage = () => {
         subtitle="Choose what type of Uptime chart you want to see on the dashboard and status page"
         leftContent={<DummyChart type={chartType} />}
         rightContent={
-          <Stack spacing={theme.spacing(2)}>
+          <Stack gap={theme.spacing(4)}>
             <Typography>Chart Type</Typography>
-            <Select
-              value={chartType}
-              onChange={(e: SelectChangeEvent<string>) => {
-                dispatch(setChartType(e.target.value as ChartType));
-              }}
-            >
-              <MenuItem value="heatmap">Heatmap</MenuItem>
-              <MenuItem value="histogram">Histogram</MenuItem>
-            </Select>
-            <Typography>
-              {chartType === "heatmap"
-                ? "Heatmap: colored line indicates status"
-                : "Bar chart: color denotes status (up/down). height denotes response time"}
-            </Typography>
+            <Stack gap={theme.spacing(4)}>
+              <RadioWithDescription
+                checked={chartType === "heatmap"}
+                onChange={() => dispatch(setChartType("heatmap"))}
+                value="heatmap"
+                label="Heatmap"
+                description="Compact tiles; color shows response speed, top strip shows availability."
+                name="chart-type"
+              />
+              <RadioWithDescription
+                checked={chartType === "histogram"}
+                onChange={() => dispatch(setChartType("histogram"))}
+                value="histogram"
+                label="Histogram"
+                description="One bar per check; height shows response time, color shows status."
+                name="chart-type"
+              />
+            </Stack>
           </Stack>
         }
       />

client/src/pages/status-page/StatusPageDetails.tsx

@@ -10,6 +10,7 @@ import type { ApiResponse } from "@/hooks/UseApi";
 import { useParams } from "react-router";
 import type { IStatusPageWithMonitors } from "@/types/status-page";
 import { NameHeader } from "@/components/status-pages/NameHeader";
+
 const GLOBAL_REFRESH = import.meta.env.VITE_APP_GLOBAL_REFRESH;
 const StatusPages = () => {
   const theme = useTheme();

client/src/pages/uptime/MonitorTable.tsx

@@ -8,6 +8,7 @@ import type { Header } from "@/components/design-elements/Table";
 import { ActionsMenu } from "@/components/actions-menu";
 import { ArrowDown, ArrowUp } from "lucide-react";
 
+import { useAppSelector } from "@/hooks/AppHooks";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
@@ -139,6 +140,9 @@ export const MonitorTable = ({
   };
 
   const getHeaders = () => {
+    const chartType = useAppSelector(
+      (state) => state?.ui?.chartType || "heatmap"
+    );
     const renderSortIcon = (isActive: boolean) => (
       <Box width={16} display="inline-flex" justifyContent="center">
         {isActive ? (
@@ -193,7 +197,11 @@ export const MonitorTable = ({
         id: "histogram",
         content: t("responseTime"),
         render: (row) => {
-          return <HeatmapResponseTime checks={row.latestChecks} />;
+          if (chartType === "histogram") {
+            return <HistogramResponseTime checks={row.latestChecks} />;
+          } else {
+            return <HeatmapResponseTime checks={row.latestChecks} />;
+          }
         },
       },
       {