upcoming: [DI-21842] - Fixed recharts issues in Cloudpulse

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))

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 {

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 }),

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);
 };
 
 /**

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 && (