112 lines
4.7 KiB
JavaScript
112 lines
4.7 KiB
JavaScript
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: () => <WhenAreaChartSkeleton />
|
|
})
|
|
const WhenComposedChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenComposedChart), {
|
|
loading: () => <WhenComposedChartSkeleton />
|
|
})
|
|
|
|
const SatisticsTooltip = ({ children, overlayText }) => {
|
|
return (
|
|
<OverlayTrigger
|
|
placement='bottom'
|
|
overlay={
|
|
<Tooltip>
|
|
{overlayText}
|
|
</Tooltip>
|
|
}
|
|
>
|
|
<span>
|
|
{children}
|
|
</span>
|
|
</OverlayTrigger>
|
|
)
|
|
}
|
|
|
|
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 <PageLoading />
|
|
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)
|
|
|
|
return (
|
|
<Layout>
|
|
<div className='mt-2'>
|
|
<SatisticsHeader />
|
|
<div className='tab-content' id='myTabContent'>
|
|
<div className='tab-pane fade show active text-muted' id='statistics' role='tabpanel' aria-labelledby='statistics-tab'>
|
|
<UsageHeader pathname='satistics/graphs' />
|
|
<div className='mt-3'>
|
|
<div className='d-flex row justify-content-between'>
|
|
<div className='col-md-6 mb-2'>
|
|
<h4 className='w-100 text-center'>stacked</h4>
|
|
<div className='card'>
|
|
<div className='card-body'>
|
|
<SatisticsTooltip overlayText={numWithUnits(totalStacked, { abbreviate: false, format: true })}>
|
|
<h2 className='text-center text-nowrap mb-0 text-muted'>
|
|
{numWithUnits(totalStacked, { abbreviate: true, format: true })}
|
|
</h2>
|
|
</SatisticsTooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='col-md-6 mb-2'>
|
|
<h4 className='w-100 text-center'>spent</h4>
|
|
<div className='card'>
|
|
<div className='card-body'>
|
|
<SatisticsTooltip overlayText={numWithUnits(totalSpent, { abbreviate: false, format: true })}>
|
|
<h2 className='text-center text-nowrap mb-0 text-muted'>
|
|
{numWithUnits(totalSpent, { abbreviate: true, format: true })}
|
|
</h2>
|
|
</SatisticsTooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='row mt-5'>
|
|
{userStatsIncomingSats.length > 0 &&
|
|
<div className='col-md-6'>
|
|
<div className='text-center text-muted fw-bold'>stacking</div>
|
|
<WhenAreaChart data={userStatsIncomingSats} />
|
|
</div>}
|
|
{userStatsOutgoingSats.length > 0 &&
|
|
<div className='col-md-6'>
|
|
<div className='text-center text-muted fw-bold'>spending</div>
|
|
<WhenAreaChart data={userStatsOutgoingSats} />
|
|
</div>}
|
|
</div>
|
|
<div className='row mt-5'>
|
|
{userStatsActions.length > 0 &&
|
|
<div className='col-md-12'>
|
|
<div className='text-center text-muted fw-bold'>items</div>
|
|
<WhenComposedChart data={userStatsActions} areaNames={['posts', 'comments']} areaAxis='left' lineNames={['territories', 'referrals', 'one day referrals']} lineAxis='right' />
|
|
</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
)
|
|
}
|