upcoming: [M3-7301] - Replace Linode Network Transfer History chart w…

…ith Recharts (#9938) ## Description 📝 This PR is part of a bigger effort to replace chart.js with the more modern Recharts. As a first step, replace the Linode Network Transfer History chart. ### Verification steps - Go to the Network tab of a Linode that's been running for a while - Confirm the updated UI and that there are no regressions in the graph, units, etc
linode · Dec 1, 2023 · 9eee3aa · 9eee3aa
1 parent 5ebe15e
commit 9eee3aa
Show file tree

Hide file tree

Showing 7 changed files with 358 additions and 2 deletions.
diff --git a/packages/manager/.changeset/pr-9938-upcoming-features-1701201054946.md b/packages/manager/.changeset/pr-9938-upcoming-features-1701201054946.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Replace Linode Network Transfer History chart with Recharts ([#9938](https://github.com/linode/manager/pull/9938))
diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -65,6 +65,7 @@
     "react-select": "~3.1.0",
     "react-vnc": "^0.5.3",
     "react-waypoint": "~9.0.2",
+    "recharts": "^2.9.3",
     "recompose": "^0.30.0",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",

diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -20,6 +20,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'selfServeBetas', label: 'Self Serve Betas' },
   { flag: 'unifiedMigrations', label: 'Unified Migrations' },
   { flag: 'vpc', label: 'VPC' },
+  { flag: 'recharts', label: 'Recharts' },
 ];
 
 export const FeatureFlagTool = withFeatureFlagProvider(() => {

diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
@@ -57,6 +57,7 @@ export interface Flags {
   productInformationBanners: ProductInformationBannerFlag[];
   promos: boolean;
   promotionalOffers: PromotionalOffer[];
+  recharts: boolean;
   referralBannerText: ReferralBannerText;
   regionDropdown: boolean;
   selfServeBetas: boolean;

diff --git a/...des/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransferHistoryChart.tsx b/...des/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransferHistoryChart.tsx
@@ -0,0 +1,114 @@
+import { Typography, useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { DateTime } from 'luxon';
+import React from 'react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  TooltipProps,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { Box } from 'src/components/Box';
+import { Paper } from 'src/components/Paper';
+import { NetworkUnit } from 'src/features/Longview/shared/utilities';
+import { roundTo } from 'src/utilities/roundTo';
+
+interface NetworkTransferHistoryChartProps {
+  data: [number, null | number][];
+  timezone: string;
+  unit: NetworkUnit;
+}
+
+export const NetworkTransferHistoryChart = (
+  props: NetworkTransferHistoryChartProps
+) => {
+  const { data, timezone, unit } = props;
+
+  const theme = useTheme();
+
+  const xAxisTickFormatter = (t: number) => {
+    return DateTime.fromMillis(t, { zone: timezone }).toFormat('LLL dd');
+  };
+
+  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>
+          <Typography fontFamily={theme.font.bold}>
+            Public outbound traffic: {tooltipValueFormatter(payload[0].value)}
+          </Typography>
+        </StyledPaper>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Box marginLeft={-5}>
+      <ResponsiveContainer height={190} width="100%">
+        <AreaChart data={data}>
+          <CartesianGrid
+            stroke={theme.color.grey7}
+            strokeDasharray="3 3"
+            vertical={false}
+          />
+          <XAxis
+            dataKey="t"
+            domain={['dataMin', 'dataMax']}
+            interval="preserveEnd"
+            minTickGap={15}
+            scale="time"
+            stroke={theme.color.label}
+            tickFormatter={xAxisTickFormatter}
+            type="number"
+          />
+          <YAxis dataKey="Public Outbound Traffic" stroke={theme.color.label} />
+          <Tooltip
+            contentStyle={{
+              color: '#606469',
+            }}
+            itemStyle={{
+              color: '#606469',
+              fontFamily: theme.font.bold,
+            }}
+            content={<CustomTooltip />}
+          />
+          <Area
+            dataKey="Public Outbound Traffic"
+            fill="#1CB35C"
+            isAnimationActive={false}
+            stroke="#1CB35C"
+            type="monotone"
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </Box>
+  );
+};
+
+const StyledPaper = styled(Paper, {
+  label: 'StyledPaper',
+})(({ theme }) => ({
+  border: `1px solid ${theme.color.border2}`,
+  padding: theme.spacing(1),
+}));
diff --git a/...eatures/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx b/...eatures/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx
@@ -17,6 +17,7 @@ import {
   formatNetworkTooltip,
   generateNetworkUnits,
 } from 'src/features/Longview/shared/utilities';
+import { useFlags } from 'src/hooks/useFlags';
 import {
   STATS_NOT_READY_API_MESSAGE,
   STATS_NOT_READY_MESSAGE,
@@ -27,6 +28,8 @@ 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;
@@ -36,6 +39,7 @@ export const TransferHistory = React.memo((props: Props) => {
   const { linodeCreated, linodeID } = props;
 
   const theme = useTheme();
+  const flags = useFlags();
 
   // Needed to see the user's timezone.
   const { data: profile } = useProfile();
@@ -151,6 +155,28 @@ export const TransferHistory = React.memo((props: Props) => {
       );
     }
 
+    // @TODO recharts: remove conditional code and delete old chart when we decide recharts is stable
+    if (flags?.recharts) {
+      const timeData = combinedData.reduce((acc: any, point: any) => {
+        acc.push({
+          'Public Outbound Traffic': convertNetworkData
+            ? convertNetworkData(point[1])
+            : point[1],
+          t: point[0],
+        });
+        return acc;
+      }, []);
+
+      return (
+        <NetworkTransferHistoryChart
+          aria-label={graphAriaLabel}
+          data={timeData}
+          timezone={profile?.timezone ?? 'UTC'}
+          unit={unit}
+        />
+      );
+    }
+
     return (
       <LineGraph
         data={[