codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-29 07:24:08 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add more year long dashboard graphs

Browse source
This commit is contained in:
Matt Lott 2016-02-22 12:05:29 -08:00
parent e2feeb8330
commit e471d652e5
2 changed files with 97 additions and 103 deletions
app
templates/admin
analytics.jade
views/admin
AnalyticsView.coffee

40
app/templates/admin/analytics.jade
View file

@ -8,28 +8,28 @@ block content
.container-fluid .container-fluid
.row .row
.col-md-5.big-stat.active-classes .col-md-5.big-stat.active-classes
div.description Monthly Active Classes
if activeClasses.length > 0 if activeClasses.length > 0
div.description Monthly Active Classes
div.count= activeClasses[0].groups[activeClasses[0].groups.length - 1] div.count= activeClasses[0].groups[activeClasses[0].groups.length - 1]
.col-md-5.big-stat.recurring-revenue .col-md-5.big-stat.recurring-revenue
div.description Monthly Recurring Revenue
if revenue.length > 0 if revenue.length > 0
div.description Monthly Recurring Revenue
div.count $#{Math.round((revenue[0].groups[revenue[0].groups.length - 1]) / 100)} div.count $#{Math.round((revenue[0].groups[revenue[0].groups.length - 1]) / 100)}
.col-md-5.big-stat.classroom-active-users .col-md-5.big-stat.classroom-active-users
div.description Classroom Monthly Active Users
if activeUsers.length > 0 if activeUsers.length > 0
- var classroomBigMAU = 0; - var classroomBigMAU = 0;
each count, event in activeUsers[0].events each count, event in activeUsers[0].events
if event.indexOf('MAU classroom') >= 0 if event.indexOf('MAU classroom') >= 0
- classroomBigMAU += count; - classroomBigMAU += count;
div.description Classroom Monthly Active Users
div.count= classroomBigMAU div.count= classroomBigMAU
.col-md-5.big-stat.campaign-active-users .col-md-5.big-stat.campaign-active-users
div.description Campaign Monthly Active Users
if activeUsers.length > 0 if activeUsers.length > 0
- var campaignBigMAU = 0; - var campaignBigMAU = 0;
each count, event in activeUsers[0].events each count, event in activeUsers[0].events
if event.indexOf('MAU campaign') >= 0 if event.indexOf('MAU campaign') >= 0
- campaignBigMAU += count; - campaignBigMAU += count;
div.description Campaign Monthly Active Users
div.count= campaignBigMAU div.count= campaignBigMAU
ul.nav.nav-tabs ul.nav.nav-tabs
@ -62,7 +62,10 @@ block content
.small Paid class: at least one paid student in the classroom .small Paid class: at least one paid student in the classroom
.small Trial class: not paid, at least one trial student in classroom .small Trial class: not paid, at least one trial student in classroom
.small Free class: not paid, not trial .small Free class: not paid, not trial
.active-classes-chart.line-chart-container .active-classes-chart-90.line-chart-container
h3 Active Classes 365 days
.active-classes-chart-365.line-chart-container
h1#active-classes-table Active Classes h1#active-classes-table Active Classes
table.table.table-striped.table-condensed table.table.table-striped.table-condensed
@ -93,7 +96,7 @@ block content
h1#recurring-revenue-table Recurring Revenue h1#recurring-revenue-table Recurring Revenue
table.table.table-striped.table-condensed table.table.table-striped.table-condensed
tr tr
th Day th(style='min-width:85px;') Day
for group in revenueGroups for group in revenueGroups
th= group.replace('DRR ', 'Daily ').replace('MRR ', 'Monthly ') th= group.replace('DRR ', 'Daily ').replace('MRR ', 'Monthly ')
each entry in revenue each entry in revenue
@ -107,10 +110,16 @@ block content
.small Paid student: user.coursePrepaidID set and prepaid.properties.trialRequestID NOT set .small Paid student: user.coursePrepaidID set and prepaid.properties.trialRequestID NOT set
.small Trial student: user.coursePrepaidID set and prepaid.properties.trialRequestID set .small Trial student: user.coursePrepaidID set and prepaid.properties.trialRequestID set
.small Free student: not paid, not trial .small Free student: not paid, not trial
.classroom-daily-active-users-chart.line-chart-container .classroom-daily-active-users-chart-90.line-chart-container
h3#classroom-maus-graph Classroom Monthly Active Users 90 days h3#classroom-maus-graph Classroom Monthly Active Users 90 days
.classroom-monthly-active-users-chart.line-chart-container .classroom-monthly-active-users-chart-90.line-chart-container
h3#classroom-daus-graph Classroom Daily Active Users 365 days
.classroom-daily-active-users-chart-365.line-chart-container
h3#classroom-maus-graph Classroom Monthly Active Users 365 days
.classroom-monthly-active-users-chart-365.line-chart-container
h3#enrollments-graph Enrollments Issued and Redeemed 90 days h3#enrollments-graph Enrollments Issued and Redeemed 90 days
.paid-courses-chart.line-chart-container .paid-courses-chart.line-chart-container
@ -199,13 +208,19 @@ block content
td 0 td 0
.tab-pane#tab_campaign .tab-pane#tab_campaign
h3#campaign-daus-graph Campaign Daily Active Users 90 days h3 Campaign Daily Active Users 90 days
.small Paid user: had monthly or yearly sub on given day .small Paid user: had monthly or yearly sub on given day
.small Free user: not paid .small Free user: not paid
.campaign-daily-active-users-chart.line-chart-container .campaign-daily-active-users-chart-90.line-chart-container
h3#campaign-maus-graph Campaign Monthly Active Users 90 days h3 Campaign Monthly Active Users 90 days
.campaign-monthly-active-users-chart.line-chart-container .campaign-monthly-active-users-chart-90.line-chart-container
h3 Campaign Daily Active Users 365 days
.campaign-daily-active-users-chart-365.line-chart-container
h3 Campaign Monthly Active Users 365 days
.campaign-monthly-active-users-chart-365.line-chart-container
h1#active-users-table Active Users h1#active-users-table Active Users
if activeUsers.length > 0 if activeUsers.length > 0
@ -236,7 +251,6 @@ block content
.campaign-vs-classroom-monthly-active-users-recent-chart.line-chart-container .campaign-vs-classroom-monthly-active-users-recent-chart.line-chart-container
h3#campaign-vs-classroom-paid-maus-graph Campaign vs Classroom Paid Monthly Active Users 365 days h3#campaign-vs-classroom-paid-maus-graph Campaign vs Classroom Paid Monthly Active Users 365 days
.small TODO: aggregate active user data from last year
.campaign-vs-classroom-monthly-active-users-chart.line-chart-container .campaign-vs-classroom-monthly-active-users-chart.line-chart-container
h1#active-users-table Active Users h1#active-users-table Active Users

