@cdc/map 4.24.11 → 4.24.12

package/src/components/WorldMap/WorldMap.tsx

@@ -11,6 +11,7 @@ import CityList from '../CityList'
 import BubbleList from '../BubbleList'
 import ConfigContext from '../../context'
 import ZoomControls from '../ZoomControls'
+import { getGeoFillColor, getGeoStrokeColor } from '../../helpers/colors'
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
@@ -77,7 +78,12 @@ const WorldMap = () => {
     const geosJsx = geographies.map(({ feature: geo, path }, i) => {
       // If the geo.properties.state value is found in the data use that, otherwise fall back to geo.properties.iso
       const dataHasStateName = state.data.some(d => d[state.columns.geo.name] === geo.properties.state)
-      const geoKey = geo.properties.state && data[geo.properties.state] ? geo.properties.state : geo.properties.name ? geo.properties.name : geo.properties.iso
+      const geoKey =
+        geo.properties.state && data[geo.properties.state]
+          ? geo.properties.state
+          : geo.properties.name
+          ? geo.properties.name
+          : geo.properties.iso
 
       const additionalData = {
         name: geo.properties.name
@@ -98,33 +104,36 @@ const WorldMap = () => {
         legendColors = applyLegendToRow(geoData)
       }
 
-      const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+      const geoStrokeColor = getGeoStrokeColor(state)
+      const geoFillColor = getGeoFillColor(state)
 
       let styles: Record<string, string | Record<string, string>> = {
-        fill: '#E6E6E6',
+        fill: geoFillColor,
         cursor: 'default'
       }
 
       const strokeWidth = 0.9
 
       // If a legend applies, return it with appropriate information.
+      const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
       if (legendColors && legendColors[0] !== '#000000' && state.general.type !== 'bubble') {
-        const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
-
         styles = {
           ...styles,
-          fill: state.general.type !== 'world-geocode' ? legendColors[0] : '#E6E6E6',
+          fill: state.general.type !== 'world-geocode' ? legendColors[0] : geoFillColor,
           cursor: 'default',
           '&:hover': {
-            fill: state.general.type !== 'world-geocode' ? legendColors[1] : '#E6E6E6'
+            fill: state.general.type !== 'world-geocode' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: state.general.type !== 'world-geocode' ? legendColors[2] : '#E6E6E6'
+            fill: state.general.type !== 'world-geocode' ? legendColors[2] : geoFillColor
           }
         }
 
         // When to add pointer cursor
-        if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+        if (
+          (state.columns.navigate && geoData[state.columns.navigate.name]) ||
+          state.tooltips.appearanceType === 'click'
+        ) {
           styles.cursor = 'pointer'
         }
 
@@ -147,11 +156,38 @@ const WorldMap = () => {
       }
 
       // Default return state, just geo with no additional information
-      return <Geo additionaldata={JSON.stringify(additionalData)} geodata={JSON.stringify(geoData)} state={state} key={i + '-geo'} stroke={geoStrokeColor} strokeWidth={strokeWidth} style={styles} path={path} />
+      return (
+        <Geo
+          additionaldata={JSON.stringify(additionalData)}
+          geodata={JSON.stringify(geoData)}
+          state={state}
+          key={i + '-geo'}
+          stroke={geoStrokeColor}
+          strokeWidth={strokeWidth}
+          style={styles}
+          styles={styles}
+          path={path}
+          data-tooltip-id={`tooltip__${tooltipId}`}
+          data-tooltip-html={toolTip}
+        />
+      )
     })
 
     // Cities
-    geosJsx.push(<CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} key='cities' projection={projection} state={state} titleCase={titleCase} tooltipId={tooltipId} />)
+    geosJsx.push(
+      <CityList
+        applyLegendToRow={applyLegendToRow}
+        applyTooltipsToGeo={applyTooltipsToGeo}
+        data={data}
+        displayGeoName={displayGeoName}
+        geoClickHandler={geoClickHandler}
+        key='cities'
+        projection={projection}
+        state={state}
+        titleCase={titleCase}
+        tooltipId={tooltipId}
+      />
+    )
 
     // Bubbles
     if (state.general.type === 'bubble') {
@@ -166,7 +202,9 @@ const WorldMap = () => {
           applyTooltipsToGeo={applyTooltipsToGeo}
           displayGeoName={displayGeoName}
           tooltipId={tooltipId}
-          handleCircleClick={country => handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData)}
+          handleCircleClick={country =>
+            handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData)
+          }
         />
       )
     }
