@cdc/map 4.24.10 → 4.24.12

package/src/components/Legend/components/Legend.tsx

@@ -15,18 +15,22 @@ import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import ConfigContext from '../../../context'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
-import { type ViewportSize } from '../../../types/MapConfig'
 import { Group } from '@visx/group'
 import './index.scss'
+import { ViewportSize } from '@cdc/chart/src/types/ChartConfig'
+import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+
+const LEGEND_PADDING = 30
 
 type LegendProps = {
   skipId: string
-  currentViewport: ViewportSize
   dimensions: DimensionsType
+  containerWidthPadding: number
+  currentViewport: ViewportSize
 }
 
 const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
-  const { skipId, currentViewport, dimensions } = props
+  const { skipId, dimensions, containerWidthPadding, currentViewport } = props
 
   const {
     // prettier-ignore
@@ -42,6 +46,12 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   } = useContext(ConfigContext)
 
   const { legend } = state
+  const isLegendGradient = legend.style === 'gradient'
+  const boxDynamicallyHidden = isBelowBreakpoint('md', currentViewport)
+  const legendWrapping =
+    (legend.position === 'left' || legend.position === 'right') && isBelowBreakpoint('md', currentViewport)
+  const legendOnBottom = legend.position === 'bottom' || legendWrapping
+  const needsTopMargin = legend.hideBorder && legendOnBottom
 
   // Toggles if a legend is active and being applied to the map and data table.
   const toggleLegendActive = (i, legendLabel) => {
@@ -83,6 +93,10 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         formattedText = '0'
       }
 
+      if (entry.max === null && entry.min === null) {
+        formattedText = 'No data'
+      }
+
       let legendLabel = formattedText
 
       if (entry.hasOwnProperty('special')) {
@@ -99,13 +113,14 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     })
   }
 
