@cdc/map 2.6.2 → 2.6.3

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 (37) hide show
  1. package/dist/cdcmap.js +27 -27
  2. package/examples/default-county.json +105 -0
  3. package/examples/default-single-state.json +109 -0
  4. package/examples/default-usa.json +744 -603
  5. package/examples/example-city-state.json +474 -0
  6. package/examples/example-world-map.json +1596 -0
  7. package/examples/gender-rate-map.json +1 -0
  8. package/package.json +50 -47
  9. package/src/CdcMap.js +422 -159
  10. package/src/components/CityList.js +3 -2
  11. package/src/components/CountyMap.js +556 -0
  12. package/src/components/DataTable.js +73 -19
  13. package/src/components/EditorPanel.js +2088 -1230
  14. package/src/components/Sidebar.js +5 -5
  15. package/src/components/SingleStateMap.js +326 -0
  16. package/src/components/UsaMap.js +20 -3
  17. package/src/data/abbreviations.js +57 -0
  18. package/src/data/color-palettes.js +10 -1
  19. package/src/data/county-map-halfquality.json +58453 -0
  20. package/src/data/county-map-quarterquality.json +1 -0
  21. package/src/data/county-topo.json +1 -0
  22. package/src/data/dfc-map.json +1 -0
  23. package/src/data/initial-state.js +2 -2
  24. package/src/data/newtest.json +1 -0
  25. package/src/data/state-abbreviations.js +60 -0
  26. package/src/data/supported-geos.js +3504 -151
  27. package/src/data/test.json +1 -0
  28. package/src/hooks/useActiveElement.js +19 -0
  29. package/src/index.html +27 -20
  30. package/src/index.js +8 -4
  31. package/src/scss/datatable.scss +2 -1
  32. package/src/scss/main.scss +10 -1
  33. package/src/scss/map.scss +153 -123
  34. package/src/scss/sidebar.scss +0 -1
  35. package/uploads/upload-example-city-state.json +392 -0
  36. package/uploads/upload-example-world-data.json +1490 -0
  37. package/LICENSE +0 -201
package/src/hooks/useActiveElement.js ADDED
@@ -0,0 +1,19 @@
1
+ import {useState, useEffect} from 'react'
2
+ // Use for accessibility testing
3
+ const useActiveElement = () => {
4
+ const [active, setActive] = useState(document.activeElement);
5
+
6
+ const handleFocusIn = (e) => {
7
+ setActive(document.activeElement);
8
+ }
9
+
10
+ useEffect(() => {
11
+ document.addEventListener('focusin', handleFocusIn)
12
+ return () => {
13
+ document.removeEventListener('focusin', handleFocusIn)
14
+ };
15
+ }, [])
16
+
17
+ return active;
18
+ }
19
+ export default useActiveElement;
package/src/index.html CHANGED
@@ -1,22 +1,29 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta
6
- name="viewport"
7
- content="width=device-width, initial-scale=1, shrink-to-fit=no"
8
- />
9
- <style type="text/css">
10
- body {
11
- margin: 0;
12
- }
13
- .cdc-map-outer-container {
14
- min-height: 100vh;
15
- }
16
- </style>
17
- </head>
18
- <body>
19
- <div class="react-container" data-config="/examples/default-usa.json"></div>
20
- <noscript>You need to enable JavaScript to run this app.</noscript>
21
- </body>
22
- </html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
+ <style type="text/css">
7
+ body {
8
+ margin: 0;
9
+ }
10
+ .cdc-map-outer-container {
11
+ min-height: 100vh;
12
+ }
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <!-- DEFAULT EXAMPLES -->
17
+ <!-- <div class="react-container react-container--maps" data-config="/examples/default-county.json"></div> -->
18
+ <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div> -->
19
+ <!-- <div class="react-container react-container--maps" data-config="/examples/default-world.json"></div> -->
20
+ <!-- <div class="react-container react-container--maps" data-config="/examples/default-single-state.json"></div> -->
21
+
22
+ <!-- TP4 EXAMPLES -->
23
+ <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div>
24
+ <!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
25
+
26
+
27
+ <noscript>You need to enable JavaScript to run this app.</noscript>
28
+ </body>
29
+ </html>
package/src/index.js CHANGED
@@ -9,8 +9,12 @@ let isEditor = window.location.href.includes('editor=true');
9
9
  const domContainer = document.querySelector('.react-container')
10
10
 
11
11
  ReactDOM.render(
12
- <StrictMode>
13
- <CdcMap isEditor={isEditor} configUrl={domContainer.attributes['data-config'].value} />
14
- </StrictMode>,
15
- domContainer
12
+ <StrictMode>
13
+ <CdcMap
14
+ isEditor={isEditor}
15
+ configUrl={domContainer.attributes['data-config'].value}
16
+ containerEl={domContainer}
17
+ />
18
+ </StrictMode>,
19
+ domContainer
16
20
  );