@@ -178,19 +216,42 @@ const WorldMap = () => {
     <ErrorBoundary component='WorldMap'>
       {hasZoom ? (
         <svg viewBox='0 0 880 500' role='img' aria-label={handleMapAriaLabels(state)}>
-          <rect height={500} width={880} onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} fill='white' />
-          <ZoomableGroup zoom={position.zoom} center={position.coordinates} onMoveEnd={handleMoveEnd} maxZoom={4} projection={projection} width={880} height={500}>
+          <rect
+            height={500}
+            width={880}
+            onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)}
+            fill='white'
+          />
+          <ZoomableGroup
+            zoom={position.zoom}
+            center={position.coordinates}
+            onMoveEnd={handleMoveEnd}
+            maxZoom={4}
+            projection={projection}
+            width={880}
+            height={500}
+          >
             <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       ) : (
         <svg viewBox='0 0 880 500'>
-          <ZoomableGroup zoom={1} center={position.coordinates} onMoveEnd={handleMoveEnd} maxZoom={0} projection={projection} width={880} height={500}>
+          <ZoomableGroup
+            zoom={1}
+            center={position.coordinates}
+            onMoveEnd={handleMoveEnd}
+            maxZoom={0}
+            projection={projection}
+            width={880}
+            height={500}
+          >
             <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       )}
