codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-05-04 09:53:55 -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 days.push
day: day day: day
rate: level['days'][day].finished / level['days'][day].started rate: level['days'][day].finished / level['days'][day].started
count: level['days'][day].started
days.sort (a, b) -> a.day - b.day days.sort (a, b) -> a.day - b.day
data = [] data = []
for i in [0...days.length] for i in [0...days.length]
data.push data.push
x: i x: i
y: days[i].rate y: days[i].rate
c: days[i].count
@addLineGraph '#background' + level.level, data @addLineGraph '#background' + level.level, data
addLineGraph: (containerSelector, lineData, lineColor='green', min=0, max=1.0) -> addLineGraph: (containerSelector, lineData, lineColor='green', min=0, max=1.0) ->
# Add a line chart to the given container # 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 # TODO: Move this to a utility library
vis = d3.select(containerSelector) vis = d3.select(containerSelector)
width = $(containerSelector).width() width = $(containerSelector).width()
height = $(containerSelector).height() height = $(containerSelector).height()
xRange = d3.scale.linear().range([0, width]).domain([d3.min(lineData, (d) -> d.x), d3.max(lineData, (d) -> d.x)]) 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]) yRange = d3.scale.linear().range([height, 0]).domain([min, max])
xAxis = d3.svg.axis() lines = []
.scale(xRange) for i in [0...lineData.length-1]
.tickSize(5) lines.push
.tickSubdivide(true) x1: xRange(lineData[i].x)
yAxis = d3.svg.axis() y1: yRange(lineData[i].y)
.scale(yRange) x2: xRange(lineData[i + 1].x)
.tickSize(5) y2: yRange(lineData[i + 1].y)
.orient('left') strokeWidth: Math.min(3, Math.max(0.3, Math.log(lineData[i].c/10)/2))
.tickSubdivide(true) vis.selectAll('.line')
vis.append('svg:g') .data(lines)
.attr('class', 'x axis') .enter()
.attr('transform', 'translate(0,' + height + ')') .append("line")
.call(xAxis) .attr("x1", (d) -> d.x1)
vis.append('svg:g') .attr("y1", (d) -> d.y1)
.attr('class', 'y axis') .attr("x2", (d) -> d.x2)
.attr('transform', 'translate(0,0)') .attr("y2", (d) -> d.y2)
.call(yAxis) .style("stroke-width", (d) -> d.strokeWidth)
lineFunc = d3.svg.line() .style("stroke", lineColor)
.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')
getCampaignAnalytics: (startDay, endDay) => getCampaignAnalytics: (startDay, endDay) =>
if startDay? if startDay?