bridge_ui: daily outbound volume stats, fix chart height (#1128)

bridge_ui/src/components/Stats/Charts/TVLAreaChart.tsx

@@ -28,7 +28,7 @@ const TVLAreaChart = ({
   const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
 
   return (
-    <ResponsiveContainer height={768}>
+    <ResponsiveContainer height={452}>
       <AreaChart data={data}>
         <XAxis
           dataKey="date"

bridge_ui/src/components/Stats/Charts/TVLLineChart.tsx

@@ -37,7 +37,7 @@ const TVLLineChart = ({
   const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
 
   return (
-    <ResponsiveContainer height={768}>
+    <ResponsiveContainer height={452}>
       <LineChart data={data}>
         <XAxis
           dataKey="date"

bridge_ui/src/components/Stats/Charts/TransactionsAreaChart.tsx

@@ -27,7 +27,7 @@ const TransactionsAreaChart = ({
   const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
 
   return (
-    <ResponsiveContainer height={768}>
+    <ResponsiveContainer height={452}>
       <AreaChart data={transactionData}>
         <XAxis
           dataKey="date"

bridge_ui/src/components/Stats/Charts/TransactionsLineChart.tsx

@@ -36,7 +36,7 @@ const TransactionsLineChart = ({
   const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
 
   return (
-    <ResponsiveContainer height={768}>
+    <ResponsiveContainer height={452}>
       <LineChart data={transactionData}>
         <XAxis
           dataKey="date"

bridge_ui/src/components/Stats/Charts/VolumeAreaChart.tsx

@@ -22,7 +22,7 @@ const VolumeAreaChart = ({
   const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
 
   return (
-    <ResponsiveContainer height={768}>
+    <ResponsiveContainer height={452}>
       <AreaChart data={transferData}>
         <XAxis
           dataKey="date"

bridge_ui/src/components/Stats/Charts/VolumeLineChart.tsx

@@ -27,7 +27,7 @@ const VolumeLineChart = ({
   const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
 
   return (
-    <ResponsiveContainer height={768}>
+    <ResponsiveContainer height={452}>
       <LineChart data={transferData}>
         <XAxis
           dataKey="date"

bridge_ui/src/components/Stats/Charts/VolumeStackedBarChart.tsx

@@ -22,7 +22,12 @@ import {
   getChainShortName,
 } from "../../../utils/consts";
 import { TimeFrame } from "./TimeFrame";
-import { formatDate, TransferChartData, formatTVL, renderLegendText } from "./utils";
+import {
+  formatDate,
+  TransferChartData,
+  formatTVL,
+  renderLegendText,
+} from "./utils";
 
 const useStyles = makeStyles(() => ({
   tooltipContainer: {
@@ -149,7 +154,7 @@ const VolumeStackedBarChart = ({
   const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
 
   return (
-    <ResponsiveContainer height={768}>
+    <ResponsiveContainer height={452}>
       <BarChart data={barData}>
         <XAxis
           dataKey="date"

bridge_ui/src/components/Stats/Charts/utils.tsx

@@ -111,7 +111,7 @@ export interface TransferChartData {
   };
 }
 
-export const createCumulativeTransferChartData = (
+export const createTransferChartData = (
   notionalTransferredFrom: NotionalTransferredFrom,
   timeFrame: TimeFrame
 ) => {
@@ -127,12 +127,9 @@ export const createCumulativeTransferChartData = (
       };
       Object.entries(transferFromData).forEach(([chainId, amount]) => {
         if (chainId === "*") {
-          data.totalTransferred =
-            (chartData[chartData.length - 1]?.totalTransferred || 0) + amount;
+          data.totalTransferred = amount;
         } else {
-          data.transferredByChain[chainId] =
-            (chartData[chartData.length - 1]?.transferredByChain[chainId] ||
-              0) + amount;
+          data.transferredByChain[chainId] = amount;
         }
       });
       chartData.push(data);
@@ -149,19 +146,15 @@ export interface TransactionData {
   };
 }
 
-export const createCumulativeTransactionData = (
-  totals: Totals,
-  timeFrame: TimeFrame
-) => {
+export const createTransactionData = (totals: Totals, timeFrame: TimeFrame) => {
   const startDate = getStartDate(timeFrame);
   return Object.keys(totals.DailyTotals)
     .sort()
     .reduce<TransactionData[]>((chartData, dateString) => {
       const groupByKeys = totals.DailyTotals[dateString];
-      const prevData = chartData[chartData.length - 1];
       const data: TransactionData = {
         date: new Date(dateString),
-        totalTransactions: prevData?.totalTransactions || 0,
+        totalTransactions: 0,
         transactionsByChain: {},
       };
       VAA_EMITTER_ADDRESSES.forEach((address) => {
@@ -169,8 +162,7 @@ export const createCumulativeTransactionData = (
         data.totalTransactions += count;
         const chainId = address.slice(0, address.indexOf(":"));
         if (data.transactionsByChain[chainId] === undefined) {
-          data.transactionsByChain[chainId] =
-            prevData?.transactionsByChain[chainId] || 0;
+          data.transactionsByChain[chainId] = 0;
         }
         data.transactionsByChain[chainId] += count;
       });

bridge_ui/src/components/Stats/VolumeStats.tsx

@@ -21,8 +21,8 @@ import { COLORS } from "../../muiTheme";
 import { CHAINS_BY_ID } from "../../utils/consts";
 import { TIME_FRAMES } from "./Charts/TimeFrame";
 import {
-  createCumulativeTransferChartData,
-  createCumulativeTransactionData,
+  createTransferChartData,
+  createTransactionData,
   formatTransactionCount,
 } from "./Charts/utils";
 import VolumeAreaChart from "./Charts/VolumeAreaChart";
@@ -98,44 +98,38 @@ const VolumeStats = () => {
 
   const notionalTransferred = useNotionalTransferred();
 
-  const transferData = useMemo(() => {
-    return notionalTransferred.data
-      ? createCumulativeTransferChartData(
+  const [transferData, transferredAllTime] = useMemo(() => {
+    const transferData = notionalTransferred.data
+      ? createTransferChartData(
           notionalTransferred.data,
           TIME_FRAMES[timeFrame]
         )
       : [];
+    const transferredAllTime = transferData.reduce((sum, value) => {
+      return sum + value.totalTransferred;
+    }, 0);
+    const transferredAllTimeString = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }).format(transferredAllTime);
+    return [transferData, transferredAllTimeString];
   }, [notionalTransferred, timeFrame]);
 
-  const transferredAllTime = useMemo(() => {
-    return notionalTransferred.data
-      ? new Intl.NumberFormat("en-US", {
-          style: "currency",
-          currency: "USD",
-          maximumFractionDigits: 0,
-        }).format(notionalTransferred.data.Total || 0)
-      : "";
-  }, [notionalTransferred]);
-
   const transactionTotals = useTransactionTotals();
 
-  const transactionData = useMemo(() => {
-    return transactionTotals.data
-      ? createCumulativeTransactionData(
-          transactionTotals.data,
-          TIME_FRAMES[timeFrame]
-        )
+  const [transactionData, transactionsAllTime] = useMemo(() => {
+    const transactionData = transactionTotals.data
+      ? createTransactionData(transactionTotals.data, TIME_FRAMES[timeFrame])
       : [];
+    const transactionsAllTime = formatTransactionCount(
+      transactionData.reduce((sum, value) => {
+        return sum + value.totalTransactions;
+      }, 0)
+    );
+    return [transactionData, transactionsAllTime];
   }, [transactionTotals, timeFrame]);
 
-  const transactionsAllTime = useMemo(() => {
-    const totalTransactions =
-      transactionData[transactionData.length - 1]?.totalTransactions;
-    return totalTransactions !== undefined
-      ? formatTransactionCount(totalTransactions)
-      : "";
-  }, [transactionData]);
-
   const availableChains = useMemo(() => {
     const chainIds = notionalTransferred.data
       ? Object.keys(