package/src/scss/datatable.scss CHANGED
@@ -3,4 +3,5 @@
3
3
  @include breakpointClass(md) {
4
4
  margin: 1em;
5
5
  }
6
- }
6
+
7
+ }
package/src/scss/main.scss CHANGED
@@ -170,6 +170,10 @@
170
170
  display: inline-block;
171
171
  height: 1em;
172
172
  width: 1em;
173
+ min-width: 1em;
174
+ min-height: 1em;
175
+ max-width: 1em;
176
+ max-height: 1em;
173
177
  border: rgba(0,0,0,.3) 1px solid;
174
178
  }
175
179
 
@@ -212,4 +216,9 @@
212
216
  cursor: pointer;
213
217
  }
214
218
  }
215
- }
219
+
220
+ [tabIndex]:focus {
221
+ outline-color: rgb(0, 95, 204)
222
+ }
223
+
224
+ }
package/src/scss/map.scss CHANGED
@@ -1,158 +1,188 @@
1
1
  // Map Download UI
2
2
  .map-downloads {
3
- position: relative;
4
- z-index: 3;
5
-
6
- .map-downloads__ui.btn-group {
7
- transform: scale(.8);
8
- }
9
-
10
- .map-downloads__ui {
11
- position: absolute;
12
- top: .5em;
13
- left: .5em;
14
- transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
15
- box-shadow: 0 5px 12px -8px rgba(0, 0, 0, .50);
16
- user-select: none;
17
- height: 42px;
18
- }
3
+ position: relative;
4
+ z-index: 3;
5
+
6
+ .map-downloads__ui.btn-group {
7
+ transform: scale(0.8);
8
+ }
9
+
10
+ .map-downloads__ui {
11
+ position: absolute;
12
+ top: 0.5em;
13
+ left: 0.5em;
14
+ transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
15
+ box-shadow: 0 5px 12px -8px rgba(0, 0, 0, 0.5);
16
+ user-select: none;
17
+ height: 42px;
18
+ }
19
19
  }
20
20
 
21
21
  .map-container {
22
- &.full-border {
23
- border: #C2C2C2 1px solid;
24
- }
22
+ &.full-border {
23
+ border: #c2c2c2 1px solid;
24
+ }
25
25
  }
26
26
 
27
27
  header + .map-container.full-border {
28
- border-top: 0; // When they have a header, don't add a border top
28
+ border-top: 0; // When they have a header, don't add a border top
29
29
  }
30
30
 
31
31
  // World Specific Styles
32
32
  .map-container.world {
33
- &.data .geography-container {
34
- border-bottom: $lightGray 1px solid;
35
- }
36
- .geography-container {
37
- cursor: move;
38
- }
33
+ &.data .geography-container {
34
+ border-bottom: $lightGray 1px solid;
35
+ }
36
+ .geography-container {
37
+ cursor: move;
38
+ }
39
39
  }
40
40
 
41
41
  @include breakpointClass(md) {
42
- // US Specific
43
- .map-container.us {
44
- margin: 0 1em;
45
- }
46
- // Data Specific
47
- .map-container.data {
48
- &.side {
49
- flex-direction: row;
50
- }
51
- }
42
+ // US Specific
43
+ .map-container.us {
44
+ margin: 0 1em;
45
+ }
46
+ // Data Specific
47
+ .map-container.data {
48
+ &.side {
49
+ flex-direction: row;
50
+ }
51
+ }
52
52
  }
53
53
 
54
54
  .geography-container {
55
- position: relative;
56
- flex-grow: 1;
57
- width: 100%;
58
- overflow: hidden;
59
- .geo-point {
60
- transition: .3s all;
61
- circle {
62
- fill: inherit;
63
- transition: .1s transform;
64
- }
65
- &:hover {
66
- transition: .2s all;
67
- }
68
- }
69
- .map-logo {
70
- position: absolute;
71
- bottom: 2em;
72
- right: 1em;
73
- z-index: 3;
74
- width: 75px;
75
- }
55
+ position: relative;
56
+ flex-grow: 1;
57
+ width: 100%;
58
+ overflow: hidden;
59
+ .geo-point {
60
+ transition: 0.3s all;
61
+ circle {
62
+ fill: inherit;
63
+ transition: 0.1s transform;
64
+ }
65
+ &:hover {
66
+ transition: 0.2s all;
67
+ }
68
+ }
69
+ .map-logo {
70
+ position: absolute;
71
+ bottom: 2em;
72
+ right: 1em;
73
+ z-index: 3;
74
+ width: 75px;
75
+ }
76
76
  }
77
77
 
