From e8cb09c16865a132e40e30aeec5cedaee788b2d5 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Tue, 17 Sep 2024 21:03:47 -0400 Subject: [PATCH] Increase stroke width on hover --- .../Charts/MonitorDetailsAreaChart/index.jsx | 8 ++++++-- Client/src/Pages/Monitors/Details/styled.jsx | 1 + Client/src/Pages/Monitors/utils.jsx | 6 +++--- .../Pages/PageSpeed/Details/Charts/AreaChart.jsx | 7 +++++-- Client/src/Pages/PageSpeed/Details/styled.jsx | 3 +++ Client/src/Pages/PageSpeed/card.jsx | 15 +++++++++------ 6 files changed, 27 insertions(+), 13 deletions(-) diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index 1114a84ff..30dae4b9a 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -10,7 +10,7 @@ import { } from "recharts"; import { Box, Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import { useSelector } from "react-redux"; import { formatDateWithTz } from "../../../Utils/timeUtils"; import "./index.css"; @@ -112,6 +112,7 @@ CustomTick.propTypes = { const MonitorDetailsAreaChart = ({ checks }) => { const theme = useTheme(); const memoizedChecks = useMemo(() => checks, [checks[0]]); + const [isHovered, setIsHovered] = useState(false); return ( @@ -125,6 +126,8 @@ const MonitorDetailsAreaChart = ({ checks }) => { left: 0, bottom: 0, }} + onMouseMove={() => setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} > { } + wrapperStyle={{ pointerEvents: "none" }} /> diff --git a/Client/src/Pages/Monitors/Details/styled.jsx b/Client/src/Pages/Monitors/Details/styled.jsx index 728df4922..42cc3560d 100644 --- a/Client/src/Pages/Monitors/Details/styled.jsx +++ b/Client/src/Pages/Monitors/Details/styled.jsx @@ -41,6 +41,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ }, "& path": { transition: "fill 300ms ease", + transition: "stroke-width 400ms ease", }, })); diff --git a/Client/src/Pages/Monitors/utils.jsx b/Client/src/Pages/Monitors/utils.jsx index cc079fedc..49c551c6f 100644 --- a/Client/src/Pages/Monitors/utils.jsx +++ b/Client/src/Pages/Monitors/utils.jsx @@ -40,9 +40,9 @@ const useUtils = () => { "& h2": { color: theme.palette.error.main }, }, paused: { - backgroundColor: theme.palette.warning.light, - background: `linear-gradient(340deg, ${theme.palette.warning.dark} -60%, ${theme.palette.warning.light} 35%)`, - borderColor: theme.palette.warning.dark, + backgroundColor: theme.palette.warning.bg, + background: `linear-gradient(340deg, ${theme.palette.warning.light} -60%, ${theme.palette.warning.bg} 35%)`, + borderColor: theme.palette.warning.light, "& h2": { color: theme.palette.warning.main }, }, pending: { diff --git a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx index a0d230bf0..2b627b9d6 100644 --- a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx +++ b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx @@ -9,7 +9,7 @@ import { Text, } from "recharts"; import { useTheme } from "@emotion/react"; -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import { Box, Stack, Typography } from "@mui/material"; import { formatDateWithTz } from "../../../../Utils/timeUtils"; import { useSelector } from "react-redux"; @@ -215,6 +215,7 @@ CustomTick.propTypes = { const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => { const theme = useTheme(); + const [isHovered, setIsHovered] = useState(false); const memoizedData = useMemo( () => processDataWithGaps(data, interval), [data[0]] @@ -234,6 +235,8 @@ const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => { height="100%" data={memoizedData} margin={{ top: 10 }} + onMouseMove={() => setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} > { dataKey={key} stackId={1} stroke={strokeColor} - strokeWidth={1.5} + strokeWidth={isHovered ? 2.5 : 1.5} fill={`url(#${filteredConfig[key].id})`} activeDot={{ stroke: bgColor, fill: strokeColor, r: 4.5 }} /> diff --git a/Client/src/Pages/PageSpeed/Details/styled.jsx b/Client/src/Pages/PageSpeed/Details/styled.jsx index d4feb7c8d..cf0dda917 100644 --- a/Client/src/Pages/PageSpeed/Details/styled.jsx +++ b/Client/src/Pages/PageSpeed/Details/styled.jsx @@ -36,6 +36,9 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ backgroundColor: theme.palette.background.main, background: `linear-gradient(325deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`, }, + "& path": { + transition: "stroke-width 400ms ease", + }, })); export const IconBox = styled(Box)(({ theme }) => ({ diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index 5c688a041..351ad45a1 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -13,12 +13,9 @@ import { Tooltip, } from "recharts"; import { useSelector } from "react-redux"; -import { - formatDateWithTz, - formatDurationRounded, - formatDurationSplit, -} from "../../Utils/timeUtils"; +import { formatDateWithTz, formatDurationSplit } from "../../Utils/timeUtils"; import useUtils from "../Monitors/utils"; +import { useState } from "react"; /** * CustomToolTip displays a tooltip with formatted date and score information. @@ -127,6 +124,7 @@ const processData = (data) => { */ const PagespeedAreaChart = ({ data, status }) => { const theme = useTheme(); + const [isHovered, setIsHovered] = useState(false); const { pagespeedStyles } = useUtils(); const formattedData = processData(data); @@ -139,6 +137,8 @@ const PagespeedAreaChart = ({ data, status }) => { data={formattedData} margin={{ top: 10, bottom: -5 }} style={{ cursor: "pointer" }} + onMouseMove={() => setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} > { { "&:hover": { backgroundColor: theme.palette.background.accent, }, + "& path": { + transition: "stroke-width 400ms ease", + }, }} >