Metrics refactoring (WIP)

src/Routes.tsx

@@ -15,6 +15,7 @@ import { ExportData } from "./pages/ExportData";
 import { InventoryDetailsPage } from "./pages/InventoryDetailsPage/InventoryDetailsPage";
 import { ApprovalPage } from "./pages/ApprovalPage";
 import { CheckHRC } from "./pages/tools/CheckHRC";
+import { ChartsPage } from "./pages/ChartsPage";
 
 export function Routes() {
   return (
@@ -98,6 +99,11 @@ export function Routes() {
           <ExportData />
         </Route>
 
+        <Route path="/charts">
+          <Route path={'/'}><ChartsPage /></Route>
+          <Route path={'/addresses'}>123</Route>
+        </Route>
+
         <Route path="*">
           <Redirect to="/" />
         </Route>

src/api/client.ts

@@ -101,13 +101,13 @@ export function getRelatedTransactions(params: any[]) {
   >;
 }
 
-export function getTransactionCountLast14Days() {
-  return transport("getTransactionCountLast14Days", []) as Promise<any[]>;
+export function getTransactionCountLast14Days(limit = 14) {
+  return transport("getTransactionCountLast14Days", [limit]) as Promise<any[]>;
 }
 
 
-export function getWalletsCountLast14Days() {
-    return transport("getWalletsCountLast14Days", []) as Promise<any[]>;
+export function getWalletsCountLast14Days(limit = 14) {
+    return transport("getWalletsCountLast14Days", [limit]) as Promise<any[]>;
 }
 
 export function getContractsByField(params: any[]) {

src/components/appHeader/ToolsButton.tsx

@@ -41,7 +41,7 @@ export function ToolsButton() {
               history.push("/tools/approvals");
             }}
           >
-            Token Approvals 
+            Token Approvals
           </Anchor>
           <Anchor
             style={{ textDecoration: "underline" }}
@@ -52,6 +52,15 @@ export function ToolsButton() {
           >
             Check HRC
           </Anchor>
+            <Anchor
+                style={{ textDecoration: "underline" }}
+                onClick={(e) => {
+                    setIsOpen(false);
+                    history.push("/charts");
+                }}
+            >
+                Charts
+            </Anchor>
         </Box>
       }
       style={{

src/pages/ChartsPage/ActiveAddresses.tsx

@@ -0,0 +1,75 @@
+import React, {useEffect, useState} from 'react'
+import {Box, Heading, Text} from "grommet";
+import {BaseContainer, BasePage} from "../../components/ui";
+import {getWalletsCountLast14Days} from "../../api/client";
+import dayjs from "dayjs";
+import {palette} from "../../theme";
+import {useThemeMode} from "../../hooks/themeSwitcherHook";
+import {Line as LineChartJs} from "react-chartjs-2";
+import {getChartOptions} from "../../components/metrics/common";
+
+export const ActiveAddresses = () => {
+    const themeMode = useThemeMode();
+    const [result, setResult] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    useEffect(() => {
+        const loadData = async () => {
+            try {
+                setIsLoading(true);
+                const res = await getWalletsCountLast14Days(1000);
+                const test = Array(1).fill(null).map(_ => res).flat(1)
+                console.log('test', test)
+                setResult(test);
+                setIsLoading(false);
+            } catch (e) {
+                console.error('Error on loading metrics:', e)
+            }
+        }
+        loadData()
+    }, [])
+
+    const data = {
+        // labels: result.map((i) => dayjs(i.date).format("dddd, MMMM DD YYYY")),
+        labels: result.map((i, index) => dayjs(i.date).format("dddd, MMMM DD YYYY") + "_index_" + index),
+        datasets: [{
+            label: "Active wallets",
+            data: result.map((i) => +i.count),
+            borderColor: themeMode === 'light' ? palette.DarkGray : palette.MintGreen,
+            borderWidth: 1,
+            backgroundColor: 'white',
+            pointRadius: 0,
+            pointHoverRadius: 8,
+            pointBorderWidth: 0,
+            pointBorderColor: 'transparent',
+            pointHoverBackgroundColor: themeMode === 'light' ? 'rgba(85, 98, 109, 0.4)' : 'rgba(105, 250, 189, 0.4)',
+        }]
+    }
+
+    let min = Number.MAX_SAFE_INTEGER;
+    result.forEach(e=>{
+        if (min > +e.count) {
+            min = +e.count;
+        }
+    });
+    const items = result.map((item) => {
+        return {
+            ...item,
+            timestamp: item.date
+        }
+    })
+
+    return <BaseContainer pad={{ horizontal: "0" }}>
+        <Heading size="small" margin={{ bottom: "medium", top: "0" }}>
+            <Box direction={"row"}>Active addresses</Box>
+        </Heading>
+        <BasePage pad={"small"} style={{overflow: 'inherit'}}>
+            <Box style={{ width: "100%" }} direction={"row"} align={'center'}>
+                {!isLoading && (
+                    // @ts-ignore
+                    <LineChartJs options={getChartOptions(themeMode, items)} data={data} height="50px" />
+                )}
+            </Box>
+        </BasePage>
+    </BaseContainer>
+}

src/pages/ChartsPage/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Box, Heading, Text } from "grommet";
+import { BasePage, BaseContainer } from "src/components/ui";
+import {Route, Switch, useHistory, useLocation, useParams, useRouteMatch} from "react-router-dom";
+import {ActiveAddresses} from "./ActiveAddresses";
+
+export function ChartsPage() {
+    // @ts-ignore
+    const { shardNumber } = useParams();
+
+    const history = useHistory();
+    const location = useLocation();
+    const [, ,route] = location.pathname.split('/')
+
+    const navigate = (path: string) => history.push(path)
+
+    if(route === 'addresses') {
+        return <ActiveAddresses />
+    }
+
+    return (
+        <BaseContainer pad={{ horizontal: "0" }}>
+            <Heading size="small" margin={{ bottom: "medium", top: "0" }}>
+                <Box direction={"row"}>Harmony One Charts</Box>
+            </Heading>
+            <BasePage pad={"small"} style={{overflow: 'inherit'}}>
+                <Box style={{ width: "200px" }} direction={"row"} align={'center'}>
+                    <Text onClick={() => navigate('/charts/addresses')}>daily active addresses</Text>
+                </Box>
+            </BasePage>
+        </BaseContainer>
+    );
+}