@cdc/map 4.24.3 → 4.24.4

package/src/CdcMap.tsx

@@ -1,5 +1,8 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
+import React, { useState, useEffect, useRef, useCallback, useId } from 'react'
 import * as d3 from 'd3'
+import Layout from '@cdc/core/components/Layout'
+import Waiting from '@cdc/core/components/Waiting'
+import Error from './components/EditorPanel/components/Error'
 
 // IE11
 import 'whatwg-fetch'
@@ -123,6 +126,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const transform = new DataTransform()
   const [state, setState] = useState({ ...initialState })
   const [loading, setLoading] = useState(true)
+  const [displayPanel, setDisplayPanel] = useState(true)
   const [currentViewport, setCurrentViewport] = useState()
   const [runtimeFilters, setRuntimeFilters] = useState([])
   const [runtimeLegend, setRuntimeLegend] = useState([])
@@ -135,14 +139,49 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const [container, setContainer] = useState()
   const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`) // eslint-disable-line
   const [dimensions, setDimensions] = useState()
+  const [requiredColumns, setRequiredColumns] = useState(null) // Simple state so we know if we need more information before parsing the map
+
   const legendRef = useRef(null)
+  const legendId = useId()
+  const tooltipId = useId()
 
   const { changeFilterActive, handleSorting } = useFilters({ config: state, setConfig: setState })
   let legendMemo = useRef(new Map())
   let legendSpecialClassLastMemo = useRef(new Map())
   let innerContainerRef = useRef()
 
-  if (isDebug) console.log('CdcMap state=', state) // eslint-disable-line
+  if (isDebug) console.log('CdcMap state=', state) // <eslint-disable-line></eslint-disable-line>
+
+  const columnsRequiredChecker = useCallback(() => {
+    let columnList = []
+
+    // Geo is always required
+    if ('' === state.columns.geo.name) {
+      columnList.push('Geography')
+    }
+
+    // Primary is required if we're on a data map or a point map
+    if ('navigation' !== state.general.type && '' === state.columns.primary.name) {
+      columnList.push('Primary')
+    }
+
+    // Navigate is required for navigation maps
+    if ('navigation' === state.general.type && ('' === state.columns.navigate.name || undefined === state.columns.navigate)) {
+      columnList.push('Navigation')
+    }
+
+    if (('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && '' === state.columns.latitude.name) {
+      columnList.push('Latitude')
+    }
+
+    if (('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && '' === state.columns.longitude.name) {
+      columnList.push('Longitude')
+    }
+
+    if (columnList.length === 0) columnList = null
+
+    setRequiredColumns(columnList)
+  }, [state.columns, state.general.type])
 
   useEffect(() => {
     try {
@@ -1547,13 +1586,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
   if (!table.label || table.label === '') table.label = 'Data Table'
 
-  // Outer container classes
-  let outerContainerClasses = ['cdc-open-viz-module', 'cdc-map-outer-container', currentViewport]
-
-  if (className) {
-    outerContainerClasses.push(className)
-  }
-
   // Map container classes
   let mapContainerClasses = ['map-container', state.legend.position, state.general.type, state.general.geoType, 'outline-none']
 
@@ -1609,7 +1641,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     supportedTerritories,
     titleCase,
     type: general.type,
-    viewport: currentViewport
+    viewport: currentViewport,
+    tooltipId
   }
 
   if (!mapProps.data || !state.data) return <></>
@@ -1621,7 +1654,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     // 1) skip to legend
     if (general.showSidebar) {
-      tabbingID = 'legend'
+      tabbingID = legendId
     }
 
     // 2) skip to data table if it exists and not a navigation map
@@ -1649,109 +1682,112 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   return (
     <ConfigContext.Provider value={mapProps}>
-      <div className={outerContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId}>
-        {isEditor && <EditorPanel />}
-        {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
-          <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
-            {/* prettier-ignore */}
-            <Title
-              title={title}
-              superTitle={general.superTitle}
-              config={config}
-              classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${general.headerColor}`]}
-            />
-            <SkipTo skipId={tabId} skipMessage='Skip Over Map Container' />
-
-            {general.introText && <section className='introText'>{parse(general.introText)}</section>}
-
-            {/* prettier-ignore */}
-            {state?.filters?.length > 0 && <Filters config={state} setConfig={setState} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
-
-            <div
-              role='region'
-              tabIndex='0'
-              className={mapContainerClasses.join(' ')}
-              onClick={e => closeModal(e)}
-              onKeyDown={e => {
-                if (e.keyCode === 13) {
-                  closeModal(e)
-                }
-              }}
-            >
-              {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-              <section className='outline-none geography-container' ref={mapSvg} tabIndex='0' style={{ width: '100%' }}>
-                {currentViewport && (
-                  <>
-                    {modal && <Modal />}
-                    {'single-state' === geoType && <UsaMap.SingleState />}
-                    {'us' === geoType && 'us-geocode' !== state.general.type && <UsaMap.State />}
-                    {'us-region' === geoType && <UsaMap.Region />}
-                    {'us-county' === geoType && <UsaMap.County />}
-                    {'world' === geoType && <WorldMap />}
-                    {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
-                  </>
-                )}
-              </section>
-
-              {general.showSidebar && 'navigation' !== general.type && <Legend ref={legendRef} />}
-            </div>
-
-            {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
-
-            {/* Link */}
-            {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink ? tableLink : link && link}
-
-            {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
-
-            <MediaControls.Section classes={['download-buttons']}>
-              {state.general.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
-              {state.general.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
-            </MediaControls.Section>
-
-            {state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading && (
-              <DataTable
-                config={state}
-                rawData={state.data}
-                navigationHandler={navigationHandler}
-                expandDataTable={general.expandDataTable ? general.expandDataTable : table.expanded ? table.expanded : false}
-                headerColor={general.headerColor}
-                columns={state.columns}
-                showDownloadButton={general.showDownloadButton}
-                showFullGeoNameInCSV={table.showFullGeoNameInCSV}
-                runtimeLegend={runtimeLegend}
-                runtimeData={runtimeData}
-                displayDataAsText={displayDataAsText}
-                displayGeoName={displayGeoName}
-                applyLegendToRow={applyLegendToRow}
-                tableTitle={table.label}
-                indexTitle={table.indexLabel}
-                vizTitle={general.title}
-                viewport={currentViewport}
-                formatLegendLocation={formatLegendLocation}
-                setFilteredCountryCode={setFilteredCountryCode}
-                tabbingId={tabId}
-                showDownloadImgButton={state.general.showDownloadImgButton}
-                showDownloadPdfButton={state.general.showDownloadPdfButton}
-                innerContainerRef={innerContainerRef}
-                outerContainerRef={outerContainerRef}
-                imageRef={imageId}
-                isDebug={isDebug}
-                wrapColumns={table.wrapColumns}
+      <Layout.VisualizationWrapper config={state} isEditor={isEditor} ref={outerContainerRef} imageId={imageId} showEditorPanel={state.showEditorPanel}>
+        {isEditor && <EditorPanel columnsRequiredChecker={columnsRequiredChecker} />}
+        <Layout.Responsive isEditor={isEditor}>
+          {state?.runtime?.editorErrorMessage.length > 0 && <Error state={state} />}
+          {requiredColumns && <Waiting requiredColumns={requiredColumns} className={displayPanel ? `waiting` : `waiting collapsed`} />}
+          {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
+            <section className={`cove-component__content cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
+              {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
+                <ReactTooltip id={`tooltip__${tooltipId}`} float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip tooltip-test' : 'tooltip tooltip-test'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
+              )}
+              {/* prettier-ignore */}
+              <Title
+                title={title}
+                superTitle={general.superTitle}
+                config={config}
+                classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${general.headerColor}`]}
               />
-            )}
-
-            {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
-          </section>
-        )}
-
-        <div aria-live='assertive' className='cdcdataviz-sr-only'>
-          {accessibleStatus}
-        </div>
-
-        {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
-          <ReactTooltip id='tooltip' float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
-        )}
-      </div>
+              <SkipTo skipId={tabId} skipMessage='Skip Over Map Container' />
+
+              {general.introText && <section className='introText'>{parse(general.introText)}</section>}
+
+              {/* prettier-ignore */}
+              {state?.filters?.length > 0 && <Filters config={state} setConfig={setState} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
+
+              <div
+                role='region'
+                tabIndex='0'
+                className={mapContainerClasses.join(' ')}
+                onClick={e => closeModal(e)}
+                onKeyDown={e => {
+                  if (e.keyCode === 13) {
+                    closeModal(e)
+                  }
+                }}
+              >
+                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+                <section className='outline-none geography-container' ref={mapSvg} tabIndex='0' style={{ width: '100%' }}>
+                  {currentViewport && (
+                    <>
+                      {modal && <Modal />}
+                      {'single-state' === geoType && <UsaMap.SingleState />}
+                      {'us' === geoType && 'us-geocode' !== state.general.type && <UsaMap.State />}
+                      {'us-region' === geoType && <UsaMap.Region />}
+                      {'us-county' === geoType && <UsaMap.County />}
+                      {'world' === geoType && <WorldMap />}
+                      {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
+                    </>
+                  )}
+                </section>
+
+                {general.showSidebar && 'navigation' !== general.type && <Legend ref={legendRef} skipId={tabId} />}
+              </div>
+
+              {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
+
+              {/* Link */}
+              {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink ? tableLink : link && link}
+
+              {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
+
+              <MediaControls.Section classes={['download-buttons']}>
+                {state.general.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
+                {state.general.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
+              </MediaControls.Section>
+
+              {state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading && (
+                <DataTable
+                  config={state}
+                  rawData={state.data}
+                  navigationHandler={navigationHandler}
+                  expandDataTable={table.expanded}
+                  headerColor={general.headerColor}
+                  columns={state.columns}
+                  showDownloadButton={general.showDownloadButton}
+                  showFullGeoNameInCSV={table.showFullGeoNameInCSV}
+                  runtimeLegend={runtimeLegend}
+                  runtimeData={runtimeData}
+                  displayDataAsText={displayDataAsText}
+                  displayGeoName={displayGeoName}
+                  applyLegendToRow={applyLegendToRow}
+                  tableTitle={table.label}
+                  indexTitle={table.indexLabel}
+                  vizTitle={general.title}
+                  viewport={currentViewport}
+                  formatLegendLocation={formatLegendLocation}
+                  setFilteredCountryCode={setFilteredCountryCode}
+                  tabbingId={tabId}
+                  showDownloadImgButton={state.general.showDownloadImgButton}
+                  showDownloadPdfButton={state.general.showDownloadPdfButton}
+                  innerContainerRef={innerContainerRef}
+                  outerContainerRef={outerContainerRef}
+                  imageRef={imageId}
+                  isDebug={isDebug}
+                  wrapColumns={table.wrapColumns}
+                />
+              )}
+
+              {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
+            </section>
+          )}
+
+          <div aria-live='assertive' className='cdcdataviz-sr-only'>
+            {accessibleStatus}
+          </div>
+        </Layout.Responsive>
+      </Layout.VisualizationWrapper>
     </ConfigContext.Provider>
   )
 }

package/src/components/BubbleList.jsx

@@ -1,10 +1,12 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useContext } from 'react'
 import { scaleLinear } from 'd3-scale'
 import { countryCoordinates } from '../data/country-coordinates'
 import stateCoordinates from '../data/state-coordinates'
+import ConfigContext from './../../src/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]))
+  const { tooltipId } = useContext(ConfigContext)
   const hasBubblesWithZeroOnMap = state.visual.showBubbleZeros ? 0 : 1
   // sort runtime data. Smaller bubbles should appear on top.
   const sortedRuntimeData = Object.values(runtimeData).sort((a, b) => (a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1))
@@ -62,7 +64,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
               }}
               transform={transform}
               style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
-              data-tooltip-id='tooltip'
+              data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
             />
 
@@ -90,7 +92,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
                 }}
                 transform={transform}
                 style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
-                data-tooltip-id='tooltip'
+                data-tooltip-id={`tooltip__${tooltipId}`}
                 data-tooltip-html={toolTip}
               />
             )}
@@ -161,7 +163,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
               }}
               transform={transform}
               style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
