@cdc/map 4.25.7 → 4.25.10

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 (99) hide show
  1. package/.claude/settings.local.json +30 -0
  2. package/CLAUDE.local.md +0 -0
  3. package/dist/cdcmap.js +54785 -53159
  4. package/examples/private/c.json +290 -0
  5. package/examples/private/canvas-city-hover.json +787 -0
  6. package/examples/private/d.json +345 -0
  7. package/examples/private/filter-map.json +909 -0
  8. package/examples/private/g.json +1 -0
  9. package/examples/private/h.json +105911 -0
  10. package/examples/private/measles-data.json +378 -0
  11. package/examples/private/measles.json +211 -0
  12. package/examples/private/north-dakota.json +1132 -0
  13. package/examples/private/rsv-data.json +532 -0
  14. package/examples/private/state-with-pattern.json +883 -0
  15. package/examples/private/test.json +222 -640
  16. package/index.html +1 -1
  17. package/package.json +26 -5
  18. package/src/CdcMap.tsx +28 -8
  19. package/src/CdcMapComponent.tsx +230 -306
  20. package/src/_stories/CdcMap.Filters.stories.tsx +2 -2
  21. package/src/_stories/CdcMap.Legend.Gradient.stories.tsx +3 -3
  22. package/src/_stories/CdcMap.Legend.stories.tsx +7 -4
  23. package/src/_stories/CdcMap.Patterns.stories.tsx +2 -2
  24. package/src/_stories/CdcMap.Table.stories.tsx +2 -2
  25. package/src/_stories/CdcMap.stories.tsx +18 -11
  26. package/src/_stories/GoogleMap.stories.tsx +2 -2
  27. package/src/_stories/UsaMap.NoData.stories.tsx +2 -2
  28. package/src/_stories/_mock/equal-number.json +1109 -0
  29. package/src/_stories/_mock/multi-state.json +21389 -0
  30. package/src/_stories/_mock/us-bubble-cities.json +306 -0
  31. package/src/components/BubbleList.tsx +16 -12
  32. package/src/components/CityList.tsx +88 -110
  33. package/src/components/DataTable.tsx +44 -12
  34. package/src/components/EditorPanel/components/EditorPanel.tsx +201 -203
  35. package/src/components/EditorPanel/components/HexShapeSettings.tsx +3 -2
  36. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +7 -5
  37. package/src/components/Geo.tsx +2 -0
  38. package/src/components/Legend/components/Legend.tsx +117 -93
  39. package/src/components/Legend/components/LegendGroup/Legend.Group.tsx +10 -7
  40. package/src/components/MapContainer.tsx +52 -0
  41. package/src/components/MapControls.tsx +44 -0
  42. package/src/components/Modal.tsx +2 -8
  43. package/src/components/NavigationMenu.tsx +13 -1
  44. package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx +24 -7
  45. package/src/components/UsaMap/components/SingleState/SingleState.StateOutput.tsx +21 -15
  46. package/src/components/UsaMap/components/TerritoriesSection.tsx +2 -2
  47. package/src/components/UsaMap/components/UsaMap.County.tsx +112 -33
  48. package/src/components/UsaMap/components/UsaMap.Region.tsx +23 -5
  49. package/src/components/UsaMap/components/UsaMap.SingleState.tsx +38 -26
  50. package/src/components/UsaMap/components/UsaMap.State.tsx +28 -10
  51. package/src/components/UsaMap/helpers/map.ts +16 -8
  52. package/src/components/WorldMap/WorldMap.tsx +116 -11
  53. package/src/components/ZoomControls.tsx +6 -9
  54. package/src/context/LegendMemoContext.tsx +30 -0
  55. package/src/context.ts +1 -39
  56. package/src/data/initial-state.js +143 -128
  57. package/src/data/supported-geos.js +202 -4
  58. package/src/helpers/addUIDs.ts +8 -8
  59. package/src/helpers/applyColorToLegend.ts +122 -45
  60. package/src/helpers/applyLegendToRow.ts +15 -13
  61. package/src/helpers/componentHelpers.ts +8 -0
  62. package/src/helpers/constants.ts +12 -0
  63. package/src/helpers/dataTableHelpers.ts +6 -0
  64. package/src/helpers/displayGeoName.ts +12 -7
  65. package/src/helpers/formatLegendLocation.ts +1 -3
  66. package/src/helpers/generateRuntimeLegend.ts +192 -340
  67. package/src/helpers/generateRuntimeLegendHash.ts +4 -2
  68. package/src/helpers/getColumnNames.ts +1 -1
  69. package/src/helpers/getPatternForRow.ts +36 -0
  70. package/src/helpers/getStatesPicked.ts +14 -0
  71. package/src/helpers/handleMapAriaLabels.ts +2 -2
  72. package/src/helpers/index.ts +11 -3
  73. package/src/helpers/isLegendItemDisabled.ts +16 -0
  74. package/src/helpers/mapObserverHelpers.ts +40 -0
  75. package/src/helpers/resetLegendToggles.ts +3 -2
  76. package/src/helpers/toggleLegendActive.ts +6 -11
  77. package/src/helpers/urlDataHelpers.ts +70 -0
  78. package/src/hooks/useGeoClickHandler.ts +35 -1
  79. package/src/hooks/useLegendMemo.ts +17 -0
  80. package/src/hooks/useMapLayers.tsx +5 -4
  81. package/src/hooks/useStateZoom.tsx +137 -88
  82. package/src/hooks/useTooltip.ts +1 -2
  83. package/src/index.jsx +6 -3
  84. package/src/scss/main.scss +23 -12
  85. package/src/store/map.actions.ts +2 -2
  86. package/src/store/map.reducer.ts +21 -10
  87. package/src/test/CdcMap.test.jsx +11 -0
  88. package/src/types/MapConfig.ts +25 -17
  89. package/src/types/MapContext.ts +2 -8
  90. package/src/types/runtimeLegend.ts +12 -10
  91. package/vite.config.js +2 -7
  92. package/vitest.config.ts +16 -0
  93. package/src/_stories/_mock/floating-point.json +0 -427
  94. package/src/coreStyles_map.scss +0 -3
  95. package/src/helpers/colorDistributions.ts +0 -12
  96. package/src/helpers/generateColorsArray.ts +0 -14
  97. package/src/helpers/getStatePicked.ts +0 -8
  98. package/src/helpers/tests/generateColorsArray.test.ts +0 -18
  99. package/src/helpers/tests/generateRuntimeLegendHash.test.ts +0 -11
