@kigi/components 1.34.0 → 1.35.0-beta.2
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 +1 -1
- package/src/components/mbg-homescreen/cards/chart-wrapper/chart-wrapper.html +17 -0
- package/src/components/mbg-homescreen/cards/chart-wrapper/chart-wrapper.scss +30 -0
- package/src/components/mbg-homescreen/cards/chart-wrapper/chart-wrapper.ts +22 -0
- package/src/components/mbg-homescreen/cards/index.ts +2 -0
- package/src/components/mbg-homescreen/cards/panel/panel.html +53 -0
- package/src/components/mbg-homescreen/cards/panel/panel.scss +74 -0
- package/src/components/mbg-homescreen/cards/panel/panel.ts +74 -0
- package/src/components/mbg-homescreen/charts/bar-line/bar-line.html +7 -1
- package/src/components/mbg-homescreen/charts/bar-line/bar-line.ts +5 -1
- package/src/components/mbg-homescreen/charts/bar-line-pie/bar-line-pie.html +7 -1
- package/src/components/mbg-homescreen/charts/bar-line-pie/bar-line-pie.ts +5 -1
- package/src/components/mbg-homescreen/charts/line/line.html +7 -1
- package/src/components/mbg-homescreen/charts/line/line.scss +1 -0
- package/src/components/mbg-homescreen/charts/line/line.ts +32 -19
- package/src/components/mbg-homescreen/index.ts +9 -8
- package/src/components/mbg-homescreen/mbg-homescreen.html +44 -33
- package/src/components/mbg-homescreen/mbg-homescreen.scss +54 -6
- package/src/components/mbg-homescreen/mbg-homescreen.ts +20 -1
package/package.json
CHANGED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="mb-h-chart-wrapper">
|
|
2
|
+
<div class="home-chart"> </div>
|
|
3
|
+
<div class="divider"></div>
|
|
4
|
+
<div class="home-cards">
|
|
5
|
+
<mbg-card-panel ng-repeat="panel in $ctrl.panels"
|
|
6
|
+
loading="$ctrl.loading"
|
|
7
|
+
display-values="$ctrl.displayValues"
|
|
8
|
+
allowed-to-see="$ctrl.allowedToSee"
|
|
9
|
+
allowed-call-back="$ctrl.allowedCallBack()"
|
|
10
|
+
panel="panel">
|
|
11
|
+
<i class="{{ panel.icon }}"
|
|
12
|
+
aria-hidden="true"></i>
|
|
13
|
+
</mbg-card-panel>
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
</div>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
mbg-chart-wrapper {
|
|
2
|
+
.mb-h-chart-wrapper {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
|
|
6
|
+
.home-chart {
|
|
7
|
+
height: 400px;
|
|
8
|
+
width: 100%;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
user-select: none;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.divider {
|
|
14
|
+
height: 360px;
|
|
15
|
+
width: 1px;
|
|
16
|
+
background: var(--color2);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.home-cards {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
justify-content: space-evenly;
|
|
23
|
+
|
|
24
|
+
width: 300px;
|
|
25
|
+
padding: 8px;
|
|
26
|
+
gap: 4px;
|
|
27
|
+
height: 400px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import './chart-wrapper.scss'
|
|
2
|
+
import template from './chart-wrapper.html'
|
|
3
|
+
class MbgChartWrapperController {
|
|
4
|
+
constructor() {}
|
|
5
|
+
$onInit() {}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
MbgChartWrapperController['$inject'] = []
|
|
9
|
+
|
|
10
|
+
const mbgChartWrapper = {
|
|
11
|
+
bindings: {
|
|
12
|
+
loading: '=?',
|
|
13
|
+
panels: '=',
|
|
14
|
+
displayValues: '=?',
|
|
15
|
+
allowedToSee: '=?',
|
|
16
|
+
allowedCallBack: '&?',
|
|
17
|
+
},
|
|
18
|
+
template,
|
|
19
|
+
controller: MbgChartWrapperController,
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export { mbgChartWrapper }
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<div class="mbg-h-c-panel">
|
|
2
|
+
<div class="panel-container">
|
|
3
|
+
<div class="panel-icon"
|
|
4
|
+
ng-transclude></div>
|
|
5
|
+
<div class="panel-content">
|
|
6
|
+
<div class="description-container">
|
|
7
|
+
<p class="description">{{ $ctrl.panel.text }}</p>
|
|
8
|
+
<div class="mbg-h-c-tone-s-icon"
|
|
9
|
+
ng-click="$ctrl.toggleShowValue()">
|
|
10
|
+
<i ng-if="$ctrl.hideValue === true"
|
|
11
|
+
disable-animate
|
|
12
|
+
class="far fa-eye"></i>
|
|
13
|
+
<i ng-if="$ctrl.hideValue !== true"
|
|
14
|
+
disable-animate
|
|
15
|
+
class="far fa-eye-slash"></i>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
<!-- quando valores estão visiveis -->
|
|
19
|
+
<div class="footer"
|
|
20
|
+
ng-show="!$ctrl.hideValue"
|
|
21
|
+
disable-animate>
|
|
22
|
+
<p class="value"
|
|
23
|
+
ng-class="{'positive': $ctrl.panel.isCurrency && $ctrl.panel.value >= 0,
|
|
24
|
+
'negative': $ctrl.panel.isCurrency && $ctrl.panel.value < 0}"
|
|
25
|
+
ng-if="$ctrl.panel.isCurrency">{{ $ctrl.panel.value || 0 | currency: 'R$ ' }}
|
|
26
|
+
</p>
|
|
27
|
+
<p class="value"
|
|
28
|
+
ng-if="!$ctrl.panel.isCurrency">{{ $ctrl.panel.value || 0}}
|
|
29
|
+
</p>
|
|
30
|
+
<span ng-if="$ctrl.panel.value > 0"
|
|
31
|
+
class="positive"><i class="fa fa-arrow-up"
|
|
32
|
+
aria-hidden="true"></i></i></span>
|
|
33
|
+
<span ng-if="!$ctrl.panel.positive < 0"
|
|
34
|
+
class="negative"><i class="fa fa-arrow-down"
|
|
35
|
+
aria-hidden="true"></i></span>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<!-- quando valores estão ocultos -->
|
|
39
|
+
<div class="footer"
|
|
40
|
+
ng-show="$ctrl.hideValue"
|
|
41
|
+
disable-animate>
|
|
42
|
+
<p class="value">{{ $ctrl.randomEmoji }}</p>
|
|
43
|
+
|
|
44
|
+
<span ng-if="$ctrl.panel.value > 0"
|
|
45
|
+
class="positive"><i class="fa fa-arrow-up"
|
|
46
|
+
aria-hidden="true"></i></i></span>
|
|
47
|
+
<span ng-if="!$ctrl.panel.positive < 0"
|
|
48
|
+
class="negative"><i class="fa fa-arrow-down"
|
|
49
|
+
aria-hidden="true"></i></span>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
mbg-card-panel {
|
|
2
|
+
.mbg-h-c-panel {
|
|
3
|
+
border: 1px solid #5f5b5b;
|
|
4
|
+
border-radius: 12px;
|
|
5
|
+
padding: 8px;
|
|
6
|
+
|
|
7
|
+
.panel-container {
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: 12px;
|
|
11
|
+
color: #5f5b5b;
|
|
12
|
+
|
|
13
|
+
.panel-icon {
|
|
14
|
+
display: flex;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
align-items: center;
|
|
17
|
+
width: 40px;
|
|
18
|
+
height: 40px;
|
|
19
|
+
border-radius: 50%;
|
|
20
|
+
background-color: var(--color2);
|
|
21
|
+
color: #5f5b5b;
|
|
22
|
+
padding: 4px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.panel-content {
|
|
26
|
+
flex-grow: 1;
|
|
27
|
+
color: var(--titleColor);
|
|
28
|
+
|
|
29
|
+
.description-container {
|
|
30
|
+
display: flex;
|
|
31
|
+
justify-content: space-between;
|
|
32
|
+
|
|
33
|
+
.mbg-h-c-tone-s-icon {
|
|
34
|
+
transition: opacity 500ms ease;
|
|
35
|
+
opacity: 0;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.description {
|
|
40
|
+
font-size: 14px;
|
|
41
|
+
color: #5f5b5b;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.footer {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
|
|
48
|
+
.value {
|
|
49
|
+
flex-grow: 1;
|
|
50
|
+
font-weight: bold;
|
|
51
|
+
line-height: 1.2;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
.positive {
|
|
57
|
+
color: var(--success);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.negative {
|
|
61
|
+
color: var(--error);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&:hover {
|
|
65
|
+
.panel-container {
|
|
66
|
+
.panel-content {
|
|
67
|
+
.mbg-h-c-tone-s-icon {
|
|
68
|
+
opacity: 1;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import './panel.scss'
|
|
2
|
+
import template from './panel.html'
|
|
3
|
+
|
|
4
|
+
class MbgCardPanelController {
|
|
5
|
+
public loading
|
|
6
|
+
public panel
|
|
7
|
+
public hideValue: boolean
|
|
8
|
+
public randomEmoji: string
|
|
9
|
+
public allowedToSee: boolean
|
|
10
|
+
private allowedCallBack: Function
|
|
11
|
+
|
|
12
|
+
constructor(public $scope, public $element, public $attrs, public $timeout) {}
|
|
13
|
+
$onInit() {
|
|
14
|
+
this.syncValue()
|
|
15
|
+
this.$scope.$watch('$ctrl.displayValues', (data) => {
|
|
16
|
+
this.randomEmoji = this.generateRandomEmoji()
|
|
17
|
+
this.hideValue = !data
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
this.randomEmoji = this.generateRandomEmoji()
|
|
21
|
+
|
|
22
|
+
this.panel.setNewValue = (value) => {
|
|
23
|
+
this.setValue(value)
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
setValue = (value) => {
|
|
28
|
+
this.$timeout(() => {
|
|
29
|
+
this.panel.value = value
|
|
30
|
+
this.panel.loading = false
|
|
31
|
+
}, 1000)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
syncValue() {
|
|
35
|
+
if (this.panel.sync) {
|
|
36
|
+
this.panel.loading = true
|
|
37
|
+
this.panel.sync(this)
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
generateRandomEmoji = () => {
|
|
42
|
+
const emojis = ['👏👏👏', '🙈🙉🙊', '🎉🎉🎉', '😎😎😎', '🔐🔐🔐', '🚀🚀🚀', '🤖🤖🤖']
|
|
43
|
+
const rand = Math.floor(Math.random() * emojis.length)
|
|
44
|
+
return emojis[rand]
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
toggleShowValue = () => {
|
|
48
|
+
if (this.allowedToSee !== undefined && !this.allowedToSee) {
|
|
49
|
+
if (this.allowedCallBack) {
|
|
50
|
+
this.allowedCallBack()
|
|
51
|
+
}
|
|
52
|
+
return
|
|
53
|
+
}
|
|
54
|
+
this.randomEmoji = this.generateRandomEmoji()
|
|
55
|
+
this.hideValue = !this.hideValue
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
MbgCardPanelController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
|
|
60
|
+
|
|
61
|
+
const mbgCardPanel = {
|
|
62
|
+
transclude: true,
|
|
63
|
+
bindings: {
|
|
64
|
+
loading: '=?',
|
|
65
|
+
panel: '=',
|
|
66
|
+
displayValues: '=?',
|
|
67
|
+
allowedToSee: '=?',
|
|
68
|
+
allowedCallBack: '&?',
|
|
69
|
+
},
|
|
70
|
+
template,
|
|
71
|
+
controller: MbgCardPanelController,
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
export { mbgCardPanel }
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
<div class="mb-h-charts-container">
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
<mbg-chart-wrapper panels="$ctrl.panels"
|
|
4
|
+
loading="$ctrl.loading"
|
|
5
|
+
display-values="$ctrl.displayValues"
|
|
6
|
+
allowed-to-see="$ctrl.allowedToSee"
|
|
7
|
+
allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
|
|
8
|
+
|
|
3
9
|
<div ng-show="!$ctrl.hasData()"
|
|
4
10
|
class="empty">
|
|
5
11
|
<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
@@ -236,12 +236,16 @@ class MbgChartBarLineController {
|
|
|
236
236
|
}
|
|
237
237
|
}
|
|
238
238
|
|
|
239
|
-
MbgChartBarLineController
|
|
239
|
+
MbgChartBarLineController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
|
|
240
240
|
|
|
241
241
|
const mbgChartBarLine = {
|
|
242
242
|
bindings: {
|
|
243
243
|
chart: '=',
|
|
244
|
+
panels: '=',
|
|
245
|
+
loading: '=?',
|
|
244
246
|
displayValues: '=?',
|
|
247
|
+
allowedToSee: '=?',
|
|
248
|
+
allowedCallBack: '&?',
|
|
245
249
|
},
|
|
246
250
|
template,
|
|
247
251
|
controller: MbgChartBarLineController,
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
<div class="mb-h-charts-container">
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
<mbg-chart-wrapper panels="$ctrl.panels"
|
|
4
|
+
loading="$ctrl.loading"
|
|
5
|
+
display-values="$ctrl.displayValues"
|
|
6
|
+
allowed-to-see="$ctrl.allowedToSee"
|
|
7
|
+
allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
|
|
8
|
+
|
|
3
9
|
<div ng-show="!$ctrl.hasData()"
|
|
4
10
|
class="empty">
|
|
5
11
|
<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
@@ -261,12 +261,16 @@ class MbgChartBarLinePieController {
|
|
|
261
261
|
}
|
|
262
262
|
}
|
|
263
263
|
|
|
264
|
-
MbgChartBarLinePieController
|
|
264
|
+
MbgChartBarLinePieController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
|
|
265
265
|
|
|
266
266
|
const mbgChartBarLinePie = {
|
|
267
267
|
bindings: {
|
|
268
268
|
chart: '=',
|
|
269
|
+
panels: '=',
|
|
270
|
+
loading: '=?',
|
|
269
271
|
displayValues: '=?',
|
|
272
|
+
allowedToSee: '=?',
|
|
273
|
+
allowedCallBack: '&?',
|
|
270
274
|
},
|
|
271
275
|
template,
|
|
272
276
|
controller: MbgChartBarLinePieController,
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
<div class="mb-h-charts-container">
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
<mbg-chart-wrapper panels="$ctrl.panels"
|
|
4
|
+
loading="$ctrl.loading"
|
|
5
|
+
display-values="$ctrl.displayValues"
|
|
6
|
+
allowed-to-see="$ctrl.allowedToSee"
|
|
7
|
+
allowed-call-back="$ctrl.allowedCallBack()"></mbg-chart-wrapper>
|
|
8
|
+
|
|
3
9
|
<div ng-show="!$ctrl.hasData()"
|
|
4
10
|
class="empty">
|
|
5
11
|
<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
@@ -45,6 +45,7 @@ class MbgChartLineController {
|
|
|
45
45
|
this.$element[0].querySelector('.home-chart'),
|
|
46
46
|
this.getHighchartConfig(),
|
|
47
47
|
)
|
|
48
|
+
|
|
48
49
|
this.hasData = () => {
|
|
49
50
|
const finds =
|
|
50
51
|
chartInstance.series.reduce((value, serie) => {
|
|
@@ -210,28 +211,36 @@ class MbgChartLineController {
|
|
|
210
211
|
} else {
|
|
211
212
|
arrayChartColors = this.chart.chartColor
|
|
212
213
|
}
|
|
214
|
+
|
|
213
215
|
series = arrayChartColors.map((chartColor, i) => {
|
|
216
|
+
const defaultStops = chartColor.fillColor
|
|
217
|
+
? chartColor.fillColor
|
|
218
|
+
: [
|
|
219
|
+
[0, 'rgba(253,147,0,8)'],
|
|
220
|
+
[1, 'rgba(247,41,14,8)'],
|
|
221
|
+
]
|
|
222
|
+
const props = chartColor.isDefault
|
|
223
|
+
? {
|
|
224
|
+
lineWidth: 0,
|
|
225
|
+
lineColor: 'transparent',
|
|
226
|
+
zIndex: 1,
|
|
227
|
+
fillColor: {
|
|
228
|
+
linearGradient: [0, 0, 0, 500],
|
|
229
|
+
stops: defaultStops,
|
|
230
|
+
},
|
|
231
|
+
opacity: 0.5,
|
|
232
|
+
}
|
|
233
|
+
: {
|
|
234
|
+
lineWidth: 2,
|
|
235
|
+
fillColor: 'transparent',
|
|
236
|
+
zIndex: 2,
|
|
237
|
+
}
|
|
238
|
+
|
|
214
239
|
return {
|
|
215
240
|
type: 'areaspline',
|
|
216
|
-
lineWidth: 0,
|
|
217
241
|
color: chartColor.fillColor ? chartColor.fillColor[0][1] : 'rgba(255,147,43,1)',
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
enabled: false,
|
|
221
|
-
lineColor: '#fff',
|
|
222
|
-
lineWidth: 2,
|
|
223
|
-
},
|
|
224
|
-
fillOpacity: 0.75,
|
|
225
|
-
opacity: 0.5,
|
|
226
|
-
fillColor: {
|
|
227
|
-
linearGradient: [0, 0, 0, 400],
|
|
228
|
-
stops: chartColor.fillColor
|
|
229
|
-
? chartColor.fillColor
|
|
230
|
-
: [
|
|
231
|
-
[0, 'rgba(253,147,0,0.8)'],
|
|
232
|
-
[1, 'rgba(247,41,14,0.8)'],
|
|
233
|
-
],
|
|
234
|
-
},
|
|
242
|
+
|
|
243
|
+
...props,
|
|
235
244
|
name: this.chart.series[i].name,
|
|
236
245
|
data: [],
|
|
237
246
|
}
|
|
@@ -248,12 +257,16 @@ class MbgChartLineController {
|
|
|
248
257
|
}
|
|
249
258
|
}
|
|
250
259
|
|
|
251
|
-
MbgChartLineController
|
|
260
|
+
MbgChartLineController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
|
|
252
261
|
|
|
253
262
|
const mbgChartLine = {
|
|
254
263
|
bindings: {
|
|
255
264
|
chart: '=',
|
|
265
|
+
panels: '=',
|
|
266
|
+
loading: '=?',
|
|
256
267
|
displayValues: '=?',
|
|
268
|
+
allowedToSee: '=?',
|
|
269
|
+
allowedCallBack: '&?',
|
|
257
270
|
},
|
|
258
271
|
template,
|
|
259
272
|
controller: MbgChartLineController,
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import * as angular from 'angular'
|
|
2
2
|
import { mbgHomescreen } from './mbg-homescreen'
|
|
3
|
-
import { mbgCardTypeone } from './cards'
|
|
3
|
+
import { mbgCardPanel, mbgCardTypeone, mbgChartWrapper } from './cards'
|
|
4
4
|
import { mbgChartLine, mbgChartBarLine, mbgChartBarLinePie } from './charts'
|
|
5
5
|
|
|
6
6
|
const mbgHomeScreenModule = angular
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
.module('mbg.components.mbgHomescreen', [])
|
|
8
|
+
.component('mbgHomescreen', mbgHomescreen)
|
|
9
|
+
.component('mbgCardTypeone', mbgCardTypeone)
|
|
10
|
+
.component('mbgChartLine', mbgChartLine)
|
|
11
|
+
.component('mbgChartBarLine', mbgChartBarLine)
|
|
12
|
+
.component('mbgChartBarLinePie', mbgChartBarLinePie)
|
|
13
|
+
.component('mbgCardPanel', mbgCardPanel)
|
|
14
|
+
.component('mbgChartWrapper', mbgChartWrapper).name
|
|
14
15
|
|
|
15
16
|
export { mbgHomeScreenModule }
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
<div class="mh-container"
|
|
2
|
-
ng-
|
|
2
|
+
ng-if="!$ctrl.loading">
|
|
3
|
+
|
|
4
|
+
<div class="overlay"
|
|
5
|
+
ng-if="$ctrl.openedFilters"
|
|
6
|
+
ng-click="$ctrl.closeFilters($event)"></div>
|
|
7
|
+
|
|
3
8
|
<div class="mbg-h-tabs">
|
|
4
9
|
<div class="mbg-h-t-tab"
|
|
5
10
|
ng-repeat="tab in $ctrl.tabs"
|
|
@@ -7,32 +12,59 @@
|
|
|
7
12
|
ng-class="{ 'active' : tab.active }">
|
|
8
13
|
{{ tab.name }}
|
|
9
14
|
</div>
|
|
15
|
+
|
|
16
|
+
<div class="homescreen-filter"
|
|
17
|
+
ng-click="$ctrl.onToggleFilters($event)">
|
|
18
|
+
<i class="fa fa-filter"
|
|
19
|
+
aria-hidden="true"></i>
|
|
20
|
+
</div>
|
|
10
21
|
</div>
|
|
22
|
+
|
|
23
|
+
|
|
11
24
|
<div class="homescreen-filters"
|
|
12
|
-
ng-if="$ctrl.tabs && $ctrl.tabs[$ctrl.activeIndex].active && $ctrl.tabs[$ctrl.activeIndex].filters">
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
ng-if="$ctrl.openedFilters && $ctrl.tabs && $ctrl.tabs[$ctrl.activeIndex].active && $ctrl.tabs[$ctrl.activeIndex].filters">
|
|
26
|
+
<span>
|
|
27
|
+
Período
|
|
28
|
+
</span>
|
|
29
|
+
<div class="homescreen-filters-body">
|
|
30
|
+
|
|
31
|
+
<div ng-repeat="item in $ctrl.tabs[$ctrl.activeIndex].filters">
|
|
32
|
+
<button ng-class="{'active': item.active}"
|
|
33
|
+
ng-if="item.type === 'BUTTON'"
|
|
34
|
+
ng-click="$ctrl.selectFilter(item)">{{item.name}}</button>
|
|
35
|
+
<div ng-if="item.type === 'DATE'"
|
|
36
|
+
style="margin: 0 5px 14px 0;">
|
|
37
|
+
<mbg-input-date ng-model="item.value"
|
|
38
|
+
ng-change="$ctrl.onChangeFilter()"
|
|
39
|
+
calendar="true"
|
|
40
|
+
placeholder="{{ item.placeholder }}"></mbg-input-date>
|
|
41
|
+
</div>
|
|
23
42
|
</div>
|
|
24
43
|
</div>
|
|
25
44
|
|
|
26
45
|
</div>
|
|
46
|
+
|
|
27
47
|
<div class="charts">
|
|
28
48
|
<mbg-chart-line chart="$ctrl.chart"
|
|
49
|
+
panels="$ctrl.cards"
|
|
29
50
|
display-values="$ctrl.displayValues"
|
|
51
|
+
loading="$ctrl.loading"
|
|
52
|
+
allowed-to-see="$ctrl.allowedToSee"
|
|
53
|
+
allowed-call-back="$ctrl.allowedCallBack()"
|
|
30
54
|
ng-if="$ctrl.chart && $ctrl.chart.type == 'line'"></mbg-chart-line>
|
|
31
55
|
<mbg-chart-bar-line chart="$ctrl.chart"
|
|
56
|
+
panels="$ctrl.cards"
|
|
32
57
|
display-values="$ctrl.displayValues"
|
|
58
|
+
loading="$ctrl.loading"
|
|
59
|
+
allowed-to-see="$ctrl.allowedToSee"
|
|
60
|
+
allowed-call-back="$ctrl.allowedCallBack()"
|
|
33
61
|
ng-if="$ctrl.chart && $ctrl.chart.type == 'barline'"></mbg-chart-bar-line>
|
|
34
62
|
<mbg-chart-bar-line-pie chart="$ctrl.chart"
|
|
63
|
+
panels="$ctrl.cards"
|
|
35
64
|
display-values="$ctrl.displayValues"
|
|
65
|
+
loading="$ctrl.loading"
|
|
66
|
+
allowed-to-see="$ctrl.allowedToSee"
|
|
67
|
+
allowed-call-back="$ctrl.allowedCallBack()"
|
|
36
68
|
ng-if="$ctrl.chart && $ctrl.chart.type == 'barlinepie'"></mbg-chart-bar-line-pie>
|
|
37
69
|
<div class="display-values">
|
|
38
70
|
<a ng-show="!$ctrl.displayValues"
|
|
@@ -41,13 +73,6 @@
|
|
|
41
73
|
ng-click="$ctrl.handleDisplayValues()"><i class="fas fa-eye-slash"></i> <span>Esconder valores</span></a>
|
|
42
74
|
</div>
|
|
43
75
|
</div>
|
|
44
|
-
<div class="mbg-h-card-container">
|
|
45
|
-
<mbg-card-typeone ng-repeat="card in $ctrl.cards"
|
|
46
|
-
allowed-to-see="$ctrl.allowedToSee"
|
|
47
|
-
display-values="$ctrl.displayValues"
|
|
48
|
-
allowed-call-back="$ctrl.allowedCallBack()"
|
|
49
|
-
card="card"></mbg-card-typeone>
|
|
50
|
-
</div>
|
|
51
76
|
|
|
52
77
|
</div>
|
|
53
78
|
|
|
@@ -60,18 +85,4 @@
|
|
|
60
85
|
<div class="fake-chart">
|
|
61
86
|
<mbg-skeleton></mbg-skeleton>
|
|
62
87
|
</div>
|
|
63
|
-
<div class="mbg-h-card-container">
|
|
64
|
-
<div class="fake-card">
|
|
65
|
-
<mbg-skeleton></mbg-skeleton>
|
|
66
|
-
</div>
|
|
67
|
-
<div class="fake-card">
|
|
68
|
-
<mbg-skeleton></mbg-skeleton>
|
|
69
|
-
</div>
|
|
70
|
-
<div class="fake-card">
|
|
71
|
-
<mbg-skeleton></mbg-skeleton>
|
|
72
|
-
</div>
|
|
73
|
-
<div class="fake-card">
|
|
74
|
-
<mbg-skeleton></mbg-skeleton>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
88
|
</div>
|
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
mbg-homescreen {
|
|
2
|
+
.overlay {
|
|
3
|
+
position: absolute;
|
|
4
|
+
top: 0;
|
|
5
|
+
left: 0;
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
z-index: 9;
|
|
9
|
+
}
|
|
10
|
+
|
|
2
11
|
.charts {
|
|
3
12
|
.display-values {
|
|
4
13
|
display: flex;
|
|
@@ -7,6 +16,7 @@ mbg-homescreen {
|
|
|
7
16
|
transition: all 300ms ease;
|
|
8
17
|
opacity: 0;
|
|
9
18
|
cursor: pointer;
|
|
19
|
+
width: 90%;
|
|
10
20
|
|
|
11
21
|
a {
|
|
12
22
|
color: var(--neutral2);
|
|
@@ -18,15 +28,55 @@ mbg-homescreen {
|
|
|
18
28
|
|
|
19
29
|
&:hover {
|
|
20
30
|
.display-values {
|
|
21
|
-
transform: translateY(
|
|
31
|
+
transform: translateY(-24px);
|
|
22
32
|
opacity: 1;
|
|
23
33
|
}
|
|
24
34
|
}
|
|
25
35
|
}
|
|
26
|
-
|
|
36
|
+
|
|
37
|
+
.homescreen-filter{
|
|
38
|
+
position: absolute;
|
|
39
|
+
right: 3px;
|
|
40
|
+
top: .5px;
|
|
41
|
+
padding: 10px;
|
|
42
|
+
background: var(--primary);
|
|
43
|
+
border-radius: 100px;
|
|
44
|
+
width: 48px;
|
|
45
|
+
height: 48px;
|
|
46
|
+
text-align: center;
|
|
47
|
+
font-size: 30px;
|
|
27
48
|
display: flex;
|
|
28
|
-
align-items: center;
|
|
29
49
|
justify-content: center;
|
|
50
|
+
align-items: center;
|
|
51
|
+
color: white;
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.homescreen-filters {
|
|
56
|
+
position: absolute;
|
|
57
|
+
right: 24px;
|
|
58
|
+
top: 74px;
|
|
59
|
+
z-index: 10;
|
|
60
|
+
|
|
61
|
+
span {
|
|
62
|
+
color: var(--neutral2);
|
|
63
|
+
padding: 12px;
|
|
64
|
+
display: inline-block;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
background-color: white;
|
|
68
|
+
border-radius: 10px;
|
|
69
|
+
height: 100px;
|
|
70
|
+
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
|
|
71
|
+
|
|
72
|
+
.homescreen-filters-body {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
gap: 12px;
|
|
77
|
+
padding: 0 12px;
|
|
78
|
+
}
|
|
79
|
+
|
|
30
80
|
|
|
31
81
|
button {
|
|
32
82
|
height: 35px;
|
|
@@ -34,8 +84,6 @@ mbg-homescreen {
|
|
|
34
84
|
color: var(--primary);
|
|
35
85
|
background-color: #fff;
|
|
36
86
|
border: 2px solid var(--primary);
|
|
37
|
-
margin-right: 14px;
|
|
38
|
-
margin-bottom: 14px;
|
|
39
87
|
transition: all 200ms ease;
|
|
40
88
|
border-radius: 35px;
|
|
41
89
|
|
|
@@ -48,7 +96,7 @@ mbg-homescreen {
|
|
|
48
96
|
.mh-container {
|
|
49
97
|
width: 100%;
|
|
50
98
|
height: auto;
|
|
51
|
-
padding:
|
|
99
|
+
padding: 10px 2px;
|
|
52
100
|
|
|
53
101
|
.mh-panel-container {
|
|
54
102
|
background-color: white;
|
|
@@ -14,8 +14,15 @@ class MbgHomescreenController {
|
|
|
14
14
|
private displayValues: boolean
|
|
15
15
|
private activeIndex: number
|
|
16
16
|
private activeFilter: any
|
|
17
|
+
private openedFilters = false
|
|
18
|
+
private panels: {
|
|
19
|
+
icon: string
|
|
20
|
+
description: string
|
|
21
|
+
value: number
|
|
22
|
+
isCurrency: boolean
|
|
23
|
+
}[]
|
|
17
24
|
|
|
18
|
-
constructor(public $scope, public $element, public $attrs, public $timeout) {
|
|
25
|
+
constructor(public $scope, public $element, public $attrs, public $timeout) {}
|
|
19
26
|
|
|
20
27
|
$onInit() {
|
|
21
28
|
this.$scope.$watch('$ctrl.config', (data) => {
|
|
@@ -29,6 +36,17 @@ class MbgHomescreenController {
|
|
|
29
36
|
})
|
|
30
37
|
}
|
|
31
38
|
|
|
39
|
+
onToggleFilters(event) {
|
|
40
|
+
event.stopPropagation()
|
|
41
|
+
this.openedFilters = !this.openedFilters
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
closeFilters() {
|
|
45
|
+
if (this.openedFilters) {
|
|
46
|
+
this.openedFilters = false
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
32
50
|
onChangeFilter() {
|
|
33
51
|
this.$timeout(() => {
|
|
34
52
|
if (this.tabs[this.activeIndex].executeFilter) {
|
|
@@ -47,6 +65,7 @@ class MbgHomescreenController {
|
|
|
47
65
|
item.active = true
|
|
48
66
|
if (this.tabs[this.activeIndex].executeFilter) {
|
|
49
67
|
this.tabs[this.activeIndex].executeFilter(this.config)
|
|
68
|
+
this.openedFilters = false
|
|
50
69
|
}
|
|
51
70
|
}
|
|
52
71
|
}
|