logitude-dashboard-library 1.2.3 → 1.2.4

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.
Files changed (13) hide show
  1. package/dist/assets/images/logo.png +0 -0
  2. package/dist/assets/styles/colors.scss +10 -0
  3. package/dist/assets/styles/components-style.scss +190 -0
  4. package/dist/assets/styles/fonts.scss +1 -0
  5. package/dist/assets/styles/global.scss +26 -0
  6. package/dist/features/Dashboard/DashboardDesigner.d.ts +0 -3
  7. package/dist/features/Dashboard/NewWidget.d.ts +0 -1
  8. package/dist/index.css +108 -108
  9. package/dist/index.js +0 -1
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.modern.js +0 -1
  12. package/dist/index.modern.js.map +1 -1
  13. package/package.json +6 -3
package/dist/assets/images/logo.png ADDED
Binary file
package/dist/assets/styles/colors.scss ADDED
@@ -0,0 +1,10 @@
1
+ $blue: #2C99F7;
2
+ $bg-color: #F5F6FB;
3
+ $gray: #F5F6FB;
4
+ $green: #22D792;
5
+ $yellow: #FBC445;
6
+ $red: #F74E49;
7
+ $dark-grey: #717585;
8
+
9
+
10
+
package/dist/assets/styles/components-style.scss ADDED
@@ -0,0 +1,190 @@
1
+ $blue: #2C99F7;
2
+ $bg-color: #F5F6FB;
3
+ $gray: #F5F6FB;
4
+ $green: #22D792;
5
+ $yellow: #FBC445;
6
+ $red: #F74E49;
7
+ $dark-grey: #717585;
8
+
9
+ .form-field{
10
+ display: flex;
11
+ align-items: baseline;
12
+ margin-bottom: 5px;
13
+ >label{
14
+ margin-right: 15px;
15
+ width: 100px;
16
+ }
17
+ .p-inputtext{
18
+ width: 250px;
19
+ }
20
+ }
21
+ .dialog-footer{
22
+ display: flex;
23
+ justify-content: flex-end;
24
+ button{
25
+ margin-left: 10px;
26
+ }
27
+ }
28
+ .dialog-wrapper{
29
+ min-height: 400px;
30
+
31
+ display: flex;
32
+ flex-direction: column;
33
+ justify-content: space-between;
34
+ height: 100%;
35
+ }
36
+
37
+
38
+
39
+ .App {
40
+ margin: 0 50px;
41
+ }
42
+
43
+ .dashboard-header {
44
+ display: flex;
45
+ justify-content: space-between;
46
+
47
+ >div {
48
+ align-items: center;
49
+ display: flex;
50
+ }
51
+
52
+ >div>* {
53
+ margin-right: 15px;
54
+ }
55
+
56
+ .p-button-icon,
57
+ i {
58
+ font-size: 28px !important;
59
+ color: black;
60
+ }
61
+
62
+ }
63
+
64
+
65
+
66
+ .App-link {
67
+ color: #61dafb;
68
+ }
69
+
70
+ @keyframes App-logo-spin {
71
+ from {
72
+ transform: rotate(0deg);
73
+ }
74
+
75
+ to {
76
+ transform: rotate(360deg);
77
+ }
78
+ }
79
+
80
+
81
+ #container {
82
+ height: 100%;
83
+ width: 100%;
84
+ position: absolute;
85
+ }
86
+
87
+
88
+ .react-grid-item {
89
+ background-color: lightblue;
90
+ }
91
+
92
+ .panel {
93
+ background: white !important;
94
+ border-radius: 7px;
95
+ box-shadow: 0px 0px 3px 1px #6273842b;
96
+ padding: 20px;
97
+ box-sizing: border-box;
98
+ position: relative;
99
+ height: 100%;
100
+
101
+ header {
102
+ display: flex;
103
+ justify-content: space-between;
104
+ align-items: center;
105
+
106
+ i {
107
+ font-size: 18px;
108
+ // color: colors.$red;
109
+ cursor: pointer;
110
+ }
111
+ }
112
+
113
+ h1 {
114
+ text-transform: capitalize;
115
+ font-size: 15px;
116
+ font-family: 'Roboto Flex';
117
+ color: #061436;
118
+ }
119
+ }
120
+
121
+
122
+ #container {
123
+ width: 100%;
124
+ height: 100%;
125
+ position: absolute;
126
+ }
127
+
128
+
129
+ .grid-container {
130
+ position: relative;
131
+
132
+ .react-grid-layout {
133
+ position: absolute;
134
+ top: 0;
135
+ width: 100%;
136
+ }
137
+ }
138
+
139
+ .grid {
140
+ display: grid;
141
+ grid-template-columns: repeat(12, 1fr);
142
+ grid-column-gap: 10px;
143
+ grid-row-gap: 10px;
144
+ height: fit-content;
145
+ padding: 10px;
146
+
147
+ >div {
148
+ box-sizing: border-box;
149
+ border-radius: 7px;
150
+ }
151
+
152
+ }
153
+
154
+ .grid--bordered>div {
155
+ border: 2px dotted #d0d0d0;
156
+ }
157
+
158
+ .grid--boxes>div {
159
+ background: #00000008;
160
+ }
161
+
162
+
163
+ .dashboard-widget {
164
+ height: calc(100% - 40px);
165
+ box-sizing: border-box;
166
+ }
167
+
168
+ .filter-label {
169
+ font-size: 12px;
170
+ color: $dark-grey;
171
+ }
172
+
173
+ .buttons-overlay .p-overlaypanel-content {
174
+ padding: 0 !important;
175
+ }
176
+
177
+ .buttons-list>div {
178
+ padding: 15px;
179
+ width: 150px;
180
+ cursor: pointer;
181
+ user-select: none;
182
+
183
+ &:hover {
184
+ background: $bg-color;
185
+ }
186
+ }
187
+
188
+ .hidden {
189
+ display: none;
190
+ }
package/dist/assets/styles/fonts.scss ADDED
@@ -0,0 +1 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&family=Roboto+Flex:opsz@8..144&display=swap');
package/dist/assets/styles/global.scss ADDED
@@ -0,0 +1,26 @@
1
+ @use 'colors.scss';
2
+
3
+ @mixin card {
4
+ background: white !important;
5
+ border-radius: 7px;
6
+ box-shadow: 0px 0px 3px 1px #6273842b;
7
+ }
8
+
9
+ * {
10
+ // change ReactPrime component default size
11
+ font-size: 15px;
12
+ }
13
+
14
+ .container{
15
+ position: relative;
16
+ display: flex;
17
+ width: 100%;
18
+ >div{
19
+ // width: 50%;
20
+ padding: 0 20px;
21
+ }
22
+ }
23
+
24
+ #chart,.chart{
25
+ height: 100%;
26
+ }
package/dist/features/Dashboard/DashboardDesigner.d.ts CHANGED
@@ -1,7 +1,4 @@
1
1
  /// <reference types="react" />