78
78
  .single-geo {
79
- transition: .2s fill;
80
- &:focus {
81
- outline: 0;
82
- }
79
+ transition: 0.2s fill;
80
+ cursor: pointer;
81
+ &:focus {
82
+ outline: 0;
83
+ }
83
84
  }
84
85
 
85
86
  // Cities and Territories
86
87
  .territories {
87
- margin: 2em 100px 2em 0;
88
- font-size: 1.1em;
89
- display: flex;
90
- align-items: center;
91
- > span {
92
- margin-left: 1em;
93
- margin-right: .5em;
94
- }
95
- svg {
96
- max-width: 35px;
97
- margin-left: .5em;
98
- transition: .3s all;
99
- text {
100
- font-size: .95em;
101
- }
102
- }
88
+ margin: 2em 100px 2em 0;
89
+ font-size: 1.1em;
90
+ display: flex;
91
+ align-items: center;
92
+ > span {
93
+ margin-left: 1em;
94
+ margin-right: 0.5em;
95
+ }
96
+ svg {
97
+ max-width: 35px;
98
+ min-width: 25px;
99
+ margin-left: 0.5em;
100
+ transition: 0.3s all;
101
+ text {
102
+ font-size: 0.95em;
103
+ }
104
+ }
103
105
  }
104
106
 
105
107
  .zoom-controls {
106
- display: flex;
107
- position: absolute;
108
- bottom: 2em;
109
- left: 1em;
110
- z-index: 4;
111
- > button {
112
- display: flex;
113
- align-items: center;
114
- justify-content: center;
115
- padding: .2em;
116
- height: 1.75em;
117
- width: 1.75em;
118
- background: rgba(0,0,0,.65);
119
- transition: .2s all;
120
- color: #fff;
121
- border-radius: 100%;
122
- border: 0;
123
- &:hover {
124
- background: rgba(0,0,0,.8);
125
- transition: .2s all;
126
- }
127
- &:active {
128
- transform:scale(0.9);
129
- }
130
- }
131
- > button:first-child {
132
- margin-right: 0.25em;
133
- }
108
+ display: flex;
109
+ position: absolute;
110
+ bottom: 2em;
111
+ left: 1em;
112
+ z-index: 4;
113
+ > button {
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: center;
117
+ padding: 0.2em;
118
+ height: 1.75em;
119
+ width: 1.75em;
120
+ background: rgba(0, 0, 0, 0.65);
121
+ transition: 0.2s all;
122
+ color: #fff;
123
+ border-radius: 100%;
124
+ border: 0;
125
+ &:hover {
126
+ background: rgba(0, 0, 0, 0.8);
127
+ transition: 0.2s all;
128
+ }
129
+ &:active {
130
+ transform: scale(0.9);
131
+ }
132
+ }
133
+ > button:first-child {
134
+ margin-right: 0.25em;
135
+ }
134
136
  }
135
137
 
136
138
  @include breakpointClass(sm) {
137
- .zoom-controls > button {
138
- height: 2.5em;
139
- width: 2.5em;
140
- }
139
+ .zoom-controls > button {
140
+ height: 2.5em;
141
+ width: 2.5em;
142
+ }
141
143
  }
142
144
 
143
145
  @include breakpointClass(md) {
144
- .map-downloads .map-downloads__ui.btn-group {
145
- top: 1em;
146
- left: 1em;
147
- transform: none;
148
- }
149
- .territories {
150
- font-size: 1em;
151
- > span {
152
- margin-left: 0;
153
- }
154
- svg {
155
- max-width: 45px;
156
- }
157
- }
146
+ .map-downloads .map-downloads__ui.btn-group {
147
+ top: 1em;
148
+ left: 1em;
149
+ transform: none;
150
+ }
151
+ .territories {
152
+ font-size: 1em;
153
+ > span {
154
+ margin-left: 0;
155
+ }
156
+ svg {
157
+ max-width: 45px;
158
+ }
159
+ }
160
+ }
161
+
162
+ .countyMapGroup {
163
+ transition: transform 1s;
164
+ will-change: transform;
165
+ transform-origin: center;
166
+ stroke: none !important;
167
+ }
168
+
169
+ // .state {
170
+ // display: none;
171
+ // }
172
+
173
+ .state {
174
+ &--inactive:hover path {
175
+ cursor: pointer;
176
+ transition: fill 0.5s;
177
+ }
178
+ }
179
+
180
+ .county--path {
181
+ fill: white;
182
+ }
183
+
184
+ .btn--reset {
185
+ position: absolute;
186
+ top: 10px;
187
+ right: 10px;
158
188
  }
package/src/scss/sidebar.scss CHANGED
@@ -139,7 +139,6 @@ aside {
139
139
  }
140
140
  select {
141
141
  display: block;
142
- width: inherit;
143
142
  font-size: 1em;
144
143
  }
145
144
  }