Merge pull request #404 from bugout-dev/front-fixes

Front fixes

frontend/src/components/NewDashboard.js

@@ -80,7 +80,8 @@ const NewDashboard = (props) => {
   ]);
 
   const filterFn = (item, inputValue) =>
-    item.subscription_type_id === "ethereum_blockchain" &&
+    (item.subscription_type_id === "ethereum_blockchain" ||
+      item.subscription_type_id === "polygon_blockchain") &&
     (!inputValue ||
       item.address.toUpperCase().includes(inputValue.toUpperCase()) ||
       item.label.toUpperCase().includes(inputValue.toUpperCase()));

frontend/src/components/Report.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { ResponsiveLineCanvas } from "@nivo/line";
 
-const Report = ({ data }) => {
+const Report = ({ data, metric }) => {
   const commonProperties = {
     animate: false,
     enableSlices: "x",
@@ -10,7 +10,23 @@ const Report = ({ data }) => {
   const xyData = data.map((item) => {
     return { x: item.date, y: item.count };
   });
-  const plotData = [{ id: "1", data: xyData }];
+
+  xyData.reverse();
+
+  // Cumulative sum calculation inspired by: https://stackoverflow.com/a/55261098
+  function generateCumulativeSum(sum) {
+    function cumulativeSum(item) {
+      sum += item.y;
+      return { x: item.x, y: sum };
+    }
+    return cumulativeSum;
+  }
+
+  const xyCumulativeData = xyData.map(generateCumulativeSum(0));
+
+  console.log(`metric ${metric} \n xyCumulativeData: `, xyCumulativeData);
+
+  const plotData = [{ id: "1", data: xyCumulativeData }];
 
   return (
     <ResponsiveLineCanvas
@@ -19,11 +35,11 @@ const Report = ({ data }) => {
       isInteractive={true}
       xScale={{
         type: "time",
-        format: "%Y-%m-%d",
+        format: "%Y-%m-%d %H",
         useUTC: false,
-        precision: "day",
+        precision: "hour",
       }}
-      xFormat="time:%Y-%m-%d"
+      xFormat="time:%Y-%m-%d %H"
       yScale={{
         type: "linear",
       }}
@@ -40,7 +56,8 @@ const Report = ({ data }) => {
         tickValues: "every 7 day",
         tickRotation: 90,
       }}
-      curve="step"
+      curve="linear"
+      enableArea={true}
       enablePointLabel={false}
       pointSize={0}
       colors="#fd671b"

frontend/src/components/SubscriptionReport.js

@@ -24,7 +24,7 @@ const SubscriptionReport = ({ url, id, type }) => {
   if (!data || isLoading) return <Spinner />;
   return (
     <Flex w="100%" h="auto" flexGrow={1} flexBasis="420px" direction="column">
-      {data.data?.events && Object.keys(data.data?.events) && (
+      {data?.events && Object.keys(data?.events) && (
         <Flex
           w="100%"
           h="auto"
@@ -33,7 +33,7 @@ const SubscriptionReport = ({ url, id, type }) => {
           direction="column"
         >
           <Heading size="sm">Events</Heading>
-          {Object.keys(data.data.events.year).map((key) => {
+          {Object.keys(data.events).map((key) => {
             return (
               <Flex
                 key={v4()}
@@ -55,13 +55,13 @@ const SubscriptionReport = ({ url, id, type }) => {
                 >
                   {key}
                 </Text>
-                <Report data={data.data.events.year[key]} />
+                <Report data={data.events[key]} metric={key} />
               </Flex>
             );
           })}
         </Flex>
       )}
-      {data.data?.methods && Object.keys(data.data?.methods) && (
+      {data?.functions && Object.keys(data?.functions) && (
         <Flex
           w="100%"
           h="auto"
@@ -69,8 +69,8 @@ const SubscriptionReport = ({ url, id, type }) => {
           flexBasis="420px"
           direction="column"
         >
-          <Heading size="sm">Methods</Heading>
-          {Object.keys(data.data.methods.year).map((key) => {
+          <Heading size="sm">functions</Heading>
+          {Object.keys(data.functions).map((key) => {
             return (
               <Flex
                 key={v4()}
@@ -92,13 +92,13 @@ const SubscriptionReport = ({ url, id, type }) => {
                 >
                   {key}
                 </Text>
-                <Report data={data.data.methods.year[key]} />
+                <Report data={data.functions[key]} metric={key} />
               </Flex>
             );
           })}
         </Flex>
       )}
-      {data.data?.generic && Object.keys(data.data?.generic) && (
+      {data?.generic && Object.keys(data?.generic) && (
         <Flex
           w="100%"
           h="auto"
@@ -107,7 +107,7 @@ const SubscriptionReport = ({ url, id, type }) => {
           direction="column"
         >
           <Heading size="sm">Account generic</Heading>
-          {Object.keys(data.data.generic.year).map((key) => {
+          {Object.keys(data.generic).map((key) => {
             return (
               <Flex
                 key={v4()}
@@ -129,7 +129,7 @@ const SubscriptionReport = ({ url, id, type }) => {
                 >
                   {key}
                 </Text>
-                <Report data={data.data.generic.year[key]} />
+                <Report data={data.generic[key]} metric={key} />
               </Flex>
             );
           })}

frontend/src/core/services/dashboard.service.js

@@ -35,6 +35,6 @@ export const getDashboard = (dashboardId) => {
 export const getDashboardLinks = (dashboardId) => {
   return http({
     method: "GET",
-    url: `${API_URL}/dashboards/${dashboardId}/data_links`,
+    url: `${API_URL}/dashboards/${dashboardId}/stats`,
   });
 };