@cdc/map 4.22.11 → 4.23.1

package/src/CdcMap.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, memo, useCallback } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
 import * as d3 from 'd3'
 
 // IE11
@@ -10,9 +10,6 @@ import ResizeObserver from 'resize-observer-polyfill'
 import ReactTooltip from 'react-tooltip'
 import chroma from 'chroma-js'
 import parse from 'html-react-parser'
-import html2pdf from 'html2pdf.js'
-import html2canvas from 'html2canvas'
-import Canvg from 'canvg'
 
 // Data
 import colorPalettes from '../../core/data/colorPalettes'
@@ -20,23 +17,18 @@ import ExternalIcon from './images/external-link.svg'
 import { supportedStates, supportedTerritories, supportedCountries, supportedCounties, supportedCities, supportedStatesFipsCodes, stateFipsToTwoDigit, supportedRegions } from './data/supported-geos'
 import initialState from './data/initial-state'
 import { countryCoordinates } from './data/country-coordinates'
+import CoveMediaControls from '@cdc/core/helpers/CoveMediaControls'
 
 // Sass
 import './scss/main.scss'
 import './scss/btn.scss'
 
-// Images
-// TODO: Move to Icon component
-import DownloadImg from './images/icon-download-img.svg'
-import DownloadPdf from './images/icon-download-pdf.svg'
-
 // Core
 import Loading from '@cdc/core/components/Loading'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import getViewport from '@cdc/core/helpers/getViewport'
 import numberFromString from '@cdc/core/helpers/numberFromString'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
-import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 
 // Child Components
 import Sidebar from './components/Sidebar'
@@ -49,6 +41,8 @@ import DataTable from './components/DataTable' // Future: Lazy
 import NavigationMenu from './components/NavigationMenu' // Future: Lazy
 import WorldMap from './components/WorldMap' // Future: Lazy
 import SingleStateMap from './components/SingleStateMap' // Future: Lazy
+import Filters from './components/Filters'
+import Context from './context'
 
 import { publish } from '@cdc/core/helpers/events'
 
