From a9d2613c0b23933d1af80c81eae8ca2c799b8b48 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Thu, 7 Dec 2023 15:28:32 -0500 Subject: [PATCH 1/6] replace nodebalancer detail connection chart with recharts --- .../NodeBalancerConnectionsChart.tsx | 113 ++++++++++++++++++ .../NodeBalancerSummary/TablesPanel.tsx | 52 +++++--- 2 files changed, 150 insertions(+), 15 deletions(-) create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerConnectionsChart.tsx diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerConnectionsChart.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerConnectionsChart.tsx new file mode 100644 index 00000000000..e84aa523666 --- /dev/null +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerConnectionsChart.tsx @@ -0,0 +1,113 @@ +import { Typography, useTheme } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { DateTime } from 'luxon'; +import React from 'react'; +import { + Area, + AreaChart, + CartesianGrid, + ResponsiveContainer, + Tooltip, + TooltipProps, + XAxis, + YAxis, +} from 'recharts'; + +import { Box } from 'src/components/Box'; +import { Paper } from 'src/components/Paper'; +import { roundTo } from 'src/utilities/roundTo'; + +interface NodeBalancerConnectionsChartProps { + data: [number, null | number][]; + timezone: string; + unit: string; +} + +export const NodeBalancerConnectionsChart = ( + props: NodeBalancerConnectionsChartProps +) => { + const { data, timezone, unit } = props; + + const theme = useTheme(); + + const xAxisTickFormatter = (t: number) => { + return DateTime.fromMillis(t, { zone: timezone }).toFormat('hh a'); + }; + + const tooltipLabelFormatter = (t: number) => { + return DateTime.fromMillis(t, { zone: timezone }).toFormat( + 'LLL dd, yyyy, h:mm a' + ); + }; + + const tooltipValueFormatter = (value: number) => + `${roundTo(value)} ${unit}/s`; + + const CustomTooltip = ({ + active, + label, + payload, + }: TooltipProps) => { + if (active && payload && payload.length) { + return ( + + {tooltipLabelFormatter(label)} + + Connections: {tooltipValueFormatter(payload[0].value)} + + + ); + } + + return null; + }; + + return ( + + + + + + + } + /> + + + + + ); +}; + +const StyledPaper = styled(Paper, { + label: 'StyledPaper', +})(({ theme }) => ({ + border: `1px solid ${theme.color.border2}`, + padding: theme.spacing(1), +})); diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx index dc0a7959987..aeca5100b54 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx @@ -8,9 +8,10 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LineGraph } from 'src/components/LineGraph/LineGraph'; import MetricsDisplay from 'src/components/LineGraph/MetricsDisplay'; -import { Typography } from 'src/components/Typography'; import { Paper } from 'src/components/Paper'; +import { Typography } from 'src/components/Typography'; import { formatBitsPerSecond } from 'src/features/Longview/shared/utilities'; +import { useFlags } from 'src/hooks/useFlags'; import { NODEBALANCER_STATS_NOT_READY_API_MESSAGE, useNodeBalancerQuery, @@ -21,6 +22,8 @@ import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getUserTimezone } from 'src/utilities/getUserTimezone'; import { formatNumber, getMetrics } from 'src/utilities/statMetrics'; +import { NodeBalancerConnectionsChart } from './NodeBalancerConnectionsChart'; + const STATS_NOT_READY_TITLE = 'Stats for this NodeBalancer are not available yet'; @@ -37,6 +40,8 @@ export const TablesPanel = () => { nodebalancer?.created ); + const flags = useFlags(); + const statsErrorString = error ? getAPIErrorOrDefault(error, 'Unable to load stats')[0].reason : undefined; @@ -80,24 +85,41 @@ export const TablesPanel = () => { const metrics = getMetrics(data); + const timeData = data.reduce((acc: any, point: any) => { + acc.push({ + Connections: point[1], + t: point[0], + }); + return acc; + }, []); + return ( - - - + ) : ( + + + + )} Date: Fri, 8 Dec 2023 15:13:17 -0500 Subject: [PATCH 2/6] replace nodebalancer detail traffic chart with recharts --- .../NodeBalancerTrafficChart.tsx | 121 ++++++++++++++++++ .../NodeBalancerSummary/TablesPanel.tsx | 80 ++++++++---- 2 files changed, 174 insertions(+), 27 deletions(-) create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerTrafficChart.tsx diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerTrafficChart.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerTrafficChart.tsx new file mode 100644 index 00000000000..a0595be947e --- /dev/null +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerTrafficChart.tsx @@ -0,0 +1,121 @@ +import { Typography, useTheme } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { DateTime } from 'luxon'; +import React from 'react'; +import { + Area, + AreaChart, + CartesianGrid, + ResponsiveContainer, + Tooltip, + TooltipProps, + XAxis, + YAxis, +} from 'recharts'; + +import { Box } from 'src/components/Box'; +import { Paper } from 'src/components/Paper'; +import { roundTo } from 'src/utilities/roundTo'; + +interface NodeBalancerTrafficChartProps { + data: any; + timezone: string; + unit: string; +} + +export const NodeBalancerTrafficChart = ( + props: NodeBalancerTrafficChartProps +) => { + const { data, timezone, unit } = props; + + const theme = useTheme(); + + const xAxisTickFormatter = (t: number) => { + return DateTime.fromMillis(t, { zone: timezone }).toFormat('hh a'); + }; + + const tooltipLabelFormatter = (t: number) => { + return DateTime.fromMillis(t, { zone: timezone }).toFormat( + 'LLL dd, yyyy, h:mm a' + ); + }; + + const tooltipValueFormatter = (value: number) => + `${roundTo(value)} ${unit}/s`; + + const CustomTooltip = ({ + active, + label, + payload, + }: TooltipProps) => { + if (active && payload && payload.length) { + return ( + + {tooltipLabelFormatter(label)} + + Traffic In: {tooltipValueFormatter(payload[0].value)}
+ Traffic Out: {tooltipValueFormatter(payload[1].value)} + + + ); + } + + return null; + }; + + return ( + + + + + + + } + /> + + + + + + ); +}; + +const StyledPaper = styled(Paper, { + label: 'StyledPaper', +})(({ theme }) => ({ + border: `1px solid ${theme.color.border2}`, + padding: theme.spacing(1), +})); diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx index aeca5100b54..754f08ffab8 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx @@ -23,6 +23,7 @@ import { getUserTimezone } from 'src/utilities/getUserTimezone'; import { formatNumber, getMetrics } from 'src/utilities/statMetrics'; import { NodeBalancerConnectionsChart } from './NodeBalancerConnectionsChart'; +import { NodeBalancerTrafficChart } from './NodeBalancerTrafficChart'; const STATS_NOT_READY_TITLE = 'Stats for this NodeBalancer are not available yet'; @@ -85,13 +86,17 @@ export const TablesPanel = () => { const metrics = getMetrics(data); - const timeData = data.reduce((acc: any, point: any) => { - acc.push({ - Connections: point[1], - t: point[0], - }); - return acc; - }, []); + let timeData = []; + // @TODO recharts: remove conditional code and delete old chart when we decide recharts is stable + if (flags.recharts) { + timeData = data.reduce((acc: any, point: any) => { + acc.push({ + Connections: point[1], + t: point[0], + }); + return acc; + }, []); + } return ( @@ -139,6 +144,18 @@ export const TablesPanel = () => { const renderTrafficChart = () => { const trafficIn = stats?.data.traffic.in ?? []; const trafficOut = stats?.data.traffic.out ?? []; + const timeData = []; + + // @TODO recharts: remove conditional code and delete old chart when we decide recharts is stable + if (flags.recharts && trafficIn) { + for (let i = 0; i < trafficIn.length; i++) { + timeData.push({ + 'Traffic In': trafficIn[i][1], + 'Traffic Out': trafficOut[i][1], + t: trafficIn[i][0], + }); + } + } if (statsNotReadyError) { return ( @@ -174,26 +191,35 @@ export const TablesPanel = () => { return ( - + {flags.recharts ? ( + + ) : ( + + )} Date: Fri, 8 Dec 2023 15:55:47 -0500 Subject: [PATCH 3/6] clean up --- packages/manager/src/components/AreaChart.tsx | 128 ++++++++++++++++++ .../NetworkTransferHistoryChart.tsx | 114 ---------------- .../TransferHistory.tsx | 28 ++-- .../NodeBalancerConnectionsChart.tsx | 113 ---------------- .../NodeBalancerTrafficChart.tsx | 121 ----------------- .../NodeBalancerSummary/TablesPanel.tsx | 59 ++++++-- 6 files changed, 192 insertions(+), 371 deletions(-) create mode 100644 packages/manager/src/components/AreaChart.tsx delete mode 100644 packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransferHistoryChart.tsx delete mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerConnectionsChart.tsx delete mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerTrafficChart.tsx diff --git a/packages/manager/src/components/AreaChart.tsx b/packages/manager/src/components/AreaChart.tsx new file mode 100644 index 00000000000..e756b363c99 --- /dev/null +++ b/packages/manager/src/components/AreaChart.tsx @@ -0,0 +1,128 @@ +import { Typography, useTheme } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { DateTime } from 'luxon'; +import React from 'react'; +import { + AreaChart as _AreaChart, + Area, + CartesianGrid, + ResponsiveContainer, + Tooltip, + TooltipProps, + XAxis, + YAxis, +} from 'recharts'; + +import { Paper } from 'src/components/Paper'; +import { roundTo } from 'src/utilities/roundTo'; + +interface AreaProps { + color: string; + dataKey: string; +} + +interface XAxisProps { + tickFormat: string; + tickGap: number; +} + +interface AreaChartProps { + areas: AreaProps[]; + data: any; + height: number; + timezone: string; + unit: string; + xAxis: XAxisProps; +} + +export const AreaChart = (props: AreaChartProps) => { + const { areas, data, height, timezone, unit, xAxis } = props; + + const theme = useTheme(); + + const xAxisTickFormatter = (t: number) => { + return DateTime.fromMillis(t, { zone: timezone }).toFormat( + xAxis.tickFormat + ); + }; + + const tooltipLabelFormatter = (t: number) => { + return DateTime.fromMillis(t, { zone: timezone }).toFormat( + 'LLL dd, yyyy, h:mm a' + ); + }; + + const tooltipValueFormatter = (value: number) => + `${roundTo(value)} ${unit}/s`; + + const CustomTooltip = ({ + active, + label, + payload, + }: TooltipProps) => { + if (active && payload && payload.length) { + return ( + + {tooltipLabelFormatter(label)} + {payload.map((item) => ( + + {item.dataKey}: {tooltipValueFormatter(item.value)} + + ))} + + ); + } + + return null; + }; + + return ( + + <_AreaChart data={data}> + + + + } + /> + {areas.map(({ color, dataKey }) => ( + + ))} + + + ); +}; + +const StyledPaper = styled(Paper, { + label: 'StyledPaper', +})(({ theme }) => ({ + border: `1px solid ${theme.color.border2}`, + padding: theme.spacing(1), +})); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransferHistoryChart.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransferHistoryChart.tsx deleted file mode 100644 index ae6862a260f..00000000000 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransferHistoryChart.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { Typography, useTheme } from '@mui/material'; -import { styled } from '@mui/material/styles'; -import { DateTime } from 'luxon'; -import React from 'react'; -import { - Area, - AreaChart, - CartesianGrid, - ResponsiveContainer, - Tooltip, - TooltipProps, - XAxis, - YAxis, -} from 'recharts'; - -import { Box } from 'src/components/Box'; -import { Paper } from 'src/components/Paper'; -import { NetworkUnit } from 'src/features/Longview/shared/utilities'; -import { roundTo } from 'src/utilities/roundTo'; - -interface NetworkTransferHistoryChartProps { - data: [number, null | number][]; - timezone: string; - unit: NetworkUnit; -} - -export const NetworkTransferHistoryChart = ( - props: NetworkTransferHistoryChartProps -) => { - const { data, timezone, unit } = props; - - const theme = useTheme(); - - const xAxisTickFormatter = (t: number) => { - return DateTime.fromMillis(t, { zone: timezone }).toFormat('LLL dd'); - }; - - const tooltipLabelFormatter = (t: number) => { - return DateTime.fromMillis(t, { zone: timezone }).toFormat( - 'LLL dd, yyyy, h:mm a' - ); - }; - - const tooltipValueFormatter = (value: number) => - `${roundTo(value)} ${unit}/s`; - - const CustomTooltip = ({ - active, - label, - payload, - }: TooltipProps) => { - if (active && payload && payload.length) { - return ( - - {tooltipLabelFormatter(label)} - - Public outbound traffic: {tooltipValueFormatter(payload[0].value)} - - - ); - } - - return null; - }; - - return ( - - - - - - - } - /> - - - - - ); -}; - -const StyledPaper = styled(Paper, { - label: 'StyledPaper', -})(({ theme }) => ({ - border: `1px solid ${theme.color.border2}`, - padding: theme.spacing(1), -})); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx index 137ba13a639..67dbe306337 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx @@ -7,6 +7,7 @@ import { DateTime, Interval } from 'luxon'; import * as React from 'react'; import PendingIcon from 'src/assets/icons/pending.svg'; +import { AreaChart } from 'src/components/AreaChart'; import { Box } from 'src/components/Box'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; @@ -28,8 +29,6 @@ import { useProfile } from 'src/queries/profile'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { readableBytes } from 'src/utilities/unitConversions'; -import { NetworkTransferHistoryChart } from './NetworkTransferHistoryChart'; - interface Props { linodeCreated: string; linodeID: number; @@ -168,12 +167,25 @@ export const TransferHistory = React.memo((props: Props) => { }, []); return ( - + + + ); } diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerConnectionsChart.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerConnectionsChart.tsx deleted file mode 100644 index e84aa523666..00000000000 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerConnectionsChart.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { Typography, useTheme } from '@mui/material'; -import { styled } from '@mui/material/styles'; -import { DateTime } from 'luxon'; -import React from 'react'; -import { - Area, - AreaChart, - CartesianGrid, - ResponsiveContainer, - Tooltip, - TooltipProps, - XAxis, - YAxis, -} from 'recharts'; - -import { Box } from 'src/components/Box'; -import { Paper } from 'src/components/Paper'; -import { roundTo } from 'src/utilities/roundTo'; - -interface NodeBalancerConnectionsChartProps { - data: [number, null | number][]; - timezone: string; - unit: string; -} - -export const NodeBalancerConnectionsChart = ( - props: NodeBalancerConnectionsChartProps -) => { - const { data, timezone, unit } = props; - - const theme = useTheme(); - - const xAxisTickFormatter = (t: number) => { - return DateTime.fromMillis(t, { zone: timezone }).toFormat('hh a'); - }; - - const tooltipLabelFormatter = (t: number) => { - return DateTime.fromMillis(t, { zone: timezone }).toFormat( - 'LLL dd, yyyy, h:mm a' - ); - }; - - const tooltipValueFormatter = (value: number) => - `${roundTo(value)} ${unit}/s`; - - const CustomTooltip = ({ - active, - label, - payload, - }: TooltipProps) => { - if (active && payload && payload.length) { - return ( - - {tooltipLabelFormatter(label)} - - Connections: {tooltipValueFormatter(payload[0].value)} - - - ); - } - - return null; - }; - - return ( - - - - - - - } - /> - - - - - ); -}; - -const StyledPaper = styled(Paper, { - label: 'StyledPaper', -})(({ theme }) => ({ - border: `1px solid ${theme.color.border2}`, - padding: theme.spacing(1), -})); diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerTrafficChart.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerTrafficChart.tsx deleted file mode 100644 index a0595be947e..00000000000 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerTrafficChart.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { Typography, useTheme } from '@mui/material'; -import { styled } from '@mui/material/styles'; -import { DateTime } from 'luxon'; -import React from 'react'; -import { - Area, - AreaChart, - CartesianGrid, - ResponsiveContainer, - Tooltip, - TooltipProps, - XAxis, - YAxis, -} from 'recharts'; - -import { Box } from 'src/components/Box'; -import { Paper } from 'src/components/Paper'; -import { roundTo } from 'src/utilities/roundTo'; - -interface NodeBalancerTrafficChartProps { - data: any; - timezone: string; - unit: string; -} - -export const NodeBalancerTrafficChart = ( - props: NodeBalancerTrafficChartProps -) => { - const { data, timezone, unit } = props; - - const theme = useTheme(); - - const xAxisTickFormatter = (t: number) => { - return DateTime.fromMillis(t, { zone: timezone }).toFormat('hh a'); - }; - - const tooltipLabelFormatter = (t: number) => { - return DateTime.fromMillis(t, { zone: timezone }).toFormat( - 'LLL dd, yyyy, h:mm a' - ); - }; - - const tooltipValueFormatter = (value: number) => - `${roundTo(value)} ${unit}/s`; - - const CustomTooltip = ({ - active, - label, - payload, - }: TooltipProps) => { - if (active && payload && payload.length) { - return ( - - {tooltipLabelFormatter(label)} - - Traffic In: {tooltipValueFormatter(payload[0].value)}
- Traffic Out: {tooltipValueFormatter(payload[1].value)} - - - ); - } - - return null; - }; - - return ( - - - - - - - } - /> - - - - - - ); -}; - -const StyledPaper = styled(Paper, { - label: 'StyledPaper', -})(({ theme }) => ({ - border: `1px solid ${theme.color.border2}`, - padding: theme.spacing(1), -})); diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx index 754f08ffab8..cefe1cb02ba 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx @@ -4,6 +4,8 @@ import * as React from 'react'; import { useParams } from 'react-router-dom'; import PendingIcon from 'src/assets/icons/pending.svg'; +import { AreaChart } from 'src/components/AreaChart'; +import { Box } from 'src/components/Box'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LineGraph } from 'src/components/LineGraph/LineGraph'; @@ -22,9 +24,6 @@ import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getUserTimezone } from 'src/utilities/getUserTimezone'; import { formatNumber, getMetrics } from 'src/utilities/statMetrics'; -import { NodeBalancerConnectionsChart } from './NodeBalancerConnectionsChart'; -import { NodeBalancerTrafficChart } from './NodeBalancerTrafficChart'; - const STATS_NOT_READY_TITLE = 'Stats for this NodeBalancer are not available yet'; @@ -101,12 +100,25 @@ export const TablesPanel = () => { return ( {flags.recharts ? ( - + + + ) : ( { {flags.recharts ? ( - + + + ) : ( Date: Fri, 8 Dec 2023 16:15:24 -0500 Subject: [PATCH 4/6] Added changeset: Replace NodeBalancer detail charts with Recharts --- .../.changeset/pr-9983-upcoming-features-1702070124570.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-9983-upcoming-features-1702070124570.md diff --git a/packages/manager/.changeset/pr-9983-upcoming-features-1702070124570.md b/packages/manager/.changeset/pr-9983-upcoming-features-1702070124570.md new file mode 100644 index 00000000000..6d8acb79720 --- /dev/null +++ b/packages/manager/.changeset/pr-9983-upcoming-features-1702070124570.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Replace NodeBalancer detail charts with Recharts ([#9983](https://github.com/linode/manager/pull/9983)) From 0866fc649e128688a05061b0d3f57e52341c9207 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Tue, 12 Dec 2023 15:55:21 -0500 Subject: [PATCH 5/6] fix graph display --- packages/manager/src/components/AreaChart.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/components/AreaChart.tsx b/packages/manager/src/components/AreaChart.tsx index e756b363c99..d88aff1a691 100644 --- a/packages/manager/src/components/AreaChart.tsx +++ b/packages/manager/src/components/AreaChart.tsx @@ -35,6 +35,16 @@ interface AreaChartProps { xAxis: XAxisProps; } +const humanizeLargeData = (value: number) => { + if (value >= 1000000) { + return value / 1000000 + 'M'; + } + if (value >= 1000) { + return value / 1000 + 'K'; + } + return `${value}`; +}; + export const AreaChart = (props: AreaChartProps) => { const { areas, data, height, timezone, unit, xAxis } = props; @@ -94,7 +104,7 @@ export const AreaChart = (props: AreaChartProps) => { tickFormatter={xAxisTickFormatter} type="number" /> - + Date: Tue, 12 Dec 2023 16:00:22 -0500 Subject: [PATCH 6/6] fix console error --- .../NodeBalancerSummary/TablesPanel.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx index cefe1cb02ba..2dc23c62495 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx @@ -274,9 +274,7 @@ export const TablesPanel = () => { return ( - - Graphs - + Graphs Connections (CXN/s, 5 min avg.) @@ -300,9 +298,14 @@ const StyledHeader = styled(Typography, { const StyledTitle = styled(Typography, { label: 'StyledTitle', })(({ theme }) => ({ + alignItems: 'center', + display: 'flex', [theme.breakpoints.down('lg')]: { marginLeft: theme.spacing(), }, + [theme.breakpoints.up('md')]: { + margin: `${theme.spacing(2)} 0`, + }, })); const StyledChart = styled('div', { @@ -324,16 +327,6 @@ const StyledBottomLegend = styled('div', { padding: 10, })); -const StyledgGraphControls = styled(Typography, { - label: 'StyledgGraphControls', -})(({ theme }) => ({ - alignItems: 'center', - display: 'flex', - [theme.breakpoints.up('md')]: { - margin: `${theme.spacing(2)} 0`, - }, -})); - const StyledPanel = styled(Paper, { label: 'StyledPanel', })(({ theme }) => ({