@cdc/map 4.24.5 → 4.24.9

package/src/components/Annotation/AnnotationDropdown.tsx

@@ -0,0 +1,70 @@
+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 AnnotationList from './AnnotationList'
+
+const AnnotationDropdown = () => {
+  const { currentViewport: viewport, state: config } = useContext(ConfigContext)
+  const [expanded, setExpanded] = useState(false)
+
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[config?.fontSize]}px`
+
+  const annotations = config?.annotations || []
+
+  const limitHeight = {
+    maxHeight: config.table.limitHeight && `${config.table.height}px`,
+    OverflowY: 'scroll'
+  }
+
+  const handleAccordionClassName = () => {
+    const classNames = ['data-table-heading', 'annotation__dropdown-list']
+    if (!expanded) {
+      classNames.push('collapsed')
+    }
+
+    return classNames.join(' ')
+  }
+
+  const handleSectionClasses = () => {
+    const classes = [`data-table-container`, viewport, `d-block`, `d-lg-none`]
+
+    if (config.general.showAnnotationDropdown) {
+      classes.push('d-lg-block')
+      classes.splice(classes.indexOf('d-lg-none'), 1)
+    }
+    return classes.join(' ')
+  }
+
+  return (
+    <>
+      <section className={handleSectionClasses()}>
+        <div
+          style={{ fontSize: titleFontSize }}
+          role='button'
+          className={handleAccordionClassName()}
+          onClick={() => {
+            setExpanded(!expanded)
+          }}
+          tabIndex={0}
+          onKeyDown={e => {
+            if (e.keyCode === 13) {
+              setExpanded(!expanded)
+            }
+          }}
+        >
+          <Icon display={expanded ? 'minus' : 'plus'} base />
+          {config.general.annotationDropdownText === '' ? 'Annotations' : config?.general?.annotationDropdownText}
+        </div>
+        {expanded && (
+          <div className='table-container annotation-dropdown__panel' style={limitHeight}>
+            <AnnotationList useBootstrapVisibilityClasses={false} />
+          </div>
+        )}
+      </section>
+    </>
+  )
+}
+
+export default AnnotationDropdown

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

@@ -0,0 +1,45 @@
+.cdc-open-viz-module {
+  .annotation__title-circle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    padding: 8px;
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    line-height: 1.5rem;
+
+    border: 2px solid #666;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .annotation__title-wrapper {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  .annotation__title-wrapper .annotation__title-text {
+    margin-left: 5px;
+    font-size: 16px;
+  }
+
+  .annotation__subtext {
+    font-size: 12px;
+  }
+
+  .annotation-list {
+    list-style: none;
+  }
+
+  .annotation-list li {
+    margin-top: 5px;
+  }
+
+  .cove-component__content {
+    container-type: inline-size;
+    container-name: content;
+  }
+}

package/src/components/Annotation/AnnotationList.tsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react'
+import ConfigContext from './../../context'
+import './AnnotationList.styles.css'
+import DOMPurify from 'dompurify'
+
+type AnnotationListProps = {
+  useBootstrapVisibilityClasses?: boolean
+}
+
+const AnnotationList: React.FC<AnnotationListProps> = ({ useBootstrapVisibilityClasses = true }) => {
+  const { state: config } = useContext(ConfigContext)
+  const annotations = config.annotations || []
+
+  const ulClasses = () => {
+    const classes = ['annotation-list']
+    if (useBootstrapVisibilityClasses) {
+      classes.push('d-block', 'd-md-none')
+    }
+    return classes.join(' ')
+  }
+
+  const annotationListItems = annotations.map((annotation, annotationIndex) => {
+    const text = annotation.text || ''
+
+    // sanitize the text for setting dangerouslySetInnerHTML
+    const sanitizedData = () => ({
+      __html: DOMPurify.sanitize(text)
+    })
+    return (
+      <li key={`annotation-li-item__annotationIndex`}>
+        <div className='annotation__title-wrapper'>
+          <div className='annotation__title-circle'>{annotationIndex + 1}</div>
+          <p className='annotation__subtext' dangerouslySetInnerHTML={sanitizedData()} />
+        </div>
+      </li>
+    )
+  })
+
+  return <ul className={ulClasses()}>{annotationListItems}</ul>
+}
+
+export default AnnotationList

package/src/components/Annotation/index.tsx

@@ -0,0 +1,11 @@
+import Draggable from './Annotation.Draggable'
+import AnnotationDropdown from './AnnotationDropdown'
+import AnnotationList from './AnnotationList'
+
+const Annotation = {
+  Draggable,
+  Dropdown: AnnotationDropdown,
+  List: AnnotationList
+}
+
+export default Annotation

package/src/components/{BubbleList.jsx → BubbleList.tsx}

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react'
 import { scaleLinear } from 'd3-scale'
 import { countryCoordinates } from '../data/country-coordinates'
 import stateCoordinates from '../data/state-coordinates'
-import ConfigContext from './../../src/context'
+import ConfigContext from '../context'
 
 export const BubbleList = ({ data: dataImport, state, projection, applyLegendToRow, applyTooltipsToGeo, handleCircleClick, runtimeData, displayGeoName }) => {
   const maxDataValue = Math.max(...dataImport.map(d => d[state.columns.primary.name]))

package/src/components/{CityList.jsx → CityList.tsx}

@@ -1,12 +1,17 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useContext } from 'react'
 
 import { jsx } from '@emotion/react'
 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'
 
-const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported, tooltipId }) => {
+import ConfigContext from '../context'
+
+const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, titleCase, setSharedFilterValue, isFilterValueSupported, tooltipId, projection }) => {
   const [citiesData, setCitiesData] = useState({})
+  const { scale, state, topoData, runtimeData, position } = useContext(ConfigContext)
+  if (!projection) return
 
   useEffect(() => {
     const citiesDictionary = {}
@@ -91,6 +96,27 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
       needsPointer = true
     }
 
+    if (geoData?.[state.columns.longitude.name] && geoData?.[state.columns.latitude.name] && state.general.geoType === 'single-state') {
+      const statePicked = getFilterControllingStatePicked(state, runtimeData)
+      const _statePickedData = topoData?.states?.find(s => s.properties.name === statePicked)
+      // SVG ITEMS
+      const WIDTH = 880
+      const HEIGHT = 500
+      const PADDING = 50
+
+      const newProjection = projection.fitExtent(
+        [
+          [PADDING, PADDING],
+          [WIDTH - PADDING, HEIGHT - PADDING]
+        ],
+        _statePickedData
+      )
+      let coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
+      console.log('COORDINATES', coords)
+      transform = `translate(${newProjection(coords)}) scale(${state.visual.geoCodeCircleSize / (position.zoom > 1 ? position.zoom : 1)})`
+      needsPointer = true
+    }
+
     if (!transform) {
       return
     }

package/src/components/{DataTable.jsx → DataTable.tsx}

@@ -5,7 +5,7 @@ import ExternalIcon from '../images/external-link.svg' // TODO: Move to Icon com
 import Icon from '@cdc/core/components/ui/Icon'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
 import MediaControls from '@cdc/core/components/MediaControls'
 import SkipTo from '@cdc/core/components/elements/SkipTo'
 
@@ -274,7 +274,7 @@ const DataTable = props => {
 
                           cellValue = (
                             <>
-                              <LegendCircle fill={legendColor[0]} />
+                              <LegendShape fill={legendColor[0]} />
                               {labelValue}
                             </>
                           )