stacker.news/pages/satistics/graphs/[when].js

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>
)
}