@cdc/map 4.24.11 → 4.24.12

package/src/components/CityList.tsx

@@ -7,6 +7,7 @@ import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from
 import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
 
 import ConfigContext from '../context'
+import { getGeoStrokeColor } from '../helpers/colors'
 
 const CityList = ({
   data,
@@ -79,6 +80,8 @@ const CityList = ({
       fillOpacity: state.general.type === 'bubble' ? 0.4 : 1
     }
 
+    const geoStrokeColor = getGeoStrokeColor(state)
+
     const pin = (
       <path
         className='marker'
@@ -88,7 +91,7 @@ const CityList = ({
         data-tooltip-id={`tooltip__${tooltipId}`}
         data-tooltip-html={toolTip}
         transform={`scale(${radius / 9})`}
-        stroke={state.general.geoBorderColor === 'sameAsBackground' ? '#ffffff' : '#000000'}
+        stroke={geoStrokeColor}
         strokeWidth={'2px'}
         tabIndex='-1'
         {...additionalProps}
@@ -185,7 +188,7 @@ const CityList = ({
       title: 'Select for more information',
       'data-tooltip-id': `tooltip__${tooltipId}`,
       'data-tooltip-html': toolTip,
-      stroke: state.general.geoBorderColor === 'sameAsBackground' ? '#ffffff' : '#000000',
+      stroke: geoStrokeColor,
       strokeWidth: '2px',
       tabIndex: -1,
       ...additionalProps

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, memo, useContext } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 
 // Third Party
 import {
@@ -10,6 +10,7 @@ import {
 } from 'react-accessible-accordion'
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 import { useDebounce } from 'use-debounce'
+import _ from 'lodash'
 // import ReactTags from 'react-tag-autocomplete'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 import Panels from './Panels'
@@ -42,6 +43,7 @@ import HexSetting from './HexShapeSettings.jsx'
 import ConfigContext from '../../../context.ts'
 import { MapContext } from '../../../types/MapContext.js'
 import { TextField } from './Inputs'
+import Alert from '@cdc/core/components/Alert'
 
 // Todo: move to useReducer, seperate files out.
 const EditorPanel = ({ columnsRequiredChecker }) => {
@@ -63,8 +65,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     runtimeData,
     setRuntimeData,
     generateRuntimeData,
-    position,
-    topoData,
+
 
   } = useContext<MapContext>(ConfigContext)
 
@@ -116,7 +117,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     categoryValuesOrder.splice(idx2, 0, movedItem)
 
     state.legend.categoryValuesOrder?.forEach(value => {
-      if(categoryValuesOrder.indexOf(value) === -1){
+      if (categoryValuesOrder.indexOf(value) === -1) {
         categoryValuesOrder.push(value)
       }
     })
@@ -377,7 +378,8 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           ...state,
           legend: {
             ...state.legend,
-            position: value
+            position: value,
+            hideBorder: _.includes(['top', 'bottom'], value)
           }
         })
         break
@@ -1093,6 +1095,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </option>
           </select>
         </label>
+        <label>
+          <TextField
+            type='textarea'
+            value={state.filterIntro}
+            fieldName='filterIntro'
+            label='Filter Intro text'
+            updateField={updateField}
+          />
+        </label>
         {filtersJSX}
       </>
     )
@@ -1261,6 +1272,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   })
 
   const updateField = (section, subsection, fieldName, newValue) => {
+    if (!section) {
+      setState({
+        ...state,
+        [fieldName]: newValue
+      })
+      return
+    }
+
     const isArray = Array.isArray(state[section])
 
     let sectionValue = isArray ? [...state[section], newValue] : { ...state[section], [fieldName]: newValue }
@@ -1407,7 +1426,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           {filter.order === 'cust' && (
             <DragDropContext
               onDragEnd={({ source, destination }) =>
-                handleFilterOrder(source.index, destination.index, index, state.filters[index])
+                handleFilterOrder(source.index, destination?.index, index, state.filters?.[index])
               }
             >
               <Droppable droppableId='filter_order'>
@@ -1503,9 +1522,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   })
 
   const getCategoryValuesOrder = () => {
-    let values = runtimeLegend ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value) : []
+    let values = runtimeLegend
+      ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value)
+      : []
 
-    if(state.legend.cateogryValuesOrder){
+    if (state.legend.cateogryValuesOrder) {
       return values.sort((a, b) => {
         let aVal = state.legend.cateogryValuesOrder.indexOf(a)
         let bVal = state.legend.cateogryValuesOrder.indexOf(b)
@@ -1517,11 +1538,12 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     } else {
       return values
     }
-    
   }
 
   const CategoryList = () => {
-    return getCategoryValuesOrder().filter(item => !item.special).map((value, index) => (
+    return getCategoryValuesOrder()
+      .filter(item => !item?.special)
+      .map((value, index) => (
         <Draggable key={value} draggableId={`item-${value}`} index={index}>
           {(provided, snapshot) => (
             <li style={{ position: 'relative' }}>
@@ -1537,7 +1559,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </li>
           )}
         </Draggable>
-    ))
+      ))
   }
 
   const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://')
@@ -2191,6 +2213,13 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </Tooltip>
                     </span>
                   </label>
+                  {state.legend.specialClasses.length === 2 && (
+                    <Alert
+                      type='info'
+                      message='If a third special class is needed you can apply a pattern to set it apart.'
+                      showCloseButton={false}
+                    />
+                  )}
                   {specialClasses.map((specialClass, i) => (
                     <div className='edit-block' key={`special-class-${i}`}>
                       <button
@@ -2251,15 +2280,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </label>
                     </div>
                   ))}
-                  <button
-                    className='btn btn-primary full-width'
-                    onClick={e => {
-                      e.preventDefault()
-                      editColumn('primary', 'specialClassAdd', {})
-                    }}
-                  >
-                    Add Special Class
-                  </button>
+                  {state.legend.specialClasses.length < 2 && (
+                    <button
+                      className='btn btn-primary full-width'
+                      onClick={e => {
+                        e.preventDefault()
+                        editColumn('primary', 'specialClassAdd', {})
+                      }}
+                    >
+                      Add Special Class
+                    </button>
+                  )}
                 </fieldset>
               )}
 
@@ -3229,7 +3260,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <label>
                 <span className='edit-label'>Map Color Palette</span>
               </label>
-              {/* <InputCheckbox  section="general" subsection="palette"  fieldName='isReversed'  size='small' label='Use selected palette in reverse order'   updateField={updateField}  value={isPaletteReversed} /> */}
               <InputToggle
                 type='3d'
                 section='general'

package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx

@@ -255,7 +255,7 @@ const PatternSettings = ({ name }: PanelProps) => {
               </Accordion>
             )
           })}
-        <button className='btn btn-primary full-width' onClick={handleAddGeoPattern}>
+        <button className='btn btn-primary full-width mt-2' onClick={handleAddGeoPattern}>
           Add Geo Pattern
         </button>
       </AccordionItemPanel>

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

@@ -18,7 +18,7 @@ import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from
 import { Group } from '@visx/group'
 import './index.scss'
 import { ViewportSize } from '@cdc/chart/src/types/ChartConfig'
-import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 
 const LEGEND_PADDING = 30
 
@@ -46,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) => {
@@ -87,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')) {
@@ -207,7 +217,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
     return legendItems
   }
