From 12412220cf3731919af43a36f3cbca8eb8244b11 Mon Sep 17 00:00:00 2001
From: Nikhil Agrawal <165884194+nikhagra-akamai@users.noreply.github.com>
Date: Wed, 27 Nov 2024 20:07:41 +0530
Subject: [PATCH] upcoming: [DI-21842] - Fixed recharts issues in Cloudpulse
 (#11317)

* upcoming: [DI-21842] - Updated logic to handle 1 xAxisTickCount

* upcoming: [DI-21842] - Updated legends height

* upcoming: [DI-21842] - Removed legends height breakpoint

* added changeset

* upcoming: [DI-21842] - Round y-axis value to 2 digits

* upcoming: [DI-21842] - Updated y-axis margin

* upcoming: [DI-21842] - Updated top margin to graph
---
 .../pr-11317-upcoming-features-1732533936298.md    |  5 +++++
 .../manager/src/components/AreaChart/AreaChart.tsx |  2 +-
 packages/manager/src/components/AreaChart/utils.ts |  4 ++++
 .../features/CloudPulse/Utils/unitConversion.ts    |  2 +-
 .../Widget/components/CloudPulseLineGraph.tsx      | 14 +++++++++++++-
 5 files changed, 24 insertions(+), 3 deletions(-)
 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))
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/components/AreaChart/utils.ts b/packages/manager/src/components/AreaChart/utils.ts
index 8777ca93bc1..0bbcb638a0b 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/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);
 };
 
 /**
diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx
index 76cb91b9cf5..d983bb332fb 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,20 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => {
       ) : (
         <AreaChart
           {...rest}
+          margin={{
+            bottom: 0,
+            left: -15,
+            right: 30,
+            top: 2,
+          }}
+          xAxisTickCount={
+            isSmallScreen ? undefined : Math.min(rest.data.length, 7)
+          }
+          yAxisProps={{
+            tickFormat: (value: number) => `${roundTo(value, 3)}`,
+          }}
           fillOpacity={0.5}
           legendHeight="150px"
-          xAxisTickCount={isSmallScreen ? undefined : 7}
         />
       )}
       {rest.data.length === 0 && (