diff --git a/app/assets/javascripts/app/controllers/_dashboard/stats.js.coffee b/app/assets/javascripts/app/controllers/_dashboard/stats.js.coffee new file mode 100644 index 000000000..2d6f1580c --- /dev/null +++ b/app/assets/javascripts/app/controllers/_dashboard/stats.js.coffee @@ -0,0 +1,106 @@ +class App.DashboardStats extends App.Controller + constructor: -> + super + + stats_store = App.StatsStore.first() + if stats_store + @render(stats_store.data) + else + @render() + + # bind to rebuild view event + @bind('dashboard_stats_rebuild', @render) + + render: (data = {}) -> + if !data.StatsTicketWaitingTime + data.StatsTicketWaitingTime = + handling_time: 0 + average: 0 + if !data.StatsTicketEscalation + data.StatsTicketEscalation = + state: 'supergood' + own: 0 + total: 0 + if !data.StatsTicketChannelDistribution + data.StatsTicketChannelDistribution = + channels: + 1: + inbound: 0 + outbound: 0 + inbound_in_percent: 0 + outbound_in_percent: 0 + 2: + inbound: 0 + outbound: 0 + inbound_in_percent: 0 + outbound_in_percent: 0 + 3: + inbound: 0 + outbound: 0 + inbound_in_percent: 0 + outbound_in_percent: 0 + if !data.StatsTicketLoadMeasure + data.StatsTicketLoadMeasure = + state: 'supergood' + percent: 0 + own: 0 + total: 0 + average: 0 + if !data.StatsTicketInProcess + data.StatsTicketInProcess = + state: 'supergood' + percent: 0 + average_percent: 0 + if !data.StatsTicketReopen + data.StatsTicketReopen = + state: 'supergood' + percent: 0 + average_percent: 0 + + @html App.view('dashboard/stats')(data) + + if data.StatsTicketWaitingTime + @renderWidgetClockFace data.StatsTicketWaitingTime.handling_time + + renderWidgetClockFace: (time) => + canvas = @el.find 'canvas' + ctx = canvas.get(0).getContext '2d' + radius = 26 + + @el.find('.time.stat-widget .stat-amount').text time + + canvas.attr 'width', 2 * radius + canvas.attr 'height', 2 * radius + + time = 60 if time > 60 + + handlingTimeColors = + 5: '#38AE6A' # supergood + 10: '#A9AC41' # good + 15: '#FAAB00' # ok + 20: '#F6820B' # bad + 25: '#F35910' # superbad + + for handlingTime, timeColor of handlingTimeColors + if time <= handlingTime + backgroundColor = timeColor + break + + # 30% background + ctx.globalAlpha = 0.3 + ctx.fillStyle = backgroundColor + ctx.beginPath() + ctx.arc radius, radius, radius, 0, Math.PI * 2, true + ctx.closePath() + ctx.fill() + + # 100% pie piece + ctx.globalAlpha = 1 + + ctx.beginPath() + ctx.moveTo radius, radius + arcsector = Math.PI * 2 * time/60 + ctx.arc radius, radius, radius, -Math.PI/2, arcsector - Math.PI/2, false + ctx.lineTo radius, radius + ctx.closePath() + ctx.fill() diff --git a/app/assets/javascripts/app/controllers/dashboard.js.coffee b/app/assets/javascripts/app/controllers/dashboard.js.coffee index bd4d4359d..0ec7c24a2 100644 --- a/app/assets/javascripts/app/controllers/dashboard.js.coffee +++ b/app/assets/javascripts/app/controllers/dashboard.js.coffee @@ -7,7 +7,7 @@ class App.Dashboard extends App.Controller super if @isRole('Customer') - @navigate '#' + @navigate '#', true return # render page @@ -25,62 +25,21 @@ class App.Dashboard extends App.Controller isAdmin: @isRole('Admin') ) + new App.DashboardStats( + el: @$('.stat-widgets') + ) + new App.DashboardActivityStream( el: @$('.sidebar') limit: 25 ) - @renderWidgetClockFace 25 - clues: (e) => e.preventDefault() new App.FirstStepsClues( el: @el ) - renderWidgetClockFace: (time) => - canvas = @el.find 'canvas' - ctx = canvas.get(0).getContext '2d' - radius = 26 - - @el.find('.time.stat-widget .stat-amount').text time - - canvas.attr 'width', 2 * radius - canvas.attr 'height', 2 * radius - - time = 60 if time > 60 - - handlingTimeColors = - 5: '#38AE6A' # supergood - 10: '#A9AC41' # good - 15: '#FAAB00' # ok - 20: '#F6820B' # bad - 25: '#F35910' # superbad - - for handlingTime, timeColor of handlingTimeColors - if time <= handlingTime - backgroundColor = timeColor - break - - # 30% background - ctx.globalAlpha = 0.3 - ctx.fillStyle = backgroundColor - ctx.beginPath() - ctx.arc radius, radius, radius, 0, Math.PI * 2, true - ctx.closePath() - ctx.fill() - - # 100% pie piece - ctx.globalAlpha = 1 - - ctx.beginPath() - ctx.moveTo radius, radius - arcsector = Math.PI * 2 * time/60 - ctx.arc radius, radius, radius, -Math.PI/2, arcsector - Math.PI/2, false - ctx.lineTo radius, radius - ctx.closePath() - ctx.fill() - active: (state) => @activeState = state diff --git a/app/assets/javascripts/app/views/dashboard.jst.eco b/app/assets/javascripts/app/views/dashboard.jst.eco index d174faa93..4ed8ba43f 100644 --- a/app/assets/javascripts/app/views/dashboard.jst.eco +++ b/app/assets/javascripts/app/views/dashboard.jst.eco @@ -33,117 +33,7 @@ -
-
-
-

∅ Waiting time today

-
-
- - -
-
-
-
My handling time: 25 minutes
-
Average: 13%
-
-
-
-
-

Mood

-
- -
-
3% of my tickets escalated.
-
Average: 17%
-
-
-
-
-

Channel Distribution

-
- -
- -
-
-
-
-
26%
-
-
- -
-
-
-
-
24%
-
- - -
-
-
-
-
-

Status

-
-
- - - - - - -
- -
-
Tickets of my Group: 78 of 234
-
Average: 22%
-
-
-
-
-

Tickets in process

-
- -
-
74% are currently in process
-
Average: 62%
-
-
-
-
-

Reopening rate

-
- -
-
7% are being reopened
-
Average: 6%
-
-
-
+