@cdc/map 4.25.1 → 4.25.3-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.
Files changed (13) hide show
  1. package/dist/cdcmap.js +19446 -19821
  2. package/examples/example-city-state.json +1 -1
  3. package/index.html +6 -6
  4. package/package.json +3 -3
  5. package/src/CdcMap.tsx +3 -5
  6. package/src/_stories/CdcMap.Filters.stories.tsx +19 -0
  7. package/src/_stories/_mock/wastewater-map.json +210 -206
  8. package/src/components/CityList.tsx +1 -7
  9. package/src/components/EditorPanel/components/EditorPanel.tsx +202 -263
  10. package/src/components/NavigationMenu.tsx +1 -1
  11. package/src/components/UsaMap/components/TerritoriesSection.tsx +18 -8
  12. package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx +15 -16
  13. package/src/components/UsaMap/components/UsaMap.State.tsx +1 -1
package/examples/example-city-state.json CHANGED
@@ -459,7 +459,7 @@
459
459
  "URL": "https://www.cdc.gov/"
460
460
  },
461
461
  {
462
- "STATE": "PW",
462
+ "STATE": "PW-2",
463
463
  "Rate": 12,
464
464
  "Location": "Home",
465
465
  "URL": "https://www.cdc.gov/"
package/index.html CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  <body>
20
20
  <!-- DEFAULT EXAMPLES -->
21
- <div class="react-container" data-config="/examples/private/ardi.json"></div>
21
+ <div class="react-container" data-config="/examples/private/nhis.json"></div>
22
22
  <!-- <div class="react-container" data-config="/examples/hex-colors.json"></div> -->
23
23
  <!-- <div class="react-container react-container--maps" data-config="/examples/annotation/index.json">/</div> -->
24
24
 
@@ -30,10 +30,10 @@
30
30
  <!-- <div class="react-container react-container--maps" data-config="/examples/test.json"></div> -->
31
31
  <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div> -->
32
32
  <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div> -->
33
- <div
33
+ <!-- <div
34
34
  class="react-container react-container--maps"
35
35
  data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/US-County-Level-Map.json"
36
- ></div>
36
+ ></div> -->
37
37
  <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-geocode.json"></div> -->
38
38
  <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-single-state.json"></div> -->
39
39
  <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-us.json"></div> -->
@@ -50,11 +50,11 @@
50
50
  <!-- <div class="react-container react-container--maps" data-config="/examples/hex-with-arrows.json"></div> -->
51
51
 
52
52
  <!-- TP4 EXAMPLES -->
53
- <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/example-city-state.json"></div>-->
54
- <div
53
+ <div class="react-container react-container&#45;&#45;maps" data-config="/examples/example-city-state.json"></div>
54
+ <!-- <div
55
55
  class="react-container react-container--maps"
56
56
  data-config="/examples/example-city-state-no-territories.json"
57
- ></div>
57
+ ></div> -->
58
58
  <!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
59
59
  <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
60
60
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/map",
3
- "version": "4.25.1",
3
+ "version": "4.25.3-6",
4
4
  "description": "React component for visualizing tabular data on a map of the United States or the world.",
5
5
  "moduleName": "CdcMap",
6
6
  "main": "dist/cdcmap",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "license": "Apache-2.0",
27
27
  "dependencies": {
28
- "@cdc/core": "^4.25.1",
28
+ "@cdc/core": "^4.25.3-6",
29
29
  "@emotion/core": "^10.0.28",
30
30
  "@emotion/react": "^11.1.5",
31
31
  "@googlemaps/markerclusterer": "^2.5.3",
@@ -57,5 +57,5 @@
57
57
  "react": "^18.2.0",
58
58
  "react-dom": "^18.2.0"
59
59
  },
60
- "gitHead": "c32d727f516fe3525178e3a6480abbe70b2a20d6"
60
+ "gitHead": "d83d8555c1500ff0cad9d2c5c3486324afa15ec6"
61
61
  }
package/src/CdcMap.tsx CHANGED
@@ -1282,11 +1282,11 @@ const CdcMap = ({
1282
1282
  }, []) // eslint-disable-line
