@cdc/dashboard 4.22.10 → 4.23.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.
Files changed (34) hide show
  1. package/README.md +36 -36
  2. package/dist/495.js +3 -0
  3. package/dist/703.js +1 -0
  4. package/dist/cdcdashboard.js +2405 -134
  5. package/examples/default-data.json +367 -367
  6. package/examples/default-filter-control.json +205 -174
  7. package/examples/default-multi-dataset.json +505 -497
  8. package/examples/default.json +161 -155
  9. package/examples/private/chart-issue.json +3462 -3466
  10. package/examples/private/no-issue.json +3462 -3466
  11. package/examples/private/totals-two.json +103 -103
  12. package/examples/private/totals.json +102 -102
  13. package/examples/temp-example-data.json +1 -1
  14. package/examples/test-example.json +163 -1
  15. package/package.json +7 -7
  16. package/src/CdcDashboard.js +200 -124
  17. package/src/CdcDashboard.jsx +292 -279
  18. package/src/ConfigContext.js +3 -3
  19. package/src/components/Column.jsx +10 -9
  20. package/src/components/DataTable.tsx +97 -108
  21. package/src/components/EditorPanel.js +184 -246
  22. package/src/components/Grid.jsx +8 -4
  23. package/src/components/Header.jsx +244 -119
  24. package/src/components/Row.js +30 -29
  25. package/src/components/Row.jsx +36 -52
  26. package/src/components/Widget.js +68 -61
  27. package/src/components/Widget.jsx +85 -62
  28. package/src/data/initial-state.js +5 -10
  29. package/src/index.html +3 -3
  30. package/src/index.js +12 -12
  31. package/src/scss/editor-panel.scss +494 -489
  32. package/src/scss/grid.scss +20 -19
  33. package/src/scss/main.scss +66 -17
  34. package/src/scss/variables.scss +1 -1
package/src/scss/grid.scss CHANGED
@@ -9,7 +9,7 @@ $red: #f74242;
9
9
  background-color: #fff;
10
10
  padding: 1em;
11
11
  width: 350px;
12
- border-right: #C7C7C7 1px solid;
12
+ border-right: #c7c7c7 1px solid;
13
13
  position: fixed;
14
14
  top: 6em;
15
15
  bottom: 0;
@@ -23,7 +23,7 @@ $red: #f74242;
23
23
 
24
24
  .config-needed {
25
25
  color: $red;
26
- font-size: .75em;
26
+ font-size: 0.75em;
27
27
  }
28
28
 
