Added: [DI-28776] - Use customized humanize method for cloudpulse metrics (#13224)

* Added: [DI-28776] - Use customized humanize method for cloudpulse metrics

* Added: [DI-28776] - Use customized humanize method for cloudpulse metrics

* Added: [DI-28776] - Update import

* Added: [DI-28776] - Changeset

Author: venkymano-akamai

packages/manager/.changeset/pr-13224-added-1766499338175.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Add customized humanize method for `cloudpulse metric` graphs ([#13224](https://github.com/linode/manager/pull/13224))

packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.test.ts

@@ -1,6 +1,5 @@
 import { formatPercentage } from '@linode/utilities';
 
-import * as utilities from 'src/components/AreaChart/utils';
 import { widgetFactory } from 'src/factories';
 
 import {
@@ -12,6 +11,7 @@ import {
   getTimeDurationFromPreset,
   mapResourceIdToName,
 } from './CloudPulseWidgetUtils';
+import * as utilities from './utils';
 
 import type {
   DimensionNameProperties,

packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts

@@ -2,8 +2,6 @@ import { Alias } from '@linode/design-language-system';
 import { DateTimeRangePicker } from '@linode/ui';
 import { getMetrics } from '@linode/utilities';
 
-import { humanizeLargeData } from 'src/components/AreaChart/utils';
-
 import { DIMENSION_TRANSFORM_CONFIG } from '../shared/DimensionTransform';
 import {
   convertValueToUnit,
@@ -13,6 +11,7 @@ import {
 } from './unitConversion';
 import {
   convertTimeDurationToStartAndEndTimeRange,
+  humanizeLargeData,
   seriesDataFormatter,
 } from './utils';
 

packages/manager/src/features/CloudPulse/Utils/utils.ts

@@ -1,5 +1,5 @@
 import { useAccount, useRegionsQuery } from '@linode/queries';
-import { isFeatureEnabledV2 } from '@linode/utilities';
+import { isFeatureEnabledV2, roundTo } from '@linode/utilities';
 import React from 'react';
 
 import { convertData } from 'src/features/Longview/shared/formatters';
@@ -676,3 +676,26 @@ export const arraysEqual = (
     [...b].sort((x, y) => x - y)
   );
 };
+
+/**
+ * @param value The numeric value to humanize
+ * @returns The humanized string representation of the value
+ */
+export const humanizeLargeData = (value: number) => {
+  if (value >= 1000000000000) {
+    return +(value / 1000000000000).toFixed(1) + 'T';
+  }
+  if (value >= 1000000000) {
+    return +(value / 1000000000).toFixed(1) + 'B';
+  }
+  if (value >= 1000000) {
+    return +(value / 1000000).toFixed(1) + 'M';
+  }
+  if (value >= 100000) {
+    return +(value / 1000).toFixed(0) + 'K';
+  }
+  if (value >= 1000) {
+    return +(value / 1000).toFixed(1) + 'K';
+  }
+  return `${roundTo(value, 1)}`;
+};

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx

@@ -4,9 +4,10 @@ import { Box, useMediaQuery, useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { AreaChart } from 'src/components/AreaChart/AreaChart';
-import { humanizeLargeData } from 'src/components/AreaChart/utils';
 import { useFlags } from 'src/hooks/useFlags';
 
+import { humanizeLargeData } from '../../Utils/utils';
+
 import type { AreaChartProps } from 'src/components/AreaChart/AreaChart';
 
 export interface CloudPulseLineGraph extends AreaChartProps {
@@ -69,7 +70,9 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => {
           }
           yAxisProps={
             isHumanizableUnit
-              ? undefined
+              ? {
+                  tickFormat: (value: number) => `${humanizeLargeData(value)}`,
+                }
               : {
                   tickFormat: (value: number) => `${roundTo(value, 3)}`,
                 }