import { useQuery } from '@apollo/client' import { getGetServerSideProps } from '@/api/ssrApollo' import Layout from '@/components/layout' import { USER_STATS } from '@/fragments/users' import { useRouter } from 'next/router' import PageLoading from '@/components/page-loading' import dynamic from 'next/dynamic' import { numWithUnits } from '@/lib/format' import { UsageHeader } from '@/components/usage-header' import { SatisticsHeader } from '..' import { WhenComposedChartSkeleton, WhenAreaChartSkeleton } from '@/components/charts-skeletons' import OverlayTrigger from 'react-bootstrap/OverlayTrigger' import Tooltip from 'react-bootstrap/Tooltip' export const getServerSideProps = getGetServerSideProps({ query: USER_STATS, authRequired: true }) const WhenAreaChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenAreaChart), { loading: () => }) const WhenComposedChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenComposedChart), { loading: () => }) const SatisticsTooltip = ({ children, overlayText }) => { return ( {overlayText} } > {children} ) } export default function Satistics ({ ssrData }) { const router = useRouter() const { when, from, to } = router.query const { data } = useQuery(USER_STATS, { variables: { when, from, to } }) if (!data && !ssrData) return const { userStatsActions, userStatsIncomingSats, userStatsOutgoingSats } = data || ssrData const totalStacked = userStatsIncomingSats.reduce((total, a) => total + a.data?.reduce((acc, d) => acc + d.value, 0), 0) const totalSpent = userStatsOutgoingSats.reduce((total, a) => total + a.data?.reduce((acc, d) => acc + d.value, 0), 0) const totalEngagement = userStatsActions.reduce((total, a) => total + a.data?.reduce((acc, d) => acc + d.value, 0), 0) return (

stacked

{numWithUnits(totalStacked, { abbreviate: true, format: true })}

spent

{numWithUnits(totalSpent, { abbreviate: true, format: true })}

actions

{new Intl.NumberFormat().format(totalEngagement)}

{userStatsIncomingSats.length > 0 &&
stacking
} {userStatsOutgoingSats.length > 0 &&
spending
}
{userStatsActions.length > 0 &&
items
}
) }