stacker.news/pages/users/[when].js

95 lines
2.4 KiB
JavaScript
Raw Normal View History

2022-12-01 21:31:04 +00:00
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'
2022-12-19 22:27:52 +00:00
import { WhenLineChart, WhenAreaChart } from '../../components/when-charts'
2022-12-01 21:31:04 +00:00
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 }
}) {
return (
<Layout>
<UsageHeader />
<Row>
<Col className='mt-3'>
<div className='text-center text-muted font-weight-bold'>stackers</div>
2022-12-19 22:27:52 +00:00
<WhenLineChart data={stackerGrowth} />
2022-12-01 21:31:04 +00:00
</Col>
<Col className='mt-3'>
<div className='text-center text-muted font-weight-bold'>stacking</div>
2022-12-19 22:27:52 +00:00
<WhenAreaChart data={stackingGrowth} />
2022-12-01 21:31:04 +00:00
</Col>
</Row>
<Row>
<Col className='mt-3'>
<div className='text-center text-muted font-weight-bold'>spenders</div>
2022-12-19 22:27:52 +00:00
<WhenLineChart data={spenderGrowth} />
2022-12-01 21:31:04 +00:00
</Col>
<Col className='mt-3'>
<div className='text-center text-muted font-weight-bold'>spending</div>
2022-12-19 22:27:52 +00:00
<WhenAreaChart data={spendingGrowth} />
2022-12-01 21:31:04 +00:00
</Col>
</Row>
<Row>
<Col className='mt-3'>
<div className='text-center text-muted font-weight-bold'>registrations</div>
2022-12-19 22:27:52 +00:00
<WhenAreaChart data={registrationGrowth} />
2022-12-01 21:31:04 +00:00
</Col>
<Col className='mt-3'>
<div className='text-center text-muted font-weight-bold'>items</div>
2022-12-19 22:27:52 +00:00
<WhenAreaChart data={itemGrowth} />
2022-12-01 21:31:04 +00:00
</Col>
</Row>
</Layout>
)
}