29
29
  .builder-grid {
@@ -39,9 +39,9 @@ $red: #f74242;
39
39
  position: relative;
40
40
  top: 0;
41
41
  padding: 1em;
42
- border: 1px solid #C2C2C2;
42
+ border: 1px solid #c2c2c2;
43
43
  transition: border 300ms cubic-bezier(0.16, 1, 0.3, 1);
44
- background-color: #F2F2F2;
44
+ background-color: #f2f2f2;
45
45
  user-select: none;
46
46
 
47
47
  &.can-drop {
@@ -59,7 +59,7 @@ $red: #f74242;
59
59
  bottom: -1px;
60
60
 
61
61
  > li:not(.spacer) + li:not(.spacer) {
62
- margin-left: .3em;
62
+ margin-left: 0.3em;
63
63
  }
64
64
 
65
65
  .spacer {
@@ -78,7 +78,7 @@ $red: #f74242;
78
78
  }
79
79
 
80
80
  .row-menu__btn:hover .row-menu__flyout {
81
- transition: width .2s cubic-bezier(0.16, 1, 0.3, 1);
81
+ transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
82
82
  width: 144px;
83
83
 
84
84
  li {
@@ -86,7 +86,7 @@ $red: #f74242;
86
86
  }
87
87
 
88
88
  li + li {
89
- margin-left: .3em;
89
+ margin-left: 0.3em;
90
90
  }
91
91
  }
92
92
 
@@ -95,7 +95,7 @@ $red: #f74242;
95
95
  display: flex;
96
96
  justify-content: flex-start;
97
97
  overflow: hidden;
98
- transition: width .2s cubic-bezier(0.16, 1, 0.3, 1);
98
+ transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
99
99
  z-index: 1;
100
100
  width: 25px;
101
101
 
@@ -104,10 +104,11 @@ $red: #f74242;
104
104
  }
105
105
 
106
106
  li svg {
107
- opacity: .7;
107
+ opacity: 0.7;
108
108
  }
109
109
 
110
- li:hover svg, li.current svg {
110
+ li:hover svg,
111
+ li.current svg {
111
112
  opacity: 1;
112
113
  }
113
114
 
@@ -117,23 +118,23 @@ $red: #f74242;
117
118
  }
118
119
 
119
120
  .row-menu__btn {
120
- background-color: #C2C2C2;
121
- border-radius: .2em .2em 0 0;
121
+ background-color: #c2c2c2;
122
+ border-radius: 0.2em 0.2em 0 0;
122
123
  outline: none;
123
124
  transition: background-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
124
125
  cursor: pointer;
125
- padding: .2em .3em;
126
+ padding: 0.2em 0.3em;
126
127
  display: flex;
127
128
  fill: #fff;
128
129
 
129
130
  + .row-menu__btn {
130
- margin-left: .2em;
131
+ margin-left: 0.2em;
131
132
  }
132
133
  }
133
134
 
134
135
  .row-menu__btn-disabled {
135
136
  pointer-events: none;
136
- opacity: .3;
137
+ opacity: 0.3;
137
138
  }
138
139
 
139
140
  .row-menu__btn--edit {
@@ -150,7 +151,7 @@ $red: #f74242;
150
151
  margin-left: 0.5rem;
151
152
  margin-right: 0.5rem;
152
153
  background-color: transparent;
153
- border: 2px dashed #C2C2C2;
154
+ border: 2px dashed #c2c2c2;
154
155
  flex: 1 1 auto;
155
156
 
156
157
  &:hover {
@@ -235,8 +236,8 @@ $red: #f74242;
235
236
 
236
237
  .drag-icon {
237
238
  position: absolute;
238
- top: .3em;
239
- left: .3em;
239
+ top: 0.3em;
240
+ left: 0.3em;
240
241
  width: 10px;
241
242
  }
242
243
  }
@@ -273,7 +274,7 @@ $red: #f74242;
273
274
  justify-content: center;
274
275
 
275
276
  svg {
276
- margin-bottom: .5em;
277
+ margin-bottom: 0.5em;
277
278
  }
278
279
  }
279
280
 
package/src/scss/main.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @import '~@cdc/core/styles/base';
2
- @import "~@cdc/core/styles/heading-colors";
2
+ @import '~@cdc/core/styles/heading-colors';
3
3
  @import 'mixins';
4
4
  @import 'variables';
5
5
 
@@ -12,7 +12,7 @@
12
12
 
13
13
  .editor-heading {
14
14
  background-color: #ddd;
15
- border-bottom: #C7C7C7 1px solid;
15
+ border-bottom: #c7c7c7 1px solid;
16
16
  padding: 0 1em;
17
17
  display: flex;
18
18
  height: 6em;
@@ -24,6 +24,7 @@
24
24
  height: 3em;
25
25
  }
26
26
  .heading-1 {
27
+ min-width: 335px;
27
28
  font-size: 1.2em;
28
29
  padding-right: 1em;
29
30
  margin: 0.5em 1em 0.5em 0;
@@ -32,17 +33,44 @@
32
33
  display: flex;
33
34
  span {
34
35
  font-weight: bold;
35
- padding-right: .3em;
36
+ padding-right: 0.3em;
36
37
  }
37
38
  }
39
+ input[type='text'] {
40
+ width: 100%;
41
+ margin-top: 10px;
42
+ }
43
+ }
44
+
45
+ .heading-body {
46
+ display: flex;
47
+
48
+ .wrap {
49
+ display: inline-flex;
50
+ flex-wrap: wrap;
51
+ width: 20%;
52
+
53
+ .table-height-input {
54
+ width: 100%;
55
+ height: 25px;
56
+ }
57
+
58
+ label {
59
+ display: block;
60
+ width: 100%;
61
+ }
62
+ }
63
+ }
64
+
65
+ .heading-2 {
38
66
  }
