@cdc/map 4.24.12 → 4.25.1

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

@@ -1,15 +1,9 @@
-import { useContext, useState, useEffect, useRef } from 'react'
-
-// helpers
-import { applyBandScaleOffset, handleConnectionHorizontalType, handleConnectionVerticalType, createPoints } from '@cdc/chart/src/components/Annotations/components/helpers'
+import { useContext, useState, useRef } from 'react'
 
 // visx
-import { HtmlLabel, CircleSubject, LineSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
+import { HtmlLabel, CircleSubject, 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'
@@ -18,41 +12,18 @@ 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 {
+    state: config,
+    setState: updateConfig,
+    isDraggingAnnotation,
+    isEditor,
+    dimensions
+  } = 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) => {
@@ -118,7 +89,9 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
                         style={{
                           padding: '10px',
                           borderRadius: 5, // Optional: set border radius
-                          backgroundColor: `rgba(255, 255, 255, ${annotation?.opacity ? Number(annotation?.opacity) / 100 : 1})`
+                          backgroundColor: `rgba(255, 255, 255, ${
+                            annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
+                          })`
                         }}
                         role='presentation'
                         // ! IMPORTANT: Workaround for 508
@@ -131,13 +104,31 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
                       />
                     </HtmlLabel>
 
-                    {annotation.connectionType === 'line' && <Connector type='line' pathProps={{ markerStart: 'url(#marker-start)' }} />}
+                    {annotation.connectionType === 'line' && (
+                      <Connector type='line' pathProps={{ markerStart: 'url(#marker-start)' }} />
+                    )}
 
-                    {annotation.connectionType === 'elbow' && <Connector type='elbow' 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' />}
+                    {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>
                 </>
               )

package/src/components/Annotation/AnnotationDropdown.tsx

@@ -2,14 +2,14 @@ import React, { useContext, useState } from 'react'
 import ConfigContext from '../../context'
 import './AnnotationDropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
-import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
 import AnnotationList from './AnnotationList'
 
 const AnnotationDropdown = () => {
-  const { currentViewport: viewport, state: config } = useContext(ConfigContext)
+  const { state: config, isEditor, currentViewport: viewport } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(false)
 
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[config?.fontSize]}px`
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${appFontSize}px`
 
   const annotations = config?.annotations || []
 
@@ -19,7 +19,7 @@ const AnnotationDropdown = () => {
   }
 
   const handleAccordionClassName = () => {
-    const classNames = ['data-table-heading', 'annotation__dropdown-list']
+    const classNames = ['data-table-heading', 'annotation__dropdown-list', 'p-3']
     if (!expanded) {
       classNames.push('collapsed')
     }

package/src/components/CityList.tsx

@@ -5,6 +5,7 @@ import { supportedCities } from '../data/supported-geos'
 import { scaleLinear } from 'd3-scale'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
 import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
+import { titleCase } from '../helpers/titleCase'
 
 import ConfigContext from '../context'
 import { getGeoStrokeColor } from '../helpers/colors'
@@ -15,14 +16,13 @@ const CityList = ({
   applyTooltipsToGeo,
   displayGeoName,
   applyLegendToRow,
-  titleCase,
   setSharedFilterValue,
   isFilterValueSupported,
   tooltipId,
   projection
 }) => {
   const [citiesData, setCitiesData] = useState({})
-  const { scale, state, topoData, runtimeData, position } = useContext(ConfigContext)
+  const { state, topoData, runtimeData, position } = useContext(ConfigContext)
   if (!projection) return
 
   useEffect(() => {

package/src/components/DataTable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, memo } from 'react'
+import React, { useEffect, useState, memo, useContext } from 'react'
 
 import Papa from 'papaparse'
 import ExternalIcon from '../images/external-link.svg' // TODO: Move to Icon component
@@ -10,6 +10,8 @@ import MediaControls from '@cdc/core/components/MediaControls'
 import SkipTo from '@cdc/core/components/elements/SkipTo'
 
 import Loading from '@cdc/core/components/Loading'
+import { navigationHandler } from '../helpers/navigationHandler'
+import ConfigContext from '../context'
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = props => {
@@ -26,18 +28,15 @@ const DataTable = props => {
     displayDataAsText,
     applyLegendToRow,
     displayGeoName,
-    navigationHandler,
-    viewport,
     formatLegendLocation,
     tabbingId,
     setFilteredCountryCode
   } = props
 
+  const { currentViewport: viewport } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(expandDataTable)
   const [sortBy, setSortBy] = useState({ column: 'geo', asc: false })
-
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
-
   const fileName = `${mapTitle || 'data-table'}.csv`
 
   // Catch all sorting method used on load by default but also on user click
@@ -118,14 +117,14 @@ const DataTable = props => {
     if (columns.navigate && row[columns.navigate.name]) {
       markup = (
         <span
-          onClick={() => navigationHandler(row[columns.navigate.name])}
+          onClick={() => navigationHandler(state.general.navigationTarget, row[columns.navigate.name])}
           className='table-link'
           title='Click for more information (Opens in a new window)'
           role='link'
           tabIndex='0'
           onKeyDown={e => {
             if (e.keyCode === 13) {
-              navigationHandler(row[columns.navigate.name])
+              navigationHandler(state.general.navigationTarget, row[columns.navigate.name])
             }
           }}
         >
@@ -192,7 +191,7 @@ const DataTable = props => {
 
   const TableMediaControls = ({ belowTable }) => {
     return (
-      <MediaControls.Section classes={['download-links'] + (belowTable ? 'below-table' : '')}>
+      <MediaControls.Section classes={['download-links']}>
         <MediaControls.Link config={state} />
         {state.general.showDownloadButton && <DownloadButton />}
       </MediaControls.Section>
@@ -345,7 +344,7 @@ const DataTable = props => {
                             </>
                           )
                         } else {
-                          cellValue = displayDataAsText(runtimeData[row][state.columns[column].name], column)
+                          cellValue = displayDataAsText(runtimeData[row][state.columns[column].name], column, state)
                         }
 
                         return (