@cdc/map 4.23.11 → 4.24.1

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

@@ -0,0 +1,183 @@
+//TODO: Move legends to core
+import { useContext } from 'react'
+import parse from 'html-react-parser'
+import chroma from 'chroma-js'
+
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendItemHex from './LegendItem.Hex'
+
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
+import ConfigContext from '../../../context'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
+import './index.scss'
+
+const Legend = () => {
+  // prettier-ignore
+  const {
+    displayDataAsText,
+    resetLegendToggles,
+    runtimeFilters,
+    runtimeLegend,
+    setAccessibleStatus,
+    setRuntimeLegend,
+    state,
+    viewport,
+  } = useContext(ConfigContext)
+
+  const { legend } = state
+
+  // Toggles if a legend is active and being applied to the map and data table.
+  const toggleLegendActive = (i, legendLabel) => {
+    const newValue = !runtimeLegend[i].disabled
+
+    runtimeLegend[i].disabled = newValue // Toggle!
+
+    let newLegend = [...runtimeLegend]
+
+    newLegend[i].disabled = newValue
+
+    const disabledAmt = runtimeLegend.disabledAmt ?? 0
+
+    newLegend['disabledAmt'] = newValue ? disabledAmt + 1 : disabledAmt - 1
+
+    setRuntimeLegend(newLegend)
+
+    setAccessibleStatus(`Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`)
+  }
+
+  const legendList = () => {
+    let legendItems
+
+    legendItems = runtimeLegend.map((entry, idx) => {
+      const entryMax = displayDataAsText(entry.max, 'primary')
+
+      const entryMin = displayDataAsText(entry.min, 'primary')
+
+      let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
+
+      // If interval, add some formatting
+      if (legend.type === 'equalinterval' && idx !== runtimeLegend.length - 1) {
+        formattedText = `${entryMin} - < ${entryMax}`
+      }
+
+      const { disabled } = entry
+
+      if (legend.type === 'category') {
+        formattedText = displayDataAsText(entry.value, 'primary')
+      }
+
+      if (entry.max === 0 && entry.min === 0) {
+        formattedText = '0'
+      }
+
+      let legendLabel = formattedText
+
+      if (entry.hasOwnProperty('special')) {
+        legendLabel = entry.label || entry.value
+      }
+
+      const handleListItemClass = () => {
+        let classes = ['legend-container__li']
+        if (disabled) classes.push('legend-container__li--disabled')
+        if (entry.hasOwnProperty('special')) classes.push('legend-container__li--special-class')
+        return classes
+      }
+
+      return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+        <li
+          className={handleListItemClass().join(' ')}
+          key={idx}
+          title={`Legend item ${legendLabel} - Click to disable`}
+          onClick={() => {
+            toggleLegendActive(idx, legendLabel)
+          }}
+        >
+          <LegendCircle fill={entry.color} /> <span className='label'>{legendLabel}</span>
+        </li>
+      )
+    })
+
+    if (state.map.patterns) {
+      // loop over map patterns
+      state.map.patterns.map((patternData, patternDataIndex) => {
+        const { pattern, dataKey, size } = patternData
+        let defaultPatternColor = 'black'
+        const sizes = {
+          small: '8',
+          medium: '10',
+          large: '12'
+        }
+
+        const legendSize = 16
+
+        legendItems.push(
+          <>
+            <li className={`legend-container__li legend-container__li--geo-pattern`}>
+              <span className='legend-item' style={{ border: 'unset' }}>
+                <svg width={legendSize} height={legendSize}>
+                  {pattern === 'waves' && <PatternWaves id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
+                  {pattern === 'circles' && <PatternCircles id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
+                  {pattern === 'lines' && <PatternLines id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 6} width={sizes[size] ?? 10} stroke={defaultPatternColor} strokeWidth={2} orientation={['diagonalRightToLeft']} />}
+                  <circle id={dataKey} fill={`url(#${dataKey}--${patternDataIndex})`} r={legendSize / 2} cx={legendSize / 2} cy={legendSize / 2} stroke='#0000004d' strokeWidth={1} />
+                </svg>
+              </span>
+              <p style={{ lineHeight: '22.4px' }}>{patternData.label || patternData.dataValue || ''}</p>
+            </li>
+          </>
+        )
+      })
+    }
+
+    return legendItems
+  }
+
+  const { legendClasses } = useDataVizClasses(state, viewport)
+
+  const handleReset = e => {
+    e.preventDefault()
+    resetLegendToggles()
+    setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
+  }
+
+  return (
+    <ErrorBoundary component='Sidebar'>
+      <div className='legends'>
+        <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend'>
+          <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
+            {runtimeLegend.disabledAmt > 0 && (
+              <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
+                Clear
+              </button>
+            )}
+            {legend.title && <span className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</span>}
+            {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>}
+            {legend.dynamicDescription === true &&
+              runtimeFilters.map((filter, idx) => {
+                const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
+
+                // Do we have a custom description for this?
+                const desc = legend.descriptions[lookupStr] || ''
+
+                if (desc.length > 0) {
+                  return (
+                    <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
+                      {desc}
+                    </p>
+                  )
+                }
+                return true
+              })}
+            <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
+              {legendList()}
+            </ul>
+          </section>
+        </aside>
+        {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && <LegendItemHex state={state} runtimeLegend={runtimeLegend} viewport={viewport} />}
+      </div>
+    </ErrorBoundary>
+  )
+}
+
+export default Legend

