docker details tweaks

client/src/components/monitors/BarDockerCount.tsx

@@ -12,9 +12,11 @@ import {
 } from "recharts";
 import { XTick } from "@/components/monitors/ChartResponseTime";
 import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { BaseBox } from "@/components/design-elements";
 import { useAppSelector } from "@/hooks/AppHooks";
 import { formatDateWithTz, tooltipDateFormatLookup } from "@/utils/TimeUtils";
+import { useTranslation } from "react-i18next";
 
 type Datum = Record<string, unknown> & { _id: string | number };
 
@@ -33,11 +35,12 @@ export const BarDockerCount = ({
 }) => {
   const theme = useTheme();
   const hasData = Array.isArray(data) && data.length > 0;
+  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
   const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
+  const { t } = useTranslation();
 
   const CountTooltip = ({ active, payload, label }: any) => {
     if (!active || !payload || !label) return null;
-    console.log(JSON.stringify(payload, null, 2));
     const fmt = tooltipDateFormatLookup(range);
     const value = payload?.[0]?.payload?.[dataKey] ?? 0;
     return (
@@ -45,20 +48,29 @@ export const BarDockerCount = ({
         <Typography>
           {formatDateWithTz(String(label), fmt, uiTimezone)}
         </Typography>
-        <Typography>Containers: {value}</Typography>
+        <Typography>
+          {t("monitors.docker.details.tooltips.containers", { value })}
+        </Typography>
       </BaseBox>
     );
   };
 
   return (
-    <BaseChart title={title} icon={null}>
+    <BaseChart
+      title={title}
+      icon={null}
+      padding={{ xs: theme.spacing(4), md: theme.spacing(8) }}
+    >
       {!hasData ? (
         <Stack height={"100%"} alignItems={"center"} justifyContent={"center"}>
           <Typography variant="h2">{emptyText || "No data"}</Typography>
         </Stack>
       ) : (
         <ResponsiveContainer width="100%" height={200}>
-          <BarChart data={data}>
+          <BarChart
+            data={data}
+            margin={{ top: 8, right: 8, left: isSmall ? 4 : 12, bottom: 8 }}
+          >
             <defs>
               <linearGradient id={"gradient"} x1="0" y1="0" x2="0" y2="1">
                 <stop
@@ -82,7 +94,12 @@ export const BarDockerCount = ({
               dataKey={"_id"}
               tick={(props) => <XTick {...props} range={range} />}
             />
-            <YAxis allowDecimals={false} />
+            <YAxis
+              allowDecimals={false}
+              width={isSmall ? 24 : 36}
+              tick={{ fontSize: isSmall ? 10 : 11 }}
+              tickMargin={4}
+            />
             <Tooltip content={<CountTooltip />} cursor={false} />
             <Bar dataKey={dataKey} fill={`url(#gradient)`} />
           </BarChart>

client/src/components/monitors/Chart.tsx

@@ -2,6 +2,7 @@ import { BaseBox } from "../design-elements";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import type { ResponsiveStyleValue } from "@mui/system";
 
 import { useTheme } from "@mui/material/styles";
 
@@ -10,6 +11,7 @@ type BaseChartProps = React.PropsWithChildren<{
   title: string;
   width?: number | string;
   maxWidth?: number | string;
+  padding?: number | string | ResponsiveStyleValue<number | string>;
 }>;
 
 export const BaseChart = ({
@@ -18,13 +20,13 @@ export const BaseChart = ({
   title,
   width = "100%",
   maxWidth = "100%",
+  padding,
 }: BaseChartProps) => {
   const theme = useTheme();
-
   return (
     <BaseBox
       sx={{
-        padding: theme.spacing(8),
+        padding: padding ?? theme.spacing(8),
         display: "flex",
         flex: 1,
         width: width,

client/src/components/monitors/HistogramDockerPercentage.tsx

@@ -11,6 +11,7 @@ import {
 } from "recharts";
 import { XTick } from "@/components/monitors/ChartResponseTime";
 import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 export const HistogramDockerPercentage = ({
   data,
@@ -26,17 +27,25 @@ export const HistogramDockerPercentage = ({
   emptyText?: string;
 }) => {
   const theme = useTheme();
+  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
   const hasData = Array.isArray(data) && data.length > 0;
 
   return (
-    <BaseChart title={title} icon={null}>
+    <BaseChart
+      title={title}
+      icon={null}
+      padding={{ xs: theme.spacing(4), md: theme.spacing(8) }}
+    >
       {!hasData ? (
         <Stack height={"100%"} alignItems={"center"} justifyContent={"center"}>
           <Typography variant="h2">{emptyText || "No data"}</Typography>
         </Stack>
       ) : (
-        <ResponsiveContainer width="100%" height={155}>
-          <AreaChart data={data}>
+        <ResponsiveContainer width="100%" height={200}>
+          <AreaChart
+            data={data}
+            margin={{ top: 8, right: 8, left: isSmall ? 0 : 8, bottom: 8 }}
+          >
             <CartesianGrid
               stroke={theme.palette.divider}
               strokeWidth={1}
@@ -60,9 +69,15 @@ export const HistogramDockerPercentage = ({
             </defs>
             <XAxis
               dataKey={"_id"}
+              axisLine={false}
+              tickLine={false}
               tick={(props) => <XTick {...props} range={range} />}
             />
-            <YAxis />
+            <YAxis
+              width={isSmall ? 24 : 36}
+              tick={{ fontSize: isSmall ? 10 : 11 }}
+              tickMargin={4}
+            />
             <Area
               dataKey={dataKey}
               stroke={theme.palette.primary.main}