-              data-tooltip-id='tooltip'
+              data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
             />
             {state.visual.extraBubbleBorder && (
@@ -189,7 +191,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
                 }}
                 transform={transform}
                 style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
-                data-tooltip-id='tooltip'
+                data-tooltip-id={`tooltip__${tooltipId}`}
                 data-tooltip-html={toolTip}
               />
             )}

package/src/components/CityList.jsx

@@ -5,7 +5,7 @@ import { supportedCities } from '../data/supported-geos'
 import { scaleLinear } from 'd3-scale'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
 
-const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported }) => {
+const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported, tooltipId }) => {
   const [citiesData, setCitiesData] = useState({})
 
   useEffect(() => {
@@ -67,7 +67,7 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
         d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z'
         title='Select for more information'
         onClick={() => geoClickHandler(cityDisplayName, geoData)}
-        data-tooltip-id='tooltip'
+        data-tooltip-id={`tooltip__${tooltipId}`}
         data-tooltip-html={toolTip}
         transform={`scale(${radius / 9})`}
         stroke={state.general.geoBorderColor === 'sameAsBackground' ? '#ffffff' : '#000000'}
@@ -97,8 +97,8 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
 
     const styles = {
       fill: legendColors[0],
-      opacity: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,
-      stroke: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] === setSharedFilterValue ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0.4)',
+      opacity: setSharedFilterValue && isFilterValueSupported && data[city] && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,
+      stroke: setSharedFilterValue && isFilterValueSupported && data[city] && data[city][state.columns.geo.name] === setSharedFilterValue ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0.4)',
       '&:hover': {
         fill: legendColors[1],
         outline: 0
@@ -119,7 +119,7 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
       onClick: () => geoClickHandler(cityDisplayName, geoData),
       size: state.general.type === 'bubble' ? size(geoData[state.columns.primary.name]) : radius * 30,
       title: 'Select for more information',
-      'data-tooltip-id': 'tooltip',
+      'data-tooltip-id': `tooltip__${tooltipId}`,
       'data-tooltip-html': toolTip,
       stroke: state.general.geoBorderColor === 'sameAsBackground' ? '#ffffff' : '#000000',
       strokeWidth: '2px',