import { gql } from '@apollo/client' import { getGetServerSideProps } from '../../api/ssrApollo' import Layout from '../../components/layout' import { Col, Row } from 'react-bootstrap' import { UsageHeader } from '../../components/usage-header' import { WhenLineChart, WhenAreaChart } from '../../components/when-charts' import { useRouter } from 'next/router' export const getServerSideProps = getGetServerSideProps( 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 default function Growth ({ data: { registrationGrowth, itemGrowth, spendingGrowth, spenderGrowth, stackingGrowth, stackerGrowth } }) { const router = useRouter() const { when } = router.query const avg = ['year', 'forever'].includes(when) ? 'avg daily ' : '' return (
{avg}stackers
stacking
{avg}spenders
spending
registrations
items
) }