@kigi/components 1.40.0-beta.4 → 1.40.0
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.40.0
|
|
3
|
+
"version": "1.40.0",
|
|
4
4
|
"description": "@kigi/components",
|
|
5
5
|
"main": "src/components/index.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
"progressbar.js": "^1.0.1",
|
|
76
76
|
"raphael": "^2.2.8",
|
|
77
77
|
"sugarss": "^2.0.0",
|
|
78
|
+
"swiper": "^11.1.12",
|
|
78
79
|
"webcamjs": "^1.0.25"
|
|
79
80
|
},
|
|
80
81
|
"devDependencies": {
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<div ng-class="{'opacity-dash-goal': !$ctrl.isPermissionStoreGoal}"
|
|
2
2
|
class="store-goal-wrapper"
|
|
3
3
|
ng-show="$ctrl.showDashboard">
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
4
7
|
<div class="description-container-dash">
|
|
5
8
|
<p class="description-dash">
|
|
6
9
|
Meta do mês / {{$ctrl.currentMonthName}}
|
|
@@ -10,6 +13,8 @@
|
|
|
10
13
|
ng-show="$ctrl.estimatedPercentageGreaterThanTarget"
|
|
11
14
|
aria-hidden="true"></i>
|
|
12
15
|
</p>
|
|
16
|
+
|
|
17
|
+
|
|
13
18
|
<div class="mbg-h-c-tone-s-icon-dash"
|
|
14
19
|
ng-click="$ctrl.toggleShowValueStoreGoal(false)">
|
|
15
20
|
<i class="fa fa-lock lock-dash-store"
|
|
@@ -23,76 +28,106 @@
|
|
|
23
28
|
<i ng-if="!$ctrl.hideValue && $ctrl.isPermissionStoreGoal"
|
|
24
29
|
disable-animate
|
|
25
30
|
class="far fa-eye-slash eye-board-target"></i>
|
|
26
|
-
|
|
27
31
|
</div>
|
|
28
32
|
</div>
|
|
33
|
+
<div class="active-index"
|
|
34
|
+
ng-if="$ctrl.indexActiveSlide">
|
|
35
|
+
<label>{{$ctrl.indexActiveSlide}}</label>
|
|
36
|
+
</div>
|
|
29
37
|
|
|
30
38
|
<div class="line-goal"></div>
|
|
31
|
-
|
|
32
39
|
<div class="dashboard-wrapper">
|
|
33
|
-
<div class="
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
40
|
+
<div class="swiper">
|
|
41
|
+
<div class="swiper-wrapper">
|
|
42
|
+
<div class="swiper-slide">
|
|
43
|
+
<div class="chart-container"
|
|
44
|
+
id="container-speed">
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="swiper-slide">
|
|
49
|
+
<div class="dashboard-estimated">
|
|
50
|
+
<p ng-if="$ctrl.hideValue">Meta: <strong>{{$ctrl.goalDataForTheMonth.target | currency: 'R$ '
|
|
51
|
+
}}</strong>
|
|
52
|
+
</p>
|
|
53
|
+
<p ng-if="!$ctrl.hideValue">Meta: <i class="fa fa-lock"
|
|
54
|
+
aria-hidden="true"
|
|
55
|
+
tooltip-placement="right"
|
|
56
|
+
uib-tooltip="Sem permissão para visualizar"></i>
|
|
57
|
+
</p>
|
|
58
|
+
<p ng-if="!$ctrl.hideValue">Venda atual: <i class="fa fa-lock"
|
|
59
|
+
aria-hidden="true"
|
|
60
|
+
tooltip-placement="right"
|
|
61
|
+
uib-tooltip="Sem permissão para visualizar"></i>
|
|
62
|
+
</p>
|
|
63
|
+
<p class="estimate-goal-store lock-permition"
|
|
64
|
+
ng-if="$ctrl.hideValue">Venda atual: <strong>{{$ctrl.goalDataForTheMonth.sales | currency: 'R$ '
|
|
65
|
+
}}</strong>
|
|
66
|
+
<i class="fa fa-exclamation-circle"
|
|
67
|
+
aria-hidden="true"
|
|
68
|
+
tooltip-placement="top"
|
|
69
|
+
uib-tooltip="Considera devoluções"></i>
|
|
70
|
+
</p>
|
|
71
|
+
<p ng-if="!$ctrl.hideValue">Restante: <i class="fa fa-lock"
|
|
72
|
+
aria-hidden="true"
|
|
73
|
+
tooltip-placement="right"
|
|
74
|
+
uib-tooltip="Sem permissão para visualizar"></i>
|
|
75
|
+
</p>
|
|
76
|
+
<p class="estimate-goal-store"
|
|
77
|
+
ng-if="$ctrl.hideValue">Restante: <strong>{{$ctrl.goalDataForTheMonth.remaining | currency: 'R$ '
|
|
78
|
+
}} =
|
|
79
|
+
({{$ctrl.goalDataForTheMonth.remainingPercentage}}%)</strong>
|
|
80
|
+
</p>
|
|
81
|
+
<p ng-if="!$ctrl.hideValue">Estimativa: <i class="fa fa-lock"
|
|
82
|
+
aria-hidden="true"
|
|
83
|
+
tooltip-placement="right"
|
|
84
|
+
uib-tooltip="Sem permissão para visualizar"></i>
|
|
85
|
+
</p>
|
|
86
|
+
<p class="estimate-goal-store"
|
|
87
|
+
ng-if="$ctrl.hideValue">Estimativa: <strong>{{$ctrl.goalDataForTheMonth.estimate | currency: 'R$
|
|
88
|
+
'}} =
|
|
89
|
+
({{$ctrl.goalDataForTheMonth.estimatePercentage}}%)</strong>
|
|
90
|
+
</p>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
69
93
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
94
|
+
<div class="swiper-slide">
|
|
95
|
+
<div class="dashboard-estimated-store">
|
|
96
|
+
<p ng-if="$ctrl.hideValue">Meta diária: <strong>{{$ctrl.goalDataForTheMonth.dailyTarget | currency:
|
|
97
|
+
'R$ '
|
|
98
|
+
}}</strong></p>
|
|
99
|
+
<p ng-if="!$ctrl.hideValue">Meta diária: <i class="fa fa-lock"
|
|
100
|
+
aria-hidden="true"
|
|
101
|
+
tooltip-placement="right"
|
|
102
|
+
uib-tooltip="Sem permissão para visualizar"></i>
|
|
103
|
+
</p>
|
|
104
|
+
<p ng-if="!$ctrl.hideValue">Realizado/dia: <i class="fa fa-lock"
|
|
105
|
+
aria-hidden="true"
|
|
106
|
+
tooltip-placement="right"
|
|
107
|
+
uib-tooltip="Sem permissão para visualizar"></i>
|
|
108
|
+
</p>
|
|
109
|
+
<p class="estimate-goal-store"
|
|
110
|
+
ng-if="$ctrl.hideValue">Realizado/dia: <strong>{{$ctrl.goalDataForTheMonth.realityPerDay |
|
|
111
|
+
currency: 'R$
|
|
112
|
+
' }}</strong>
|
|
113
|
+
</p>
|
|
114
|
+
<p ng-if="!$ctrl.hideValue">Necessidade/dia: <i class="fa fa-lock"
|
|
115
|
+
aria-hidden="true"
|
|
116
|
+
tooltip-placement="right"
|
|
117
|
+
uib-tooltip="Sem permissão para visualizar"></i>
|
|
118
|
+
</p>
|
|
119
|
+
<p class="estimate-goal-store"
|
|
120
|
+
ng-if="$ctrl.hideValue">Necessidade/dia: <strong>{{$ctrl.goalDataForTheMonth.neededPerDay |
|
|
121
|
+
currency: 'R$
|
|
122
|
+
' }}</strong>
|
|
123
|
+
</p>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
93
126
|
</div>
|
|
94
|
-
</div>
|
|
95
127
|
|
|
128
|
+
|
|
129
|
+
<div class="swiper-pagination"></div>
|
|
130
|
+
</div>
|
|
96
131
|
</div>
|
|
97
132
|
</div>
|
|
98
133
|
|
|
@@ -1,48 +1,102 @@
|
|
|
1
|
-
.store-goal-wrapper{
|
|
1
|
+
.store-goal-wrapper {
|
|
2
2
|
|
|
3
|
+
.swiper {
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.swiper-wrapper {
|
|
10
|
+
display: flex;
|
|
11
|
+
transition: transform 0.3s ease;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.swiper-slide {
|
|
15
|
+
width: 100%;
|
|
16
|
+
flex-shrink: 0;
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
align-items: center;
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.swiper-slide-active {
|
|
24
|
+
display: flex;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
align-items: center;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.swiper-pagination {
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: 100px;
|
|
32
|
+
left: 54%;
|
|
33
|
+
transform: translateX(-50%);
|
|
34
|
+
display: flex;
|
|
35
|
+
gap: 5px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.swiper-pagination-bullet {
|
|
39
|
+
width: 10px;
|
|
40
|
+
height: 10px;
|
|
41
|
+
background-color: #606A90;
|
|
42
|
+
border-radius: 50%;
|
|
43
|
+
opacity: 0.5;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.swiper-pagination-bullet-active {
|
|
47
|
+
background-color: #0EBCBD;
|
|
48
|
+
opacity: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.active-index {
|
|
52
|
+
display: flex;
|
|
53
|
+
justify-content: end;
|
|
54
|
+
font-size: 14px;
|
|
55
|
+
margin-top: -17px;
|
|
56
|
+
color: var(--titleColor);
|
|
57
|
+
}
|
|
58
|
+
|
|
3
59
|
|
|
4
|
-
.line-goal{
|
|
60
|
+
.line-goal {
|
|
5
61
|
width: 100%;
|
|
6
62
|
background: #737373;
|
|
7
63
|
height: 1px;
|
|
8
64
|
opacity: 0.3;
|
|
9
65
|
|
|
10
66
|
}
|
|
67
|
+
|
|
11
68
|
.dashboard-wrapper {
|
|
69
|
+
overflow: hidden;
|
|
12
70
|
display: flex;
|
|
13
|
-
justify-content:
|
|
14
|
-
align-items:
|
|
71
|
+
justify-content: center;
|
|
72
|
+
align-items: center;
|
|
15
73
|
height: 100%;
|
|
16
74
|
width: 100%;
|
|
17
75
|
position: relative;
|
|
18
76
|
left: -22px;
|
|
19
77
|
|
|
20
|
-
.dashboard-
|
|
21
|
-
|
|
22
|
-
position:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
height: 115px;
|
|
29
|
-
font-size: 14px;
|
|
30
|
-
color: #5f5b5b;
|
|
31
|
-
}
|
|
78
|
+
.dashboard-estimated {
|
|
79
|
+
|
|
80
|
+
position: relative;
|
|
81
|
+
left: 52px;
|
|
82
|
+
top: 10px;
|
|
83
|
+
height: 115px;
|
|
84
|
+
font-size: 14px;
|
|
85
|
+
color: #5f5b5b;
|
|
32
86
|
|
|
33
|
-
.dashboard-estimated-store{
|
|
34
|
-
position: relative;
|
|
35
|
-
top: -104px;
|
|
36
|
-
left: 492px;
|
|
37
|
-
height: 115px;
|
|
38
|
-
font-size: 14px;
|
|
39
|
-
color: #5f5b5b;
|
|
40
|
-
}
|
|
41
87
|
}
|
|
42
88
|
|
|
89
|
+
.dashboard-estimated-store {
|
|
43
90
|
|
|
91
|
+
position: relative;
|
|
92
|
+
top: 18px;
|
|
93
|
+
left: 38px;
|
|
94
|
+
height: 115px;
|
|
95
|
+
font-size: 14px;
|
|
96
|
+
color: #5f5b5b;
|
|
97
|
+
}
|
|
44
98
|
}
|
|
45
|
-
|
|
99
|
+
|
|
46
100
|
.chart-container {
|
|
47
101
|
display: flex;
|
|
48
102
|
justify-content: center;
|
|
@@ -50,52 +104,61 @@
|
|
|
50
104
|
width: 300px;
|
|
51
105
|
height: auto;
|
|
52
106
|
position: relative;
|
|
53
|
-
left:
|
|
107
|
+
left: 10%;
|
|
54
108
|
bottom: 195px;
|
|
55
109
|
}
|
|
56
|
-
|
|
57
|
-
.opacity-dash-goal{
|
|
110
|
+
|
|
111
|
+
.opacity-dash-goal {
|
|
58
112
|
opacity: 0.5;
|
|
59
113
|
}
|
|
60
|
-
|
|
61
|
-
.goal-target{
|
|
114
|
+
|
|
115
|
+
.goal-target {
|
|
62
116
|
position: relative;
|
|
63
117
|
top: 180px;
|
|
64
118
|
font-size: 14px;
|
|
65
119
|
color: #5f5b5b;
|
|
66
120
|
}
|
|
67
121
|
|
|
68
|
-
.estimate-goal{
|
|
122
|
+
.estimate-goal {
|
|
69
123
|
font-size: 14px;
|
|
70
|
-
|
|
124
|
+
color: #5f5b5b;
|
|
71
125
|
}
|
|
72
126
|
|
|
73
|
-
.estimate-goal-store{
|
|
127
|
+
.estimate-goal-store {
|
|
74
128
|
font-size: 14px;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
.tooltip-chart-panel {
|
|
86
|
-
display: flex;
|
|
87
|
-
flex-direction: column;
|
|
88
|
-
position: relative;
|
|
89
|
-
background:#0EBCBD !important;
|
|
90
|
-
font-weight: bold;
|
|
91
|
-
color: #FFFFFF;
|
|
92
|
-
width: 100%;
|
|
93
|
-
height: 100%;
|
|
94
|
-
margin-right: 200px;
|
|
95
|
-
border-radius: 10px;
|
|
96
|
-
opacity: 1.0;
|
|
129
|
+
color: #5f5b5b;
|
|
130
|
+
|
|
131
|
+
i {
|
|
132
|
+
color: #0EBCBD;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.tooltip-inner {
|
|
136
|
+
width: 250px;
|
|
97
137
|
}
|
|
98
138
|
|
|
139
|
+
|
|
140
|
+
.tooltip-chart-panel {
|
|
141
|
+
display: flex;
|
|
142
|
+
flex-direction: column;
|
|
143
|
+
position: relative;
|
|
144
|
+
background: #0EBCBD !important;
|
|
145
|
+
font-weight: bold;
|
|
146
|
+
color: #FFFFFF;
|
|
147
|
+
width: 100%;
|
|
148
|
+
height: 100%;
|
|
149
|
+
margin-right: 200px;
|
|
150
|
+
border-radius: 10px;
|
|
151
|
+
opacity: 1.0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
.lock-permition{
|
|
156
|
+
|
|
157
|
+
.tooltip-inner {
|
|
158
|
+
background: #0EBCBD !important;
|
|
159
|
+
color: #000000 !important;
|
|
160
|
+
width: 300px;
|
|
161
|
+
}
|
|
99
162
|
}
|
|
100
163
|
|
|
101
164
|
.goal-day {
|
|
@@ -116,20 +179,26 @@
|
|
|
116
179
|
width: 100%;
|
|
117
180
|
margin-top: 16px;
|
|
118
181
|
font-weight: 600;
|
|
119
|
-
font-size: 14px;
|
|
120
|
-
|
|
182
|
+
font-size: 14px;
|
|
183
|
+
|
|
184
|
+
.active-index-slide{
|
|
185
|
+
position: relative;
|
|
186
|
+
top: -11px;
|
|
187
|
+
left: 95px;
|
|
188
|
+
}
|
|
189
|
+
|
|
121
190
|
.mbg-h-c-tone-s-icon-dash {
|
|
122
191
|
margin-top: -10px;
|
|
123
192
|
transition: opacity 500ms ease;
|
|
124
193
|
opacity: 0.9;
|
|
125
194
|
}
|
|
126
|
-
|
|
127
|
-
.lock-dash-store{
|
|
195
|
+
|
|
196
|
+
.lock-dash-store {
|
|
128
197
|
position: relative;
|
|
129
198
|
right: -20px;
|
|
130
199
|
}
|
|
131
200
|
|
|
132
|
-
.show-tooltip{
|
|
201
|
+
.show-tooltip {
|
|
133
202
|
font-size: 20px;
|
|
134
203
|
color: #5f5b5b;
|
|
135
204
|
z-index: 9999;
|
|
@@ -140,90 +209,93 @@
|
|
|
140
209
|
0% {
|
|
141
210
|
opacity: 1;
|
|
142
211
|
}
|
|
212
|
+
|
|
143
213
|
50% {
|
|
144
214
|
opacity: 0;
|
|
145
215
|
}
|
|
216
|
+
|
|
146
217
|
100% {
|
|
147
218
|
opacity: 1;
|
|
148
219
|
}
|
|
149
220
|
}
|
|
150
|
-
|
|
221
|
+
|
|
151
222
|
.description-dash {
|
|
152
223
|
font-size: 20px;
|
|
153
224
|
color: #5f5b5b;
|
|
154
225
|
|
|
155
|
-
i{
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
226
|
+
i {
|
|
227
|
+
animation: blink 1s infinite;
|
|
228
|
+
color: #ff8c00;
|
|
229
|
+
position: relative;
|
|
230
|
+
z-index: 9999;
|
|
160
231
|
}
|
|
161
232
|
|
|
162
233
|
.tooltip-inner {
|
|
163
|
-
background
|
|
234
|
+
background: #ff8c00 !important;
|
|
164
235
|
color: #000000 !important;
|
|
165
236
|
width: 300px;
|
|
166
237
|
}
|
|
167
238
|
}
|
|
168
239
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
.dashboard-wrapper{
|
|
175
|
-
position: relative;
|
|
176
|
-
left: 74px;
|
|
240
|
+
@media screen and (max-width: 1920px){
|
|
241
|
+
.description-container-dash{
|
|
242
|
+
.active-index-slide {
|
|
243
|
+
left: 140px;
|
|
244
|
+
}
|
|
177
245
|
}
|
|
178
246
|
}
|
|
179
247
|
|
|
180
|
-
@media screen and (max-width:
|
|
181
|
-
.
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
.dashboard-wrapper{
|
|
185
|
-
.dashboard-estimated-store{
|
|
186
|
-
display: none !important;
|
|
248
|
+
@media screen and (max-width: 1728px){
|
|
249
|
+
.description-container-dash{
|
|
250
|
+
.active-index-slide {
|
|
251
|
+
left: 108px;
|
|
187
252
|
}
|
|
253
|
+
}
|
|
254
|
+
}
|
|
188
255
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
256
|
+
@media screen and (max-width: 1536px){
|
|
257
|
+
.description-container-dash{
|
|
258
|
+
.active-index-slide {
|
|
259
|
+
left: 70px;
|
|
192
260
|
}
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
@media screen and (max-width: 1440px){
|
|
264
|
+
.description-container-dash{
|
|
265
|
+
.active-index-slide {
|
|
266
|
+
left: 58px;
|
|
197
267
|
}
|
|
198
|
-
|
|
199
268
|
}
|
|
200
269
|
}
|
|
201
270
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
position: relative !important;
|
|
207
|
-
left: -20px !important;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.dashboard-goal{
|
|
211
|
-
display: none !important;
|
|
271
|
+
@media screen and (max-width: 1366px){
|
|
272
|
+
.description-container-dash{
|
|
273
|
+
.active-index-slide {
|
|
274
|
+
left: 125px;
|
|
212
275
|
}
|
|
213
276
|
}
|
|
214
277
|
}
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
height: 100%;
|
|
223
|
-
font-size: 14px;
|
|
224
|
-
color: #5f5b5b;
|
|
278
|
+
|
|
279
|
+
@media screen and (max-width: 1024px){
|
|
280
|
+
.description-container-dash{
|
|
281
|
+
.active-index-slide {
|
|
282
|
+
left: 44px;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
225
285
|
}
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
286
|
+
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.hide-goal {
|
|
290
|
+
display: flex;
|
|
291
|
+
justify-content: center;
|
|
292
|
+
align-items: center;
|
|
293
|
+
width: 100%;
|
|
294
|
+
height: 100%;
|
|
295
|
+
font-size: 14px;
|
|
296
|
+
color: #5f5b5b;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.state-goal {
|
|
300
|
+
cursor: pointer;
|
|
301
|
+
}
|
|
@@ -6,6 +6,8 @@ import * as SolidGauge from 'highcharts/modules/solid-gauge.js'
|
|
|
6
6
|
import * as Exporting from 'highcharts/modules/exporting.js'
|
|
7
7
|
import * as ExportData from 'highcharts/modules/export-data.js'
|
|
8
8
|
import * as Accessibility from 'highcharts/modules/accessibility.js'
|
|
9
|
+
import Swiper from 'swiper'
|
|
10
|
+
import { Pagination } from 'swiper'
|
|
9
11
|
|
|
10
12
|
// Inicialize os módulos
|
|
11
13
|
HighchartsMore(Highcharts)
|
|
@@ -26,6 +28,7 @@ class MbgStoreGoalController {
|
|
|
26
28
|
private messageTooltip: string = ''
|
|
27
29
|
private percentageEstimatedMessage
|
|
28
30
|
private showDashboard: boolean = false
|
|
31
|
+
private indexActiveSlide
|
|
29
32
|
|
|
30
33
|
constructor(
|
|
31
34
|
public $scope,
|
|
@@ -51,6 +54,34 @@ class MbgStoreGoalController {
|
|
|
51
54
|
const currentDate = new Date()
|
|
52
55
|
const currentMonth = currentDate.toLocaleString('default', { month: 'short' })
|
|
53
56
|
this.currentMonthName = currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1)
|
|
57
|
+
this.configSwiperSlides()
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
configSwiperSlides() {
|
|
61
|
+
const swiper = new Swiper('.swiper', {
|
|
62
|
+
modules: [Pagination],
|
|
63
|
+
speed: 1000,
|
|
64
|
+
autoplay: {
|
|
65
|
+
delay: 20000,
|
|
66
|
+
disableOnInteraction: false,
|
|
67
|
+
},
|
|
68
|
+
pagination: {
|
|
69
|
+
el: '.swiper-pagination',
|
|
70
|
+
progressbarOpposite: true,
|
|
71
|
+
allowTouchMove: false,
|
|
72
|
+
clickable: true,
|
|
73
|
+
bulletClass: 'swiper-pagination-bullet',
|
|
74
|
+
bulletActiveClass: 'swiper-pagination-bullet-active',
|
|
75
|
+
renderBullet: function (index, className) {
|
|
76
|
+
return `<span class="${className}"></span>`
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
})
|
|
80
|
+
|
|
81
|
+
swiper.on('slideChange', () => {
|
|
82
|
+
this.indexActiveSlide =
|
|
83
|
+
swiper.activeIndex === 1 ? '(mensal)' : swiper.activeIndex === 2 ? '(diário)' : ''
|
|
84
|
+
})
|
|
54
85
|
}
|
|
55
86
|
|
|
56
87
|
goalDataForTheMonthConfig() {
|
|
@@ -61,6 +92,9 @@ class MbgStoreGoalController {
|
|
|
61
92
|
|
|
62
93
|
async configSolidGauge() {
|
|
63
94
|
this.goalDataForTheMonthConfig()
|
|
95
|
+
const sales = this.$filter('currency')(this.goalDataForTheMonth.sales, 'R$ ')
|
|
96
|
+
|
|
97
|
+
const tooltip = `<b>Vendas</b>: ${sales}`
|
|
64
98
|
|
|
65
99
|
const storeGoalPercentage = this.hideValue ? Number(this.goalDataForTheMonth.targetMonth) : 0
|
|
66
100
|
|
|
@@ -88,6 +122,12 @@ class MbgStoreGoalController {
|
|
|
88
122
|
credits: {
|
|
89
123
|
enabled: false,
|
|
90
124
|
},
|
|
125
|
+
tooltip: {
|
|
126
|
+
enabled: true,
|
|
127
|
+
formatter: function () {
|
|
128
|
+
return tooltip
|
|
129
|
+
},
|
|
130
|
+
},
|
|
91
131
|
|
|
92
132
|
series: [
|
|
93
133
|
{
|
|
@@ -95,8 +135,8 @@ class MbgStoreGoalController {
|
|
|
95
135
|
data: [storeGoalPercentage.toFixed(2)],
|
|
96
136
|
dataLabels: {
|
|
97
137
|
format: this.hideValue
|
|
98
|
-
? '<div style="display: flex;justify-content: center;align-items: center;margin-top: -20px;">' +
|
|
99
|
-
'<span style="font-size:25px">{y}</span><br/>' +
|
|
138
|
+
? '<div style="display: flex;justify-content: center;align-items: center;margin-top: -20px;" >' +
|
|
139
|
+
'<span style="font-size:25px" uib-tooltip="testeeeeeee" >{y}</span><br/>' +
|
|
100
140
|
'<span style="font-size:12px;opacity:0.4">%</span>' +
|
|
101
141
|
'</div>'
|
|
102
142
|
: '<div style="margin-top: -20px;">' +
|