diff --git a/app/assets/javascripts/app/controllers/_dashboard/stats/ticket_channel_distribution.coffee b/app/assets/javascripts/app/controllers/_dashboard/stats/ticket_channel_distribution.coffee index 8ffceb062..105ba213b 100644 --- a/app/assets/javascripts/app/controllers/_dashboard/stats/ticket_channel_distribution.coffee +++ b/app/assets/javascripts/app/controllers/_dashboard/stats/ticket_channel_distribution.coffee @@ -15,21 +15,26 @@ class Stats extends App.Controller data.StatsTicketChannelDistribution = channels: 1: - inbound: 1 - outbound: 0 - inbound_in_percent: 0 + icon: 'email' + sender: 'email' + 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: 2 - outbound: 0 - inbound_in_percent: 0 + icon: 'phone' + sender: 'phone' + inbound: 0 + outbound: 0 + inbound_in_percent: 0 outbound_in_percent: 0 + totalTickets = _.reduce data.StatsTicketChannelDistribution.channels, ((memo, channel) -> memo + channel.inbound + channel.outbound), 0 + totalChannels = _.size data.StatsTicketChannelDistribution.channels + + for id, channel of data.StatsTicketChannelDistribution.channels + channel.overal_percentage = Math.round((channel.inbound + channel.outbound) / totalTickets * 100) + data.StatsTicketChannelDistribution.description = 'How many of your tickets are coming from email, phone, Twitter, or Facebook? (Shows percentages for both inbound and outbound tickets.)' content = App.view('dashboard/stats/ticket_channel_distribution')(data) diff --git a/app/assets/javascripts/app/views/dashboard/stats/ticket_channel_distribution.jst.eco b/app/assets/javascripts/app/views/dashboard/stats/ticket_channel_distribution.jst.eco index 7567746f6..92efdd2de 100644 --- a/app/assets/javascripts/app/views/dashboard/stats/ticket_channel_distribution.jst.eco +++ b/app/assets/javascripts/app/views/dashboard/stats/ticket_channel_distribution.jst.eco @@ -6,15 +6,17 @@ <%- @Icon('help') %> -
- <% for channel_name, channel of @StatsTicketChannelDistribution.channels: %> -
- <%- @Icon(channel.icon, 'stat-channel-icon') %> -
-
-
+
+ <% for id, channel of @StatsTicketChannelDistribution.channels: %> +
+
+ <%- @Icon(channel.icon, 'stat-channel-icon') %>
-
+
+
+
+
+
<%- channel.overal_percentage %>%
<% end %>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 5b12a7893..6bcb25d58 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -4982,7 +4982,7 @@ footer { .stat-widget { height: 200px; - padding: 13px; + padding: 10px 10px 8px; text-align: center; line-height: 20px; } @@ -5018,12 +5018,12 @@ footer { cursor: help; } - .stat-widget .stat-label { + .stat-label { color: #444a4f; @extend .u-textTruncate; } - .stat-widget .stat-detail { + .stat-detail { color: #b4b7b9; @extend .u-textTruncate; } @@ -5060,11 +5060,15 @@ footer { .stats-row { padding: 8px 0 7px; - margin-bottom: -7px; border-radius: 3px; display: flex; flex-direction: column; align-items: center; + flex: 0 1 38px; + + .icon { + display: block; + } } .stats-row:hover { @@ -5072,28 +5076,30 @@ footer { } .stats-row .stat-bars { - height: 73px; - margin: 16px 0 15px; - padding: 2px 12px; + flex: 1; + margin: 10px 0 13px; + padding: 2px 5px; width: 100%; background: linear-gradient(to top, #f2f2f3, #f2f2f3 1px, transparent 1px); background-position: center bottom; background-size: 100% 12px; display: flex; align-items: flex-end; + justify-content: center; } .stat-bars .stat-bar { border-radius: 5px; - width: 10px; + max-width: 10px; + flex: 1; color: #a9bcc4; background: #a9bcc4; - } - .stat-widget .secondary { - opacity: .38; - color: #a9bcc4; - background: #a9bcc4; + &--outbound { + opacity: .38; + color: #a9bcc4; + background: #a9bcc4; + } } .stat-legend { @@ -5118,6 +5124,17 @@ footer { display: inline-block; } +.ticket_channel_distribution { + .stat-graphic { + align-items: stretch; + } + + .stats-row { + margin-bottom: -4px; + position: relative; + } +} + .frequency.stat-widget { .stat-bars { margin-top: 0; diff --git a/lib/stats/ticket_channel_distribution.rb b/lib/stats/ticket_channel_distribution.rb index 4eafffce2..7fb264bf3 100644 --- a/lib/stats/ticket_channel_distribution.rb +++ b/lib/stats/ticket_channel_distribution.rb @@ -10,7 +10,7 @@ class Stats::TicketChannelDistribution # get users groups group_ids = user.group_ids_access('full') - # get channels + # set default channels channels = [ { sender: 'email', @@ -20,19 +20,65 @@ class Stats::TicketChannelDistribution sender: 'phone', icon: 'phone', }, - { - sender: 'twitter', - icon: 'twitter', - }, - { - sender: 'facebook', - icon: 'facebook', - }, ] + if Setting.get('customer_ticket_create') + channels.push( + { + sender: 'web', + icon: 'web', + } + ) + end + + if Setting.get('chat') + channels.push( + { + sender: 'chat', + icon: 'chat', + } + ) + end + + if Channel.where(area: 'Sms::Account').exists? + channels.push( + { + sender: 'sms', + icon: 'sms', + } + ) + end + + if Channel.where(area: 'Twitter::Account').exists? + channels.push( + { + sender: 'twitter', + icon: 'twitter', + } + ) + end + + if Channel.where(area: 'Facebook::Account').exists? + channels.push( + { + sender: 'facebook', + icon: 'facebook', + } + ) + end + + if Channel.where(area: 'Telegram::Account').exists? + channels.push( + { + sender: 'telegram', + icon: 'telegram', + } + ) + end + # calculate - result = {} - total_in = 0 + result = {} + total_in = 0 total_out = 0 channels.each do |channel| result[channel[:sender].to_sym] = {