Merge pull request #425 from bugout-dev/add-axis-to-grafics

Add axis.

frontend/pages/dashboard/[dashboardId].js

@@ -20,9 +20,11 @@ import { v4 } from "uuid";
 
 const HOUR_KEY = "Hourly";
 const DAY_KEY = "Daily";
+const MINUTE_KEY = "Minutes";
 let timeMap = {};
-timeMap[HOUR_KEY] = "hour";
-timeMap[DAY_KEY] = "day";
+timeMap[DAY_KEY] = "month";
+timeMap[HOUR_KEY] = "week";
+timeMap[MINUTE_KEY] = "day";
 
 const Analytics = () => {
   const { toggleAlert } = useContext(OverlayContext);
@@ -89,7 +91,7 @@ const Analytics = () => {
   //     [nodesReady]
   //   );
 
-  const [timeRange, setTimeRange] = useState(HOUR_KEY);
+  const [timeRange, setTimeRange] = useState(timeMap[MINUTE_KEY]);
   const router = useRouter();
   const { dashboardId } = router.params;
   const { dashboardCache, dashboardLinksCache, deleteDashboard } =
@@ -169,10 +171,12 @@ const Analytics = () => {
           </Heading>
           <Spacer />
           <RangeSelector
-            initialRange={timeRange}
+            initialRange={MINUTE_KEY}
             ranges={Object.keys(timeMap)}
             size={["sm", "md", null]}
-            onChange={(e) => setTimeRange(e)}
+            onChange={(e) => {
+              setTimeRange(timeMap[e]);
+            }}
           />
           <IconButton
             icon={<BiTrash />}
@@ -210,7 +214,8 @@ const Analytics = () => {
                   {name}
                 </Text>
                 <SubscriptionReport
-                  url={s3PresignedURLs.week}
+                  timeRange={timeRange}
+                  url={s3PresignedURLs[timeRange]}
                   id={v4()}
                   type={v4()}
                 />

frontend/src/components/Report.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { ResponsiveLineCanvas } from "@nivo/line";
 
-const Report = ({ data, metric }) => {
+const Report = ({ data, metric, timeRange }) => {
   const commonProperties = {
     animate: false,
     enableSlices: "x",
@@ -24,7 +24,29 @@ const Report = ({ data, metric }) => {
 
   const xyCumulativeData = xyData.map(generateCumulativeSum(0));
 
-  console.log(`metric ${metric} \n xyCumulativeData: `, xyCumulativeData);
+  const timeformat_scale = {
+    month: "%Y-%m-%d %H",
+    week: "%Y-%m-%d %H",
+    day: "%Y-%m-%d %H %M",
+  };
+
+  const timeformat_xformat = {
+    month: "time:%Y-%m-%d %H",
+    week: "time:%Y-%m-%d %H",
+    day: "time:%Y-%m-%d %H %M",
+  };
+
+  const axis_format = {
+    month: "%m-%d",
+    week: "%d",
+    day: "%H:%M",
+  };
+
+  const tickValues_format = {
+    month: "every 1 days",
+    week: "every 1 days",
+    day: "every 1 hours",
+  };
 
   const plotData = [{ id: "1", data: xyCumulativeData }];
 
@@ -32,31 +54,38 @@ const Report = ({ data, metric }) => {
     <ResponsiveLineCanvas
       {...commonProperties}
       data={plotData}
+      margin={{ top: 50, right: 110, bottom: 70, left: 60 }}
       isInteractive={true}
       xScale={{
         type: "time",
-        format: "%Y-%m-%d %H",
+        format: timeformat_scale[timeRange],
         useUTC: false,
-        precision: "hour",
+        precision: "minute",
       }}
-      xFormat="time:%Y-%m-%d %H"
+      xFormat={timeformat_xformat[timeRange]}
       yScale={{
         type: "linear",
+        max: "auto",
+        min: 0,
       }}
       axisLeft={{
         orient: "left",
         tickSize: 5,
         tickPadding: 5,
         tickRotation: 0,
-        legendOffset: -40,
+        legendOffset: -45,
         legendPosition: "middle",
+        legend: "count",
       }}
       axisBottom={{
-        format: "%b %d",
-        tickValues: "every 7 day",
-        tickRotation: 90,
+        format: axis_format[timeRange],
+        tickValues: tickValues_format[timeRange],
+        legend: "time",
+        tickRotation: 0,
+        legendOffset: 35,
+        legendPosition: "middle",
       }}
-      curve="linear"
+      curve={"monotoneY"}
       enableArea={true}
       enablePointLabel={false}
       pointSize={0}

frontend/src/components/SubscriptionReport.js

@@ -12,14 +12,13 @@ timeMap[HOUR_KEY] = "hour";
 timeMap[DAY_KEY] = "day";
 timeMap[WEEK_KEY] = "week";
 
-const SubscriptionReport = ({ url, id, type }) => {
+const SubscriptionReport = ({ timeRange, url, id, type }) => {
   const { data, isLoading } = usePresignedURL({
     url: url,
     isEnabled: true,
     id: id,
     type: type,
   });
-
   const plotMinW = "500px";
   if (!data || isLoading) return <Spinner />;
   return (
@@ -86,7 +85,11 @@ const SubscriptionReport = ({ url, id, type }) => {
                 >
                   {key}
                 </Text>
-                <Report data={data.events[key]} metric={key} />
+                <Report
+                  data={data.events[key]}
+                  metric={key}
+                  timeRange={timeRange}
+                />
               </Flex>
             );
           })}
@@ -123,7 +126,11 @@ const SubscriptionReport = ({ url, id, type }) => {
                 >
                   {key}
                 </Text>
-                <Report data={data.functions[key]} metric={key} />
+                <Report
+                  data={data.functions[key]}
+                  metric={key}
+                  timeRange={timeRange}
+                />
               </Flex>
             );
           })}
@@ -160,7 +167,11 @@ const SubscriptionReport = ({ url, id, type }) => {
                 >
                   {key}
                 </Text>
-                <Report data={data.generic[key]} metric={key} />
+                <Report
+                  data={data.generic[key]}
+                  metric={key}
+                  timeRange={timeRange}
+                />
               </Flex>
             );
           })}