@kigi/components 1.37.0-beta.7 → 1.37.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.37.0-beta.7",
+  "version": "1.37.0-beta.8",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {
@@ -57,8 +57,7 @@
     "firebase": "7.16.0",
     "fuse.js": "^3.4.6",
     "grpc": "1.20.2",
-    "highcharts": "^6.2.0",
-    "highcharts-more": "^0.1.7",
+    "highcharts": "^6.1.0",
     "imports-loader": "^0.8.0",
     "jodit": "^3.6.11",
     "jquery": "3.4.1",
@@ -66,7 +65,6 @@
     "jquery-ui": "^1.12.1",
     "jquery-ui-bundle": "^1.12.1-migrate",
     "lodash.get": "^4.4.2",
-    "moment": "^2.30.1",
     "ng-easy-infinite-scroll": "^1.0.0",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",

package/src/components/index.ts

@@ -86,7 +86,6 @@ import 'jodit/src/langs/pt_br.js'
 import { NgMaskIe } from '../helpers/ie-directive/ie-directive'
 import { mbgAceEditorModule } from './mbg-ace-editor'
 import { mbgImageUploadCropModule } from './mbg-image-upload-crop'
-import { mbgStoreGoalModule } from './mbg-store-goal'
 
 if (!window['$']) {
   window['$'] = $
@@ -154,7 +153,6 @@ const mbgComponentsModule = angular
     mbgRepasseModule,
     mbgTextEditorModule,
     mbgAceEditorModule,
-    mbgStoreGoalModule,
   ])
   .config(appConfig)
   .service('mbgAlert', MbgAlert)

package/src/components/mbg-homescreen/cards/chart-wrapper/chart-wrapper.html

@@ -2,12 +2,12 @@
     <div class="home-chart"> </div>
     <div class="divider"></div>
     <div class="home-cards">
-        <mbg-card-panel ng-repeat="panel in $ctrl.panels track by $index"
+        <mbg-card-panel ng-repeat="panel in $ctrl.panels"
                         loading="$ctrl.loading"
                         allow-dashboard-main-sales="$ctrl.allowDashboardMainSales"
                         display-values="$ctrl.displayValues"
                         allowed-to-see="$ctrl.allowedToSee"
-                        active-filter="$ctrl.activeFilter"
+                        panel-values-filter="$ctrl.panelValuesFilter"
                         allowed-call-back="$ctrl.allowedCallBack()"
                         panel="panel">
             <i class="{{ panel.icon }}"

package/src/components/mbg-homescreen/cards/chart-wrapper/chart-wrapper.ts

@@ -15,7 +15,7 @@ const mbgChartWrapper = {
     allowedToSee: '=?',
     allowedCallBack: '&?',
     allowDashboardMainSales: '=?',
-    activeFilter: '=?',
+    panelValuesFilter: '=?',
   },
   template,
   controller: MbgChartWrapperController,

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

@@ -11,17 +11,12 @@ mbg-card-panel {
     margin-right: 200px;
 }
 