package/src/components/Legend/components/LegendItem.Hex.tsx

@@ -0,0 +1,53 @@
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
+import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
+import parse from 'html-react-parser'
+
+const LegendItemHex = props => {
+  const { state, runtimeLegend, viewport } = props
+  const { legend } = state
+  const { title } = state.general
+
+  const columnLogic = legend.position === 'side' && legend.singleColumn ? 'single-column' : legend.position === 'bottom' && legend.singleRow ? 'single-row' : ''
+
+  const getItemShape = shape => {
+    switch (shape) {
+      case 'Arrow Down':
+        return <AiOutlineArrowDown />
+      case 'Arrow Up':
+        return <AiOutlineArrowUp />
+      case 'Arrow Right':
+        return <AiOutlineArrowRight />
+      default:
+        return
+    }
+  }
+
+  const { legendClasses } = useDataVizClasses(state, viewport)
+
+  // TODO: create core legend for reusability
+  return (
+    state.hexMap.type === 'shapes' &&
+    state.hexMap.shapeGroups.map((shapeGroup, shapeGroupIndex) => {
+      return (
+        <aside id='legend' className={legendClasses.aside.join(' ')} role='region' aria-label='Legend' tabIndex='0'>
+          <section className={legendClasses.section.join(' ')} aria-label='Map Legend'>
+            {legend.title && <span className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</span>}
+            {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>}
+
+            <ul className={legendClasses.ul.join(' ')} aria-label='Legend items' style={{ listStyle: 'none' }}>
+              {shapeGroup.items.map((item, itemIndex) => {
+                return (
+                  <li className={legendClasses.li.join(' ')}>
+                    {getItemShape(item.shape)} {item.value}
+                  </li>
+                )
+              })}
+            </ul>
+          </section>
+        </aside>
+      )
+    })
+  )
+}
+
+export default LegendItemHex

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

