mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-26 22:13:32 -04:00
Add graph to sub counts admin page
This commit is contained in:
Matt Lott
parent
1dbb382318
commit
532e8133c6
4 changed files with 331 additions and 16 deletions
app
styles/admin
templates/admin
views/admin
server/payments
|
|
@ -1,19 +1,50 @@
|
|||
#admin-analytics-subscriptions-view
|
||||
|
||||
.total-count
|
||||
width: 33%
|
||||
.big-stat
|
||||
width: 25%
|
||||
float: left
|
||||
|
||||
.total-count
|
||||
color: green
|
||||
.remaining-count
|
||||
width: 33%
|
||||
float: left
|
||||
color: blue
|
||||
.cancelled-count
|
||||
width: 33%
|
||||
float: left
|
||||
color: red
|
||||
.churn-count
|
||||
color: orange
|
||||
|
||||
.count
|
||||
font-size: 50pt
|
||||
.description
|
||||
font-size: 8pt
|
||||
|
||||
.line-graph-label
|
||||
font-size: 10pt
|
||||
font-weight: normal
|
||||
.line-graph-container
|
||||
height: 500px
|
||||
width: 100%
|
||||
|
||||
// TODO: figure out why this is necessary
|
||||
margin-bottom: 100px
|
||||
|
||||
.x.axis
|
||||
font-size: 9pt
|
||||
path
|
||||
display: none
|
||||
.y.axis
|
||||
font-size: 9pt
|
||||
path
|
||||
display: none
|
||||
.key-line
|
||||
font-size: 9pt
|
||||
.key-text
|
||||
font-size: 9pt
|
||||
.graph-point-info-container
|
||||
display: none
|
||||
position: absolute
|
||||
padding: 10px
|
||||
border: 1px solid black
|
||||
z-index: 3
|
||||
background-color: blanchedalmond
|
||||
font-size: 10pt
|
||||
|
|
|
|||
|
|
@ -9,16 +9,32 @@ block content
|
|||
h1 Fetching subscriptions data...
|
||||
else
|
||||
div
|
||||
.total-count
|
||||
.big-stat.total-count
|
||||
div.description Total
|
||||
div.count= total
|
||||
.remaining-count
|
||||
.big-stat.remaining-count
|
||||
div.description Remaining
|
||||
div.count= total - cancelled
|
||||
.cancelled-count
|
||||
div.description cancelled
|
||||
.big-stat.cancelled-count
|
||||
div.description Cancelled
|
||||
div.count= cancelled
|
||||
.big-stat.churn-count
|
||||
div.description Monthly Churn
|
||||
div.count #{monthlyChurn.toFixed(2)}%
|
||||
|
||||
each graph in analytics.graphs
|
||||
.line-graph-container
|
||||
each line in graph.lines
|
||||
each point in line.points
|
||||
.graph-point-info-container(data-pointid="#{point.pointID}")
|
||||
div(style='font-weight:bold;') #{point.day}
|
||||
each value in point.values
|
||||
div #{value}
|
||||
|
||||
div *Stripe APIs do not return information about inactive subs.
|
||||
|
||||
br
|
||||
|
||||
table.table.table-condensed.concepts-table
|
||||
thead
|
||||
tr
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ RootView = require 'views/core/RootView'
|
|||
template = require 'templates/admin/analytics-subscriptions'
|
||||
RealTimeCollection = require 'collections/RealTimeCollection'
|
||||
|
||||
# TODO: Add revenue line
|
||||
# TODO: Add LTV line
|
||||
# TODO: Graphing code copied/mangled from campaign editor level view. OMG, DRY.
|
||||
|
||||
require 'vendor/d3'
|
||||
|
||||
module.exports = class AnalyticsSubscriptionsView extends RootView
|
||||
|
|
@ -16,16 +20,24 @@ module.exports = class AnalyticsSubscriptionsView extends RootView
|
|||
|
||||
getRenderData: ->
|
||||
context = super()
|
||||
context.analytics = @analytics
|
||||
context.subs = @subs ? []
|
||||
context.total = @total ? 0
|
||||
context.cancelled = @cancelled ? 0
|
||||
context.monthlyChurn = @monthlyChurn ? 0.0
|
||||
context
|
||||
|
||||
afterRender: ->
|
||||
super()
|
||||
@updateAnalyticsGraphs()
|
||||
|
||||
refreshData: ->
|
||||
return unless me.isAdmin()
|
||||
@analytics = graphs: []
|
||||
@subs = []
|
||||
@total = 0
|
||||
@cancelled = 0
|
||||
@monthlyChurn = 0.0
|
||||
onSuccess = (subs) =>
|
||||
subDayMap = {}
|
||||
for sub in subs
|
||||
|
|
@ -42,15 +54,270 @@ module.exports = class AnalyticsSubscriptionsView extends RootView
|
|||
day: day
|
||||
started: subDayMap[day]['start']
|
||||
cancelled: subDayMap[day]['cancel'] or 0
|
||||
@subs.sort (a, b) -> -a.day.localeCompare(b.day)
|
||||
|
||||
for i in [@subs.length - 1..0]
|
||||
@total += @subs[i].started
|
||||
@cancelled += @subs[i].cancelled
|
||||
@subs[i].total = @total
|
||||
@subs.sort (a, b) -> a.day.localeCompare(b.day)
|
||||
startedLastMonth = 0
|
||||
for sub, i in @subs
|
||||
@total += sub.started
|
||||
@cancelled += sub.cancelled
|
||||
sub.total = @total
|
||||
startedLastMonth += sub.started if @subs.length - i < 31
|
||||
@monthlyChurn = @cancelled / startedLastMonth * 100.0
|
||||
|
||||
@updateAnalyticsGraphData()
|
||||
@render()
|
||||
@supermodel.addRequestResource('subscriptions', {
|
||||
url: '/db/subscription/-/subscriptions'
|
||||
method: 'GET'
|
||||
success: onSuccess
|
||||
}, 0).load()
|
||||
|
||||
|
||||
updateAnalyticsGraphData: ->
|
||||
# console.log 'updateAnalyticsGraphData'
|
||||
# Build graphs based on available @analytics data
|
||||
# Currently only one graph
|
||||
@analytics.graphs = [graphID: 'total-subs', lines: []]
|
||||
|
||||
return unless @subs?.length > 0
|
||||
|
||||
# TODO: Where should this metadata live?
|
||||
# TODO: lineIDs assumed to be unique across graphs
|
||||
totalSubsID = 'total-subs'
|
||||
startedSubsID = 'started-subs'
|
||||
cancelledSubsID = 'cancelled-subs'
|
||||
lineMetadata = {}
|
||||
lineMetadata[totalSubsID] =
|
||||
description: 'Total Active Subscriptions'
|
||||
color: 'green'
|
||||
lineMetadata[startedSubsID] =
|
||||
description: 'New Subscriptions'
|
||||
color: 'blue'
|
||||
lineMetadata[cancelledSubsID] =
|
||||
description: 'Cancelled Subscriptions'
|
||||
color: 'red'
|
||||
|
||||
days = (sub.day for sub in @subs)
|
||||
if days.length > 0
|
||||
currentIndex = 0
|
||||
currentDay = days[currentIndex]
|
||||
currentDate = new Date(currentDay + "T00:00:00.000Z")
|
||||
lastDay = days[days.length - 1]
|
||||
while currentDay isnt lastDay
|
||||
days.splice currentIndex, 0, currentDay if days[currentIndex] isnt currentDay
|
||||
currentIndex++
|
||||
currentDate.setUTCDate(currentDate.getUTCDate() + 1)
|
||||
currentDay = currentDate.toISOString().substr(0, 10)
|
||||
|
||||
## Totals
|
||||
|
||||
# Build line data
|
||||
levelPoints = []
|
||||
for sub, i in @subs
|
||||
levelPoints.push
|
||||
x: i
|
||||
y: sub.total
|
||||
day: sub.day
|
||||
pointID: "#{totalSubsID}#{i}"
|
||||
values: []
|
||||
|
||||
# Ensure points for each day
|
||||
for day, i in days
|
||||
if levelPoints.length <= i or levelPoints[i].day isnt day
|
||||
prevY = if i > 0 then levelPoints[i - 1].y else 0.0
|
||||
levelPoints.splice i, 0,
|
||||
y: prevY
|
||||
day: day
|
||||
values: []
|
||||
levelPoints[i].x = i
|
||||
levelPoints[i].pointID = "#{totalSubsID}#{i}"
|
||||
|
||||
levelPoints.splice(0, levelPoints.length - 60) if levelPoints.length > 60
|
||||
|
||||
@analytics.graphs[0].lines.push
|
||||
lineID: totalSubsID
|
||||
enabled: true
|
||||
points: levelPoints
|
||||
description: lineMetadata[totalSubsID].description
|
||||
lineColor: lineMetadata[totalSubsID].color
|
||||
min: 0
|
||||
max: d3.max(@subs, (d) -> d.total)
|
||||
|
||||
## Started
|
||||
|
||||
# Build line data
|
||||
levelPoints = []
|
||||
for sub, i in @subs
|
||||
levelPoints.push
|
||||
x: i
|
||||
y: sub.started
|
||||
day: sub.day
|
||||
pointID: "#{startedSubsID}#{i}"
|
||||
values: []
|
||||
|
||||
# Ensure points for each day
|
||||
for day, i in days
|
||||
if levelPoints.length <= i or levelPoints[i].day isnt day
|
||||
prevY = if i > 0 then levelPoints[i - 1].y else 0.0
|
||||
levelPoints.splice i, 0,
|
||||
y: prevY
|
||||
day: day
|
||||
values: []
|
||||
levelPoints[i].x = i
|
||||
levelPoints[i].pointID = "#{startedSubsID}#{i}"
|
||||
|
||||
levelPoints.splice(0, levelPoints.length - 60) if levelPoints.length > 60
|
||||
|
||||
@analytics.graphs[0].lines.push
|
||||
lineID: startedSubsID
|
||||
enabled: true
|
||||
points: levelPoints
|
||||
description: lineMetadata[startedSubsID].description
|
||||
lineColor: lineMetadata[startedSubsID].color
|
||||
min: 0
|
||||
max: d3.max(@subs, (d) -> d.started)
|
||||
|
||||
## Cancelled
|
||||
|
||||
# Build line data
|
||||
levelPoints = []
|
||||
for sub, i in @subs
|
||||
levelPoints.push
|
||||
x: i
|
||||
y: sub.cancelled
|
||||
day: sub.day
|
||||
pointID: "#{cancelledSubsID}#{i}"
|
||||
values: []
|
||||
|
||||
# Ensure points for each day
|
||||
for day, i in days
|
||||
if levelPoints.length <= i or levelPoints[i].day isnt day
|
||||
prevY = if i > 0 then levelPoints[i - 1].y else 0.0
|
||||
levelPoints.splice i, 0,
|
||||
y: prevY
|
||||
day: day
|
||||
values: []
|
||||
levelPoints[i].x = i
|
||||
levelPoints[i].pointID = "#{cancelledSubsID}#{i}"
|
||||
|
||||
levelPoints.splice(0, levelPoints.length - 60) if levelPoints.length > 60
|
||||
|
||||
@analytics.graphs[0].lines.push
|
||||
lineID: cancelledSubsID
|
||||
enabled: true
|
||||
points: levelPoints
|
||||
description: lineMetadata[cancelledSubsID].description
|
||||
lineColor: lineMetadata[cancelledSubsID].color
|
||||
min: 0
|
||||
max: d3.max(@subs, (d) -> d.started)
|
||||
|
||||
updateAnalyticsGraphs: ->
|
||||
# Build d3 graphs
|
||||
return unless @analytics?.graphs?.length > 0
|
||||
containerSelector = '.line-graph-container'
|
||||
# console.log 'updateAnalyticsGraphs', containerSelector, @analytics.graphs
|
||||
|
||||
margin = 20
|
||||
keyHeight = 20
|
||||
xAxisHeight = 20
|
||||
yAxisWidth = 40
|
||||
containerWidth = $(containerSelector).width()
|
||||
containerHeight = $(containerSelector).height()
|
||||
|
||||
for graph in @analytics.graphs
|
||||
graphLineCount = _.reduce graph.lines, ((sum, item) -> if item.enabled then sum + 1 else sum), 0
|
||||
svg = d3.select(containerSelector).append("svg")
|
||||
.attr("width", containerWidth)
|
||||
.attr("height", containerHeight)
|
||||
width = containerWidth - margin * 2 - yAxisWidth * graphLineCount
|
||||
height = containerHeight - margin * 2 - xAxisHeight - keyHeight * graphLineCount
|
||||
currentLine = 0
|
||||
for line in graph.lines
|
||||
continue unless line.enabled
|
||||
xRange = d3.scale.linear().range([0, width]).domain([d3.min(line.points, (d) -> d.x), d3.max(line.points, (d) -> d.x)])
|
||||
yRange = d3.scale.linear().range([height, 0]).domain([line.min, line.max])
|
||||
|
||||
# x-Axis and guideline once
|
||||
if currentLine is 0
|
||||
startDay = new Date(line.points[0].day)
|
||||
endDay = new Date(line.points[line.points.length - 1].day)
|
||||
xAxisRange = d3.time.scale()
|
||||
.domain([startDay, endDay])
|
||||
.range([0, width])
|
||||
xAxis = d3.svg.axis()
|
||||
.scale(xAxisRange)
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.call(xAxis)
|
||||
.selectAll("text")
|
||||
.attr("dy", ".35em")
|
||||
.attr("transform", "translate(" + (margin + yAxisWidth * (graphLineCount - 1)) + "," + (height + margin) + ")")
|
||||
.style("text-anchor", "start")
|
||||
|
||||
# Horizontal guidelines
|
||||
# svg.selectAll(".line")
|
||||
# .data([10, 30, 50, 70, 90])
|
||||
# .enter()
|
||||
# .append("line")
|
||||
# .attr("x1", margin + yAxisWidth * graphLineCount)
|
||||
# .attr("y1", (d) -> margin + yRange(d))
|
||||
# .attr("x2", margin + yAxisWidth * graphLineCount + width)
|
||||
# .attr("y2", (d) -> margin + yRange(d))
|
||||
# .attr("stroke", line.lineColor)
|
||||
# .style("opacity", "0.5")
|
||||
|
||||
# y-Axis
|
||||
yAxisRange = d3.scale.linear().range([height, 0]).domain([line.min, line.max])
|
||||
yAxis = d3.svg.axis()
|
||||
.scale(yRange)
|
||||
.orient("left")
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.attr("transform", "translate(" + (margin + yAxisWidth * currentLine) + "," + margin + ")")
|
||||
.style("color", line.lineColor)
|
||||
.call(yAxis)
|
||||
.selectAll("text")
|
||||
.attr("y", 0)
|
||||
.attr("x", 0)
|
||||
.attr("fill", line.lineColor)
|
||||
.style("text-anchor", "start")
|
||||
|
||||
# Key
|
||||
svg.append("line")
|
||||
.attr("x1", margin)
|
||||
.attr("y1", margin + height + xAxisHeight + keyHeight * currentLine + keyHeight / 2)
|
||||
.attr("x2", margin + 40)
|
||||
.attr("y2", margin + height + xAxisHeight + keyHeight * currentLine + keyHeight / 2)
|
||||
.attr("stroke", line.lineColor)
|
||||
.attr("class", "key-line")
|
||||
svg.append("text")
|
||||
.attr("x", margin + 40 + 10)
|
||||
.attr("y", margin + height + xAxisHeight + keyHeight * currentLine + (keyHeight + 10) / 2)
|
||||
.attr("fill", line.lineColor)
|
||||
.attr("class", "key-text")
|
||||
.text(line.description)
|
||||
|
||||
# Path and points
|
||||
svg.selectAll(".circle")
|
||||
.data(line.points)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("transform", "translate(" + (margin + yAxisWidth * graphLineCount) + "," + margin + ")")
|
||||
.attr("cx", (d) -> xRange(d.x))
|
||||
.attr("cy", (d) -> yRange(d.y))
|
||||
.attr("r", 2)
|
||||
.attr("fill", line.lineColor)
|
||||
.attr("stroke-width", 1)
|
||||
.attr("class", "graph-point")
|
||||
.attr("data-pointid", (d) -> "#{line.lineID}#{d.x}")
|
||||
d3line = d3.svg.line()
|
||||
.x((d) -> xRange(d.x))
|
||||
.y((d) -> yRange(d.y))
|
||||
.interpolate("linear")
|
||||
svg.append("path")
|
||||
.attr("d", d3line(line.points))
|
||||
.attr("transform", "translate(" + (margin + yAxisWidth * graphLineCount) + "," + margin + ")")
|
||||
.style("stroke-width", 1)
|
||||
.style("stroke", line.lineColor)
|
||||
.style("fill", "none")
|
||||
currentLine++
|
||||
|
|
|
|||
|
|
@ -37,8 +37,9 @@ class SubscriptionHandler extends Handler
|
|||
|
||||
return @sendForbiddenError(res) unless req.user and req.user.isAdmin()
|
||||
|
||||
@subs ?= []
|
||||
# @subs ?= []
|
||||
# return @sendSuccess(res, @subs) unless _.isEmpty(@subs)
|
||||
@subs = []
|
||||
|
||||
customersProcessed = 0
|
||||
nextBatch = (starting_after, done) =>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue