import _ from 'lodash' import { useRef, useState, useEffect } from 'react' import { SynapseLogoSvg } from '@components/layouts/MainLayout/SynapseLogoSvg' import { formatUSD } from '@utils/formatUSD' import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts' import { CurrencyTooltip } from '@components/misc/ToolTip' export const addOrSetObject = (obj: any, key: string, value: any) => { obj[key] ? (obj[key] += value) : (obj[key] = value) } interface OverviewChartProps { chartData: any[] isUSD: boolean loading?: boolean showAggregated: boolean height?: number dailyStatisticType: any platform: any singleChain?: boolean noTooltipLink?: boolean } export const OverviewChart: React.FC = ({ chartData, isUSD, loading = false, showAggregated, height = 480, dailyStatisticType, platform, singleChain = false, noTooltipLink = false, }) => { if (loading) { return (

) } const initialData = (getNames: boolean, payload) => { if (chartData.length === 0) { return [] } const items = Object.keys(payload).map((key) => { if (payload[key] > 0 && key !== 'total') { return [key, payload[key]] } else { return [key, 0] } }) if (items.length === 0) { return [] } // Sort the array based on the second element items.sort((first, second) => { return second[1] - first[1] }) if (getNames) { const names = items.map((item) => item[0]) return names } const values = items.map((item) => item[1]) return values } const toolTipNamesRef = useRef() const toolTipValuesRef = useRef() const toolTipLabelRef = useRef() const [rerenderToken, setRerenderToken] = useState(0) useEffect(() => { const payload = chartData[chartData.length - 1] toolTipNamesRef.current = initialData(true, payload) toolTipValuesRef.current = initialData(false, payload) toolTipLabelRef.current = chartData[chartData.length - 1]?.date setRerenderToken(rerenderToken + 1) }, [chartData]) const getToolTip = ({ active, payload, label, isUSD: isUSDTooltip, }: { active: boolean payload: any[] label: string isUSD: boolean }) => { payload.sort((a, b) => b.value - a.value) const names = _.map(payload, 'name') const values = _.map(payload, 'value') if (active) { if (toolTipNamesRef.current !== names && names.length > 0) { toolTipNamesRef.current = names } if (toolTipValuesRef.current !== values && values.length > 0) { toolTipValuesRef.current = values } if (toolTipLabelRef.current !== label && label != null) { toolTipLabelRef.current = label } return ( ) } return ( ) } return ( <>