WIP

2024-11-27 22:34:49 +07:00
parent 3c44ae89da
commit 4887cbbd48
3 changed files with 107 additions and 60 deletions
@@ -1,4 +1,11 @@
-import { Card, CardHeader, CardContent, Typography, Box } from "@mui/material";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  Box,
+  useTheme,
+} from "@mui/material";
 import React, { FC, ReactElement, ReactEventHandler } from "react";
 import { ExplorerLineChart, IExplorerLineChartData } from "./ExplorerLineChart";
 import {
@@ -56,6 +63,7 @@ interface ICardDataRowsProps {
 }
 const CardDataRows = (props: ICardDataRowsProps): React.ReactNode => {
  const { rows } = props;
+
  return (
    <Box mb={3}>
      {rows.map((row, i) => {
@@ -66,7 +74,7 @@ const CardDataRows = (props: ICardDataRowsProps): React.ReactNode => {
            paddingBottom={2}
            display={"flex"}
            justifyContent={"space-between"}
-            borderBottom={i === 0 ? "1px solid #fff" : "none"}
+            borderBottom={i === 0 ? "1px solid #CAD6D7" : "none"}
          >
            <Typography>{row.key}</Typography>
            <Typography>{row.value}</Typography>
@@ -83,7 +91,7 @@ type ContentCardProps = {
  upDownLine?: ICardUpDownPriceLineProps;
  titlePrice?: ICardTitlePriceProps;
  dataRows?: ICardDataRowsProps;
-  graph?: Array<IExplorerLineChartData>;
+  graph?: { data: Array<IExplorerLineChartData>; color: string; label: string };
  progressBar?: IExplorerProgressBarProps;
  paragraph?: string;
  onClick?: ReactEventHandler;
@@ -117,7 +125,11 @@ export const ExplorerCard: FC<ContentCardProps> = ({
      {dataRows && <CardDataRows {...dataRows} />}
      {graph && (
        <Box mb={3}>
-          <ExplorerLineChart data={graph} />
+          <ExplorerLineChart
+            data={graph.data}
+            color={graph.color}
+            label={graph.label}
+          />
        </Box>
      )}
      {progressBar && (
@@ -13,10 +13,8 @@ const LineChart = dynamic(

 export interface IExplorerLineChartData {
  date_utc: string;
-  greenLineNumericData: number;
-  purpleLineNumericData: number;
-  //   total_packets_dropped: number;
-  //   total_stake: number;
+  numericData?: number;
+  // purpleLineNumericData?: number;
 }

 interface IAxes {
@@ -31,8 +29,12 @@ interface ILineAxes {

 export const ExplorerLineChart = ({
  data,
+  color,
+  label,
 }: {
  data: Array<IExplorerLineChartData>;
+  color: string;
+  label: string;
 }) => {
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"));
@@ -44,35 +46,35 @@ export const ExplorerLineChart = ({
    if (resultData.length > 0) {
      setChartData(resultData);
    }
-  }, []);
+  }, [data]);

  const transformData = (data: Array<IExplorerLineChartData>) => {
-    const greenLineData: ILineAxes = {
-      id: "Numeric Data 1",
+    const lineData: ILineAxes = {
+      id: label,
      data: [],
    };

-    const purpleLineData: ILineAxes = {
-      id: "Numeric Data 2",
-      data: [],
-    };
+    // const purpleLineData: ILineAxes = {
+    //   id: "Numeric Data 2",
+    //   data: [],
+    // };

    data.map((item: any) => {
      const axesGreenLineData: IAxes = {
        x: new Date(item.date_utc),
-        y: item.greenLineNumericData,
+        y: item.numericData,
      };

-      greenLineData.data.push(axesGreenLineData);
+      lineData.data.push(axesGreenLineData);

-      const axesPurpleLineData: IAxes = {
-        x: new Date(item.date_utc),
-        y: item.purpleLineNumericData,
-      };
+      // const axesPurpleLineData: IAxes = {
+      //   x: new Date(item.date_utc),
+      //   y: item.purpleLineNumericData,
+      // };

-      purpleLineData.data.push(axesPurpleLineData);
+      // purpleLineData.data.push(axesPurpleLineData);
    });
-    return [{ ...purpleLineData }, { ...greenLineData }];
+    return [{ ...lineData }];
  };

  const yformat = (num: number | string | Date) => {
@@ -91,18 +93,20 @@ export const ExplorerLineChart = ({
      throw new Error("Unexpected value");
    }
  };
+
+  console.log("chartData.length :>> ", chartData);
  return (
    <Box width={"100%"} height={isDesktop ? 200 : 150}>
      {chartData && (
        <LineChart
          curve="monotoneX"
-          colors={["#8482FD", "#00CA33"]}
+          colors={[color]}
          data={chartData}
          animate
          enableSlices="x"
          margin={{
            bottom: 24,
-            left: 16,
+            left: 26,
            right: 16,
            top: 20,
          }}
@@ -140,7 +144,8 @@ export const ExplorerLineChart = ({
          axisBottom={{
            format: "%b %d",
            legendOffset: -12,
-            tickValues: "every day",
+            tickValues:
+              chartData[0].data.length > 7 ? "every 4 days" : "every day",
          }}
        />
      )}
@@ -20,6 +20,7 @@ import { useRouter } from "next/navigation";
 import { ExplorerCard } from "./components/ExplorerCard";
 import type { GetStaticProps, InferGetStaticPropsType } from "next";
 import { ExplorerData, getCacheExplorerData } from "./api/explorer";
+import { IExplorerLineChartData } from "./components/ExplorerLineChart";

 // type ContentCardProps = {
 //   overTitle?: string;
@@ -53,28 +54,28 @@ const explorerCard = {
      { key: "24H VOL", value: "$ 1000000" },
    ],
  },
-  graph: [
-    {
-      date_utc: "2024-11-20",
-      greenLineNumericData: 10,
-      purpleLineNumericData: 5,
-    },
-    {
-      date_utc: "2024-11-21",
-      greenLineNumericData: 12,
-      purpleLineNumericData: 6,
-    },
-    {
-      date_utc: "2024-11-22",
-      greenLineNumericData: 9,
-      purpleLineNumericData: 5,
-    },
-    {
-      date_utc: "2024-11-23",
-      greenLineNumericData: 11,
-      purpleLineNumericData: 4,
-    },
-  ],
+  graph: {
+    data: [
+      {
+        date_utc: "2024-11-20",
+        numericData: 10,
+      },
+      {
+        date_utc: "2024-11-21",
+        numericData: 12,
+      },
+      {
+        date_utc: "2024-11-22",
+        numericData: 9,
+      },
+      {
+        date_utc: "2024-11-23",
+        numericData: 11,
+      },
+    ],
+    color: "#00CA33",
+    label: "Label",
+  },

  paragraph: "Additional line",
 };
@@ -82,6 +83,13 @@ export const DATA_REVALIDATE = 60;

 export default function PageOverview() {
  const [explorerData, setExplorerData] = useState<ExplorerData | null>(null);
+  const [noiseLineGraphData, setNoiseLineGraphData] = useState<{
+    color: string;
+    label: string;
+    data: IExplorerLineChartData[];
+  }>();
+
+  console.log("noiseLineGraphData :>> ", noiseLineGraphData);

  useEffect(() => {
    async function fetchData() {
@@ -118,15 +126,21 @@ export default function PageOverview() {
    }
  };

-  const packetsSentLast24H =
+  const noiseLast24H =
    explorerData?.packetsAndStakingData[
      explorerData.packetsAndStakingData.length - 1
-    ].total_packets_sent;
+    ].total_packets_sent +
+    explorerData?.packetsAndStakingData[
+      explorerData.packetsAndStakingData.length - 1
+    ].total_packets_received;

-  const packetsSentPrevious24H =
+  const noisePrevious24H =
    explorerData?.packetsAndStakingData[
      explorerData.packetsAndStakingData.length - 2
-    ].total_packets_sent;
+    ].total_packets_sent +
+    explorerData?.packetsAndStakingData[
+      explorerData.packetsAndStakingData.length - 2
+    ].total_packets_received;

  const calculatePercentageChange = (last24H: number, previous24H: number) => {
    if (previous24H === 0) {
@@ -140,14 +154,31 @@ export default function PageOverview() {
    return parseFloat(change.toFixed(2));
  };

-  const percentage = calculatePercentageChange(
-    packetsSentLast24H,
-    packetsSentPrevious24H
-  );
+  const percentage = calculatePercentageChange(noiseLast24H, noisePrevious24H);
+
+  const getPacketsData = () => {
+    const data: Array<IExplorerLineChartData> = [];
+    explorerData?.packetsAndStakingData.map((item: any) => {
+      data.push({
+        date_utc: item.date_utc,
+        numericData: item.total_packets_sent + item.total_packets_received,
+      });
+    });
+    return data;
+  };
+
+  useEffect(() => {
+    const noiseLineGraphData = {
+      color: "#8482FD",
+      label: "Total packets sent and received",
+      data: getPacketsData(),
+    };
+    setNoiseLineGraphData(noiseLineGraphData);
+  }, [explorerData]);

  const noiseCard = {
    overTitle: "Noise generated last 24h",
-    title: formatBigNum(packetsSentLast24H) || "",
+    title: formatBigNum(noiseLast24H) || "",
    upDownLine: {
      percentage: Math.abs(percentage) || 0,
      numberWentUp: percentage > 0,
@@ -156,10 +187,9 @@ export default function PageOverview() {

  const currentStake =
    Number(explorerData?.currentEpochRewardsData.interval.staking_supply) || 0;
-  console.log("currentStake :>> ", currentStake);
  const stakeCard = {
    overTitle: "Current network stake",
-    title: formatBigNum(currentStake) + " NYM" || "",
+    title: currentStake + " NYM" || "",
  };

  const {
@@ -187,7 +217,7 @@ export default function PageOverview() {
                  <ExplorerCard progressBar={progressBar} />
                </Grid>
                <Grid item xs={12} md={4}>
-                  <ExplorerCard {...noiseCard} />
+                  <ExplorerCard {...noiseCard} graph={noiseLineGraphData} />
                </Grid>
                <Grid item xs={12} md={4}>
                  <ExplorerCard {...stakeCard} />