better graph

frontend/package.json

@@ -32,6 +32,7 @@
     "@tanstack/react-query-devtools": "^4.29.23",
     "@uidotdev/usehooks": "^2.0.1",
     "axios": "^1.4.0",
+    "d3-scale": "^4.0.2",
     "masonic": "^3.7.0",
     "moment": "^2.29.4",
     "notistack": "^3.0.1",

frontend/src/components/InstanceView/InstanceContentGrowth.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useColorScheme } from "@mui/joy/styles";
+
+import Badge from "@mui/joy/Badge";
+import Tabs from "@mui/joy/Tabs";
+import TabList from "@mui/joy/TabList";
+import Tab from "@mui/joy/Tab";
+import Breadcrumbs from "@mui/joy/Breadcrumbs";
+import Link from "@mui/joy/Link";
+import Container from "@mui/joy/Container";
+import Box from "@mui/joy/Box";
+import Typography from "@mui/joy/Typography";
+
+import moment from "moment";
+
+// import { ResponsiveContainer, Line, LineChart, Scatter, ScatterChart, Tooltip, XAxis, YAxis } from "recharts";
+
+import LineGraph from "../Shared/LineGraph";
+
+// const CustomTooltip = ({ active, payload, label }) => {
+//   console.info(payload);
+//   if (active && payload && payload.length) {
+//     return (
+//       <Box>
+//         {payload.map((i) => (
+//           <p className="label">{`${i.name} : ${i.value}`}</p>
+//         ))}
+//       </Box>
+//     );
+//   }
+
+//   return null;
+// };
+
+export default function InstanceContentGrowth({ userSeries }) {
+  console.log("userSeries", userSeries);
+
+  return <LineGraph dataSeries={userSeries} />;
+}

frontend/src/components/InstanceView/InstanceUserGrowth.tsx

@@ -1,46 +1,39 @@
 import React from "react";
+import { useColorScheme } from "@mui/joy/styles";
+
+import Badge from "@mui/joy/Badge";
+import Tabs from "@mui/joy/Tabs";
+import TabList from "@mui/joy/TabList";
+import Tab from "@mui/joy/Tab";
+import Breadcrumbs from "@mui/joy/Breadcrumbs";
+import Link from "@mui/joy/Link";
+import Container from "@mui/joy/Container";
+import Box from "@mui/joy/Box";
+import Typography from "@mui/joy/Typography";
 
 import moment from "moment";
 