-  const legendList = () => {
-    const formattedItems = getFormattedLegendItems()
+  const legendList = (patternsOnly = false) => {
+    const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
+    const patternsOnlyFont = isMobileHeightViewport(currentViewport) ? '12px' : '14px'
     let legendItems
 
     legendItems = formattedItems.map((item, idx) => {
       const handleListItemClass = () => {
-        let classes = ['legend-container__li']
+        let classes = ['legend-container__li', 'd-flex', 'align-items-center']
         if (item.disabled) classes.push('legend-container__li--disabled')
         if (item.special) classes.push('legend-container__li--special-class')
         return classes.join(' ')
@@ -126,11 +141,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           }}
           tabIndex={0}
         >
-          <LegendShape
-            shape={state.legend.style === 'boxes' ? 'square' : 'circle'}
-            viewport={viewport}
-            fill={item.color}
-          />
+          <LegendShape shape={state.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
           <span>{item.label}</span>
         </li>
       )
@@ -195,7 +206,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                   />
                 </svg>
               </span>
-              <p style={{ lineHeight: '22.4px' }}>{patternData.label || patternData.dataValue || ''}</p>
+              <p style={{ lineHeight: '22.4px', fontSize: patternsOnly ? patternsOnlyFont : '16px' }}>
+                {patternData.label || patternData.dataValue || ''}
+              </p>
             </li>
           </>
         )
@@ -204,6 +217,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
     return legendItems
   }
+  const legendListItems = legendList(isLegendGradient)
+
   const { legendClasses } = useDataVizClasses(state, viewport)
 
   const handleReset = e => {
@@ -239,13 +254,13 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   return (
     <ErrorBoundary component='Sidebar'>
-      <div className='legends'>
+      <div className={`legends ${needsTopMargin ? 'mt-1' : ''}`}>
         <aside
           id={skipId || 'legend'}
           className={legendClasses.aside.join(' ') || ''}
           role='region'
           aria-label='Legend'
-          tabIndex={0}
+          tabIndex={isLegendGradient ? -1 : 0}
           ref={ref}
         >
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
@@ -273,14 +288,17 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
             <LegendGradient
               labels={getFormattedLegendItems().map(item => item?.label) ?? []}
               colors={getFormattedLegendItems().map(item => item?.color) ?? []}
-              values={getFormattedLegendItems().map(item => item?.value) ?? []}
               dimensions={dimensions}
-              currentViewport={currentViewport}
+              parentPaddingToSubtract={
+                containerWidthPadding + (legend.hideBorder || boxDynamicallyHidden ? 0 : LEGEND_PADDING)
+              }
               config={state}
             />
-            <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
-              {state.legend.style === 'gradient' ? '' : legendList()}
-            </ul>
+            {!!legendListItems.length && (
+              <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
+                {legendListItems}
+              </ul>
+            )}
             {(state.visual.additionalCityStyles.some(c => c.label) || state.visual.cityStyleLabel) && (
               <>
                 <hr />
@@ -315,7 +333,11 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                 </div>
               </>
             )}
-            {runtimeLegend.disabledAmt > 0 && <Button onClick={handleReset}>Reset</Button>}
+            {runtimeLegend.disabledAmt > 0 && (
+              <Button className={legendClasses.resetButton.join(' ')} onClick={handleReset}>
+                Reset
+              </Button>
+            )}
           </section>
         </aside>
         {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && (

package/src/components/Legend/components/index.scss

@@ -6,7 +6,7 @@
   }
   @include breakpointClass(md) {
     .map-container.world aside.side {
-      border-top: var(--lightGray) 1px solid;
+      border-top: var(--cool-gray-10) 1px solid;
       position: absolute;
       box-shadow: rgba(0, 0, 0, 0.2) 0 10px 18px;
     }
@@ -15,10 +15,15 @@
   aside {
     background-color: #fff;
     z-index: 6;
-    border-top: var(--lightGray) 1px solid;
+    border-top: var(--cool-gray-10) 1px solid;
+
     @include breakpointClass(md) {
-      &.bottom, &.top {
-        border: var(--lightGray) 1px solid;
+      .legend-container.legend-padding {
+        padding: 15px;
+      }
+      &.bottom,
+      &.top {
+        border: var(--cool-gray-10) 1px solid;
       }
       &.side {
         z-index: 1;
@@ -29,7 +34,7 @@
         align-self: flex-start;
         z-index: 4;
         right: 1em;
-        border: var(--lightGray) 1px solid;
+        border: var(--cool-gray-10) 1px solid;
         top: 2em;
         right: 1em;
 
@@ -65,8 +70,11 @@
     }
 
     .legend-container {
-      padding: 1em;
+      --space-between-legend-items: 0.6em;
       position: relative;
+      &.legend-padding {
+        padding-top: 15px;
+      }
       .legend-container__title {
         font-size: 1.3em;
         padding-bottom: 0;
@@ -79,17 +87,7 @@
         padding-top: 1em;
       }
       .legend-container__reset-button {
-        font-size: 0.75em;
-        right: 1em;
-        text-transform: uppercase;
-        transition: 0.2s all;
-        padding: 0.2em 0.5em;
-        border: rgba(0, 0, 0, 0.2) 1px solid;
-        padding: 0.375rem;
-        &:hover {
-          text-decoration: none;
-          transition: 0.2s all;
-        }
+        margin-top: 1em;
       }
       p {
         line-height: 1.4em;
@@ -114,23 +112,21 @@
 
         &:not(.vertical-sorted, .legend-container__ul--single-column, .single-row) {
           width: 100%;
-          @include breakpoint(sm) {
-            .legend-container__li {
-              width: 50%;
-            }
-          }
         }
         .legend-container__li {
           flex-shrink: 0;
           display: inline-block;
           padding-right: 1em;
-          padding-bottom: 1em;
+          margin-bottom: var(--space-between-legend-items);
           vertical-align: middle;
           transition: 0.1s opacity;
           display: flex;
           cursor: pointer;
           white-space: wrap;
           flex-grow: 1;
+          &:last-child {
+            margin-bottom: 0;
+          }
           @include breakpoint(md) {
             white-space: nowrap;
           }
@@ -142,16 +138,17 @@
       }
       .legend-container__ul.single-row {
         width: 100%;
+        cursor: pointer;
         list-style: none;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: flex-start;
         flex-wrap: wrap;
+        row-gap: var(--space-between-legend-items);
 
         & > li {
           margin-right: 1em;
-          margin-bottom: 1em;
           white-space: wrap;
           display: flex;
           justify-content: center;
@@ -166,6 +163,9 @@
           }
         }
       }
+      .legend-container__ul.patterns-only {
+        margin-top: 10px;
+      }
     }
 
     .bottom .legend-container__ul--single-column:not(.vertical-sorted) {

package/src/components/UsaMap/components/HexIcon.tsx

@@ -30,7 +30,13 @@ const HexIcon: React.FC<HexIconProps> = props => {
     )
   }
   return (
-    <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start' key={`hex--${item.key}-${item.value}-${index}`}>
+    <Group
+      top={centroid[1] - 5}
+      left={centroid[0] - iconSize}
+      color={textColor}
+      textAnchor='start'
+      key={`hex--${item.key}-${item.value}-${index}`}
+    >
       {item.shape === 'Arrow Down' && <AiOutlineArrowDown />}
       {item.shape === 'Arrow Up' && <AiOutlineArrowUp />}
       {item.shape === 'Arrow Right' && <AiOutlineArrowRight />}

package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../../context'
 import { MapContext } from '../../../../types/MapContext'
+import { getGeoFillColor } from '../../../../helpers/colors'
 
 interface CountyOutputProps {
   counties: any[]
@@ -11,7 +12,10 @@ interface CountyOutputProps {
 }
 
 const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
-  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } = useContext<MapContext>(ConfigContext)
+  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } =
+    useContext<MapContext>(ConfigContext)
+
+  const geoFillColor = getGeoFillColor(state)
   return (
     <>
       {counties.map(county => {
@@ -50,19 +54,49 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
           }
 
           // When to add pointer cursor
-          if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'hover') {
+          if (
+            (state.columns.navigate && geoData[state.columns.navigate.name]) ||
+            state.tooltips.appearanceType === 'hover'
+          ) {
             styles.cursor = 'pointer'
           }
 
           return (
-            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`} style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
-              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            <g
+              key={`key--${county.id}`}
+              className={`county county--${geoDisplayName.split(' ').join('')} county--${
+                geoData[state.columns.geo.name]
+              }`}
+              style={styles}
+              onClick={() => geoClickHandler(geoDisplayName, geoData)}
+              data-tooltip-id={`tooltip__${tooltipId}`}
+              data-tooltip-html={toolTip}
+            >
+              <path
+                tabIndex={-1}
+                className={`county`}
+                stroke={geoStrokeColor}
+                d={countyPath}
+                strokeWidth={0.75 / scale}
+              />
             </g>
           )
         } else {
           return (
-            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')}`} style={{ fill: '#e6e6e6' }} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
-              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            <g
+              key={`key--${county.id}`}
+              className={`county county--${geoDisplayName.split(' ').join('')}`}
+              style={{ fill: geoFillColor }}
+              data-tooltip-id={`tooltip__${tooltipId}`}
+              data-tooltip-html={toolTip}
+            >
+              <path
+                tabIndex={-1}
+                className={`county`}
+                stroke={geoStrokeColor}
+                d={countyPath}
+                strokeWidth={0.75 / scale}
+              />
             </g>
           )
         }

package/src/components/UsaMap/components/SingleState/SingleState.StateOutput.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'react'
 import { mesh, Topology } from 'topojson-client'
 import ConfigContext from '../../../../context'
+import { getGeoFillColor, getGeoStrokeColor } from '../../../../helpers/colors'
 
 type StateOutputProps = {
   topoData: Topology
@@ -15,12 +16,19 @@ const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, stateT
     return s.properties.name === state.general.statePicked.stateName
   })
 
-  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 stateLines = path(mesh(topoData, geo[0]))
 
   return (
-    <g key={'single-state'} className='single-state' style={{ fill: '#E6E6E6' }} stroke={geoStrokeColor} strokeWidth={0.95 / scale}>
+    <g
+      key={'single-state'}
+      className='single-state'
+      style={{ fill: geoFillColor }}
+      stroke={geoStrokeColor}
+      strokeWidth={0.95 / scale}
+    >
       <path tabIndex={-1} className='state-path' d={stateLines} />
     </g>
   )

package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { geoCentroid, geoPath } from 'd3-geo'
+import { geoCentroid } from 'd3-geo'
 import ConfigContext from './../../../../context'
 import { MapContext } from './../../../../types/MapContext'
 import HexIcon from '../HexIcon'
@@ -31,7 +31,19 @@ const nudges = {
 
 // todo: combine hexagonLabel & geoLabel functions
 // todo: move geoLabel functions outside of components for reusability
-const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territory, territoryData, ...props }) => {
+const TerritoryHexagon = ({
+  dataTooltipHtml,
+  dataTooltipId,
+  handleShapeClick,
+  label,
+  stroke,
+  strokeWidth,
+  territory,
+  territoryData,
+  text,
+  textColor,
+  ...props
+}) => {
   const { state } = useContext<MapContext>(ConfigContext)
 
   const isHex = state.general.displayAsHex
@@ -115,7 +127,17 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
       let y = state.hexMap.type === 'shapes' ? '30%' : '50%'
       return (
         <>
-          <Text fontSize={14} x={'50%'} y={y} style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }} textAnchor='middle' verticalAnchor='middle'>
+          <Text
+            fontSize={14}
+            x={'50%'}
+            y={y}
+            style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }}
+            textAnchor='middle'
+            verticalAnchor='middle'
+            onClick={handleShapeClick}
+            data-tooltip-id={dataTooltipId}
+            data-tooltip-html={dataTooltipHtml}
+          >
             {abbr.substring(3)}
           </Text>
           {state.general.displayAsHex && state.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
@@ -127,21 +149,44 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
 
     return (
       <g>
-        <line x1={centroid[0]} y1={centroid[1]} x2={centroid[0] + dx} y2={centroid[1] + dy} stroke='rgba(0,0,0,.5)' strokeWidth={1} />
-        <text x={4} strokeWidth='0' fontSize={13} style={{ fill: '#202020' }} alignmentBaseline='middle' transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}>
+        <line
+          x1={centroid[0]}
+          y1={centroid[1]}
+          x2={centroid[0] + dx}
+          y2={centroid[1] + dy}
+          stroke='rgba(0,0,0,.5)'
+          strokeWidth={1}
+        />
+        <text
+          x={4}
+          strokeWidth='0'
+          fontSize={13}
+          style={{ fill: '#202020' }}
+          alignmentBaseline='middle'
+          transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
+          onClick={handleShapeClick}
+          data-tooltip-id={dataTooltipId}
+          data-tooltip-html={dataTooltipHtml}
+        >
           {abbr.substring(3)}
         </text>
       </g>
     )
   }
 
-  return territoryData && (
-    <svg viewBox='0 0 45 51' className='territory-wrapper--hex'>
-      <g {...props}>
-        <polygon stroke={stroke} strokeWidth={strokeWidth} points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702' />
-        {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
-      </g>
-    </svg>
+  return (
+    territoryData && (
+      <svg viewBox='-1 -1 46 53' className='territory-wrapper--hex'>
+        <g {...props} data-tooltip-html={dataTooltipHtml} data-tooltip-id={dataTooltipId} onClick={handleShapeClick}>
+          <polygon
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702'
+          />
+          {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
+        </g>
+      </svg>
+    )
   )
 }
 

package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx

@@ -2,47 +2,121 @@ import { useContext } from 'react'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import ConfigContext from './../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
-import { patternSizes } from './../../helpers/patternSizes'
+import { patternSizes } from '../../helpers/patternSizes'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { type TerritoryShape } from './TerritoryShape'
 
-const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPattern, territory, ...props }) => {
-  const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
+const TerritoryRectangle: React.FC<TerritoryShape> = ({
+  dataTooltipId,
+  dataTooltipHtml,
+  handleShapeClick,
+  hasPattern,
+  label,
+  stroke,
+  strokeWidth,
+  territory,
+  text,
+  textColor,
+  backgroundColor,
+  ...props
+}) => {
+  const { state } = useContext<MapContext>(ConfigContext)
   const { territoryData, ...otherProps } = props
+  const rectanglePath =
+    'M42,0.5 C42.8284271,0.5 43.5,1.17157288 43.5,2 L43.5,2 L43.5,26 C43.5,26.8284271 42.8284271,27.5 42,27.5 L42,27.5 L3,27.5 C2.17157288,27.5 1.5,26.8284271 1.5,26 L1.5,26 L1.5,2 C1.5,1.17157288 2.17157288,0.5 3,0.5 L3,0.5 Z'
 
   return (
-    <svg viewBox='0 0 45 28' key={territory} className={territory}>
-      <g {...otherProps} strokeLinejoin='round' tabIndex={-1}>
-        <path
-          stroke={stroke}
-          strokeWidth={strokeWidth}
-          d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
-          {...otherProps}
-        />
-        <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: textColor, strokeWidth: 1 }} className='territory-text' paintOrder='stroke'>
+    <svg viewBox='0 0 45 29' key={territory} className={territory}>
+      <g
+        {...otherProps}
+        strokeLinejoin='round'
+        tabIndex={-1}
+        onClick={handleShapeClick}
+        data-tooltip-id={dataTooltipId}
+        data-tooltip-html={dataTooltipHtml}
+      >
+        <path stroke={stroke} strokeWidth={strokeWidth} d={rectanglePath} {...otherProps} />
+        <text
+          textAnchor='middle'
+          dominantBaseline='middle'
+          x='50%'
+          y='54%'
+          fill={text}
+          style={{ stroke: 'none' }}
+          className='territory-text'
+          paintOrder='stroke'
+          onClick={handleShapeClick}
+          data-tooltip-id={dataTooltipId}
+          data-tooltip-html={dataTooltipHtml}
+        >
           {label}
         </text>
 
         {state.map.patterns.map((patternData, patternIndex) => {
-          const patternColor = getContrastColor('#FFF', props.style.fill)
-          const hasMatchingValues = supportedTerritories[territory]?.includes(patternData?.dataValue)
+          const patternColor = patternData.color || getContrastColor('#FFF', backgroundColor)
+          const hasMatchingValues = patternData.dataValue === territoryData[patternData.dataKey]
 
           if (!hasMatchingValues) return null
           if (!patternData.pattern) return null
 
           return (
             <>
-              {patternData?.pattern === 'waves' && <PatternWaves id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
-              {patternData?.pattern === 'circles' && <PatternCircles id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
-              {patternData?.pattern === 'lines' && <PatternLines id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 6} width={patternSizes[patternData?.size] ?? 6} stroke={patternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
+              {patternData?.pattern === 'waves' && (
+                <PatternWaves
+                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
+                  height={patternSizes[patternData?.size] ?? 10}
+                  width={patternSizes[patternData?.size] ?? 10}
+                  fill={patternColor}
+                  complement
+                />
+              )}
+              {patternData?.pattern === 'circles' && (
+                <PatternCircles
+                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
+                  height={patternSizes[patternData?.size] ?? 10}
+                  width={patternSizes[patternData?.size] ?? 10}
+                  fill={patternColor}
+                  complement
+                />
+              )}
+              {patternData?.pattern === 'lines' && (
+                <PatternLines
+                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
+                  height={patternSizes[patternData?.size] ?? 6}
+                  width={patternSizes[patternData?.size] ?? 6}
+                  stroke={patternColor}
+                  strokeWidth={1}
+                  orientation={['diagonalRightToLeft']}
+                />
+              )}
               <path
                 stroke={stroke}
                 strokeWidth={strokeWidth}
-                d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
-                fill={`url(#territory-${patternData?.dataKey}--${patternIndex})`}
+                d={rectanglePath}
+                fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
                 color={patternData ? 'white' : textColor}
-                className={[`territory-pattern-${patternData.dataKey}`, `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`].join(' ')}
+                className={[
+                  `territory-pattern-${patternData.dataKey}`,
+                  `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`
+                ].join(' ')}
               />
-              <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ fill: patternData ? 'white' : 'black', stroke: patternData ? 'black' : textColor, strokeWidth: patternData ? 6 : 0 }} className='territory-text' paint-order='stroke'>
+              <text
+                textAnchor='middle'
+                dominantBaseline='middle'
+                x='50%'
+                y='54%'
+                fill={text}
+                style={{
+                  fill: patternData ? 'white' : 'black',
+                  stroke: patternData ? 'black' : textColor,
+                  strokeWidth: patternData ? 6 : 0
+                }}
+                className='territory-text'
+                paint-order='stroke'
+                onClick={handleShapeClick}
+                data-tooltip-id={dataTooltipId}
+                data-tooltip-html={dataTooltipHtml}
+              >
                 {label}
               </text>
             </>

package/src/components/UsaMap/components/Territory/TerritoryShape.ts

@@ -0,0 +1,13 @@
+export type TerritoryShape = {
+  handleShapeClick: () => void
+  dataTooltipHtml: string
+  dataTooltipId: string
+  hasPattern: boolean
+  label: string
+  stroke: string
+  strokeWidth: number
+  territory: string
+  territoryData: object
+  text: string
+  textColor: string
+}