-  const legendListItems = legendList(state.legend.style === 'gradient')
+  const legendListItems = legendList(isLegendGradient)
 
   const { legendClasses } = useDataVizClasses(state, viewport)
 
@@ -244,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'>
@@ -279,7 +289,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
               labels={getFormattedLegendItems().map(item => item?.label) ?? []}
               colors={getFormattedLegendItems().map(item => item?.color) ?? []}
               dimensions={dimensions}
-              parentPaddingToSubtract={containerWidthPadding + (legend.hideBorder ? 0 : LEGEND_PADDING)}
+              parentPaddingToSubtract={
+                containerWidthPadding + (legend.hideBorder || boxDynamicallyHidden ? 0 : LEGEND_PADDING)
+              }
               config={state}
             />
             {!!legendListItems.length && (
@@ -321,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,12 +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) {
+      .legend-container.legend-padding {
+        padding: 15px;
+      }
       &.bottom,
       &.top {
-        border: var(--lightGray) 1px solid;
+        border: var(--cool-gray-10) 1px solid;
       }
       &.side {
         z-index: 1;
@@ -31,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;
 
@@ -67,9 +70,10 @@
     }
 
     .legend-container {
+      --space-between-legend-items: 0.6em;
       position: relative;
       &.legend-padding {
-        padding: 15px;
+        padding-top: 15px;
       }
       .legend-container__title {
         font-size: 1.3em;
@@ -83,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;
@@ -118,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;
           }
@@ -146,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;

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

@@ -176,7 +176,7 @@ const TerritoryHexagon = ({
 
   return (
     territoryData && (
-      <svg viewBox='0 0 45 51' className='territory-wrapper--hex'>
+      <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}

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

@@ -2,7 +2,7 @@ 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'
 
@@ -17,15 +17,16 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   territory,
   text,
   textColor,
+  backgroundColor,
   ...props
 }) => {
-  const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
+  const { state } = useContext<MapContext>(ConfigContext)
   const { territoryData, ...otherProps } = props
   const rectanglePath =
-    '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'
+    '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}>
+    <svg viewBox='0 0 45 29' key={territory} className={territory}>
       <g
         {...otherProps}
         strokeLinejoin='round'
@@ -41,7 +42,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           x='50%'
           y='54%'
           fill={text}
-          style={{ stroke: textColor, strokeWidth: 1 }}
+          style={{ stroke: 'none' }}
           className='territory-text'
           paintOrder='stroke'
           onClick={handleShapeClick}
@@ -52,8 +53,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
         </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
@@ -62,7 +63,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
             <>
               {patternData?.pattern === 'waves' && (
                 <PatternWaves
-                  id={`territory-${patternData?.dataKey}--${patternIndex}`}
+                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
@@ -71,7 +72,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
               )}
               {patternData?.pattern === 'circles' && (
                 <PatternCircles
-                  id={`territory-${patternData?.dataKey}--${patternIndex}`}
+                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
@@ -80,7 +81,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
               )}
               {patternData?.pattern === 'lines' && (
                 <PatternLines
-                  id={`territory-${patternData?.dataKey}--${patternIndex}`}
+                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 6}
                   width={patternSizes[patternData?.size] ?? 6}
                   stroke={patternColor}
@@ -92,7 +93,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 stroke={stroke}
                 strokeWidth={strokeWidth}
                 d={rectanglePath}
-                fill={`url(#territory-${patternData?.dataKey}--${patternIndex})`}
+                fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
                 color={patternData ? 'white' : textColor}
                 className={[
                   `territory-pattern-${patternData.dataKey}`,