@kigi/components 1.41.0 → 1.42.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.41.0",
+  "version": "1.42.0-alpha.2",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {

package/src/components/mbg-average-customer-time/mbg-average-customer-time.html

@@ -1,6 +1,7 @@
 <div class="average-customer-time-wrapper">
    <figure class="highcharts-figure">
-      <div class="description-container-dash">
+      <div class="description-container-dash"
+           ng-show="$ctrl.percentagesReturnCustomerTime.length">
          <div class="mbg-h-c-tone-s-icon-dash"
               ng-click="$ctrl.toggleShowValuesReturnCustomer(false)">
             <i class="fa fa-lock lock-dash-store"
@@ -16,6 +17,11 @@
                class="far fa-eye-slash eye-board-target"></i>
          </div>
       </div>
-      <div id="container"></div>
+      <div class="chart-container"
+           id="container">
+      </div>
+      <div class="line-pay"
+           id="line"></div>
    </figure>
+
 </div>

package/src/components/mbg-average-customer-time/mbg-average-customer-time.scss

@@ -4,16 +4,19 @@
 .custom-title-container{
   .custom-title{
     position: relative;
-    left: -20px;
   }
 }
+
   .line-pay {
-    width: 100%;
     background: #737373;
     height: 1px;
     opacity: 0.3;
-
+    position: relative;
+    top: -357px;
+    left: 34px;
+    width: 100%;
   }
+
   #container {
     border-radius: 10px;
     background: #FFF;
@@ -24,13 +27,13 @@
     justify-content: center;
     align-items: center;
   }
