@cdc/map 4.24.4 → 4.24.7
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 +39011 -34350
- package/examples/annotation/index.json +552 -0
- package/examples/annotation/usa-map.json +900 -0
- package/index.html +4 -3
- package/package.json +6 -5
- package/src/CdcMap.tsx +57 -85
- package/src/_stories/CdcMap.stories.tsx +7 -0
- package/src/_stories/_mock/DEV-7286.json +165 -0
- package/src/components/Annotation/Annotation.Draggable.styles.css +18 -0
- package/src/components/Annotation/Annotation.Draggable.tsx +152 -0
- package/src/components/Annotation/AnnotationDropdown.styles.css +14 -0
- package/src/components/Annotation/AnnotationDropdown.tsx +69 -0
- package/src/components/Annotation/AnnotationList.styles.css +45 -0
- package/src/components/Annotation/AnnotationList.tsx +42 -0
- package/src/components/Annotation/index.tsx +11 -0
- package/src/components/BubbleList.jsx +2 -1
- package/src/components/EditorPanel/components/EditorPanel.tsx +3 -2
- package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +358 -0
- package/src/components/EditorPanel/components/{Panel.PatternSettings.tsx → Panels/Panel.PatternSettings.tsx} +2 -2
- package/src/components/EditorPanel/components/{Panels.tsx → Panels/index.tsx} +3 -0
- package/src/components/Legend/components/Legend.tsx +3 -9
- package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx +4 -3
- package/src/components/UsaMap/components/UsaMap.County.tsx +48 -21
- package/src/components/UsaMap/components/UsaMap.Region.tsx +2 -0
- package/src/components/UsaMap/components/UsaMap.SingleState.tsx +2 -0
- package/src/components/UsaMap/components/UsaMap.State.tsx +28 -19
- package/src/components/WorldMap/{components/WorldMap.jsx → WorldMap.tsx} +8 -9
- package/src/components/WorldMap/index.tsx +1 -1
- package/src/context.ts +2 -1
- package/src/data/initial-state.js +4 -1
- package/src/helpers/generateColorsArray.ts +13 -0
- package/src/helpers/generateRuntimeLegendHash.ts +23 -0
- package/src/helpers/getUniqueValues.ts +19 -0
- package/src/helpers/hashObj.ts +25 -0
- package/src/helpers/tests/generateColorsArray.test.ts +18 -0
- package/src/helpers/tests/generateRuntimeLegendHash.test.ts +11 -0
- package/src/helpers/tests/hashObj.test.ts +10 -0
- package/src/scss/map.scss +6 -3
- package/src/types/MapContext.ts +2 -0
- package/LICENSE +0 -201
- package/src/test/CdcMap.test.jsx +0 -19
- /package/src/components/EditorPanel/components/{Panel.PatternSettings-style.css → Panels/Panel.PatternSettings-style.css} +0 -0
package/index.html
CHANGED
|
@@ -19,10 +19,11 @@
|
|
|
19
19
|
|
|
20
20
|
<body>
|
|
21
21
|
<!-- DEFAULT EXAMPLES -->
|
|
22
|
+
<div class="react-container" data-config="/examples/emergency-dept-visits.json"></div>
|
|
22
23
|
<!-- <div class="react-container" data-config="/examples/hex-colors.json"></div> -->
|
|
23
24
|
<!-- <div class="react-container" data-config="/examples/private/map.json"></div> -->
|
|
24
25
|
<!-- <div class="react-container" data-config="/examples/private/zika-issue.json"></div> -->
|
|
25
|
-
<div class="react-container react-container--maps" data-config="/examples/
|
|
26
|
+
<!-- <div class="react-container react-container--maps" data-config="/examples/annotation/index.json">/</div> -->
|
|
26
27
|
|
|
27
28
|
<!-- <div class="react-container react-container--maps" data-config="/examples/private/tooltip-issue.json"></div> -->
|
|
28
29
|
<!-- <div class="react-container react-container--maps" data-config="/examples/test.json"></div> -->
|
|
@@ -35,8 +36,8 @@
|
|
|
35
36
|
<!-- <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div> -->
|
|
36
37
|
<div class="react-container react-container--maps" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/US-County-Level-Map.json"></div>
|
|
37
38
|
<!-- <div class="react-container react-container--maps" data-config="/examples/default-geocode.json"></div> -->
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
<div class="react-container react-container--maps" data-config="/examples/default-single-state.json"></div>
|
|
40
|
+
<div class="react-container react-container--maps" data-config="/examples/bubble-us.json"></div>
|
|
40
41
|
<!-- <div class="react-container react-container--maps" data-config="/examples/bubble-world.json"></div> -->
|
|
41
42
|
|
|
42
43
|
<!-- TESTS DATA TABLE SORT-->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/map",
|
|
3
|
-
"version": "4.24.
|
|
3
|
+
"version": "4.24.7",
|
|
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",
|
|
@@ -8,8 +8,9 @@
|
|
|
8
8
|
"scripts": {
|
|
9
9
|
"start": "vite --open",
|
|
10
10
|
"build": "vite build",
|
|
11
|
-
"test": "vitest
|
|
12
|
-
"test
|
|
11
|
+
"test": "vitest run --reporter verbose",
|
|
12
|
+
"test-watch": "vitest watch --reporter verbose",
|
|
13
|
+
"test-watch:ui": "vitest --ui",
|
|
13
14
|
"preview": "vite preview",
|
|
14
15
|
"graph": "nx graph",
|
|
15
16
|
"prepublishOnly": "lerna run --scope @cdc/map build"
|
|
@@ -24,7 +25,7 @@
|
|
|
24
25
|
},
|
|
25
26
|
"license": "Apache-2.0",
|
|
26
27
|
"dependencies": {
|
|
27
|
-
"@cdc/core": "^4.24.
|
|
28
|
+
"@cdc/core": "^4.24.7",
|
|
28
29
|
"@emotion/core": "^10.0.28",
|
|
29
30
|
"@emotion/react": "^11.1.5",
|
|
30
31
|
"@hello-pangea/dnd": "^16.2.0",
|
|
@@ -51,5 +52,5 @@
|
|
|
51
52
|
"react": "^18.2.0",
|
|
52
53
|
"react-dom": "^18.2.0"
|
|
53
54
|
},
|
|
54
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "7a7372d03778cb977e0e92e3b3bc1a35f8a5bfaf"
|
|
55
56
|
}
|
package/src/CdcMap.tsx
CHANGED
|
@@ -2,7 +2,9 @@ import React, { useState, useEffect, useRef, useCallback, useId } from 'react'
|
|
|
2
2
|
import * as d3 from 'd3'
|
|
3
3
|
import Layout from '@cdc/core/components/Layout'
|
|
4
4
|
import Waiting from '@cdc/core/components/Waiting'
|
|
5
|
+
import Annotation from './components/Annotation'
|
|
5
6
|
import Error from './components/EditorPanel/components/Error'
|
|
7
|
+
import _ from 'lodash'
|
|
6
8
|
|
|
7
9
|
// IE11
|
|
8
10
|
import 'whatwg-fetch'
|
|
@@ -16,6 +18,10 @@ import parse from 'html-react-parser'
|
|
|
16
18
|
import 'react-tooltip/dist/react-tooltip.css'
|
|
17
19
|
|
|
18
20
|
// Helpers
|
|
21
|
+
import { hashObj } from './helpers/hashObj'
|
|
22
|
+
import { generateRuntimeLegendHash } from './helpers/generateRuntimeLegendHash'
|
|
23
|
+
import { generateColorsArray } from './helpers/generateColorsArray'
|
|
24
|
+
import { getUniqueValues } from './helpers/getUniqueValues'
|
|
19
25
|
import { publish } from '@cdc/core/helpers/events'
|
|
20
26
|
import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
|
|
21
27
|
import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
|
|
@@ -42,7 +48,6 @@ import MediaControls from '@cdc/core/components/MediaControls'
|
|
|
42
48
|
import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
|
|
43
49
|
import getViewport from '@cdc/core/helpers/getViewport'
|
|
44
50
|
import isDomainExternal from '@cdc/core/helpers/isDomainExternal'
|
|
45
|
-
import Loading from '@cdc/core/components/Loading'
|
|
46
51
|
import numberFromString from '@cdc/core/helpers/numberFromString'
|
|
47
52
|
import DataTable from '@cdc/core/components/DataTable' // Future: Lazy
|
|
48
53
|
|
|
@@ -68,34 +73,6 @@ const countryKeys = Object.keys(supportedCountries)
|
|
|
68
73
|
const countyKeys = Object.keys(supportedCounties)
|
|
69
74
|
const cityKeys = Object.keys(supportedCities)
|
|
70
75
|
|
|
71
|
-
const generateColorsArray = (color = '#000000', special = false) => {
|
|
72
|
-
let colorObj = chroma(color)
|
|
73
|
-
let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
|
|
74
|
-
|
|
75
|
-
return [color, hoverColor, colorObj.darken(0.3).hex()]
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
const hashObj = row => {
|
|
79
|
-
try {
|
|
80
|
-
if (!row) throw new Error('No row supplied to hashObj')
|
|
81
|
-
|
|
82
|
-
let str = JSON.stringify(row)
|
|
83
|
-
let hash = 0
|
|
84
|
-
|
|
85
|
-
if (str.length === 0) return hash
|
|
86
|
-
|
|
87
|
-
for (let i = 0; i < str.length; i++) {
|
|
88
|
-
let char = str.charCodeAt(i)
|
|
89
|
-
hash = (hash << 5) - hash + char
|
|
90
|
-
hash = hash & hash
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
return hash
|
|
94
|
-
} catch (e) {
|
|
95
|
-
console.error('COVE: ', e) // eslint-disable-line
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
76
|
const indexOfIgnoreType = (arr, item) => {
|
|
100
77
|
for (let i = 0; i < arr.length; i++) {
|
|
101
78
|
if (item === arr[i]) {
|
|
@@ -105,26 +82,10 @@ const indexOfIgnoreType = (arr, item) => {
|
|
|
105
82
|
return -1
|
|
106
83
|
}
|
|
107
84
|
|
|
108
|
-
// returns string[]
|
|
109
|
-
const getUniqueValues = (data, columnName) => {
|
|
110
|
-
let result = {}
|
|
111
|
-
|
|
112
|
-
for (let i = 0; i < data.length; i++) {
|
|
113
|
-
let val = data[i][columnName]
|
|
114
|
-
|
|
115
|
-
if (undefined === val) continue
|
|
116
|
-
|
|
117
|
-
if (undefined === result[val]) {
|
|
118
|
-
result[val] = true
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
return Object.keys(result)
|
|
123
|
-
}
|
|
124
|
-
|
|
125
85
|
const CdcMap = ({ className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, isDebug = false, configUrl, logo = '', setConfig, setSharedFilter, setSharedFilterValue, link }) => {
|
|
126
86
|
const transform = new DataTransform()
|
|
127
87
|
const [state, setState] = useState({ ...initialState })
|
|
88
|
+
const [isDraggingAnnotation, setIsDraggingAnnotation] = useState(false)
|
|
128
89
|
const [loading, setLoading] = useState(true)
|
|
129
90
|
const [displayPanel, setDisplayPanel] = useState(true)
|
|
130
91
|
const [currentViewport, setCurrentViewport] = useState()
|
|
@@ -142,6 +103,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
142
103
|
const [requiredColumns, setRequiredColumns] = useState(null) // Simple state so we know if we need more information before parsing the map
|
|
143
104
|
|
|
144
105
|
const legendRef = useRef(null)
|
|
106
|
+
const tooltipRef = useRef(null)
|
|
145
107
|
const legendId = useId()
|
|
146
108
|
const tooltipId = useId()
|
|
147
109
|
|
|
@@ -152,6 +114,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
152
114
|
|
|
153
115
|
if (isDebug) console.log('CdcMap state=', state) // <eslint-disable-line></eslint-disable-line>
|
|
154
116
|
|
|
117
|
+
const handleDragStateChange = isDragging => {
|
|
118
|
+
setIsDraggingAnnotation(isDragging)
|
|
119
|
+
}
|
|
120
|
+
|
|
155
121
|
const columnsRequiredChecker = useCallback(() => {
|
|
156
122
|
let columnList = []
|
|
157
123
|
|
|
@@ -219,28 +185,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
219
185
|
}
|
|
220
186
|
}, [state.mapPosition, setPosition])
|
|
221
187
|
|
|
222
|
-
const generateRuntimeLegendHash = () => {
|
|
223
|
-
return hashObj({
|
|
224
|
-
unified: state.legend.unified ?? false,
|
|
225
|
-
equalNumberOptIn: state.general.equalNumberOptIn ?? false,
|
|
226
|
-
specialClassesLast: state.legend.showSpecialClassesLast ?? false,
|
|
227
|
-
color: state.color,
|
|
228
|
-
customColors: state.customColors,
|
|
229
|
-
numberOfItems: state.legend.numberOfItems,
|
|
230
|
-
type: state.legend.type,
|
|
231
|
-
separateZero: state.legend.separateZero ?? false,
|
|
232
|
-
primary: state.columns.primary.name,
|
|
233
|
-
categoryValuesOrder: state.legend.categoryValuesOrder,
|
|
234
|
-
specialClasses: state.legend.specialClasses,
|
|
235
|
-
geoType: state.general.geoType,
|
|
236
|
-
data: state.data,
|
|
237
|
-
...runtimeFilters,
|
|
238
|
-
filters: {
|
|
239
|
-
...state.filters
|
|
240
|
-
}
|
|
241
|
-
})
|
|
242
|
-
}
|
|
243
|
-
|
|
244
188
|
const resizeObserver = new ResizeObserver(entries => {
|
|
245
189
|
for (let entry of entries) {
|
|
246
190
|
let { width, height } = entry.contentRect
|
|
@@ -680,14 +624,28 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
680
624
|
let colors = colorPalettes[state.color]
|
|
681
625
|
let colorRange = colors.slice(0, state.legend.numberOfItems)
|
|
682
626
|
|
|
627
|
+
const getDomain = () => {
|
|
628
|
+
// backwards compatibility
|
|
629
|
+
if (state?.columns?.primary?.roundToPlace !== undefined && state?.general?.equalNumberOptIn) {
|
|
630
|
+
return _.uniq(dataSet.map(item => Number(item[state.columns.primary.name]).toFixed(Number(state?.columns?.primary?.roundToPlace))))
|
|
631
|
+
}
|
|
632
|
+
return _.uniq(dataSet.map(item => Math.round(Number(item[state.columns.primary.name]))))
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
const getBreaks = scale => {
|
|
636
|
+
// backwards compatibility
|
|
637
|
+
if (state?.columns?.primary?.roundToPlace !== undefined && state?.general?.equalNumberOptIn) {
|
|
638
|
+
return scale.quantiles().map(b => Number(b)?.toFixed(Number(state?.columns?.primary?.roundToPlace)))
|
|
639
|
+
}
|
|
640
|
+
return scale.quantiles().map(item => Number(Math.round(item)))
|
|
641
|
+
}
|
|
642
|
+
|
|
683
643
|
let scale = d3
|
|
684
644
|
.scaleQuantile()
|
|
685
|
-
.domain(
|
|
645
|
+
.domain(getDomain()) // min/max values
|
|
686
646
|
.range(colorRange) // set range to our colors array
|
|
687
647
|
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
breaks = breaks.map(item => Math.round(item))
|
|
648
|
+
const breaks = getBreaks(scale)
|
|
691
649
|
|
|
692
650
|
// if seperating zero force it into breaks
|
|
693
651
|
if (breaks[0] !== 0) {
|
|
@@ -716,8 +674,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
716
674
|
return min
|
|
717
675
|
}
|
|
718
676
|
|
|
677
|
+
const getDecimalPlace = n => {
|
|
678
|
+
return Math.pow(10, -n)
|
|
679
|
+
}
|
|
680
|
+
|
|
719
681
|
const setMax = (index, min) => {
|
|
720
|
-
let max = breaks[index + 1] -
|
|
682
|
+
let max = Number(breaks[index + 1]) - getDecimalPlace(Number(state?.columns?.primary?.roundToPlace))
|
|
721
683
|
|
|
722
684
|
// check if min and max range are the same
|
|
723
685
|
// if (min === max + 1) {
|
|
@@ -983,7 +945,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
983
945
|
}
|
|
984
946
|
|
|
985
947
|
// if string of letters like 'Home' then dont need to format as a number
|
|
986
|
-
if (typeof value === 'string' && value.length > 0 && state.legend.type === 'equalnumber') {
|
|
948
|
+
if (typeof value === 'string' && value.length > 0 && /[a-zA-Z]/.test(value) && state.legend.type === 'equalnumber') {
|
|
987
949
|
return value
|
|
988
950
|
}
|
|
989
951
|
|
|
@@ -1129,7 +1091,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1129
1091
|
const formatLegendLocation = key => {
|
|
1130
1092
|
let value = key
|
|
1131
1093
|
let formattedName = ''
|
|
1132
|
-
let stateName = stateFipsToTwoDigit[key
|
|
1094
|
+
let stateName = stateFipsToTwoDigit[key?.substring(0, 2)]
|
|
1133
1095
|
|
|
1134
1096
|
if (stateName) {
|
|
1135
1097
|
formattedName += stateName
|
|
@@ -1531,7 +1493,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1531
1493
|
}
|
|
1532
1494
|
}
|
|
1533
1495
|
|
|
1534
|
-
const hashLegend = generateRuntimeLegendHash()
|
|
1496
|
+
const hashLegend = generateRuntimeLegendHash(state, runtimeFilters)
|
|
1535
1497
|
|
|
1536
1498
|
const hashData = hashObj({
|
|
1537
1499
|
data: state.data,
|
|
@@ -1558,7 +1520,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1558
1520
|
}, [state]) // eslint-disable-line
|
|
1559
1521
|
|
|
1560
1522
|
useEffect(() => {
|
|
1561
|
-
const hashLegend = generateRuntimeLegendHash()
|
|
1523
|
+
const hashLegend = generateRuntimeLegendHash(state, runtimeFilters)
|
|
1562
1524
|
|
|
1563
1525
|
// Legend - Update when runtimeData does
|
|
1564
1526
|
const legend = generateRuntimeLegend(state, runtimeData, hashLegend)
|
|
@@ -1587,7 +1549,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1587
1549
|
if (!table.label || table.label === '') table.label = 'Data Table'
|
|
1588
1550
|
|
|
1589
1551
|
// Map container classes
|
|
1590
|
-
let mapContainerClasses = ['map-container', state.legend
|
|
1552
|
+
let mapContainerClasses = ['map-container', state.legend?.position, state.general.type, state.general.geoType, 'outline-none']
|
|
1591
1553
|
|
|
1592
1554
|
if (modal) {
|
|
1593
1555
|
mapContainerClasses.push('modal-background')
|
|
@@ -1599,14 +1561,18 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1599
1561
|
|
|
1600
1562
|
// Props passed to all map types
|
|
1601
1563
|
const mapProps = {
|
|
1564
|
+
isDraggingAnnotation,
|
|
1565
|
+
handleDragStateChange,
|
|
1602
1566
|
applyLegendToRow,
|
|
1603
1567
|
applyTooltipsToGeo,
|
|
1604
1568
|
capitalize: state.tooltips?.capitalizeLabels,
|
|
1605
1569
|
closeModal,
|
|
1606
1570
|
columnsInData: state?.data?.[0] ? Object.keys(state.data[0]) : [],
|
|
1571
|
+
container,
|
|
1607
1572
|
content: modal,
|
|
1608
1573
|
currentViewport,
|
|
1609
1574
|
data: runtimeData,
|
|
1575
|
+
dimensions,
|
|
1610
1576
|
displayDataAsText,
|
|
1611
1577
|
displayGeoName,
|
|
1612
1578
|
filteredCountryCode,
|
|
@@ -1642,7 +1608,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1642
1608
|
titleCase,
|
|
1643
1609
|
type: general.type,
|
|
1644
1610
|
viewport: currentViewport,
|
|
1645
|
-
tooltipId
|
|
1611
|
+
tooltipId,
|
|
1612
|
+
tooltipRef
|
|
1646
1613
|
}
|
|
1647
1614
|
|
|
1648
1615
|
if (!mapProps.data || !state.data) return <></>
|
|
@@ -1675,8 +1642,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1675
1642
|
|
|
1676
1643
|
// this only shows in Dashboard config mode and only if Show Table is also set
|
|
1677
1644
|
const tableLink = (
|
|
1678
|
-
<a href={`#data-table-${state.
|
|
1679
|
-
{state.
|
|
1645
|
+
<a href={`#data-table-${state.dataKey}`} className='margin-left-href'>
|
|
1646
|
+
{state.dataKey} (Go to Table)
|
|
1680
1647
|
</a>
|
|
1681
1648
|
)
|
|
1682
1649
|
|
|
@@ -1689,9 +1656,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1689
1656
|
{requiredColumns && <Waiting requiredColumns={requiredColumns} className={displayPanel ? `waiting` : `waiting collapsed`} />}
|
|
1690
1657
|
{!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
|
|
1691
1658
|
<section className={`cove-component__content cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
|
|
1692
|
-
{!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
|
|
1693
|
-
<ReactTooltip id={`tooltip__${tooltipId}`} float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip tooltip-test' : 'tooltip tooltip-test'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
|
|
1694
|
-
)}
|
|
1695
1659
|
{/* prettier-ignore */}
|
|
1696
1660
|
<Title
|
|
1697
1661
|
title={title}
|
|
@@ -1700,11 +1664,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1700
1664
|
classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${general.headerColor}`]}
|
|
1701
1665
|
/>
|
|
1702
1666
|
<SkipTo skipId={tabId} skipMessage='Skip Over Map Container' />
|
|
1667
|
+
{state?.annotations?.length > 0 && <SkipTo skipId={tabId} skipMessage={`Skip over annotations`} key={`skip-annotations`} />}
|
|
1703
1668
|
|
|
1704
1669
|
{general.introText && <section className='introText'>{parse(general.introText)}</section>}
|
|
1705
1670
|
|
|
1706
1671
|
{/* prettier-ignore */}
|
|
1707
|
-
{state?.filters?.length > 0 && <Filters config={state} setConfig={setState} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
|
|
1672
|
+
{state?.filters?.length > 0 && <Filters config={state} setConfig={setState} getUniqueValues={getUniqueValues} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
|
|
1708
1673
|
|
|
1709
1674
|
<div
|
|
1710
1675
|
role='region'
|
|
@@ -1779,6 +1744,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1779
1744
|
/>
|
|
1780
1745
|
)}
|
|
1781
1746
|
|
|
1747
|
+
{state.annotations.length > 0 && <Annotation.Dropdown />}
|
|
1748
|
+
|
|
1782
1749
|
{general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
|
|
1783
1750
|
</section>
|
|
1784
1751
|
)}
|
|
@@ -1786,6 +1753,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
|
|
|
1786
1753
|
<div aria-live='assertive' className='cdcdataviz-sr-only'>
|
|
1787
1754
|
{accessibleStatus}
|
|
1788
1755
|
</div>
|
|
1756
|
+
|
|
1757
|
+
{!isDraggingAnnotation && !window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
|
|
1758
|
+
<ReactTooltip id={`tooltip__${tooltipId}`} float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip tooltip-test' : 'tooltip tooltip-test'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
|
|
1759
|
+
)}
|
|
1760
|
+
<div ref={tooltipRef} id={`tooltip__${tooltipId}-canvas`} className='tooltip' style={{ background: `rgba(255,255,255,${state.tooltips.opacity / 100})`, position: 'absolute', whiteSpace: 'nowrap' }}></div>
|
|
1789
1761
|
</Layout.Responsive>
|
|
1790
1762
|
</Layout.VisualizationWrapper>
|
|
1791
1763
|
</ConfigContext.Provider>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
2
|
import CdcMap from '../CdcMap'
|
|
3
|
+
import EqualNumberOptInExample from './_mock/DEV-7286.json'
|
|
3
4
|
|
|
4
5
|
const meta: Meta<typeof CdcMap> = {
|
|
5
6
|
title: 'Components/Templates/Map',
|
|
@@ -14,6 +15,12 @@ export const Equal_Interval_Map: Story = {
|
|
|
14
15
|
}
|
|
15
16
|
}
|
|
16
17
|
|
|
18
|
+
export const Equal_Number_Opt_In: Story = {
|
|
19
|
+
args: {
|
|
20
|
+
config: EqualNumberOptInExample
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
17
24
|
export const Equal_Number_Map: Story = {
|
|
18
25
|
args: {
|
|
19
26
|
configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/page-elements/equal-number-map.json'
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
{
|
|
2
|
+
"annotations": [],
|
|
3
|
+
"general": {
|
|
4
|
+
"geoType": "us-county",
|
|
5
|
+
"type": "data",
|
|
6
|
+
"geoBorderColor": "darkGray",
|
|
7
|
+
"headerColor": "theme-blue",
|
|
8
|
+
"title": "",
|
|
9
|
+
"showTitle": true,
|
|
10
|
+
"showSidebar": true,
|
|
11
|
+
"showDownloadButton": true,
|
|
12
|
+
"showDownloadMediaButton": false,
|
|
13
|
+
"displayAsHex": false,
|
|
14
|
+
"displayStateLabels": false,
|
|
15
|
+
"territoriesLabel": "Territories",
|
|
16
|
+
"territoriesAlwaysShow": false,
|
|
17
|
+
"language": "en",
|
|
18
|
+
"geoLabelOverride": "",
|
|
19
|
+
"hasRegions": false,
|
|
20
|
+
"fullBorder": false,
|
|
21
|
+
"convertFipsCodes": true,
|
|
22
|
+
"palette": {
|
|
23
|
+
"isReversed": false
|
|
24
|
+
},
|
|
25
|
+
"allowMapZoom": true,
|
|
26
|
+
"hideGeoColumnInTooltip": false,
|
|
27
|
+
"hidePrimaryColumnInTooltip": false,
|
|
28
|
+
"statePicked": {
|
|
29
|
+
"fipsCode": "01",
|
|
30
|
+
"stateName": "Alabama"
|
|
31
|
+
},
|
|
32
|
+
"expandDataTable": false,
|
|
33
|
+
"equalNumberOptIn": true
|
|
34
|
+
},
|
|
35
|
+
"type": "map",
|
|
36
|
+
"color": "pinkpurple",
|
|
37
|
+
"columns": {
|
|
38
|
+
"geo": {
|
|
39
|
+
"name": "FIPS Codes",
|
|
40
|
+
"label": "Location",
|
|
41
|
+
"tooltip": false,
|
|
42
|
+
"dataTable": true
|
|
43
|
+
},
|
|
44
|
+
"primary": {
|
|
45
|
+
"dataTable": true,
|
|
46
|
+
"tooltip": true,
|
|
47
|
+
"prefix": "",
|
|
48
|
+
"suffix": "",
|
|
49
|
+
"name": "Percent Vaccinated",
|
|
50
|
+
"label": "",
|
|
51
|
+
"roundToPlace": 2
|
|
52
|
+
},
|
|
53
|
+
"navigate": {
|
|
54
|
+
"name": ""
|
|
55
|
+
},
|
|
56
|
+
"latitude": {
|
|
57
|
+
"name": ""
|
|
58
|
+
},
|
|
59
|
+
"longitude": {
|
|
60
|
+
"name": ""
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
"legend": {
|
|
64
|
+
"descriptions": {},
|
|
65
|
+
"specialClasses": [],
|
|
66
|
+
"unified": false,
|
|
67
|
+
"singleColumn": false,
|
|
68
|
+
"singleRow": false,
|
|
69
|
+
"verticalSorted": false,
|
|
70
|
+
"showSpecialClassesLast": false,
|
|
71
|
+
"dynamicDescription": false,
|
|
72
|
+
"type": "equalnumber",
|
|
73
|
+
"numberOfItems": 3,
|
|
74
|
+
"position": "side",
|
|
75
|
+
"title": "Legend"
|
|
76
|
+
},
|
|
77
|
+
"filters": [],
|
|
78
|
+
"table": {
|
|
79
|
+
"wrapColumns": false,
|
|
80
|
+
"label": "Data Table",
|
|
81
|
+
"expanded": false,
|
|
82
|
+
"limitHeight": false,
|
|
83
|
+
"height": "",
|
|
84
|
+
"caption": "",
|
|
85
|
+
"showDownloadUrl": false,
|
|
86
|
+
"showDataTableLink": true,
|
|
87
|
+
"showFullGeoNameInCSV": false,
|
|
88
|
+
"forceDisplay": true,
|
|
89
|
+
"download": true,
|
|
90
|
+
"indexLabel": ""
|
|
91
|
+
},
|
|
92
|
+
"tooltips": {
|
|
93
|
+
"appearanceType": "hover",
|
|
94
|
+
"linkLabel": "Learn More",
|
|
95
|
+
"capitalizeLabels": true,
|
|
96
|
+
"opacity": 90
|
|
97
|
+
},
|
|
98
|
+
"runtime": {
|
|
99
|
+
"editorErrorMessage": []
|
|
100
|
+
},
|
|
101
|
+
"visual": {
|
|
102
|
+
"minBubbleSize": 1,
|
|
103
|
+
"maxBubbleSize": 20,
|
|
104
|
+
"extraBubbleBorder": false,
|
|
105
|
+
"cityStyle": "circle",
|
|
106
|
+
"cityStyleLabel": "",
|
|
107
|
+
"showBubbleZeros": false,
|
|
108
|
+
"additionalCityStyles": [],
|
|
109
|
+
"geoCodeCircleSize": 8
|
|
110
|
+
},
|
|
111
|
+
"mapPosition": {
|
|
112
|
+
"coordinates": [
|
|
113
|
+
0,
|
|
114
|
+
30
|
|
115
|
+
],
|
|
116
|
+
"zoom": 1
|
|
117
|
+
},
|
|
118
|
+
"map": {
|
|
119
|
+
"layers": [],
|
|
120
|
+
"patterns": []
|
|
121
|
+
},
|
|
122
|
+
"hexMap": {
|
|
123
|
+
"type": "",
|
|
124
|
+
"shapeGroups": [
|
|
125
|
+
{
|
|
126
|
+
"legendTitle": "",
|
|
127
|
+
"legendDescription": "",
|
|
128
|
+
"items": [
|
|
129
|
+
{
|
|
130
|
+
"key": "",
|
|
131
|
+
"shape": "Arrow Up",
|
|
132
|
+
"column": "",
|
|
133
|
+
"operator": "=",
|
|
134
|
+
"value": ""
|
|
135
|
+
}
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
]
|
|
139
|
+
},
|
|
140
|
+
"filterBehavior": "Filter Change",
|
|
141
|
+
"datasets": {},
|
|
142
|
+
"data": [
|
|
143
|
+
{
|
|
144
|
+
"FIPS Codes": "02013",
|
|
145
|
+
"County": "Aleutians East Borough",
|
|
146
|
+
"Public Health Jurisdiction": "AK",
|
|
147
|
+
"Percent Vaccinated": 99.99,
|
|
148
|
+
"Vaccination Coverage Group": "70% or More"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"FIPS Codes": "02016",
|
|
152
|
+
"County": "Aleutians West Census Area",
|
|
153
|
+
"Public Health Jurisdiction": "AK",
|
|
154
|
+
"Percent Vaccinated": 89.74,
|
|
155
|
+
"Vaccination Coverage Group": "70% or More"
|
|
156
|
+
}
|
|
157
|
+
],
|
|
158
|
+
"dataFileName": "02-map-valid-county-special-values.csv",
|
|
159
|
+
"dataFileSourceType": "file",
|
|
160
|
+
"dataDescription": {
|
|
161
|
+
"horizontal": false,
|
|
162
|
+
"series": false
|
|
163
|
+
},
|
|
164
|
+
"version": "4.24.4"
|
|
165
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.cdc-open-viz-module .annotation__desktop-label {
|
|
2
|
+
display: none;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.cdc-open-viz-module {
|
|
6
|
+
.annotation__mobile-label-circle {
|
|
7
|
+
stroke-width: 2;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@container content (min-width: 700px) {
|
|
12
|
+
.cdc-open-viz-module .annotation__mobile-label {
|
|
13
|
+
display: none;
|
|
14
|
+
}
|
|
15
|
+
.cdc-open-viz-module .annotation__desktop-label {
|
|
16
|
+
display: block;
|
|
17
|
+
}
|
|
18
|
+
}
|