feat: [DI-21463] - Added capability to transform area chart into line chart

packages/manager/.changeset/pr-11136-added-1729581444483.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Add `hideFill` & `fillOpacity` properties to `AreaChart` component ([#11136](https://github.com/linode/manager/pull/11136))

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

@@ -9,15 +9,13 @@ import {
   Legend,
   ResponsiveContainer,
   Tooltip,
-  TooltipProps,
   XAxis,
   YAxis,
 } from 'recharts';
 
 import { AccessibleAreaChart } from 'src/components/AreaChart/AccessibleAreaChart';
 import { Box } from 'src/components/Box';
 import MetricsDisplay from 'src/components/LineGraph/MetricsDisplay';
-import { MetricsDisplayRow } from 'src/components/LineGraph/MetricsDisplay';
 import { Paper } from 'src/components/Paper';
 import { StyledBottomLegend } from 'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel';
 
@@ -27,25 +25,90 @@ import {
   tooltipValueFormatter,
 } from './utils';
 
+import type { TooltipProps } from 'recharts';
+import type { MetricsDisplayRow } from 'src/components/LineGraph/MetricsDisplay';
+
 interface AreaProps {
+  /**
+   * color for the area
+   */
   color: string;
+
+  /**
+   * datakey for the area
+   */
   dataKey: string;
 }
 
 interface XAxisProps {
+  /**
+   * format for the x-axis timestamp
+   * ex: 'hh' to convert timestamp into hour
+   */
   tickFormat: string;
+
+  /**
+   * represents the pixer gap between two x-axis ticks
+   */
   tickGap: number;
 }
 
 interface AreaChartProps {
+  /**
+   * list of areas to be displayed
+   */
   areas: AreaProps[];
+
+  /**
+   * arialabel for the graph
+   */
   ariaLabel: string;
+
+  /**
+   * data to be displayed on the graph
+   */
   data: any;
+
+  /**
+   *
+   */
+  fillOpacity?: number;
+
+  /**
+   * maximum height of the chart container
+   */
   height: number;
+
+  /**
+   * list of legends rows to be displayed
+   */
   legendRows?: Omit<MetricsDisplayRow[], 'handleLegendClick'>;
+
+  /**
+   * true to display legends rows else false to hide
+   * @default false
+   */
   showLegend?: boolean;
+
+  /**
+   * timezone for the timestamp of graph data
+   */
   timezone: string;
+
+  /**
+   * unit to be displayed with data
+   */
   unit: string;
+
+  /**
+   * make chart appear as a line or area chart
+   * @default area
+   */
+  variant?: 'area' | 'line';
+
+  /**
+   * x-axis properties
+   */
   xAxis: XAxisProps;
 }
 
@@ -54,11 +117,13 @@ export const AreaChart = (props: AreaChartProps) => {
     areas,
     ariaLabel,
     data,
+    fillOpacity,
     height,
     legendRows,
     showLegend,
     timezone,
     unit,
+    variant,
     xAxis,
   } = props;
 
@@ -190,6 +255,7 @@ export const AreaChart = (props: AreaChartProps) => {
             <Area
               dataKey={dataKey}
               fill={color}
+              fillOpacity={variant === 'line' ? 0 : fillOpacity ?? 1}
               hide={activeSeries.includes(dataKey)}
               isAnimationActive={false}
               key={dataKey}