fix: [M3-8872] - Table and Chart Legend Improvements (#11294)

* fix: [M3-8872] - Table and Chart Legend Improvements

* Update spacing in test

* Added changeset: Table and Chart Legend Spacing

* Add scroll shadows, remove scrollbar

* Remove shadows

* Add space for CPU %

* Add y-axis formatter

---------

Co-authored-by: Jaalah Ramos <[email protected]>

Author: jaalah-akamai

packages/manager/.changeset/pr-11294-fixed-1732119319735.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Table and Chart Legend Spacing ([#11294](https://github.com/linode/manager/pull/11294))

packages/manager/src/components/AreaChart/AreaChart.tsx

@@ -55,19 +55,26 @@ interface XAxisProps {
   tickFormat: string;
 
   /**
-   * represents the pixer gap between two x-axis ticks
+   * represents the pixel gap between two x-axis ticks
    */
   tickGap: number;
 }
 
+interface YAxisProps {
+  /**
+   * The formatter function for the y-axis tick.
+   */
+  tickFormat: () => string;
+}
+
 export interface AreaChartProps {
   /**
    * list of areas to be displayed
    */
   areas: AreaProps[];
 
   /**
-   * arialabel for the graph
+   * aria-label for the graph
    */
   ariaLabel: string;
 
@@ -154,6 +161,11 @@ export interface AreaChartProps {
    * non-zero value : this many ticks will be generated based on the starting & ending timestamp in the data
    */
   xAxisTickCount?: number;
+
+  /**
+   * y-axis properties
+   */
+  yAxisProps?: YAxisProps;
 }
 
 export const AreaChart = (props: AreaChartProps) => {
@@ -176,6 +188,7 @@ export const AreaChart = (props: AreaChartProps) => {
     width = '100%',
     xAxis,
     xAxisTickCount,
+    yAxisProps,
   } = props;
 
   const theme = useTheme();
@@ -277,7 +290,12 @@ export const AreaChart = (props: AreaChartProps) => {
             tickFormatter={xAxisTickFormatter}
             type="number"
           />
-          <YAxis stroke={theme.color.label} tickFormatter={humanizeLargeData} />
+          <YAxis
+            tickFormatter={
+              yAxisProps?.tickFormat ? yAxisProps.tickFormat : humanizeLargeData
+            }
+            stroke={theme.color.label}
+          />
           <Tooltip
             contentStyle={{
               color: theme.tokens.color.Neutrals[70],

packages/manager/src/components/AreaChart/utils.test.ts

@@ -31,9 +31,9 @@ describe('tooltipLabelFormatter', () => {
 
 describe('tooltipValueFormatter', () => {
   it('should return the rounded value up to a max of 2 decimals', () => {
-    expect(tooltipValueFormatter(5.434939999999999, ' Kb/s')).toBe('5.43 Kb/s');
-    expect(tooltipValueFormatter(5, ' Kb/s')).toBe('5 Kb/s');
-    expect(tooltipValueFormatter(0.000234, '%')).toBe('0%');
+    expect(tooltipValueFormatter(5.434939999999999, 'Kb/s')).toBe('5.43 Kb/s');
+    expect(tooltipValueFormatter(5, 'Kb/s')).toBe('5 Kb/s');
+    expect(tooltipValueFormatter(0.000234, '%')).toBe('0 %');
   });
 });
 

packages/manager/src/components/AreaChart/utils.ts

@@ -16,7 +16,7 @@ export const tooltipLabelFormatter = (timestamp: number, timezone: string) =>
   );
 
 export const tooltipValueFormatter = (value: number, unit: string) =>
-  `${roundTo(value)}${unit}`;
+  `${roundTo(value)} ${unit}`;
 
 export const humanizeLargeData = (value: number) => {
   if (value >= 1000000000000) {

packages/manager/src/components/LineGraph/MetricsDisplay.styles.ts

@@ -36,6 +36,7 @@ export const StyledButton = styled(Button, {
   label: 'StyledButton',
   shouldForwardProp: omittedProps(['legendColor', 'hidden']),
 })<{ legendColor?: string }>(({ hidden, legendColor, theme }) => ({
+  padding: 0,
   ...(legendColor && {
     '&:before': {
       backgroundColor: hidden

packages/manager/src/components/LineGraph/MetricsDisplay.tsx

@@ -112,15 +112,13 @@ export const MetricsDisplay = ({
   rows,
 }: Props) => (
   <StyledTable
-    sx={(theme) => ({
+    sx={{
       '.MuiTable-root': {
         border: 0,
       },
+      height: legendHeight,
       overflowY: 'auto',
-      [theme.breakpoints.up(1100)]: {
-        height: legendHeight,
-      },
-    })}
+    }}
     aria-label="Stats and metrics"
     stickyHeader
   >

packages/manager/src/components/Table/Table.styles.ts

@@ -26,7 +26,6 @@ export const StyledTableWrapper = styled('div', {
       borderRight: `1px solid ${theme.borderColors.borderTable}`,
       borderTop: `1px solid ${theme.borderColors.borderTable}`,
       fontFamily: theme.font.bold,
-      padding: '10px 15px',
     },
   },
   marginBottom: props.spacingBottom !== undefined ? props.spacingBottom : 0,

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

@@ -39,7 +39,7 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => {
         <AreaChart
           {...rest}
           fillOpacity={0.5}
-          legendHeight={theme.spacing(16)}
+          legendHeight="150px"
           xAxisTickCount={isSmallScreen ? undefined : 7}
         />
       )}

packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx

@@ -56,7 +56,7 @@ export const CloudPulseResourcesSelect = React.memo(
       },
     };
 
-    const { data: resources, isLoading, isError } = useResourcesQuery(
+    const { data: resources, isError, isLoading } = useResourcesQuery(
       disabled !== undefined ? !disabled : Boolean(region && resourceType),
       resourceType,
       {},
@@ -123,6 +123,9 @@ export const CloudPulseResourcesSelect = React.memo(
 
     return (
       <Autocomplete
+        helperText={
+          !isError ? `Select up to ${maxResourceSelectionLimit} ${label}` : ''
+        }
         onChange={(e, resourceSelections) => {
           setSelectedResources(resourceSelections);
 
@@ -167,8 +170,13 @@ export const CloudPulseResourcesSelect = React.memo(
         textFieldProps={{
           InputProps: {
             sx: {
+              '::-webkit-scrollbar': {
+                display: 'none',
+              },
               maxHeight: '55px',
+              msOverflowStyle: 'none',
               overflow: 'auto',
+              scrollbarWidth: 'none',
               svg: {
                 color: themes.light.color.grey3,
               },
@@ -181,9 +189,6 @@ export const CloudPulseResourcesSelect = React.memo(
         disableSelectAll={resourcesLimitReached} // Select_All option will not be available if number of resources are higher than resource selection limit
         disabled={disabled}
         errorText={isError ? `Failed to fetch ${label || 'Resources'}.` : ''}
-        helperText={
-          !isError ? `Select up to ${maxResourceSelectionLimit} ${label}` : ''
-        }
         isOptionEqualToValue={(option, value) => option.id === value.id}
         label={label || 'Resources'}
         limitTags={1}

packages/manager/src/utilities/statMetrics.tsx

@@ -45,7 +45,7 @@ export const getMetrics = (data: number[][]): Metrics => {
 
 export const formatNumber = (n: number): string => n.toFixed(2);
 
-export const formatPercentage = (value: number) => formatNumber(value) + '%';
+export const formatPercentage = (value: number) => formatNumber(value) + ' %';
 
 export const getTraffic = (averageInBits: number): number => {
   const averageInBytes = averageInBits / 8;