Try out to revert depth chart

This commit is contained in:
Reckless_Satoshi 2022-10-19 02:11:03 -07:00
parent ef73c980a8
commit 78a8ab799d
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 14 additions and 10 deletions

View File

@ -193,7 +193,7 @@ const BookPage = ({
orders={book.orders} orders={book.orders}
lastDayPremium={lastDayPremium} lastDayPremium={lastDayPremium}
currency={fav.currency} currency={fav.currency}
limitList={limits.list} limits={limits.list}
maxWidth={chartWidthEm} // EM units maxWidth={chartWidthEm} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units maxHeight={windowSize.height * 0.825 - 5} // EM units
/> />
@ -204,7 +204,7 @@ const BookPage = ({
orders={book.orders} orders={book.orders}
lastDayPremium={lastDayPremium} lastDayPremium={lastDayPremium}
currency={fav.currency} currency={fav.currency}
limitList={limits.list} limits={limits.list}
maxWidth={windowSize.width * 0.8} // EM units maxWidth={windowSize.width * 0.8} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units maxHeight={windowSize.height * 0.825 - 5} // EM units
/> />

View File

@ -34,7 +34,7 @@ interface DepthChartProps {
orders: Order[]; orders: Order[];
lastDayPremium: number | undefined; lastDayPremium: number | undefined;
currency: number; currency: number;
limitList: LimitList; limits: LimitList;
maxWidth: number; maxWidth: number;
maxHeight: number; maxHeight: number;
} }
@ -43,7 +43,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
orders, orders,
lastDayPremium, lastDayPremium,
currency, currency,
limitList, limits,
maxWidth, maxWidth,
maxHeight, maxHeight,
}) => { }) => {
@ -55,25 +55,29 @@ const DepthChart: React.FC<DepthChartProps> = ({
const [rangeSteps, setRangeSteps] = useState<number>(8); const [rangeSteps, setRangeSteps] = useState<number>(8);
const [xRange, setXRange] = useState<number>(8); const [xRange, setXRange] = useState<number>(8);
const [xType, setXType] = useState<string>('premium'); const [xType, setXType] = useState<string>('premium');
const [currencyCode, setCurrencyCode] = useState<number>(1);
const [center, setCenter] = useState<number>(); const [center, setCenter] = useState<number>();
const height = maxHeight < 20 ? 20 : maxHeight; const height = maxHeight < 20 ? 20 : maxHeight;
const width = maxWidth < 20 ? 20 : maxWidth > 72.8 ? 72.8 : maxWidth; const width = maxWidth < 20 ? 20 : maxWidth > 72.8 ? 72.8 : maxWidth;
useEffect(() => { useEffect(() => {
if (Object.keys(limitList).length > 0) { setCurrencyCode(currency === 0 ? 1 : currency);
}, [currency]);
useEffect(() => {
if (Object.keys(limits).length > 0) {
const enriched = orders.map((order) => { const enriched = orders.map((order) => {
// We need to transform all currencies to the same base (ex. USD), we don't have the exchange rate // We need to transform all currencies to the same base (ex. USD), we don't have the exchange rate
// for EUR -> USD, but we know the rate of both to BTC, so we get advantage of it and apply a // for EUR -> USD, but we know the rate of both to BTC, so we get advantage of it and apply a
// simple rule of three // simple rule of three
order.base_amount = order.base_amount =
(order.price * limitList[currency === 0 ? 1 : currency].price) / (order.price * limits[currencyCode].price) / limits[order.currency].price;
limitList[order.currency].price;
return order; return order;
}); });
setEnrichedOrders(enriched); setEnrichedOrders(enriched);
} }
}, [limitList, orders, currency]); }, [limits, orders, currencyCode]);
useEffect(() => { useEffect(() => {
if (enrichedOrders.length > 0) { if (enrichedOrders.length > 0) {
@ -98,7 +102,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
setXRange(8); setXRange(8);
setRangeSteps(0.5); setRangeSteps(0.5);
} }
}, [enrichedOrders, xType, lastDayPremium, currency]); }, [enrichedOrders, xType, lastDayPremium, currencyCode]);
const generateSeries: () => void = () => { const generateSeries: () => void = () => {
const sortedOrders: Order[] = const sortedOrders: Order[] =
@ -323,7 +327,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
<Grid item> <Grid item>
<Box justifyContent='center'> <Box justifyContent='center'>
{xType === 'base_amount' {xType === 'base_amount'
? `${center} ${currencyDict[currency === 0 ? 1 : currency]}` ? `${center} ${currencyDict[currencyCode]}`
: `${center}%`} : `${center}%`}
</Box> </Box>
</Grid> </Grid>