refactor(trafficChart): moving elements by color

src/app/pages/dashboard/dashboard.html

@@ -1,13 +1,13 @@
 <dashboard-pie-chart></dashboard-pie-chart>
 
 <div class="row">
-  <div class="col-lg-7 col-md-12 col-sm-12"
+  <div class="col-lg-6 col-md-12 col-sm-12"
        ba-panel
        ba-panel-title="Acquisition Channels"
        ba-panel-class="medium-panel traffic-panel">
     <traffic-chart></traffic-chart>
   </div>
-  <div class="col-lg-5 col-md-12 col-sm-12"
+  <div class="col-lg-6 col-md-12 col-sm-12"
        ba-panel
        ba-panel-title="Users by Country"
        ba-panel-class="medium-panel">

src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js

@@ -25,14 +25,14 @@
       },
       {
         value: 1000,
-        color: layoutColors.info,
-        highlight: layoutColors.infoBg,
+        color: layoutColors.success,
+        highlight: layoutColors.successBg,
         label: 'Direct Traffic'
       },
       {
         value: 1200,
-        color: layoutColors.success,
-        highlight: layoutColors.successBg,
+        color: layoutColors.info,
+        highlight: layoutColors.infoBg,
         label: 'Referral Traffic'
       },
       {

src/app/pages/dashboard/trafficChart/trafficChart.html

@@ -14,39 +14,40 @@
 
   <div class="channels-info">
     <div>
+
       <div class="channels-info-item">
-        <div class="legend-color info"></div>
-        <p>Direct Traffic<span class="channel-number">+70%</span></p>
+        <div class="legend-color default"></div>
+        <p>Ad Campaigns<span class="channel-number">+87%</span></p>
         <div class="progress progress-sm channel-progress">
           <div class="progress-bar " role="progressbar"
-               aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
+               aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
           </div>
         </div>
       </div>
 
       <div class="channels-info-item">
-        <div class="legend-color primary"></div>
-        <p>Search engines<span class="channel-number">+22%</span></p>
+        <div class="legend-color warning"></div>
+        <p>Ohter<span class="channel-number">+17%</span></p>
         <div class="progress progress-sm channel-progress">
           <div class="progress-bar " role="progressbar"
-               aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
+               aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
           </div>
         </div>
       </div>
 
       <div class="channels-info-item">
-        <div class="legend-color default"></div>
-        <p>Ad Campaigns<span class="channel-number">+87%</span></p>
+        <div class="legend-color info"></div>
+        <p>Referral Traffic<span class="channel-number">+70%</span></p>
         <div class="progress progress-sm channel-progress">
           <div class="progress-bar " role="progressbar"
-               aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
+               aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
           </div>
         </div>
       </div>
 
       <div class="channels-info-item">
         <div class="legend-color success"></div>
-        <p>Referral<span class="channel-number">+38%</span></p>
+        <p>Direct Traffic<span class="channel-number">+38%</span></p>
         <div class="progress progress-sm channel-progress">
           <div class="progress-bar " role="progressbar"
                aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%">
@@ -55,14 +56,17 @@
       </div>
 
       <div class="channels-info-item">
-        <div class="legend-color warning"></div>
-        <p>Ohter<span class="channel-number">+17%</span></p>
+        <div class="legend-color primary"></div>
+        <p>Search engines<span class="channel-number">+22%</span></p>
         <div class="progress progress-sm channel-progress">
           <div class="progress-bar " role="progressbar"
-               aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
+               aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
           </div>
         </div>
       </div>
+
+
+
     </div>
   </div>
 

src/sass/theme/dashboard/_trafficChart.scss

@@ -193,7 +193,7 @@
 }
 
 @media (max-width: $resM) {
-  .channels-info{
+  div.channels-info{
     display: block;
     width: calc(100% - 88px);
     margin-top: -65px;
@@ -211,6 +211,21 @@
     left: calc(50% - 90px);
   }
 }
+
+@media (max-width: 1465px) and (min-width: 1199px){
+  .channels-info{
+    display: none;
+  }
+  .traffic-chart{
+    position: inherit;
+    float: none;
+    margin: 0 auto;
+  }
+  .chart-bg{
+    left: calc(50% - 90px);
+  }
+}
+
 body.badmin-transparent{
   .traffic-chart canvas{
     border: 10px solid rgba(0,0,0,0.35);