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' const WhenAreaChart = dynamic(() => import('../../components/charts').then(mod => mod.WhenAreaChart), { loading: () =>
Loading...
}) const WhenLineChart = dynamic(() => import('../../components/charts').then(mod => mod.WhenLineChart), { loading: () =>
Loading...
}) const WhenComposedChart = dynamic(() => import('../../components/charts').then(mod => mod.WhenComposedChart), { loading: () =>
Loading...
}) const GROWTH_QUERY = gql` query Growth($when: String!) { registrationGrowth(when: $when) { time data { name value } } itemGrowth(when: $when) { time data { name value } } spendingGrowth(when: $when) { time data { name value } } spenderGrowth(when: $when) { time data { name value } } stackingGrowth(when: $when) { time data { name value } } stackerGrowth(when: $when) { time data { name value } } }` export const getServerSideProps = getGetServerSideProps({ query: GROWTH_QUERY }) export default function Growth ({ ssrData }) { const router = useRouter() const { when } = router.query const avg = ['year', 'forever'].includes(when) ? 'avg daily ' : '' const { data } = useQuery(GROWTH_QUERY, { variables: { when } }) if (!data && !ssrData) return const { registrationGrowth, itemGrowth, spendingGrowth, spenderGrowth, stackingGrowth, stackerGrowth } = data || ssrData return (
{avg}stackers
stacking
{avg}spenders
spending
registrations
items
) }