upcoming: [M3-7302] - Replace NodeBalancer detail charts with Recharts

packages/manager/.changeset/pr-9983-upcoming-features-1702070124570.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Replace NodeBalancer detail charts with Recharts ([#9983](https://github.com/linode/manager/pull/9983))

packages/manager/src/components/AreaChart.tsx

@@ -0,0 +1,138 @@
+import { Typography, useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { DateTime } from 'luxon';
+import React from 'react';
+import {
+  AreaChart as _AreaChart,
+  Area,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  TooltipProps,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { Paper } from 'src/components/Paper';
+import { roundTo } from 'src/utilities/roundTo';
+
+interface AreaProps {
+  color: string;
+  dataKey: string;
+}
+
+interface XAxisProps {
+  tickFormat: string;
+  tickGap: number;
+}
+
+interface AreaChartProps {
+  areas: AreaProps[];
+  data: any;
+  height: number;
+  timezone: string;
+  unit: string;
+  xAxis: XAxisProps;
+}
+
+const humanizeLargeData = (value: number) => {
+  if (value >= 1000000) {
+    return value / 1000000 + 'M';
+  }
+  if (value >= 1000) {
+    return value / 1000 + 'K';
+  }
+  return `${value}`;
+};
+
+export const AreaChart = (props: AreaChartProps) => {
+  const { areas, data, height, timezone, unit, xAxis } = props;
+
+  const theme = useTheme();
+
+  const xAxisTickFormatter = (t: number) => {
+    return DateTime.fromMillis(t, { zone: timezone }).toFormat(
+      xAxis.tickFormat
+    );
+  };
+
+  const tooltipLabelFormatter = (t: number) => {
+    return DateTime.fromMillis(t, { zone: timezone }).toFormat(
+      'LLL dd, yyyy, h:mm a'
+    );
+  };
+
+  const tooltipValueFormatter = (value: number) =>
+    `${roundTo(value)} ${unit}/s`;
+
+  const CustomTooltip = ({
+    active,
+    label,
+    payload,
+  }: TooltipProps<any, any>) => {
+    if (active && payload && payload.length) {
+      return (
+        <StyledPaper>
+          <Typography>{tooltipLabelFormatter(label)}</Typography>
+          {payload.map((item) => (
+            <Typography fontFamily={theme.font.bold} key={item.dataKey}>
+              {item.dataKey}: {tooltipValueFormatter(item.value)}
+            </Typography>
+          ))}
+        </StyledPaper>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <ResponsiveContainer height={height} width="100%">
+      <_AreaChart data={data}>
+        <CartesianGrid
+          stroke={theme.color.grey7}
+          strokeDasharray="3 3"
+          vertical={false}
+        />
+        <XAxis
+          dataKey="t"
+          domain={['dataMin', 'dataMax']}
+          interval="preserveEnd"
+          minTickGap={xAxis.tickGap}
+          scale="time"
+          stroke={theme.color.label}
+          tickFormatter={xAxisTickFormatter}
+          type="number"
+        />
+        <YAxis stroke={theme.color.label} tickFormatter={humanizeLargeData} />
+        <Tooltip
+          contentStyle={{
+            color: '#606469',
+          }}
+          itemStyle={{
+            color: '#606469',
+            fontFamily: theme.font.bold,
+          }}
+          content={<CustomTooltip />}
+        />
+        {areas.map(({ color, dataKey }) => (
+          <Area
+            dataKey={dataKey}
+            fill={color}
+            isAnimationActive={false}
+            key={dataKey}
+            stroke={color}
+            type="monotone"
+          />
+        ))}
+      </_AreaChart>
+    </ResponsiveContainer>
+  );
+};
+
+const StyledPaper = styled(Paper, {
+  label: 'StyledPaper',
+})(({ theme }) => ({
+  border: `1px solid ${theme.color.border2}`,
+  padding: theme.spacing(1),
+}));

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx

@@ -7,6 +7,7 @@ import { DateTime, Interval } from 'luxon';
 import * as React from 'react';
 
 import PendingIcon from 'src/assets/icons/pending.svg';
+import { AreaChart } from 'src/components/AreaChart';
 import { Box } from 'src/components/Box';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
@@ -28,8 +29,6 @@ import { useProfile } from 'src/queries/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { readableBytes } from 'src/utilities/unitConversions';
 
-import { NetworkTransferHistoryChart } from './NetworkTransferHistoryChart';
-
 interface Props {
   linodeCreated: string;
   linodeID: number;
@@ -168,12 +167,25 @@ export const TransferHistory = React.memo((props: Props) => {
       }, []);
 
       return (
-        <NetworkTransferHistoryChart
-          aria-label={graphAriaLabel}
-          data={timeData}
-          timezone={profile?.timezone ?? 'UTC'}
-          unit={unit}
-        />
+        <Box marginLeft={-5}>
+          <AreaChart
+            areas={[
+              {
+                color: '#1CB35C',
+                dataKey: 'Public Outbound Traffic',
+              },
+            ]}
+            xAxis={{
+              tickFormat: 'LLL dd',
+              tickGap: 15,
+            }}
+            aria-label={graphAriaLabel}
+            data={timeData}
+            height={190}
+            timezone={profile?.timezone ?? 'UTC'}
+            unit={unit}
+          />
+        </Box>
       );
     }