-.tooltip-inner {
- background: transparent;
- margin-right: 180px;
-}
-  
-
-
+  .tooltip-inner {
+    background: transparent;
+    margin-right: 180px;
+   }
   .mbg-h-c-panel {
-    border: 1px solid #F1F1F1;
-    border-radius: 12px;
-    padding: 8px;
+    border: 1px solid #5f5b5b;
     border-radius: 12px;
     padding: 8px;
 

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

@@ -1,6 +1,5 @@
 import './panel.scss'
 import template from './panel.html'
-import { DashboardService } from 'services/dashboard-service'
 import moment from 'moment'
 
 class MbgCardPanelController {
@@ -11,20 +10,10 @@ class MbgCardPanelController {
   public allowedToSee: boolean
   private allowedCallBack: Function
   private allowDashboardMainSales
-  private activeFilter: any
-  private totalSalesFilter = false
-  private index
-  private messagetooltip = ''
+  private panelValuesFilter
   private valuesEqual: boolean = false
 
-  constructor(
-    public $scope,
-    public $element,
-    public $attrs,
-    public $timeout,
-    public dashboardService: DashboardService,
-    public $filter,
-  ) {}
+  constructor(public $scope, public $element, public $attrs, public $timeout, public $filter) {}
   $onInit() {
     this.syncValue()
     this.$scope.$watch('$ctrl.displayValues', (data) => {
@@ -32,12 +21,78 @@ class MbgCardPanelController {
       this.hideValue = !data
     })
 
+    this.$scope.$watch('$ctrl.panelValuesFilter', (data) => {
+      this.panelValuesFilter = data
+      if (this.panelValuesFilter) {
+        this.panelValuesFiltered()
+      }
+    })
     this.randomEmoji = this.generateRandomEmoji()
 
     this.panel.setNewValue = (value) => {
       this.setValue(value)
     }
-    // this.getCardsGeral()
+  }
+
+  messagesTooltipHtml(label, dateIni, dateFim, panel) {
+    this.panel.message = `
+    <div class="tooltip-chart-panel">
+        <label>Comparado as data de:</label>
+        <label>${
+          moment(dateIni).format('DD-MM') + ' até ' + moment(dateFim).format('DD-MM')
+        }</label>
+        <label>${label}: ${
+      this.panel.isCurrency ? this.$filter('currency')(isNaN(panel) ? 0 : panel, 'R$ ') : panel
+    }</label>
+    </div>`
+  }
+
+  panelValuesFiltered() {
+    this.$timeout(() => {
+      if (this.panel.countSales) {
+        this.panel.increasedValue = this.panel.value > this.panelValuesFilter.countSales
+        this.valuesEqual = this.panel.value === this.panelValuesFilter.countSales
+        this.messagesTooltipHtml(
+          'Vendas',
+          this.panelValuesFilter.dateIni,
+          this.panelValuesFilter.dateFim,
+          this.panelValuesFilter.countSales,
+        )
+      }
+
+      if (this.panel.countItems) {
+        this.panel.increasedValue = this.panel.value > this.panelValuesFilter.countItems
+        this.valuesEqual = this.panel.value === this.panelValuesFilter.countItems
+        this.messagesTooltipHtml(
+          'Items',
+          this.panelValuesFilter.dateIni,
+          this.panelValuesFilter.dateFim,
+          this.panelValuesFilter.countItems,
+        )
+      }
+
+      if (this.panel.avgSales) {
+        this.panel.increasedValue = this.panel.value > this.panelValuesFilter.avgSales
+        this.valuesEqual = this.panel.value === this.panelValuesFilter.avgSales
+        this.messagesTooltipHtml(
+          'Valor',
+          this.panelValuesFilter.dateIni,
+          this.panelValuesFilter.dateFim,
+          this.panelValuesFilter.avgSales,
+        )
+      }
+
+      if (this.panel.totalSales) {
+        this.panel.increasedValue = this.panel.value > this.panelValuesFilter.totalSales
+        this.valuesEqual = this.panel.value === this.panelValuesFilter.totalSales
+        this.messagesTooltipHtml(
+          'Valor',
+          this.panelValuesFilter.dateIni,
+          this.panelValuesFilter.dateFim,
+          this.panelValuesFilter.totalSales,
+        )
+      }
+    }, 1000)
   }
 
   setValue = (value) => {
@@ -47,135 +102,6 @@ class MbgCardPanelController {
     }, 1000)
   }
 
-  // async getCardsGeral() {
-  //   this.$timeout(async () => {
-  //     const { dateIni, dateFim } = this.getFilterDate()
-  //     let response = await this.dashboardService
-  //       .getCardsTotalSalesDashboardByFilter({ dateIni, dateFim })
-  //       .then((response) => response.data)
-
-  //     const values = {
-  //       totalSales: response.totalSales ? response.totalSales : 0,
-  //       avgSales: response.avgSales ? response.avgSales : 0,
-  //       countSales: response.countSales || 0,
-  //       countItems: response.countItems || 0,
-  //     }
-
-  //     if (this.panel.countSales) {
-  //       this.panel.increasedValue = this.panel.value > values.countSales
-  //       this.valuesEqual = this.panel.value === values.countSales
-  //       this.panel.message = `
-  //      <div class="tooltip-chart-panel">
-  //          <label>Comparado as data de:</label>
-  //          <label>${
-  //            moment(dateIni).format('DD-MM') + ' até ' + moment(dateFim).format('DD-MM')
-  //          }</label>
-  //          <label>Vendas: ${values.countSales}</label>
-  //      </div>`
-  //     }
-
-  //     if (this.panel.countItems) {
-  //       this.panel.increasedValue = this.panel.value > values.countItems
-  //       this.valuesEqual = this.panel.value === values.countItems
-  //       this.panel.message = `
-  //      <div class="tooltip-chart-panel">
-  //          <label>Comparado as data de:</label>
-  //          <label>${
-  //            moment(dateIni).format('DD-MM') + ' até ' + moment(dateFim).format('DD-MM')
-  //          }</label>
-  //          <label>Items: ${values.countItems}</label>
-  //      </div>`
-  //     }
-
-  //     if (this.panel.avgSales) {
-  //       this.panel.increasedValue = this.panel.value > values.avgSales
-  //       this.valuesEqual = this.panel.value === values.avgSales
-  //       this.panel.message = `
-  //      <div class="tooltip-chart-panel">
-  //          <label>Comparado as data de:</label>
-  //          <label>${
-  //            moment(dateIni).format('DD-MM') + ' até ' + moment(dateFim).format('DD-MM')
-  //          }</label>
-  //          <label>Valor: ${this.$filter('currency')(values.avgSales, 'R$ ')}</label>
-  //      </div>`
-  //     }
-
-  //     if (this.panel.totalSales) {
-  //       this.panel.increasedValue = this.panel.value > values.totalSales
-  //       this.valuesEqual = this.panel.value === values.totalSales
-
-  //       this.panel.message = `
-  //     <div class="tooltip-chart-panel">
-  //         <label>Comparado as data de:</label>
-  //         <label>${
-  //           moment(dateIni).format('DD-MM') + ' até ' + moment(dateFim).format('DD-MM')
-  //         }</label>
-  //         <label>Valor: ${this.$filter('currency')(values.totalSales, 'R$ ')}</label>
-  //     </div>`
-  //     }
-  //   }, 1000)
-  // }
-
-  formatToBRL(value) {
-    return value.toLocaleString('pt-BR', {
-      style: 'currency',
-      currency: 'BRL',
-    })
-  }
-
-  // getFilterDate() {
-  //   this.activeFilter = this.activeFilter || { name: 'Hoje', key: 'TODAY' }
-  //   switch (this.activeFilter.key) {
-  //     case 'TODAY':
-  //       return {
-  //         dateIni: moment()
-  //           .subtract(1, 'd')
-  //           .set({ hours: 0, minutes: 0, seconds: 0 })
-  //           .format('YYYY-MM-DD HH:mm:ss'),
-  //         dateFim: moment()
-  //           .subtract(1, 'd')
-  //           .set({ hours: 23, minutes: 59, seconds: 59 })
-  //           .format('YYYY-MM-DD HH:mm:ss'),
-  //       }
-  //     case 'YESTERDAY':
-  //       return {
-  //         dateIni: moment()
-  //           .subtract(2, 'd')
-  //           .set({ hours: 0, minutes: 0, seconds: 0 })
-  //           .format('YYYY-MM-DD HH:mm:ss'),
-  //         dateFim: moment()
-  //           .subtract(2, 'd')
-  //           .set({ hours: 23, minutes: 59, seconds: 59 })
-  //           .format('YYYY-MM-DD HH:mm:ss'),
-  //       }
-  //     case 'THIS_WEEK':
-  //       const startOfLastWeek = moment()
-  //         .subtract(7, 'days')
-  //         .startOf('week')
-  //         .set({ hours: 0, minutes: 0, seconds: 0 })
-  //       const lastWeekToday = moment()
-  //         .subtract(7, 'days')
-  //         .set({ hours: 23, minutes: 59, seconds: 59 })
-
-  //       return {
-  //         dateIni: startOfLastWeek.format('YYYY-MM-DD HH:mm:ss'),
-  //         dateFim: lastWeekToday.format('YYYY-MM-DD HH:mm:ss'),
-  //       }
-
-  //     default:
-  //       return {
-  //         dateIni: moment()
-  //           .subtract(1, 'month')
-  //           .set({ date: 1, hours: 23, minutes: 59, seconds: 59 })
-  //           .format('YYYY-MM-DD HH:mm:ss'),
-  //         dateFim: moment()
-  //           .subtract(1, 'month')
-  //           .set({ date: moment().date(), hours: 0, minutes: 0, seconds: 0 })
-  //           .format('YYYY-MM-DD HH:mm:ss'),
-  //       }
-  //   }
-  // }
-
   syncValue() {
     if (this.panel.sync) {
       this.panel.loading = true
@@ -201,14 +127,7 @@ class MbgCardPanelController {
   }
 }
 
-MbgCardPanelController['$inject'] = [
-  '$scope',
-  '$element',
-  '$attrs',
-  '$timeout',
-  'dashboardService',
-  '$filter',
-]
+MbgCardPanelController['$inject'] = ['$scope', '$element', '$attrs', '$timeout', '$filter']
 
 const mbgCardPanel = {
   transclude: true,
@@ -219,7 +138,7 @@ const mbgCardPanel = {
     allowedToSee: '=?',
     allowedCallBack: '&?',
     allowDashboardMainSales: '=?',
-    activeFilter: '=?',
+    panelValuesFilter: '=?',
   },
   template,
   controller: MbgCardPanelController,

package/src/components/mbg-homescreen/charts/bar-line/bar-line.html

@@ -5,7 +5,7 @@
                        allow-dashboard-main-sales="$ctrl.allowDashboardMainSales"
                        display-values="$ctrl.displayValues"
                        allowed-to-see="$ctrl.allowedToSee"
-                       active-filter="$ctrl.activeFilter"
+                       panel-values-filter="$ctrl.panelValuesFilter"
                        allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
 
     <div ng-show="!$ctrl.hasData()"

package/src/components/mbg-homescreen/charts/bar-line/bar-line.ts

@@ -257,7 +257,7 @@ const mbgChartBarLine = {
     allowedToSee: '=?',
     allowedCallBack: '&?',
     allowDashboardMainSales: '=?',
-    activeFilter: '=?',
+    panelValuesFilter: '=?',
   },
   template,
   controller: MbgChartBarLineController,

package/src/components/mbg-homescreen/charts/bar-line-pie/bar-line-pie.html

@@ -5,7 +5,7 @@
                        display-values="$ctrl.displayValues"
                        allow-dashboard-main-sales="$ctrl.allowDashboardMainSales"
                        allowed-to-see="$ctrl.allowedToSee"
-                       active-filter="$ctrl.activeFilter"
+                       panel-values-filter="$ctrl.panelValuesFilter"
                        allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
 
     <div ng-show="!$ctrl.hasData()"

package/src/components/mbg-homescreen/charts/bar-line-pie/bar-line-pie.ts

@@ -282,7 +282,7 @@ const mbgChartBarLinePie = {
     allowedToSee: '=?',
     allowedCallBack: '&?',
     allowDashboardMainSales: '=?',
-    activeFilter: '=?',
+    panelValuesFilter: '=?',
   },
   template,
   controller: MbgChartBarLinePieController,

package/src/components/mbg-homescreen/charts/line/line.html

@@ -5,7 +5,7 @@
                        display-values="$ctrl.displayValues"
                        allow-dashboard-main-sales="$ctrl.allowDashboardMainSales"
                        allowed-to-see="$ctrl.allowedToSee"
-                       active-filter="$ctrl.activeFilter"
+                       panel-values-filter="$ctrl.panelValuesFilter"
                        allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
 
     <div ng-show="!$ctrl.hasData()"

package/src/components/mbg-homescreen/charts/line/line.ts

@@ -278,7 +278,7 @@ const mbgChartLine = {
     allowedToSee: '=?',
     allowedCallBack: '&?',
     allowDashboardMainSales: '=?',
-    activeFilter: '=?',
+    panelValuesFilter: '=?',
   },
   template,
   controller: MbgChartLineController,

package/src/components/mbg-homescreen/index.ts

@@ -14,4 +14,3 @@ const mbgHomeScreenModule = angular
   .component('mbgChartWrapper', mbgChartWrapper).name
 
 export { mbgHomeScreenModule }
-

package/src/components/mbg-homescreen/mbg-homescreen.html

@@ -52,7 +52,7 @@
                     loading="$ctrl.loading"
                     allowed-to-see="$ctrl.allowedToSee"
                     allowed-call-back="$ctrl.allowedCallBack()"
-                    active-filter="$ctrl.activeFilter"
+                    panel-values-filter="$ctrl.panelValuesFilter"
                     ng-if="$ctrl.chart && $ctrl.chart.type == 'line'"></mbg-chart-line>
     <mbg-chart-bar-line chart="$ctrl.chart"
                         panels="$ctrl.cards"
@@ -61,7 +61,7 @@
                         loading="$ctrl.loading"
                         allowed-to-see="$ctrl.allowedToSee"
                         allowed-call-back="$ctrl.allowedCallBack()"
-                        active-filter="$ctrl.activeFilter"
+                        panel-values-filter="$ctrl.panelValuesFilter"
                         ng-if="$ctrl.chart && $ctrl.chart.type == 'barline'"></mbg-chart-bar-line>
     <mbg-chart-bar-line-pie chart="$ctrl.chart"
                             panels="$ctrl.cards"
@@ -70,7 +70,7 @@
                             loading="$ctrl.loading"
                             allowed-to-see="$ctrl.allowedToSee"
                             allowed-call-back="$ctrl.allowedCallBack()"
-                            active-filter="$ctrl.activeFilter"
+                            panel-values-filter="$ctrl.panelValuesFilter"
                             ng-if="$ctrl.chart && $ctrl.chart.type == 'barlinepie'"></mbg-chart-bar-line-pie>
     <div class="display-values">
       <a ng-show="!$ctrl.displayValues"

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

@@ -22,7 +22,6 @@ class MbgHomescreenController {
     isCurrency: boolean
   }[]
   private allowDashboardMainSales
-  private filterActive
 
   constructor(public $scope, public $element, public $attrs, public $timeout) {}
 
@@ -64,7 +63,6 @@ class MbgHomescreenController {
         return tab
       })
       this.activeFilter = item
-      this.filterActive = this.activeFilter
       item.active = true
       if (this.tabs[this.activeIndex].executeFilter) {
         this.tabs[this.activeIndex].executeFilter(this.config)
@@ -80,7 +78,6 @@ class MbgHomescreenController {
         this.tabs.forEach((tab, index) => (this.tabs[index].active = false))
         this.tabs[tabIndex].active = true
         this.activeFilter = (this.tabs[tabIndex].filters || []).find((filter) => filter.active)
-        this.filterActive = this.activeFilter
         this.cards = this.tabs[tabIndex].cards
         this.chart = this.tabs[tabIndex].chart
       }
@@ -109,6 +106,7 @@ const mbgHomescreen = {
     allowedCallBack: '&?',
     activeFilter: '=?',
     allowDashboardMainSales: '=?',
+    panelValuesFilter: '=?',
   },
   template,
   controller: MbgHomescreenController,

package/src/components/mbg-input-date/mbg-input-date.html

@@ -30,7 +30,6 @@
          ng-keydown="$ctrl.ngKeydown({ $event })"
          ui-date-mask="{{ $ctrl.format }}"
          only-month-year="$ctrl.onlyMonthYear"
-         ng-class="{'input-date':$ctrl.titleMode}"
          mbg-datepicker />
   <!-- between dates -->
   <div class="mbg-date-between"

package/src/components/mbg-input-date/mbg-input-date.scss

@@ -1,9 +1,4 @@
 .mb-input-date-wrapper {
-  .input-date {
-    width: 150px !important;
-    height: 28px !important;
-  }
-
   input {
     width: 100%;
   }
@@ -19,6 +14,7 @@
   }
 }
 
+
 body {
   .datepicker-top-left, .datepicker-top-right {
     border-top-color: var(--primary);

package/src/components/mbg-input-date/mbg-input-date.ts

@@ -18,7 +18,6 @@ class MbgInputDateController {
   public filterDate: Function
   public onlyMonthYear: boolean
 
-
   constructor(public $scope, public $element, public $attrs, public $timeout) {
     if ($attrs.ngRequired === '') {
       this.ngRequired = true
@@ -132,7 +131,6 @@ const mbgInputDate = {
     between: '=?',
     filterDate: '&?',
     onlyMonthYear: '=?',
-    titleMode: '=?',
   },
   template,
   controller: MbgInputDateController,

package/src/index.html

@@ -159,14 +159,12 @@
   <!-- <div style="padding: 100px;">
     <div class="row">
       <div class="col-md-12">  -->
-  <div class=""
+  <!-- <div class=""
        style="height: 260px">
-    <mbg-store-goal></mbg-store-goal>
-
-    <!-- <mbg-text-editor ng-model="editorJodit"
+    <mbg-text-editor ng-model="editorJodit"
                      ng-if="testeeditorif"
-                     ng-change="changeEditorTeste(value)"></mbg-text-editor> -->
-  </div>
+                     ng-change="changeEditorTeste(value)"></mbg-text-editor>
+  </div> -->
   <!-- <mbg-address ng-model="address"></mbg-address>
         <pre>{{ address | json }}</pre>
       </div>

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

@@ -1,8 +0,0 @@
-import * as angular from 'angular'
-import { mbgStoreGoal } from './mbg-store-goal'
-
-const mbgStoreGoalModule = angular
-  .module('mbg.components.mbgStatusLabel', [])
-  .component('mbgStoreGoal', mbgStoreGoal).name
-
-export { mbgStoreGoalModule }

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

@@ -1,62 +0,0 @@
-<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,143 +0,0 @@
-.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: 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

@@ -1,257 +0,0 @@
-import './mbg-store-goal.scss'
-import template from './mbg-store-goal.html'
-import * as Highcharts from 'highcharts'
-import * as HighchartsMore from 'highcharts/highcharts-more.js'
-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'
-
-// Inicialize os módulos
-HighchartsMore(Highcharts)
-SolidGauge(Highcharts)
-Exporting(Highcharts)
-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 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,
-    public $filter,
-    public $state,
-  ) {}
-
-  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%', '90%'],
-        size: '100%',
-        startAngle: -90,
-        endAngle: 90,
-        background: {
-          backgroundColor: 'none',
-          borderRadius: 5,
-          innerRadius: '60%',
-          outerRadius: '100%',
-          shape: 'arc',
-        },
-      },
-
-      exporting: {
-        enabled: false,
-      },
-
-      tooltip: {
-        enabled: false,
-      },
-
-      // the value axis
-      yAxis: {
-        stops: [
-          [0.1, '#DF5353'], // Vermelho para até 10% da meta
-          [0.5, '#DDDF0D'], // Amarelo entre 10% e 50%
-          [0.9, '#55BF3B'], // Verde para mais de 50%
-        ],
-        lineWidth: 0,
-        tickWidth: 0,
-        minorTickInterval: null,
-        tickAmount: 2,
-        title: {
-          y: -80,
-        },
-        labels: {
-          y: 16,
-        },
-      },
-
-      plotOptions: {
-        solidgauge: {
-          borderRadius: 3,
-          dataLabels: {
-            y: 5,
-            borderWidth: 0,
-            useHTML: true,
-            style: {
-              textAlign: 'center',
-              width: '120px',
-              whiteSpace: 'nowrap',
-            },
-          },
-        },
-      },
-    }
-  }
-
-  initialize() {
-    if (this.allowDashBoardAutoValues) {
-      this.hideValue = this.isPermissionStoreGoal ? true : false
-      return
-    }
-
-    if (this.allowedToSee && !this.allowDashBoardAutoValues) {
-      this.hideValue = this.allowDashBoardAutoValues && this.isPermissionStoreGoal ? true : false
-      return
-    }
-
-    this.hideValue = this.allowedToSee && this.isPermissionStoreGoal ? true : false
-  }
-
-  stateGoNewGoal() {
-    this.$state.go('app.goal.list')
-  }
-
-  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',
-  '$filter',
-  '$state',
-]
-
-const mbgStoreGoal = {
-  bindings: {
-    allowedToSee: '=?',
-    allowedCallBack: '&?',
-    storeGoalDashboard: '=?',
-    percentageEstimatedStoreGoal: '=?',
-    isPermissionStoreGoal: '=?',
-    allowDashBoardAutoValues: '=?',
-  },
-  template,
-  controller: MbgStoreGoalController,
-}
-
-export { mbgStoreGoal }