add average comments per post to items analytics

api/resolvers/growth.js

@@ -132,7 +132,8 @@ export default {
           SELECT date_trunc('${timeUnit(when)}', day) as time, json_build_array(
             json_build_object('name', 'posts', 'value', sum(posts)),
             json_build_object('name', 'comments', 'value', sum(comments)),
-            json_build_object('name', 'jobs', 'value', sum(jobs))
+            json_build_object('name', 'jobs', 'value', sum(jobs)),
+            json_build_object('name', 'comments/posts', 'value', ROUND(sum(comments)/GREATEST(sum(posts), 1), 2))
           ) AS data
           FROM item_growth_days
           WHERE ${viewIntervalClause(when, 'item_growth_days', false)}
@@ -145,7 +146,8 @@ export default {
         SELECT time, json_build_array(
           json_build_object('name', 'comments', 'value', count("parentId")),
           json_build_object('name', 'jobs', 'value', count("subName") FILTER (WHERE "subName" = 'jobs')),
-          json_build_object('name', 'posts', 'value', count("Item".id)-count("parentId")-(count("subName") FILTER (WHERE "subName" = 'jobs')))
+          json_build_object('name', 'posts', 'value', count("Item".id)-count("parentId")-(count("subName") FILTER (WHERE "subName" = 'jobs'))),
+          json_build_object('name', 'comments/posts', 'value', ROUND(count("parentId")/GREATEST(count("Item".id)-count("parentId"), 1), 2))
         ) AS data
         FROM times
         LEFT JOIN "Item" ON ${intervalClause(when, 'Item', true)} time = date_trunc('${timeUnit(when)}', created_at)

api/typeDefs/growth.js

@@ -3,7 +3,7 @@ import { gql } from 'graphql-tag'
 export default gql`
   type NameValue {
     name: String!
-    value: Int!
+    value: Float!
   }
 
   extend type Query {

components/charts.js

@@ -133,7 +133,12 @@ export function WhenLineChart ({ data }) {
   )
 }
 
-export function WhenComposedChart ({ data, lineNames, areaNames, barNames }) {
+export function WhenComposedChart ({
+  data,
+  lineNames = [], lineAxis = 'left',
+  areaNames = [], areaAxis = 'left',
+  barNames = [], barAxis = 'left'
+}) {
   const router = useRouter()
   if (!data || data.length === 0) {
     return null
@@ -163,11 +168,11 @@ export function WhenComposedChart ({ data, lineNames, areaNames, barNames }) {
         <Tooltip labelFormatter={dateFormatter(when)} contentStyle={{ color: 'var(--bs-body-color)', backgroundColor: 'var(--bs-body-bg)' }} />
         <Legend />
         {barNames?.map((v, i) =>
-          <Bar yAxisId='right' key={v} type='monotone' dataKey={v} name={v} stroke='var(--bs-info)' fill='var(--bs-info)' />)}
+          <Bar yAxisId={barAxis} key={v} type='monotone' dataKey={v} name={v} stroke='var(--bs-info)' fill='var(--bs-info)' />)}
         {areaNames?.map((v, i) =>
-          <Area yAxisId='left' key={v} type='monotone' dataKey={v} name={v} stackId='1' stroke={COLORS[i]} fill={COLORS[i]} />)}
+          <Area yAxisId={areaAxis} key={v} type='monotone' dataKey={v} name={v} stackId='1' stroke={COLORS[i]} fill={COLORS[i]} />)}
         {lineNames?.map((v, i) =>
-          <Line yAxisId='left' key={v} type='monotone' dataKey={v} name={v} stackId='1' stroke={COLORS[i]} fill={COLORS[i]} />)}
+          <Line yAxisId={lineAxis} key={v} type='monotone' dataKey={v} name={v} stackId='1' stroke={COLORS[areaNames.length + i]} />)}
       </ComposedChart>
     </ResponsiveContainer>
   )

pages/referrals/[when].js

@@ -57,7 +57,7 @@ export default function Referrals ({ ssrData }) {
           onChange={(formik, e) => router.push(`/referrals/${e.target.value}`)}
         />
       </h4>
-      <WhenComposedChart data={stats} lineNames={['sats']} barNames={['referrals']} />
+      <WhenComposedChart data={stats} lineNames={['sats']} barNames={['referrals']} barAxis='right' />
 
       <div
         className='text-small pt-5 px-3 d-flex w-100 align-items-center'

pages/stackers/[when].js

@@ -14,6 +14,9 @@ const WhenAreaChart = dynamic(() => import('../../components/charts').then(mod =
 const WhenLineChart = dynamic(() => import('../../components/charts').then(mod => mod.WhenLineChart), {
   loading: () => <div>Loading...</div>
 })
+const WhenComposedChart = dynamic(() => import('../../components/charts').then(mod => mod.WhenComposedChart), {
+  loading: () => <div>Loading...</div>
+})
 
 const GROWTH_QUERY = gql`
   query Growth($when: String!)
@@ -104,7 +107,7 @@ export default function Growth ({ ssrData }) {
         </Col>
         <Col className='mt-3'>
           <div className='text-center text-muted fw-bold'>items</div>
-          <WhenAreaChart data={itemGrowth} />
+          <WhenComposedChart data={itemGrowth} areaNames={['posts', 'comments', 'jobs']} areaAxis='left' lineNames={['comments/posts']} lineAxis='right' />
         </Col>
       </Row>
     </Layout>