Fixes #1010 - display only used channels in dashboard

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)

app/assets/javascripts/app/views/dashboard/stats/ticket_channel_distribution.jst.eco

@@ -6,15 +6,17 @@
         <%- @Icon('help') %>
       </div>
     </div>
-    <div class="stat-graphic">
-      <% for channel_name, channel of @StatsTicketChannelDistribution.channels: %>
-      <div class="stats-row email-channel">
-        <%- @Icon(channel.icon, 'stat-channel-icon') %>
+    <div class="stat-graphic" data-columns="<%- _.size(@StatsTicketChannelDistribution.channels) %>">
+      <% for id, channel of @StatsTicketChannelDistribution.channels: %>
+      <div class="stats-row">
+        <div title="<%- channel.sender %>">
+          <%- @Icon(channel.icon, 'stat-channel-icon') %>
+        </div>
         <div class="stat-bars">
-          <div class="stat-bar primary" style="height: <%- channel.inbound_in_percent %>%" title="<%- @Ti('Inbound') %>: <%- channel.inbound_in_percent %>% (<%- channel.inbound %>)"></div>
-          <div class="stat-bar secondary" style="height: <%- channel.outbound_in_percent %>%" title="<%- @Ti('Outbound') %>: <%- channel.outbound_in_percent %>% (<%- channel.outbound %>)"></div>
+          <div class="stat-bar stat-bar--inbound" style="height: <%- channel.inbound_in_percent %>%" title="<%- @Ti('Inbound') %>: <%- channel.inbound_in_percent %>% (<%- channel.inbound %>)"></div>
+          <div class="stat-bar stat-bar--outbound" style="height: <%- channel.outbound_in_percent %>%" title="<%- @Ti('Outbound') %>: <%- channel.outbound_in_percent %>% (<%- channel.outbound %>)"></div>
         </div>
-        <div class="stat-label"></div>
+        <div class="stat-detail"><%- channel.overal_percentage %>%</div>
       </div>
       <% end %>
     </div>

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;

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] = {