fix(analytics): Overlapped text in graph & active users (#4623)

* fix(analytics): line graph & active users fix * removed console log
botpress · Mar 11, 2021 · 1ddbae0 · 1ddbae0
1 parent ff469e2
commit 1ddbae0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/modules/analytics/src/backend/db.ts b/modules/analytics/src/backend/db.ts
@@ -145,6 +145,12 @@ export default class Database {
       .andWhere(this.knex.date.isBetween('createdOn', startDate, endDate))
       .groupBy(['createdOn', 'channel'])
 
+    let queryReturningUsers = this.knex('bot_chat_users')
+      .where({ botId })
+      .andWhere(this.knex.date.isBetween('lastSeenOn', startDate, endDate))
+      .groupBy(['lastSeenOn', 'channel'])
+      .andWhereRaw('lastSeenOn <> createdOn')
+
     let queryActiveUsers = this.knex('bot_chat_users')
       .where({ botId })
       .andWhere(this.knex.date.isBetween('lastSeenOn', startDate, endDate))
@@ -154,6 +160,7 @@ export default class Database {
       queryMetrics = queryMetrics.andWhere({ channel: options.channel })
       queryNewUsers = queryNewUsers.andWhere({ channel: options.channel })
       queryActiveUsers = queryActiveUsers.andWhere({ channel: options.channel })
+      queryReturningUsers = queryReturningUsers.andWhere({ channel: options.channel })
     }
 
     try {
@@ -168,11 +175,17 @@ export default class Database {
         'channel',
         this.knex.raw('count(*) as value')
       )
+      const returningUsersCount = await queryReturningUsers.select(
+        'lastSeenOn as date',
+        'channel',
+        this.knex.raw('count(*) as value')
+      )
 
       return [
         ...metrics,
         ...newUsersCount.map(x => ({ ...x, value: Number(x.value), metric: 'new_users_count' })),
-        ...activeUsersCount.map(x => ({ ...x, value: Number(x.value), metric: 'active_users_count' }))
+        ...activeUsersCount.map(x => ({ ...x, value: Number(x.value), metric: 'active_users_count' })),
+        ...returningUsersCount.map(x => ({ ...x, value: Number(x.value), metric: 'returning_users_count' }))
       ].map(x => ({ ...x, created_on: x.date, date: moment(x.date).format('YYYY-MM-DD') }))
     } catch (err) {
       this.bp.logger.attachError(err).warn('Could not retrieve analytics')

diff --git a/modules/analytics/src/views/full/TimeSeriesChart.tsx b/modules/analytics/src/views/full/TimeSeriesChart.tsx
@@ -19,9 +19,10 @@ interface Props extends Extras {
   channels: Channel[]
 }
 
-const formatTick = timestamp => moment.unix(timestamp).format('D')
+const formatTick = timestamp => moment.unix(timestamp).format('D/M')
 const formatTootilTick = timestamp => moment.unix(timestamp).format('dddd, MMMM Do YYYY')
 
+
 const TimeSeriesChart: FC<Props> = props => {
   const { data, name, className, channels } = props
 
@@ -53,7 +54,7 @@ const TimeSeriesChart: FC<Props> = props => {
                 height={28}
                 dataKey="time"
                 minTickGap={0}
-                interval={0}
+                interval={Math.floor(data.length/12)}
                 axisLine={false}
                 tickLine={false}
                 tickFormatter={formatTick}

diff --git a/modules/analytics/src/views/full/index.tsx b/modules/analytics/src/views/full/index.tsx
@@ -310,9 +310,9 @@ const Analytics: FC<any> = ({ bp }) => {
   }
 
   const getReturningUsers = () => {
-    const activeUsersCount = getMetricCount('active_users_count')
+    const returningUsersCount = getMetricCount('returning_users_count')
     const newUsersCount = getMetricCount('new_users_count')
-    const percent = Math.round((activeUsersCount / (newUsersCount + activeUsersCount)) * 100)
+    const percent = Math.round((returningUsersCount / (newUsersCount + returningUsersCount)) * 100)
 
     return getNotNaN(percent, '%')
   }
@@ -362,7 +362,7 @@ const Analytics: FC<any> = ({ bp }) => {
 
   const renderEngagement = () => {
     const newUserCountDiff = getMetricCount('new_users_count') - getPreviousRangeMetricCount('new_users_count')
-    const activeUserCountDiff = getMetricCount('active_users_count') - getPreviousRangeMetricCount('active_users_count')
+    const returningUserCountDiff = getMetricCount('returning_users_count') - getPreviousRangeMetricCount('returning_users_count')
     const activeUsers = fillMissingValues(getMetric('active_users_count'), state.dateRange[0], state.dateRange[1])
 
     return (
@@ -376,9 +376,9 @@ const Analytics: FC<any> = ({ bp }) => {
         />
         <NumberMetric
           className={style.half}
-          diffFromPreviousRange={activeUserCountDiff}
+          diffFromPreviousRange={returningUserCountDiff}
           previousDateRange={state.previousDateRange}
-          name={lang.tr('module.analytics.returningUsers', { nb: getMetricCount('active_users_count') })}
+          name={lang.tr('module.analytics.returningUsers', { nb: getMetricCount('returning_users_count') })}
           value={getReturningUsers()}
         />
         <TimeSeriesChart