+
   .description-container-dash {
     color: var(--titleColor);
     display: flex;
     justify-content: end;
     position: relative;
     top: 22px;
-    right: 12px;
     z-index: 9999;
 
     .mbg-h-c-tone-s-icon-dash {
@@ -43,10 +46,15 @@
 
 @media screen and (max-width: 1920px){
   .highcharts-figure {
-
+    .custom-title-container{
+      .custom-title{
+        position: relative;
+        left: 4px;
+      }
+    }
     .line-pay {
       position: relative;
-      left: -20px;
+      left: 30px;
       width: 480px;
     }
     #container {
@@ -65,7 +73,7 @@
   .highcharts-figure {
     .line-pay {
       position: relative;
-      left: -20px;
+      left: 30px;
       width: 418px;
     }
     #container {
@@ -87,7 +95,7 @@
     }
     .line-pay {
       position: relative;
-      left: -20px;
+      left: 30px;
       width: 366px;
     }
     #container {
@@ -110,7 +118,7 @@
     
     .line-pay {
       position: relative;
-      left: -20px;
+      left: 30px;
       width: 332px;
     }
     #container {
@@ -134,7 +142,7 @@
     
     .line-pay {
       position: relative;
-      left: -20px;
+      left: 30px;
       width: 450px;
     }
     #container {
@@ -158,7 +166,7 @@
     
     .line-pay {
       position: relative;
-      left: -20px;
+      left: 30px;
       width: 450px;
     }
     #container {
@@ -182,7 +190,7 @@
     
     .line-pay {
       position: relative;
-      left: -20px;
+      left: 30px;
       width: 306px;
     }
     #container {

package/src/components/mbg-average-customer-time/mbg-average-customer-time.ts

@@ -14,6 +14,7 @@ class MbgAverageCustomerTimeController {
   private allowedCallBack: Function
   private isBlockValuesDashboarReturnCustomer
   private hideValue: boolean = false
+  private boundAdjustContainerWidth
 
   constructor(
     public $scope,
@@ -36,16 +37,68 @@ class MbgAverageCustomerTimeController {
       },
       true,
     )
+
+    const zoomLevel = String(window.devicePixelRatio)
+    const hasZoomLevelTwo = zoomLevel.includes(String(1.6))
+    const hasZoomLevelOne = zoomLevel.includes(String(0.8))
+
+    if ((hasZoomLevelTwo && Number(zoomLevel) < 2) || (hasZoomLevelOne && Number(zoomLevel) < 1)) {
+      this.adjustContainerWidth(true)
+    }
+
+    this.boundAdjustContainerWidth = this.adjustContainerWidth.bind(this)
+    window.addEventListener('resize', this.boundAdjustContainerWidth)
+  }
+
+  $onDestroy() {
+    window.removeEventListener('resize', this.boundAdjustContainerWidth)
+  }
+
+  adjustContainerWidth(onInit) {
+    const zoomLevel = window.devicePixelRatio
+
+    if (zoomLevel < 2 || zoomLevel < 1) {
+      const container = document.getElementById('line')
+      if (container) {
+        container.style.width = `94%`
+      }
+    }
   }
 
   configPanelPercentagesReturnCustomerTime() {
-    const colors = ['#F24A57', '#45BDBF', '#482F72', '#CDDA34', '#F68E2C']
+    const colors = ['#696EF0', '#45C413', '#F8D658', '#F5AE3C', '#FF8A22', '#FF4641']
     const hasPermissionPorcentages = !this.isPermissionAverageCustomerReturnTime || this.hideValue
-    const transformedData = this.percentagesReturnCustomerTime.map((item, index) => ({
-      name: `${item.days} dias`,
-      y: parseFloat(item.percentage) > 0 ? parseFloat(item.percentage) : 0,
-      color: colors[index],
-    }))
+    const transformedData = this.percentagesReturnCustomerTime.map((item, index) => {
+      let daysLabel = ''
+      switch (index) {
+        case 0:
+          daysLabel = '0 a 30'
+          break
+        case 1:
+          daysLabel = '31 a 60'
+          break
+        case 2:
+          daysLabel = '61 a 90'
+          break
+        case 3:
+          daysLabel = '91 a 180'
+          break
+        case 4:
+          daysLabel = '181 a 365'
+          break
+        case 5:
+          daysLabel = '+365'
+          break
+      }
+
+      return {
+        name: `${item.days}`,
+        days: daysLabel,
+        y: parseFloat(item.percentage) > 0 ? parseFloat(item.percentage) : 0,
+        color: colors[index],
+        quantity: item.quantity,
+      }
+    })
 
     Highcharts.chart('container', {
       chart: {
@@ -87,10 +140,10 @@ class MbgAverageCustomerTimeController {
         },
       },
       title: {
+        align: 'left',
         text: `
           <div class="custom-title-container">
             <p class="custom-title">Tempo médio de retorno do cliente</p>
-            <div class="line-pay"></div>
           </div>`,
         useHTML: true,
         style: {
@@ -102,7 +155,7 @@ class MbgAverageCustomerTimeController {
 
       legend: {
         layout: 'horizontal',
-        itemDistance: 5,
+        itemDistance: 10,
       },
       plotOptions: {
         pie: {
@@ -111,12 +164,11 @@ class MbgAverageCustomerTimeController {
           borderRadius: 8,
           dataLabels: {
             enabled: !hasPermissionPorcentages,
-
             formatter: function () {
               if (!hasPermissionPorcentages) {
                 return `<span style="color:#7B7B7B">${
-                  this.point.name
-                }</span><br><span style="font-weight:bold; color:#333">(${this.y.toFixed(
+                  this.point.days
+                } dias</span><br><span style="font-weight:bold; color:#333">(${this.y.toFixed(
                   2,
                 )}%)</span>`
               }
@@ -134,14 +186,16 @@ class MbgAverageCustomerTimeController {
           if (hasPermissionPorcentages) {
             return 'Sem permissão para visualizar'
           }
-          return `<b>${this.point.name}</b><br>Porcentagem: ${this.y.toFixed(2)}%`
+          return `<b>${this.point.days} dias</b><br>Porcentagem: ${this.y.toFixed(
+            2,
+          )}%<br><b>Clientes: ${this.point.quantity}</b>`
         },
       },
       series: [
         {
           name: 'Porcentagem',
           colorByPoint: true,
-          innerSize: '75%',
+          innerSize: '65%',
           data: transformedData,
         },
       ],