Update campaign editor analytics

Add playtime bar graphs.

app/styles/editor/campaign/campaign-analytics-modal.sass

@@ -18,3 +18,12 @@
       width: 100%
       left: 0px
       top: 0px
+  .level-playtime-container
+    position: relative
+    .level-playtime-background
+      position: absolute
+      height: 100%
+      left: 0px
+      top: 0px
+      background-color: green
+      opacity: 0.25

app/templates/editor/campaign/campaign-analytics-modal.jade

@@ -29,24 +29,37 @@ block modal-body-content
             td= campaignCompletions.levels[i].started
             td= campaignCompletions.levels[i].finished
             td= campaignCompletions.levels[i].dropped
-            if campaignCompletions.top3DropPercentage && campaignCompletions.top3DropPercentage.indexOf(campaignCompletions.levels[i].level) >= 0
+            if campaignCompletions.levels[i].dropPercentage
-              td(style='background-color:pink;')= td= campaignCompletions.levels[i].dropPercentage
+              if campaignCompletions.top3DropPercentage && campaignCompletions.top3DropPercentage.indexOf(campaignCompletions.levels[i].level) >= 0
+                td(style='background-color:pink;')= campaignCompletions.levels[i].dropPercentage.toFixed(2)
+              else
+                td= campaignCompletions.levels[i].dropPercentage.toFixed(2)
             else
-              td= campaignCompletions.levels[i].dropPercentage
+              td
-            td= campaignCompletions.levels[i].averagePlaytime
+            if campaignCompletions.levels[i].averagePlaytime
-            if campaignCompletions.top3DropPerSecond && campaignCompletions.top3DropPerSecond.indexOf(campaignCompletions.levels[i].level) >= 0
+              td.level-playtime-container= campaignCompletions.levels[i].averagePlaytime.toFixed(2)
-              td(style='background-color:pink;')= td= campaignCompletions.levels[i].droppedPerSecond
+                span.level-playtime-background(style="width:#{campaignCompletions.levels[i].playtimePercentage || 0}%;")
             else
-              td= campaignCompletions.levels[i].droppedPerSecond
+              td
-            if campaignCompletions.top3 && campaignCompletions.top3.indexOf(campaignCompletions.levels[i].level) >= 0
+            if campaignCompletions.levels[i].droppedPerSecond
-              td.level-completion-container(style='background-color:lightblue;')= campaignCompletions.levels[i].completionRate
+              if campaignCompletions.top3DropPerSecond && campaignCompletions.top3DropPerSecond.indexOf(campaignCompletions.levels[i].level) >= 0
-                svg.level-completion-background(id="background#{campaignCompletions.levels[i].level}")
+                td(style='background-color:pink;')= campaignCompletions.levels[i].droppedPerSecond.toFixed(2)
-            else if campaignCompletions.bottom3 && campaignCompletions.bottom3.indexOf(campaignCompletions.levels[i].level) >= 0
+              else
-              td.level-completion-container(style='background-color:pink;')= campaignCompletions.levels[i].completionRate
+                td= campaignCompletions.levels[i].droppedPerSecond.toFixed(2)
-                svg.level-completion-background(id="background#{campaignCompletions.levels[i].level}")
             else
-              td.level-completion-container= campaignCompletions.levels[i].completionRate
+              td
-                svg.level-completion-background(id="background#{campaignCompletions.levels[i].level}")
+            if campaignCompletions.levels[i].completionRate
+              if campaignCompletions.top3 && campaignCompletions.top3.indexOf(campaignCompletions.levels[i].level) >= 0
+                td.level-completion-container(style='background-color:lightblue;')= campaignCompletions.levels[i].completionRate.toFixed(2)
+                  svg.level-completion-background(id="background#{campaignCompletions.levels[i].level}")
+              else if campaignCompletions.bottom3 && campaignCompletions.bottom3.indexOf(campaignCompletions.levels[i].level) >= 0
+                td.level-completion-container(style='background-color:pink;')= campaignCompletions.levels[i].completionRate.toFixed(2)
+                  svg.level-completion-background(id="background#{campaignCompletions.levels[i].level}")
+              else
+                td.level-completion-container= campaignCompletions.levels[i].completionRate.toFixed(2)
+                  svg.level-completion-background(id="background#{campaignCompletions.levels[i].level}")
+            else
+              td
   else
     div Loading...
 

app/views/editor/campaign/CampaignAnalyticsModal.coffee

@@ -121,6 +121,7 @@ module.exports = class CampaignAnalyticsModal extends ModalView
       return if @destroyed
       # console.log 'getCampaignAveragePlaytimes success', data
       levelAverages = {}
+      maxPlaytime = 0
       for item in data
         levelAverages[item.level] ?= []
         levelAverages[item.level].push item.average
@@ -128,12 +129,18 @@ module.exports = class CampaignAnalyticsModal extends ModalView
         if levelAverages[level.level]
           if levelAverages[level.level].length > 0
             total = _.reduce levelAverages[level.level], ((sum, num) -> sum + num)
-            level.averagePlaytime = (total / levelAverages[level.level].length).toFixed(2)
+            level.averagePlaytime = total / levelAverages[level.level].length
+            maxPlaytime = level.averagePlaytime if maxPlaytime < level.averagePlaytime
             if level.averagePlaytime > 0 and level.dropped > 0
-              level.droppedPerSecond = (level.dropped / level.averagePlaytime).toFixed(2)
+              level.droppedPerSecond = level.dropped / level.averagePlaytime
           else
             level.averagePlaytime = 0.0
-            
+
+      addPlaytimePercentage = (item) ->
+        item.playtimePercentage = Math.round(item.averagePlaytime / maxPlaytime * 100.0) unless maxPlaytime is 0
+        item
+      @campaignCompletions.levels = _.map @campaignCompletions.levels, addPlaytimePercentage, @
+
       sortedLevels = _.cloneDeep @campaignCompletions.levels
       sortedLevels = _.filter sortedLevels, ((a) -> a.droppedPerSecond > 0), @
       sortedLevels.sort (a, b) -> b.droppedPerSecond - a.droppedPerSecond
@@ -158,7 +165,7 @@ module.exports = class CampaignAnalyticsModal extends ModalView
       countCompletions = (item) ->
         item.started = _.reduce item.days, ((result, current) -> result + current.started), 0
         item.finished = _.reduce item.days, ((result, current) -> result + current.finished), 0
-        item.completionRate = if item.started > 0 then (item.finished / item.started * 100).toFixed(2) else 0.0
+        item.completionRate = if item.started > 0 then item.finished / item.started * 100 else 0.0
         item
       addUserRemaining = (item) ->
         item.usersRemaining = Math.round(item.started / maxStarted * 100.0) unless maxStarted is 0
@@ -200,7 +207,7 @@ module.exports = class CampaignAnalyticsModal extends ModalView
         levelDrops[item.level] ?= item.dropped
       for level in @campaignCompletions.levels
         level.dropped = levelDrops[level.level] ? 0
-        level.dropPercentage = (level.dropped / level.started * 100).toFixed(2) if level.started > 0
+        level.dropPercentage = if level.started > 0 then level.dropped / level.started * 100 else 0.0
 
       sortedLevels = _.cloneDeep @campaignCompletions.levels
       sortedLevels = _.filter sortedLevels, ((a) -> a.dropPercentage > 0), @