-      {(state.general.type === 'data' || (state.general.type === 'world-geocode' && hasZoom) || (state.general.type === 'bubble' && hasZoom)) && (
+      {(state.general.type === 'data' ||
+        (state.general.type === 'world-geocode' && hasZoom) ||
+        (state.general.type === 'bubble' && hasZoom)) && (
         <ZoomControls
           // prettier-ignore
           generateRuntimeData={generateRuntimeData}

package/src/data/initial-state.js

@@ -126,5 +126,6 @@ export default {
       }
     ]
   },
-  filterBehavior: 'Filter Change'
+  filterBehavior: 'Filter Change',
+  filterIntro: ''
 }

package/src/helpers/applyColorToLegend.ts

@@ -0,0 +1,80 @@
+import colorPalettes from '@cdc/core/data/colorPalettes'
+import chroma from 'chroma-js'
+import { isOlderVersion } from '@cdc/core/helpers/ver/versionNeedsUpdate'
+import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+
+/**
+ * applyColorToLegend
+ * @param legendIdx legend item index
+ * @param config chart config
+ * @param result hash of legend items
+ * @returns
+ */
+export const applyColorToLegend = (legendIdx: number, config: ChartConfig, result = []) => {
+  try {
+    if (!config) throw new Error('Config is required')
+
+    const colorDistributions = {
+      1: [1],
+      2: [1, 3],
+      3: [1, 3, 5],
+      4: [0, 2, 4, 6],
+      5: [0, 2, 4, 6, 7],
+      6: [0, 2, 3, 4, 5, 7],
+      7: [0, 2, 3, 4, 5, 6, 7],
+      8: [0, 2, 3, 4, 5, 6, 7, 8],
+      9: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+      10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+    }
+
+    const specialClasses = config?.legend?.specialClasses
+    const { general } = config || {}
+    // Default to "bluegreen" color scheme if the passed color isn't valid
+    let mapColorPalette = config.customColors || colorPalettes[config.color] || colorPalettes['bluegreen']
+
+    // Handle Region Maps need for a 10th color
+    if (general.geoType === 'us-region' && mapColorPalette.length < 10 && mapColorPalette.length > 8) {
+      if (!general.palette.isReversed) {
+        mapColorPalette.push(chroma(mapColorPalette[8]).darken(0.75).hex())
+      } else {
+        mapColorPalette.unshift(chroma(mapColorPalette[0]).darken(0.75).hex())
+      }
+    }
+
+    let colorIdx = legendIdx - specialClasses.length
+
+    // Special Classes (No Data)
+    if (result[legendIdx].special) {
+      if (isOlderVersion(config.version, '4.24.11')) {
+        const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
+        return specialClassColors[legendIdx]
+      } else {
+        const specialClassColors = ['#A9AEB1', '#71767A']
+        return specialClassColors[legendIdx]
+      }
+    }
+
+    if (config.color.includes('qualitative')) return mapColorPalette[colorIdx]
+
+    // If the current version is newer than 4.24.10, use the color palette
+    if (!isOlderVersion(config.version, '4.24.12')) {
+      if (config.customColors) return mapColorPalette[legendIdx - specialClasses.length]
+    }
+
+    let amt = Math.max(result.length - specialClasses.length, 1)
+    let distributionArray = colorDistributions[amt]
+    let specificColor
+
+    if (distributionArray) {
+      specificColor = distributionArray[legendIdx - specialClasses.length]
+    } else if (mapColorPalette[colorIdx]) {
+      specificColor = colorIdx
+    } else {
+      specificColor = mapColorPalette.length - 1
+    }
+
+    return mapColorPalette[specificColor]
+  } catch (error) {
+    console.error('Error in applyColorToLegend', error)
+  }
+}

package/src/helpers/colors.ts

@@ -0,0 +1,23 @@
+import { MapConfig } from '../types/MapConfig'
+
+/**
+ * Returns the stroke color for geographical borders based on the provided map configuration.
+ *
+ * @param {MapConfig} config - The map configuration object.
+ * @returns {string} The stroke color for geographical borders.
+ * @see DEV-9726 Map Border Colors and Fills
+ *
+ */
+export const getGeoStrokeColor = (config: MapConfig) => {
+  const bodyStyles = getComputedStyle(document.body)
+  if (config.general.geoBorderColor === 'darkGray') {
+    return bodyStyles.getPropertyValue('--cool-gray-90')
+  } else {
+    return bodyStyles.getPropertyValue('--white')
+  }
+}
+
+export const getGeoFillColor = (config: MapConfig) => {
+  const bodyStyles = getComputedStyle(document.body)
+  return bodyStyles.getPropertyValue('--cool-gray-10')
+}

package/src/hooks/useTooltip.ts

@@ -14,7 +14,9 @@ const useTooltip = props => {
     if (geoType === 'us-county' && type !== 'us-geocode') {
       let stateFipsCode = row[config.columns.geo.name].substring(0, 2)
       const stateName = supportedStatesFipsCodes[stateFipsCode]
-      toolTipText += hideGeoColumnInTooltip ? `<strong>${stateName}</strong><br/>` : `<strong>Location:  ${stateName}</strong><br/>`
+      toolTipText += hideGeoColumnInTooltip
+        ? `<strong>${stateName}</strong><br/>`
+        : `<strong>Location:  ${stateName}</strong><br/>`
     }
     return toolTipText
   }
@@ -61,7 +63,7 @@ const useTooltip = props => {
   const handleTooltipSpecialClassText = (specialClasses, column, row, value, columnKey) => {
     if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
       for (const specialClass of specialClasses) {
-        if (column.name === specialClass.key && String(row[specialClass.key]) === specialClass.value) {
+        if (column.name === specialClass.key && String(row?.[specialClass.key]) === specialClass.value) {
           value = displayDataAsText(specialClass.label, columnKey)
           break
         }
@@ -73,7 +75,8 @@ const useTooltip = props => {
   const handleTooltipPrimaryColumn = (tooltipValue, column) => {
     const { hidePrimaryColumnInTooltip } = config.general as { hidePrimaryColumnInTooltip: boolean }
     let tooltipPrefix = column.label?.length > 0 ? column.label : ''
-    if ((column.name === config.columns.primary.name && hidePrimaryColumnInTooltip) || !tooltipPrefix) return `<li class="tooltip-body">${tooltipValue}</li>`
+    if ((column.name === config.columns.primary.name && hidePrimaryColumnInTooltip) || !tooltipPrefix)
+      return `<li class="tooltip-body">${tooltipValue}</li>`
     return `<li class="tooltip-body">${tooltipPrefix}: ${tooltipValue}</li>`
   }
 
@@ -91,7 +94,7 @@ const useTooltip = props => {
       legend: { specialClasses }
     } = config
 
-    if (tooltipEnabledMaps.includes(currentMapType) && undefined !== row) {
+    if (tooltipEnabledMaps.includes(currentMapType) && (row !== undefined || config.general.geoType === 'world')) {
       toolTipText += `<ul>`
 
       // if tooltips are allowed, loop through each column
@@ -102,7 +105,7 @@ const useTooltip = props => {
           let tooltipValue = handleTooltipSpecialClassText(specialClasses, column, row, '', columnKey)
 
           if (!tooltipValue) {
-            tooltipValue = displayDataAsText(row[column.name], columnKey)
+            tooltipValue = row ? displayDataAsText(row[column.name], columnKey) : 'No Data'
           }
 
           toolTipText += handleTooltipPrimaryColumn(tooltipValue, column)
@@ -115,7 +118,7 @@ const useTooltip = props => {
   }
 
   const buildTooltip = (row, geoName, toolTipText = '') => {
-    if (!row) return
+    if (!row && config.general.geoType !== 'world') return
 
     // Handle County Location Columns
     toolTipText += handleTooltipStateNameColumn(toolTipText, row)

package/src/scss/filters.scss

@@ -1,6 +1,5 @@
 .cdc-open-viz-module .cdc-map-inner-container .filters-section,
 .cove .cdc-map-inner-container .filters-section {
-
   &__title {
     margin: 15px 0;
   }
@@ -20,11 +19,9 @@
 
   @include breakpoint(md) {
     display: flex;
-    gap: 30px;
     flex-wrap: wrap;
   }
 
-
   label:not(:empty) {
     margin-right: 0.4em;
   }

package/src/scss/main.scss

@@ -47,7 +47,6 @@
 
 .cdc-map-inner-container {
   @import './map';
-  @import './datatable';
   flex-grow: 1;
   text-rendering: geometricPrecision;
   color: #202020;

package/src/scss/map.scss

@@ -86,25 +86,10 @@ $medium: 768px;
       transition: 0.2s all;
     }
   }
-  // make logo smaller on mobile
-  @media screen and (max-width: $small) {
-    .map-logo {
-      position: absolute;
-      bottom: 4em; // needed to align to top of Territories
-      right: 1em;
-      z-index: 3;
-      width: 50px; // make it smaller
-    }
-  }
-  // everything else but mobile
-  @media screen and (min-width: $small) {
-    .map-logo {
-      position: absolute;
-      bottom: 2em;
-      right: 1em;
-      z-index: 3;
-      width: 75px;
-    }
+  .map-logo {
+    display: block;
+    margin: 0 0 0 auto;
+    max-height: 35px;
   }
 }
 
@@ -116,61 +101,25 @@ $medium: 768px;
   }
 }
 
-// for Territories label in one col and Territory blocks wrapping in 2nd column
-.two-col {
-  display: flex;
-  margin-top: 0;
-
-  justify-content: flex-start;
-  > label {
-    margin-top: 0;
-    display: inline-block;
-  }
-}
-
 .territories-label {
   color: black;
-  margin: 2em 5px 2em 1em;
   font-size: 1.1em;
   display: block;
+  margin-top: 15px;
 }
 
 // Cities and Territories
 .territories {
-  margin: 2em 200px 2em 0;
-  font-size: 1.1em;
-  width: 100%;
-  display: block;
-  align-items: center;
-  > span {
-    margin-left: 1em;
-    margin-right: 0.5em;
-  }
+  gap: 0.5em;
   svg {
     max-width: 35px;
     min-width: 25px;
-    margin-left: 0.5em;
     transition: 0.3s all;
+
     text {
       font-size: 0.95em;
     }
   }
-
-  &--mobile {
-    @extend .territories;
-    width: 60%;
-    svg {
-      margin-bottom: 0.5em;
-    }
-  }
-
-  &--tablet {
-    @extend .territories;
-    width: 70%;
-    svg {
-      margin-bottom: 0.5em;
-    }
-  }
 }
 
 .zoom-controls {
@@ -380,5 +329,8 @@ canvas {
 }
 
 .data-table-container {
-  margin: 5px 0px !important;
+  margin: 20px 0px 0px;
+  &.download-link-above {
+    margin-top: 0;
+  }
 }

package/src/types/MapConfig.ts

@@ -1,6 +1,7 @@
 import { ComponentThemes } from '@cdc/core/types/ComponentThemes'
 import { Visualization } from '@cdc/core/types/Visualization'
 import { EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
+import { Version } from '@cdc/core/types/Version'
 
 export type MapVisualSettings = {
   /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
@@ -33,6 +34,7 @@ type PatternSelection = {
   label: string
   // size of pattern
   size: 'small' | 'medium' | 'large'
+  color: string
   contrastCheck: boolean
 }
 
@@ -163,5 +165,8 @@ export type MapConfig = Visualization & {
   }
   hexMap: HexMapSettings
   filterBehavior: string
+  filterIntro: string
   visual: MapVisualSettings
+  // version of the map
+  version: Version
 }

package/src/types/MapContext.ts

@@ -24,6 +24,7 @@ export type MapContext = {
   isEditor
   isFilterValueSupported: boolean
   loadConfig
+  logo: string
   navigationHandler
   position
   resetLegendToggles