@cdc/map 2.6.3 → 9.22.9
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/dist/cdcmap.js +32 -18
- package/examples/bubble-us.json +363 -0
- package/examples/bubble-world.json +427 -0
- package/examples/default-county.json +64 -12
- package/examples/default-hex.json +477 -0
- package/examples/default-usa-regions.json +118 -0
- package/examples/default-usa.json +1 -1
- package/examples/default-world-data.json +1450 -0
- package/examples/default-world.json +5 -3
- package/examples/example-city-state.json +46 -1
- package/examples/gallery/categorical-qualitative.json +797 -0
- package/examples/gallery/categorical-scale-based.json +739 -0
- package/examples/gallery/city-state.json +479 -0
- package/examples/gallery/county.json +22731 -0
- package/examples/gallery/equal-interval.json +1027 -0
- package/examples/gallery/equal-number.json +1027 -0
- package/examples/gallery/filterable.json +909 -0
- package/examples/gallery/hex-filtered.json +420 -0
- package/examples/gallery/hex.json +413 -0
- package/examples/gallery/single-state.json +21402 -0
- package/examples/gallery/world.json +1592 -0
- package/examples/private/atsdr.json +439 -0
- package/examples/private/atsdr_new.json +436 -0
- package/examples/private/bubble.json +285 -0
- package/examples/private/city-state.json +428 -0
- package/examples/private/cty-issue.json +42768 -0
- package/examples/private/default-usa.json +460 -0
- package/examples/private/default-world-data.json +1444 -0
- package/examples/private/default.json +968 -0
- package/examples/private/legend-issue.json +1 -0
- package/examples/private/map-rounding-error.json +42759 -0
- package/examples/private/map.csv +60 -0
- package/examples/private/mdx.json +210 -0
- package/examples/private/monkeypox.json +376 -0
- package/examples/private/regions.json +52 -0
- package/examples/private/valid-data-map.csv +59 -0
- package/examples/private/wcmsrd-13881-data.json +2858 -0
- package/examples/private/wcmsrd-13881.json +5823 -0
- package/examples/private/wcmsrd-14492-data.json +292 -0
- package/examples/private/wcmsrd-14492.json +114 -0
- package/examples/private/wcmsrd-test.json +268 -0
- package/examples/private/world.json +1580 -0
- package/examples/private/worldmap.json +1490 -0
- package/package.json +51 -50
- package/src/CdcMap.js +496 -158
- package/src/components/BubbleList.js +244 -0
- package/src/components/CityList.js +41 -5
- package/src/components/CountyMap.js +16 -6
- package/src/components/DataTable.js +25 -18
- package/src/components/EditorPanel.js +915 -404
- package/src/components/Geo.js +1 -1
- package/src/components/Modal.js +2 -1
- package/src/components/NavigationMenu.js +4 -3
- package/src/components/Sidebar.js +14 -19
- package/src/components/SingleStateMap.js +11 -5
- package/src/components/UsaMap.js +103 -36
- package/src/components/UsaRegionMap.js +320 -0
- package/src/components/WorldMap.js +116 -34
- package/src/data/country-coordinates.js +250 -0
- package/src/data/{dfc-map.json → county-map.json} +0 -0
- package/src/data/initial-state.js +20 -2
- package/src/data/state-coordinates.js +55 -0
- package/src/data/supported-geos.js +96 -15
- package/src/data/us-regions-topo-2.json +360525 -0
- package/src/data/us-regions-topo.json +37894 -0
- package/src/hooks/useColorPalette.ts +96 -0
- package/src/index.html +7 -4
- package/src/scss/editor-panel.scss +78 -57
- package/src/scss/main.scss +1 -1
- package/src/scss/map.scss +112 -2
- package/src/scss/sidebar.scss +2 -1
- package/src/data/color-palettes.js +0 -200
- package/src/images/map-folded.svg +0 -1
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { useEffect, useReducer } from 'react';
|
|
2
|
+
|
|
3
|
+
// constants
|
|
4
|
+
const SEQUENTIAL = 'SEQUENTIAL';
|
|
5
|
+
const SEQUENTIAL_REVERSE = 'SEQUENTIAL_REVERSE';
|
|
6
|
+
export const GET_PALETTE = 'GET_PALETTE';
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
// types & interfaces
|
|
10
|
+
interface State {
|
|
11
|
+
readonly filteredPallets:string[]
|
|
12
|
+
readonly filteredQualitative:string[]
|
|
13
|
+
readonly isPaletteReversed:boolean;
|
|
14
|
+
paletteName:string|undefined
|
|
15
|
+
}
|
|
16
|
+
interface Action<Palettes> {
|
|
17
|
+
type:
|
|
18
|
+
| 'SEQUENTIAL'
|
|
19
|
+
| 'SEQUENTIAL_REVERSE'
|
|
20
|
+
| 'GET_PALETTE'
|
|
21
|
+
payload: Palettes;
|
|
22
|
+
paletteName?:string
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
// create initial state
|
|
26
|
+
const initialState:State = {
|
|
27
|
+
filteredPallets: [],
|
|
28
|
+
isPaletteReversed:false,
|
|
29
|
+
filteredQualitative: [],
|
|
30
|
+
paletteName:undefined
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// create reducer function to handle multiple states & manupilate with each state
|
|
34
|
+
function reducer<T> (state:State,action:Action<T>):State{ // <T> refers to generic type
|
|
35
|
+
const palletNamesArr:string[] = Object.keys(action.payload); // action.payload === colorPalettes object
|
|
36
|
+
let reverseRegex = new RegExp('reverse$'); // matches a string that ends in with "reverse".
|
|
37
|
+
let qualitativeRegex = new RegExp('^qualitative'); //matches any string that starts with "qualitative".
|
|
38
|
+
let paletteName:string ='';
|
|
39
|
+
switch(action.type){
|
|
40
|
+
case GET_PALETTE:
|
|
41
|
+
// this case runs first time when page loads and then every time when color.state changes.It is mounted insude of useEffect on Editors Panel
|
|
42
|
+
// action.palletName is a string type and equals to state.color which is inisde Editors Panel.
|
|
43
|
+
return {...state,paletteName:action.paletteName}
|
|
44
|
+
case SEQUENTIAL:
|
|
45
|
+
paletteName = String(state.paletteName).endsWith('reverse') ? String(state.paletteName).substring(0,state.paletteName.length-7):String(state.paletteName)
|
|
46
|
+
const qualitative :string[]= palletNamesArr.filter((name: string) => name.match(qualitativeRegex) && (!name.match(reverseRegex) && !name.includes('qualitative9')));
|
|
47
|
+
const sequential:string[] = palletNamesArr.filter((name: string) => !name.match(qualitativeRegex) && !name.match(reverseRegex));
|
|
48
|
+
|
|
49
|
+
return { ...state, filteredPallets: sequential,filteredQualitative:qualitative, paletteName:paletteName,isPaletteReversed:false};
|
|
50
|
+
|
|
51
|
+
case SEQUENTIAL_REVERSE:
|
|
52
|
+
paletteName= state.paletteName && String(state.paletteName).concat('reverse');
|
|
53
|
+
const qualitativeReverse:string[] = palletNamesArr.filter((name: string) => name.match(qualitativeRegex) && name.match(reverseRegex));
|
|
54
|
+
const sequentialReverse:string[] = palletNamesArr.filter((name: string) => !name.match(qualitativeRegex) && name.match(reverseRegex));
|
|
55
|
+
|
|
56
|
+
return { ...state, filteredQualitative:qualitativeReverse, filteredPallets: sequentialReverse ,paletteName:paletteName,isPaletteReversed:true};
|
|
57
|
+
default : return state;
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
interface Keyable {
|
|
62
|
+
color:string
|
|
63
|
+
general:{
|
|
64
|
+
palette:{
|
|
65
|
+
isReversed:boolean
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export function useColorPalette<T,Y extends Keyable>(colorPalettes:T,configState:Y){
|
|
71
|
+
const [state, dispatch] = useReducer(reducer, initialState);
|
|
72
|
+
const {paletteName,isPaletteReversed,filteredPallets,filteredQualitative} = state
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
dispatch({ type: SEQUENTIAL, payload: colorPalettes });
|
|
79
|
+
}, []);
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
useEffect(()=>{
|
|
83
|
+
if(configState.general.palette.isReversed){
|
|
84
|
+
dispatch({ type: "SEQUENTIAL_REVERSE", payload: colorPalettes });
|
|
85
|
+
}
|
|
86
|
+
return ()=> dispatch({ type: "SEQUENTIAL", payload: colorPalettes });
|
|
87
|
+
|
|
88
|
+
},[configState.general.palette.isReversed,dispatch,colorPalettes])
|
|
89
|
+
|
|
90
|
+
useEffect(()=>{
|
|
91
|
+
if(configState.color) dispatch({type:GET_PALETTE,payload:colorPalettes,paletteName:configState.color})
|
|
92
|
+
},[dispatch,configState.color])
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
return {paletteName,isPaletteReversed,filteredPallets,filteredQualitative,dispatch}
|
|
96
|
+
}
|
package/src/index.html
CHANGED
|
@@ -14,16 +14,19 @@
|
|
|
14
14
|
</head>
|
|
15
15
|
<body>
|
|
16
16
|
<!-- DEFAULT EXAMPLES -->
|
|
17
|
-
|
|
18
|
-
|
|
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-regions.json"></div> -->
|
|
19
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/bubble-us.json"></div/> -->
|
|
21
|
+
<!-- <div class="react-container react-container--maps" data-config="/examples/bubble-world.json"></div>-->
|
|
20
22
|
<!-- <div class="react-container react-container--maps" data-config="/examples/default-single-state.json"></div> -->
|
|
21
23
|
|
|
22
24
|
<!-- TP4 EXAMPLES -->
|
|
23
|
-
<div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div>
|
|
25
|
+
<!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
|
|
24
26
|
<!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
|
|
27
|
+
<!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
|
|
25
28
|
|
|
26
|
-
|
|
29
|
+
|
|
27
30
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
28
31
|
</body>
|
|
29
32
|
</html>
|
|
@@ -1,4 +1,21 @@
|
|
|
1
|
+
.post-type-cdc_visualization {
|
|
2
|
+
.cove {
|
|
3
|
+
// Temp Radio button fix
|
|
4
|
+
// Resets User Agent Style, forms.css is overwriting our styles here.
|
|
5
|
+
input[type="radio"] {
|
|
6
|
+
background-color: initial !important;
|
|
7
|
+
cursor: default !important;
|
|
8
|
+
appearance: auto !important;
|
|
9
|
+
box-sizing: border-box !important;
|
|
10
|
+
margin: 3px 3px 0px 5px !important;
|
|
11
|
+
padding: initial !important;
|
|
12
|
+
border: initial !important;
|
|
13
|
+
}
|
|
14
|
+
// End Temp Radio button fix
|
|
15
|
+
}
|
|
16
|
+
}
|
|
1
17
|
.cdc-open-viz-module {
|
|
18
|
+
|
|
2
19
|
.geo-buttons {
|
|
3
20
|
list-style: none;
|
|
4
21
|
display: flex;
|
|
@@ -13,7 +30,8 @@
|
|
|
13
30
|
fill: currentColor
|
|
14
31
|
}
|
|
15
32
|
}
|
|
16
|
-
|
|
33
|
+
button {
|
|
34
|
+
background: transparent;
|
|
17
35
|
padding: .3em .75em;
|
|
18
36
|
display: flex;
|
|
19
37
|
border: $lightGray 1px solid;
|
|
@@ -23,7 +41,7 @@
|
|
|
23
41
|
cursor: pointer;
|
|
24
42
|
overflow: hidden;
|
|
25
43
|
flex-direction: column;
|
|
26
|
-
transition: .2s all;
|
|
44
|
+
transition: .2s all;
|
|
27
45
|
svg {
|
|
28
46
|
display: block;
|
|
29
47
|
height: 25px;
|
|
@@ -36,7 +54,7 @@
|
|
|
36
54
|
}
|
|
37
55
|
&:hover {
|
|
38
56
|
background: #F2F2F2;
|
|
39
|
-
transition: .2s all;
|
|
57
|
+
transition: .2s all;
|
|
40
58
|
}
|
|
41
59
|
&.active {
|
|
42
60
|
background: #fff;
|
|
@@ -58,7 +76,7 @@
|
|
|
58
76
|
}
|
|
59
77
|
}
|
|
60
78
|
}
|
|
61
|
-
|
|
79
|
+
|
|
62
80
|
.editor-toggle {
|
|
63
81
|
background: #F2F2F2;
|
|
64
82
|
border-radius: 60px;
|
|
@@ -83,7 +101,7 @@
|
|
|
83
101
|
}
|
|
84
102
|
&.collapsed {
|
|
85
103
|
left: 1em;
|
|
86
|
-
margin-left: 0;
|
|
104
|
+
margin-left: 0;
|
|
87
105
|
&:before {
|
|
88
106
|
content: "\00bb";
|
|
89
107
|
}
|
|
@@ -92,7 +110,7 @@
|
|
|
92
110
|
background: rgba(255,255,255,1)
|
|
93
111
|
}
|
|
94
112
|
}
|
|
95
|
-
|
|
113
|
+
|
|
96
114
|
.editor-panel {
|
|
97
115
|
background: #fff;
|
|
98
116
|
width: $editorWidth;
|
|
@@ -104,6 +122,12 @@
|
|
|
104
122
|
left: 0;
|
|
105
123
|
top: 0;
|
|
106
124
|
bottom: 0;
|
|
125
|
+
|
|
126
|
+
//TODO: Remove after COVE refactor
|
|
127
|
+
&.cove {
|
|
128
|
+
@import "@cdc/core/styles/v2/layout/tooltip.scss";
|
|
129
|
+
}
|
|
130
|
+
|
|
107
131
|
.remove-column {
|
|
108
132
|
font-size: 13px;
|
|
109
133
|
}
|
|
@@ -171,7 +195,7 @@
|
|
|
171
195
|
position: relative;
|
|
172
196
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
|
173
197
|
}
|
|
174
|
-
|
|
198
|
+
|
|
175
199
|
.accordion__button:before {
|
|
176
200
|
display: inline-block;
|
|
177
201
|
content: '';
|
|
@@ -187,7 +211,7 @@
|
|
|
187
211
|
transform: rotate(-45deg) translateY(-50%);
|
|
188
212
|
transition: .1s all;
|
|
189
213
|
}
|
|
190
|
-
|
|
214
|
+
|
|
191
215
|
.accordion__button[aria-expanded='true']::before,
|
|
192
216
|
.accordion__button[aria-selected='true']::before {
|
|
193
217
|
top: 45%;
|
|
@@ -195,7 +219,7 @@
|
|
|
195
219
|
margin-right: 1.3em;
|
|
196
220
|
transition: .1s all;
|
|
197
221
|
}
|
|
198
|
-
|
|
222
|
+
|
|
199
223
|
.accordion__panel {
|
|
200
224
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
|
201
225
|
padding: 1em 1.25em 2em;
|
|
@@ -204,7 +228,7 @@
|
|
|
204
228
|
font-size: .8em;
|
|
205
229
|
}
|
|
206
230
|
}
|
|
207
|
-
|
|
231
|
+
|
|
208
232
|
.advanced {
|
|
209
233
|
padding: 0 1em 1em;
|
|
210
234
|
text-align: left;
|
|
@@ -216,7 +240,6 @@
|
|
|
216
240
|
display: block;
|
|
217
241
|
text-align: left;
|
|
218
242
|
cursor: pointer;
|
|
219
|
-
color: rgba(0,0,0,.5);
|
|
220
243
|
text-decoration: underline;
|
|
221
244
|
span {
|
|
222
245
|
text-decoration: none;
|
|
@@ -237,17 +260,17 @@
|
|
|
237
260
|
box-sizing: border-box
|
|
238
261
|
}
|
|
239
262
|
}
|
|
240
|
-
|
|
263
|
+
|
|
241
264
|
@keyframes fadein {
|
|
242
265
|
0% {
|
|
243
266
|
opacity: 0;
|
|
244
267
|
}
|
|
245
|
-
|
|
268
|
+
|
|
246
269
|
100% {
|
|
247
270
|
opacity: 1;
|
|
248
271
|
}
|
|
249
272
|
}
|
|
250
|
-
|
|
273
|
+
|
|
251
274
|
.base-label {
|
|
252
275
|
background: #565656;
|
|
253
276
|
color: #fff;
|
|
@@ -276,9 +299,7 @@
|
|
|
276
299
|
&.checkbox {
|
|
277
300
|
margin-top: .5rem;
|
|
278
301
|
display: flex;
|
|
279
|
-
|
|
280
|
-
display: inline;
|
|
281
|
-
}
|
|
302
|
+
|
|
282
303
|
input {
|
|
283
304
|
margin-left: 0;
|
|
284
305
|
width: inherit;
|
|
@@ -331,17 +352,17 @@
|
|
|
331
352
|
}
|
|
332
353
|
}
|
|
333
354
|
}
|
|
334
|
-
|
|
355
|
+
|
|
335
356
|
fieldset {
|
|
336
357
|
display: block;
|
|
337
358
|
}
|
|
338
|
-
|
|
359
|
+
|
|
339
360
|
.primary-fieldset {
|
|
340
361
|
padding: 0;
|
|
341
362
|
margin: 0;
|
|
342
363
|
border: 0;
|
|
343
364
|
}
|
|
344
|
-
|
|
365
|
+
|
|
345
366
|
ul.column-edit {
|
|
346
367
|
list-style: none;
|
|
347
368
|
li {
|
|
@@ -360,11 +381,11 @@
|
|
|
360
381
|
}
|
|
361
382
|
}
|
|
362
383
|
}
|
|
363
|
-
|
|
384
|
+
|
|
364
385
|
&.hidden {
|
|
365
386
|
display: none;
|
|
366
387
|
}
|
|
367
|
-
|
|
388
|
+
|
|
368
389
|
.emove-column {
|
|
369
390
|
float: right;
|
|
370
391
|
text-transform: uppercase;
|
|
@@ -380,7 +401,7 @@
|
|
|
380
401
|
cursor: pointer;
|
|
381
402
|
font-weight: bold;
|
|
382
403
|
}
|
|
383
|
-
|
|
404
|
+
|
|
384
405
|
.edit-block {
|
|
385
406
|
padding-left: 1em;
|
|
386
407
|
border-left: rgba(0, 0, 0, 0.2) 4px solid;
|
|
@@ -402,7 +423,7 @@
|
|
|
402
423
|
transition: .2s all;
|
|
403
424
|
}
|
|
404
425
|
}
|
|
405
|
-
|
|
426
|
+
|
|
406
427
|
.data-toggle {
|
|
407
428
|
list-style: none;
|
|
408
429
|
li {
|
|
@@ -471,14 +492,14 @@
|
|
|
471
492
|
}
|
|
472
493
|
}
|
|
473
494
|
}
|
|
474
|
-
|
|
495
|
+
|
|
475
496
|
span.subtext {
|
|
476
497
|
display: block;
|
|
477
498
|
color: rgba(0,0,0,.5);
|
|
478
499
|
text-transform: none;
|
|
479
500
|
font-weight: normal;
|
|
480
501
|
}
|
|
481
|
-
|
|
502
|
+
|
|
482
503
|
.btn {
|
|
483
504
|
margin-top: 1em;
|
|
484
505
|
}
|
|
@@ -486,7 +507,7 @@
|
|
|
486
507
|
list-style: none;
|
|
487
508
|
> li {
|
|
488
509
|
margin-right: .3em;
|
|
489
|
-
margin-bottom: .3em;
|
|
510
|
+
margin-bottom: .3em;
|
|
490
511
|
}
|
|
491
512
|
}
|
|
492
513
|
.sort-list li > div {
|
|
@@ -497,22 +518,22 @@
|
|
|
497
518
|
background: #F1F1F1;
|
|
498
519
|
padding: .4em .6em;
|
|
499
520
|
font-size: .8em;
|
|
500
|
-
margin-bottom: .3em;
|
|
521
|
+
margin-bottom: .3em;
|
|
501
522
|
cursor: move;
|
|
502
523
|
z-index: 999;
|
|
503
524
|
}
|
|
504
|
-
|
|
525
|
+
|
|
505
526
|
.info {
|
|
506
527
|
font-size: .8em;
|
|
507
528
|
line-height: 1.4em;
|
|
508
529
|
font-style: italic;
|
|
509
530
|
padding-top: 10px;
|
|
510
531
|
}
|
|
511
|
-
|
|
532
|
+
|
|
512
533
|
.react-tags__search {
|
|
513
534
|
width: 100%;
|
|
514
535
|
}
|
|
515
|
-
|
|
536
|
+
|
|
516
537
|
.react-tags {
|
|
517
538
|
position: relative;
|
|
518
539
|
input.react-tags__search-input {
|
|
@@ -524,15 +545,15 @@
|
|
|
524
545
|
display: inline
|
|
525
546
|
}
|
|
526
547
|
}
|
|
527
|
-
|
|
548
|
+
|
|
528
549
|
.react-tags.is-focused {
|
|
529
550
|
border-color: rgba(0, 0, 0, 0.7);
|
|
530
551
|
}
|
|
531
|
-
|
|
552
|
+
|
|
532
553
|
.react-tags__selected {
|
|
533
554
|
display: inline;
|
|
534
555
|
}
|
|
535
|
-
|
|
556
|
+
|
|
536
557
|
.react-tags__selected-tag {
|
|
537
558
|
display: inline-block;
|
|
538
559
|
box-sizing: border-box;
|
|
@@ -544,67 +565,67 @@
|
|
|
544
565
|
margin-right: .3em;
|
|
545
566
|
margin-bottom: .3em;
|
|
546
567
|
}
|
|
547
|
-
|
|
568
|
+
|
|
548
569
|
.react-tags__selected-tag:after {
|
|
549
570
|
content: '\2715';
|
|
550
571
|
color: #AAA;
|
|
551
572
|
margin-left: 8px;
|
|
552
573
|
}
|
|
553
|
-
|
|
574
|
+
|
|
554
575
|
.react-tags__selected-tag:hover,
|
|
555
576
|
.react-tags__selected-tag:focus {
|
|
556
577
|
border-color: #B1B1B1;
|
|
557
578
|
}
|
|
558
|
-
|
|
579
|
+
|
|
559
580
|
.react-tags__search {
|
|
560
581
|
display: inline-block;
|
|
561
|
-
|
|
582
|
+
|
|
562
583
|
/* prevent autoresize overflowing the container */
|
|
563
584
|
max-width: 100%;
|
|
564
585
|
}
|
|
565
|
-
|
|
586
|
+
|
|
566
587
|
@media screen and (min-width: 30em) {
|
|
567
|
-
|
|
588
|
+
|
|
568
589
|
.react-tags__search {
|
|
569
590
|
/* this will become the offsetParent for suggestions */
|
|
570
591
|
position: relative;
|
|
571
592
|
}
|
|
572
|
-
|
|
593
|
+
|
|
573
594
|
}
|
|
574
|
-
|
|
595
|
+
|
|
575
596
|
.react-tags__search input {
|
|
576
597
|
/* prevent autoresize overflowing the container */
|
|
577
598
|
max-width: 100%;
|
|
578
|
-
|
|
599
|
+
|
|
579
600
|
/* emove styles and layout from this element */
|
|
580
601
|
margin: 0;
|
|
581
602
|
outline: none;
|
|
582
603
|
padding: .5em .3em;
|
|
583
|
-
|
|
604
|
+
|
|
584
605
|
/* match the font styles */
|
|
585
606
|
font-size: inherit;
|
|
586
607
|
line-height: inherit;
|
|
587
608
|
}
|
|
588
|
-
|
|
609
|
+
|
|
589
610
|
.react-tags__search input::-ms-clear {
|
|
590
611
|
display: none;
|
|
591
612
|
}
|
|
592
|
-
|
|
613
|
+
|
|
593
614
|
.react-tags__suggestions {
|
|
594
615
|
position: absolute;
|
|
595
616
|
top: 100%;
|
|
596
617
|
left: 0;
|
|
597
618
|
width: 100%;
|
|
598
619
|
}
|
|
599
|
-
|
|
620
|
+
|
|
600
621
|
@media screen and (min-width: 30em) {
|
|
601
|
-
|
|
622
|
+
|
|
602
623
|
.react-tags__suggestions {
|
|
603
624
|
width: 240px;
|
|
604
625
|
}
|
|
605
|
-
|
|
626
|
+
|
|
606
627
|
}
|
|
607
|
-
|
|
628
|
+
|
|
608
629
|
.react-tags__suggestions ul {
|
|
609
630
|
margin: 4px -1px;
|
|
610
631
|
padding: 0;
|
|
@@ -614,32 +635,32 @@
|
|
|
614
635
|
border-radius: 2px;
|
|
615
636
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
616
637
|
}
|
|
617
|
-
|
|
638
|
+
|
|
618
639
|
.react-tags__suggestions li {
|
|
619
640
|
border-bottom: 1px solid #ddd;
|
|
620
641
|
padding: 6px 8px;
|
|
621
642
|
}
|
|
622
|
-
|
|
643
|
+
|
|
623
644
|
.react-tags__suggestions li mark {
|
|
624
645
|
text-decoration: underline;
|
|
625
646
|
background: none;
|
|
626
647
|
font-weight: 600;
|
|
627
648
|
}
|
|
628
|
-
|
|
649
|
+
|
|
629
650
|
.react-tags__suggestions li:hover {
|
|
630
651
|
cursor: pointer;
|
|
631
652
|
background: #eee;
|
|
632
653
|
}
|
|
633
|
-
|
|
654
|
+
|
|
634
655
|
.react-tags__suggestions li.is-active {
|
|
635
656
|
background: #b7cfe0;
|
|
636
657
|
}
|
|
637
|
-
|
|
658
|
+
|
|
638
659
|
.react-tags__suggestions li.is-disabled {
|
|
639
660
|
opacity: 0.5;
|
|
640
661
|
cursor: auto;
|
|
641
662
|
}
|
|
642
|
-
|
|
663
|
+
|
|
643
664
|
}
|
|
644
665
|
|
|
645
666
|
@include breakpointClass(md) {
|
|
@@ -651,4 +672,4 @@
|
|
|
651
672
|
padding-left: $editorWidth;
|
|
652
673
|
}
|
|
653
674
|
}
|
|
654
|
-
}
|
|
675
|
+
}
|
package/src/scss/main.scss
CHANGED
package/src/scss/map.scss
CHANGED
|
@@ -49,6 +49,12 @@ header + .map-container.full-border {
|
|
|
49
49
|
flex-direction: row;
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
|
+
// Bubble Specific
|
|
53
|
+
.map-container.bubble {
|
|
54
|
+
&.side {
|
|
55
|
+
flex-direction: row;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
52
58
|
}
|
|
53
59
|
|
|
54
60
|
.geography-container {
|
|
@@ -110,7 +116,23 @@ header + .map-container.full-border {
|
|
|
110
116
|
bottom: 2em;
|
|
111
117
|
left: 1em;
|
|
112
118
|
z-index: 4;
|
|
113
|
-
> button {
|
|
119
|
+
> button.reset {
|
|
120
|
+
margin-left: 5px;
|
|
121
|
+
background: rgba(0, 0, 0, 0.65);
|
|
122
|
+
transition: 0.2s all;
|
|
123
|
+
color: #fff;
|
|
124
|
+
&:hover {
|
|
125
|
+
background: rgba(0, 0, 0, 0.8);
|
|
126
|
+
transition: 0.2s all;
|
|
127
|
+
}
|
|
128
|
+
&:active {
|
|
129
|
+
transform: scale(0.9);
|
|
130
|
+
}
|
|
131
|
+
&:focus {
|
|
132
|
+
background: #005eaa;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
> button:not(.reset) {
|
|
114
136
|
display: flex;
|
|
115
137
|
align-items: center;
|
|
116
138
|
justify-content: center;
|
|
@@ -129,6 +151,13 @@ header + .map-container.full-border {
|
|
|
129
151
|
&:active {
|
|
130
152
|
transform: scale(0.9);
|
|
131
153
|
}
|
|
154
|
+
svg {
|
|
155
|
+
height: 1.75em;
|
|
156
|
+
width: 1.75em;
|
|
157
|
+
}
|
|
158
|
+
&:focus {
|
|
159
|
+
background: #005eaa;
|
|
160
|
+
}
|
|
132
161
|
}
|
|
133
162
|
> button:first-child {
|
|
134
163
|
margin-right: 0.25em;
|
|
@@ -136,10 +165,15 @@ header + .map-container.full-border {
|
|
|
136
165
|
}
|
|
137
166
|
|
|
138
167
|
@include breakpointClass(sm) {
|
|
139
|
-
.zoom-controls > button {
|
|
168
|
+
.zoom-controls > button:not(.reset) {
|
|
140
169
|
height: 2.5em;
|
|
141
170
|
width: 2.5em;
|
|
171
|
+
svg {
|
|
172
|
+
height: 2.5em;
|
|
173
|
+
width: 2.5em;
|
|
174
|
+
}
|
|
142
175
|
}
|
|
176
|
+
|
|
143
177
|
}
|
|
144
178
|
|
|
145
179
|
@include breakpointClass(md) {
|
|
@@ -186,3 +220,79 @@ header + .map-container.full-border {
|
|
|
186
220
|
top: 10px;
|
|
187
221
|
right: 10px;
|
|
188
222
|
}
|
|
223
|
+
|
|
224
|
+
//Region Maps
|
|
225
|
+
#region-1-label,
|
|
226
|
+
#region-2-label,
|
|
227
|
+
#region-3-label,
|
|
228
|
+
#region-4-label,
|
|
229
|
+
#region-5-label,
|
|
230
|
+
#region-6-label,
|
|
231
|
+
#region-7-label,
|
|
232
|
+
#region-8-label,
|
|
233
|
+
#region-9-label,
|
|
234
|
+
#region-10-label {
|
|
235
|
+
background: #fff;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
#region-1-label {
|
|
239
|
+
transform: translate(90%, 22%);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
#region-2-label {
|
|
243
|
+
//transform: translate(83%, 31%); SIDE CHART EXPERIMENT
|
|
244
|
+
transform: translate(83%, 33%);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
#region-3-label {
|
|
248
|
+
//transform: translate(78%, 48%); SIDE CHART EXPERIMENT
|
|
249
|
+
transform: translate(75%, 45%);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
#region-4-label {
|
|
253
|
+
transform: translate(68%, 70%);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
#region-5-label {
|
|
257
|
+
transform: translate(65%, 44%);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
#region-6-label {
|
|
261
|
+
transform: translate(45%, 75%);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
#region-7-label {
|
|
265
|
+
transform: translate(53%, 47%);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
#region-8-label {
|
|
269
|
+
transform: translate(35%, 30%);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
#region-9-label {
|
|
273
|
+
transform: translate(18%, 58%);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
#region-10-label {
|
|
277
|
+
transform: translate(15%, 28%);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
#region-2-territories,
|
|
281
|
+
#region-9-territories {
|
|
282
|
+
text {
|
|
283
|
+
font-weight: bold;
|
|
284
|
+
font-size: 14px;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
#region-2-territories {
|
|
289
|
+
transform: translate(86%, 40%);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
#region-9-territories {
|
|
293
|
+
transform: translate(4%, 72%);
|
|
294
|
+
|
|
295
|
+
.region-9-row2 {
|
|
296
|
+
transform: translateY(34px);
|
|
297
|
+
}
|
|
298
|
+
}
|
package/src/scss/sidebar.scss
CHANGED
|
@@ -68,6 +68,7 @@ aside {
|
|
|
68
68
|
padding: 0;
|
|
69
69
|
display: flex;
|
|
70
70
|
flex-wrap: wrap;
|
|
71
|
+
button { font-size: unset; background: transparent; }
|
|
71
72
|
li {
|
|
72
73
|
flex-shrink: 0;
|
|
73
74
|
display: inline-block;
|
|
@@ -76,7 +77,7 @@ aside {
|
|
|
76
77
|
vertical-align: middle;
|
|
77
78
|
transition: .1s opacity;
|
|
78
79
|
display: flex;
|
|
79
|
-
align-items: center;
|
|
80
|
+
// align-items: center;
|
|
80
81
|
&.single-legend {
|
|
81
82
|
cursor: pointer;
|
|
82
83
|
}
|