Skip to content

Commit

Permalink
Merge pull request #831 from invariant-labs/fix-stats-chart-issues
Browse files Browse the repository at this point in the history
Fix chart issues
  • Loading branch information
wojciech-cichocki authored Dec 29, 2024
2 parents c064f17 + 2b92152 commit 3ac7693
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 28 deletions.
27 changes: 14 additions & 13 deletions src/components/Stats/Liquidity/Liquidity.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import { colors, typography } from '@static/theme'
import { useStyles } from './style'
import { TimeData } from '@store/reducers/stats'
import { Grid, Typography } from '@mui/material'
import { formatNumber } from '@utils/utils'
import { formatNumber, trimZeros } from '@utils/utils'
import { formatLargeNumber } from '@utils/formatLargeNumber'

interface LiquidityInterface {
liquidityPercent: number | null
Expand All @@ -16,17 +17,17 @@ interface LiquidityInterface {
isLoading: boolean
}

const GRAPH_ENTRIES = 30
// const GRAPH_ENTRIES = 30

const generateMockData = () => {
return Array.from({ length: GRAPH_ENTRIES }, (_, index) => ({
timestamp:
Math.floor(Date.now() / (1000 * 60 * 60 * 24)) * (1000 * 60 * 60 * 24) +
1000 * 60 * 60 * 12 -
(GRAPH_ENTRIES - index) * (1000 * 60 * 60 * 24),
value: Math.random() * 10000
}))
}
// const generateMockData = () => {
// return Array.from({ length: GRAPH_ENTRIES }, (_, index) => ({
// timestamp:
// Math.floor(Date.now() / (1000 * 60 * 60 * 24)) * (1000 * 60 * 60 * 24) +
// 1000 * 60 * 60 * 12 -
// (GRAPH_ENTRIES - index) * (1000 * 60 * 60 * 24),
// value: Math.random() * 10000
// }))
// }

const Liquidity: React.FC<LiquidityInterface> = ({
liquidityPercent,
Expand Down Expand Up @@ -75,7 +76,7 @@ const Liquidity: React.FC<LiquidityInterface> = ({
data={[
{
id: 'liquidity',
data: (isLoading ? generateMockData() : data).map(({ timestamp, value }) => ({
data: data.map(({ timestamp, value }) => ({
x: new Date(timestamp).toLocaleDateString('en-GB'),
y: value
}))
Expand Down Expand Up @@ -108,7 +109,7 @@ const Liquidity: React.FC<LiquidityInterface> = ({
style={{ fill: colors.invariant.textGrey, ...typography.tiny2 }}
textAnchor='start'
dominantBaseline='center'>
{formatNumber(value, true)}
{trimZeros(formatLargeNumber(value))}
</text>
</g>
)
Expand Down
29 changes: 14 additions & 15 deletions src/components/Stats/Volume/Volume.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import { useStyles } from './style'
import { TimeData } from '@store/reducers/stats'
import { Grid, Typography, useMediaQuery } from '@mui/material'
import { Box } from '@mui/system'
import { formatNumber } from '@utils/utils'
import { formatNumber, trimZeros } from '@utils/utils'
import { formatLargeNumber } from '@utils/formatLargeNumber'

interface StatsInterface {
percentVolume: number | null
Expand All @@ -17,17 +18,17 @@ interface StatsInterface {
isLoading: boolean
}

const GRAPH_ENTRIES = 30
// const GRAPH_ENTRIES = 30

const generateMockData = () => {
return Array.from({ length: GRAPH_ENTRIES }, (_, index) => ({
timestamp:
Math.floor(Date.now() / (1000 * 60 * 60 * 24)) * (1000 * 60 * 60 * 24) +
1000 * 60 * 60 * 12 -
(GRAPH_ENTRIES - index) * (1000 * 60 * 60 * 24),
value: Math.random() * 10000
}))
}
// const generateMockData = () => {
// return Array.from({ length: GRAPH_ENTRIES }, (_, index) => ({
// timestamp:
// Math.floor(Date.now() / (1000 * 60 * 60 * 24)) * (1000 * 60 * 60 * 24) +
// 1000 * 60 * 60 * 12 -
// (GRAPH_ENTRIES - index) * (1000 * 60 * 60 * 24),
// value: Math.random() * 10000
// }))
// }

const Volume: React.FC<StatsInterface> = ({
percentVolume,
Expand Down Expand Up @@ -88,9 +89,7 @@ const Volume: React.FC<StatsInterface> = ({
<div className={classes.barContainer}>
<ResponsiveBar
margin={{ top: 30, bottom: 30, left: 30 }}
data={
isLoading ? generateMockData() : (data as Array<{ timestamp: number; value: number }>)
}
data={data as Array<{ timestamp: number; value: number }>}
keys={['value']}
indexBy='timestamp'
axisBottom={{
Expand Down Expand Up @@ -123,7 +122,7 @@ const Volume: React.FC<StatsInterface> = ({
style={{ fill: colors.invariant.textGrey, ...typography.tiny2 }}
textAnchor='start'
dominantBaseline='center'>
{formatNumber(value, true)}
{trimZeros(formatLargeNumber(value))}
</text>
</g>
)
Expand Down
14 changes: 14 additions & 0 deletions src/utils/formatLargeNumber.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { trimZeros } from './utils'

export const formatLargeNumber = (number: number) => {
const suffixes = ['', 'K', 'M', 'B', 'T', 'Q']

if (number < 1000) {
return number.toFixed(1)
}

const suffixIndex = Math.floor(Math.log10(number) / 3)
const scaledNumber = number / Math.pow(1000, suffixIndex)

return `${trimZeros(scaledNumber.toFixed(1))}${suffixes[suffixIndex]}`
}
7 changes: 7 additions & 0 deletions src/utils/trimZeros.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const trimZeros = (amount: string) => {
try {
return parseFloat(amount).toString()
} catch (error) {
return amount
}
}

0 comments on commit 3ac7693

Please sign in to comment.