package/index.html CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  <body>
32
32
  <!-- DEFAULT EXAMPLES -->
33
- <div class="react-container" data-config="/examples/default-hex.json"></div>
33
+ <div class="react-container" data-config="/examples/example-city-state.json"></div>
34
34
 
35
35
  <noscript>You need to enable JavaScript to run this app.</noscript>
36
36
  <script type="module" src="./src/index.jsx"></script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/map",
3
- "version": "4.25.7",
3
+ "version": "4.25.10",
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,25 +25,46 @@
25
25
  },
26
26
  "license": "Apache-2.0",
27
27
  "dependencies": {
28
- "@cdc/core": "^4.25.7",
28
+ "@cdc/core": "^4.25.10",
29
29
  "@googlemaps/markerclusterer": "^2.5.3",
30
30
  "@hello-pangea/dnd": "^16.2.0",
31
31
  "@react-google-maps/api": "^2.20.6",
32
+ "@rollup/plugin-dsv": "^3.0.2",
33
+ "@visx/annotation": "^3.3.0",
34
+ "@visx/drag": "^3.12.0",
32
35
  "@visx/geo": "^3.12.0",
36
+ "@visx/glyph": "3.12.0",
37
+ "@visx/marker": "3.12.0",
38
+ "@visx/pattern": "^3.0.0",
39
+ "@vitejs/plugin-react": "^4.3.4",
33
40
  "chroma": "0.0.1",
41
+ "chroma-js": "3.1.2",
34
42
  "d3": "^7.9.0",
35
43
  "d3-composite-projections": "^1.4.0",
44
+ "d3-geo": "^3.1.1",
45
+ "d3-scale": "^4.0.2",
36
46
  "d3-selection": "^3.0.0",
37
47
  "d3-zoom": "^3.0.0",
48
+ "dompurify": "^3.1.5",
49
+ "html-react-parser": "5.2.3",
38
50
  "leaflet": "^1.9.4",
51
+ "lodash": "^4.17.21",
39
52
  "lodash.debounce": "^4.0.8",
40
- "react-accessible-accordion": "^3.0.1",
53
+ "papaparse": "5.5.2",
54
+ "react-accessible-accordion": "^5.0.1",
55
+ "react-icons": "5.5.0",
56
+ "react-tooltip": "5.8.2-beta.3",
57
+ "resize-observer-polyfill": "^1.5.1",
41
58
  "topojson-client": "^3.1.0",
42
- "use-debounce": "^10.0.5"
59
+ "use-debounce": "^10.0.5",
60
+ "vite": "^4.4.11",
61
+ "vite-plugin-css-injected-by-js": "^2.4.0",
62
+ "vite-plugin-svgr": "^2.4.0",
63
+ "whatwg-fetch": "3.6.20"
43
64
  },
