From 911afc19d63b916f6c807124c12716eb9bc876fa Mon Sep 17 00:00:00 2001 From: nikhagra-akamai Date: Fri, 22 Nov 2024 18:18:59 +0530 Subject: [PATCH 1/7] upcoming: [DI-21842] - Updated logic to handle 1 xAxisTickCount --- packages/manager/src/components/AreaChart/utils.ts | 4 ++++ .../CloudPulse/Widget/components/CloudPulseLineGraph.tsx | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/components/AreaChart/utils.ts b/packages/manager/src/components/AreaChart/utils.ts index 2586b048801..d540e1a56c2 100644 --- a/packages/manager/src/components/AreaChart/utils.ts +++ b/packages/manager/src/components/AreaChart/utils.ts @@ -57,6 +57,10 @@ export const generate12HourTicks = ( const startTime = data[0].timestamp; const endTime = data[data.length - 1].timestamp; + if (tickCount === 1) { + return [(startTime + endTime) / 2]; + } + // Calculate duration in hours const duration = DateTime.fromMillis(endTime, { zone: timezone }).diff( DateTime.fromMillis(startTime, { zone: timezone }), diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index a54e2c19747..9167b2cfaf2 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -38,9 +38,11 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { ) : ( )} {rest.data.length === 0 && ( From af55c0e31de0afb09a49cdf6d488766584ef15cf Mon Sep 17 00:00:00 2001 From: nikhagra-akamai Date: Fri, 22 Nov 2024 18:37:45 +0530 Subject: [PATCH 2/7] upcoming: [DI-21842] - Updated legends height --- .../CloudPulse/Widget/components/CloudPulseLineGraph.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 9167b2cfaf2..2f6e93cb3e7 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -42,7 +42,7 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { isSmallScreen ? undefined : Math.min(rest.data.length, 7) } fillOpacity={0.5} - legendHeight={theme.spacing(16)} + legendHeight={theme.spacing(18)} /> )} {rest.data.length === 0 && ( From 1367dd36e80786d767b9bf8a9c1a220230c54133 Mon Sep 17 00:00:00 2001 From: nikhagra-akamai Date: Mon, 25 Nov 2024 15:29:39 +0530 Subject: [PATCH 3/7] upcoming: [DI-21842] - Removed legends height breakpoint --- packages/manager/src/components/LineGraph/MetricsDisplay.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/manager/src/components/LineGraph/MetricsDisplay.tsx b/packages/manager/src/components/LineGraph/MetricsDisplay.tsx index e60a22b46f2..49d2ecaf7f7 100644 --- a/packages/manager/src/components/LineGraph/MetricsDisplay.tsx +++ b/packages/manager/src/components/LineGraph/MetricsDisplay.tsx @@ -116,10 +116,8 @@ export const MetricsDisplay = ({ '.MuiTable-root': { border: 0, }, + height: legendHeight, overflowY: 'auto', - [theme.breakpoints.up(1100)]: { - height: legendHeight, - }, })} aria-label="Stats and metrics" stickyHeader From d9aebb63d0da977139e1e771dc5a08ae7a16bcd9 Mon Sep 17 00:00:00 2001 From: nikhagra-akamai Date: Mon, 25 Nov 2024 16:55:51 +0530 Subject: [PATCH 4/7] added changeset --- .../.changeset/pr-11317-upcoming-features-1732533936298.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11317-upcoming-features-1732533936298.md diff --git a/packages/manager/.changeset/pr-11317-upcoming-features-1732533936298.md b/packages/manager/.changeset/pr-11317-upcoming-features-1732533936298.md new file mode 100644 index 00000000000..45112c15a2c --- /dev/null +++ b/packages/manager/.changeset/pr-11317-upcoming-features-1732533936298.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Modify `generate12HoursTicks` method in AreaChart `utils.ts`, Remove breakpoint condition in `MetricsDisplay.tsx`, modify `legendHeight` and `xAxisTickCount` in `CloudPulseLineGraph.tsx` ([#11317](https://github.com/linode/manager/pull/11317)) From 3ba86d5644983105c6aacf386e70c758ec7ce3a0 Mon Sep 17 00:00:00 2001 From: nikhagra-akamai Date: Tue, 26 Nov 2024 11:05:50 +0530 Subject: [PATCH 5/7] upcoming: [DI-21842] - Round y-axis value to 2 digits --- .../manager/src/features/CloudPulse/Utils/unitConversion.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Utils/unitConversion.ts b/packages/manager/src/features/CloudPulse/Utils/unitConversion.ts index 7dfccb8d7bb..a22a473c7e7 100644 --- a/packages/manager/src/features/CloudPulse/Utils/unitConversion.ts +++ b/packages/manager/src/features/CloudPulse/Utils/unitConversion.ts @@ -166,7 +166,7 @@ export const convertValueToUnit = (value: number, maxUnit: string) => { if (convertingValue === 1) { return roundTo(value); } - return value / convertingValue; + return roundTo(value / convertingValue); }; /** From e668e253fe865dcdf9d24ade0363f3f9f717c9f4 Mon Sep 17 00:00:00 2001 From: nikhagra-akamai Date: Wed, 27 Nov 2024 12:40:59 +0530 Subject: [PATCH 6/7] upcoming: [DI-21842] - Updated y-axis margin --- .../manager/src/components/AreaChart/AreaChart.tsx | 2 +- .../Widget/components/CloudPulseLineGraph.tsx | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/components/AreaChart/AreaChart.tsx b/packages/manager/src/components/AreaChart/AreaChart.tsx index 3a5c014453c..1ebe751e78f 100644 --- a/packages/manager/src/components/AreaChart/AreaChart.tsx +++ b/packages/manager/src/components/AreaChart/AreaChart.tsx @@ -64,7 +64,7 @@ interface YAxisProps { /** * The formatter function for the y-axis tick. */ - tickFormat: () => string; + tickFormat: (value: number) => string; } export interface AreaChartProps { diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 581b580f900..38ef8f1e3d6 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; +import { roundTo } from 'src/utilities/roundTo'; import type { AreaChartProps } from 'src/components/AreaChart/AreaChart'; @@ -38,9 +39,18 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { ) : ( `${roundTo(value, 3)}`, + }} fillOpacity={0.5} legendHeight="150px" /> From fdbbaf9db48aff8c338ee495de63bc4beb5b4682 Mon Sep 17 00:00:00 2001 From: nikhagra-akamai Date: Wed, 27 Nov 2024 16:18:51 +0530 Subject: [PATCH 7/7] upcoming: [DI-21842] - Updated top margin to graph --- .../CloudPulse/Widget/components/CloudPulseLineGraph.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 38ef8f1e3d6..d983bb332fb 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -43,7 +43,7 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { bottom: 0, left: -15, right: 30, - top: 0, + top: 2, }} xAxisTickCount={ isSmallScreen ? undefined : Math.min(rest.data.length, 7)