@cdc/map 4.25.7-2 → 4.25.8
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/CLAUDE.local.md +0 -0
- package/dist/cdcmap.js +19761 -19662
- package/examples/private/filter-map.json +909 -0
- package/examples/private/rsv-data.json +532 -0
- package/examples/private/test.json +222 -640
- package/index.html +34 -35
- package/package.json +3 -3
- package/src/CdcMap.tsx +7 -2
- package/src/CdcMapComponent.tsx +26 -8
- package/src/_stories/CdcMap.stories.tsx +7 -0
- package/src/_stories/_mock/multi-state.json +21389 -0
- package/src/components/CityList.tsx +4 -4
- package/src/components/DataTable.tsx +8 -4
- package/src/components/EditorPanel/components/EditorPanel.tsx +24 -38
- package/src/components/Legend/components/Legend.tsx +56 -39
- package/src/components/Modal.tsx +2 -8
- package/src/components/NavigationMenu.tsx +4 -1
- package/src/components/UsaMap/components/SingleState/SingleState.StateOutput.tsx +21 -15
- package/src/components/UsaMap/components/TerritoriesSection.tsx +2 -2
- package/src/components/UsaMap/components/UsaMap.County.tsx +6 -1
- package/src/components/UsaMap/components/UsaMap.SingleState.tsx +36 -24
- package/src/components/UsaMap/helpers/map.ts +16 -8
- package/src/components/WorldMap/WorldMap.tsx +17 -0
- package/src/context.ts +1 -0
- package/src/data/initial-state.js +8 -6
- package/src/data/supported-geos.js +185 -2
- package/src/helpers/addUIDs.ts +8 -8
- package/src/helpers/displayGeoName.ts +11 -6
- package/src/helpers/formatLegendLocation.ts +1 -3
- package/src/helpers/getStatesPicked.ts +11 -0
- package/src/helpers/handleMapAriaLabels.ts +2 -2
- package/src/hooks/useStateZoom.tsx +116 -86
- package/src/index.jsx +6 -1
- package/src/scss/main.scss +23 -12
- package/src/store/map.actions.ts +2 -2
- package/src/store/map.reducer.ts +4 -4
- package/src/types/MapConfig.ts +2 -3
- package/src/types/MapContext.ts +2 -1
- package/src/helpers/getStatePicked.ts +0 -8
package/index.html
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
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
|
+
border-top: none !important;
|
|
10
|
+
}
|
|
3
11
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
margin: 0;
|
|
10
|
-
border-top: none !important;
|
|
11
|
-
}
|
|
12
|
+
.cdc-map-outer-container {
|
|
13
|
+
min-height: 100vh;
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
16
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
|
|
12
17
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
<!-- This is temporary and for testing until Nunito/900 is added to TP -->
|
|
19
|
+
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap" rel="stylesheet" />
|
|
20
|
+
<style type="text/css">
|
|
21
|
+
@font-face {
|
|
22
|
+
font-family: 'Nunito';
|
|
23
|
+
font-weight: 900;
|
|
24
|
+
font-display: swap;
|
|
25
|
+
src: url('https://app.unpkg.com/@fontsource/nunito@5.0.18/files/files/nunito-latin-900-normal.woff2')
|
|
26
|
+
format('woff2');
|
|
27
|
+
}
|
|
28
|
+
</style>
|
|
29
|
+
</head>
|
|
18
30
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
@font-face {
|
|
23
|
-
font-family: 'Nunito';
|
|
24
|
-
font-weight: 900;
|
|
25
|
-
font-display: swap;
|
|
26
|
-
src: url('https://app.unpkg.com/@fontsource/nunito@5.0.18/files/files/nunito-latin-900-normal.woff2') format('woff2');
|
|
27
|
-
}
|
|
28
|
-
</style>
|
|
29
|
-
</head>
|
|
31
|
+
<body>
|
|
32
|
+
<!-- DEFAULT EXAMPLES -->
|
|
33
|
+
<div class="react-container" data-config="/examples/default-world.json"></div>
|
|
30
34
|
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
36
|
-
<script type="module" src="./src/index.jsx"></script>
|
|
37
|
-
<!-- add cove_loaded listener -->
|
|
38
|
-
<!-- <script>
|
|
35
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
36
|
+
<script type="module" src="./src/index.jsx"></script>
|
|
37
|
+
<!-- add cove_loaded listener -->
|
|
38
|
+
<!-- <script>
|
|
39
39
|
document.addEventListener('cove_loaded', function () {
|
|
40
40
|
// This is a temporary fix to ensure the map loads after Cove has loaded
|
|
41
41
|
// and the cdc-map-outer-container is available.
|
|
@@ -43,6 +43,5 @@
|
|
|
43
43
|
console.log('Cove has loaded, initializing map...');
|
|
44
44
|
});
|
|
45
45
|
</script> -->
|
|
46
|
-
</body>
|
|
47
|
-
|
|
48
|
-
</html>
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/map",
|
|
3
|
-
"version": "4.25.
|
|
3
|
+
"version": "4.25.8",
|
|
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.
|
|
28
|
+
"@cdc/core": "^4.25.8",
|
|
29
29
|
"@googlemaps/markerclusterer": "^2.5.3",
|
|
30
30
|
"@hello-pangea/dnd": "^16.2.0",
|
|
31
31
|
"@react-google-maps/api": "^2.20.6",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"react": "^18.2.0",
|
|
46
46
|
"react-dom": "^18.2.0"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "e369994230b5e3facff224e1d89d5937528ac5a0"
|
|
49
49
|
}
|
package/src/CdcMap.tsx
CHANGED
|
@@ -8,7 +8,8 @@ import { addUIDs, validateFipsCodeLength } from './helpers'
|
|
|
8
8
|
import EditorContext from '@cdc/editor/src/ConfigContext'
|
|
9
9
|
import { extractCoveData, updateVegaData } from '@cdc/core/helpers/vegaConfig'
|
|
10
10
|
import { MapConfig } from './types/MapConfig'
|
|
11
|
-
import _
|
|
11
|
+
import _ from 'lodash'
|
|
12
|
+
import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
|
|
12
13
|
|
|
13
14
|
type CdcMapProps = {
|
|
14
15
|
config: MapConfig
|
|
@@ -19,6 +20,7 @@ type CdcMapProps = {
|
|
|
19
20
|
logo?: string
|
|
20
21
|
navigationHandler: Function
|
|
21
22
|
setConfig: Function
|
|
23
|
+
interactionLabel?: string
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
const CdcMap: React.FC<CdcMapProps> = ({
|
|
@@ -28,7 +30,8 @@ const CdcMap: React.FC<CdcMapProps> = ({
|
|
|
28
30
|
configUrl,
|
|
29
31
|
logo = '',
|
|
30
32
|
link,
|
|
31
|
-
config: editorsConfig
|
|
33
|
+
config: editorsConfig,
|
|
34
|
+
interactionLabel = ''
|
|
32
35
|
}) => {
|
|
33
36
|
const editorContext = useContext(EditorContext)
|
|
34
37
|
const [config, _setConfig] = useState(editorsConfig ?? null)
|
|
@@ -116,6 +119,7 @@ const CdcMap: React.FC<CdcMapProps> = ({
|
|
|
116
119
|
|
|
117
120
|
useEffect(() => {
|
|
118
121
|
init()
|
|
122
|
+
publishAnalyticsEvent('map_loaded', 'load', interactionLabel, 'map')
|
|
119
123
|
}, [])
|
|
120
124
|
|
|
121
125
|
useEffect(() => {
|
|
@@ -137,6 +141,7 @@ const CdcMap: React.FC<CdcMapProps> = ({
|
|
|
137
141
|
logo={logo}
|
|
138
142
|
link={link}
|
|
139
143
|
loadConfig={loadConfig}
|
|
144
|
+
interactionLabel={interactionLabel}
|
|
140
145
|
/>
|
|
141
146
|
)
|
|
142
147
|
}
|
package/src/CdcMapComponent.tsx
CHANGED
|
@@ -68,6 +68,7 @@ import EditorContext from '@cdc/editor/src/ConfigContext'
|
|
|
68
68
|
import MapActions from './store/map.actions'
|
|
69
69
|
import _ from 'lodash'
|
|
70
70
|
import useModal from './hooks/useModal'
|
|
71
|
+
import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
|
|
71
72
|
|
|
72
73
|
type CdcMapComponent = {
|
|
73
74
|
config: MapConfig
|
|
@@ -79,6 +80,7 @@ type CdcMapComponent = {
|
|
|
79
80
|
setSharedFilter: Function
|
|
80
81
|
setSharedFilterValue: Function
|
|
81
82
|
datasets?: Datasets
|
|
83
|
+
interactionLabel: string
|
|
82
84
|
}
|
|
83
85
|
|
|
84
86
|
const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
@@ -92,7 +94,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
92
94
|
link,
|
|
93
95
|
setConfig: setParentConfig,
|
|
94
96
|
loadConfig,
|
|
95
|
-
datasets
|
|
97
|
+
datasets,
|
|
98
|
+
interactionLabel = ''
|
|
96
99
|
}) => {
|
|
97
100
|
const initialState = getInitialState(configObj)
|
|
98
101
|
|
|
@@ -112,7 +115,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
112
115
|
scale,
|
|
113
116
|
translate,
|
|
114
117
|
projection,
|
|
115
|
-
|
|
118
|
+
statesToShow,
|
|
116
119
|
requiredColumns,
|
|
117
120
|
topoData,
|
|
118
121
|
coveLoadedHasRan,
|
|
@@ -405,13 +408,14 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
405
408
|
setSharedFilter,
|
|
406
409
|
setSharedFilterValue,
|
|
407
410
|
config,
|
|
408
|
-
|
|
411
|
+
statesToShow,
|
|
409
412
|
tooltipId,
|
|
410
413
|
tooltipRef,
|
|
411
414
|
topoData,
|
|
412
415
|
translate,
|
|
413
416
|
isDraggingAnnotation,
|
|
414
|
-
loadConfig
|
|
417
|
+
loadConfig,
|
|
418
|
+
interactionLabel
|
|
415
419
|
}
|
|
416
420
|
|
|
417
421
|
if (!config.data) return <></>
|
|
@@ -420,7 +424,18 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
420
424
|
|
|
421
425
|
// this only shows in Dashboard config mode and only if Show Table is also set
|
|
422
426
|
const tableLink = (
|
|
423
|
-
<a
|
|
427
|
+
<a
|
|
428
|
+
href={`#data-table-${config.dataKey}`}
|
|
429
|
+
className='margin-left-href'
|
|
430
|
+
onClick={() => {
|
|
431
|
+
publishAnalyticsEvent(
|
|
432
|
+
'link_to_data_table_click',
|
|
433
|
+
'click',
|
|
434
|
+
`${interactionLabel}|#data-table-${config.dataKey}`,
|
|
435
|
+
'map'
|
|
436
|
+
)
|
|
437
|
+
}}
|
|
438
|
+
>
|
|
424
439
|
{config.dataKey} (Go to Table)
|
|
425
440
|
</a>
|
|
426
441
|
)
|
|
@@ -471,6 +486,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
471
486
|
setFilters={_setRuntimeData}
|
|
472
487
|
dimensions={dimensions}
|
|
473
488
|
standaloneMap={!config}
|
|
489
|
+
interactionLabel={interactionLabel}
|
|
474
490
|
/>
|
|
475
491
|
)}
|
|
476
492
|
|
|
@@ -517,6 +533,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
517
533
|
skipId={tabId}
|
|
518
534
|
containerWidthPadding={0}
|
|
519
535
|
currentViewport={currentViewport}
|
|
536
|
+
interactionLabel={interactionLabel}
|
|
520
537
|
/>
|
|
521
538
|
)}
|
|
522
539
|
</div>
|
|
@@ -545,6 +562,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
545
562
|
type='image'
|
|
546
563
|
state={config}
|
|
547
564
|
elementToCapture={imageId}
|
|
565
|
+
interactionLabel={interactionLabel}
|
|
548
566
|
/>
|
|
549
567
|
)}
|
|
550
568
|
{showDownloadPdfButton && (
|
|
@@ -553,6 +571,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
553
571
|
title='Download Chart as PDF'
|
|
554
572
|
type='pdf'
|
|
555
573
|
state={config}
|
|
574
|
+
interactionLabel={interactionLabel}
|
|
556
575
|
elementToCapture={imageId}
|
|
557
576
|
/>
|
|
558
577
|
)}
|
|
@@ -588,6 +607,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
588
607
|
tableTitle={table.label}
|
|
589
608
|
vizTitle={general.title}
|
|
590
609
|
wrapColumns={table.wrapColumns}
|
|
610
|
+
interactionLabel={interactionLabel}
|
|
591
611
|
/>
|
|
592
612
|
)}
|
|
593
613
|
|
|
@@ -607,9 +627,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
|
|
|
607
627
|
<ReactTooltip
|
|
608
628
|
id={`tooltip__${tooltipId}`}
|
|
609
629
|
float={true}
|
|
610
|
-
className={
|
|
611
|
-
tooltips.capitalizeLabels ? 'capitalize tooltip tooltip-test' : 'tooltip tooltip-test'
|
|
612
|
-
}`}
|
|
630
|
+
className={`tooltip tooltip-test`}
|
|
613
631
|
style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }}
|
|
614
632
|
/>
|
|
615
633
|
)}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
import CdcMap from '../CdcMap'
|
|
3
3
|
import EqualNumberOptInExample from './_mock/DEV-7286.json'
|
|
4
|
+
import MultiState from './_mock/multi-state.json'
|
|
4
5
|
import SingleStateWithFilters from './_mock/DEV-8942.json'
|
|
5
6
|
import exampleCityState from './_mock/example-city-state.json'
|
|
6
7
|
import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
|
|
@@ -75,6 +76,12 @@ export const Single_State: Story = {
|
|
|
75
76
|
}
|
|
76
77
|
}
|
|
77
78
|
|
|
79
|
+
export const Multi_State: Story = {
|
|
80
|
+
args: {
|
|
81
|
+
config: MultiState
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
78
85
|
export const Bubble_Map: Story = {
|
|
79
86
|
args: {
|
|
80
87
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-Bubble-Map-world.json'
|