@cdc/map 4.25.3 → 4.25.6
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/.idea/map.iml +12 -0
- package/.idea/modules.xml +8 -0
- package/.idea/vcs.xml +6 -0
- package/dist/cdcmap.js +31254 -32242
- package/examples/hex-colors.json +3 -3
- package/examples/m2.json +32904 -0
- package/examples/private/test.json +470 -1457
- package/examples/private/{mmr.json → wastewatermap.json} +86 -115
- package/index.html +36 -63
- package/package.json +7 -19
- package/src/CdcMap.tsx +56 -1552
- package/src/CdcMapComponent.tsx +608 -0
- package/src/_stories/CdcMap.Legend.Gradient.stories.tsx +10 -0
- package/src/_stories/CdcMap.Legend.stories.tsx +67 -0
- package/src/_stories/CdcMap.Table.stories.tsx +19 -0
- package/src/_stories/CdcMap.stories.tsx +12 -1
- package/src/_stories/UsaMap.NoData.stories.tsx +4 -4
- package/src/_stories/_mock/default-patterns.json +8 -5
- package/src/_stories/_mock/legend-bins.json +428 -0
- package/{examples/private/default-patterns.json → src/_stories/_mock/legends/legend-tests.json} +36 -131
- package/src/cdcMapComponent.styles.css +9 -0
- package/src/components/Annotation/Annotation.Draggable.tsx +27 -26
- package/src/components/Annotation/AnnotationDropdown.tsx +5 -6
- package/src/components/BubbleList.tsx +135 -49
- package/src/components/CityList.tsx +89 -87
- package/src/components/DataTable.tsx +8 -8
- package/src/components/EditorPanel/components/EditorPanel.tsx +823 -885
- package/src/components/EditorPanel/components/Error.tsx +9 -2
- package/src/components/EditorPanel/components/HexShapeSettings.tsx +127 -141
- package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +55 -86
- package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +89 -75
- package/src/components/EditorPanel/components/editorPanel.styles.css +95 -0
- package/src/components/Geo.tsx +9 -1
- package/src/components/GoogleMap/components/GoogleMap.tsx +1 -1
- package/src/components/Legend/components/Legend.tsx +92 -87
- package/src/components/Legend/components/LegendGroup/Legend.Group.tsx +128 -0
- package/src/components/Legend/components/LegendGroup/legend.group.css +27 -0
- package/src/components/Legend/components/LegendItem.Hex.tsx +4 -1
- package/src/components/Legend/components/index.scss +74 -17
- package/src/components/Modal.tsx +17 -7
- package/src/components/NavigationMenu.tsx +11 -9
- package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx +12 -8
- package/src/components/UsaMap/components/SingleState/SingleState.StateOutput.tsx +4 -4
- package/src/components/UsaMap/components/TerritoriesSection.tsx +33 -10
- package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx +12 -10
- package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx +12 -14
- package/src/components/UsaMap/components/Territory/TerritoryShape.ts +2 -1
- package/src/components/UsaMap/components/UsaMap.County.tsx +138 -96
- package/src/components/UsaMap/components/UsaMap.Region.styles.css +72 -0
- package/src/components/UsaMap/components/UsaMap.Region.tsx +56 -103
- package/src/components/UsaMap/components/UsaMap.SingleState.styles.css +10 -0
- package/src/components/UsaMap/components/UsaMap.SingleState.tsx +65 -74
- package/src/components/UsaMap/components/UsaMap.State.tsx +112 -91
- package/src/components/UsaMap/helpers/map.ts +1 -1
- package/src/components/UsaMap/helpers/shapes.ts +20 -7
- package/src/components/WorldMap/WorldMap.tsx +64 -118
- package/src/components/WorldMap/worldMap.styles.css +28 -0
- package/src/components/ZoomControls.tsx +15 -13
- package/src/components/zoomControls.styles.css +53 -0
- package/src/context.ts +17 -9
- package/src/data/initial-state.js +5 -2
- package/src/helpers/addUIDs.ts +150 -0
- package/src/helpers/applyColorToLegend.ts +39 -64
- package/src/helpers/applyLegendToRow.ts +51 -0
- package/src/helpers/colorDistributions.ts +12 -0
- package/src/helpers/constants.ts +44 -0
- package/src/helpers/displayGeoName.ts +9 -2
- package/src/helpers/formatLegendLocation.ts +3 -2
- package/src/helpers/generateColorsArray.ts +2 -1
- package/src/helpers/generateRuntimeData.ts +78 -0
- package/src/helpers/generateRuntimeFilters.ts +63 -0
- package/src/helpers/generateRuntimeLegend.ts +566 -0
- package/src/helpers/generateRuntimeLegendHash.ts +16 -15
- package/src/helpers/getColumnNames.ts +19 -0
- package/src/helpers/getMapContainerClasses.ts +23 -0
- package/src/helpers/getStatePicked.ts +8 -0
- package/src/helpers/handleMapTabbing.ts +31 -0
- package/src/helpers/hashObj.ts +1 -1
- package/src/helpers/index.ts +22 -0
- package/src/helpers/navigationHandler.ts +3 -3
- package/src/helpers/resetLegendToggles.ts +13 -0
- package/src/helpers/setBinNumbers.ts +5 -0
- package/src/helpers/sortSpecialClassesLast.ts +7 -0
- package/src/helpers/tests/getColumnNames.test.ts +52 -0
- package/src/helpers/titleCase.ts +1 -1
- package/src/helpers/toggleLegendActive.ts +25 -0
- package/src/hooks/useApplyTooltipsToGeo.tsx +51 -0
- package/src/hooks/useColumnsRequiredChecker.ts +51 -0
- package/src/hooks/useGeoClickHandler.ts +45 -0
- package/src/hooks/useLegendSeparators.ts +26 -0
- package/src/hooks/useMapLayers.tsx +34 -60
- package/src/hooks/useModal.ts +22 -0
- package/src/hooks/useResizeObserver.ts +4 -5
- package/src/hooks/useStateZoom.tsx +52 -75
- package/src/hooks/useTooltip.ts +2 -3
- package/src/index.jsx +3 -9
- package/src/scss/editor-panel.scss +3 -99
- package/src/scss/main.scss +1 -19
- package/src/scss/map.scss +15 -220
- package/src/store/map.actions.ts +46 -0
- package/src/store/map.reducer.ts +96 -0
- package/src/types/Annotations.ts +24 -0
- package/src/types/MapConfig.ts +23 -3
- package/src/types/MapContext.ts +36 -35
- package/src/types/Modal.ts +1 -0
- package/src/types/RuntimeData.ts +3 -0
- package/examples/private/DEV-9644.json +0 -184
- package/examples/private/DEV-9989.json +0 -229
- package/examples/private/ardi.json +0 -180
- package/examples/private/colors 2.json +0 -416
- package/examples/private/colors.json +0 -416
- package/examples/private/colors.json.zip +0 -0
- package/examples/private/customColors.json +0 -45348
- package/examples/test.json +0 -183
- package/src/helpers/closeModal.ts +0 -9
- package/src/scss/btn.scss +0 -69
- package/src/scss/filters.scss +0 -27
- package/src/scss/variables.scss +0 -1
- /package/src/hooks/{useActiveElement.js → useActiveElement.ts} +0 -0
package/examples/test.json
DELETED
|
@@ -1,183 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"general": {
|
|
3
|
-
"geoType": "us-county",
|
|
4
|
-
"type": "us-geocode",
|
|
5
|
-
"geoBorderColor": "darkGray",
|
|
6
|
-
"headerColor": "theme-blue",
|
|
7
|
-
"showTitle": true,
|
|
8
|
-
"showSidebar": true,
|
|
9
|
-
"showDownloadButton": true,
|
|
10
|
-
"showDownloadMediaButton": false,
|
|
11
|
-
"displayAsHex": false,
|
|
12
|
-
"displayStateLabels": false,
|
|
13
|
-
"territoriesLabel": "Territories",
|
|
14
|
-
"language": "en",
|
|
15
|
-
"hasRegions": false,
|
|
16
|
-
"expandDataTable": false,
|
|
17
|
-
"fullBorder": false,
|
|
18
|
-
"palette": {
|
|
19
|
-
"isReversed": false
|
|
20
|
-
},
|
|
21
|
-
"allowMapZoom": true,
|
|
22
|
-
"hideGeoColumnInTooltip": false,
|
|
23
|
-
"hidePrimaryColumnInTooltip": false,
|
|
24
|
-
"subtext": "<p class=\"mb-3\"><strong>Note:</strong> Click on a detection category in the legend to remove sites with that detection category from the map.</p>\n\n<h2 class=\"h3\"><strong>About the Data</strong></h2>\n<p class=\"mb-2\"><strong>Detection categories:</strong><p/>\n\n<p class=\"mb-2\"><span class=\"color-indicator\" style=\"background-color: #d73027;border: 1px solid rgba(0, 0, 0, 0.3);\"> </span> Consistent detection: Mpox virus was detected in more than 80% of samples in the past 4 weeks AND the most recent detection was within the past 2 weeks.</p>\n\n<p class=\"mb-2\"><span class=\"color-indicator\" style=\"background-color: #ffcc00;border: 1px solid rgba(0, 0, 0, 0.3);\"> </span> Intermittent detection: Mpox virus was detected in 1% to 80% of samples in the past 4 weeks AND the most recent detection was within the past 2 weeks.</p>\n\n<p class=\"mb-2\"><span><span class=\"color-indicator\" style=\"background-color: #0e4183;border: 1px solid rgba(0, 0, 0, 0.3);\"> </span> No detection: Mpox virus was not detected in any samples from the site in the past 4 weeks OR the most recent detection was more than 2 weeks ago.</p>\n\n\n\n\n\n<p class=\"mb-2\"><span class=\"color-indicator\" style=\"background-color: #afafaf;border: 1px solid rgba(0, 0, 0, 0.3);\"> </span> No recent data: Too few samples were submitted (fewer than 3) in the past 4 weeks.</p>\n\n<p class=\"mt-3 mb-2\"><strong>Interpretation: </strong><p/>\n\n<p class=\"mb-2\">Laboratory tests used for mpox wastewater surveillance can tell us if the virus’s genetic material (viral DNA) is in untreated community wastewater. The tests cannot tell us if there is infectious virus in wastewater, only that the virus’s genetic material is present. We do not know if mpox virus remains infectious, or for how long, in untreated wastewater. No detection of mpox virus in wastewater means there is no evidence from wastewater data that mpox is spreading in the local community. However, very low infection levels may be below the detection limit for wastewater testing. Intermittent or consistent detection means there are likely ongoing mpox infections in the community.<p/>\n",
|
|
25
|
-
"geoLabelOverride": "Sewershed"
|
|
26
|
-
},
|
|
27
|
-
"type": "map",
|
|
28
|
-
"color": "pinkpurple",
|
|
29
|
-
"columns": {
|
|
30
|
-
"geo": {
|
|
31
|
-
"name": "sewershed",
|
|
32
|
-
"label": "Location",
|
|
33
|
-
"tooltip": false,
|
|
34
|
-
"dataTable": true
|
|
35
|
-
},
|
|
36
|
-
"primary": {
|
|
37
|
-
"dataTable": true,
|
|
38
|
-
"tooltip": true,
|
|
39
|
-
"prefix": "",
|
|
40
|
-
"suffix": "",
|
|
41
|
-
"name": "pcr_target_detect_cat",
|
|
42
|
-
"label": "Detection Classification"
|
|
43
|
-
},
|
|
44
|
-
"navigate": {
|
|
45
|
-
"name": ""
|
|
46
|
-
},
|
|
47
|
-
"latitude": {
|
|
48
|
-
"name": "latitude"
|
|
49
|
-
},
|
|
50
|
-
"longitude": {
|
|
51
|
-
"name": "longitude"
|
|
52
|
-
},
|
|
53
|
-
"additionalColumn1": {
|
|
54
|
-
"label": "Sampling Location",
|
|
55
|
-
"dataTable": false,
|
|
56
|
-
"tooltips": false,
|
|
57
|
-
"prefix": "",
|
|
58
|
-
"suffix": "",
|
|
59
|
-
"name": "location",
|
|
60
|
-
"tooltip": true
|
|
61
|
-
},
|
|
62
|
-
"additionalColumn2": {
|
|
63
|
-
"label": "Sewershed Jurisdiction",
|
|
64
|
-
"dataTable": false,
|
|
65
|
-
"tooltips": false,
|
|
66
|
-
"prefix": "",
|
|
67
|
-
"suffix": "",
|
|
68
|
-
"name": "jurisdiction",
|
|
69
|
-
"tooltip": true
|
|
70
|
-
},
|
|
71
|
-
"additionalColumn3": {
|
|
72
|
-
"label": "Counties",
|
|
73
|
-
"dataTable": false,
|
|
74
|
-
"tooltips": false,
|
|
75
|
-
"prefix": "",
|
|
76
|
-
"suffix": "",
|
|
77
|
-
"name": "counties",
|
|
78
|
-
"tooltip": true
|
|
79
|
-
},
|
|
80
|
-
"additionalColumn4": {
|
|
81
|
-
"label": "Population",
|
|
82
|
-
"dataTable": false,
|
|
83
|
-
"tooltips": false,
|
|
84
|
-
"prefix": "",
|
|
85
|
-
"suffix": "",
|
|
86
|
-
"name": "population_served",
|
|
87
|
-
"tooltip": true,
|
|
88
|
-
"useCommas": true
|
|
89
|
-
},
|
|
90
|
-
"additionalColumn5": {
|
|
91
|
-
"label": "Samples collected",
|
|
92
|
-
"dataTable": false,
|
|
93
|
-
"tooltips": false,
|
|
94
|
-
"prefix": "",
|
|
95
|
-
"suffix": "",
|
|
96
|
-
"name": "total_samples",
|
|
97
|
-
"tooltip": true
|
|
98
|
-
},
|
|
99
|
-
"additionalColumn6": {
|
|
100
|
-
"label": "Samples that were positive",
|
|
101
|
-
"dataTable": false,
|
|
102
|
-
"tooltips": false,
|
|
103
|
-
"prefix": "",
|
|
104
|
-
"suffix": "",
|
|
105
|
-
"name": "pos_samples",
|
|
106
|
-
"tooltip": true
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
"legend": {
|
|
110
|
-
"descriptions": {},
|
|
111
|
-
"specialClasses": [],
|
|
112
|
-
"unified": false,
|
|
113
|
-
"singleColumn": false,
|
|
114
|
-
"singleRow": false,
|
|
115
|
-
"dynamicDescription": false,
|
|
116
|
-
"type": "category",
|
|
117
|
-
"numberOfItems": 3,
|
|
118
|
-
"position": "bottom",
|
|
119
|
-
"title": "Legend",
|
|
120
|
-
"categoryValuesOrder": [
|
|
121
|
-
"Consistent detection",
|
|
122
|
-
"Intermittent detection",
|
|
123
|
-
"No detection",
|
|
124
|
-
"No recent data"
|
|
125
|
-
],
|
|
126
|
-
"additionalCategories": [
|
|
127
|
-
"Consistent detection",
|
|
128
|
-
"Intermittent detection",
|
|
129
|
-
"No detection",
|
|
130
|
-
"No recent data",
|
|
131
|
-
""
|
|
132
|
-
]
|
|
133
|
-
},
|
|
134
|
-
"filters": [],
|
|
135
|
-
"dataTable": {
|
|
136
|
-
"title": "Data Table",
|
|
137
|
-
"forceDisplay": true
|
|
138
|
-
},
|
|
139
|
-
"table": {
|
|
140
|
-
"showDownloadUrl": false
|
|
141
|
-
},
|
|
142
|
-
"tooltips": {
|
|
143
|
-
"appearanceType": "hover",
|
|
144
|
-
"linkLabel": "Learn More",
|
|
145
|
-
"capitalizeLabels": true
|
|
146
|
-
},
|
|
147
|
-
"runtime": {
|
|
148
|
-
"editorErrorMessage": []
|
|
149
|
-
},
|
|
150
|
-
"visual": {
|
|
151
|
-
"minBubbleSize": 1,
|
|
152
|
-
"maxBubbleSize": 20,
|
|
153
|
-
"extraBubbleBorder": false,
|
|
154
|
-
"cityStyle": "circle",
|
|
155
|
-
"geoCodeCircleSize": "2",
|
|
156
|
-
"showBubbleZeros": false
|
|
157
|
-
},
|
|
158
|
-
"mapPosition": {
|
|
159
|
-
"coordinates": [
|
|
160
|
-
0,
|
|
161
|
-
30
|
|
162
|
-
],
|
|
163
|
-
"zoom": 1
|
|
164
|
-
},
|
|
165
|
-
"datasets": {},
|
|
166
|
-
"customColors": [
|
|
167
|
-
"#d73027",
|
|
168
|
-
"#d73027",
|
|
169
|
-
"#ffcc00",
|
|
170
|
-
"#ffcc00",
|
|
171
|
-
"#0e4183",
|
|
172
|
-
"#0e4183",
|
|
173
|
-
"#Cccccc",
|
|
174
|
-
"#Cccccc"
|
|
175
|
-
],
|
|
176
|
-
"dataUrl": "https://www.cdc.gov/poxvirus/monkeypox/data/wastewater/exported_files/NWSS_Public_Monkeypox_Data.csv",
|
|
177
|
-
"dataFileName": "https://www.cdc.gov/poxvirus/monkeypox/data/wastewater/exported_files/NWSS_Public_Monkeypox_Data.csv",
|
|
178
|
-
"dataFileSourceType": "url",
|
|
179
|
-
"dataDescription": {
|
|
180
|
-
"horizontal": false,
|
|
181
|
-
"series": false
|
|
182
|
-
}
|
|
183
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export const closeModal = ({ target }, modal: string, setModal: Function) => {
|
|
2
|
-
if (
|
|
3
|
-
'string' === typeof target.className &&
|
|
4
|
-
(target.className.includes('modal-close') || target.className.includes('modal-background')) &&
|
|
5
|
-
null !== modal
|
|
6
|
-
) {
|
|
7
|
-
setModal(null)
|
|
8
|
-
}
|
|
9
|
-
}
|
package/src/scss/btn.scss
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
$btn-radius: 6px;
|
|
2
|
-
|
|
3
|
-
.cdc-open-viz-module .btn-group {
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
flex-flow: row;
|
|
6
|
-
justify-content: flex-start;
|
|
7
|
-
align-items: flex-start;
|
|
8
|
-
border-radius: 6px;
|
|
9
|
-
background-color: transparent;
|
|
10
|
-
|
|
11
|
-
.btn {
|
|
12
|
-
display: flex;
|
|
13
|
-
justify-content: center;
|
|
14
|
-
align-items: center;
|
|
15
|
-
position: relative;
|
|
16
|
-
padding: 8px 14px;
|
|
17
|
-
margin: 0;
|
|
18
|
-
color: inherit;
|
|
19
|
-
background-color: #fff;
|
|
20
|
-
border: 1px solid #dedede;
|
|
21
|
-
border-radius: $btn-radius;
|
|
22
|
-
user-select: none;
|
|
23
|
-
align-self: stretch;
|
|
24
|
-
flex: 1 0 auto;
|
|
25
|
-
|
|
26
|
-
&::before {
|
|
27
|
-
content: '';
|
|
28
|
-
display: block;
|
|
29
|
-
position: absolute;
|
|
30
|
-
top: 0;
|
|
31
|
-
left: 0;
|
|
32
|
-
width: 100%;
|
|
33
|
-
height: 100%;
|
|
34
|
-
background-color: transparent;
|
|
35
|
-
border-radius: $btn-radius;
|
|
36
|
-
box-shadow: none;
|
|
37
|
-
transition: box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
38
|
-
z-index: -1;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&:hover {
|
|
42
|
-
background-color: #fff;
|
|
43
|
-
|
|
44
|
-
&::before {
|
|
45
|
-
box-shadow: 0 5px 12px -8px rgba(0, 0, 0, .5);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&:first-of-type:not(:last-of-type) {
|
|
50
|
-
border-radius: $btn-radius 0 0 $btn-radius;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&:not(:first-of-type):not(:last-of-type) {
|
|
54
|
-
border-radius: 0;
|
|
55
|
-
border-left: 0;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
&:last-of-type:not(:first-of-type) {
|
|
59
|
-
border-radius: 0 $btn-radius $btn-radius 0;
|
|
60
|
-
border-left: 0;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.btn__icon {
|
|
65
|
-
display: inline;
|
|
66
|
-
width: 18px;
|
|
67
|
-
height: auto;
|
|
68
|
-
}
|
|
69
|
-
}
|
package/src/scss/filters.scss
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
.cdc-open-viz-module .cdc-map-inner-container .filters-section,
|
|
2
|
-
.cove .cdc-map-inner-container .filters-section {
|
|
3
|
-
&__title {
|
|
4
|
-
margin: 15px 0;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
&__wrapper {
|
|
8
|
-
hr {
|
|
9
|
-
margin-bottom: 20px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
label {
|
|
13
|
-
display: inherit;
|
|
14
|
-
margin-bottom: 5px;
|
|
15
|
-
font-size: 16px;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@include breakpoint(md) {
|
|
20
|
-
display: flex;
|
|
21
|
-
flex-wrap: wrap;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.single-filter {
|
|
25
|
-
margin-bottom: 0.5em;
|
|
26
|
-
}
|
|
27
|
-
}
|
package/src/scss/variables.scss
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
$editorWidth: 350px;
|
|
File without changes
|