basic chart with Recharts. lazy load page due to bundle size (#509)

Author: david-crespo

app/pages/instances/Metrics.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import {
+  Area,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  XAxis,
+  YAxis,
+} from 'recharts'
+
+const data = [
+  { name: '9:50', amt: 200, limit: 600 },
+  { name: '10:00', amt: 300, limit: 600 },
+  { name: '10:10', amt: 500, limit: 600 },
+  { name: '10:20', amt: 450, limit: 600 },
+  { name: '10:30', amt: 650, limit: 800 },
+  { name: '10:40', amt: 550, limit: 800 },
+  { name: '10:50', amt: 600, limit: 800 },
+]
+
+export default function InstanceMetrics() {
+  return (
+    <ComposedChart
+      width={600}
+      height={300}
+      data={data}
+      margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
+      className="mt-16"
+    >
+      {/* TODO: pull these colors from TW config */}
+      <CartesianGrid stroke="#1D2427" vertical={false} />
+      <Area
+        dataKey="amt"
+        stroke="#2F8865"
+        fillOpacity={1}
+        fill="#112725"
+        isAnimationActive={false}
+      />
+      <Line
+        dataKey="limit"
+        stroke="#48D597"
+        strokeDasharray="3 3"
+        dot={false}
+        type="stepBefore"
+        isAnimationActive={false}
+      />
+      <XAxis dataKey="name" />
+      <YAxis orientation="right" />
+    </ComposedChart>
+  )
+}

app/routes.tsx

@@ -1,10 +1,28 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 
 import type { RouteMatch, RouteObject } from 'react-router'
 import { Navigate, Route, Routes } from 'react-router-dom'
 
+// Needs to take import callback (as opposed to taking the path and passing it
+// to import()) because Rollup doesn't find the file properly otherwise. I tried
+// to follow the rules for dynamic import specified here but it didn't work:
+//
+// https://github.com/rollup/plugins/tree/02fb349d/packages/dynamic-import-vars#limitations
+// Rules imply () => import(`./{path}.tsx`) should work
+function lazyLoad(importFunc: () => Promise<{ default: React.ComponentType }>) {
+  const Inner = React.lazy(importFunc)
+  return () => (
+    // TODO: nicer fallback
+    <Suspense fallback="loading">
+      <Inner />
+    </Suspense>
+  )
+}
+
 import InstanceCreatePage from './pages/instances/create'
 import InstanceStorage from './pages/instances/Storage'
+// Recharts is 350 KB
+const InstanceMetrics = lazyLoad(() => import('./pages/instances/Metrics'))
 import OrgPage from './pages/OrgPage'
 import ProjectPage from './pages/project'
 import ProjectAccessPage from './pages/project/Access'
@@ -109,7 +127,11 @@ export const routes = (
                 crumb={instanceCrumb}
               >
                 <Route index />
-                <Route path="metrics" crumb="Metrics" />
+                <Route
+                  path="metrics"
+                  crumb="Metrics"
+                  element={<InstanceMetrics />}
+                />
                 <Route path="activity" crumb="Activity" />
                 <Route path="access" crumb="Access" />
                 <Route path="resize" crumb="Resize" />

package.json

@@ -44,6 +44,7 @@
     "react-router-dom": "^6.0.0",
     "react-table": "^7.7.0",
     "react-transition-group": "^4.4.1",
+    "recharts": "^2.1.6",
     "tslib": "^2.0.0",
     "uuid": "^8.3.2"
   },