@kigi/components 1.39.0 → 1.40.0-alpha.2

package/package.json

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

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

@@ -1,17 +1,20 @@
 <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"
-         ng-class="{'show-tooltip': !$ctrl.estimatedPercentageGreaterThanTarget }">
+      <p class="description-dash">
+         Meta do mês / {{$ctrl.currentMonthName}}
          <i class="fa fa-exclamation-circle"
-            uib-tooltip="{{$ctrl.percentageEstimated}}"
+            uib-tooltip="{{$ctrl.percentageEstimatedMessage}}"
             tooltip-placement="top"
-            class="link-store"
             ng-show="$ctrl.estimatedPercentageGreaterThanTarget"
             aria-hidden="true"></i>
-         Meta do mês / {{$ctrl.currentMonthName}}
       </p>
+
+
       <div class="mbg-h-c-tone-s-icon-dash"
            ng-click="$ctrl.toggleShowValueStoreGoal(false)">
          <i class="fa fa-lock lock-dash-store"
@@ -25,37 +28,106 @@
          <i ng-if="!$ctrl.hideValue && $ctrl.isPermissionStoreGoal"
             disable-animate
             class="far fa-eye-slash eye-board-target"></i>
-
       </div>
    </div>
-   <div class="line-pay"></div>
-   <div class="goal-target">
-      <p ng-if="$ctrl.hideValue">Meta: <strong>{{$ctrl.goalStoreTarget }}</strong></p>
-      <p ng-if="!$ctrl.hideValue">Meta: <i class="fa fa-lock"
-            aria-hidden="true"
-            uib-tooltip="Sem permissão para visualizar"></i></p>
-   </div>
-   <div class="goal-day">
-      <p class="estimate-goal"
-         ng-if="!$ctrl.hideValue">Estimativa da meta: <i class="fa fa-lock"
-            aria-hidden="true"
-            uib-tooltip="Sem permissão para visualizar"></i>
-      </p>
-      <p class="estimate-goal-store"
-         ng-if="$ctrl.hideValue">Estimativa da meta: <strong>{{$ctrl.estimatedGoal }}</strong>
-
-         <i class="fa fa-exclamation-circle"
-            ng-if="$ctrl.hideValue"
-            tooltip-placement="right"
-            class="estimated"
-            uib-tooltip-html="$ctrl.messageTooltip"
-            aria-hidden="true"></i>
-      </p>
+   <div class="active-index"
+        ng-if="$ctrl.indexActiveSlide">
+      <label>{{$ctrl.indexActiveSlide}}</label>
    </div>
 
+   <div class="line-goal"></div>
    <div class="dashboard-wrapper">
