@kigi/components 1.37.0 β†’ 1.38.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kigi/components",
3
- "version": "1.37.0",
3
+ "version": "1.38.0-beta.1",
4
4
  "description": "@kigi/components",
5
5
  "main": "src/components/index.ts",
6
6
  "scripts": {
@@ -57,7 +57,8 @@
57
57
  "firebase": "7.16.0",
58
58
  "fuse.js": "^3.4.6",
59
59
  "grpc": "1.20.2",
60
- "highcharts": "^6.1.0",
60
+ "highcharts": "^6.2.0",
61
+ "highcharts-more": "^0.1.7",
61
62
  "imports-loader": "^0.8.0",
62
63
  "jodit": "^3.6.11",
63
64
  "jquery": "3.4.1",
@@ -65,6 +66,7 @@
65
66
  "jquery-ui": "^1.12.1",
66
67
  "jquery-ui-bundle": "^1.12.1-migrate",
67
68
  "lodash.get": "^4.4.2",
69
+ "moment": "^2.30.1",
68
70
  "ng-easy-infinite-scroll": "^1.0.0",
69
71
  "postcss-flexbugs-fixes": "^4.1.0",
70
72
  "postcss-import": "^12.0.1",
@@ -76,7 +76,6 @@ import { mbgSelectMultiListModule } from './mbg-select-multi-list'
76
76
  import { mbgProductInlineModule } from './mbg-product-inline'
77
77
  import { NgCountCharacter } from '../helpers/count-character/count-character'
78
78
  import { mbgPopupSelectModule } from './mbg-popup-select'
79
- import { mbgStatusLabelModule } from './mbg-status-label'
80
79
  import { mbgDynamicCubeModule } from './mbg-dynamic-cube'
81
80
  import { mbgTimelineModule } from './mbg-timeline'
82
81
  import { MbgActiveScroll } from '../helpers/mbg-active-scroll/mbg-active-scroll'
@@ -86,6 +85,8 @@ import 'jodit/src/langs/pt_br.js'
86
85
  import { NgMaskIe } from '../helpers/ie-directive/ie-directive'
87
86
  import { mbgAceEditorModule } from './mbg-ace-editor'
88
87
  import { mbgImageUploadCropModule } from './mbg-image-upload-crop'
88
+ import { mbgStoreGoalModule } from './mbg-store-goal'
89
+ import { mbgStatusLabelModule } from './mbg-status-label'
89
90
 
90
91
  if (!window['$']) {
91
92
  window['$'] = $
@@ -147,12 +148,13 @@ const mbgComponentsModule = angular
147
148
  mbgProductInlineModule,
148
149
  // mbgEditorModule,
149
150
  mbgPopupSelectModule,
150
- mbgStatusLabelModule,
151
151
  mbgDynamicCubeModule,
152
152
  mbgTimelineModule,
153
153
  mbgRepasseModule,
154
154
  mbgTextEditorModule,
155
155
  mbgAceEditorModule,
156
+ mbgStoreGoalModule,
157
+ mbgStatusLabelModule,
156
158
  ])
157
159
  .config(appConfig)
158
160
  .service('mbgAlert', MbgAlert)
@@ -2,11 +2,12 @@
2
2
  <div class="home-chart"> </div>
3
3
  <div class="divider"></div>
4
4
  <div class="home-cards">
5
- <mbg-card-panel ng-repeat="panel in $ctrl.panels"
5
+ <mbg-card-panel ng-repeat="panel in $ctrl.panels track by $index"
6
6
  loading="$ctrl.loading"
7
7
  allow-dashboard-main-sales="$ctrl.allowDashboardMainSales"
8
8
  display-values="$ctrl.displayValues"
9
9
  allowed-to-see="$ctrl.allowedToSee"
10
+ active-filter="$ctrl.activeFilter"
10
11
  panel-values-filter="$ctrl.panelValuesFilter"
11
12
  allowed-call-back="$ctrl.allowedCallBack()"
12
13
  panel="panel">
@@ -15,6 +15,7 @@ const mbgChartWrapper = {
15
15
  allowedToSee: '=?',
16
16
  allowedCallBack: '&?',
17
17
  allowDashboardMainSales: '=?',
18
+ activeFilter: '=?',
18
19
  panelValuesFilter: '=?',
19
20
  },
