@kigi/components 1.41.0-alpha.10 → 1.41.0-alpha.12

package/package.json

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

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

@@ -1,3 +1,21 @@
-<div>
-   aaaaaaaaaaaaaa
+<div class="average-customer-time-wrapper">
+   <figure class="highcharts-figure">
+      <div class="description-container-dash">
+         <div class="mbg-h-c-tone-s-icon-dash"
+              ng-click="$ctrl.toggleShowValuesReturnCustomer(false)">
+            <i class="fa fa-lock lock-dash-store"
+               aria-hidden="true"
+               uib-tooltip="Sem permissão para visualizar"
+               tooltip-placement="left"
+               ng-if="$ctrl.isBlockValuesDashboarReturnCustomer && !$ctrl.hideValue"></i>
+            <i ng-if="!$ctrl.hideValue && $ctrl.isPermissionAverageCustomerReturnTime"
+               disable-animate
+               class="far fa-eye eye-board-target"></i>
+            <i ng-if="$ctrl.hideValue && $ctrl.isPermissionAverageCustomerReturnTime"
+               disable-animate
+               class="far fa-eye-slash eye-board-target"></i>
+         </div>
+      </div>
+      <div id="container"></div>
+   </figure>
 </div>

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

@@ -1,301 +1,172 @@
-.store-goal-wrapper {
+.average-customer-time-wrapper {}
 
-  .swiper {
-    width: 100%;
-    height: 100%;
-    overflow: hidden; 
-  }
-
-  .swiper-wrapper {
-    display: flex;
-    transition: transform 0.3s ease;
-  }
-
-  .swiper-slide {
-    width: 100%; 
-    flex-shrink: 0;
-    display: flex;
-    justify-content: center; 
-    align-items: center;
-    box-sizing: border-box;
-  }
-
-  .swiper-slide-active {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .swiper-pagination {
-    position: absolute;
-    top: 100px; 
-    left: 54%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 5px;
-  }
-  
-  .swiper-pagination-bullet {
-    width: 10px;
-    height: 10px;
-    background-color: #606A90; 
-    border-radius: 50%;
-    opacity: 0.5;
-  }
-
-  .swiper-pagination-bullet-active {
-    background-color: #0EBCBD; 
-    opacity: 1;
-  }
-
-  .active-index {
-    display: flex;
-    justify-content: end;
-    font-size: 14px;
-    margin-top: -17px;
-    color: var(--titleColor);
+.highcharts-figure {
+.custom-title-container{
+  .custom-title{
+    position: relative;
+    left: -20px;
   }
-  
-
-  .line-goal {
+}
+  .line-pay {
     width: 100%;
     background: #737373;
     height: 1px;
     opacity: 0.3;
 
   }
-
-  .dashboard-wrapper {
-    overflow: hidden; 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
+  #container {
+    border-radius: 10px;
+    background: #FFF;
+    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
     width: 100%;
-    position: relative;
-    left: -22px;
-
-    .dashboard-estimated {
-
-      position: relative;
-      left: 52px;
-      top: 10px;
-      height: 115px;
-      font-size: 14px;
-      color: #5f5b5b;
-
-    }
-
-    .dashboard-estimated-store {
-
-      position: relative;
-      top: 18px;
-      left: 38px;  
-      height: 115px;
-      font-size: 14px;
-      color: #5f5b5b;
-    }
-  }
-
-  .chart-container {
+    margin-left: 19px;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 300px;
-    height: auto;
-    position: relative;
-    left: 10%;
-    bottom: 195px;
   }
-
-  .opacity-dash-goal {
-    opacity: 0.5;
-  }
-
-  .goal-target {
-    position: relative;
-    top: 180px;
-    font-size: 14px;
-    color: #5f5b5b;
-  }
-
-  .estimate-goal {
-    font-size: 14px;
-    color: #5f5b5b;
-  }
-
-  .estimate-goal-store {
-    font-size: 14px;
-    color: #5f5b5b;
-
-    i {
-      color: #0EBCBD;
-    }
-
-    .tooltip-inner {
-      width: 250px;
-    }
-
-
-    .tooltip-chart-panel {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      background: #0EBCBD !important;
-      font-weight: bold;
-      color: #FFFFFF;
-      width: 100%;
-      height: 100%;
-      margin-right: 200px;
-      border-radius: 10px;
-      opacity: 1.0;
-    }
-
-  }
-  .lock-permition{
-
-    .tooltip-inner {
-      background: #0EBCBD !important;
-      color: #000000 !important;
-      width: 300px;
-    }
-  }
-
-  .goal-day {
-    display: flex;
-    justify-content: space-between;
-    align-items: end;
-    position: relative;
-    top: 170px;
-    font-size: 16px;
-    color: #5f5b5b;
-  }
-
   .description-container-dash {
-    flex-grow: 1;
     color: var(--titleColor);
     display: flex;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: 16px;
-    font-weight: 600;
-    font-size: 14px;
-
-    .active-index-slide{
-      position: relative;
-      top: -11px;
-      left: 95px;
-    }
+    justify-content: end;
+    position: relative;
+    top: 22px;
+    right: 12px;
+    z-index: 9999;
 
     .mbg-h-c-tone-s-icon-dash {
       margin-top: -10px;
       transition: opacity 500ms ease;
       opacity: 0.9;
     }
+  }
+}
+
+@media screen and (max-width: 1920px){
+  .highcharts-figure {
 
-    .lock-dash-store {
+    .line-pay {
       position: relative;
-      right: -20px;
+      left: -20px;
+      width: 480px;
     }
-
-    .show-tooltip {
-      font-size: 20px;
-      color: #5f5b5b;
-      z-index: 9999;
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 504px;
+      margin-left: 19px;
     }
+    
   }
 
-  @keyframes blink {
-    0% {
-      opacity: 1;
-    }
+}
 
-    50% {
-      opacity: 0;
+@media screen and (max-width: 1728px){
+  .highcharts-figure {
+    .line-pay {
+      position: relative;
+      left: -20px;
+      width: 418px;
     }
-
-    100% {
-      opacity: 1;
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 444px;
+      padding: inherit;
     }
   }
+}
 
-  .description-dash {
-    font-size: 20px;
-    color: #5f5b5b;
-
-    i {
-      animation: blink 1s infinite;
-      color: #ff8c00;
+@media screen and (max-width: 1536px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        font-size: 17px;
+      }
+    }
+    .line-pay {
       position: relative;
-      z-index: 9999;
+      left: -20px;
+      width: 366px;
     }
-
-    .tooltip-inner {
-      background: #ff8c00 !important;
-      color: #000000 !important;
-      width: 300px;
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 390px;
     }
   }
+}
 
-  @media screen and (max-width: 1920px){
-    .description-container-dash{
-      .active-index-slide {
-        left: 140px;
+@media screen and (max-width: 1440px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        font-size: 16px;
+        width: 100vw;
+    }
       }
+    
+    .line-pay {
+      position: relative;
+      left: -20px;
+      width: 332px;
     }
-  }
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 358px;
 
-  @media screen and (max-width: 1728px){
-    .description-container-dash{
-      .active-index-slide {
-        left: 108px;
-      }
     }
   }
+}
 
-  @media screen and (max-width: 1536px){
-    .description-container-dash{
-      .active-index-slide {
-        left: 70px;
-      }
+@media screen and (max-width: 1366px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        font-size: 16px;
+        width: 100vw;
     }
-  }
-  @media screen and (max-width: 1440px){
-    .description-container-dash{
-      .active-index-slide {
-        left: 58px;
       }
+    
+    .line-pay {
+      position: relative;
+      left: -20px;
+      width: 450px;
     }
-  }
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 474px;
 
-  @media screen and (max-width: 1366px){
-    .description-container-dash{
-      .active-index-slide {
-        left: 125px;
-      }
     }
   }
+}
 
-  @media screen and (max-width: 1024px){
-    .description-container-dash{
-      .active-index-slide {
-        left: 44px;
+@media screen and (max-width: 1024px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        font-size: 15px;
+        width: 100vw;
+    }
       }
+    
+    .line-pay {
+      position: relative;
+      left: -20px;
+      width: 306px;
     }
-  }
-
-}
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 330px;
 
-.hide-goal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  font-size: 14px;
-  color: #5f5b5b;
+    }
+  }
 }
-
-.state-goal {
-  cursor: pointer;
-}

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

@@ -1,7 +1,20 @@
 import './mbg-average-customer-time.scss'
 import template from './mbg-average-customer-time.html'
+import Highcharts from 'highcharts'
+import Exporting from 'highcharts/modules/exporting.js'
+import Accessibility from 'highcharts/modules/accessibility.js'
+
+Exporting(Highcharts)
+Accessibility(Highcharts)
 
 class MbgAverageCustomerTimeController {
+  private percentagesReturnCustomerTime
+  private isPermissionAverageCustomerReturnTime
+  private allowedToSee: boolean
+  private allowedCallBack: Function
+  private isBlockValuesDashboarReturnCustomer
+  private hideValue: boolean = false
+
   constructor(
     public $scope,
     public $element,
@@ -11,7 +24,152 @@ class MbgAverageCustomerTimeController {
     public $state,
   ) {}
 
-  async $onInit() {}
+  async $onInit() {
+    this.isBlockValuesDashboarReturnCustomer =
+      !this.allowedToSee || !this.isPermissionAverageCustomerReturnTime
+    this.$scope.$watch(
+      '$ctrl.percentagesReturnCustomerTime',
+      (data) => {
+        if (data) {
+          this.configPanelPercentagesReturnCustomerTime()
+        }
+      },
+      true,
+    )
+  }
+
+  configPanelPercentagesReturnCustomerTime() {
+    const colors = ['#F24A57', '#45BDBF', '#482F72', '#CDDA34', '#F68E2C']
+    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],
+    }))
+
+    Highcharts.chart('container', {
+      chart: {
+        type: 'pie',
+        backgroundColor: 'none',
+        events: {
+          redraw: function () {
+            const chart = this
+            const noDataText = 'Nenhum período selecionado'
+
+            if (chart.noDataLabel) {
+              chart.noDataLabel.destroy()
+              chart.noDataLabel = null
+            }
+
+            const allDataHidden = chart.series.filter((series) =>
+              series.data.filter((point) => point.options.visible),
+            )
+
+            const hasDate = allDataHidden[0].data.some((option) => option.visible)
+
+            if (!hasDate) {
+              const centerX = chart.plotWidth / 2
+              const centerY = chart.plotHeight / 2
+              chart.noDataLabel = chart.renderer
+                .text(noDataText, centerX, centerY)
+                .attr({
+                  zIndex: 5,
+                  align: 'center',
+                })
+                .css({
+                  fontSize: '20px',
+                  color: '#5f5b5b',
+                  textAlign: 'center',
+                })
+                .add()
+            }
+          },
+        },
+      },
+      title: {
+        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: {
+          fontSize: '20px',
+          color: '#5f5b5b',
+          fontWeight: 'bold',
+        },
+      },
+
+      legend: {
+        layout: 'horizontal',
+        itemDistance: 5,
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: true,
+          cursor: 'pointer',
+          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(
+                  2,
+                )}%)</span>`
+              }
+            },
+            style: {
+              fontSize: '0.9em',
+            },
+          },
+          showInLegend: true,
+        },
+      },
+      tooltip: {
+        backgroundColor: '#FFF',
+        formatter: function () {
+          if (hasPermissionPorcentages) {
+            return 'Sem permissão para visualizar'
+          }
+          return `<b>${this.point.name}</b><br>Porcentagem: ${this.y.toFixed(2)}%`
+        },
+      },
+      series: [
+        {
+          name: 'Porcentagem',
+          colorByPoint: true,
+          innerSize: '75%',
+          data: transformedData,
+        },
+      ],
+      navigation: {
+        buttonOptions: {
+          enabled: false,
+        },
+      },
+      credits: {
+        enabled: false,
+      },
+    })
+  }
+
+  toggleShowValuesReturnCustomer() {
+    if (
+      (this.allowedToSee !== undefined && !this.allowedToSee) ||
+      !this.isPermissionAverageCustomerReturnTime
+    ) {
+      if (this.allowedCallBack) {
+        this.allowedCallBack()
+      }
+      return
+    }
+
+    this.hideValue = !this.hideValue
+    this.configPanelPercentagesReturnCustomerTime()
+  }
 }
 MbgAverageCustomerTimeController['$inject'] = [
   '$scope',
@@ -23,7 +181,13 @@ MbgAverageCustomerTimeController['$inject'] = [
 ]
 
 const mbgAverageCustomerTime = {
-  bindings: {},
+  bindings: {
+    percentagesReturnCustomerTime: '=?',
+    isPermissionAverageCustomerReturnTime: '=?',
+    allowedToSee: '=?',
+    allowedCallBack: '&?',
+    isBlockValuesDashboarReturnCustomer: '=?',
+  },
   template,
   controller: MbgAverageCustomerTimeController,
 }

package/src/components/mbg-store-goal/mbg-store-goal.html

@@ -1,9 +1,6 @@
 <div ng-class="{'opacity-dash-goal': !$ctrl.isPermissionStoreGoal}"
      class="store-goal-wrapper"
      ng-show="$ctrl.showDashboard">
-
-
-
    <div class="description-container-dash">
       <p class="description-dash">
          Meta do mês / {{$ctrl.currentMonthName}}
@@ -13,8 +10,6 @@
             ng-show="$ctrl.estimatedPercentageGreaterThanTarget"
             aria-hidden="true"></i>
       </p>
-
-
       <div class="mbg-h-c-tone-s-icon-dash"
            ng-click="$ctrl.toggleShowValueStoreGoal(false)">
          <i class="fa fa-lock lock-dash-store"
@@ -127,6 +122,31 @@
 
 
          <div class="swiper-pagination"></div>
+         <div class="loading-indicator">
+            <svg id="loading-circle"
+                 width="30"
+                 height="30"
+                 viewBox="0 0 100 100">
+
+               <circle cx="50"
+                       cy="50"
+                       r="40"
+                       stroke="#E9E9E9"
+                       stroke-width="8"
+                       fill="none" />
+
+               <circle id="progress"
+                       cx="50"
+                       cy="50"
+                       r="40"
+                       stroke="#0ebcbd"
+                       stroke-width="8"
+                       stroke-dasharray="251.2"
+                       stroke-dashoffset="251.2"
+                       fill="none"
+                       transform="rotate(-90 50 50)" />
+            </svg>
+         </div>
       </div>
    </div>
 </div>

package/src/components/mbg-store-goal/mbg-store-goal.scss

@@ -1,5 +1,18 @@
 .store-goal-wrapper {
 
+  .loading-indicator {
+    position: absolute;
+    top: 26%;
+    left: 98%;
+    transform: translate(-50%, -50%);
+    width: 40px;
+    height: 40px;
+  }
+
+  #loading-circle {
+    position: absolute;
+  }
+
   .swiper {
     width: 100%;
     height: 100%;
@@ -29,7 +42,7 @@
   .swiper-pagination {
     position: absolute;
     top: 100px; 
-    left: 54%;
+    left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 5px;
@@ -73,10 +86,9 @@
     height: 100%;
     width: 100%;
     position: relative;
-    left: -22px;
 
-    .dashboard-estimated {
 
+    .dashboard-estimated {
       position: relative;
       left: 52px;
       top: 10px;
@@ -238,6 +250,7 @@
   }
 
   @media screen and (max-width: 1920px){
+
     .description-container-dash{
       .active-index-slide {
         left: 140px;
@@ -261,6 +274,15 @@
     }
   }
   @media screen and (max-width: 1440px){
+    .dashboard-wrapper{
+      .swiper-slide{
+        .dashboard-estimated{
+          position: relative;
+          left: 32px;
+        }
+      }
+     
+    }
     .description-container-dash{
       .active-index-slide {
         left: 58px;
@@ -277,6 +299,15 @@
   }
 
   @media screen and (max-width: 1024px){
+    .dashboard-wrapper{
+      .swiper-slide{
+        .dashboard-estimated{
+          position: relative;
+          left: 24px;
+        }
+      }
+     
+    }
     .description-container-dash{
       .active-index-slide {
         left: 44px;

package/src/components/mbg-store-goal/mbg-store-goal.ts

@@ -76,9 +76,43 @@ class MbgStoreGoalController {
     })
 
     swiper.on('slideChange', () => {
+      this.startLoadingAnimation(swiper)
       this.indexActiveSlide =
         swiper.activeIndex === 1 ? '(mensal)' : swiper.activeIndex === 2 ? '(diário)' : ''
     })
+
+    this.startLoadingAnimation(swiper)
+  }
+  startLoadingAnimation(swiper) {
+    const duration = 20000
+    const totalLength = 251.2
+
+    const progress = document.getElementById('progress')
+    if (!progress) return
+
+    let startTime: number | null = null
+
+    const animate = (timestamp: number) => {
+      if (!startTime) startTime = timestamp
+      const elapsed = timestamp - startTime
+
+      const progressPercentage = elapsed / duration
+      const currentOffset = totalLength * (1 - progressPercentage)
+
+      progress.style.strokeDashoffset = `${currentOffset}`
+
+      if (elapsed < duration) {
+        requestAnimationFrame(animate)
+      } else {
+        progress.style.strokeDashoffset = '0'
+        if (swiper.autoplay.running) {
+          swiper.autoplay.start()
+        }
+      }
+    }
+
+    progress.style.strokeDashoffset = `${totalLength}`
+    requestAnimationFrame(animate)
   }
 
   goalDataForTheMonthConfig() {

package/src/index.html

@@ -161,7 +161,7 @@
       <div class="col-md-12">  -->
   <div class=""
        style="height: 260px">
-    <mbg-average-customer-time></mbg-average-customer-time>
+    <mbg-store-goal></mbg-store-goal>
 
     <!-- <mbg-text-editor ng-model="editorJodit"
                      ng-if="testeeditorif"