@cdc/map 4.25.8 → 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 (84) hide show
  1. package/.claude/settings.local.json +30 -0
  2. package/dist/cdcmap.js +54263 -52600
  3. package/examples/private/c.json +290 -0
  4. package/examples/private/canvas-city-hover.json +787 -0
  5. package/examples/private/d.json +345 -0
  6. package/examples/private/g.json +1 -0
  7. package/examples/private/h.json +105911 -0
  8. package/examples/private/measles-data.json +378 -0
  9. package/examples/private/measles.json +211 -0
  10. package/examples/private/north-dakota.json +1132 -0
  11. package/examples/private/state-with-pattern.json +883 -0
  12. package/index.html +35 -34
  13. package/package.json +26 -5
  14. package/src/CdcMap.tsx +23 -8
  15. package/src/CdcMapComponent.tsx +215 -309
  16. package/src/_stories/CdcMap.Filters.stories.tsx +2 -2
  17. package/src/_stories/CdcMap.Legend.Gradient.stories.tsx +3 -3
  18. package/src/_stories/CdcMap.Legend.stories.tsx +7 -4
  19. package/src/_stories/CdcMap.Patterns.stories.tsx +2 -2
  20. package/src/_stories/CdcMap.Table.stories.tsx +2 -2
  21. package/src/_stories/CdcMap.stories.tsx +15 -5
  22. package/src/_stories/GoogleMap.stories.tsx +2 -2
  23. package/src/_stories/UsaMap.NoData.stories.tsx +2 -2
  24. package/src/_stories/_mock/equal-number.json +1109 -0
  25. package/src/_stories/_mock/us-bubble-cities.json +306 -0
  26. package/src/components/BubbleList.tsx +16 -12
  27. package/src/components/CityList.tsx +85 -107
  28. package/src/components/DataTable.tsx +37 -9
  29. package/src/components/EditorPanel/components/EditorPanel.tsx +177 -165
  30. package/src/components/EditorPanel/components/HexShapeSettings.tsx +3 -2
  31. package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx +7 -5
  32. package/src/components/Geo.tsx +2 -0
  33. package/src/components/Legend/components/Legend.tsx +109 -73
  34. package/src/components/Legend/components/LegendGroup/Legend.Group.tsx +10 -7
  35. package/src/components/MapContainer.tsx +52 -0
  36. package/src/components/MapControls.tsx +44 -0
  37. package/src/components/NavigationMenu.tsx +11 -2
  38. package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx +24 -7
  39. package/src/components/UsaMap/components/UsaMap.County.tsx +111 -37
  40. package/src/components/UsaMap/components/UsaMap.Region.tsx +23 -5
  41. package/src/components/UsaMap/components/UsaMap.SingleState.tsx +6 -6
  42. package/src/components/UsaMap/components/UsaMap.State.tsx +28 -10
  43. package/src/components/UsaMap/helpers/map.ts +2 -2
  44. package/src/components/WorldMap/WorldMap.tsx +113 -25
  45. package/src/components/ZoomControls.tsx +6 -9
  46. package/src/context/LegendMemoContext.tsx +30 -0
  47. package/src/context.ts +1 -40
  48. package/src/data/initial-state.js +143 -130
  49. package/src/data/supported-geos.js +17 -2
  50. package/src/helpers/applyColorToLegend.ts +116 -20
  51. package/src/helpers/applyLegendToRow.ts +10 -6
  52. package/src/helpers/componentHelpers.ts +8 -0
  53. package/src/helpers/constants.ts +12 -0
  54. package/src/helpers/dataTableHelpers.ts +6 -0
  55. package/src/helpers/displayGeoName.ts +1 -1
  56. package/src/helpers/generateRuntimeLegend.ts +44 -8
  57. package/src/helpers/generateRuntimeLegendHash.ts +4 -2
  58. package/src/helpers/getColumnNames.ts +1 -1
  59. package/src/helpers/getPatternForRow.ts +36 -0
  60. package/src/helpers/getStatesPicked.ts +8 -5
  61. package/src/helpers/index.ts +11 -3
  62. package/src/helpers/isLegendItemDisabled.ts +16 -0
  63. package/src/helpers/mapObserverHelpers.ts +40 -0
  64. package/src/helpers/resetLegendToggles.ts +3 -2
  65. package/src/helpers/toggleLegendActive.ts +6 -11
  66. package/src/helpers/urlDataHelpers.ts +70 -0
  67. package/src/hooks/useGeoClickHandler.ts +35 -1
  68. package/src/hooks/useLegendMemo.ts +17 -0
  69. package/src/hooks/useMapLayers.tsx +5 -4
  70. package/src/hooks/useStateZoom.tsx +25 -6
  71. package/src/hooks/useTooltip.ts +1 -2
  72. package/src/index.jsx +0 -2
  73. package/src/store/map.reducer.ts +17 -6
  74. package/src/test/CdcMap.test.jsx +11 -0
  75. package/src/types/MapConfig.ts +23 -14
  76. package/src/types/MapContext.ts +0 -7
  77. package/src/types/runtimeLegend.ts +17 -1
  78. package/vite.config.js +2 -7
  79. package/vitest.config.ts +16 -0
  80. package/src/coreStyles_map.scss +0 -3
  81. package/src/helpers/colorDistributions.ts +0 -12
  82. package/src/helpers/generateColorsArray.ts +0 -14
  83. package/src/helpers/tests/generateColorsArray.test.ts +0 -18
  84. package/src/helpers/tests/generateRuntimeLegendHash.test.ts +0 -11
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
- }
11
3
 
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" />
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
+ <style type="text/css">
8
+ body {
9
+ margin: 0;
10
+ border-top: none !important;
11
+ }
17
12
 
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>
13
+ .cdc-map-outer-container {
14
+ min-height: 100vh;
15
+ }
16
+ </style>
17
+ <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
30
18
 