20
21
  template,
@@ -11,12 +11,17 @@ mbg-card-panel {
11
11
  margin-right: 200px;
12
12
  }
13
13
 
14
- .tooltip-inner {
15
- background: transparent;
16
- margin-right: 180px;
17
- }
14
+ .tooltip-inner {
15
+ background: transparent;
16
+ margin-right: 180px;
17
+ }
18
+
19
+
20
+
18
21
  .mbg-h-c-panel {
19
- border: 1px solid #5f5b5b;
22
+ border: 1px solid #F1F1F1;
23
+ border-radius: 12px;
24
+ padding: 8px;
20
25
  border-radius: 12px;
21
26
  padding: 8px;
22
27
 
@@ -32,6 +32,7 @@ class MbgCardPanelController {
32
32
  this.panel.setNewValue = (value) => {
33
33
  this.setValue(value)
34
34
  }
35
+ // this.getCardsGeral()
35
36
  }
36
37
 
37
38
  messagesTooltipHtml(label, dateIni, dateFim, panel) {
@@ -102,6 +103,13 @@ class MbgCardPanelController {
102
103
  }, 1000)
103
104
  }
104
105
 
106
+ formatToBRL(value) {
107
+ return value.toLocaleString('pt-BR', {
108
+ style: 'currency',
109
+ currency: 'BRL',
110
+ })
111
+ }
112
+
105
113
  syncValue() {
106
114
  if (this.panel.sync) {
107
115
  this.panel.loading = true
@@ -138,6 +146,7 @@ const mbgCardPanel = {
138
146
  allowedToSee: '=?',
139
147
  allowedCallBack: '&?',
140
148
  allowDashboardMainSales: '=?',
149
+ activeFilter: '=?',
141
150
  panelValuesFilter: '=?',
142
151
  },
143
152
  template,
@@ -5,6 +5,7 @@
5
5
  allow-dashboard-main-sales="$ctrl.allowDashboardMainSales"
6
6
  display-values="$ctrl.displayValues"
7
7
  allowed-to-see="$ctrl.allowedToSee"
8
+ active-filter="$ctrl.activeFilter"
8
9
  panel-values-filter="$ctrl.panelValuesFilter"
9
10
  allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
10
11
 
@@ -257,6 +257,7 @@ const mbgChartBarLine = {
257
257
  allowedToSee: '=?',
258
258
  allowedCallBack: '&?',
259
259
  allowDashboardMainSales: '=?',
260
+ activeFilter: '=?',
260
261
  panelValuesFilter: '=?',
261
262
  },
262
263
  template,
@@ -5,6 +5,7 @@
5
5
  display-values="$ctrl.displayValues"
6
6
  allow-dashboard-main-sales="$ctrl.allowDashboardMainSales"
7
7
  allowed-to-see="$ctrl.allowedToSee"
8
+ active-filter="$ctrl.activeFilter"
8
9
  panel-values-filter="$ctrl.panelValuesFilter"
9
10
  allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
10
11
 
@@ -282,6 +282,7 @@ const mbgChartBarLinePie = {
282
282
  allowedToSee: '=?',
283
283
  allowedCallBack: '&?',
284
284
  allowDashboardMainSales: '=?',
285
+ activeFilter: '=?',
285
286
  panelValuesFilter: '=?',
286
287
  },
287
288
  template,
@@ -5,6 +5,7 @@
5
5
  display-values="$ctrl.displayValues"
6
6
  allow-dashboard-main-sales="$ctrl.allowDashboardMainSales"
7
7
  allowed-to-see="$ctrl.allowedToSee"
8
+ active-filter="$ctrl.activeFilter"
8
9
  panel-values-filter="$ctrl.panelValuesFilter"
9
10
  allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
10
11
 
@@ -278,6 +278,7 @@ const mbgChartLine = {
278
278
  allowedToSee: '=?',
279
279
  allowedCallBack: '&?',
280
280
  allowDashboardMainSales: '=?',
281
+ activeFilter: '=?',
281
282
  panelValuesFilter: '=?',
282
283
  },
283
284
  template,
@@ -14,3 +14,4 @@ const mbgHomeScreenModule = angular
14
14
  .component('mbgChartWrapper', mbgChartWrapper).name
15
15
 
16
16
  export { mbgHomeScreenModule }
17
+
@@ -52,6 +52,7 @@
52
52
  loading="$ctrl.loading"
53
53
  allowed-to-see="$ctrl.allowedToSee"
54
54
  allowed-call-back="$ctrl.allowedCallBack()"
55
+ active-filter="$ctrl.activeFilter"
55
56
  panel-values-filter="$ctrl.panelValuesFilter"
56
57
  ng-if="$ctrl.chart && $ctrl.chart.type == 'line'"></mbg-chart-line>
57
58
  <mbg-chart-bar-line chart="$ctrl.chart"
@@ -61,6 +62,7 @@
61
62
  loading="$ctrl.loading"
62
63
  allowed-to-see="$ctrl.allowedToSee"
63
64
  allowed-call-back="$ctrl.allowedCallBack()"
65
+ active-filter="$ctrl.activeFilter"
64
66
  panel-values-filter="$ctrl.panelValuesFilter"
65
67
  ng-if="$ctrl.chart && $ctrl.chart.type == 'barline'"></mbg-chart-bar-line>
66
68
  <mbg-chart-bar-line-pie chart="$ctrl.chart"
@@ -70,6 +72,7 @@
70
72
  loading="$ctrl.loading"
71
73
  allowed-to-see="$ctrl.allowedToSee"
72
74
  allowed-call-back="$ctrl.allowedCallBack()"
75
+ active-filter="$ctrl.activeFilter"
73
76
  panel-values-filter="$ctrl.panelValuesFilter"
74
77
  ng-if="$ctrl.chart && $ctrl.chart.type == 'barlinepie'"></mbg-chart-bar-line-pie>
75
78
  <div class="display-values">
@@ -22,6 +22,7 @@ class MbgHomescreenController {
22
22
  isCurrency: boolean
23
23
  }[]
24
24
  private allowDashboardMainSales
25
+ private filterActive
25
26
 
26
27
  constructor(public $scope, public $element, public $attrs, public $timeout) {}
27
28
 
@@ -63,6 +64,7 @@ class MbgHomescreenController {
63
64
  return tab
64
65
  })
65
66
  this.activeFilter = item
67
+ this.filterActive = this.activeFilter
66
68
  item.active = true
67
69
  if (this.tabs[this.activeIndex].executeFilter) {
68
70
  this.tabs[this.activeIndex].executeFilter(this.config)
@@ -78,6 +80,7 @@ class MbgHomescreenController {
78
80
  this.tabs.forEach((tab, index) => (this.tabs[index].active = false))
79
81
  this.tabs[tabIndex].active = true
80
82
  this.activeFilter = (this.tabs[tabIndex].filters || []).find((filter) => filter.active)
83
+ this.filterActive = this.activeFilter
81
84
  this.cards = this.tabs[tabIndex].cards
82
85
  this.chart = this.tabs[tabIndex].chart
83
86
  }
@@ -0,0 +1,8 @@
1
+ import * as angular from 'angular'
2
+ import { mbgStoreGoal } from './mbg-store-goal'
3
+
4
+ const mbgStoreGoalModule = angular
5
+ .module('mbg.components.mbgStoreGoal', [])
6
+ .component('mbgStoreGoal', mbgStoreGoal).name
7
+
8
+ export { mbgStoreGoalModule }
@@ -0,0 +1,63 @@
1
+ <div ng-class="{'opacity-dash-goal': !$ctrl.isPermissionStoreGoal}"
2
+ class="store-goal-wrapper"
3
+ ng-show="$ctrl.showDashboard">
4
+ <div class="description-container-dash">
5
+ <p class="description-dash">Meta do mΓͺs / {{$ctrl.currentMonthName}}</p>
6
+ <div class="mbg-h-c-tone-s-icon-dash"
7
+ ng-click="$ctrl.toggleShowValueStoreGoal(false)">
8
+ <span class="link-store"
9
+ ng-if="$ctrl.estimatedPercentageGreaterThanTarget"
10
+ uib-tooltip="{{$ctrl.percentageEstimated}}"
11
+ tooltip-placement="left">
12
+ <i class="fa fa-exclamation-circle"
13
+ aria-hidden="true"></i></span>
14
+ <i class="fa fa-lock lock-dash-store"
15
+ aria-hidden="true"
16
+ uib-tooltip="Sem permissΓ£o para visualizar"
17
+ tooltip-placement="left"
18
+ ng-if="!$ctrl.isPermissionStoreGoal"></i>
19
+ <i ng-if="$ctrl.hideValue && $ctrl.isPermissionStoreGoal"
20
+ disable-animate
21
+ class="far fa-eye eye-board-target"></i>
22
+ <i ng-if="!$ctrl.hideValue && $ctrl.isPermissionStoreGoal"
23
+ disable-animate
24
+ class="far fa-eye-slash eye-board-target"></i>
25
+
26
+ </div>
27
+ </div>
28
+ <div class="line-pay"></div>
29
+ <div class="goal-target">
30
+ <p ng-if="$ctrl.hideValue">Meta: <strong>{{$ctrl.goalStoreTarget }}</strong></p>
31
+ <p ng-if="!$ctrl.hideValue">Meta: <i class="fa fa-lock"
32
+ aria-hidden="true"
33
+ uib-tooltip="Sem permissΓ£o para visualizar"></i></p>
34
+ </div>
35
+ <div class="goal-day">
36
+ <p class="estimate-goal"
37
+ ng-if="!$ctrl.hideValue">Estimativa da meta: <i class="fa fa-lock"
38
+ aria-hidden="true"
39
+ uib-tooltip="Sem permissΓ£o para visualizar"></i>
40
+ </p>
41
+ <p class="estimate-goal"
42
+ ng-if="$ctrl.hideValue">Estimativa da meta: <strong>{{$ctrl.estimatedGoal }}</strong>
43
+ <p class="estimated "
44
+ ng-if="$ctrl.hideValue"
45
+ tooltip-placement="right"
46
+ uib-tooltip="{{$ctrl.messageTooltip}}">
47
+ <i class="fa fa-exclamation-circle"
48
+ aria-hidden="true"></i>
49
+ </p>
50
+ </p>
51
+ </div>
52
+
53
+ <div class="dashboard-wrapper">
54
+ <div class="chart-container"
55
+ id="container-speed"></div>
56
+ </div>
57
+ </div>
58
+
59
+ <div ng-show="!$ctrl.showDashboard"
60
+ class="hide-goal">
61
+ <label for="">Sem meta cadastrada. Defina sua meta hoje. <a class="state-goal"
62
+ ng-click="$ctrl.stateGoNewGoal()">Clique aqui</a> </label>
63
+ </div>
@@ -0,0 +1,151 @@
1
+ .store-goal-wrapper{
2
+
3
+ .dashboard-wrapper {
4
+ display: flex;
5
+ justify-content: center;
6
+ align-items: center;
7
+ height: 100%;
8
+ width: 100%;
9
+ }
10
+
11
+ .chart-container {
12
+ display: flex;
13
+ justify-content: center;
14
+ align-items: center;
15
+ width: 300px;
16
+ height: auto;
17
+ position: relative;
18
+ left: 2%;
19
+ bottom: 252px;
20
+ }
21
+
22
+ .opacity-dash-goal{
23
+ opacity: 0.5;
24
+ }
25
+
26
+ .goal-target{
27
+ position: relative;
28
+ top: 192px;
29
+ font-size: 14px;
30
+ color: #5f5b5b;
31
+ }
32
+
33
+
34
+ .tooltip-inner {
35
+ background:#ff8c00 !important;
36
+ color: #000000 !important;
37
+ width: 300px;
38
+ }
39
+
40
+ @keyframes blink {
41
+ 0% {
42
+ opacity: 1;
43
+ }
44
+ 50% {
45
+ opacity: 0;
46
+ }
47
+ 100% {
48
+ opacity: 1;
49
+ }
50
+ }
51
+
52
+ .estimate-goal{
53
+ font-size: 14px;
54
+ color: #5f5b5b;
55
+
56
+ }
57
+
58
+ .estimated{
59
+ position: relative;
60
+ left: -124px;
61
+ color: cornflowerblue;
62
+
63
+
64
+ .tooltip-inner{
65
+ background:#95c5ec !important;
66
+ }
67
+ }
68
+
69
+
70
+ .link-store{
71
+ animation: blink 1s infinite;
72
+ color: #ff8c00;
73
+ position: relative;
74
+ font-size: 22px;
75
+ top: 16px;
76
+ right: -38px;
77
+ }
78
+
79
+ .goal-day {
80
+ display: flex;
81
+ justify-content: space-between;
82
+ align-items: end;
83
+ position: relative;
84
+ top: 184px;
85
+ font-size: 16px;
86
+ color: #5f5b5b;
87
+
88
+ .tooltip-inner{
89
+ background:#6683db !important;
90
+ color: #000000 !important;
91
+ }
92
+ }
93
+
94
+
95
+
96
+ .description-container-dash {
97
+ flex-grow: 1;
98
+ color: var(--titleColor);
99
+ display: flex;
100
+ justify-content: space-between;
101
+ width: 100%;
102
+ margin-top: 16px;
103
+ font-weight: 600;
104
+ font-size: 14px;
105
+
106
+ .mbg-h-c-tone-s-icon-dash {
107
+ margin-top: -10px;
108
+ transition: opacity 500ms ease;
109
+ opacity: 0.9;
110
+
111
+ .eye-board-target {
112
+ position: relative;
113
+ top: -10px;
114
+ right: -16px;
115
+
116
+ }
117
+ .eye-board-target-hide {
118
+ position: relative;
119
+ top: -5px;
120
+ right: -16px;
121
+
122
+ }
123
+ }
124
+
125
+ .lock-dash-store{
126
+ position: relative;
127
+ right: -20px;
128
+ top: -10px;
129
+ // color: red;
130
+ }
131
+ }
132
+
133
+ .description-dash {
134
+ font-size: 20px;
135
+ color: #5f5b5b;
136
+ }
137
+
138
+ }
139
+ .hide-goal{
140
+ display: flex;
141
+ justify-content: center;
142
+ align-items: center;
143
+ width: 100%;
144
+ height: 100%;
145
+ font-size: 14px;
146
+ color: #5f5b5b;
147
+ }
148
+
149
+ .state-goal{
150
+ cursor: pointer;
151
+ }
@@ -0,0 +1,257 @@
1
+ import './mbg-store-goal.scss'
2
+ import template from './mbg-store-goal.html'
3
+ import * as Highcharts from 'highcharts'
4
+ import * as HighchartsMore from 'highcharts/highcharts-more.js'
5
+ import * as SolidGauge from 'highcharts/modules/solid-gauge.js'
6
+ import * as Exporting from 'highcharts/modules/exporting.js'
7
+ import * as ExportData from 'highcharts/modules/export-data.js'
8
+ import * as Accessibility from 'highcharts/modules/accessibility.js'
9
+
10
+ // Inicialize os mΓ³dulos
11
+ HighchartsMore(Highcharts)
12
+ SolidGauge(Highcharts)
13
+ Exporting(Highcharts)
14
+ ExportData(Highcharts)
15
+ Accessibility(Highcharts)
16
+
17
+ class MbgStoreGoalController {
18
+ private status: string
19
+ private cappedPercentage
20
+ private percentageAchieved
21
+ private allowedToSee: boolean
22
+ private allowedCallBack: Function
23
+ private randomEmoji: string
24
+ private hideValue: boolean = false
25
+ private allowDashBoardAutoValues
26
+ private isPermissionStoreGoal
27
+ private estimatedGoal
28
+ private storeGoalDashboard
29
+ private currentMonthName
30
+ private percentageEstimatedStoreGoal
31
+ private estimatedPercentageGreaterThanTarget: boolean = false
32
+ private goalStoreTarget
33
+ private messageTooltip: string = ''
34
+ private percentageEstimated
35
+ private showDashboard: boolean = false
36
+
37
+ constructor(
38
+ public $scope,
39
+ public $element,
40
+ public $attrs,
41
+ public $timeout,
42
+ public $filter,
43
+ public $state,
44
+ ) {}
45
+
46
+ async $onInit() {
47
+ this.initialize()
48
+ this.randomEmoji = this.generateRandomEmoji()
49
+ this.$scope.$watch(
50
+ '$ctrl.storeGoalDashboard',
51
+ (data) => {
52
+ if (data) {
53
+ this.configSolidGauge()
54
+ }
55
+ },
56
+ true,
57
+ )
58
+
59
+ const currentDate = new Date()
60
+ const currentMonth = currentDate.toLocaleString('default', { month: 'short' })
61
+ this.currentMonthName = currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1)
62
+ this.message()
63
+ }
64
+
65
+ message() {
66
+ this.messageTooltip = `MΓ©dia DiΓ‘ria: (Valor V. / Dia A.)\n\n
67
+ projeΓ§Γ£o final: (MΓ©dia DiΓ‘ria * Dias passados do mΓͺs)\n\n
68
+ estimativa: (ProjeΓ§Γ£o final / Meta do mΓͺs) * 100
69
+ `
70
+ }
71
+
72
+ async configSolidGauge() {
73
+ const storeGoalPercentage = this.hideValue ? this.storeGoalDashboard : 0
74
+ const porcentageEstimated = Number(this.percentageEstimatedStoreGoal.projectionFinal)
75
+ this.showDashboard = this.storeGoalDashboard
76
+ const percentageTarget = this.percentageEstimatedStoreGoal.percentageTarget.toFixed(2)
77
+ const showPercentage = this.hideValue ? `${percentageTarget}%` : '****'
78
+ this.percentageEstimated = `Alerta: VocΓͺ atingirΓ‘ aproximadamente ${showPercentage} da sua meta se continuar no ritmo atual.`
79
+ const goal = this.percentageEstimatedStoreGoal.target
80
+
81
+ this.goalStoreTarget = this.$filter('currency')(isNaN(goal) ? 0 : goal, 'R$ ')
82
+ this.estimatedGoal = this.$filter('currency')(isNaN(goal) ? 0 : porcentageEstimated, 'R$ ')
83
+
84
+ if (porcentageEstimated < goal) {
85
+ this.estimatedPercentageGreaterThanTarget = true
86
+ } else {
87
+ this.estimatedPercentageGreaterThanTarget = false
88
+ }
89
+
90
+ const gaugeOptions = this.gaugeOptions()
91
+
92
+ const chartSpeed = Highcharts.chart(
93
+ 'container-speed',
94
+ Highcharts.merge(gaugeOptions, {
95
+ yAxis: {
96
+ min: 0,
97
+ max: 100,
98
+ },
99
+
100
+ credits: {
101
+ enabled: false,
102
+ },
103
+
104
+ series: [
105
+ {
106
+ name: 'Speed',
107
+ data: [storeGoalPercentage],
108
+ dataLabels: {
109
+ format: this.hideValue
110
+ ? '<div style="display: flex;justify-content: center;align-items: center;margin-top: -20px;">' +
111
+ '<span style="font-size:25px">{y}</span><br/>' +
112
+ '<span style="font-size:12px;opacity:0.4">%</span>' +
113
+ '</div>'
114
+ : '<div style="margin-top: -20px;">' +
115
+ '<span style="font-size:25px"><i class="fa fa-lock"</i></span>' +
116
+ '</div>',
117
+ },
118
+ },
119
+ ],
120
+ }),
121
+ )
122
+
123
+ this.updateChart(storeGoalPercentage, chartSpeed)
124
+ }
125
+ updateChart(totalPercentage, chartSpeed) {
126
+ const point = chartSpeed.series[0].points[0]
127
+ point.update(totalPercentage)
128
+ }
129
+
130
+ gaugeOptions() {
131
+ return {
132
+ chart: {
133
+ type: 'solidgauge',
134
+ backgroundColor: 'none',
135
+ // plotBorderWidth: 0,
136
+ // margin: [0, 0, 0, 0],
137
+ },
138
+
139
+ title: null,
140
+ pane: {
141
+ center: ['50%', '90%'],
142
+ size: '100%',
143
+ startAngle: -90,
144
+ endAngle: 90,
145
+ background: {
146
+ backgroundColor: 'none',
147
+ borderRadius: 5,
148
+ innerRadius: '60%',
149
+ outerRadius: '100%',
150
+ shape: 'arc',
151
+ },
152
+ },
153
+
154
+ exporting: {
155
+ enabled: false,
156
+ },
157
+
158
+ tooltip: {
159
+ enabled: false,
160
+ },
161
+
162
+ // the value axis
163
+ yAxis: {
164
+ stops: [
165
+ [0.1, '#DF5353'], // Vermelho para atΓ© 10% da meta
166
+ [0.5, '#DDDF0D'], // Amarelo entre 10% e 50%
167
+ [0.9, '#55BF3B'], // Verde para mais de 50%
168
+ ],
169
+ lineWidth: 0,
170
+ tickWidth: 0,
171
+ minorTickInterval: null,
172
+ tickAmount: 2,
173
+ title: {
174
+ y: -80,
175
+ },
176
+ labels: {
177
+ y: 16,
178
+ },
179
+ },
180
+
181
+ plotOptions: {
182
+ solidgauge: {
183
+ borderRadius: 3,
184
+ dataLabels: {
185
+ y: 5,
186
+ borderWidth: 0,
187
+ useHTML: true,
188
+ style: {
189
+ textAlign: 'center',
190
+ width: '120px',
191
+ whiteSpace: 'nowrap',
192
+ },
193
+ },
194
+ },
195
+ },
196
+ }
197
+ }
198
+
199
+ initialize() {
200
+ if (this.allowDashBoardAutoValues) {
201
+ this.hideValue = this.isPermissionStoreGoal ? true : false
202
+ return
203
+ }
204
+
205
+ if (this.allowedToSee && !this.allowDashBoardAutoValues) {
206
+ this.hideValue = this.allowDashBoardAutoValues && this.isPermissionStoreGoal ? true : false
207
+ return
208
+ }
209
+
210
+ this.hideValue = this.allowedToSee && this.isPermissionStoreGoal ? true : false
211
+ }
212
+
213
+ stateGoNewGoal() {
214
+ this.$state.go('app.goal.list')
215
+ }
216
+
217
+ generateRandomEmoji = () => {
218
+ const emojis = ['πŸ”πŸ”πŸ”']
219
+ return emojis[0]
220
+ }
221
+
222
+ toggleShowValueStoreGoal() {
223
+ if ((this.allowedToSee !== undefined && !this.allowedToSee) || !this.isPermissionStoreGoal) {
224
+ if (this.allowedCallBack) {
225
+ this.allowedCallBack()
226
+ }
227
+ return
228
+ }
229
+
230
+ this.hideValue = !this.hideValue
231
+ this.randomEmoji = this.generateRandomEmoji()
232
+ this.configSolidGauge()
233
+ }
234
+ }
235
+ MbgStoreGoalController['$inject'] = [
236
+ '$scope',
237
+ '$element',
238
+ '$attrs',
239
+ '$timeout',
240
+ '$filter',
241
+ '$state',
242
+ ]
243
+
244
+ const mbgStoreGoal = {
245
+ bindings: {
246
+ allowedToSee: '=?',
247
+ allowedCallBack: '&?',
248
+ storeGoalDashboard: '=?',
249
+ percentageEstimatedStoreGoal: '=?',
250
+ isPermissionStoreGoal: '=?',
251
+ allowDashBoardAutoValues: '=?',
252
+ },
253
+ template,
254
+ controller: MbgStoreGoalController,
255
+ }
256
+
257
+ export { mbgStoreGoal }
package/src/index.html CHANGED
@@ -159,12 +159,14 @@
159
159
  <!-- <div style="padding: 100px;">
160
160
  <div class="row">
161
161
  <div class="col-md-12"> -->
162
- <!-- <div class=""
162
+ <div class=""
163
163
  style="height: 260px">
164
- <mbg-text-editor ng-model="editorJodit"
164
+ <mbg-store-goal></mbg-store-goal>
165
+
166
+ <!-- <mbg-text-editor ng-model="editorJodit"
165
167
  ng-if="testeeditorif"
166
- ng-change="changeEditorTeste(value)"></mbg-text-editor>
167
- </div> -->
168
+ ng-change="changeEditorTeste(value)"></mbg-text-editor> -->
169
+ </div>
168
170
  <!-- <mbg-address ng-model="address"></mbg-address>
169
171
  <pre>{{ address | json }}</pre>
170
172
  </div>