import { gql } from '@apollo/client' import { getGetServerSideProps } from '../../api/ssrApollo' import Layout from '../../components/layout' import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } from 'recharts' import { Col, Row } from 'react-bootstrap' import { abbrNum } from '../../lib/format' import { UsageHeader } from '../../components/usage-header' export const getServerSideProps = getGetServerSideProps( gql` { registrationGrowth { time invited organic } activeGrowth { time num } itemGrowth { time jobs comments posts } spentGrowth { time jobs fees boost tips } stackedGrowth { time posts comments rewards } earnerGrowth { time num } }`) const dateFormatter = timeStr => { const date = new Date(timeStr) return `${('0' + (date.getUTCMonth() % 12 + 1)).slice(-2)}/${String(date.getUTCFullYear()).slice(-2)}` } export default function Growth ({ data: { registrationGrowth, activeGrowth, itemGrowth, spentGrowth, earnerGrowth, stackedGrowth } }) { return (
stackers
stacking
items
spending
registrations
spenders
) } const COLORS = [ 'var(--secondary)', 'var(--info)', 'var(--success)', 'var(--boost)', 'var(--grey)' ] function GrowthAreaChart ({ data, xName, title }) { if (!data || data.length === 0) { return null } return ( {Object.keys(data[0]).filter(v => v !== 'time' && v !== '__typename').map((v, i) => )} ) } function GrowthLineChart ({ data, xName, yName }) { return ( ) }