@cdc/map 4.23.2 → 4.23.4

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 (36) hide show
  1. package/dist/cdcmap.js +24661 -24191
  2. package/examples/custom-map-layers.json +764 -0
  3. package/examples/default-county.json +169 -155
  4. package/examples/default-geocode.json +744 -744
  5. package/examples/default-hex.json +3 -5
  6. package/examples/example-city-state-no-territories.json +703 -0
  7. package/examples/example-city-state.json +26 -7
  8. package/examples/example-city-stateBAD.json +744 -0
  9. package/examples/gallery/city-state.json +478 -478
  10. package/examples/testing-layer-2.json +1 -0
  11. package/examples/testing-layer.json +96 -0
  12. package/examples/world-geocode-data.json +18 -0
  13. package/examples/world-geocode.json +108 -0
  14. package/index.html +35 -29
  15. package/package.json +6 -3
  16. package/src/CdcMap.jsx +179 -111
  17. package/src/components/CityList.jsx +35 -35
  18. package/src/components/CountyMap.jsx +309 -446
  19. package/src/components/DataTable.jsx +7 -31
  20. package/src/components/EditorPanel.jsx +468 -217
  21. package/src/components/Sidebar.jsx +2 -0
  22. package/src/components/UsaMap.jsx +34 -23
  23. package/src/components/WorldMap.jsx +40 -8
  24. package/src/data/feature-test.json +73 -0
  25. package/src/data/initial-state.js +10 -3
  26. package/src/data/supported-geos.js +7 -7
  27. package/src/hooks/useMapLayers.jsx +243 -0
  28. package/src/index.jsx +4 -8
  29. package/src/scss/editor-panel.scss +97 -97
  30. package/src/scss/filters.scss +0 -2
  31. package/src/scss/main.scss +25 -26
  32. package/src/scss/map.scss +12 -0
  33. package/src/test/CdcMap.test.jsx +19 -0
  34. package/vite.config.js +3 -3
  35. package/src/components/Filters.jsx +0 -113
  36. package/src/hooks/useColorPalette.ts +0 -88
package/src/components/CityList.jsx CHANGED
@@ -45,26 +45,7 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
45
45
  return true
46
46
  }
47
47
 
48
- const styles = {
49
- fill: legendColors[0],
50
- opacity: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,
51
- stroke: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] === setSharedFilterValue ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0.4)',
52
- '&:hover': {
53
- fill: legendColors[1],
54
- outline: 0
55
- },
56
- '&:active': {
57
- fill: legendColors[2],
58
- outline: 0
59
- }
60
- }
61
-
62
- const toolTip = applyTooltipsToGeo(cityDisplayName, data[city])
63
-
64
- // If we need to add a cursor pointer
65
- if ((state.columns.navigate && geoData?.[state.columns.navigate.name] && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
66
- styles.cursor = 'pointer'
67
- }
48
+ const toolTip = applyTooltipsToGeo(cityDisplayName, isGeoCodeMap ? geoData : data[city])
68
49
 
69
50
  const radius = state.general.geoType === 'us' && !isGeoCodeMap ? 8 : isGeoCodeMap ? state.visual.geoCodeCircleSize : 4
70
51
 
@@ -72,23 +53,19 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
72
53
  fillOpacity: state.general.type === 'bubble' ? 0.4 : 1
73
54
  }
74
55
 
75
- const circle = <circle cx={0} cy={0} r={state.general.type === 'bubble' ? size(geoData[state.columns.primary.name]) : radius}
76
- title='Click for more information'
77
- onClick={() => geoClickHandler(cityDisplayName, geoData)}
78
- data-tooltip-id="tooltip"
79
- data-tooltip-html={toolTip}
80
- {...additionalProps}
81
- />
56
+ const circle = <circle cx={0} cy={0} r={state.general.type === 'bubble' ? size(geoData[state.columns.primary.name]) : radius} title='Click for more information' onClick={() => geoClickHandler(cityDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} {...additionalProps} />
82
57
 
83
58
  const pin = (
84
- <path className='marker' d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z'
85
- title='Click for more information'
86
- onClick={() => geoClickHandler(cityDisplayName, geoData)}
87
- strokeWidth={2}
88
- stroke={'black'}
89
- data-tooltip-id="tooltip"
90
- data-tooltip-html={toolTip}
91
- {...additionalProps}
59
+ <path
60
+ className='marker'
61
+ d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z'
62
+ title='Click for more information'
63
+ onClick={() => geoClickHandler(cityDisplayName, geoData)}
64
+ strokeWidth={2}
65
+ stroke={'black'}
66
+ data-tooltip-id='tooltip'
67
+ data-tooltip-html={toolTip}
68
+ {...additionalProps}
92
69
  />
93
70
  )
94
71
 
@@ -98,9 +75,32 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
98
75
  transform = `translate(${projection(supportedCities[city])})`
99
76
  }
100
77
 
78
+ let needsPointer = false
79
+
101
80
  if (isGeoCodeMap) {
102
81
  let coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
103
82
  transform = `translate(${projection(coords)})`
83
+ needsPointer = true
84
+ }
85
+
86
+ const styles = {
87
+ fill: legendColors[0],
88
+ opacity: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,
89
+ stroke: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] === setSharedFilterValue ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0.4)',
90
+ '&:hover': {
91
+ fill: legendColors[1],
92
+ outline: 0
93
+ },
94
+ '&:active': {
95
+ fill: legendColors[2],
96
+ outline: 0
97
+ },
98
+ cursor: needsPointer ? 'pointer' : 'default'
99
+ }
100
+
101
+ // If we need to add a cursor pointer
102
+ if ((state.columns.navigate && geoData?.[state.columns.navigate.name] && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
103
+ styles.cursor = 'pointer'
104
104
  }
105
105
 
106
106
  return (