bridge_ui: daily outbound volume stats, fix chart height (#1128)
This commit is contained in:
parent
49f4a98cb2
commit
776813fb26
|
@ -28,7 +28,7 @@ const TVLAreaChart = ({
|
||||||
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResponsiveContainer height={768}>
|
<ResponsiveContainer height={452}>
|
||||||
<AreaChart data={data}>
|
<AreaChart data={data}>
|
||||||
<XAxis
|
<XAxis
|
||||||
dataKey="date"
|
dataKey="date"
|
||||||
|
|
|
@ -37,7 +37,7 @@ const TVLLineChart = ({
|
||||||
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResponsiveContainer height={768}>
|
<ResponsiveContainer height={452}>
|
||||||
<LineChart data={data}>
|
<LineChart data={data}>
|
||||||
<XAxis
|
<XAxis
|
||||||
dataKey="date"
|
dataKey="date"
|
||||||
|
|
|
@ -27,7 +27,7 @@ const TransactionsAreaChart = ({
|
||||||
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResponsiveContainer height={768}>
|
<ResponsiveContainer height={452}>
|
||||||
<AreaChart data={transactionData}>
|
<AreaChart data={transactionData}>
|
||||||
<XAxis
|
<XAxis
|
||||||
dataKey="date"
|
dataKey="date"
|
||||||
|
|
|
@ -36,7 +36,7 @@ const TransactionsLineChart = ({
|
||||||
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResponsiveContainer height={768}>
|
<ResponsiveContainer height={452}>
|
||||||
<LineChart data={transactionData}>
|
<LineChart data={transactionData}>
|
||||||
<XAxis
|
<XAxis
|
||||||
dataKey="date"
|
dataKey="date"
|
||||||
|
|
|
@ -22,7 +22,7 @@ const VolumeAreaChart = ({
|
||||||
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResponsiveContainer height={768}>
|
<ResponsiveContainer height={452}>
|
||||||
<AreaChart data={transferData}>
|
<AreaChart data={transferData}>
|
||||||
<XAxis
|
<XAxis
|
||||||
dataKey="date"
|
dataKey="date"
|
||||||
|
|
|
@ -27,7 +27,7 @@ const VolumeLineChart = ({
|
||||||
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResponsiveContainer height={768}>
|
<ResponsiveContainer height={452}>
|
||||||
<LineChart data={transferData}>
|
<LineChart data={transferData}>
|
||||||
<XAxis
|
<XAxis
|
||||||
dataKey="date"
|
dataKey="date"
|
||||||
|
|
|
@ -22,7 +22,12 @@ import {
|
||||||
getChainShortName,
|
getChainShortName,
|
||||||
} from "../../../utils/consts";
|
} from "../../../utils/consts";
|
||||||
import { TimeFrame } from "./TimeFrame";
|
import { TimeFrame } from "./TimeFrame";
|
||||||
import { formatDate, TransferChartData, formatTVL, renderLegendText } from "./utils";
|
import {
|
||||||
|
formatDate,
|
||||||
|
TransferChartData,
|
||||||
|
formatTVL,
|
||||||
|
renderLegendText,
|
||||||
|
} from "./utils";
|
||||||
|
|
||||||
const useStyles = makeStyles(() => ({
|
const useStyles = makeStyles(() => ({
|
||||||
tooltipContainer: {
|
tooltipContainer: {
|
||||||
|
@ -149,7 +154,7 @@ const VolumeStackedBarChart = ({
|
||||||
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResponsiveContainer height={768}>
|
<ResponsiveContainer height={452}>
|
||||||
<BarChart data={barData}>
|
<BarChart data={barData}>
|
||||||
<XAxis
|
<XAxis
|
||||||
dataKey="date"
|
dataKey="date"
|
||||||
|
|
|
@ -111,7 +111,7 @@ export interface TransferChartData {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const createCumulativeTransferChartData = (
|
export const createTransferChartData = (
|
||||||
notionalTransferredFrom: NotionalTransferredFrom,
|
notionalTransferredFrom: NotionalTransferredFrom,
|
||||||
timeFrame: TimeFrame
|
timeFrame: TimeFrame
|
||||||
) => {
|
) => {
|
||||||
|
@ -127,12 +127,9 @@ export const createCumulativeTransferChartData = (
|
||||||
};
|
};
|
||||||
Object.entries(transferFromData).forEach(([chainId, amount]) => {
|
Object.entries(transferFromData).forEach(([chainId, amount]) => {
|
||||||
if (chainId === "*") {
|
if (chainId === "*") {
|
||||||
data.totalTransferred =
|
data.totalTransferred = amount;
|
||||||
(chartData[chartData.length - 1]?.totalTransferred || 0) + amount;
|
|
||||||
} else {
|
} else {
|
||||||
data.transferredByChain[chainId] =
|
data.transferredByChain[chainId] = amount;
|
||||||
(chartData[chartData.length - 1]?.transferredByChain[chainId] ||
|
|
||||||
0) + amount;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
chartData.push(data);
|
chartData.push(data);
|
||||||
|
@ -149,19 +146,15 @@ export interface TransactionData {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const createCumulativeTransactionData = (
|
export const createTransactionData = (totals: Totals, timeFrame: TimeFrame) => {
|
||||||
totals: Totals,
|
|
||||||
timeFrame: TimeFrame
|
|
||||||
) => {
|
|
||||||
const startDate = getStartDate(timeFrame);
|
const startDate = getStartDate(timeFrame);
|
||||||
return Object.keys(totals.DailyTotals)
|
return Object.keys(totals.DailyTotals)
|
||||||
.sort()
|
.sort()
|
||||||
.reduce<TransactionData[]>((chartData, dateString) => {
|
.reduce<TransactionData[]>((chartData, dateString) => {
|
||||||
const groupByKeys = totals.DailyTotals[dateString];
|
const groupByKeys = totals.DailyTotals[dateString];
|
||||||
const prevData = chartData[chartData.length - 1];
|
|
||||||
const data: TransactionData = {
|
const data: TransactionData = {
|
||||||
date: new Date(dateString),
|
date: new Date(dateString),
|
||||||
totalTransactions: prevData?.totalTransactions || 0,
|
totalTransactions: 0,
|
||||||
transactionsByChain: {},
|
transactionsByChain: {},
|
||||||
};
|
};
|
||||||
VAA_EMITTER_ADDRESSES.forEach((address) => {
|
VAA_EMITTER_ADDRESSES.forEach((address) => {
|
||||||
|
@ -169,8 +162,7 @@ export const createCumulativeTransactionData = (
|
||||||
data.totalTransactions += count;
|
data.totalTransactions += count;
|
||||||
const chainId = address.slice(0, address.indexOf(":"));
|
const chainId = address.slice(0, address.indexOf(":"));
|
||||||
if (data.transactionsByChain[chainId] === undefined) {
|
if (data.transactionsByChain[chainId] === undefined) {
|
||||||
data.transactionsByChain[chainId] =
|
data.transactionsByChain[chainId] = 0;
|
||||||
prevData?.transactionsByChain[chainId] || 0;
|
|
||||||
}
|
}
|
||||||
data.transactionsByChain[chainId] += count;
|
data.transactionsByChain[chainId] += count;
|
||||||
});
|
});
|
||||||
|
|
|
@ -21,8 +21,8 @@ import { COLORS } from "../../muiTheme";
|
||||||
import { CHAINS_BY_ID } from "../../utils/consts";
|
import { CHAINS_BY_ID } from "../../utils/consts";
|
||||||
import { TIME_FRAMES } from "./Charts/TimeFrame";
|
import { TIME_FRAMES } from "./Charts/TimeFrame";
|
||||||
import {
|
import {
|
||||||
createCumulativeTransferChartData,
|
createTransferChartData,
|
||||||
createCumulativeTransactionData,
|
createTransactionData,
|
||||||
formatTransactionCount,
|
formatTransactionCount,
|
||||||
} from "./Charts/utils";
|
} from "./Charts/utils";
|
||||||
import VolumeAreaChart from "./Charts/VolumeAreaChart";
|
import VolumeAreaChart from "./Charts/VolumeAreaChart";
|
||||||
|
@ -98,44 +98,38 @@ const VolumeStats = () => {
|
||||||
|
|
||||||
const notionalTransferred = useNotionalTransferred();
|
const notionalTransferred = useNotionalTransferred();
|
||||||
|
|
||||||
const transferData = useMemo(() => {
|
const [transferData, transferredAllTime] = useMemo(() => {
|
||||||
return notionalTransferred.data
|
const transferData = notionalTransferred.data
|
||||||
? createCumulativeTransferChartData(
|
? createTransferChartData(
|
||||||
notionalTransferred.data,
|
notionalTransferred.data,
|
||||||
TIME_FRAMES[timeFrame]
|
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]);
|
}, [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 transactionTotals = useTransactionTotals();
|
||||||
|
|
||||||
const transactionData = useMemo(() => {
|
const [transactionData, transactionsAllTime] = useMemo(() => {
|
||||||
return transactionTotals.data
|
const transactionData = transactionTotals.data
|
||||||
? createCumulativeTransactionData(
|
? createTransactionData(transactionTotals.data, TIME_FRAMES[timeFrame])
|
||||||
transactionTotals.data,
|
|
||||||
TIME_FRAMES[timeFrame]
|
|
||||||
)
|
|
||||||
: [];
|
: [];
|
||||||
|
const transactionsAllTime = formatTransactionCount(
|
||||||
|
transactionData.reduce((sum, value) => {
|
||||||
|
return sum + value.totalTransactions;
|
||||||
|
}, 0)
|
||||||
|
);
|
||||||
|
return [transactionData, transactionsAllTime];
|
||||||
}, [transactionTotals, timeFrame]);
|
}, [transactionTotals, timeFrame]);
|
||||||
|
|
||||||
const transactionsAllTime = useMemo(() => {
|
|
||||||
const totalTransactions =
|
|
||||||
transactionData[transactionData.length - 1]?.totalTransactions;
|
|
||||||
return totalTransactions !== undefined
|
|
||||||
? formatTransactionCount(totalTransactions)
|
|
||||||
: "";
|
|
||||||
}, [transactionData]);
|
|
||||||
|
|
||||||
const availableChains = useMemo(() => {
|
const availableChains = useMemo(() => {
|
||||||
const chainIds = notionalTransferred.data
|
const chainIds = notionalTransferred.data
|
||||||
? Object.keys(
|
? Object.keys(
|
||||||
|
|
Loading…
Reference in New Issue