mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-26 14:03:28 -04:00
Add more year long dashboard graphs
This commit is contained in:
Matt Lott
parent
e2feeb8330
commit
e471d652e5
2 changed files with 97 additions and 103 deletions
app
|
|
@ -8,28 +8,28 @@ block content
|
|||
.container-fluid
|
||||
.row
|
||||
.col-md-5.big-stat.active-classes
|
||||
div.description Monthly Active Classes
|
||||
if activeClasses.length > 0
|
||||
div.description Monthly Active Classes
|
||||
div.count= activeClasses[0].groups[activeClasses[0].groups.length - 1]
|
||||
.col-md-5.big-stat.recurring-revenue
|
||||
div.description Monthly Recurring Revenue
|
||||
if revenue.length > 0
|
||||
div.description Monthly Recurring Revenue
|
||||
div.count $#{Math.round((revenue[0].groups[revenue[0].groups.length - 1]) / 100)}
|
||||
.col-md-5.big-stat.classroom-active-users
|
||||
div.description Classroom Monthly Active Users
|
||||
if activeUsers.length > 0
|
||||
- var classroomBigMAU = 0;
|
||||
each count, event in activeUsers[0].events
|
||||
if event.indexOf('MAU classroom') >= 0
|
||||
- classroomBigMAU += count;
|
||||
div.description Classroom Monthly Active Users
|
||||
div.count= classroomBigMAU
|
||||
.col-md-5.big-stat.campaign-active-users
|
||||
div.description Campaign Monthly Active Users
|
||||
if activeUsers.length > 0
|
||||
- var campaignBigMAU = 0;
|
||||
each count, event in activeUsers[0].events
|
||||
if event.indexOf('MAU campaign') >= 0
|
||||
- campaignBigMAU += count;
|
||||
div.description Campaign Monthly Active Users
|
||||
div.count= campaignBigMAU
|
||||
|
||||
ul.nav.nav-tabs
|
||||
|
|
@ -62,7 +62,10 @@ block content
|
|||
.small Paid class: at least one paid student in the classroom
|
||||
.small Trial class: not paid, at least one trial student in classroom
|
||||
.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
|
||||
table.table.table-striped.table-condensed
|
||||
|
|
@ -93,7 +96,7 @@ block content
|
|||
h1#recurring-revenue-table Recurring Revenue
|
||||
table.table.table-striped.table-condensed
|
||||
tr
|
||||
th Day
|
||||
th(style='min-width:85px;') Day
|
||||
for group in revenueGroups
|
||||
th= group.replace('DRR ', 'Daily ').replace('MRR ', 'Monthly ')
|
||||
each entry in revenue
|
||||
|
|
@ -107,10 +110,16 @@ block content
|
|||
.small Paid student: user.coursePrepaidID set and prepaid.properties.trialRequestID NOT set
|
||||
.small Trial student: user.coursePrepaidID set and prepaid.properties.trialRequestID set
|
||||
.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
|
||||
.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
|
||||
.paid-courses-chart.line-chart-container
|
||||
|
|
@ -199,13 +208,19 @@ block content
|
|||
td 0
|
||||
|
||||
.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 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
|
||||
.campaign-monthly-active-users-chart.line-chart-container
|
||||
h3 Campaign Monthly Active Users 90 days
|
||||
.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
|
||||
if activeUsers.length > 0
|
||||
|
|
@ -236,7 +251,6 @@ block content
|
|||
.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
|
||||
.small TODO: aggregate active user data from last year
|
||||
.campaign-vs-classroom-monthly-active-users-chart.line-chart-container
|
||||
|
||||
h1#active-users-table Active Users
|
||||
|
|
|
|||
|
|
@ -287,11 +287,16 @@ module.exports = class AnalyticsView extends RootView
|
|||
visibleWidth = $('.kpi-recent-chart').width()
|
||||
d3Utils.createLineChart('.kpi-recent-chart', @kpiRecentChartLines, visibleWidth)
|
||||
d3Utils.createLineChart('.kpi-chart', @kpiChartLines, visibleWidth)
|
||||
d3Utils.createLineChart('.active-classes-chart', @activeClassesChartLines, visibleWidth)
|
||||
d3Utils.createLineChart('.classroom-daily-active-users-chart', @classroomDailyActiveUsersChartLines, visibleWidth)
|
||||
d3Utils.createLineChart('.classroom-monthly-active-users-chart', @classroomMonthlyActiveUsersChartLines, visibleWidth)
|
||||
d3Utils.createLineChart('.campaign-daily-active-users-chart', @campaignDailyActiveUsersChartLines, visibleWidth)
|
||||
d3Utils.createLineChart('.campaign-monthly-active-users-chart', @campaignMonthlyActiveUsersChartLines, visibleWidth)
|
||||
d3Utils.createLineChart('.active-classes-chart-90', @activeClassesChartLines90, visibleWidth)
|
||||
d3Utils.createLineChart('.active-classes-chart-365', @activeClassesChartLines365, visibleWidth)
|
||||
d3Utils.createLineChart('.classroom-daily-active-users-chart-90', @classroomDailyActiveUsersChartLines90, visibleWidth)
|
||||
d3Utils.createLineChart('.classroom-monthly-active-users-chart-90', @classroomMonthlyActiveUsersChartLines90, 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-chart.line-chart-container', @campaignVsClassroomMonthlyActiveUsersChartLines, visibleWidth)
|
||||
d3Utils.createLineChart('.paid-courses-chart', @enrollmentsChartLines, visibleWidth)
|
||||
|
|
@ -393,9 +398,9 @@ module.exports = class AnalyticsView extends RootView
|
|||
showYScale: true
|
||||
|
||||
updateActiveClassesChartData: ->
|
||||
@activeClassesChartLines = []
|
||||
@activeClassesChartLines90 = []
|
||||
@activeClassesChartLines365 = []
|
||||
return unless @activeClasses?.length
|
||||
days = d3Utils.createContiguousDays(90)
|
||||
|
||||
groupDayMap = {}
|
||||
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] += count
|
||||
|
||||
lines = []
|
||||
colorIndex = 0
|
||||
totalMax = 0
|
||||
for group, entries of groupDayMap
|
||||
data = []
|
||||
for day, count of entries
|
||||
data.push
|
||||
day: day
|
||||
value: count
|
||||
data.reverse()
|
||||
points = @createLineChartPoints(days, data)
|
||||
@activeClassesChartLines.push
|
||||
points: points
|
||||
description: group.replace('Active classes ', '')
|
||||
lineColor: @lineColors[colorIndex++ % @lineColors.length]
|
||||
strokeWidth: 1
|
||||
min: 0
|
||||
showYScale: group is 'Total'
|
||||
totalMax = _.max(points, 'y').y if group is 'Total'
|
||||
line.max = totalMax for line in @activeClassesChartLines
|
||||
createActiveClassesChartLines = (lines, numDays) =>
|
||||
days = d3Utils.createContiguousDays(numDays)
|
||||
colorIndex = 0
|
||||
totalMax = 0
|
||||
for group, entries of groupDayMap
|
||||
data = []
|
||||
for day, count of entries
|
||||
data.push
|
||||
day: day
|
||||
value: count
|
||||
data.reverse()
|
||||
points = @createLineChartPoints(days, data)
|
||||
lines.push
|
||||
points: points
|
||||
description: group.replace('Active classes ', '')
|
||||
lineColor: @lineColors[colorIndex++ % @lineColors.length]
|
||||
strokeWidth: 1
|
||||
min: 0
|
||||
showYScale: group is 'Total'
|
||||
totalMax = _.max(points, 'y').y if group is 'Total'
|
||||
line.max = totalMax for line in lines
|
||||
|
||||
createActiveClassesChartLines(@activeClassesChartLines90, 90)
|
||||
createActiveClassesChartLines(@activeClassesChartLines365, 365)
|
||||
|
||||
updateActiveUsersChartData: ->
|
||||
# Create chart lines for the active user events returned by active_users in analytics_perday_handler
|
||||
@campaignDailyActiveUsersChartLines = []
|
||||
@campaignMonthlyActiveUsersChartLines = []
|
||||
@classroomDailyActiveUsersChartLines = []
|
||||
@classroomMonthlyActiveUsersChartLines = []
|
||||
@campaignDailyActiveUsersChartLines90 = []
|
||||
@campaignMonthlyActiveUsersChartLines90 = []
|
||||
@campaignDailyActiveUsersChartLines365 = []
|
||||
@campaignMonthlyActiveUsersChartLines365 = []
|
||||
@classroomDailyActiveUsersChartLines90 = []
|
||||
@classroomMonthlyActiveUsersChartLines90 = []
|
||||
@classroomDailyActiveUsersChartLines365 = []
|
||||
@classroomMonthlyActiveUsersChartLines365 = []
|
||||
return unless @activeUsers?.length
|
||||
days = d3Utils.createContiguousDays(90)
|
||||
|
||||
# Separate day/value arrays by event
|
||||
eventDataMap = {}
|
||||
|
|
@ -444,65 +456,33 @@ module.exports = class AnalyticsView extends RootView
|
|||
day: entry.day
|
||||
value: count
|
||||
|
||||
# Build chart lines for each event
|
||||
eventLineMap =
|
||||
'DAU campaign': {max: 0, colorIndex: 0}
|
||||
'MAU campaign': {max: 0, colorIndex: 0}
|
||||
'DAU classroom': {max: 0, colorIndex: 0}
|
||||
'MAU classroom': {max: 0, colorIndex: 0}
|
||||
for event, data of eventDataMap
|
||||
data.reverse()
|
||||
points = @createLineChartPoints(days, data)
|
||||
max = _.max(points, 'y').y
|
||||
if event.indexOf('DAU campaign') >= 0
|
||||
chartLines = @campaignDailyActiveUsersChartLines
|
||||
eventLineMap['DAU campaign'].max = Math.max(eventLineMap['DAU campaign'].max, max)
|
||||
lineColor = @lineColors[eventLineMap['DAU campaign'].colorIndex++ % @lineColors.length]
|
||||
else if event.indexOf('MAU campaign') >= 0
|
||||
chartLines = @campaignMonthlyActiveUsersChartLines
|
||||
eventLineMap['MAU campaign'].max = Math.max(eventLineMap['MAU campaign'].max, max)
|
||||
lineColor = @lineColors[eventLineMap['MAU campaign'].colorIndex++ % @lineColors.length]
|
||||
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
|
||||
createActiveUsersChartLines = (lines, numDays, eventPrefix) =>
|
||||
days = d3Utils.createContiguousDays(numDays)
|
||||
colorIndex = 0
|
||||
lineMax = 0
|
||||
showYScale = true
|
||||
for event, data of eventDataMap
|
||||
continue unless event.indexOf(eventPrefix) >= 0
|
||||
points = @createLineChartPoints(days, _.cloneDeep(data).reverse())
|
||||
lineMax = Math.max(_.max(points, 'y').y, lineMax)
|
||||
lines.push
|
||||
points: points
|
||||
description: event
|
||||
lineColor: @lineColors[colorIndex++ % @lineColors.length]
|
||||
strokeWidth: 1
|
||||
min: 0
|
||||
showYScale: showYScale
|
||||
showYScale = false
|
||||
line.max = lineMax for line in lines
|
||||
|
||||
# Update line Y scales and maxes
|
||||
showYScaleSet = false
|
||||
for line in @campaignDailyActiveUsersChartLines
|
||||
line.max = eventLineMap['DAU campaign'].max
|
||||
unless showYScaleSet
|
||||
line.showYScale = true
|
||||
showYScaleSet = true
|
||||
showYScaleSet = false
|
||||
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
|
||||
createActiveUsersChartLines(@campaignDailyActiveUsersChartLines90, 90, 'DAU campaign')
|
||||
createActiveUsersChartLines(@campaignMonthlyActiveUsersChartLines90, 90, 'MAU campaign')
|
||||
createActiveUsersChartLines(@classroomDailyActiveUsersChartLines90, 90, 'DAU classroom')
|
||||
createActiveUsersChartLines(@classroomMonthlyActiveUsersChartLines90, 90, 'MAU classroom')
|
||||
createActiveUsersChartLines(@campaignDailyActiveUsersChartLines365, 365, 'DAU campaign')
|
||||
createActiveUsersChartLines(@campaignMonthlyActiveUsersChartLines365, 365, 'MAU campaign')
|
||||
createActiveUsersChartLines(@classroomDailyActiveUsersChartLines365, 365, 'DAU classroom')
|
||||
createActiveUsersChartLines(@classroomMonthlyActiveUsersChartLines365, 365, 'MAU classroom')
|
||||
|
||||
updateCampaignVsClassroomActiveUsersChartData: ->
|
||||
@campaignVsClassroomMonthlyActiveUsersRecentChartLines = []
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue