mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-04-25 02:18:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixed janky bar animations

Browse Source
This commit is contained in:
Daniel Cojocea
2024-09-05 17:19:59 -04:00
parent 2a1614436d
commit 209d7f0b57
2 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+5 -2
View File
@@ -10,6 +10,7 @@ import {
import { Box, Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import "./index.css";
import React, { useMemo } from "react";
const CustomToolTip = ({ active, payload, label }) => {
const theme = useTheme();
@@ -96,14 +97,16 @@ const MonitorDetailsAreaChart = ({ checks }) => {
});
};
const memoizedChecks = useMemo(() => checks, []);
const theme = useTheme();
return (
<ResponsiveContainer width="100%" height={220}>
<ResponsiveContainer width="100%" minWidth={25} height={220}>
<AreaChart
width="100%"
height="100%"
data={checks}
data={memoizedChecks}
margin={{
top: 10,
right: 0,
Client/src/Pages/Monitors/Details/Charts/index.jsx
+17 -13
View File
@@ -9,7 +9,7 @@ import {
RadialBar,
} from "recharts";
import { formatDate } from "../../../../Utils/timeUtils";
import { useState } from "react";
import { memo, useMemo, useState } from "react";
const CustomLabels = ({
x,
@@ -39,7 +39,7 @@ const CustomLabels = ({
);
};
export const UpBarChart = ({ data, type, onBarHover }) => {
export const UpBarChart = memo(({ data, type, onBarHover }) => {
const theme = useTheme();
const [chartHovered, setChartHovered] = useState(false);
@@ -54,10 +54,10 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
};
// TODO - REMOVE THIS LATER
let reversedData = [...data].reverse();
const reversedData = useMemo(() => [...data].reverse(), [data]);
return (
<ResponsiveContainer width="100%" height={155}>
<ResponsiveContainer width="100%" minWidth={210} height={155}>
<BarChart
width="100%"
height="100%"
@@ -120,19 +120,19 @@ export const UpBarChart = ({ data, type, onBarHover }) => {
</BarChart>
</ResponsiveContainer>
);
};
});
export const DownBarChart = ({ data, type, onBarHover }) => {
export const DownBarChart = memo(({ data, type, onBarHover }) => {
const theme = useTheme();
const [chartHovered, setChartHovered] = useState(false);
const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
// TODO - REMOVE THIS LATER
let reversedData = [...data].reverse();
const reversedData = useMemo(() => [...data].reverse(), [data]);
return (
<ResponsiveContainer width="100%" height={155}>
<ResponsiveContainer width="100%" minWidth={250} height={155}>
<BarChart
width="100%"
height="100%"
@@ -192,15 +192,19 @@ export const DownBarChart = ({ data, type, onBarHover }) => {
</BarChart>
</ResponsiveContainer>
);
};
});
export const ResponseGaugeChart = ({ data }) => {
const theme = useTheme();
let max = 1000; // max ms
data = [{ response: max, fill: "transparent", background: false }, ...data];
let responseTime = Math.floor(data[1].response);
const memoizedData = useMemo(
() => [{ response: max, fill: "transparent", background: false }, ...data],
[data[0].response]
);
let responseTime = Math.floor(memoizedData[1].response);
let responseProps =
responseTime <= 200
? {
@@ -227,12 +231,12 @@ export const ResponseGaugeChart = ({ data }) => {
};
return (
<ResponsiveContainer width="100%" height={155}>
<ResponsiveContainer width="100%" minWidth={210} height={155}>
<RadialBarChart
width="100%"
height="100%"
cy="89%"
data={data}
data={memoizedData}
startAngle={180}
endAngle={0}
innerRadius={100}