@@ -0,0 +1,235 @@
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/heading-colors';
+
+.cdc-map-inner-container {
+  .map-container.world aside.side {
+    border-top: 0;
+  }
+  @include breakpointClass(md) {
+    .map-container.world aside.side {
+      border-top: $lightGray 1px solid;
+      position: absolute;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 10px 18px;
+    }
+  }
+
+  aside {
+    background-color: #fff;
+    z-index: 6;
+    border-top: $lightGray 1px solid;
+    @include breakpointClass(md) {
+      &.bottom {
+        border: $lightGray 1px solid;
+      }
+      &.side {
+        z-index: 1;
+        box-sizing: content-box;
+        max-width: 450px;
+        margin-top: 2em;
+        margin-bottom: 2em;
+        align-self: flex-start;
+        z-index: 4;
+        right: 1em;
+        border: $lightGray 1px solid;
+        top: 2em;
+        right: 1em;
+
+        ul.vertical-sorted {
+          column-count: 2;
+          column-fill: balance;
+        }
+
+        ul:not(.vertical-sorted) {
+          column-count: initial;
+          column-fill: initial;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+      }
+
+      &.bottom {
+        ul.legend-container__ul.vertical-sorted {
+          display: block;
+          column-count: 2;
+          column-fill: balance;
+        }
+
+        ul.legend-container__ul {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+
+          li {
+            width: 50%;
+          }
+        }
+
+        ul.single-row {
+          display: block;
+          column-count: initial;
+          column-fill: auto;
+        }
+      }
+    }
+
+    .legend-container {
+      padding: 1em;
+      position: relative;
+      .legend-container__title {
+        font-size: 1.3em;
+        padding-bottom: 0;
+        display: inline-block;
+      }
+      .legend-container__title + p,
+      .legend-container__title + ul,
+      p + ul,
+      p + p {
+        padding-top: 1em;
+      }
+      .legend-container__reset-button {
+        font-size: 0.75em;
+        color: rgba(0, 0, 0, 0.6);
+        position: absolute;
+        right: 1em;
+        background: rgba(0, 0, 0, 0.1);
+        text-transform: uppercase;
+        transition: 0.2s all;
+        padding: 0.2em 0.5em;
+        border: rgba(0, 0, 0, 0.2) 1px solid;
+        &:hover {
+          text-decoration: none;
+          background: rgba(0, 0, 0, 0.15);
+          transition: 0.2s all;
+        }
+      }
+      p {
+        line-height: 1.4em;
+      }
+      .legend-container__ul {
+        list-style: none;
+        padding-top: 1em;
+        button {
+          font-size: unset;
+          background: transparent;
+        }
+
+        &.vertical-sorted {
+          flex-direction: column;
+        }
+
+        &:not(.vertical-sorted, .legend-container__ul--single-column) {
+          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;
+          vertical-align: middle;
+          transition: 0.1s opacity;
+          display: flex;
+          cursor: pointer;
+          flex-grow: 1;
+
+          &.legend-container__li--disabled {
+            opacity: 0.4;
+          }
+        }
+      }
+    }
+
+    .bottom .legend-container__ul--single-column:not(.vertical-sorted) {
+      display: inline-block;
+
+      @include breakpoint(md) {
+        display: flex;
+      }
+
+      .legend-container__li {
+        width: 100%;
+      }
+    }
+
+    &.side .legend-container .legend-container__ul--single-column {
+      @include breakpointClass(md) {
+        width: 25%;
+        min-width: 200px;
+        .legend-section ul {
+          flex-direction: column;
+          li {
+            width: 100%;
+            &:nth-last-of-type(-n + 2) {
+              padding-bottom: 1em;
+            }
+            &:last-child {
+              padding-bottom: 0;
+            }
+          }
+        }
+      }
+      li {
+        width: 100%;
+      }
+    }
+
+    &.bottom.single-row {
+      width: 100%;
+      .legend-container ul {
+        flex-direction: row;
+        align-items: baseline;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        li {
+          justify-items: center;
+          line-break: loose;
+          align-items: center;
+          width: auto;
+          padding-right: 1em;
+          padding-bottom: 1em;
+          display: inline-block;
+          & > span {
+            margin: 0 !important;
+          }
+        }
+      }
+    }
+
+    @include breakpointClass(sm) {
+      .legend-container ul {
+        align-items: flex-start;
+        justify-content: space-between;
+        li {
+          flex-grow: 1;
+          padding-right: 0.5em;
+        }
+      }
+    }
+
+    .filters-section {
+      padding: 0 1em 1em;
+      .heading-3 {
+        font-weight: bold;
+        margin-bottom: 0.5em;
+      }
+      form {
+        margin-top: 0.5em;
+        line-height: 2em;
+        display: flex;
+        align-items: flex-end;
+        section + section {
+          margin-left: 0.75em;
+        }
+        select {
+          display: block;
+          font-size: 1em;
+        }
+      }
+    }
+  }
+}

package/src/components/Legend/index.tsx

@@ -0,0 +1,3 @@
+import Legend from './components/Legend'
+
+export default Legend

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

@@ -0,0 +1,129 @@
+import { useContext } from 'react'
+import { geoCentroid, geoPath } from 'd3-geo'
+import ConfigContext from './../../../../context'
+import { MapContext } from './../../../../types/MapContext'
+import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import chroma from 'chroma-js'
+
+const offsets = {
+  'US-VT': [50, -8],
+  'US-NH': [34, 2],
+  'US-MA': [30, -1],
+  'US-RI': [28, 2],
+  'US-CT': [35, 10],
+  'US-NJ': [42, 1],
+  'US-DE': [33, 0],
+  'US-MD': [47, 10]
+}
+
+const nudges = {
+  'US-FL': [15, 3],
+  'US-AK': [0, -8],
+  'US-CA': [-10, 0],
+  'US-NY': [5, 0],
+  'US-MI': [13, 20],
+  'US-LA': [-10, -3],
+  'US-HI': [-10, 10],
+  'US-ID': [0, 10],
+  'US-WV': [-2, 2]
+}
+
+// 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 { state } = useContext<MapContext>(ConfigContext)
+
+  const isHex = state.general.displayAsHex
+
+  // Labels
+  const hexagonLabel = (geo, bgColor = '#FFFFFF', projection) => {
+    let centroid = projection ? projection(geoCentroid(geo)) : [22, 17.5]
+
+    let abbr = geo?.properties?.iso ? geo.properties.iso : geo.uid
+
+    const getArrowDirection = (geoData, geo, isTerritory = false) => {
+      if (!isTerritory) {
+        centroid = projection(geoCentroid(geo))
+      }
+
+      return (
+        <>
+          {state.hexMap.shapeGroups.map((group, groupIndex) => {
+            return group.items.map((item, itemIndex) => {
+              if (item.operator === '=') {
+                if (geoData[item.key] === item.value) {
+                  return (
+                    <Group style={{ transform: `translate(36%, 50%)`, fill: 'currentColor' }}>
+                      {item.shape === 'Arrow Down' && <AiOutlineArrowDown size={12} stroke='none' fontWeight={100} />}
+                      {item.shape === 'Arrow Up' && <AiOutlineArrowUp size={12} stroke='none' fontWeight={100} />}
+                      {item.shape === 'Arrow Right' && <AiOutlineArrowRight size={12} stroke='none' fontWeight={100} />}
+                    </Group>
+                  )
+                }
+              }
+            })
+          })}
+        </>
+      )
+    }
+
+    if (undefined === abbr) return null
+
+    let textColor = '#FFF'
+
+    // Dynamic text color
+    if (chroma.contrast(textColor, bgColor) < 3.5) {
+      textColor = '#202020' // dark gray
+    }
+
+    // always make HI black since it is off to the side
+    if (abbr === 'US-HI') {
+      textColor = '#000'
+    }
+
+    let x = 0,
+      y = state.hexMap.type === 'shapes' ? -10 : 5
+
+    // used to nudge/move some of the labels for better readability
+    if (nudges[abbr] && false === isHex) {
+      x += nudges[abbr][0]
+      y += nudges[abbr][1]
+    }
+
+    if (undefined === offsets[abbr] || isHex) {
+      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'>
+            {abbr.substring(3)}
+          </Text>
+          {state.general.displayAsHex && state.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
+        </>
+      )
+    }
+
+    let [dx, dy] = offsets[abbr]
+
+    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})`}>
+          {abbr.substring(3)}
+        </text>
+      </g>
+    )
+  }
+
+  return (
+    <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 ? territoryData : geo, stroke, false)}
+      </g>
+    </svg>
+  )
+}
+
+export default TerritoryHexagon

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

@@ -0,0 +1,66 @@
+import { useContext } from 'react'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
+import chroma from 'chroma-js'
+import ConfigContext from './../../../../context'
+import { type MapContext } from '../../../../types/MapContext'
+// todo: move this somewhere that makes better sense for pattern sizes.
+const sizes = {
+  small: '8',
+  medium: '10',
+  large: '12'
+}
+
+const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPattern, territory, ...props }) => {
+  const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
+
+  return (
+    <svg viewBox='0 0 45 28'>
+      <g {...props} strokeLinejoin='round'>
+        <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'
+          {...props}
+        />
+        <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: textColor, strokeWidth: 1 }} className='territory-text' paint-order='stroke'>
+          {label}
+        </text>
+
+        {state.map.patterns.map((patternData, patternIndex) => {
+          let defaultPatternColor = 'black'
+
+          const hasMatchingValues = supportedTerritories[territory].includes(patternData?.dataValue)
+          console.log('has match', patternData)
+
+          if (chroma.contrast(defaultPatternColor, props.style.fill) < 3.5) {
+            defaultPatternColor = 'white'
+          }
+
+          if (!hasMatchingValues) return null
+          if (!patternData.pattern) return null
+
+          return (
+            <>
+              {patternData?.pattern === 'waves' && <PatternWaves id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 10} width={sizes[patternData?.size] ?? 10} fill={defaultPatternColor} complement />}
+              {patternData?.pattern === 'circles' && <PatternCircles id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 10} width={sizes[patternData?.size] ?? 10} fill={defaultPatternColor} complement />}
+              {patternData?.pattern === 'lines' && <PatternLines id={`territory-${patternData?.dataKey}--${patternIndex}`} height={sizes[patternData?.size] ?? 6} width={sizes[patternData?.size] ?? 6} stroke={defaultPatternColor} 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})`}
+                color='white'
+                className={[`territory-pattern-${patternData.dataKey}`, `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`].join(' ')}
+              />
+              <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: patternData ? 'black' : textColor, strokeWidth: patternData ? 6 : 0 }} className='territory-text' paint-order='stroke'>
+                {label}
+              </text>
+            </>
+          )
+        })}
+      </g>
+    </svg>
+  )
+}
+
+export default TerritoryRectangle

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

@@ -0,0 +1,9 @@
+import TerritoryHexagon from './Territory.Hexagon'
+import TerritoryRectangle from './Territory.Rectangle'
+
+const Territory = {
+  Rectangle: TerritoryRectangle,
+  Hexagon: TerritoryHexagon
+}
+
+export default Territory