upcoming: [DI-21200] - Migration from ChartJS to Recharts in CloudPulse

packages/api-v4/.changeset/pr-11204-upcoming-features-1730713240022.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add `DataSet` type in `types.ts` ([#11204](https://github.com/linode/manager/pull/11204))

packages/api-v4/src/cloudpulse/types.ts

@@ -132,3 +132,8 @@ export interface ServiceTypes {
 export interface ServiceTypesList {
   data: ServiceTypes[];
 }
+
+export interface DataSet {
+  [label: string]: number;
+  timestamp: number;
+}

packages/manager/.changeset/pr-11204-upcoming-features-1730713318901.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Replace `LineGraph` with `AreaChart` in `CloudPulseLineGraph` component. Add `connectNulls` property in `AreaChart.ts`  ([#11204](https://github.com/linode/manager/pull/11204))

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

@@ -28,7 +28,9 @@ import {
 import type { TooltipProps } from 'recharts';
 import type { MetricsDisplayRow } from 'src/components/LineGraph/MetricsDisplay';
 
-interface AreaProps {
+export type ChartVariant = 'line' | 'area';
+
+export interface AreaProps {
   /**
    * color for the area
    */
@@ -53,7 +55,7 @@ interface XAxisProps {
   tickGap: number;
 }
 
-interface AreaChartProps {
+export interface AreaChartProps {
   /**
    * list of areas to be displayed
    */
@@ -64,6 +66,11 @@ interface AreaChartProps {
    */
   ariaLabel: string;
 
+  /**
+   * connect nulls value between two data points
+   */
+  connectNulls? :boolean;
+
   /**
    * data to be displayed on the graph
    */
@@ -114,7 +121,7 @@ interface AreaChartProps {
    * make chart appear as a line or area chart
    * @default area
    */
-  variant?: 'area' | 'line';
+  variant?: ChartVariant;
 
   /**
    * The width of chart container.
@@ -143,6 +150,7 @@ export const AreaChart = (props: AreaChartProps) => {
     variant,
     width = '100%',
     xAxis,
+    connectNulls
   } = props;
 
   const theme = useTheme();
@@ -274,6 +282,7 @@ export const AreaChart = (props: AreaChartProps) => {
           )}
           {areas.map(({ color, dataKey }) => (
             <Area
+              connectNulls={connectNulls}
               dataKey={dataKey}
               fill={color}
               fillOpacity={variant === 'line' ? 0 : fillOpacity ?? 1}

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

@@ -41,7 +41,9 @@ export const StyledButton = styled(Button, {
     '&:before': {
       backgroundColor: hidden
         ? theme.color.disabledText
-        : theme.graphs[legendColor],
+        : theme.graphs[legendColor]
+        ? theme.graphs[legendColor]
+        : legendColor,
       flexShrink: 0,
     },
   }),

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

@@ -19,15 +19,6 @@ const ROW_HEADERS = ['Max', 'Avg', 'Last'] as const;
 type MetricKey = 'average' | 'last' | 'max';
 const METRIC_KEYS: MetricKey[] = ['max', 'average', 'last'];
 
-export type LegendColor =
-  | 'blue'
-  | 'darkGreen'
-  | 'green'
-  | 'lightGreen'
-  | 'purple'
-  | 'red'
-  | 'yellow';
-
 interface Props {
   /**
    * Array of rows to hide. Each row should contain the legend title.
@@ -47,7 +38,7 @@ export interface MetricsDisplayRow {
   data: Metrics;
   format: (n: number) => string;
   handleLegendClick?: () => void;
-  legendColor: LegendColor;
+  legendColor: string;
   legendTitle: string;
 }