39
67
 
40
68
  .heading-body {
41
- padding: .5em;
69
+ padding: 0.5em;
42
70
 
43
- input[type="checkbox"] {
44
- margin-right: 2em;
45
- margin-left: .5em;
71
+ input[type='checkbox'] {
72
+ margin-right: 5px;
73
+ margin-left: 0.5em;
46
74
  }
47
75
 
48
76
  .table-height-input {
@@ -57,17 +85,18 @@
57
85
  align-self: stretch;
58
86
  position: relative;
59
87
  bottom: -1px;
88
+ border-bottom: #c7c7c7 1px solid;
60
89
  li {
61
- padding: .3em 1.5em;
90
+ padding: 0.3em 1.5em;
62
91
  color: $mediumGray;
63
- border-bottom: #C7C7C7 1px solid;
64
92
  cursor: pointer;
65
93
  white-space: nowrap;
66
94
  text-overflow: ellipsis;
67
95
  overflow: hidden;
68
96
  &.active {
69
- border-bottom-width: 5px;
70
97
  border-bottom-color: $mediumGray;
98
+ border-bottom-style: inherit;
99
+ border-bottom-width: 5px;
71
100
  color: $darkGray;
72
101
  }
73
102
  &:hover {
@@ -75,6 +104,10 @@
75
104
  color: $darkGray;
76
105
  }
77
106
  }
107
+
108
+ &__wrapper {
109
+ width: 100%;
110
+ }
78
111
  }
79
112
 
80
113
  .description-input {
@@ -86,7 +119,7 @@
86
119
  border-radius: 1em;
87
120
  border: 1px solid gray;
88
121
  background-color: white;
89
- padding: .5em;
122
+ padding: 0.5em;
90
123
  margin-right: 1em;
91
124
  }
92
125
  }
@@ -111,11 +144,11 @@
111
144
  background: #005eaa;
112
145
  color: #fff;
113
146
  border: 0;
114
- padding: .4em .8em;
115
- font-size: .9em;
147
+ padding: 0.4em 0.8em;
148
+ font-size: 0.9em;
116
149
  display: block;
117
150
  border-radius: 5px;
118
- transition: .1s all;
151
+ transition: 0.1s all;
119
152
  cursor: pointer;
120
153
 
121
154
  &[disabled] {
@@ -137,9 +170,20 @@
137
170
  }
138
171
  }
139
172
 
173
+ .multi-table-container {
174
+ margin: 15px 0 0;
175
+ }
176
+
177
+ .data-table-container {
178
+ margin: 0;
179
+ @include breakpointClass(md) {
180
+ margin: 15px 0;
181
+ }
182
+ }
183
+
140
184
  div.dashboard-title {
141
185
  color: white;
142
- padding: .6em .8em;
186
+ padding: 0.6em 0.8em;
143
187
  border-bottom-width: 3px;
144
188
  border-bottom-style: solid;
145
189
  margin: 0;
@@ -154,12 +198,16 @@
154
198
  }
155
199
  &:not(:empty) {
156
200
  margin: 0 0 1rem 0 !important;
157
- padding: .6em .8em;
201
+ padding: 0.6em 0.8em;
158
202
  border-bottom-width: 3px;
159
203
  border-bottom-style: solid;
160
204
  }
161
205
  }
162
206
 
207
+ .dashboard-download-link {
208
+ font-size: 14px;
209
+ }
210
+
163
211
  .dashboard-description {
164
212
  margin-bottom: 20px;
165
213
  }
@@ -172,7 +220,8 @@
172
220
  .dashboard-col {
173
221
  margin: 0;
174
222
  // Disable the module individual margin
175
- .map-container, .cdc-chart-inner-container > * {
223
+ .map-container,
224
+ .cdc-chart-inner-container > * {
176
225
  margin-left: 0;
177
226
  margin-right: 0;
178
227
  }
package/src/scss/variables.scss CHANGED
@@ -1 +1 @@
1
- $editorWidth: 350px;
1
+ $editorWidth: 350px;