116 lines
3.5 KiB
JavaScript
116 lines
3.5 KiB
JavaScript
import { gql, useQuery } from '@apollo/client'
|
|
import { getGetServerSideProps } from '@/api/ssrApollo'
|
|
import Layout from '@/components/layout'
|
|
import Col from 'react-bootstrap/Col'
|
|
import Row from 'react-bootstrap/Row'
|
|
import { UsageHeader } from '@/components/usage-header'
|
|
import { useRouter } from 'next/router'
|
|
import dynamic from 'next/dynamic'
|
|
import PageLoading from '@/components/page-loading'
|
|
import { WhenAreaChartSkeleton, WhenComposedChartSkeleton, WhenLineChartSkeleton } from '@/components/charts-skeletons'
|
|
|
|
const WhenAreaChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenAreaChart), {
|
|
loading: () => <WhenAreaChartSkeleton />
|
|
})
|
|
const WhenLineChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenLineChart), {
|
|
loading: () => <WhenLineChartSkeleton />
|
|
})
|
|
const WhenComposedChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenComposedChart), {
|
|
loading: () => <WhenComposedChartSkeleton />
|
|
})
|
|
|
|
const GROWTH_QUERY = gql`
|
|
query Growth($when: String!, $from: String, $to: String)
|
|
{
|
|
registrationGrowth(when: $when, from: $from, to: $to) {
|
|
time
|
|
data {
|
|
name
|
|
value
|
|
}
|
|
}
|
|
itemGrowth(when: $when, from: $from, to: $to) {
|
|
time
|
|
data {
|
|
name
|
|
value
|
|
}
|
|
}
|
|
spendingGrowth(when: $when, from: $from, to: $to) {
|
|
time
|
|
data {
|
|
name
|
|
value
|
|
}
|
|
}
|
|
spenderGrowth(when: $when, from: $from, to: $to) {
|
|
time
|
|
data {
|
|
name
|
|
value
|
|
}
|
|
}
|
|
stackingGrowth(when: $when, from: $from, to: $to) {
|
|
time
|
|
data {
|
|
name
|
|
value
|
|
}
|
|
}
|
|
stackerGrowth(when: $when, from: $from, to: $to) {
|
|
time
|
|
data {
|
|
name
|
|
value
|
|
}
|
|
}
|
|
}`
|
|
|
|
export const getServerSideProps = getGetServerSideProps({ query: GROWTH_QUERY })
|
|
|
|
export default function Growth ({ ssrData }) {
|
|
const router = useRouter()
|
|
const { when, from, to } = router.query
|
|
|
|
const { data } = useQuery(GROWTH_QUERY, { variables: { when, from, to } })
|
|
if (!data && !ssrData) return <PageLoading />
|
|
|
|
const { registrationGrowth, itemGrowth, spendingGrowth, spenderGrowth, stackingGrowth, stackerGrowth } = data || ssrData
|
|
|
|
return (
|
|
<Layout>
|
|
<UsageHeader />
|
|
<Row>
|
|
<Col className='mt-3'>
|
|
<div className='text-center text-muted fw-bold'>stackers</div>
|
|
<WhenLineChart data={stackerGrowth} />
|
|
</Col>
|
|
<Col className='mt-3'>
|
|
<div className='text-center text-muted fw-bold'>stacking</div>
|
|
<WhenAreaChart data={stackingGrowth} />
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className='mt-3'>
|
|
<div className='text-center text-muted fw-bold'>spenders</div>
|
|
<WhenLineChart data={spenderGrowth} />
|
|
</Col>
|
|
<Col className='mt-3'>
|
|
<div className='text-center text-muted fw-bold'>spending</div>
|
|
<WhenAreaChart data={spendingGrowth} />
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className='mt-3'>
|
|
<div className='text-center text-muted fw-bold'>registrations</div>
|
|
<WhenAreaChart data={registrationGrowth} />
|
|
</Col>
|
|
<Col className='mt-3'>
|
|
<div className='text-center text-muted fw-bold'>items</div>
|
|
<WhenComposedChart data={itemGrowth} areaNames={['posts', 'comments', 'jobs']} areaAxis='left' lineNames={['comments/posts', 'territories']} lineAxis='right' barNames={['zaps']} />
|
|
</Col>
|
|
</Row>
|
|
</Layout>
|
|
)
|
|
}
|