Analytics page on Portal

[fungc-io]

It would be great if we can show some analytics in the portal to the users. The analytics page can show the funnel stats and tenant usage:

Numbers:

• number of Total users

Charts + Numbers by period:

• number of Active users
• number of login pageview
• number of Sign up pageview
• number of Sign up Breakdown by methods
• (Number only) Conversion percentage in the period, i.e. # of signup / # of signup pageview

---

Data to collect

• Monthly active user
• Weekly active user
• Daily active user (Tracked, but not used by the chart)
• Total number of users (Daily)
• Number of signup (Daily)
• Number of signup page view (Daily)
  • unique (+1 only per web session)
  • total (+1 for every visit) (Tracked, but not used by the chart)
• Number of login page view (Daily)
  • unique (+1 only per web session)
  • total (+1 for every visit) (Tracked, but not used by the chart)
• Number of signup per provider (Daily)

---

TODO:

• [x] Refactor to connect analytic redis
• [x] Collect count with analytic redis
• [x] DB model and export count to db
• [x] Update portal graphql api for getting count data
• [ ] Portal frontend support display charts

[carmenlau]

Update the api to fit the updated design:

• Separate the signupSummary query to totalUserCountChart, signupConversionRate and signupByMethodsChart
• Add AnalyticEpoch config to portal to specific the date of start collecting data, so the user can only select date range from the epoch to yesterday
• Add validation, if query is selecting date range outside the range of epoch to yesterday. Query should return empty dataset.
• Add validation, if user is selecting current month / current week for monthly and weekly chart. Query should return empty dataset.

When we develop portal

• Should get AnalyticEpoch from system config, date picker should only allow selecting date from epoch to yesterday
• For line chart (Monthly, weekly active user / total number of user), if server returns empty dataset, show the empty state. The chart should still show the line, if data are all zero.
• Conversion rate chart and signup by methods chart should show empty state if data are all zero.

[fungc-io]

Need updates on the design:

https://www.figma.com/file/msiE4O5imHONAG5EjhZeiZ/Authgear-UI?node-id=4769%3A44729

• Designs for different numbers of signup methods, most users will only have 1-3 sign up methods
• Confirm the color codes used for signup methods
• Anonymous users is missing in the graph

[fungc-io]

@carmenlau For the percentage label, please use the primary blue as background with white border and border radius of 2px