@@ -106,7 +100,6 @@ const getUniqueValues = (data, columnName) => {
 }
 
 const CdcMap = ({ className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, configUrl, logo = null, setConfig, setSharedFilter, setSharedFilterValue, hostname = 'localhost:8080', link }) => {
-  const [showLoadingMessage, setShowLoadingMessage] = useState(false)
   const transform = new DataTransform()
   const [state, setState] = useState({ ...initialState })
   const [loading, setLoading] = useState(true)
@@ -120,13 +113,14 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const [position, setPosition] = useState(state.mapPosition)
   const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
   const [container, setContainer] = useState()
+  const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`) // eslint-disable-line
 
   let legendMemo = useRef(new Map())
+  let innerContainerRef = useRef()
 
   useEffect(() => {
     try {
       if (filteredCountryCode) {
-        const filteredCountryObj = runtimeData[filteredCountryCode]
         const coordinates = countryCoordinates[filteredCountryCode]
         const long = coordinates[1]
         const lat = coordinates[0]
@@ -160,13 +154,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }, [state.mapPosition, setPosition])
 
-  const setZoom = reversedCoordinates => {
-    setState({
-      ...state,
-      mapPosition: { coordinates: reversedCoordinates, zoom: 3 }
-    })
-  }
-
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let newViewport = getViewport(entry.contentRect.width)
@@ -251,7 +238,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const generateRuntimeLegend = useCallback((obj, runtimeData, hash) => {
     const newLegendMemo = new Map() // Reset memoization
     const primaryCol = obj.columns.primary.name,
-      isData = obj.general.type === 'data',
       isBubble = obj.general.type === 'bubble',
       categoricalCol = obj.columns.categorical ? obj.columns.categorical.name : undefined,
       type = obj.legend.type,
@@ -410,7 +396,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       // Apply custom sorting or regular sorting
       let configuredOrder = obj.legend.categoryValuesOrder ?? []
 
-
       if (configuredOrder.length) {
         sorted.sort((a, b) => {
           return configuredOrder.indexOf(a) - configuredOrder.indexOf(b)
@@ -558,7 +543,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
         breaks.map((item, index) => {
           const setMin = index => {
-            //debugger;
             let min = breaks[index]
 
             // if first break is a seperated zero, min is zero
@@ -809,101 +793,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }
 
-  const saveImageAs = (uri, filename) => {
-    const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/)
-    const ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/)
-    const ieEdge = navigator.userAgent.match(/Edge/g)
-    const ieVer = ie ? ie[1] : ie11 ? 11 : ieEdge ? 12 : -1
-
-    if (ieVer > -1) {
-      const fileAsBlob = new Blob([uri], {
-        type: 'image/png'
-      })
-      window.navigator.msSaveBlob(fileAsBlob, filename)
-    } else {
-      const link = document.createElement('a')
-      if (typeof link.download === 'string') {
-        link.href = uri
-        link.download = filename
-        link.onclick = e => document.body.removeChild(e.target)
-        document.body.appendChild(link)
-        link.click()
-      } else {
-        window.open(uri)
-      }
-    }
-  }
-
-  const generateMedia = (target, type) => {
-    // Convert SVG to canvas
-    const baseSvg = mapSvg.current.querySelector('.rsm-svg')
-
-    const ratio = baseSvg.getBoundingClientRect().height / baseSvg.getBoundingClientRect().width
-    const calcHeight = ratio * 1440
-    const xmlSerializer = new XMLSerializer()
-    const svgStr = xmlSerializer.serializeToString(baseSvg)
-    const options = { log: false, ignoreMouse: true }
-    const canvas = document.createElement('canvas')
-    const ctx = canvas.getContext('2d')
-    ctx.canvas.width = 1440
-    ctx.canvas.height = calcHeight
-    const canvg = Canvg.fromString(ctx, svgStr, options)
-    canvg.start()
-
-    // Generate DOM <img> from svg data
-    const generatedImage = document.createElement('img')
-    generatedImage.src = canvas.toDataURL('image/png')
-    generatedImage.style.width = '100%'
-    generatedImage.style.height = 'auto'
-
-    baseSvg.style.display = 'none' // Hide default SVG during media generation
-    baseSvg.parentNode.insertBefore(generatedImage, baseSvg.nextSibling) // Insert png generated from canvas of svg
-
-    // Construct filename with timestamp
-    const date = new Date()
-    const filename = state.general.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
-
-    switch (type) {
-      case 'image':
-        return html2canvas(target, {
-          allowTaint: true,
-          backgroundColor: '#ffffff',
-          width: 1440,
-          windowWidth: 1440,
-          scale: 1,
-          logging: false
-        })
-          .then(canvas => {
-            saveImageAs(canvas.toDataURL(), filename + '.png')
-          })
-          .then(() => {
-            generatedImage.remove() // Remove generated png
-            baseSvg.style.display = null // Re-display initial svg map
-          })
-      case 'pdf':
-        let opt = {
-          margin: 0.2,
-          filename: filename + '.pdf',
-          image: { type: 'png' },
-          html2canvas: { scale: 2, logging: false },
-          jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
-        }
-
-        html2pdf()
-          .set(opt)
-          .from(target)
-          .save()
-          .then(() => {
-            generatedImage.remove() // Remove generated png
-            baseSvg.style.display = null // Re-display initial svg map
-          })
-        break
-      default:
-        console.warn("generateMedia param 2 type must be 'image' or 'pdf'")
-        break
-    }
-  }
-
   const changeFilterActive = async (idx, activeValue) => {
     // Reset active legend toggles
     resetLegendToggles()
@@ -1066,10 +955,26 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
 
   const titleCase = string => {
-    return string
-      .split(' ')
-      .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
-      .join(' ')
+    // if hyphen found, then split, uppercase each word, and put back together
+    if (string.includes('–') || string.includes('-')) {
+      let dashSplit = string.includes('–') ? string.split('–') : string.split('-') // determine hyphen or en dash to split on
+      let splitCharacter = string.includes('–') ? '–' : '-' // print hyphen or en dash later on.
+      let frontSplit = dashSplit[0]
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+      let backSplit = dashSplit[1]
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+      return frontSplit + splitCharacter + backSplit
+    } else {
+      // just return with each word upper cased
+      return string
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+    }
   }
 
   // This resets all active legend toggles.
@@ -1102,7 +1007,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   // Attempts to find the corresponding value
   const displayGeoName = key => {
     let value = key
-
     // Map to first item in values array which is the preferred label
     if (stateKeys.includes(value)) {
       value = titleCase(supportedStates[key][0])
@@ -1240,8 +1144,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       }
 
       // handle urls with spaces in the name.
-      if (newState.dataUrl) newState.dataUrl = encodeURI(`${newState.dataUrl}?v=${cacheBustingString()}`)
-      let newData = await fetchRemoteData(newState.dataUrl)
+      if (newState.dataUrl) newState.dataUrl = encodeURI(`${newState.dataUrl}`)
+      let newData = await fetchRemoteData(newState.dataUrl, 'map')
 
       if (newData && newState.dataDescription) {
         newData = transform.autoStandardize(newData)
@@ -1356,7 +1260,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       specialClasses: state.legend.specialClasses,
       geoType: state.general.geoType,
       data: state.data,
-      ...runtimeLegend
+      ...runtimeLegend,
+      ...runtimeFilters
     })
 
     const hashData = hashObj({
@@ -1367,7 +1272,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       primary: state.columns.primary.name,
       data: state.data,
       ...runtimeFilters,
-      mapPosition: state.mapPosition
+      mapPosition: state.mapPosition,
+      ...runtimeFilters
     })
 
     // Data
@@ -1455,7 +1361,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     setPosition,
     setSharedFilterValue,
     hasZoom: state.general.allowMapZoom,
-    handleMapAriaLabels
+    handleMapAriaLabels,
+    runtimeFilters,
+    setRuntimeFilters,
+    innerContainerRef
   }
 
   if (!mapProps.data || !state.data) return <Loading />
@@ -1487,123 +1396,124 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const tabId = handleMapTabbing()
 
   return (
-    <div className={outerContainerClasses.join(' ')} ref={outerContainerRef}>
-      {isEditor && <EditorPanel isDashboard={isDashboard} state={state} setState={setState} loadConfig={loadConfig} setParentConfig={setConfig} setRuntimeFilters={setRuntimeFilters} runtimeFilters={runtimeFilters} runtimeLegend={runtimeLegend} columnsInData={Object.keys(state.data[0])} />}
-      {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
-        <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title}>
-          {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && <ReactTooltip id='tooltip' place='right' type='light' html={true} className={tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'} />}
-          {state.general.title && (
-            <header className={general.showTitle === true ? 'visible' : 'hidden'} {...(!general.showTitle || !state.general.title ? { 'aria-hidden': true } : { 'aria-hidden': false })}>
-              <div role='heading' className={'map-title ' + general.headerColor} tabIndex='0' aria-level='2'>
-                <sup>{general.superTitle}</sup>
-                <div>{parse(title)}</div>
-              </div>
-            </header>
-          )}
-
-          <div>{general.introText && <section className='introText'>{parse(general.introText)}</section>}</div>
-
-          <section
-            role='button'
-            tabIndex='0'
-            className={mapContainerClasses.join(' ')}
-            onClick={e => closeModal(e)}
-            onKeyDown={e => {
-              if (e.keyCode === 13) {
-                closeModal(e)
-              }
-            }}
-          >
-            {general.showDownloadMediaButton === true && (
-              <div className='map-downloads' data-html2canvas-ignore>
-                <div className='map-downloads__ui btn-group'>
-                  <button className='btn' title='Download Map as Image' onClick={() => generateMedia(outerContainerRef.current, 'image')}>
-                    <DownloadImg className='btn__icon' title='Download Map as Image' />
-                  </button>
-                  <button className='btn' title='Download Map as PDF' onClick={() => generateMedia(outerContainerRef.current, 'pdf')}>
-                    <DownloadPdf className='btn__icon' title='Download Map as PDF' />
-                  </button>
+    <Context.Provider value={mapProps}>
+      <div className={outerContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId}>
+        {isEditor && <EditorPanel isDashboard={isDashboard} state={state} setState={setState} loadConfig={loadConfig} setParentConfig={setConfig} setRuntimeFilters={setRuntimeFilters} runtimeFilters={runtimeFilters} runtimeLegend={runtimeLegend} columnsInData={Object.keys(state.data[0])} />}
+        {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
+          <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
+            {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && <ReactTooltip id='tooltip' place='right' type='light' html={true} className={tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'} />}
+            {state.general.title && (
+              <header className={general.showTitle === true ? 'visible' : 'hidden'} {...(!general.showTitle || !state.general.title ? { 'aria-hidden': true } : { 'aria-hidden': false })}>
+                <div role='heading' className={'map-title ' + general.headerColor} tabIndex='0' aria-level='2'>
+                  <sup>{general.superTitle}</sup>
+                  <div>{parse(title)}</div>
                 </div>
-              </div>
+              </header>
             )}
 
-            <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={tabId}>
-              Skip Over Map Container
-            </a>
-
-            <section className='geography-container outline-none' ref={mapSvg} tabIndex='0'>
-              {currentViewport && (
-                <section className='geography-container' ref={mapSvg}>
-                  {modal && <Modal type={general.type} viewport={currentViewport} applyTooltipsToGeo={applyTooltipsToGeo} applyLegendToRow={applyLegendToRow} capitalize={state.tooltips.capitalizeLabels} content={modal} />}
-                  {'single-state' === general.geoType && <SingleStateMap supportedTerritories={supportedTerritories} {...mapProps} />}
-                  {'us' === general.geoType && 'us-geocode' !== state.general.type && <UsaMap supportedTerritories={supportedTerritories} {...mapProps} />}
-                  {'us-region' === general.geoType && <UsaRegionMap supportedTerritories={supportedTerritories} {...mapProps} />}
-                  {'world' === general.geoType && <WorldMap supportedCountries={supportedCountries} {...mapProps} />}
-                  {'us-county' === general.geoType && <CountyMap supportedCountries={supportedCountries} {...mapProps} />}
-                  {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
-                </section>
+            <div>{general.introText && <section className='introText'>{parse(general.introText)}</section>}</div>
+
+            <Filters />
+
+            <div
+              role='button'
+              tabIndex='0'
+              className={mapContainerClasses.join(' ')}
+              onClick={e => closeModal(e)}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  closeModal(e)
+                }
+              }}
+            >
+              <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={tabId}>
+                Skip Over Map Container
+              </a>
+
+              <section className='geography-container outline-none' ref={mapSvg} tabIndex='0'>
+                {currentViewport && (
+                  <section className='geography-container' ref={mapSvg}>
+                    {modal && <Modal type={general.type} viewport={currentViewport} applyTooltipsToGeo={applyTooltipsToGeo} applyLegendToRow={applyLegendToRow} capitalize={state.tooltips.capitalizeLabels} content={modal} />}
+                    {'single-state' === general.geoType && <SingleStateMap supportedTerritories={supportedTerritories} {...mapProps} />}
+                    {'us' === general.geoType && 'us-geocode' !== state.general.type && <UsaMap supportedTerritories={supportedTerritories} {...mapProps} />}
+                    {'us-region' === general.geoType && <UsaRegionMap supportedTerritories={supportedTerritories} {...mapProps} />}
+                    {'world' === general.geoType && <WorldMap supportedCountries={supportedCountries} {...mapProps} />}
+                    {'us-county' === general.geoType && <CountyMap supportedCountries={supportedCountries} {...mapProps} />}
+                    {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
+                  </section>
+                )}
+              </section>
+
+              {general.showSidebar && 'navigation' !== general.type && (
+                <Sidebar
+                  viewport={currentViewport}
+                  legend={state.legend}
+                  runtimeLegend={runtimeLegend}
+                  setRuntimeLegend={setRuntimeLegend}
+                  runtimeFilters={runtimeFilters}
+                  columns={state.columns}
+                  sharing={state.sharing}
+                  prefix={state.columns.primary.prefix}
+                  suffix={state.columns.primary.suffix}
+                  setState={setState}
+                  resetLegendToggles={resetLegendToggles}
+                  changeFilterActive={changeFilterActive}
+                  setAccessibleStatus={setAccessibleStatus}
+                  displayDataAsText={displayDataAsText}
+                />
               )}
-            </section>
+            </div>
 
-            {general.showSidebar && 'navigation' !== general.type && (
-              <Sidebar
-                viewport={currentViewport}
-                legend={state.legend}
-                runtimeLegend={runtimeLegend}
-                setRuntimeLegend={setRuntimeLegend}
-                runtimeFilters={runtimeFilters}
+            {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
+
+            {link && link}
+
+            {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
+
+            <CoveMediaControls.Section classes={['download-buttons']}>
+              {state.general.showDownloadImgButton && <CoveMediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
+              {state.general.showDownloadPdfButton && <CoveMediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
+            </CoveMediaControls.Section>
+
+            {state.runtime.editorErrorMessage.length === 0 && true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading && (
+              <DataTable
+                state={state}
+                rawData={state.data}
+                navigationHandler={navigationHandler}
+                expandDataTable={general.expandDataTable}
+                headerColor={general.headerColor}
                 columns={state.columns}
-                sharing={state.sharing}
-                prefix={state.columns.primary.prefix}
-                suffix={state.columns.primary.suffix}
-                setState={setState}
-                resetLegendToggles={resetLegendToggles}
-                changeFilterActive={changeFilterActive}
-                setAccessibleStatus={setAccessibleStatus}
+                showDownloadButton={general.showDownloadButton}
+                runtimeLegend={runtimeLegend}
+                runtimeData={runtimeData}
                 displayDataAsText={displayDataAsText}
+                displayGeoName={displayGeoName}
+                applyLegendToRow={applyLegendToRow}
+                tableTitle={dataTable.title}
+                indexTitle={dataTable.indexLabel}
+                mapTitle={general.title}
+                viewport={currentViewport}
+                formatLegendLocation={formatLegendLocation}
+                setFilteredCountryCode={setFilteredCountryCode}
+                tabbingId={tabId}
+                showDownloadImgButton={state.general.showDownloadImgButton}
+                showDownloadPdfButton={state.general.showDownloadPdfButton}
+                innerContainerRef={innerContainerRef}
+                outerContainerRef={outerContainerRef}
+                imageRef={imageId}
               />
             )}
+
+            {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
           </section>
+        )}
 
-          {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
-
-          {link && link}
-
-          {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
-
-          {state.runtime.editorErrorMessage.length === 0 && true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading && (
-            <DataTable
-              state={state}
-              rawData={state.data}
-              navigationHandler={navigationHandler}
-              expandDataTable={general.expandDataTable}
-              headerColor={general.headerColor}
-              columns={state.columns}
-              showDownloadButton={general.showDownloadButton}
-              runtimeLegend={runtimeLegend}
-              runtimeData={runtimeData}
-              displayDataAsText={displayDataAsText}
-              displayGeoName={displayGeoName}
-              applyLegendToRow={applyLegendToRow}
-              tableTitle={dataTable.title}
-              indexTitle={dataTable.indexLabel}
-              mapTitle={general.title}
-              viewport={currentViewport}
-              formatLegendLocation={formatLegendLocation}
-              setFilteredCountryCode={setFilteredCountryCode}
-              tabbingId={tabId}
-            />
-          )}
-
-          {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
-        </section>
-      )}
-
-      <div aria-live='assertive' className='cdcdataviz-sr-only'>
-        {accessibleStatus}
+        <div aria-live='assertive' className='cdcdataviz-sr-only'>
+          {accessibleStatus}
+        </div>
       </div>
-    </div>
+    </Context.Provider>
   )
 }
 
-export default memo(CdcMap)
+export default CdcMap

package/src/components/BubbleList.js

@@ -16,7 +16,6 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
   if (!sortedRuntimeData) return
 
   const clickTolerance = 10
-
   // Set bubble sizes
   var size = scaleLinear().domain([hasBubblesWithZeroOnMap, maxDataValue]).range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
 
@@ -34,7 +33,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
         const legendColors = applyLegendToRow(country)
 
         let primaryKey = state.columns.primary.name
-        if ((Math.floor(Number(size(country[primaryKey]))) === 0 || country[primaryKey] === '') && !state.visual.showBubbleZeros) return
+        if ((Math.floor(Number(country[primaryKey])) === 0 || country[primaryKey] === '') && !state.visual.showBubbleZeros) return
 
         let transform = `translate(${projection([coordinates[1], coordinates[0]])})`
 
@@ -117,7 +116,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
         if (item[primaryKey] === null) item[primaryKey] = ''
 
         // Return if hiding zeros on the map
-        if ((Math.floor(Number(size(item[primaryKey]))) === 0 || item[primaryKey] === '') && !state.visual.showBubbleZeros) return
+        if ((Math.floor(Number(item[primaryKey])) === 0 || item[primaryKey] === '') && !state.visual.showBubbleZeros) return
 
         if (!stateData) return true
         let longitude = Number(stateData.Longitude)

package/src/components/CityList.js

@@ -42,7 +42,6 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
   // Cities output
   const cities = cityList.map((city, i) => {
     const geoData = isGeoCodeMap ? state.data.filter(item => city === item[state.columns.geo.name])[0] : data[city]
-
     const cityDisplayName = isGeoCodeMap ? city : titleCase(displayGeoName(city))
 
     const legendColors = isGeoCodeMap && geoData ? applyLegendToRow(geoData) : data[city] ? applyLegendToRow(data[city]) : false
@@ -72,7 +71,7 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
       styles.cursor = 'pointer'
     }
 
-    const radius = state.general.geoType === 'us' && !isGeoCodeMap ? 8 : isGeoCodeMap ? 2 : 4
+    const radius = state.general.geoType === 'us' && !isGeoCodeMap ? 8 : isGeoCodeMap ? state.visual.geoCodeCircleSize : 4
 
     const additionalProps = {
       fillOpacity: state.general.type === 'bubble' ? 0.4 : 1

package/src/components/DataTable.js

@@ -5,11 +5,36 @@ import ExternalIcon from '../images/external-link.svg' // TODO: Move to Icon com
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
+import CoveMediaControls from '@cdc/core/helpers/CoveMediaControls'
 
 import Loading from '@cdc/core/components/Loading'
 
 const DataTable = props => {
-  const { state, tableTitle, indexTitle, mapTitle, rawData, showDownloadButton, runtimeData, runtimeLegend, headerColor, expandDataTable, columns, displayDataAsText, applyLegendToRow, displayGeoName, navigationHandler, viewport, formatLegendLocation, tabbingId, setFilteredCountryCode } = props
+  const {
+    state,
+    tableTitle,
+    indexTitle,
+    mapTitle,
+    rawData,
+    showDownloadImgButton,
+    showDownloadPdfButton,
+    showDownloadButton,
+    runtimeData,
+    runtimeLegend,
+    headerColor,
+    expandDataTable,
+    columns,
+    displayDataAsText,
+    applyLegendToRow,
+    displayGeoName,
+    navigationHandler,
+    viewport,
+    formatLegendLocation,
+    tabbingId,
+    setFilteredCountryCode,
+    innerContainerRef,
+    imageRef
+  } = props
 
   const [expanded, setExpanded] = useState(expandDataTable)
 
@@ -137,7 +162,7 @@ const DataTable = props => {
     }
 
     return (
-      <a download={fileName} type='button' onClick={saveBlob} href={URL.createObjectURL(blob)} aria-label='Download this data in a CSV file format.' className={`${headerColor} btn btn-download no-border`} id={`${skipId}`} data-html2canvas-ignore role='button'>
+      <a download={fileName} type='button' onClick={saveBlob} href={URL.createObjectURL(blob)} aria-label='Download this data in a CSV file format.' className={`${headerColor} no-border`} id={`${skipId}`} data-html2canvas-ignore role='button'>
         Download Data (CSV)
       </a>
     )
@@ -255,6 +280,10 @@ const DataTable = props => {
   if (!state.data) return <Loading />
   return (
     <ErrorBoundary component='DataTable'>
+      <CoveMediaControls.Section classes={['download-links']}>
+        <CoveMediaControls.Link config={state} />
+        {state.general.showDownloadButton && <DownloadButton />}
+      </CoveMediaControls.Section>
       <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
         <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
           Skip Navigation or Skip to Content
@@ -323,7 +352,6 @@ const DataTable = props => {
             </tbody>
           </table>
         </div>
-        {showDownloadButton === true && <DownloadButton />}
       </section>
     </ErrorBoundary>
   )