@cdc/dashboard 4.22.10 → 4.22.11
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/README.md +36 -36
- package/dist/cdcdashboard.js +6 -6
- package/examples/default-data.json +367 -367
- package/examples/default-filter-control.json +176 -174
- package/examples/default-multi-dataset.json +505 -497
- package/examples/default.json +161 -155
- package/examples/private/chart-issue.json +3462 -3466
- package/examples/private/no-issue.json +3462 -3466
- package/examples/private/totals-two.json +103 -103
- package/examples/private/totals.json +102 -102
- package/examples/temp-example-data.json +1 -1
- package/examples/test-example.json +163 -1
- package/package.json +7 -7
- package/src/CdcDashboard.js +200 -124
- package/src/CdcDashboard.jsx +271 -277
- package/src/ConfigContext.js +3 -3
- package/src/components/Column.jsx +10 -9
- package/src/components/DataTable.tsx +91 -111
- package/src/components/EditorPanel.js +184 -246
- package/src/components/Grid.jsx +8 -4
- package/src/components/Header.jsx +209 -118
- package/src/components/Row.js +30 -29
- package/src/components/Row.jsx +36 -52
- package/src/components/Widget.js +68 -61
- package/src/components/Widget.jsx +85 -62
- package/src/data/initial-state.js +3 -9
- package/src/index.html +24 -26
- package/src/index.js +12 -12
- package/src/scss/editor-panel.scss +494 -489
- package/src/scss/grid.scss +20 -19
- package/src/scss/main.scss +16 -15
- 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: #
|
|
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 #
|
|
42
|
+
border: 1px solid #c2c2c2;
|
|
43
43
|
transition: border 300ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
44
|
-
background-color: #
|
|
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,
|
|
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: #
|
|
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 #
|
|
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
|
|
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: #
|
|
15
|
+
border-bottom: #c7c7c7 1px solid;
|
|
16
16
|
padding: 0 1em;
|
|
17
17
|
display: flex;
|
|
18
18
|
height: 6em;
|
|
@@ -32,17 +32,17 @@
|
|
|
32
32
|
display: flex;
|
|
33
33
|
span {
|
|
34
34
|
font-weight: bold;
|
|
35
|
-
padding-right: .3em;
|
|
35
|
+
padding-right: 0.3em;
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.heading-body {
|
|
41
|
-
padding: .5em;
|
|
41
|
+
padding: 0.5em;
|
|
42
42
|
|
|
43
|
-
input[type=
|
|
43
|
+
input[type='checkbox'] {
|
|
44
44
|
margin-right: 2em;
|
|
45
|
-
margin-left: .5em;
|
|
45
|
+
margin-left: 0.5em;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.table-height-input {
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
position: relative;
|
|
59
59
|
bottom: -1px;
|
|
60
60
|
li {
|
|
61
|
-
padding: .3em 1.5em;
|
|
61
|
+
padding: 0.3em 1.5em;
|
|
62
62
|
color: $mediumGray;
|
|
63
|
-
border-bottom: #
|
|
63
|
+
border-bottom: #c7c7c7 1px solid;
|
|
64
64
|
cursor: pointer;
|
|
65
65
|
white-space: nowrap;
|
|
66
66
|
text-overflow: ellipsis;
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
border-radius: 1em;
|
|
87
87
|
border: 1px solid gray;
|
|
88
88
|
background-color: white;
|
|
89
|
-
padding: .5em;
|
|
89
|
+
padding: 0.5em;
|
|
90
90
|
margin-right: 1em;
|
|
91
91
|
}
|
|
92
92
|
}
|
|
@@ -111,11 +111,11 @@
|
|
|
111
111
|
background: #005eaa;
|
|
112
112
|
color: #fff;
|
|
113
113
|
border: 0;
|
|
114
|
-
padding: .4em .8em;
|
|
115
|
-
font-size: .9em;
|
|
114
|
+
padding: 0.4em 0.8em;
|
|
115
|
+
font-size: 0.9em;
|
|
116
116
|
display: block;
|
|
117
117
|
border-radius: 5px;
|
|
118
|
-
transition: .1s all;
|
|
118
|
+
transition: 0.1s all;
|
|
119
119
|
cursor: pointer;
|
|
120
120
|
|
|
121
121
|
&[disabled] {
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
|
|
140
140
|
div.dashboard-title {
|
|
141
141
|
color: white;
|
|
142
|
-
padding: .6em .8em;
|
|
142
|
+
padding: 0.6em 0.8em;
|
|
143
143
|
border-bottom-width: 3px;
|
|
144
144
|
border-bottom-style: solid;
|
|
145
145
|
margin: 0;
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
}
|
|
155
155
|
&:not(:empty) {
|
|
156
156
|
margin: 0 0 1rem 0 !important;
|
|
157
|
-
padding: .6em .8em;
|
|
157
|
+
padding: 0.6em 0.8em;
|
|
158
158
|
border-bottom-width: 3px;
|
|
159
159
|
border-bottom-style: solid;
|
|
160
160
|
}
|
|
@@ -172,7 +172,8 @@
|
|
|
172
172
|
.dashboard-col {
|
|
173
173
|
margin: 0;
|
|
174
174
|
// Disable the module individual margin
|
|
175
|
-
.map-container,
|
|
175
|
+
.map-container,
|
|
176
|
+
.cdc-chart-inner-container > * {
|
|
176
177
|
margin-left: 0;
|
|
177
178
|
margin-right: 0;
|
|
178
179
|
}
|
package/src/scss/variables.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
$editorWidth: 350px;
|
|
1
|
+
$editorWidth: 350px;
|