44
65
  "peerDependencies": {
45
66
  "react": "^18.2.0",
46
67
  "react-dom": "^18.2.0"
47
68
  },
48
- "gitHead": "9062881d50c824ee6cdd71868bafd016a5e5694d"
69
+ "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
49
70
  }
package/src/CdcMap.tsx CHANGED
@@ -5,10 +5,13 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
5
5
  import initialState from './data/initial-state'
6
6
  import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
7
7
  import { addUIDs, validateFipsCodeLength } from './helpers'
8
- import EditorContext from '@cdc/editor/src/ConfigContext'
8
+ import EditorContext from '@cdc/core/contexts/EditorContext'
9
9
  import { extractCoveData, updateVegaData } from '@cdc/core/helpers/vegaConfig'
10
10
  import { MapConfig } from './types/MapConfig'
11
- import _, { set } from 'lodash'
11
+ import _, { get } from 'lodash'
12
+ import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
13
+ import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
14
+ import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
12
15
 
13
16
  type CdcMapProps = {
14
17
  config: MapConfig
@@ -19,6 +22,7 @@ type CdcMapProps = {
19
22
  logo?: string
20
23
  navigationHandler: Function
21
24
  setConfig: Function
25
+ interactionLabel?: string
22
26
  }
23
27
 
24
28
  const CdcMap: React.FC<CdcMapProps> = ({
@@ -28,10 +32,12 @@ const CdcMap: React.FC<CdcMapProps> = ({
28
32
  configUrl,
29
33
  logo = '',
30
34
  link,
31
- config: editorsConfig
35
+ config: editorsConfig,
36
+ interactionLabel = ''
32
37
  }) => {
33
38
  const editorContext = useContext(EditorContext)
34
39
  const [config, _setConfig] = useState(editorsConfig ?? null)
40
+ const [mapReadyEventRan, setMapReadyEventRan] = useState(false)
35
41
 
36
42
  const setConfig = newConfig => {
37
43
  _setConfig(newConfig)
@@ -104,7 +110,7 @@ const CdcMap: React.FC<CdcMapProps> = ({
104
110
  }
105
111
 
106
112
  const init = async () => {
107
- let _newConfig = _.cloneDeep(config ?? initialState)
113
+ let _newConfig = cloneConfig(config ?? initialState)
108
114
 
109
115
  if (configUrl) {
110
116
  _newConfig = await fetchRemoteData(configUrl)
@@ -114,10 +120,6 @@ const CdcMap: React.FC<CdcMapProps> = ({
114
120
  }
115
121
  }
116
122
 
117
- useEffect(() => {
118
- init()
119
- }, [])
120
-
121
123
  useEffect(() => {
122
124
  init()
123
125
  }, [configUrl])
@@ -126,6 +128,23 @@ const CdcMap: React.FC<CdcMapProps> = ({
126
128
  setConfig(editorsConfig)
127
129
  }, [editorsConfig])
128
130
 
131
+ /**
132
+ * When map has a config and is not loading, publish the map_ready event.
133
+ */
134
+ useEffect(() => {
135
+ if (!loading && !_.isEmpty(config) && !mapReadyEventRan) {
136
+ publishAnalyticsEvent({
137
+ vizType: 'map',
138
+ vizSubType: getVizSubType(config),
139
+ eventType: 'map_ready',
140
+ eventAction: 'load',
141
+ eventLabel: interactionLabel,
142
+ vizTitle: getVizTitle(config)
143
+ })
144
+ setMapReadyEventRan(true)
145
+ }
146
+ }, [loading, config, mapReadyEventRan, interactionLabel])
147
+
129
148
  if (loading) return null
130
149
 
131
150
  return (
@@ -137,6 +156,7 @@ const CdcMap: React.FC<CdcMapProps> = ({
137
156
  logo={logo}
138
157
  link={link}
139
158
  loadConfig={loadConfig}
159
+ interactionLabel={interactionLabel}
140
160
  />
141
161
  )
142
162
  }