explorer: auto chart scale, chain type fix

This commit is contained in:
Evan Gray 2022-03-09 20:16:15 -05:00 committed by Justin Schuldt
parent c6f2338488
commit fc1c8d28a3
5 changed files with 23 additions and 33 deletions

View File

@ -112,13 +112,14 @@ const ChainOverviewCard: React.FC<ChainOverviewCardProps> = ({
</div>
) : (
<div style={centerStyles}>
<div style={{ marginTop: -10 }}>
<Typography variant="body1">
amount sent
<br />
coming soon
<div>
<Typography variant="h5">
<span style={{ fontSize: "75%", verticalAlign: 'middle' }}>Coming Soon</span>
</Typography>
</div>
<div style={{ marginTop: -10 }}>
<Typography variant="caption">sent</Typography>
</div>
</div>
)}
{!!totalCount && (

View File

@ -50,7 +50,7 @@ const DailyCountBarChart = (props: DailyCountProps) => {
return (
<div style={{ height: 400, minWidth: 360, flex: "1", marginBottom: 40 }}>
<Typography variant="subtitle1">Messages/Day</Typography>
<Typography variant="subtitle1" gutterBottom>Messages/Day</Typography>
<ResponsiveBar
theme={{ textColor: "rgba(255, 255, 255, 0.85)" }}
data={data}

View File

@ -79,7 +79,7 @@ const DailyNotionalBarChart = (props: DailyCountProps) => {
return (
<div style={{ height: 400, minWidth: 360, flex: '1', marginBottom: 40 }}>
<Typography variant="h4" style={{ marginLeft: 20 }}>value received (USD)</Typography>
<Typography variant="subtitle1" gutterBottom>Value Received (USD)</Typography>
<ResponsiveBar
theme={{ textColor: "rgba(255, 255, 255, 0.85)" }}
@ -96,7 +96,7 @@ const DailyNotionalBarChart = (props: DailyCountProps) => {
left: 40,
}}
padding={0.3}
valueScale={{ type: 'linear', max }}
valueScale={{ type: 'linear' }}
indexScale={{ type: 'band', round: true }}
borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
axisTop={null}

View File

@ -1,16 +1,14 @@
import React from "react";
import { Box, Card, Typography } from "@mui/material";
import React from "react";
import { chainEnums, chainIDs } from "../../utils/consts";
import { chainColors } from "../../utils/explorer";
import DailyCountBarChart from "./DailyCountBarChart";
import DailyNotionalBarChart from "./DailyNotionalBarChart";
import {
NotionalTransferred,
NotionalTransferredTo,
Totals,
} from "./ExplorerStats";
import { chainColors } from "../../utils/explorer";
import DailyNotionalBarChart from "./DailyNotionalBarChart";
import DailyCountBarChart from "./DailyCountBarChart";
import { chainEnums } from "../../utils/consts";
interface PastWeekCardProps {
title: string;
@ -87,20 +85,20 @@ const PastWeekCard: React.FC<PastWeekCardProps> = ({
width: "100%",
}}
>
{chainEnums.slice(1).map((chain, index) => (
{Object.values(chainIDs).map((chainId) => (
<Box
key={chain}
key={chainId}
sx={{ display: "flex", alignItems: "center", mx: 1 }}
>
<div
style={{
background: chainColors[String(index + 1)],
background: chainColors[String(chainId)],
height: 12,
width: 12,
display: "inline-block",
}}
/>
<div>&nbsp;{chain}</div>
<div>&nbsp;{chainEnums[chainId]}</div>
</Box>
))}
</div>

View File

@ -1,4 +1,5 @@
import {
ChainId,
getEmitterAddressEth,
getEmitterAddressSolana,
getEmitterAddressTerra,
@ -21,19 +22,9 @@ export const chainEnums = [
];
export interface ChainIDs {
solana: 1;
ethereum: 2;
terra: 3;
bsc: 4;
polygon: 5;
avalanche: 6;
oasis: 7;
algorand: 8,
aurora: 9,
fantom: 10,
karura: 11,
acala: 12,
[index: string]: ChainId;
}
export const chainIDs: ChainIDs = {
solana: 1,
ethereum: 2,
@ -49,6 +40,7 @@ export const chainIDs: ChainIDs = {
// kurura: 11,
// acala: 12,
};
export const chainIDStrings: { [chainIDString: string]: string } = {
"1": "solana",
"2": "ethereum",
@ -125,8 +117,7 @@ const envVarMap: { [name: string]: string | undefined } = {
process.env.GATSBY_DEVNET_FANTOM_CORE_BRIDGE,
GATSBY_DEVNET_FANTOM_TOKEN_BRIDGE:
process.env.GATSBY_DEVNET_FANTOM_TOKEN_BRIDGE,
GATSBY_DEVNET_FANTOM_NFT_BRIDGE:
process.env.GATSBY_DEVNET_FANTOM_NFT_BRIDGE,
GATSBY_DEVNET_FANTOM_NFT_BRIDGE: process.env.GATSBY_DEVNET_FANTOM_NFT_BRIDGE,
GATSBY_TESTNET_SOLANA_CORE_BRIDGE:
process.env.GATSBY_TESTNET_SOLANA_CORE_BRIDGE,