@cdc/map 4.23.5 → 4.23.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 (17) hide show
  1. package/dist/cdcmap.js +19464 -18867
  2. package/examples/custom-map-layers.json +10 -2
  3. package/examples/example-city-state.json +36 -0
  4. package/examples/new-cities.json +656 -0
  5. package/examples/testing-layer-2.json +61 -1
  6. package/examples/testing-layer.json +1 -5
  7. package/index.html +2 -2
  8. package/package.json +3 -3
  9. package/src/CdcMap.jsx +33 -11
  10. package/src/components/CountyMap.jsx +14 -11
  11. package/src/components/DataTable.jsx +6 -6
  12. package/src/components/EditorPanel.jsx +1239 -1200
  13. package/src/components/UsaMap.jsx +7 -1
  14. package/src/data/initial-state.js +1 -0
  15. package/src/data/supported-cities.csv +165 -0
  16. package/src/data/supported-geos.js +14 -0
  17. package/src/hooks/useMapLayers.jsx +11 -75
package/examples/testing-layer.json CHANGED
@@ -66,11 +66,7 @@
66
66
  "properties": {
67
67
  "name": "Polygon 2",
68
68
  "styleUrl": "#poly-000000-1200-77-nodesc",
69
- "fill-opacity": 0.30196078431372547,
70
- "fill": "blue",
71
- "stroke-opacity": 1,
72
- "stroke": "red",
73
- "stroke-width": 5
69
+ "fill-opacity": 0.30196078431372547
74
70
  }
75
71
  },
76
72
  {
package/index.html CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  <body>
18
18
  <!-- DEFAULT EXAMPLES -->
19
- <!-- <div class="react-container react-container--maps" data-config="/examples/default-county.json"></div> -->
19
+ <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div>
20
20
  <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-geocode.json"></div> -->
21
21
  <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-usa-regions.json"></div> -->
22
22
  <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-single-state.json"></div> -->
@@ -32,7 +32,7 @@
32
32
  <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
33
33
 
34
34
  <!-- TP4 EXAMPLES -->
35
- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div>
35
+ <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
36
36
  <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state-no-territories.json"></div> -->
37
37
  <!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
38
38
  <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/map",
3
- "version": "4.23.5",
3
+ "version": "4.23.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",
@@ -24,7 +24,7 @@
24
24
  },
25
25
  "license": "Apache-2.0",
26
26
  "dependencies": {
27
- "@cdc/core": "^4.23.5",
27
+ "@cdc/core": "^4.23.6",
28
28
  "@emotion/core": "^10.0.28",
29
29
  "@emotion/react": "^11.1.5",
30
30
  "@hello-pangea/dnd": "^16.2.0",
@@ -51,5 +51,5 @@
51
51
  "react": "^18.2.0",
52
52
  "react-dom": "^18.2.0"
53
53
  },
54
- "gitHead": "34add3436994ca3cf13e51f313add4d70377f53e"
54
+ "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade"
55
55
  }
package/src/CdcMap.jsx CHANGED
@@ -14,6 +14,7 @@ import 'react-tooltip/dist/react-tooltip.css'
14
14
 
15
15
  // Helpers
16
16
  import { publish } from '@cdc/core/helpers/events'
17
+ import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
17
18
 
18
19
  // Data
19
20
  import { countryCoordinates } from './data/country-coordinates'
@@ -30,7 +31,7 @@ import './scss/btn.scss'
30
31
 
31
32
  // Core
32
33
  import { DataTransform } from '@cdc/core/helpers/DataTransform'
33
- import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
34
+ import MediaControls from '@cdc/core/components/MediaControls'
34
35
  import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
35
36
  import getViewport from '@cdc/core/helpers/getViewport'
36
37
  import Loading from '@cdc/core/components/Loading'
@@ -501,10 +502,19 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
501
502
 
502
503
  legendMemo.current = newLegendMemo
503
504
 
505
+ // before returning the legend result
506
+ // add property for bin number and set to index location
504
507
  result.forEach((row, i) => {
505
508
  row.bin = i // set bin number to index
506
509
  })
507
510
 
511
+ // Move all special legend items from "Special Classes" to the end of the legend
512
+ if (state.legend.showSpecialClassesLast) {
513
+ let specialRows = result.filter(d => d.special === true)
514
+ let otherRows = result.filter(d => !d.special)
515
+ result = [...otherRows, ...specialRows]
516
+ }
517
+
508
518
  return result
509
519
  }
510
520
 
@@ -772,7 +782,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
772
782
 