-import { ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis } from "recharts";
-
-export default function InstanceUserGrowth({ userSeries }) {
-  const minUsers = Number(userSeries[0].value);
-  const maxUsers = Number(userSeries[userSeries.length - 1].value);
-
-  // round to closest 1000
-  const minUsersRounded = Math.floor(minUsers / 1000) * 1000;
-  const maxUsersRounded = Math.ceil(maxUsers / 1000) * 1000;
-
-  return (
-    <ResponsiveContainer width="100%" height={500}>
-      <ScatterChart
-      // margin={{
-      //   top: 5,
-      //   right: 30,
-      //   left: 20,
-      //   bottom: 5,
-      // }}
-      >
-        <XAxis
-          dataKey="time"
-          domain={["auto", "dataMax"]}
-          name="Time"
-          tickFormatter={(unixTime) => moment(unixTime).format("HH:mm DD-MM-YYYY")}
-          type="number"
-        />
-
-        <Tooltip />
-        <YAxis dataKey="value" name="Value" type="number" domain={[minUsersRounded, maxUsersRounded]} />
-
-        <Scatter
-          data={userSeries}
-          lineType="joint"
-          line={{ stroke: "#eee" }}
-          // lineJointType="monotoneX"
-          name="Values"
-        />
-      </ScatterChart>
-    </ResponsiveContainer>
-  );
+// import { ResponsiveContainer, Line, LineChart, Scatter, ScatterChart, Tooltip, XAxis, YAxis } from "recharts";
+
+import LineGraph from "../Shared/LineGraph";
+
+// const CustomTooltip = ({ active, payload, label }) => {
+//   console.info(payload);
+//   if (active && payload && payload.length) {
+//     return (
+//       <Box>
+//         {payload.map((i) => (
+//           <p className="label">{`${i.name} : ${i.value}`}</p>
+//         ))}
+//       </Box>
+//     );
+//   }
+
+//   return null;
+// };
+
+export default function InstanceUserGrowth({ metricsData }) {
+  console.log("userSeries", metricsData);
+
+  return <LineGraph dataSeries={metricsData.users} />;
 }

frontend/src/components/InstanceView/InstanceVersions.tsx

@@ -20,7 +20,6 @@ export default function InstanceVersions({ instance, versionSeries }) {
 
   return (
     <Box>
-      {/* <pre>{JSON.stringify(versionSeries, null, 4)}</pre> */}
       <Alert
         sx={{ alignItems: "flex-start" }}
         startDecorator={<InfoIcon sx={{ mt: "2px", mx: "4px" }} />}
@@ -45,8 +44,8 @@ export default function InstanceVersions({ instance, versionSeries }) {
             <ListItemContent>
               <Typography>
                 <Moment
-                  // Monday, July 25, 2103
-                  format="HH:mm - dddd, MMMM Do, YYYY"
+                  // Monday, July 25, 2103, 25:22
+                  format="MMMM Do, YYYY - HH:mm"
                 >
                   {version.time}
                 </Moment>

frontend/src/components/Shared/LineGraph.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { useColorScheme } from "@mui/joy/styles";
+
+import Box from "@mui/joy/Box";
+
+import moment from "moment";
+import { SimpleNumberFormat } from "../Shared/Display";
+
+import { ResponsiveContainer, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
+
+import { scaleLog } from "d3-scale";
+
+const CustomTooltip = ({ active, payload, label }) => {
+  console.info(payload);
+  if (active && payload && payload.length) {
+    return (
+      <Box>
+        {payload.map((i) => (
+          <p className="label">
+            {i.name}: <SimpleNumberFormat value={i.value} />{" "}
+          </p>
+        ))}
+      </Box>
+    );
+  }
+
+  return null;
+};
+
+export default function LineGraph({ dataSeries }) {
+  const { mode } = useColorScheme();
+
+  const minUsers = Number(dataSeries[0].value);
+  const maxUsers = Number(dataSeries[dataSeries.length - 1].value);
+
+  // round to closest 1000
+  const minUsersRounded = Math.floor(minUsers / 1000) * 1000;
+  const maxUsersRounded = Math.ceil(maxUsers / 1000) * 1000;
+
+  console.log("userSeries", dataSeries);
+
+  const scale = "linear"; //scaleLog().base(Math.E);
+
+  return (
+    <ResponsiveContainer width="100%" height={500}>
+      <LineChart data={dataSeries}>
+        {/* Time Axis */}
+        <XAxis
+          dataKey="time"
+          domain={["dataMax", "dataMax"]}
+          name="Time"
+          tickFormatter={(unixTime) => moment(unixTime).format("DD-MM-YYYY")}
+          type="number"
+          padding={{ left: 30, right: 30 }}
+        />
+
+        <Tooltip
+          cursor={{ stroke: "#999", strokeWidth: 2, strokeDasharray: "7,5" }}
+          content={CustomTooltip}
+        />
+
+        {/* Count Axis */}
+        <YAxis
+          dataKey="value"
+          type="number"
+          domain={[minUsersRounded, maxUsersRounded]}
+          scale={scale}
+          tickFormatter={(unixTime) => unixTime.toLocaleString()}
+        />
+
+        <Line
+          dataKey="value"
+          dot={false}
+          stroke={mode === "dark" ? "#8884d8" : "#82ca9d"}
+          strokeDasharray="3 3"
+          name="Users"
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}

frontend/src/pages/InstanceView.tsx

@@ -167,7 +167,7 @@ export default function InstanceView() {
             <Routes>
               <Route path="/" element={<InstanceOverview metricsData={metricsData} />} />
               <Route path="/communities" element={<InstanceCommunities instance={metricsData.instance} />} />
-              <Route path="/user-growth" element={<InstanceUserGrowth userSeries={metricsData.users} />} />
+              <Route path="/user-growth" element={<InstanceUserGrowth metricsData={metricsData} />} />
               <Route
                 path="/version-history"
                 element={