-      <div class="chart-container"
-           id="container-speed"></div>
+      <div class="swiper">
+         <div class="swiper-wrapper">
+            <div class="swiper-slide">
+               <div class="chart-container"
+                    id="container-speed">
+               </div>
+            </div>
+
+            <div class="swiper-slide">
+               <div class="dashboard-estimated">
+                  <p ng-if="$ctrl.hideValue">Meta: <strong>{{$ctrl.goalDataForTheMonth.target | currency: 'R$ '
+                        }}</strong>
+                  </p>
+                  <p ng-if="!$ctrl.hideValue">Meta: <i class="fa fa-lock"
+                        aria-hidden="true"
+                        tooltip-placement="right"
+                        uib-tooltip="Sem permissão para visualizar"></i>
+                  </p>
+                  <p ng-if="!$ctrl.hideValue">Venda atual: <i class="fa fa-lock"
+                        aria-hidden="true"
+                        tooltip-placement="right"
+                        uib-tooltip="Sem permissão para visualizar"></i>
+                  </p>
+                  <p class="estimate-goal-store lock-permition"
+                     ng-if="$ctrl.hideValue">Venda atual: <strong>{{$ctrl.goalDataForTheMonth.sales | currency: 'R$ '
+                        }}</strong>
+                     <i class="fa fa-exclamation-circle"
+                        aria-hidden="true"
+                        tooltip-placement="top"
+                        uib-tooltip="Considera devoluções"></i>
+                  </p>
+                  <p ng-if="!$ctrl.hideValue">Restante: <i class="fa fa-lock"
+                        aria-hidden="true"
+                        tooltip-placement="right"
+                        uib-tooltip="Sem permissão para visualizar"></i>
+                  </p>
+                  <p class="estimate-goal-store"
+                     ng-if="$ctrl.hideValue">Restante: <strong>{{$ctrl.goalDataForTheMonth.remaining | currency: 'R$ '
+                        }} =
+                        ({{$ctrl.goalDataForTheMonth.remainingPercentage}}%)</strong>
+                  </p>
+                  <p ng-if="!$ctrl.hideValue">Estimativa: <i class="fa fa-lock"
+                        aria-hidden="true"
+                        tooltip-placement="right"
+                        uib-tooltip="Sem permissão para visualizar"></i>
+                  </p>
+                  <p class="estimate-goal-store"
+                     ng-if="$ctrl.hideValue">Estimativa: <strong>{{$ctrl.goalDataForTheMonth.estimate | currency: 'R$
+                        '}} =
+                        ({{$ctrl.goalDataForTheMonth.estimatePercentage}}%)</strong>
+                  </p>
+               </div>
+            </div>
+
+            <div class="swiper-slide">
+               <div class="dashboard-estimated-store">
+                  <p ng-if="$ctrl.hideValue">Meta diária: <strong>{{$ctrl.goalDataForTheMonth.dailyTarget | currency:
+                        'R$ '
+                        }}</strong></p>
+                  <p ng-if="!$ctrl.hideValue">Meta diária: <i class="fa fa-lock"
+                        aria-hidden="true"
+                        tooltip-placement="right"
+                        uib-tooltip="Sem permissão para visualizar"></i>
+                  </p>
+                  <p ng-if="!$ctrl.hideValue">Realizado/dia: <i class="fa fa-lock"
+                        aria-hidden="true"
+                        tooltip-placement="right"
+                        uib-tooltip="Sem permissão para visualizar"></i>
+                  </p>
+                  <p class="estimate-goal-store"
+                     ng-if="$ctrl.hideValue">Realizado/dia: <strong>{{$ctrl.goalDataForTheMonth.realityPerDay |
+                        currency: 'R$
+                        ' }}</strong>
+                  </p>
+                  <p ng-if="!$ctrl.hideValue">Necessidade/dia: <i class="fa fa-lock"
+                        aria-hidden="true"
+                        tooltip-placement="right"
+                        uib-tooltip="Sem permissão para visualizar"></i>
+                  </p>
+                  <p class="estimate-goal-store"
+                     ng-if="$ctrl.hideValue">Necessidade/dia: <strong>{{$ctrl.goalDataForTheMonth.neededPerDay |
+                        currency: 'R$
+                        ' }}</strong>
+                  </p>
+               </div>
+            </div>
+         </div>
+
+
+         <div class="swiper-pagination"></div>
+      </div>
    </div>
 </div>
 

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

@@ -1,12 +1,102 @@
-.store-goal-wrapper{
+.store-goal-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);
+  }
+  
+
+  .line-goal {
+    width: 100%;
+    background: #737373;
+    height: 1px;
+    opacity: 0.3;
+
+  }
+
   .dashboard-wrapper {
+    overflow: hidden; 
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     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 {
     display: flex;
     justify-content: center;
@@ -14,53 +104,62 @@
     width: 300px;
     height: auto;
     position: relative;
-    left: 2%;
-    bottom: 252px;
+    left: 10%;
+    bottom: 195px;
   }
-  
-  .opacity-dash-goal{
+
+  .opacity-dash-goal {
     opacity: 0.5;
   }
-  
-  .goal-target{
+
+  .goal-target {
     position: relative;
     top: 180px;
     font-size: 14px;
     color: #5f5b5b;
   }
 
-  .estimate-goal{
+  .estimate-goal {
     font-size: 14px;
-      color: #5f5b5b;
+    color: #5f5b5b;
   }
 
-  .estimate-goal-store{
+  .estimate-goal-store {
     font-size: 14px;
-      color: #5f5b5b;
-      i{
-        color: #0EBCBD;
-      }
-     
-      .tooltip-inner {
-        background: transparent ;
-       }
-         
-  
-      .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;
+    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;
@@ -80,24 +179,29 @@
     width: 100%;
     margin-top: 16px;
     font-weight: 600;
-    font-size: 14px; 
-  
+    font-size: 14px;
+
+    .active-index-slide{
+      position: relative;
+      top: -11px;
+      left: 95px;
+    }
+
     .mbg-h-c-tone-s-icon-dash {
       margin-top: -10px;
       transition: opacity 500ms ease;
       opacity: 0.9;
     }
-  
-    .lock-dash-store{
+
+    .lock-dash-store {
       position: relative;
       right: -20px;
     }
 
-    .show-tooltip{
+    .show-tooltip {
       font-size: 20px;
       color: #5f5b5b;
-      position: relative;
-      left: 0px;
+      z-index: 9999;
     }
   }
 
@@ -105,45 +209,93 @@
     0% {
       opacity: 1;
     }
+
     50% {
       opacity: 0;
     }
+
     100% {
       opacity: 1;
     }
   }
-  
+
   .description-dash {
     font-size: 20px;
     color: #5f5b5b;
-    position: relative;
-    left: -24px;
 
-    i{
-        animation: blink 1s infinite;
-        color: #ff8c00;
-        position: relative;
-        top: -12px;
+    i {
+      animation: blink 1s infinite;
+      color: #ff8c00;
+      position: relative;
+      z-index: 9999;
     }
 
     .tooltip-inner {
-      background:#ff8c00 !important; 
+      background: #ff8c00 !important;
       color: #000000 !important;
       width: 300px;
     }
   }
-  
+
+  @media screen and (max-width: 1920px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 140px;
+      }
+    }
   }
-  .hide-goal{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    font-size: 14px;
-    color: #5f5b5b;
+
+  @media screen and (max-width: 1728px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 108px;
+      }
+    }
   }
-  
-  .state-goal{
-    cursor: pointer;
-  }
+
+  @media screen and (max-width: 1536px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 70px;
+      }
+    }
+  }
+  @media screen and (max-width: 1440px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 58px;
+      }
+    }
+  }
+
+  @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;
+      }
+    }
+  }
+
+}
+
+.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-store-goal/mbg-store-goal.ts

@@ -6,6 +6,8 @@ import * as SolidGauge from 'highcharts/modules/solid-gauge.js'
 import * as Exporting from 'highcharts/modules/exporting.js'
 import * as ExportData from 'highcharts/modules/export-data.js'
 import * as Accessibility from 'highcharts/modules/accessibility.js'
+import Swiper from 'swiper'
+import { Pagination } from 'swiper'
 
 // Inicialize os módulos
 HighchartsMore(Highcharts)
@@ -15,24 +17,18 @@ ExportData(Highcharts)
 Accessibility(Highcharts)
 
 class MbgStoreGoalController {
-  private status: string
-  private cappedPercentage
-  private percentageAchieved
   private allowedToSee: boolean
   private allowedCallBack: Function
-  private randomEmoji: string
   private hideValue: boolean = false
   private allowDashBoardAutoValues
   private isPermissionStoreGoal
-  private estimatedGoal
-  private storeGoalDashboard
+  private goalDataForTheMonth
   private currentMonthName
-  private percentageEstimatedStoreGoal
   private estimatedPercentageGreaterThanTarget: boolean = false
-  private goalStoreTarget
   private messageTooltip: string = ''
-  private percentageEstimated
+  private percentageEstimatedMessage
   private showDashboard: boolean = false
+  private indexActiveSlide
 
   constructor(
     public $scope,
@@ -45,9 +41,8 @@ class MbgStoreGoalController {
 
   async $onInit() {
     this.initialize()
-    this.randomEmoji = this.generateRandomEmoji()
     this.$scope.$watch(
-      '$ctrl.storeGoalDashboard',
+      '$ctrl.goalDataForTheMonth',
       (data) => {
         if (data) {
           this.configSolidGauge()
@@ -59,31 +54,55 @@ class MbgStoreGoalController {
     const currentDate = new Date()
     const currentMonth = currentDate.toLocaleString('default', { month: 'short' })
     this.currentMonthName = currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1)
-    this.message()
+    this.configSwiperSlides()
   }
 
-  message() {
-    this.messageTooltip = `
-    <div class="tooltip-chart-panel">
-        <label>Média Diária: (Valor V. / Dia A.) </label><br>
-        <label>Projeção final: (Média Diária * Dias passados do mês) </label><br>
-        <label>Estimativa: (Projeção final / Meta do mês) * 100</label>
-    </div>`
+  configSwiperSlides() {
+    const swiper = new Swiper('.swiper', {
+      modules: [Pagination],
+      speed: 1000,
+      autoplay: {
+        delay: 20000,
+        disableOnInteraction: false,
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        progressbarOpposite: true,
+        allowTouchMove: false,
+        clickable: true,
+        bulletClass: 'swiper-pagination-bullet',
+        bulletActiveClass: 'swiper-pagination-bullet-active',
+        renderBullet: function (index, className) {
+          return `<span class="${className}"></span>`
+        },
+      },
+    })
+
+    swiper.on('slideChange', () => {
+      this.indexActiveSlide =
+        swiper.activeIndex === 1 ? '(mensal)' : swiper.activeIndex === 2 ? '(diário)' : ''
+    })
+  }
+
+  goalDataForTheMonthConfig() {
+    this.goalDataForTheMonth.remainingPercentage = this.goalDataForTheMonth.remainingPercentage
+    this.goalDataForTheMonth.targetMonth = Number(this.goalDataForTheMonth.targetMonth).toFixed(2)
+    this.goalDataForTheMonth.estimatePercentage = this.goalDataForTheMonth.estimatePercentage
   }
 
   async configSolidGauge() {
-    const storeGoalPercentage = this.hideValue ? this.storeGoalDashboard : 0
-    const porcentageEstimated = Number(this.percentageEstimatedStoreGoal.projectionFinal)
-    this.showDashboard = this.storeGoalDashboard
-    const percentageTarget = this.percentageEstimatedStoreGoal.percentageTarget.toFixed(2)
-    const showPercentage = this.hideValue ? `${percentageTarget}%` : '****'
-    this.percentageEstimated = `Alerta: Você atingirá aproximadamente ${showPercentage} da sua meta se continuar no ritmo atual.`
-    const goal = this.percentageEstimatedStoreGoal.target
+    this.goalDataForTheMonthConfig()
+    const sales = this.$filter('currency')(this.goalDataForTheMonth.sales, 'R$ ')
+    const tooltip = `<b>Vendas</b>: ${sales}`
+
+    const storeGoalPercentage = this.hideValue ? Number(this.goalDataForTheMonth.targetMonth) : 0
 
-    this.goalStoreTarget = this.$filter('currency')(isNaN(goal) ? 0 : goal, 'R$ ')
-    this.estimatedGoal = this.$filter('currency')(isNaN(goal) ? 0 : porcentageEstimated, 'R$ ')
+    this.showDashboard = this.goalDataForTheMonth.target
+    const percentageTarget = this.goalDataForTheMonth.estimatePercentage
+    const showPercentage = this.hideValue ? `${percentageTarget}%` : '****'
+    this.percentageEstimatedMessage = `Alerta: Você atingirá aproximadamente ${showPercentage} da sua meta se continuar no ritmo atual.`
 
-    if (porcentageEstimated < goal) {
+    if (this.goalDataForTheMonth.estimate < this.goalDataForTheMonth.target) {
       this.estimatedPercentageGreaterThanTarget = true
     } else {
       this.estimatedPercentageGreaterThanTarget = false
@@ -102,15 +121,21 @@ class MbgStoreGoalController {
         credits: {
           enabled: false,
         },
+        tooltip: {
+          enabled: true,
+          formatter: function () {
+            return tooltip
+          },
+        },
 
         series: [
           {
             name: 'Speed',
-            data: [storeGoalPercentage],
+            data: [storeGoalPercentage.toFixed(2)],
             dataLabels: {
               format: this.hideValue
-                ? '<div style="display: flex;justify-content: center;align-items: center;margin-top: -20px;">' +
-                  '<span style="font-size:25px">{y}</span><br/>' +
+                ? '<div style="display: flex;justify-content: center;align-items: center;margin-top: -20px;" >' +
+                  '<span style="font-size:25px" uib-tooltip="testeeeeeee" >{y}</span><br/>' +
                   '<span style="font-size:12px;opacity:0.4">%</span>' +
                   '</div>'
                 : '<div style="margin-top: -20px;">' +
@@ -140,8 +165,8 @@ class MbgStoreGoalController {
 
       title: null,
       pane: {
-        center: ['50%', '90%'],
-        size: '100%',
+        center: ['40%', '75%'],
+        size: '65%',
         startAngle: -90,
         endAngle: 90,
         background: {
@@ -230,7 +255,6 @@ class MbgStoreGoalController {
     }
 
     this.hideValue = !this.hideValue
-    this.randomEmoji = this.generateRandomEmoji()
     this.configSolidGauge()
   }
 }
@@ -247,8 +271,7 @@ const mbgStoreGoal = {
   bindings: {
     allowedToSee: '=?',
     allowedCallBack: '&?',
-    storeGoalDashboard: '=?',
-    percentageEstimatedStoreGoal: '=?',
+    goalDataForTheMonth: '=?',
     isPermissionStoreGoal: '=?',
     allowDashBoardAutoValues: '=?',
   },