@cdc/map 4.22.10-alpha.1 → 4.22.11

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 (47) hide show
  1. package/dist/cdcmap.js +10 -10
  2. package/examples/private/atsdr.json +19 -29
  3. package/examples/private/atsdr_new.json +1 -1
  4. package/examples/private/bubble.json +282 -284
  5. package/examples/private/city-state.json +427 -427
  6. package/examples/private/city-state2.json +433 -433
  7. package/examples/private/cty-issue.json +42765 -42768
  8. package/examples/private/default-usa.json +2 -5
  9. package/examples/private/default-world-data.json +1443 -1443
  10. package/examples/private/default.json +965 -965
  11. package/examples/private/diff.json +226 -0
  12. package/examples/private/filters.json +1 -0
  13. package/examples/private/legend-issue.json +3271 -1
  14. package/examples/private/map-issue.json +166 -0
  15. package/examples/private/map-rounding-error.json +42756 -42759
  16. package/examples/private/mdx.json +209 -209
  17. package/examples/private/monkeypox.json +375 -375
  18. package/examples/private/regions.json +51 -51
  19. package/examples/private/wcmsrd-13881-data.json +2856 -2856
  20. package/examples/private/wcmsrd-13881.json +5818 -5822
  21. package/examples/private/wcmsrd-14492-data.json +291 -291
  22. package/examples/private/wcmsrd-14492.json +103 -113
  23. package/examples/private/wcmsrd-test.json +264 -267
  24. package/examples/private/world.json +1579 -1579
  25. package/examples/private/worldmap.json +1489 -1489
  26. package/package.json +3 -3
  27. package/src/CdcMap.js +231 -315
  28. package/src/components/BubbleList.js +199 -240
  29. package/src/components/CityList.js +50 -96
  30. package/src/components/CountyMap.js +511 -600
  31. package/src/components/DataTable.js +218 -253
  32. package/src/components/EditorPanel.js +2338 -2551
  33. package/src/components/Geo.js +4 -14
  34. package/src/components/Modal.js +13 -23
  35. package/src/components/NavigationMenu.js +43 -39
  36. package/src/components/Sidebar.js +83 -93
  37. package/src/components/SingleStateMap.js +95 -151
  38. package/src/components/UsaMap.js +165 -214
  39. package/src/components/UsaRegionMap.js +122 -160
  40. package/src/components/WorldMap.js +96 -179
  41. package/src/components/ZoomableGroup.js +6 -26
  42. package/src/data/initial-state.js +1 -0
  43. package/src/hooks/useActiveElement.js +13 -13
  44. package/src/hooks/useColorPalette.ts +66 -74
  45. package/src/hooks/useZoomPan.js +22 -23
  46. package/src/index.html +1 -2
  47. package/src/scss/sidebar.scss +22 -0
package/src/hooks/useZoomPan.js CHANGED
@@ -1,17 +1,11 @@
1
-
2
- import { useEffect, useRef, useState } from "react"
3
- import {
4
- zoom as d3Zoom,
5
- zoomIdentity as d3ZoomIdentity,
6
- } from "d3-zoom"
7
- import {
8
- select as d3Select,
9
- } from "d3-selection"
1
+ import { useEffect, useRef, useState } from 'react'
2
+ import { zoom as d3Zoom, zoomIdentity as d3ZoomIdentity } from 'd3-zoom'
3
+ import { select as d3Select } from 'd3-selection'
10
4
 
11
5
  function getCoords(w, h, t) {
12
- const xOffset = (w * t.k - w) / 2
13
- const yOffset = (h * t.k - h) / 2
14
- return [w / 2 - (xOffset + t.x) / t.k, h / 2 - (yOffset + t.y) / t.k]
6
+ const xOffset = (w * t.k - w) / 2
7
+ const yOffset = (h * t.k - h) / 2
8
+ return [w / 2 - (xOffset + t.x) / t.k, h / 2 - (yOffset + t.y) / t.k]
15
9
  }
16
10
 
