@cdc/map 4.24.5 → 4.24.9

package/src/_stories/CdcMap.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import CdcMap from '../CdcMap'
+import EqualNumberOptInExample from './_mock/DEV-7286.json'
+import SingleStateWithFilters from './_mock/DEV-8942.json'
 
 const meta: Meta<typeof CdcMap> = {
   title: 'Components/Templates/Map',
@@ -14,6 +16,12 @@ export const Equal_Interval_Map: Story = {
   }
 }
 
+export const Equal_Number_Opt_In: Story = {
+  args: {
+    config: EqualNumberOptInExample
+  }
+}
+
 export const Equal_Number_Map: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/page-elements/equal-number-map.json'
@@ -84,4 +92,10 @@ export const Geocode: Story = {
   }
 }
 
+export const Single_State_With_Filters: Story = {
+  args: {
+    config: SingleStateWithFilters
+  }
+}
+
 export default meta

package/src/_stories/_mock/DEV-7286.json

@@ -0,0 +1,165 @@
+{
+  "annotations": [],
+  "general": {
+    "geoType": "us-county",
+    "type": "data",
+    "geoBorderColor": "darkGray",
+    "headerColor": "theme-blue",
+    "title": "",
+    "showTitle": true,
+    "showSidebar": true,
+    "showDownloadButton": true,
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "territoriesLabel": "Territories",
+    "territoriesAlwaysShow": false,
+    "language": "en",
+    "geoLabelOverride": "",
+    "hasRegions": false,
+    "fullBorder": false,
+    "convertFipsCodes": true,
+    "palette": {
+      "isReversed": false
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "statePicked": {
+      "fipsCode": "01",
+      "stateName": "Alabama"
+    },
+    "expandDataTable": false,
+    "equalNumberOptIn": true
+  },
+  "type": "map",
+  "color": "pinkpurple",
+  "columns": {
+    "geo": {
+      "name": "FIPS Codes",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "",
+      "name": "Percent Vaccinated",
+      "label": "",
+      "roundToPlace": 2
+    },
+    "navigate": {
+      "name": ""
+    },
+    "latitude": {
+      "name": ""
+    },
+    "longitude": {
+      "name": ""
+    }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": false,
+    "singleRow": false,
+    "verticalSorted": false,
+    "showSpecialClassesLast": false,
+    "dynamicDescription": false,
+    "type": "equalnumber",
+    "numberOfItems": 3,
+    "position": "side",
+    "title": "Legend"
+  },
+  "filters": [],
+  "table": {
+    "wrapColumns": false,
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": ""
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "runtime": {
+    "editorErrorMessage": []
+  },
+  "visual": {
+    "minBubbleSize": 1,
+    "maxBubbleSize": 20,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "cityStyleLabel": "",
+    "showBubbleZeros": false,
+    "additionalCityStyles": [],
+    "geoCodeCircleSize": 8
+  },
+  "mapPosition": {
+    "coordinates": [
+      0,
+      30
+    ],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": [
+      {
+        "legendTitle": "",
+        "legendDescription": "",
+        "items": [
+          {
+            "key": "",
+            "shape": "Arrow Up",
+            "column": "",
+            "operator": "=",
+            "value": ""
+          }
+        ]
+      }
+    ]
+  },
+  "filterBehavior": "Filter Change",
+  "datasets": {},
+  "data": [
+    {
+      "FIPS Codes": "02013",
+      "County": "Aleutians East Borough",
+      "Public Health Jurisdiction": "AK",
+      "Percent Vaccinated": 99.99,
+      "Vaccination Coverage Group": "70% or More"
+    },
+    {
+      "FIPS Codes": "02016",
+      "County": "Aleutians West Census Area",
+      "Public Health Jurisdiction": "AK",
+      "Percent Vaccinated": 89.74,
+      "Vaccination Coverage Group": "70% or More"
+    }
+  ],
+  "dataFileName": "02-map-valid-county-special-values.csv",
+  "dataFileSourceType": "file",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "version": "4.24.4"
+}

package/src/_stories/_mock/DEV-8942.json

@@ -0,0 +1,270 @@
+{
+  "annotations": [],
+  "general": {
+    "title": "Default County Map",
+    "subtext": "",
+    "territoriesLabel": "Territories",
+    "type": "map",
+    "geoType": "single-state",
+    "headerColor": "theme-blue",
+    "showSidebar": true,
+    "showTitle": true,
+    "geoBorderColor": "darkGray",
+    "showDownloadButton": true,
+    "expandDataTable": false,
+    "statePicked": {
+      "fipsCode": "06",
+      "stateName": "California"
+    },
+    "annotationDropdownText": "Annotations",
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "territoriesAlwaysShow": false,
+    "language": "en",
+    "geoLabelOverride": "Location",
+    "hasRegions": false,
+    "fullBorder": false,
+    "convertFipsCodes": true,
+    "palette": {
+      "isReversed": false
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false
+  },
+  "type": "map",
+  "color": "pinkpurple",
+  "columns": {
+    "geo": {
+      "name": "FIPS Codes",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "name": "Insured Rate",
+      "label": "Data Label",
+      "prefix": "",
+      "suffix": "%",
+      "dataTable": true,
+      "tooltip": true,
+      "roundToPlace": 0
+    },
+    "navigate": {
+      "name": "link",
+      "tooltip": false,
+      "dataTable": false
+    },
+    "latitude": {
+      "name": "Latitude"
+    },
+    "longitude": {
+      "name": "Longitude"
+    },
+    "additionalColumn1": {
+      "label": "New Column",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "State"
+    },
+    "additionalColumn2": {
+      "label": "New Column",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "Latitude"
+    },
+    "additionalColumn3": {
+      "label": "New Column",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "Longitude"
+    }
+  },
+  "legend": {
+    "numberOfItems": 3,
+    "position": "side",
+    "title": "Legend Title",
+    "description": "Legend Text",
+    "type": "equalnumber",
+    "specialClasses": [
+      {
+        "key": "Insured Rate",
+        "value": "N/A",
+        "label": "N/A"
+      }
+    ],
+    "descriptions": {},
+    "unified": false,
+    "singleColumn": false,
+    "singleRow": false,
+    "verticalSorted": false,
+    "showSpecialClassesLast": false,
+    "dynamicDescription": false
+  },
+  "filters": [
+    {
+      "order": "asc",
+      "label": "",
+      "columnName": "State",
+      "values": [
+        "California",
+        "Florida"
+      ],
+      "active": "California",
+      "filterStyle": "dropdown"
+    }
+  ],
+  "table": {
+    "wrapColumns": false,
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": ""
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "runtime": {
+    "editorErrorMessage": []
+  },
+  "visual": {
+    "minBubbleSize": 1,
+    "maxBubbleSize": 20,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "cityStyleLabel": "",
+    "showBubbleZeros": false,
+    "additionalCityStyles": [],
+    "geoCodeCircleSize": "7"
+  },
+  "mapPosition": {
+    "coordinates": [
+      0,
+      0
+    ],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": [
+      {
+        "legendTitle": "",
+        "legendDescription": "",
+        "items": [
+          {
+            "key": "",
+            "shape": "Arrow Up",
+            "column": "",
+            "operator": "=",
+            "value": ""
+          }
+        ]
+      }
+    ]
+  },
+  "filterBehavior": "Filter Change",
+  "data": [
+    {
+      "Insured Rate": 8,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "06071",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 25,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "55005",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 25,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "12103",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "Florida"
+    },
+    {
+      "Insured Rate": 25,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "32005",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "State": "California",
+      "Longitude": ""
+    },
+    {
+      "Insured Rate": 18,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "06075",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 3,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "06027",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 25,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "06029",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "",
+      "Longitude": "",
+      "State": "California"
+    },
+    {
+      "Insured Rate": 60,
+      "Coverage Status": "Insured",
+      "FIPS Codes": "Yosemite is great!",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Latitude": "37.865101",
+      "Longitude": "-119.538330",
+      "State": "California"
+    }
+  ],
+  "version": "4.24.9"
+}

package/src/components/Annotation/Annotation.Draggable.styles.css

@@ -0,0 +1,18 @@
+.cdc-open-viz-module .annotation__desktop-label {
+  display: none;
+}
+
+.cdc-open-viz-module {
+  .annotation__mobile-label-circle {
+    stroke-width: 2;
+  }
+}
+
+@container content (min-width: 700px) {
+  .cdc-open-viz-module .annotation__mobile-label {
+    display: none;
+  }
+  .cdc-open-viz-module .annotation__desktop-label {
+    display: block;
+  }
+}

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

@@ -0,0 +1,152 @@
+import { useContext, useState, useEffect, useRef } from 'react'
+
+// helpers
+import { applyBandScaleOffset, handleConnectionHorizontalType, handleConnectionVerticalType, createPoints } from '@cdc/chart/src/components/Annotations/components/helpers'
+
+// visx
+import { HtmlLabel, CircleSubject, LineSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
+import { Drag, raise } from '@visx/drag'
+import { MarkerArrow } from '@visx/marker'
+import { LinePath } from '@visx/shape'
+import * as allCurves from '@visx/curve'
+import { Annotation } from '@cdc/core/types/Annotation'
+
+// styles
+import './Annotation.Draggable.styles.css'
+import ConfigContext from '../../context'
+import { MapContext } from '../../types/MapContext'
+
+const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
+  const [draggingItems, setDraggingItems] = useState([])
+  const { state: config, dimensions, setState: updateConfig, isEditor, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const [width, height] = dimensions
+  const { annotations } = config
+  // const { colorScale } = useColorScale()
+  const prevDimensions = useRef(dimensions)
+  const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
+
+  const handleMobileXPosition = annotation => {
+    if (annotation.snapToNearestPoint) {
+      return Number(annotation.dx) + xScale(annotation.xKey) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size)
+    }
+    return Number(annotation.x) + Number(annotation.dx)
+  }
+
+  const handleMobileYPosition = annotation => {
+    if (annotation.snapToNearestPoint) {
+      return yScale(annotation.yKey) + Number(annotation.dy)
+    }
+    return Number(annotation.dy) + Number(annotation.y)
+  }
+
+  const handleTextX = annotation => {
+    if (annotation.snapToNearestPoint) {
+      return Number(annotation.dx) + Number(xScale(annotation.xKey)) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size) - 16 / 3
+    }
+    return Number(annotation.dx) + Number(annotation.x) - 16 / 3
+  }
+
+  const handleTextY = annotation => {
+    if (annotation.snapToNearestPoint) {
+      return yScale(annotation.yKey) + Number(annotation.dy) + 5
+    }
+    return Number(annotation.y) + Number(annotation.dy) + 16 / 3
+  }
+
+  return (
+    annotations &&
+    annotations.map((annotation, index) => {
+      return (
+        <>
+          <Drag
+            key={`annotation--${index}`}
+            width={width}
+            height={height}
+            x={annotation.x} // subject x
+            y={annotation.y} // subject y
+            onDragStart={() => {
+              setDraggingItems(raise(annotations, index))
+            }}
+          >
+            {({ dragStart, dragEnd, dragMove, isDragging, x, y, dx, dy }) => {
+              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}
+                    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,
+                            y: props.y,
+                            dx: props.dx,
+                            dy: props.dy
+                          }
+                        }
+                        return annotation
+                      })
+
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                    onMouseMove={dragMove}
+                    onMouseUp={dragEnd}
+                    onMouseDown={dragStart}
+                    onTouchStart={dragStart}
+                    onTouchMove={dragMove}
+                    onTouchEnd={dragEnd}
+                    anchorPosition={'auto'}
+                    onDragStart={() => {
+                      onDragStateChange(true)
+                    }}
+                  >
+                    <HtmlLabel className='' showAnchorLine={false}>
+                      <div
+                        style={{
+                          padding: '10px',
+                          borderRadius: 5, // Optional: set border radius
+                          backgroundColor: `rgba(255, 255, 255, ${annotation?.opacity ? Number(annotation?.opacity) / 100 : 1})`
+                        }}
+                        role='presentation'
+                        // ! IMPORTANT: Workaround for 508
+                        // - 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}
+                        aria-label={`Annotation text that reads: ${annotation.text}`}
+                        dangerouslySetInnerHTML={{ __html: annotation.text }}
+                      />
+                    </HtmlLabel>
+
+                    {annotation.connectionType === 'line' && <Connector type='line' pathProps={{ markerStart: 'url(#marker-start)' }} />}
+
+                    {annotation.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' && <MarkerArrow fill='black' id='marker-start' x={annotation.x} y={annotation.dy} stroke='#333' markerWidth={10} size={10} strokeWidth={1} orient='auto-start-reverse' />}
+                  </AnnotationComponent>
+                </>
+              )
+            }}
+          </Drag>
+        </>
+      )
+    })
+  )
+}
+
+export default Annotations

package/src/components/Annotation/AnnotationDropdown.styles.css

@@ -0,0 +1,14 @@
+.cdc-open-viz-module {
+  .annotation__dropdown-list {
+    border: 1px solid red;
+    list-style: none;
+  }
+
+  .annotation-dropdown__panel {
+    padding: 10px;
+  }
+
+  .data-table-heading.annotation__dropdown-list {
+    margin-top: 10px;
+  }
+}