160
app/views/admin/AnalyticsView.coffee
View file

@ -287,11 +287,16 @@ module.exports = class AnalyticsView extends RootView
visibleWidth = $('.kpi-recent-chart').width() visibleWidth = $('.kpi-recent-chart').width()
d3Utils.createLineChart('.kpi-recent-chart', @kpiRecentChartLines, visibleWidth) d3Utils.createLineChart('.kpi-recent-chart', @kpiRecentChartLines, visibleWidth)
d3Utils.createLineChart('.kpi-chart', @kpiChartLines, visibleWidth) d3Utils.createLineChart('.kpi-chart', @kpiChartLines, visibleWidth)
d3Utils.createLineChart('.active-classes-chart', @activeClassesChartLines, visibleWidth) d3Utils.createLineChart('.active-classes-chart-90', @activeClassesChartLines90, visibleWidth)
d3Utils.createLineChart('.classroom-daily-active-users-chart', @classroomDailyActiveUsersChartLines, visibleWidth) d3Utils.createLineChart('.active-classes-chart-365', @activeClassesChartLines365, visibleWidth)
d3Utils.createLineChart('.classroom-monthly-active-users-chart', @classroomMonthlyActiveUsersChartLines, visibleWidth) d3Utils.createLineChart('.classroom-daily-active-users-chart-90', @classroomDailyActiveUsersChartLines90, visibleWidth)
d3Utils.createLineChart('.campaign-daily-active-users-chart', @campaignDailyActiveUsersChartLines, visibleWidth) d3Utils.createLineChart('.classroom-monthly-active-users-chart-90', @classroomMonthlyActiveUsersChartLines90, visibleWidth)
d3Utils.createLineChart('.campaign-monthly-active-users-chart', @campaignMonthlyActiveUsersChartLines, visibleWidth) d3Utils.createLineChart('.classroom-daily-active-users-chart-365', @classroomDailyActiveUsersChartLines365, visibleWidth)
d3Utils.createLineChart('.classroom-monthly-active-users-chart-365', @classroomMonthlyActiveUsersChartLines365, visibleWidth)
d3Utils.createLineChart('.campaign-daily-active-users-chart-90', @campaignDailyActiveUsersChartLines90, visibleWidth)
d3Utils.createLineChart('.campaign-monthly-active-users-chart-90', @campaignMonthlyActiveUsersChartLines90, visibleWidth)
d3Utils.createLineChart('.campaign-daily-active-users-chart-365', @campaignDailyActiveUsersChartLines365, visibleWidth)
d3Utils.createLineChart('.campaign-monthly-active-users-chart-365', @campaignMonthlyActiveUsersChartLines365, visibleWidth)
d3Utils.createLineChart('.campaign-vs-classroom-monthly-active-users-recent-chart.line-chart-container', @campaignVsClassroomMonthlyActiveUsersRecentChartLines, visibleWidth) d3Utils.createLineChart('.campaign-vs-classroom-monthly-active-users-recent-chart.line-chart-container', @campaignVsClassroomMonthlyActiveUsersRecentChartLines, visibleWidth)
d3Utils.createLineChart('.campaign-vs-classroom-monthly-active-users-chart.line-chart-container', @campaignVsClassroomMonthlyActiveUsersChartLines, visibleWidth) d3Utils.createLineChart('.campaign-vs-classroom-monthly-active-users-chart.line-chart-container', @campaignVsClassroomMonthlyActiveUsersChartLines, visibleWidth)
d3Utils.createLineChart('.paid-courses-chart', @enrollmentsChartLines, visibleWidth) d3Utils.createLineChart('.paid-courses-chart', @enrollmentsChartLines, visibleWidth)
@ -393,9 +398,9 @@ module.exports = class AnalyticsView extends RootView
showYScale: true showYScale: true
updateActiveClassesChartData: -> updateActiveClassesChartData: ->
@activeClassesChartLines = [] @activeClassesChartLines90 = []
@activeClassesChartLines365 = []
return unless @activeClasses?.length return unless @activeClasses?.length
days = d3Utils.createContiguousDays(90)
groupDayMap = {} groupDayMap = {}
for entry in @activeClasses for entry in @activeClasses
@ -404,35 +409,42 @@ module.exports = class AnalyticsView extends RootView
groupDayMap[@activeClassGroups[i]][entry.day] ?= 0 groupDayMap[@activeClassGroups[i]][entry.day] ?= 0
groupDayMap[@activeClassGroups[i]][entry.day] += count groupDayMap[@activeClassGroups[i]][entry.day] += count
lines = [] createActiveClassesChartLines = (lines, numDays) =>
colorIndex = 0 days = d3Utils.createContiguousDays(numDays)
totalMax = 0 colorIndex = 0
for group, entries of groupDayMap totalMax = 0
data = [] for group, entries of groupDayMap
for day, count of entries data = []
data.push for day, count of entries
day: day data.push
value: count day: day
data.reverse() value: count
points = @createLineChartPoints(days, data) data.reverse()
@activeClassesChartLines.push points = @createLineChartPoints(days, data)
points: points lines.push
description: group.replace('Active classes ', '') points: points
lineColor: @lineColors[colorIndex++ % @lineColors.length] description: group.replace('Active classes ', '')
strokeWidth: 1 lineColor: @lineColors[colorIndex++ % @lineColors.length]
min: 0 strokeWidth: 1
showYScale: group is 'Total' min: 0
totalMax = _.max(points, 'y').y if group is 'Total' showYScale: group is 'Total'
line.max = totalMax for line in @activeClassesChartLines totalMax = _.max(points, 'y').y if group is 'Total'
line.max = totalMax for line in lines
createActiveClassesChartLines(@activeClassesChartLines90, 90)
createActiveClassesChartLines(@activeClassesChartLines365, 365)
updateActiveUsersChartData: -> updateActiveUsersChartData: ->
# Create chart lines for the active user events returned by active_users in analytics_perday_handler # Create chart lines for the active user events returned by active_users in analytics_perday_handler
@campaignDailyActiveUsersChartLines = [] @campaignDailyActiveUsersChartLines90 = []
@campaignMonthlyActiveUsersChartLines = [] @campaignMonthlyActiveUsersChartLines90 = []
@classroomDailyActiveUsersChartLines = [] @campaignDailyActiveUsersChartLines365 = []
@classroomMonthlyActiveUsersChartLines = [] @campaignMonthlyActiveUsersChartLines365 = []
@classroomDailyActiveUsersChartLines90 = []
@classroomMonthlyActiveUsersChartLines90 = []
@classroomDailyActiveUsersChartLines365 = []
@classroomMonthlyActiveUsersChartLines365 = []
return unless @activeUsers?.length return unless @activeUsers?.length
days = d3Utils.createContiguousDays(90)
# Separate day/value arrays by event # Separate day/value arrays by event
eventDataMap = {} eventDataMap = {}
@ -444,65 +456,33 @@ module.exports = class AnalyticsView extends RootView
day: entry.day day: entry.day
value: count value: count
# Build chart lines for each event createActiveUsersChartLines = (lines, numDays, eventPrefix) =>
eventLineMap = days = d3Utils.createContiguousDays(numDays)
'DAU campaign': {max: 0, colorIndex: 0} colorIndex = 0
'MAU campaign': {max: 0, colorIndex: 0} lineMax = 0
'DAU classroom': {max: 0, colorIndex: 0} showYScale = true
'MAU classroom': {max: 0, colorIndex: 0} for event, data of eventDataMap
for event, data of eventDataMap continue unless event.indexOf(eventPrefix) >= 0
data.reverse() points = @createLineChartPoints(days, _.cloneDeep(data).reverse())
points = @createLineChartPoints(days, data) lineMax = Math.max(_.max(points, 'y').y, lineMax)
max = _.max(points, 'y').y lines.push
if event.indexOf('DAU campaign') >= 0 points: points
chartLines = @campaignDailyActiveUsersChartLines description: event
eventLineMap['DAU campaign'].max = Math.max(eventLineMap['DAU campaign'].max, max) lineColor: @lineColors[colorIndex++ % @lineColors.length]
lineColor = @lineColors[eventLineMap['DAU campaign'].colorIndex++ % @lineColors.length] strokeWidth: 1
else if event.indexOf('MAU campaign') >= 0 min: 0
chartLines = @campaignMonthlyActiveUsersChartLines showYScale: showYScale
eventLineMap['MAU campaign'].max = Math.max(eventLineMap['MAU campaign'].max, max) showYScale = false
lineColor = @lineColors[eventLineMap['MAU campaign'].colorIndex++ % @lineColors.length] line.max = lineMax for line in lines
else if event.indexOf('DAU classroom') >= 0
chartLines = @classroomDailyActiveUsersChartLines
eventLineMap['DAU classroom'].max = Math.max(eventLineMap['DAU classroom'].max, max)
lineColor = @lineColors[eventLineMap['DAU classroom'].colorIndex++ % @lineColors.length]
else if event.indexOf('MAU classroom') >= 0
chartLines = @classroomMonthlyActiveUsersChartLines
eventLineMap['MAU classroom'].max = Math.max(eventLineMap['MAU classroom'].max, max)
lineColor = @lineColors[eventLineMap['MAU classroom'].colorIndex++ % @lineColors.length]
chartLines.push
points: points
description: event
lineColor: lineColor
strokeWidth: 1
min: 0
showYScale: false
# Update line Y scales and maxes createActiveUsersChartLines(@campaignDailyActiveUsersChartLines90, 90, 'DAU campaign')
showYScaleSet = false createActiveUsersChartLines(@campaignMonthlyActiveUsersChartLines90, 90, 'MAU campaign')
for line in @campaignDailyActiveUsersChartLines createActiveUsersChartLines(@classroomDailyActiveUsersChartLines90, 90, 'DAU classroom')
line.max = eventLineMap['DAU campaign'].max createActiveUsersChartLines(@classroomMonthlyActiveUsersChartLines90, 90, 'MAU classroom')
unless showYScaleSet createActiveUsersChartLines(@campaignDailyActiveUsersChartLines365, 365, 'DAU campaign')
line.showYScale = true createActiveUsersChartLines(@campaignMonthlyActiveUsersChartLines365, 365, 'MAU campaign')
showYScaleSet = true createActiveUsersChartLines(@classroomDailyActiveUsersChartLines365, 365, 'DAU classroom')
showYScaleSet = false createActiveUsersChartLines(@classroomMonthlyActiveUsersChartLines365, 365, 'MAU classroom')
for line in @campaignMonthlyActiveUsersChartLines
line.max = eventLineMap['MAU campaign'].max
unless showYScaleSet
line.showYScale = true
showYScaleSet = true
showYScaleSet = false
for line in @classroomDailyActiveUsersChartLines
line.max = eventLineMap['DAU classroom'].max
unless showYScaleSet
line.showYScale = true
showYScaleSet = true
showYScaleSet = false
for line in @classroomMonthlyActiveUsersChartLines
line.max = eventLineMap['MAU classroom'].max
unless showYScaleSet
line.showYScale = true
showYScaleSet = true
updateCampaignVsClassroomActiveUsersChartData: -> updateCampaignVsClassroomActiveUsersChartData: ->
@campaignVsClassroomMonthlyActiveUsersRecentChartLines = [] @campaignVsClassroomMonthlyActiveUsersRecentChartLines = []