31
- <body>
32
- <!-- DEFAULT EXAMPLES -->
33
- <div class="react-container" data-config="/examples/default-world.json"></div>
19
+ <!-- This is temporary and for testing until Nunito/900 is added to TP -->
20
+ <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap" rel="stylesheet" />
21
+ <style type="text/css">
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>
34
30
 
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>
31
+ <body>
32
+ <!-- DEFAULT EXAMPLES -->
33
+ <div class="react-container" data-config="/examples/example-city-state.json"></div>
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>
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,5 +43,6 @@
43
43
  console.log('Cove has loaded, initializing map...');
44
44
  });
45
45
  </script> -->
46
- </body>
47
- </html>
46
+ </body>
47
+
48
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/map",
3
- "version": "4.25.8",
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.8",
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": "e369994230b5e3facff224e1d89d5937528ac5a0"
69
+ "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
49
70
  }
package/src/CdcMap.tsx CHANGED
@@ -5,11 +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 _ from 'lodash'
11
+ import _, { get } from 'lodash'
12
+ import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
12
13
  import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
14
+ import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
13
15
 
14
16
  type CdcMapProps = {
15
17
  config: MapConfig
@@ -35,6 +37,7 @@ const CdcMap: React.FC<CdcMapProps> = ({
35
37
  }) => {
36
38
  const editorContext = useContext(EditorContext)
37
39
  const [config, _setConfig] = useState(editorsConfig ?? null)
40
+ const [mapReadyEventRan, setMapReadyEventRan] = useState(false)
38
41
 
39
42
  const setConfig = newConfig => {
40
43
  _setConfig(newConfig)
@@ -107,7 +110,7 @@ const CdcMap: React.FC<CdcMapProps> = ({
107
110
  }
108
111
 
109
112
  const init = async () => {
110
- let _newConfig = _.cloneDeep(config ?? initialState)
113
+ let _newConfig = cloneConfig(config ?? initialState)
111
114
 
112
115
  if (configUrl) {
113
116
  _newConfig = await fetchRemoteData(configUrl)
@@ -117,11 +120,6 @@ const CdcMap: React.FC<CdcMapProps> = ({
117
120
  }
118
121
  }
119
122
 
120
- useEffect(() => {
121
- init()
122
- publishAnalyticsEvent('map_loaded', 'load', interactionLabel, 'map')
123
- }, [])
124
-
125
123
  useEffect(() => {
126
124
  init()
127
125
  }, [configUrl])
@@ -130,6 +128,23 @@ const CdcMap: React.FC<CdcMapProps> = ({
130
128
  setConfig(editorsConfig)
131
129
  }, [editorsConfig])
132
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
+
133
148
  if (loading) return null
134
149
 
135
150
  return (