1283
1283
 
1284
1284
  useEffect(() => {
1285
- if (state && !coveLoadedHasRan && container) {
1285
+ if (state && !runtimeData.init && !coveLoadedHasRan && container) {
1286
1286
  publish('cove_loaded', { config: state })
1287
1287
  setCoveLoadedHasRan(true)
1288
1288
  }
1289
- }, [state, container]) // eslint-disable-line
1289
+ }, [state, container, runtimeData.init]) // eslint-disable-line
1290
1290
 
1291
1291
  useEffect(() => {
1292
1292
  // When geotype changes - add UID
@@ -1596,9 +1596,7 @@ const CdcMap = ({
1596
1596
  data={runtimeData}
1597
1597
  options={general}
1598
1598
  columns={state.columns}
1599
- navigationHandler={val =>
1600
- navigationHandler(state.general.navigationBehavior, val, customNavigationHandler)
1601
- }
1599
+ navigationHandler={val => navigationHandler('_blank', val, customNavigationHandler)}
1602
1600
  />
1603
1601
  )}
1604
1602
 
package/src/_stories/CdcMap.Filters.stories.tsx ADDED
@@ -0,0 +1,19 @@
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+ import CdcMap from '../CdcMap'
3
+ import WastewaterMap from './_mock/wastewater-map.json'
4
+ import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
5
+
6
+ const meta: Meta<typeof CdcMap> = {
7
+ title: 'Components/Templates/Map/Filters',
8
+ component: CdcMap
9
+ }
10
+
11
+ type Story = StoryObj<typeof CdcMap>
12
+
13
+ export default meta
14
+
15
+ export const Tab_Simple: Story = {
16
+ args: {
17
+ config: editConfigKeys(WastewaterMap, [])
18
+ }
19
+ }
package/src/_stories/_mock/wastewater-map.json CHANGED
@@ -1,208 +1,212 @@
1
1
  {
2
- "annotations": [],
3
- "general": {
4
- "geoBorderColor": "darkGray",
5
- "headerColor": "theme-blue",
6
- "title": "",
7
- "showTitle": true,
8
- "showSidebar": true,
9
- "showDownloadButton": true,
10
- "showDownloadMediaButton": false,
11
- "displayAsHex": false,
12
- "displayStateLabels": false,
13
- "territoriesLabel": "Territories",
14
- "territoriesAlwaysShow": false,
15
- "language": "en",
16
- "geoType": "us",
17
- "geoLabelOverride": "State/Territory",
18
- "hasRegions": false,
19
- "fullBorder": false,
20
- "type": "map",
21
- "convertFipsCodes": true,
22
- "palette": { "isReversed": false },
23
- "allowMapZoom": true,
24
- "hideGeoColumnInTooltip": false,
25
- "hidePrimaryColumnInTooltip": false,
26
- "statePicked": { "fipsCode": "01", "stateName": "Alabama" },
27
- "expandDataTable": false,
28
- "annotationDropdownText": "Annotations",
29
- "noStateFoundMessage": "Map Unavailable",
30
- "subtext": "<div class=\"text-left\">Data last updated on <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_as_of\"></span> and presented through <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_Presented_Through\"></span>. "
31
- },
32
- "type": "map",
33
- "color": "greenbluereverse",
34
- "columns": {
35
- "geo": {
36
- "name": "State",
37
- "label": "Location",
38
- "tooltip": false,
39
- "dataTable": true
40
- },
41
- "primary": {
42
- "dataTable": true,
43
- "tooltip": true,
44
- "prefix": "",
45
- "suffix": "",
46
- "name": "activity_level_label",
47
- "label": "Viral Activity Level",
48
- "roundToPlace": 0
49
- },
50
- "navigate": { "name": "" },
51
- "latitude": { "name": "" },
52
- "longitude": { "name": "" },
53
- "additionalColumn1": {
54
- "label": "Sites Currently Reporting",
55
- "dataTable": true,
56
- "tooltips": false,
57
- "prefix": "",
58
- "suffix": "",
59
- "name": "num_sites",
60
- "tooltip": true
61
- },
62
- "additionalColumn2": {
63
- "label": "Limited Coverage",
64
- "dataTable": true,
65
- "tooltips": false,
66
- "prefix": "",
67
- "suffix": "",
68
- "tooltip": false,
69
- "name": "hatch"
70
- },
71
- "additionalColumn3": {
72
- "label": "",
73
- "dataTable": false,
74
- "tooltips": false,
75
- "prefix": "",
76
- "suffix": "",
77
- "tooltip": true,
78
- "useCommas": true,
79
- "name": "hatch"
80
- }
81
- },
82
- "legend": {
83
- "descriptions": {},
84
- "specialClasses": [],
85
- "unified": false,
86
- "singleColumn": false,
87
- "singleRow": true,
88
- "verticalSorted": false,
89
- "showSpecialClassesLast": true,
90
- "dynamicDescription": false,
91
- "type": "category",
92
- "numberOfItems": 8,
93
- "position": "bottom",
94
- "title": "Wastewater Viral Activity Level",
95
- "categoryValuesOrder": [
96
- "Very High",
97
- "High",
98
- "Moderate",
99
- "Low",
100
- "Minimal",
101
- "No Data"
102
- ],
103
- "additionalCategories": [
104
- "No Data",
105
- "Minimal",
106
- "Low",
107
- "Moderate",
108
- "High",
109
- "Very High"
110
- ],
111
- "description": "",
112
- "style": "gradient",
113
- "subStyle": "linear blocks",
114
- "tickRotation": "",
115
- "singleColumnLegend": false,
116
- "hideBorder": false
117
- },
118
- "filters": [
119
- {
120
- "order": "asc",
121
- "label": "Select a virus from the dropdown:",
122
- "columnName": "pathogen",
123
- "values": ["COVID-19", "Influenza A", "RSV"],
124
- "active": "COVID-19",
125
- "filterStyle": "dropdown"
126
- }
127
- ],
128
- "table": {
129
- "label": "Data Table",
130
- "expanded": false,
131
- "limitHeight": true,
132
- "height": "500",
133
- "caption": "",
134
- "showDownloadUrl": true,
135
- "showDataTableLink": true,
136
- "showFullGeoNameInCSV": false,
137
- "forceDisplay": true,
138
- "download": true,
139
- "indexLabel": "State/Territory",
140
- "wrapColumns": false
141
- },
142
- "tooltips": {
143
- "appearanceType": "hover",
144
- "linkLabel": "Learn More",
145
- "capitalizeLabels": true,
146
- "opacity": 90
147
- },
148
- "visual": {
149
- "minBubbleSize": 1,
150
- "maxBubbleSize": 20,
151
- "extraBubbleBorder": false,
152
- "cityStyle": "circle",
153
- "geoCodeCircleSize": 2,
154
- "showBubbleZeros": false,
155
- "cityStyleLabel": "",
156
- "additionalCityStyles": []
157
- },
158
- "mapPosition": { "coordinates": [0, 30], "zoom": 1 },
159
- "map": {
160
- "layers": [],
161
- "patterns": [
162
- {
163
- "dataKey": "hatch",
164
- "pattern": "lines",
165
- "dataValue": "Limited Coverage",
166
- "label": "Limited Coverage*",
167
- "size": "medium"
168
- }
169
- ]
170
- },
171
- "hexMap": {
172
- "type": "",
173
- "shapeGroups": [
174
- {
175
- "legendTitle": "",
176
- "legendDescription": "",
177
- "items": [
178
- {
179
- "key": "",
180
- "shape": "Arrow Up",
181
- "column": "",
182
- "operator": "=",
183
- "value": ""
184
- }
185
- ]
186
- }
187
- ]
188
- },
189
- "filterBehavior": "Filter Change",
190
- "customColors": [
191
- "#34547B",
192
- "#4B7F9B",
193
- "#4B7F9B",
194
- "#6BB0BD",
195
- "#9FDAD0",
196
- "#C8EFDA",
197
- "#B4B4B4",
198
- "#B4B4B4",
199
- "#B4B4B4",
200
- "#B4B4B4"
201
- ],
202
- "datasets": {},
203
- "dataFileName": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json",
204
- "dataFileSourceType": "url",
205
- "dataDescription": { "horizontal": false, "series": false },
206
- "version": "4.24.9",
207
- "dataUrl": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json"
2
+ "annotations": [],
3
+ "general": {
4
+ "geoBorderColor": "darkGray",
5
+ "headerColor": "theme-blue",
6
+ "title": "",
7
+ "showTitle": true,
8
+ "showSidebar": true,
9
+ "showDownloadButton": true,
10
+ "showDownloadMediaButton": false,
11
+ "displayAsHex": false,
12
+ "displayStateLabels": false,
13
+ "territoriesLabel": "Territories",
14
+ "territoriesAlwaysShow": false,
15
+ "language": "en",
16
+ "geoType": "us",
17
+ "geoLabelOverride": "State/Territory",
18
+ "hasRegions": false,
19
+ "fullBorder": false,
20
+ "type": "map",
21
+ "convertFipsCodes": true,
22
+ "palette": {
23
+ "isReversed": true
24
+ },
25
+ "allowMapZoom": true,
26
+ "hideGeoColumnInTooltip": false,
27
+ "hidePrimaryColumnInTooltip": false,
28
+ "statePicked": {
29
+ "fipsCode": "01",
30
+ "stateName": "Alabama"
31
+ },
32
+ "expandDataTable": false,
33
+ "annotationDropdownText": "Annotations",
34
+ "noStateFoundMessage": "Map Unavailable",
35
+ "subtext": "<div class=\"text-left\">Data last updated on <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_as_of\"></span> and presented through <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_Presented_Through\"></span>. "
36
+ },
37
+ "type": "map",
38
+ "color": "greenbluereverse",
39
+ "columns": {
40
+ "geo": {
41
+ "name": "State",
42
+ "label": "Location",
43
+ "tooltip": false,
44
+ "dataTable": true
45
+ },
46
+ "primary": {
47
+ "dataTable": true,
48
+ "tooltip": true,
49
+ "prefix": "",
50
+ "suffix": "",
51
+ "name": "activity_level_label",
52
+ "label": "Viral Activity Level",
53
+ "roundToPlace": 0
54
+ },
55
+ "navigate": {
56
+ "name": ""
57
+ },
58
+ "latitude": {
59
+ "name": ""
60
+ },
61
+ "longitude": {
62
+ "name": ""
63
+ },
64
+ "additionalColumn1": {
65
+ "label": "Sites Currently Reporting",
66
+ "dataTable": true,
67
+ "tooltips": false,
68
+ "prefix": "",
69
+ "suffix": "",
70
+ "name": "num_sites",
71
+ "tooltip": true
72
+ },
73
+ "additionalColumn2": {
74
+ "label": "Limited Coverage",
75
+ "dataTable": true,
76
+ "tooltips": false,
77
+ "prefix": "",
78
+ "suffix": "",
79
+ "tooltip": false,
80
+ "name": "hatch"
81
+ },
82
+ "additionalColumn3": {
83
+ "label": "",
84
+ "dataTable": false,
85
+ "tooltips": false,
86
+ "prefix": "",
87
+ "suffix": "",
88
+ "tooltip": true,
89
+ "useCommas": true,
90
+ "name": "hatch"
91
+ }
92
+ },
93
+ "legend": {
94
+ "descriptions": {},
95
+ "specialClasses": [],
96
+ "unified": false,
97
+ "singleColumn": false,
98
+ "singleRow": true,
99
+ "verticalSorted": false,
100
+ "showSpecialClassesLast": true,
101
+ "dynamicDescription": false,
102
+ "type": "category",
103
+ "numberOfItems": 8,
104
+ "position": "top",
105
+ "title": "Wastewater Viral Activity Level",
106
+ "categoryValuesOrder": ["Minimal", "Low", "Moderate", "High", "Very High", "No Data"],
107
+ "additionalCategories": ["No Data", "Minimal", "Low", "Moderate", "High", "Very High"],
108
+ "description": "",
109
+ "style": "gradient",
110
+ "subStyle": "linear blocks",
111
+ "tickRotation": "",
112
+ "singleColumnLegend": false,
113
+ "hideBorder": true
114
+ },
115
+ "filters": [
116
+ {
117
+ "order": "asc",
118
+ "label": "Select a virus from the tabs:",
119
+ "columnName": "pathogen",
120
+ "values": ["COVID-19", "Influenza A", "RSV"],
121
+ "active": "COVID-19",
122
+ "filterStyle": "tab-simple"
123
+ }
124
+ ],
125
+ "table": {
126
+ "label": "Data Table",
127
+ "expanded": false,
128
+ "limitHeight": true,
129
+ "height": "500",
130
+ "caption": "",
131
+ "showDownloadUrl": true,
132
+ "showDataTableLink": true,
133
+ "showFullGeoNameInCSV": false,
134
+ "forceDisplay": true,
135
+ "download": true,
136
+ "indexLabel": "State/Territory",
137
+ "wrapColumns": false,
138
+ "showDownloadLinkBelow": true
139
+ },
140
+ "tooltips": {
141
+ "appearanceType": "hover",
142
+ "linkLabel": "Learn More",
143
+ "capitalizeLabels": true,
144
+ "opacity": 90
145
+ },
146
+ "visual": {
147
+ "minBubbleSize": 1,
148
+ "maxBubbleSize": 20,
149
+ "extraBubbleBorder": false,
150
+ "cityStyle": "circle",
151
+ "geoCodeCircleSize": 2,
152
+ "showBubbleZeros": false,
153
+ "cityStyleLabel": "",
154
+ "additionalCityStyles": []
155
+ },
156
+ "mapPosition": {
157
+ "coordinates": [0, 30],
158
+ "zoom": 1
159
+ },
160
+ "map": {
161
+ "layers": [],
162
+ "patterns": [
163
+ {
164
+ "dataKey": "hatch",
165
+ "pattern": "lines",
166
+ "dataValue": "Limited Coverage",
167
+ "label": "Limited Coverage*",
168
+ "size": "medium"
169
+ }
170
+ ]
171
+ },
172
+ "hexMap": {
173
+ "type": "",
174
+ "shapeGroups": [
175
+ {
176
+ "legendTitle": "",
177
+ "legendDescription": "",
178
+ "items": [
179
+ {
180
+ "key": "",
181
+ "shape": "Arrow Up",
182
+ "column": "",
183
+ "operator": "=",
184
+ "value": ""
185
+ }
186
+ ]
187
+ }
188
+ ]
189
+ },
190
+ "filterBehavior": "Filter Change",
191
+ "customColors": [
192
+ "#C8EFDA",
193
+ "#9FDAD0",
194
+ "#9FDAD0",
195
+ "#6BB0BD",
196
+ "#4B7F9B",
197
+ "#34547B",
198
+ "#B4B4B4",
199
+ "#B4B4B4",
200
+ "#B4B4B4",
201
+ "#B4B4B4"
202
+ ],
203
+ "datasets": {},
204
+ "dataFileName": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json",
205
+ "dataFileSourceType": "url",
206
+ "dataDescription": {
207
+ "horizontal": false,
208
+ "series": false
209
+ },
210
+ "version": "4.24.10",
211
+ "dataUrl": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json"
208
212
  }
package/src/components/CityList.tsx CHANGED
@@ -149,13 +149,7 @@ const CityList = ({
149
149
 
150
150
  const styles = {
151
151
  fill: legendColors[0],
152
- opacity:
153
- setSharedFilterValue &&
154
- isFilterValueSupported &&
155
- data[city] &&
156
- data[city][state.columns.geo.name] !== setSharedFilterValue
157
- ? 0.5
158
- : 1,
152
+ opacity: !isFilterValueSupported || (isFilterValueSupported && city === setSharedFilterValue) ? 1 : 0.5,
159
153
  stroke:
160
154
  setSharedFilterValue &&
161
155
  isFilterValueSupported &&