@kigi/components 1.37.0-beta.4 → 1.37.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.37.0-beta.4",
+  "version": "1.37.0-beta.6",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {

package/src/components/mbg-homescreen/cards/panel/panel.ts

@@ -1,7 +1,7 @@
 import './panel.scss'
 import template from './panel.html'
-// import { DashboardService } from 'services/dashboard-service'
-// import moment from 'moment'
+import { DashboardService } from 'services/dashboard-service'
+import moment from 'moment'
 
 class MbgCardPanelController {
   public loading
@@ -22,7 +22,7 @@ class MbgCardPanelController {
     public $element,
     public $attrs,
     public $timeout,
-    // public dashboardService: DashboardService,
+    public dashboardService: DashboardService,
     public $filter,
   ) {}
   $onInit() {
@@ -206,7 +206,7 @@ MbgCardPanelController['$inject'] = [
   '$element',
   '$attrs',
   '$timeout',
-  // 'dashboardService',
+  'dashboardService',
   '$filter',
 ]
 

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

@@ -1,2 +1,62 @@
-<div id="container-speed"
-     class="chart-container"></div>
+<div ng-class="{'opacity-dash-goal': !$ctrl.isPermissionStoreGoal}"
+     ng-show="$ctrl.showDashboard">
+   <div class="description-container-dash">
+      <p class="description-dash">Meta do mês / {{$ctrl.currentMonthName}}</p>
+      <div class="mbg-h-c-tone-s-icon-dash"
+           ng-click="$ctrl.toggleShowValueStoreGoal(false)">
+         <span class="link-store"
+               ng-if="$ctrl.estimatedPercentageGreaterThanTarget"
+               uib-tooltip="{{$ctrl.percentageEstimated}}"
+               tooltip-placement="left">
+            <i class="fa fa-exclamation-circle"
+               aria-hidden="true"></i></span>
+         <i class="fa fa-lock lock-dash-store"
+            aria-hidden="true"
+            uib-tooltip="Sem permissão para visualizar"
+            tooltip-placement="left"
+            ng-if="!$ctrl.isPermissionStoreGoal"></i>
+         <i ng-if="$ctrl.hideValue && $ctrl.isPermissionStoreGoal"
+            disable-animate
+            class="far fa-eye eye-board-target"></i>
+         <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"
+         ng-if="$ctrl.hideValue">Estimativa da meta: <strong>{{$ctrl.estimatedGoal }}</strong>
+      <p class="estimated "
+         ng-if="$ctrl.hideValue"
+         tooltip-placement="right"
+         uib-tooltip="{{$ctrl.messageTooltip}}">
+         <i class="fa fa-exclamation-circle"
+            aria-hidden="true"></i>
+      </p>
+      </p>
+   </div>
+
+   <div class="dashboard-wrapper">
+      <div class="chart-container"
+           id="container-speed"></div>
+   </div>
+</div>
+
+<div ng-show="!$ctrl.showDashboard"
+     class="hide-goal">
+   <label for="">Sem meta cadastrada. Defina sua meta hoje. <a class="state-goal"
+         ng-click="$ctrl.stateGoNewGoal()">Clique aqui</a> </label>
+</div>

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

@@ -1,5 +1,143 @@
+.dashboard-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
 .chart-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 300px;
-  height: 200px;
-  float: left;
+  height: auto;
+  position: relative;
+  left: 2%;
+  bottom: 252px;
+}
+
+.opacity-dash-goal{
+  opacity: 0.5;
+}
+
+.goal-target{
+  position: relative;
+  top: 192px;
+  font-size: 14px;
+  color: #5f5b5b;
+}
+
+
+.tooltip-inner {
+  background:#ff8c00 !important; 
+  color: #000000 !important;
+  width: 300px;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.estimate-goal{
+  font-size: 14px;
+    color: #5f5b5b;
+
+}
+
+.estimated{
+  position: relative;
+  left: -124px;
+  color: cornflowerblue;
+  
+
+  .tooltip-inner{
+    background:#95c5ec !important; 
+  }
+}
+
+
+.link-store{
+  animation: blink 1s infinite;
+  color: #ff8c00;
+  position: relative;
+  font-size: 22px;
+  top: 16px;
+  right: -38px;
+}
+
+.goal-day {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  position: relative;
+  top: 184px;
+  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; 
+
+  .mbg-h-c-tone-s-icon-dash {
+    margin-top: -10px;
+    transition: opacity 500ms ease;
+    opacity: 0.9;
+
+    .eye-board-target {
+      position: relative;
+      top: -10px;
+      right: -16px;
+    
+    }
+    .eye-board-target-hide {
+      position: relative;
+      top: -5px;
+      right: -16px;
+    
+    }
+  }
+
+  .lock-dash-store{
+    position: relative;
+    right: -16px;
+    // color: red;
+  }
+}
+
+.description-dash {
+  font-size: 20px;
+  color: #5f5b5b;
+}
+
+
+.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

@@ -18,28 +18,132 @@ 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 currentMonthName
+  private percentageEstimatedStoreGoal
+  private estimatedPercentageGreaterThanTarget: boolean = false
+  private goalStoreTarget
+  private messageTooltip: string = ''
+  private percentageEstimated
+  private showDashboard: boolean = false
 
-  constructor(public $scope, public $element, public $attrs, public $timeout) {}
+  constructor(
+    public $scope,
+    public $element,
+    public $attrs,
+    public $timeout,
+    public $filter,
+    public $state,
+  ) {}
 
-  $onInit() {
-    const sales = 16000
-    const target = 8000
-    const percentage = Math.round(((sales / target) * 100) / 10) * 10
-    console.log('percentage', percentage)
-    const gaugeOptions = {
+  async $onInit() {
+    this.initialize()
+    this.randomEmoji = this.generateRandomEmoji()
+    this.$scope.$watch(
+      '$ctrl.storeGoalDashboard',
+      (data) => {
+        if (data) {
+          this.configSolidGauge()
+        }
+      },
+      true,
+    )
+
+    const currentDate = new Date()
+    const currentMonth = currentDate.toLocaleString('default', { month: 'short' })
+    this.currentMonthName = currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1)
+    this.message()
+  }
+
+  message() {
+    this.messageTooltip = `Média Diária: (Valor V. / Dia A.)\n\n
+    projeção final: (Média Diária * Dias passados do mês)\n\n
+    estimativa: (Projeção final / Meta do mês) * 100
+    `
+  }
+
+  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.goalStoreTarget = this.$filter('currency')(isNaN(goal) ? 0 : goal, 'R$ ')
+    this.estimatedGoal = this.$filter('currency')(isNaN(goal) ? 0 : porcentageEstimated, 'R$ ')
+
+    if (porcentageEstimated < goal) {
+      this.estimatedPercentageGreaterThanTarget = true
+    } else {
+      this.estimatedPercentageGreaterThanTarget = false
+    }
+
+    const gaugeOptions = this.gaugeOptions()
+
+    const chartSpeed = Highcharts.chart(
+      'container-speed',
+      Highcharts.merge(gaugeOptions, {
+        yAxis: {
+          min: 0,
+          max: 100,
+        },
+
+        credits: {
+          enabled: false,
+        },
+
+        series: [
+          {
+            name: 'Speed',
+            data: [storeGoalPercentage],
+            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/>' +
+                  '<span style="font-size:12px;opacity:0.4">%</span>' +
+                  '</div>'
+                : '<div style="margin-top: -20px;">' +
+                  '<span style="font-size:25px"><i class="fa fa-lock"</i></span>' +
+                  '</div>',
+            },
+          },
+        ],
+      }),
+    )
+
+    this.updateChart(storeGoalPercentage, chartSpeed)
+  }
+  updateChart(totalPercentage, chartSpeed) {
+    const point = chartSpeed.series[0].points[0]
+    point.update(totalPercentage)
+  }
+
+  gaugeOptions() {
+    return {
       chart: {
         type: 'solidgauge',
+        backgroundColor: 'none',
+        // plotBorderWidth: 0,
+        // margin: [0, 0, 0, 0],
       },
 
       title: null,
-
       pane: {
-        center: ['50%', '85%'],
-        size: '140%',
+        center: ['50%', '90%'],
+        size: '100%',
         startAngle: -90,
         endAngle: 90,
         background: {
-          backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#fafafa',
+          backgroundColor: 'none',
           borderRadius: 5,
           innerRadius: '60%',
           outerRadius: '100%',
@@ -67,7 +171,7 @@ class MbgStoreGoalController {
         minorTickInterval: null,
         tickAmount: 2,
         title: {
-          y: -70,
+          y: -80,
         },
         labels: {
           y: 16,
@@ -81,59 +185,71 @@ class MbgStoreGoalController {
             y: 5,
             borderWidth: 0,
             useHTML: true,
+            style: {
+              textAlign: 'center',
+              width: '120px',
+              whiteSpace: 'nowrap',
+            },
           },
         },
       },
     }
+  }
 
-    // The speed gauge
-    const chartSpeed = Highcharts.chart(
-      'container-speed',
-      Highcharts.merge(gaugeOptions, {
-        yAxis: {
-          min: 0,
-          max: percentage,
-          title: {
-            text: 'Speed',
-          },
-        },
+  initialize() {
+    if (this.allowDashBoardAutoValues) {
+      this.hideValue = this.isPermissionStoreGoal ? true : false
+      return
+    }
 
-        credits: {
-          enabled: false,
-        },
+    if (this.allowedToSee && !this.allowDashBoardAutoValues) {
+      this.hideValue = this.allowDashBoardAutoValues && this.isPermissionStoreGoal ? true : false
+      return
+    }
 
-        series: [
-          {
-            name: 'Speed',
-            data: [percentage],
-            dataLabels: {
-              format:
-                '<div style="display: flex;justify-content: center;align-items: center;">' +
-                '<span style="font-size:25px">{y}</span><br/>' +
-                '<span style="font-size:12px;opacity:0.4">%</span>' +
-                '</div>',
-            },
-            tooltip: {
-              valueSuffix: ' km/h',
-            },
-          },
-        ],
-      }),
-    )
+    this.hideValue = this.allowedToSee && this.isPermissionStoreGoal ? true : false
+  }
 
-    this.updateChart(sales, target, chartSpeed)
+  stateGoNewGoal() {
+    this.$state.go('app.goal.list')
   }
 
-  updateChart(newSales, newTarget, chartSpeed) {
-    const newPercentage = Math.round(((newSales / newTarget) * 100) / 10) * 10
-    const point = chartSpeed.series[0].points[0]
-    point.update(newPercentage)
+  generateRandomEmoji = () => {
+    const emojis = ['🔐🔐🔐']
+    return emojis[0]
+  }
+
+  toggleShowValueStoreGoal() {
+    if ((this.allowedToSee !== undefined && !this.allowedToSee) || !this.isPermissionStoreGoal) {
+      if (this.allowedCallBack) {
+        this.allowedCallBack()
+      }
+      return
+    }
+
+    this.hideValue = !this.hideValue
+    this.randomEmoji = this.generateRandomEmoji()
+    this.configSolidGauge()
   }
 }
-MbgStoreGoalController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
+MbgStoreGoalController['$inject'] = [
+  '$scope',
+  '$element',
+  '$attrs',
+  '$timeout',
+  '$filter',
+  '$state',
+]
 
 const mbgStoreGoal = {
-  bindings: {},
+  bindings: {
+    allowedToSee: '=?',
+    allowedCallBack: '&?',
+    storeGoalDashboard: '=?',
+    percentageEstimatedStoreGoal: '=?',
+    isPermissionStoreGoal: '=?',
+    allowDashBoardAutoValues: '=?',
+  },
   template,
   controller: MbgStoreGoalController,
 }