17
11
  export default function useZoomPan({
@@ -20,14 +14,16 @@ export default function useZoomPan({
20
14
  onMoveStart,
21
15
  onMoveEnd,
22
16
  onMove,
23
- translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]],
17
+ translateExtent = [
18
+ [-Infinity, -Infinity],
19
+ [Infinity, Infinity]
20
+ ],
24
21
  scaleExtent = [1, 8],
25
22
  zoom = 1,
26
23
  width,
27
24
  height,
28
25
  projection
29
26
  }) {
30
-
31
27
  const [lon, lat] = center
32
28
  const [position, setPosition] = useState({ x: 0, y: 0, k: 1 })
33
29
  const lastPosition = useRef({ x: 0, y: 0, k: 1 })
@@ -47,15 +43,15 @@ export default function useZoomPan({
47
43
  if (!onMoveStart || bypassEvents.current) return
48
44
  onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Event.transform)), zoom: d3Event.transform.k }, d3Event)
49
45
  }
50
-
46
+
51
47
  function handleZoom(d3Event) {
52
48
  if (bypassEvents.current) return
53
- const {transform, sourceEvent} = d3Event
49
+ const { transform, sourceEvent } = d3Event
54
50
  setPosition({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent })
55
51
  if (!onMove) return
56
52
  onMove({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent }, d3Event)
57
53
  }
58
-
54
+
59
55
  function handleZoomEnd(d3Event) {
60
56
  if (bypassEvents.current) {
61
57
  bypassEvents.current = false
@@ -77,10 +73,13 @@ export default function useZoomPan({
77
73
  const zoom = d3Zoom()
78
74
  .filter(filterFunc)
79
75
  .scaleExtent([minZoom, maxZoom])
80
- .translateExtent([[a1, a2], [b1, b2]])
81
- .on("start", handleZoomStart)
82
- .on("zoom", handleZoom)
83
- .on("end", handleZoomEnd)
76
+ .translateExtent([
77
+ [a1, a2],
78
+ [b1, b2]
79
+ ])
80
+ .on('start', handleZoomStart)
81
+ .on('zoom', handleZoom)
82
+ .on('end', handleZoomEnd)
84
83
 
85
84
  zoomRef.current = zoom
86
85
  svg.call(zoom)
@@ -105,6 +104,6 @@ export default function useZoomPan({
105
104
  return {
106
105
  mapRef,
107
106
  position,
108
- transformString: `translate(${position.x} ${position.y}) scale(${position.k})`,
107
+ transformString: `translate(${position.x} ${position.y}) scale(${position.k})`
109
108
  }
110
- }
109
+ }
package/src/index.html CHANGED
@@ -14,13 +14,12 @@
14
14
  </head>
15
15
  <body>
16
16
  <!-- DEFAULT EXAMPLES -->
17
- <!-- <div class="react-container react-container--maps" data-config="/examples/default-county.json"></div> -->
17
+ <div class="react-container react-container--maps" data-config="/examples/default-county.json"></div>
18
18
  <!-- <div class="react-container react-container--maps" data-config="/examples/default-geocode.json"></div> -->
19
19
  <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div> -->
20
20
  <!-- <div class="react-container react-container--maps" data-config="/examples/default-world.json"></div> -->
21
21
  <!-- <div class="react-container react-container--maps" data-config="/examples/bubble-us.json"></div/> -->
22
22
  <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-world.json"></div>-->
23
- <div class="react-container react-container--maps" data-config="/examples/default-single-state.json"></div>
24
23
 
25
24
  <!-- TP4 EXAMPLES -->
26
25
  <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
package/src/scss/sidebar.scss CHANGED
@@ -109,6 +109,28 @@ aside {
109
109
  }
110
110
  }
111
111
  }
112
+
113
+ &.bottom.single-row {
114
+ width: 100%;
115
+ .legend-section ul {
116
+ flex-direction: row;
117
+ align-items: baseline;
118
+ justify-content:flex-start;
119
+ flex-wrap: wrap;
120
+ li {
121
+ justify-items: center;
122
+ line-break:loose;
123
+ align-items: center;
124
+ width: auto;
125
+ padding-right: 1em;
126
+ padding-bottom: 1em;
127
+ display: inline-block;
128
+ & > span {
129
+ margin: 0 !important;
130
+ }
131
+ }
132
+ }
133
+ };
112
134
 
113
135
  @include breakpointClass(sm) {
114
136
  .legend-section ul {