2
- import "react-grid-layout/css/styles.css";
3
- import "react-resizable/css/styles.css";
4
- import "./dashboard-designer.scss";
5
2
  import ColumnChartComponent from "./ChartsComponents/ColumnChartComponent";
6
3
  declare const DashboardDesigner: () => JSX.Element;
7
4
  export declare const layoutGridProps: {
package/dist/features/Dashboard/NewWidget.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from "react";
2
2
  import { DropdownChangeParams } from "primereact/dropdown";
3
- import "./NewWidget.scss";
4
3
  import { Widget } from "../../types/widget";
5
4
  interface NewWidgetProps {
6
5
  onOkButton(data: Widget): any;
package/dist/index.css CHANGED
@@ -1,118 +1,46 @@
1
- ._3s4OD {
2
- position: relative;
3
- }
4
- ._3ACrv {
5
- position: absolute;
6
- width: 20px;
7
- height: 20px;
8
- background-repeat: no-repeat;
9
- background-origin: content-box;
10
- box-sizing: border-box;
11
- background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
12
- background-position: bottom right;
13
- padding: 0 3px 3px 0;
14
- }
15
- ._3Dv4b {
16
- bottom: 0;
17
- left: 0;
18
- cursor: sw-resize;
19
- -webkit-transform: rotate(90deg);
20
- transform: rotate(90deg);
21
- }
22
- ._1_pdx {
23
- bottom: 0;
24
- right: 0;
25
- cursor: se-resize;
26
- }
27
- ._3lqDp {
28
- top: 0;
29
- left: 0;
30
- cursor: nw-resize;
31
- -webkit-transform: rotate(180deg);
32
- transform: rotate(180deg);
33
- }
34
- ._1br-A {
35
- top: 0;
36
- right: 0;
37
- cursor: ne-resize;
38
- -webkit-transform: rotate(270deg);
39
- transform: rotate(270deg);
40
- }
41
- ._2LU8g,
42
- ._12Q3f {
43
- top: 50%;
44
- margin-top: -10px;
45
- cursor: ew-resize;
46
- }
47
- ._2LU8g {
48
- left: 0;
49
- -webkit-transform: rotate(135deg);
50
- transform: rotate(135deg);
51
- }
52
- ._12Q3f {
53
- right: 0;
54
- -webkit-transform: rotate(315deg);
55
- transform: rotate(315deg);
56
- }
57
- ._vogN6,
58
- ._25fW6 {
59
- left: 50%;
60
- margin-left: -10px;
61
- cursor: ns-resize;
62
- }
63
- ._vogN6 {
64
- top: 0;
65
- -webkit-transform: rotate(225deg);
66
- transform: rotate(225deg);
67
- }
68
- ._25fW6 {
69
- bottom: 0;
70
- -webkit-transform: rotate(45deg);
71
- transform: rotate(45deg);
72
- }
73
1
  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&family=Roboto+Flex:opsz@8..144&display=swap");
74
2
  * {
75
3
  font-size: 15px;
76
4
  }
77
5
 
78
- ._3uhvX {
6
+ ._dashboard-designer__container__3uhvX {
79
7
  position: relative;
80
8
  display: flex;
81
9
  width: 100%;
82
10
  }
83
- ._3uhvX > div {
11
+ ._dashboard-designer__container__3uhvX > div {
84
12
  padding: 0 20px;
85
13
  }
86
14
 
87
- #_3d4HD, ._3d4HD {
15
+ #_dashboard-designer__chart__3d4HD, ._dashboard-designer__chart__3d4HD {
88
16
  height: 100%;
89
17
  }
90
18
 
91
- ._3RJ8q {
19
+ ._dashboard-designer__App__3RJ8q {
92
20
  margin: 0 50px;
93
21
  }
94
22
 
95
- ._2lGnl {
23
+ ._dashboard-designer__dashboard-header__2lGnl {
96
24
  display: flex;
97
25
  justify-content: space-between;
98
26
  }
99
- ._2lGnl > div {
27
+ ._dashboard-designer__dashboard-header__2lGnl > div {
100
28
  align-items: center;
101
29
  display: flex;
102
30
  }
103
- ._2lGnl > div > * {
31
+ ._dashboard-designer__dashboard-header__2lGnl > div > * {
104
32
  margin-right: 15px;
105
33
  }
106
- ._2lGnl ._18x0U, ._2lGnl i {
34
+ ._dashboard-designer__dashboard-header__2lGnl ._dashboard-designer__p-button-icon__18x0U, ._dashboard-designer__dashboard-header__2lGnl i {
107
35
  font-size: 28px !important;
108
36
  color: black;
109
37
  }
110
38
 
111
- ._3MA9L {
39
+ ._dashboard-designer__App-link__3MA9L {
112
40
  color: #61dafb;
113
41
  }
114
42
 
115
- @-webkit-keyframes _1JEML {
43
+ @-webkit-keyframes _dashboard-designer__App-logo-spin__1JEML {
116
44
  from {
117
45
  transform: rotate(0deg);
118
46
  }
@@ -121,7 +49,7 @@
121
49
  }
122
50
  }
123
51
 
124
- @keyframes _1JEML {
52
+ @keyframes _dashboard-designer__App-logo-spin__1JEML {
125
53
  from {
126
54
  transform: rotate(0deg);
127
55
  }
@@ -129,17 +57,17 @@
129
57
  transform: rotate(360deg);
130
58
  }
131
59
  }
132
- #_3uhvX {
60
+ #_dashboard-designer__container__3uhvX {
133
61
  height: 100%;
134
62
  width: 100%;
135
63
  position: absolute;
136
64
  }
137
65
 
138
- ._26Nxd {
66
+ ._dashboard-designer__react-grid-item__26Nxd {
139
67
  background-color: lightblue;
140
68
  }
141
69
 
142
- ._39fRL {
70
+ ._dashboard-designer__panel__39fRL {
143
71
  background: white !important;
144
72
  border-radius: 7px;
145
73
  box-shadow: 0px 0px 3px 1px rgba(98, 115, 132, 0.168627451);
@@ -148,38 +76,38 @@
148
76
  position: relative;
149
77
  height: 100%;
150
78
  }
151
- ._39fRL header {
79
+ ._dashboard-designer__panel__39fRL header {
152
80
  display: flex;
153
81
  justify-content: space-between;
154
82
  align-items: center;
155
83
  }
156
- ._39fRL header i {
84
+ ._dashboard-designer__panel__39fRL header i {
157
85
  font-size: 18px;
158
86
  cursor: pointer;
159
87
  }
160
- ._39fRL h1 {
88
+ ._dashboard-designer__panel__39fRL h1 {
161
89
  text-transform: capitalize;
162
90
  font-size: 15px;
163
91
  font-family: "Roboto Flex";
164
92
  color: #061436;
165
93
  }
166
94
 
167
- #_3uhvX {
95
+ #_dashboard-designer__container__3uhvX {
168
96
  width: 100%;
169
97
  height: 100%;
170
98
  position: absolute;
171
99
  }
172
100
 
173
- ._3IiJz {
101
+ ._dashboard-designer__grid-container__3IiJz {
174
102
  position: relative;
175
103
  }
176
- ._3IiJz ._Job3x {
104
+ ._dashboard-designer__grid-container__3IiJz ._dashboard-designer__react-grid-layout__Job3x {
177
105
  position: absolute;
178
106
  top: 0;
179
107
  width: 100%;
180
108
  }
181
109
 
182
- ._1SnLK {
110
+ ._dashboard-designer__grid__1SnLK {
183
111
  display: grid;
184
112
  grid-template-columns: repeat(12, 1fr);
185
113
  grid-column-gap: 10px;
@@ -189,34 +117,34 @@
189
117
  height: fit-content;
190
118
  padding: 10px;
191
119
  }
192
- ._1SnLK > div {
120
+ ._dashboard-designer__grid__1SnLK > div {
193
121
  box-sizing: border-box;
194
122
  border-radius: 7px;
195
123
  }
196
124
 
197
- ._NWJ3F > div {
125
+ ._dashboard-designer__grid--bordered__NWJ3F > div {
198
126
  border: 2px dotted #d0d0d0;
199
127
  }
200
128
 
201
- ._2hSmL > div {
129
+ ._dashboard-designer__grid--boxes__2hSmL > div {
202
130
  background: rgba(0, 0, 0, 0.031372549);
203
131
  }
204
132
 
205
- ._1GwiB {
133
+ ._dashboard-designer__dashboard-widget__1GwiB {
206
134
  height: calc(100% - 40px);
207
135
  box-sizing: border-box;
208
136
  }
209
137
 
210
- ._1gJPQ {
138
+ ._dashboard-designer__filter-label__1gJPQ {
211
139
  font-size: 12px;
212
140
  color: #717585;
213
141
  }
214
142
 
215
- ._3jTkc ._1pjVN {
143
+ ._dashboard-designer__buttons-overlay__3jTkc ._dashboard-designer__p-overlaypanel-content__1pjVN {
216
144
  padding: 0 !important;
217
145
  }
218
146
 
219
- ._1yXJg > div {
147
+ ._dashboard-designer__buttons-list__1yXJg > div {
220
148
  padding: 15px;
221
149
  width: 150px;
222
150
  cursor: pointer;
@@ -224,38 +152,110 @@
224
152
  -moz-user-select: none;
225
153
  user-select: none;
226
154
  }
227
- ._1yXJg > div:hover {
155
+ ._dashboard-designer__buttons-list__1yXJg > div:hover {
228
156
  background: #F5F6FB;
229
157
  }
230
158
 
231
- ._33DWa {
159
+ ._dashboard-designer__hidden__33DWa {
232
160
  display: none;
233
161
  }
234
- ._3LBx0 {
162
+ ._NewWidget__form-field__3LBx0 {
235
163
  display: flex;
236
164
  align-items: baseline;
237
165
  margin-bottom: 5px;
238
166
  }
239
- ._3LBx0 > label {
167
+ ._NewWidget__form-field__3LBx0 > label {
240
168
  margin-right: 15px;
241
169
  width: 100px;
242
170
  }
243
- ._3LBx0 ._1uVlk {
171
+ ._NewWidget__form-field__3LBx0 ._NewWidget__p-inputtext__1uVlk {
244
172
  width: 250px;
245
173
  }
246
174
 
247
- ._2Zju7 {
175
+ ._NewWidget__dialog-footer__2Zju7 {
248
176
  display: flex;
249
177
  justify-content: flex-end;
250
178
  }
251
- ._2Zju7 button {
179
+ ._NewWidget__dialog-footer__2Zju7 button {
252
180
  margin-left: 10px;
253
181
  }
254
182
 
255
- ._grais {
183
+ ._NewWidget__dialog-wrapper__grais {
256
184
  min-height: 400px;
257
185
  display: flex;
258
186
  flex-direction: column;
259
187
  justify-content: space-between;
260
188
  height: 100%;
189
+ }
190
+ ._styles__react-resizable__3s4OD {
191
+ position: relative;
192
+ }
193
+ ._styles__react-resizable-handle__3ACrv {
194
+ position: absolute;
195
+ width: 20px;
196
+ height: 20px;
197
+ background-repeat: no-repeat;
198
+ background-origin: content-box;
199
+ box-sizing: border-box;
200
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
201
+ background-position: bottom right;
202
+ padding: 0 3px 3px 0;
203
+ }
204
+ ._styles__react-resizable-handle-sw__3Dv4b {
205
+ bottom: 0;
206
+ left: 0;
207
+ cursor: sw-resize;
208
+ -webkit-transform: rotate(90deg);
209
+ transform: rotate(90deg);
210
+ }
211
+ ._styles__react-resizable-handle-se__1_pdx {
212
+ bottom: 0;
213
+ right: 0;
214
+ cursor: se-resize;
215
+ }
216
+ ._styles__react-resizable-handle-nw__3lqDp {
217
+ top: 0;
218
+ left: 0;
219
+ cursor: nw-resize;
220
+ -webkit-transform: rotate(180deg);
221
+ transform: rotate(180deg);
222
+ }
223
+ ._styles__react-resizable-handle-ne__1br-A {
224
+ top: 0;
225
+ right: 0;
226
+ cursor: ne-resize;
227
+ -webkit-transform: rotate(270deg);
228
+ transform: rotate(270deg);
229
+ }
230
+ ._styles__react-resizable-handle-w__2LU8g,
231
+ ._styles__react-resizable-handle-e__12Q3f {
232
+ top: 50%;
233
+ margin-top: -10px;
234
+ cursor: ew-resize;
235
+ }
236
+ ._styles__react-resizable-handle-w__2LU8g {
237
+ left: 0;
238
+ -webkit-transform: rotate(135deg);
239
+ transform: rotate(135deg);
240
+ }
241
+ ._styles__react-resizable-handle-e__12Q3f {
242
+ right: 0;
243
+ -webkit-transform: rotate(315deg);
244
+ transform: rotate(315deg);
245
+ }
246
+ ._styles__react-resizable-handle-n__vogN6,
247
+ ._styles__react-resizable-handle-s__25fW6 {
248
+ left: 50%;
249
+ margin-left: -10px;
250
+ cursor: ns-resize;
251
+ }
252
+ ._styles__react-resizable-handle-n__vogN6 {
253
+ top: 0;
254
+ -webkit-transform: rotate(225deg);
255
+ transform: rotate(225deg);
256
+ }
257
+ ._styles__react-resizable-handle-s__25fW6 {
258
+ bottom: 0;
259
+ -webkit-transform: rotate(45deg);
260
+ transform: rotate(45deg);
261
261
  }
package/dist/index.js CHANGED
@@ -2,7 +2,6 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
2
2
 
3
3
  var React = require('react');
4
4
  var React__default = _interopDefault(React);
5
- require('react-grid-layout/css/styles.css');
6
5
  var reactGridLayout = require('react-grid-layout');
7
6
  var button = require('primereact/button');
8
7
  var _ = _interopDefault(require('lodash'));