codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-26 05:53:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update campaign editor analytics

Browse source 
Adjust level completion line graph stroke-weight based on daily started
count in campaign overview.
This commit is contained in:
Matt Lott 2015-01-20 16:04:02 -08:00
parent d51eddef29
commit 3c36d1cc06
1 changed files with 21 additions and 26 deletions

47
app/views/editor/campaign/CampaignAnalyticsModal.coffee
View file

@ -53,48 +53,43 @@ module.exports = class CampaignAnalyticsModal extends ModalView
days.push
day: day
rate: level['days'][day].finished / level['days'][day].started
count: level['days'][day].started
days.sort (a, b) -> a.day - b.day
data = []
for i in [0...days.length]
data.push
x: i
y: days[i].rate
c: days[i].count
@addLineGraph '#background' + level.level, data
addLineGraph: (containerSelector, lineData, lineColor='green', min=0, max=1.0) ->
# Add a line chart to the given container
# Adjust stroke-weight based on segment count: width 0.3 to 3.0 for counts roughly 100 to 10000
# TODO: Move this to a utility library
vis = d3.select(containerSelector)
width = $(containerSelector).width()
height = $(containerSelector).height()
xRange = d3.scale.linear().range([0, width]).domain([d3.min(lineData, (d) -> d.x), d3.max(lineData, (d) -> d.x)])
yRange = d3.scale.linear().range([height, 0]).domain([min, max])
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true)
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient('left')
.tickSubdivide(true)
vis.append('svg:g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
vis.append('svg:g')
.attr('class', 'y axis')
.attr('transform', 'translate(0,0)')
.call(yAxis)
lineFunc = d3.svg.line()
.x((d) -> xRange(d.x))
.y((d) -> yRange(d.y))
.interpolate('linear')
vis.append('svg:path')
.attr('d', lineFunc(lineData))
.attr('stroke', lineColor)
.attr('stroke-width', 1)
.attr('fill', 'none')
lines = []
for i in [0...lineData.length-1]
lines.push
x1: xRange(lineData[i].x)
y1: yRange(lineData[i].y)
x2: xRange(lineData[i + 1].x)
y2: yRange(lineData[i + 1].y)
strokeWidth: Math.min(3, Math.max(0.3, Math.log(lineData[i].c/10)/2))
vis.selectAll('.line')
.data(lines)
.enter()
.append("line")
.attr("x1", (d) -> d.x1)
.attr("y1", (d) -> d.y1)
.attr("x2", (d) -> d.x2)
.attr("y2", (d) -> d.y2)
.style("stroke-width", (d) -> d.strokeWidth)
.style("stroke", lineColor)
getCampaignAnalytics: (startDay, endDay) =>
if startDay?