@cdc/map 4.25.3 → 4.25.5-1

package/src/_stories/CdcMap.stories.tsx

@@ -14,6 +14,7 @@ type Story = StoryObj<typeof CdcMap>
 
 export const Equal_Interval_Map: Story = {
   args: {
+    isEditor: true,
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/page-elements/equal-interval-map.json'
   }
 }
@@ -26,6 +27,7 @@ export const Equal_Number_Opt_In: Story = {
 
 export const Equal_Number_Map: Story = {
   args: {
+    isEditor: true,
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/page-elements/equal-number-map.json'
   }
 }
@@ -137,7 +139,8 @@ export const Custom_Color_Distributions_Without_Special_Classes: Story = {
 
 export const Standard_Color_Distributions_With_Special_Classes: Story = {
   args: {
-    config: exampleCityStateStandardColors
+    config: exampleCityStateStandardColors,
+    isEditor: true
   }
 }
 

package/src/_stories/UsaMap.NoData.stories.tsx

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import CdcMap from '../CdcMap'
+import CdcMapComponent from '../CdcMapComponent'
 import cityStateConfig from './_mock/example-city-state.json'
 import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
 
-const meta: Meta<typeof CdcMap> = {
+const meta: Meta<typeof CdcMapComponent> = {
   title: 'Components/Templates/Map',
-  component: CdcMap
+  component: CdcMapComponent
 }
 
-type Story = StoryObj<typeof CdcMap>
+type Story = StoryObj<typeof CdcMapComponent>
 
 export const USA_Map_No_Data: Story = {
   args: {

package/{examples/private/default-patterns.json → src/_stories/_mock/legends/legend-tests.json}

@@ -1,5 +1,4 @@
 {
-  "annotations": [],
   "general": {
     "title": "Example Data Map with Cities",
     "subtext": "*: Lorem ipsum; NA: Lorem ipsum.",
@@ -20,7 +19,7 @@
     "displayStateLabels": false,
     "fullBorder": false,
     "palette": {
-      "isReversed": true
+      "isReversed": false
     },
     "allowMapZoom": true,
     "hideGeoColumnInTooltip": false,
@@ -30,15 +29,10 @@
       "stateName": "Alabama"
     },
     "showDownloadImgButton": false,
-    "showDownloadPdfButton": false,
-    "territoriesAlwaysShow": false,
-    "geoLabelOverride": "",
-    "convertFipsCodes": true,
-    "noStateFoundMessage": "Map Unavailable",
-    "annotationDropdownText": "Annotations"
+    "showDownloadPdfButton": false
   },
   "type": "map",
-  "color": "yellowpurplereverse",
+  "color": "yelloworangered",
   "columns": {
     "geo": {
       "dataTable": true,
@@ -52,8 +46,7 @@
       "name": "Rate",
       "prefix": "",
       "suffix": "",
-      "tooltip": false,
-      "roundToPlace": 0
+      "tooltip": false
     },
     "navigate": {
       "dataTable": false,
@@ -101,49 +94,47 @@
     "singleColumn": false,
     "dynamicDescription": false,
     "descriptions": {},
-    "singleRow": false,
-    "showSpecialClassesLast": false,
-    "verticalSorted": false,
-    "style": "circles",
-    "subStyle": "linear blocks",
-    "tickRotation": "",
-    "singleColumnLegend": false,
-    "hideBorder": false
+    "singleRow": false
+  },
+  "map": {
+    "layers": [
+      {
+        "name": "Layer One",
+        "url": "./examples/testing-layer.json",
+        "namespace": "cove",
+        "fill": "blue",
+        "stroke": "orange",
+        "strokeWidth": "5"
+      },
+      {
+        "name": "Layer Two",
+        "url": "./examples/testing-layer-2.json",
+        "namespace": "cove",
+        "fill": "blue",
+        "stroke": "orange",
+        "strokeWidth": "5"
+      }
+    ]
   },
   "filters": [],
-  "table": {
-    "showDownloadUrl": false,
-    "showDataTableLink": true,
-    "wrapColumns": false,
-    "label": "Data Table",
-    "expanded": true,
-    "limitHeight": false,
-    "height": "",
-    "caption": "",
-    "showFullGeoNameInCSV": false,
-    "forceDisplay": true,
-    "download": true,
-    "indexLabel": "",
-    "showDownloadLinkBelow": true
+  "dataTable": {
+    "title": "Data Table",
+    "forceDisplay": true
   },
   "tooltips": {
     "appearanceType": "hover",
     "linkLabel": "Learn More",
-    "capitalizeLabels": true,
-    "opacity": 90
+    "capitalizeLabels": true
   },
   "runtime": {
-    "editorErrorMessage": ""
+    "editorErrorMessage": []
   },
   "visual": {
     "cityStyle": "pin",
     "minBubbleSize": 1,
     "maxBubbleSize": 20,
     "extraBubbleBorder": false,
-    "showBubbleZeros": false,
-    "geoCodeCircleSize": 2,
-    "cityStyleLabel": "",
-    "additionalCityStyles": []
+    "showBubbleZeros": false
   },
   "mapPosition": {
     "coordinates": [
@@ -152,42 +143,6 @@
     ],
     "zoom": 1
   },
-  "map": {
-    "layers": [],
-    "patterns": [
-      {
-        "dataKey": "Location",
-        "pattern": "circles",
-        "contrastCheck": true,
-        "dataValue": "School",
-        "color": "red"
-      }
-    ]
-  },
-  "hexMap": {
-    "type": "",
-    "shapeGroups": [
-      {
-        "legendTitle": "",
-        "legendDescription": "",
-        "items": [
-          {
-            "key": "",
-            "shape": "Arrow Up",
-            "column": "",
-            "operator": "=",
-            "value": ""
-          }
-        ]
-      }
-    ]
-  },
-  "filterBehavior": "Filter Change",
-  "filterIntro": "",
-  "dataTable": {
-    "title": "Data Table",
-    "forceDisplay": true
-  },
   "sharing": {
     "enabled": false,
     "dataHost": "wcms-wp.cdc.gov",
@@ -197,25 +152,13 @@
   "data": [
     {
       "STATE": "AL",
-      "Rate": 1000,
-      "Location": "Home",
-      "URL": "https://www.cdc.gov/"
-    },
-    {
-      "STATE": "Great Plains Tribal Leaders Health Board",
-      "Rate": 1000,
-      "Location": "Home",
-      "URL": "https://www.cdc.gov/"
-    },
-    {
-      "STATE": "Montana American Indian Women’s Health Coalition",
-      "Rate": 1000,
+      "Rate": 10,
       "Location": "Home",
       "URL": "https://www.cdc.gov/"
     },
     {
       "STATE": "AK",
-      "Rate": 1200,
+      "Rate": 12,
       "Location": "Vehicle",
       "URL": "https://www.cdc.gov/"
     },
@@ -573,42 +516,6 @@
       "Location": "Vehicle",
       "URL": "https://www.cdc.gov/"
     },
-    {
-      "STATE": "Grand Rapids, MICHIGAN",
-      "Rate": 14,
-      "Location": "Vehicle",
-      "URL": "https://www.cdc.gov/"
-    },
-    {
-      "STATE": "Salem, OReGON",
-      "Rate": 14,
-      "Location": "Vehicle",
-      "URL": "https://www.cdc.gov/"
-    },
-    {
-      "STATE": "Round Rock, TEXAS",
-      "Rate": 14,
-      "Location": "Vehicle",
-      "URL": "https://www.cdc.gov/"
-    },
-    {
-      "STATE": "PROVO, UT",
-      "Rate": 14,
-      "Location": "Vehicle",
-      "URL": "https://www.cdc.gov/"
-    },
-    {
-      "STATE": "SALUDA, VIRGINIA",
-      "Rate": 14,
-      "Location": "Vehicle",
-      "URL": "https://www.cdc.gov/"
-    },
-    {
-      "STATE": "ELLENSBURG, WA",
-      "Rate": 14,
-      "Location": "Vehicle",
-      "URL": "https://www.cdc.gov/"
-    },
     {
       "STATE": "Atlanta",
       "Rate": 12,
@@ -724,7 +631,7 @@
       "URL": "https://www.cdc.gov/"
     },
     {
-      "STATE": "Great Plains Tribal Leaders Health Board",
+      "STATE": "Great Plains Tribal Chairmen's Health Board",
       "Rate": 18,
       "Location": "Vehicle",
       "URL": "https://www.cdc.gov/"
@@ -861,7 +768,5 @@
       "Location": "Vehicle",
       "URL": "https://www.cdc.gov/"
     }
-  ],
-  "filterStyle": "Filter Changes",
-  "version": "4.24.11"
-}
+  ]
+}

package/src/cdcMapComponent.styles.css

@@ -0,0 +1,9 @@
+.map-container {
+  &.full-border {
+    border: #c2c2c2 1px solid;
+  }
+}
+
+header + .map-container.full-border {
+  border-top: 0; /* When they have a header, don't add a border top */
+}

package/src/components/Annotation/Annotation.Draggable.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState, useRef } from 'react'
+import React, { useContext, useState } from 'react'
 
 // visx
 import { HtmlLabel, CircleSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
@@ -10,53 +10,56 @@ import './Annotation.Draggable.styles.css'
 import ConfigContext from '../../context'
 import { MapContext } from '../../types/MapContext'
 
-const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
+type AnnotationsProps = {
+  onDragStateChange: (state: boolean) => void
+}
+
+const Annotations: React.FC<AnnotationsProps> = ({ onDragStateChange }) => {
   const [draggingItems, setDraggingItems] = useState([])
   const {
-    state: config,
-    setState: updateConfig,
+    config,
+    setConfig,
     isDraggingAnnotation,
     isEditor,
     dimensions
   } = useContext<MapContext>(ConfigContext)
   const [width, height] = dimensions
   const { annotations } = config
-  const prevDimensions = useRef(dimensions)
   const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
 
   return (
     annotations &&
     annotations.map((annotation, index) => {
+      const { marker, x, y, dx, dy, edit, connectionType } = annotation
+
       return (
         <>
           <Drag
             key={`annotation--${index}`}
             width={width}
             height={height}
-            x={annotation.x} // subject x
-            y={annotation.y} // subject y
+            x={x}
+            y={y} // subject y
             onDragStart={() => {
               setDraggingItems(raise(annotations, index))
             }}
           >
-            {({ dragStart, dragEnd, dragMove, isDragging, x, y, dx, dy }) => {
+            {({ dragStart, dragEnd, dragMove }) => {
               return (
                 <>
                   <AnnotationComponent
-                    dx={annotation.dx} // label position
-                    dy={annotation.dy} // label postion
-                    x={annotation.x}
-                    y={annotation.y}
-                    canEditLabel={annotation.edit.label || false}
-                    canEditSubject={annotation.edit.subject || false}
+                    dx={dx} // label position
+                    dy={dy} // label position
+                    x={x}
+                    y={y}
+                    canEditLabel={edit.label || false}
+                    canEditSubject={edit.subject || false}
                     labelDragHandleProps={{ r: 15, stroke: isDraggingAnnotation ? 'red' : 'var(--primary)' }}
                     subjectDragHandleProps={{ r: 15, stroke: isDraggingAnnotation ? 'red' : 'var(--primary)' }}
                     onDragEnd={props => {
                       onDragStateChange(false)
                       const updatedAnnotations = annotations.map((annotation, idx) => {
                         if (idx === index) {
-                          const nearestDatum = annotation
-
                           return {
                             ...annotation,
                             x: props.x,
@@ -68,7 +71,7 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
                         return annotation
                       })
 
-                      updateConfig({
+                      setConfig({
                         ...config,
                         annotations: updatedAnnotations
                       })
@@ -95,7 +98,7 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
                         }}
                         role='presentation'
                         // ! IMPORTANT: Workaround for 508
-                        // - HTML needs to be set from the editor and we need a wrapper with the tabIndex
+                        // - HTML needs to be set from the editor, and we need a wrapper with the tabIndex
                         // - TabIndex is only supposed to be used on interactive elements. This is a workaround.
                         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                         tabIndex={0}
@@ -104,24 +107,22 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
                       />
                     </HtmlLabel>
 
-                    {annotation.connectionType === 'line' && (
+                    {connectionType === 'line' && (
                       <Connector type='line' pathProps={{ markerStart: 'url(#marker-start)' }} />
                     )}
 
-                    {annotation.connectionType === 'elbow' && (
+                    {connectionType === 'elbow' && (
                       <Connector type='elbow' pathProps={{ markerStart: 'url(#marker-start)' }} />
                     )}
 
                     {/* MARKERS */}
-                    {annotation.marker === 'circle' && (
-                      <CircleSubject className='circle-subject' stroke={'black'} radius={8} />
-                    )}
-                    {annotation.marker === 'arrow' && (
+                    {marker === 'circle' && <CircleSubject className='circle-subject' stroke={'black'} radius={8} />}
+                    {marker === 'arrow' && (
                       <MarkerArrow
                         fill='black'
                         id='marker-start'
-                        x={annotation.x}
-                        y={annotation.dy}
+                        x={x}
+                        y={dy}
                         stroke='#333'
                         markerWidth={10}
                         size={10}

package/src/components/Annotation/AnnotationDropdown.tsx

@@ -2,16 +2,15 @@ import React, { useContext, useState } from 'react'
 import ConfigContext from '../../context'
 import './AnnotationDropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 import AnnotationList from './AnnotationList'
+import { MapContext } from '../../types/MapContext'
 
 const AnnotationDropdown = () => {
-  const { state: config, isEditor, currentViewport: viewport } = useContext(ConfigContext)
+  const { config, currentViewport: viewport } = useContext<MapContext>(ConfigContext)
   const [expanded, setExpanded] = useState(false)
 
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${appFontSize}px`
-
-  const annotations = config?.annotations || []
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${APP_FONT_SIZE}px`
 
   const limitHeight = {
     maxHeight: config.table.limitHeight && `${config.table.height}px`,
@@ -49,7 +48,7 @@ const AnnotationDropdown = () => {
           }}
           tabIndex={0}
           onKeyDown={e => {
-            if (e.keyCode === 13) {
+            if (e.key === 'Enter') {
               setExpanded(!expanded)
             }
           }}