773
783
  if (hash) filters.fromHash = hash
774
784
 
775
- obj?.filters.forEach(({ columnName, label, labels, queryParameter, orderedValues, active, values, type }, idx) => {
785
+ obj?.filters.forEach(({ columnName, label, labels, queryParameter, orderedValues, active, values, type, showDropdown }, idx) => {
776
786
  let newFilter = runtimeFilters[idx]
777
787
 
778
788
  const sortAsc = (a, b) => {
@@ -818,6 +828,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
818
828
  handleSorting(newFilter)
819
829
  newFilter.active = active ?? values[0] // Default to first found value
820
830
  newFilter.filterStyle = obj.filters[idx].filterStyle ? obj.filters[idx].filterStyle : 'dropdown'
831
+ newFilter.showDropdown = showDropdown
821
832
 
822
833
  filters.push(newFilter)
823
834
  })
@@ -959,11 +970,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
959
970
  }
960
971
 
961
972
  // this is passed DOWN into the various components
962
- // then they do a lookup based on the bin number as index into here (TT)
973
+ // then they do a lookup based on the bin number as index into here
963
974
  const applyLegendToRow = rowObj => {
964
975
  try {
965
976
  if (!rowObj) throw new Error('COVE: No rowObj in applyLegendToRow')
966
- // Navigation map
977
+ // Navigation mapchanged
967
978
  if ('navigation' === state.general.type) {
968
979
  let mapColorPalette = colorPalettes[state.color] || colorPalettes['bluegreenreverse']
969
980
  return generateColorsArray(mapColorPalette[3])
@@ -975,7 +986,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
975
986
  let idx = legendMemo.current.get(hash)
976
987
  if (runtimeLegend[idx]?.disabled) return false
977
988
 
978
- // DEV-784 changed to use bin prop to get color instead of idx
989
+ // changed to use bin prop to get color instead of idx
979
990
  // bc we re-order legend when showSpecialClassesLast is checked
980
991
  let legendBinColor = runtimeLegend.find(o => o.bin === idx)?.color
981
992
  return generateColorsArray(legendBinColor, runtimeLegend[idx]?.special)
@@ -1153,7 +1164,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
1153
1164
  if (true === Object.keys(dict).includes(value)) {
1154
1165
  value = dict[value]
1155
1166
  }
1156
- return titleCase(value)
1167
+
1168
+ // if you get here and it's 2 letters then DONT titleCase state abbreviations like "AL"
1169
+ if (value.length === 2) {
1170
+ return value
1171
+ } else {
1172
+ return titleCase(value)
1173
+ }
1157
1174
  }
1158
1175
 
1159
1176
  const navigationHandler = urlString => {
@@ -1373,7 +1390,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
1373
1390
  }
1374
1391
 
1375
1392
  validateFipsCodeLength(newState)
1376
- setState(newState)
1393
+
1394
+ // add ability to rename state properties over time.
1395
+ const processedConfig = { ...(await coveUpdateWorker(newState)) }
1396
+
1397
+ setState(processedConfig)
1377
1398
  setLoading(false)
1378
1399
  }
1379
1400
 
@@ -1690,10 +1711,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
1690
1711
 
1691
1712
  {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
1692
1713
 
1693
- <CoveMediaControls.Section classes={['download-buttons']}>
1694
- {state.general.showDownloadImgButton && <CoveMediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
1695
- {state.general.showDownloadPdfButton && <CoveMediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
1696
- </CoveMediaControls.Section>
1714
+ <MediaControls.Section classes={['download-buttons']}>
1715
+ {state.general.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
1716
+ {state.general.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
1717
+ </MediaControls.Section>
1697
1718
 
1698
1719
  {state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading && (
1699
1720
  <DataTable
@@ -1704,6 +1725,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
1704
1725
  headerColor={general.headerColor}
1705
1726
  columns={state.columns}
1706
1727
  showDownloadButton={general.showDownloadButton}
1728
+ showFullGeoNameInCSV={table.showFullGeoNameInCSV}
1707
1729
  runtimeLegend={runtimeLegend}
1708
1730
  runtimeData={runtimeData}
1709
1731
  displayDataAsText={displayDataAsText}
package/src/components/CountyMap.jsx CHANGED
@@ -44,9 +44,6 @@ states.forEach(state => {
44
44
  countyIndecies[state.id] = [minIndex, maxIndex]
45
45
  })
46
46
 
47
- // CREATE STATE LINES
48
- const projection = geoAlbersUsaTerritories()
49
-
50
47
  // Ensures county map is only rerendered when it needs to (when one of the variables below is updated)
51
48
  function CountyMapChecks(prevState, nextState) {
52
49
  const equalNumberOptIn = prevState.state.general.equalNumberOptIn && nextState.state.general.equalNumberOptIn
@@ -62,6 +59,9 @@ function CountyMapChecks(prevState, nextState) {
62
59
  const CountyMap = props => {
63
60
  const { state, runtimeLegend, applyTooltipsToGeo, data, geoClickHandler, applyLegendToRow, displayGeoName, containerEl, handleMapAriaLabels } = props
64
61
 
62
+ // CREATE STATE LINES
63
+ const projection = geoAlbersUsaTerritories()
64
+
65
65
  const [focus, setFocus] = useState({})
66
66
 
67
67
  const pathGenerator = geoPath().projection(geoAlbersUsaTerritories())
@@ -160,7 +160,7 @@ const CountyMap = props => {
160
160
  if (isNaN(currentTooltipIndex) || !geoContains(mapData[currentTooltipIndex], pointCoordinates)) {
161
161
  const context = canvas.getContext('2d')
162
162
  const path = geoPath(projection, context)
163
- if (!isNaN(currentTooltipIndex)) {
163
+ if (!isNaN(currentTooltipIndex) && applyLegendToRow(data[mapData[currentTooltipIndex].id])) {
164
164
  context.fillStyle = applyLegendToRow(data[mapData[currentTooltipIndex].id])[0]
165
165
  context.strokeStyle = geoStrokeColor
166
166
  context.lineWidth = lineWidth
@@ -193,13 +193,16 @@ const CountyMap = props => {
193
193
 
194
194
  // If the hovered county is found, show the tooltip for that county, otherwise hide the tooltip
195
195
  if (county && data[county.id]) {
196
- context.fillStyle = applyLegendToRow(data[county.id])[1]
197
- context.strokeStyle = geoStrokeColor
198
- context.lineWidth = lineWidth
199
- context.beginPath()
200
- path(mapData[countyIndex])
201
- context.fill()
202
- context.stroke()
196
+ if (applyLegendToRow(data[county.id])) {
197
+ context.globalAlpha = 1
198
+ context.fillStyle = applyLegendToRow(data[county.id])[1]
199
+ context.strokeStyle = geoStrokeColor
200
+ context.lineWidth = lineWidth
201
+ context.beginPath()
202
+ path(mapData[countyIndex])
203
+ context.fill()
204
+ context.stroke()
205
+ }
203
206
 
204
207
  tooltipRef.current.style.display = 'block'
205
208
  tooltipRef.current.style.top = e.clientY + 'px'
package/src/components/DataTable.jsx CHANGED
@@ -6,7 +6,7 @@ import Icon from '@cdc/core/components/ui/Icon'
6
6
 
7
7
  import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
8
8
  import LegendCircle from '@cdc/core/components/LegendCircle'
9
- import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
9
+ import MediaControls from '@cdc/core/components/MediaControls'
10
10
 
11
11
  import Loading from '@cdc/core/components/Loading'
12
12
 
@@ -131,7 +131,7 @@ const DataTable = props => {
131
131
 
132
132
  const DownloadButton = memo(() => {
133
133
  let csvData
134
- if (state.general.type === 'bubble') {
134
+ if (state.general.type === 'bubble' || !state.table.showFullGeoNameInCSV) {
135
135
  // Just Unparse
136
136
  csvData = Papa.unparse(rawData)
137
137
  } else if (state.general.geoType !== 'us-county' || state.general.type === 'us-geocode') {
@@ -157,7 +157,7 @@ const DataTable = props => {
157
157
  Download Data (CSV)
158
158
  </a>
159
159
  )
160
- }, [rawData])
160
+ }, [rawData, state.table])
161
161
 
162
162
  // Change accessibility label depending on expanded status
163
163
  useEffect(() => {
@@ -188,10 +188,10 @@ const DataTable = props => {
188
188
 
189
189
  return (
190
190
  <ErrorBoundary component='DataTable'>
191
- <CoveMediaControls.Section classes={['download-links']}>
192
- <CoveMediaControls.Link config={state} />
191
+ <MediaControls.Section classes={['download-links']}>
192
+ <MediaControls.Link config={state} />
193
193
  {state.general.showDownloadButton && <DownloadButton />}
194
- </CoveMediaControls.Section>
194
+ </MediaControls.Section>
195
195
  <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
196
196
  <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
197
197
  Skip Navigation or Skip to Content