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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.37.0-beta.3",
+  "version": "1.37.0-beta.4",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {
@@ -57,7 +57,8 @@
     "firebase": "7.16.0",
     "fuse.js": "^3.4.6",
     "grpc": "1.20.2",
-    "highcharts": "^6.1.0",
+    "highcharts": "^6.2.0",
+    "highcharts-more": "^0.1.7",
     "imports-loader": "^0.8.0",
     "jodit": "^3.6.11",
     "jquery": "3.4.1",
@@ -65,6 +66,7 @@
     "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,6 +86,7 @@ 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['$'] = $
@@ -153,6 +154,7 @@ const mbgComponentsModule = angular
     mbgRepasseModule,
     mbgTextEditorModule,
     mbgAceEditorModule,
+    mbgStoreGoalModule,
   ])
   .config(appConfig)
   .service('mbgAlert', MbgAlert)

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

@@ -1,8 +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
@@ -23,7 +22,7 @@ class MbgCardPanelController {
     public $element,
     public $attrs,
     public $timeout,
-    public dashboardService: DashboardService,
+    // public dashboardService: DashboardService,
     public $filter,
   ) {}
   $onInit() {
@@ -38,7 +37,7 @@ class MbgCardPanelController {
     this.panel.setNewValue = (value) => {
       this.setValue(value)
     }
-    this.getCardsGeral()
+    // this.getCardsGeral()
   }
 
   setValue = (value) => {
@@ -48,74 +47,74 @@ 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)
-  }
+  // 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', {
@@ -124,58 +123,58 @@ class MbgCardPanelController {
     })
   }
 
-  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'),
-        }
-    }
-  }
+  // 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) {
@@ -207,7 +206,7 @@ MbgCardPanelController['$inject'] = [
   '$element',
   '$attrs',
   '$timeout',
-  'dashboardService',
+  // 'dashboardService',
   '$filter',
 ]
 

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/components/mbg-status-label/mbg-status-label.ts

@@ -71,7 +71,6 @@ class MbgStatusLabelController {
         this.label = 'Inutilizada'
         break
       case 'TODO':
-      case 'OPEN':
         this.label = 'Aberta'
         break
       case 'PROCESSED':
@@ -82,9 +81,6 @@ class MbgStatusLabelController {
         break
       case 'NOT_PROCESSED':
         this.label = 'Não processado'
-        break
-      default:
-        this.label = undefined
     }
   }
 
@@ -120,7 +116,6 @@ class MbgStatusLabelController {
       case 'ENVIADA':
       case 'NAO_ENVIADA':
       case 'TODO':
-      case 'OPEN':
         this.labelClass = 'light'
         break
       case 'REVERSED':
@@ -131,8 +126,6 @@ class MbgStatusLabelController {
       case 'IN_PROGRESS':
         this.labelClass = 'primary'
         break
-      default:
-        this.labelClass = undefined
     }
   }
 }

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,2 @@
+<div id="container-speed"
+     class="chart-container"></div>

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

@@ -0,0 +1,5 @@
+.chart-container {
+  width: 300px;
+  height: 200px;
+  float: left;
+}

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

@@ -0,0 +1,141 @@
+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
+
+  constructor(public $scope, public $element, public $attrs, public $timeout) {}
+
+  $onInit() {
+    const sales = 16000
+    const target = 8000
+    const percentage = Math.round(((sales / target) * 100) / 10) * 10
+    console.log('percentage', percentage)
+    const gaugeOptions = {
+      chart: {
+        type: 'solidgauge',
+      },
+
+      title: null,
+
+      pane: {
+        center: ['50%', '85%'],
+        size: '140%',
+        startAngle: -90,
+        endAngle: 90,
+        background: {
+          backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#fafafa',
+          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: -70,
+        },
+        labels: {
+          y: 16,
+        },
+      },
+
+      plotOptions: {
+        solidgauge: {
+          borderRadius: 3,
+          dataLabels: {
+            y: 5,
+            borderWidth: 0,
+            useHTML: true,
+          },
+        },
+      },
+    }
+
+    // The speed gauge
+    const chartSpeed = Highcharts.chart(
+      'container-speed',
+      Highcharts.merge(gaugeOptions, {
+        yAxis: {
+          min: 0,
+          max: percentage,
+          title: {
+            text: 'Speed',
+          },
+        },
+
+        credits: {
+          enabled: false,
+        },
+
+        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.updateChart(sales, target, chartSpeed)
+  }
+
+  updateChart(newSales, newTarget, chartSpeed) {
+    const newPercentage = Math.round(((newSales / newTarget) * 100) / 10) * 10
+    const point = chartSpeed.series[0].points[0]
+    point.update(newPercentage)
+  }
+}
+MbgStoreGoalController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
+
+const mbgStoreGoal = {
+  bindings: {},
+  template,
+  controller: MbgStoreGoalController,
+}
+
+export { mbgStoreGoal }

package/src/index.html

@@ -159,12 +159,14 @@
   <!-- <div style="padding: 100px;">
     <div class="row">
       <div class="col-md-12">  -->
-  <!-- <div class=""
+  <div class=""
        style="height: 260px">
-    <mbg-text-editor ng-model="editorJodit"
+    <mbg-store-goal></mbg-store-goal>
+
+    <!-- <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>