@kigi/components 1.41.0-alpha.11 → 1.41.0-alpha.13

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.41.0-alpha.11",
3
+ "version": "1.41.0-alpha.13",
4
4
  "description": "@kigi/components",
5
5
  "main": "src/components/index.ts",
6
6
  "scripts": {
@@ -8,10 +8,10 @@
8
8
  uib-tooltip="Sem permissão para visualizar"
9
9
  tooltip-placement="left"
10
10
  ng-if="$ctrl.isBlockValuesDashboarReturnCustomer && !$ctrl.hideValue"></i>
11
- <i ng-if="$ctrl.hideValue"
11
+ <i ng-if="!$ctrl.hideValue && $ctrl.isPermissionAverageCustomerReturnTime"
12
12
  disable-animate
13
13
  class="far fa-eye eye-board-target"></i>
14
- <i ng-if="!$ctrl.hideValue && $ctrl.isPermissionAverageCustomerReturnTime"
14
+ <i ng-if="$ctrl.hideValue && $ctrl.isPermissionAverageCustomerReturnTime"
15
15
  disable-animate
16
16
  class="far fa-eye-slash eye-board-target"></i>
17
17
  </div>
@@ -1,12 +1,28 @@
1
1
  .average-customer-time-wrapper {}
2
2
 
3
3
  .highcharts-figure {
4
+ .custom-title-container{
5
+ .custom-title{
6
+ position: relative;
7
+ left: -20px;
8
+ }
9
+ }
10
+ .line-pay {
11
+ width: 100%;
12
+ background: #737373;
13
+ height: 1px;
14
+ opacity: 0.3;
15
+
16
+ }
4
17
  #container {
5
18
  border-radius: 10px;
6
19
  background: #FFF;
7
20
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
8
- width: 444px;
21
+ width: 100%;
9
22
  margin-left: 19px;
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: center;
10
26
  }
11
27
  .description-container-dash {
12
28
  color: var(--titleColor);
@@ -27,8 +43,13 @@
27
43
 
28
44
  @media screen and (max-width: 1920px){
29
45
  .highcharts-figure {
46
+
47
+ .line-pay {
48
+ position: relative;
49
+ left: -20px;
50
+ width: 480px;
51
+ }
30
52
  #container {
31
- padding-left: 24px;
32
53
  border-radius: 10px;
33
54
  background: #FFF;
34
55
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
@@ -42,6 +63,11 @@
42
63
 
43
64
  @media screen and (max-width: 1728px){
44
65
  .highcharts-figure {
66
+ .line-pay {
67
+ position: relative;
68
+ left: -20px;
69
+ width: 418px;
70
+ }
45
71
  #container {
46
72
  border-radius: 10px;
47
73
  background: #FFF;
@@ -54,6 +80,16 @@
54
80
 
55
81
  @media screen and (max-width: 1536px){
56
82
  .highcharts-figure {
83
+ .custom-title-container{
84
+ .custom-title{
85
+ font-size: 17px;
86
+ }
87
+ }
88
+ .line-pay {
89
+ position: relative;
90
+ left: -20px;
91
+ width: 366px;
92
+ }
57
93
  #container {
58
94
  border-radius: 10px;
59
95
  background: #FFF;
@@ -65,6 +101,18 @@
65
101
 
66
102
  @media screen and (max-width: 1440px){
67
103
  .highcharts-figure {
104
+ .custom-title-container{
105
+ .custom-title{
106
+ font-size: 16px;
107
+ width: 100vw;
108
+ }
109
+ }
110
+
111
+ .line-pay {
112
+ position: relative;
113
+ left: -20px;
114
+ width: 332px;
115
+ }
68
116
  #container {
69
117
  border-radius: 10px;
70
118
  background: #FFF;
@@ -75,8 +123,44 @@
75
123
  }
76
124
  }
77
125
 
126
+ @media screen and (max-width: 1368px){
127
+ .highcharts-figure {
128
+ .custom-title-container{
129
+ .custom-title{
130
+ font-size: 20px;
131
+ width: 100vw;
132
+ }
133
+ }
134
+
135
+ .line-pay {
136
+ position: relative;
137
+ left: -20px;
138
+ width: 450px;
139
+ }
140
+ #container {
141
+ border-radius: 10px;
142
+ background: #FFF;
143
+ box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
144
+ width: 474px;
145
+
146
+ }
147
+ }
148
+ }
149
+
78
150
  @media screen and (max-width: 1366px){
79
151
  .highcharts-figure {
152
+ .custom-title-container{
153
+ .custom-title{
154
+ font-size: 20px;
155
+ width: 100vw;
156
+ }
157
+ }
158
+
159
+ .line-pay {
160
+ position: relative;
161
+ left: -20px;
162
+ width: 450px;
163
+ }
80
164
  #container {
81
165
  border-radius: 10px;
82
166
  background: #FFF;
@@ -89,6 +173,18 @@
89
173
 
90
174
  @media screen and (max-width: 1024px){
91
175
  .highcharts-figure {
176
+ .custom-title-container{
177
+ .custom-title{
178
+ font-size: 15px;
179
+ width: 100vw;
180
+ }
181
+ }
182
+
183
+ .line-pay {
184
+ position: relative;
185
+ left: -20px;
186
+ width: 306px;
187
+ }
92
188
  #container {
93
189
  border-radius: 10px;
94
190
  background: #FFF;
@@ -51,14 +51,52 @@ class MbgAverageCustomerTimeController {
51
51
  chart: {
52
52
  type: 'pie',
53
53
  backgroundColor: 'none',
54
+ events: {
55
+ redraw: function () {
56
+ const chart = this
57
+ const noDataText = 'Nenhum período selecionado'
58
+
59
+ if (chart.noDataLabel) {
60
+ chart.noDataLabel.destroy()
61
+ chart.noDataLabel = null
62
+ }
63
+
64
+ const allDataHidden = chart.series.filter((series) =>
65
+ series.data.filter((point) => point.options.visible),
66
+ )
67
+
68
+ const hasDate = allDataHidden[0].data.some((option) => option.visible)
69
+
70
+ if (!hasDate) {
71
+ const centerX = chart.plotWidth / 2
72
+ const centerY = chart.plotHeight / 2
73
+ chart.noDataLabel = chart.renderer
74
+ .text(noDataText, centerX, centerY)
75
+ .attr({
76
+ zIndex: 5,
77
+ align: 'center',
78
+ })
79
+ .css({
80
+ fontSize: '20px',
81
+ color: '#5f5b5b',
82
+ textAlign: 'center',
83
+ })
84
+ .add()
85
+ }
86
+ },
87
+ },
54
88
  },
55
89
  title: {
56
- text: 'Tempo médio de retorno do cliente',
90
+ text: `
91
+ <div class="custom-title-container">
92
+ <p class="custom-title">Tempo médio de retorno do cliente</p>
93
+ <div class="line-pay"></div>
94
+ </div>`,
95
+ useHTML: true,
57
96
  style: {
58
97
  fontSize: '20px',
59
- color: ' #5f5b5b',
98
+ color: '#5f5b5b',
60
99
  fontWeight: 'bold',
61
- useHTML: true,
62
100
  },
63
101
  },
64
102
 
@@ -72,15 +110,16 @@ class MbgAverageCustomerTimeController {
72
110
  cursor: 'pointer',
73
111
  borderRadius: 8,
74
112
  dataLabels: {
75
- enabled: true,
76
- useHTML: true,
113
+ enabled: !hasPermissionPorcentages,
114
+
77
115
  formatter: function () {
78
- if (hasPermissionPorcentages) {
79
- return `<span style="color:#7B7B7B"><i class="fa fa-lock lock-dash" aria-hidden="true" uib-tooltip="Sem permissão para visualizar"></i></span>`
116
+ if (!hasPermissionPorcentages) {
117
+ return `<span style="color:#7B7B7B">${
118
+ this.point.name
119
+ }</span><br><span style="font-weight:bold; color:#333">(${this.y.toFixed(
120
+ 2,
121
+ )}%)</span>`
80
122
  }
81
- return `<span style="color:#7B7B7B">${
82
- this.point.name
83
- }</span><br><span style="font-weight:bold; color:#333">(${this.y.toFixed(2)}%)</span>`
84
123
  },
85
124
  style: {
86
125
  fontSize: '0.9em',
@@ -90,6 +129,7 @@ class MbgAverageCustomerTimeController {
90
129
  },
91
130
  },
92
131
  tooltip: {
132
+ backgroundColor: '#FFF',
93
133
  formatter: function () {
94
134
  if (hasPermissionPorcentages) {
95
135
  return 'Sem permissão para visualizar'