@cdc/map 4.24.10 → 4.24.11

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 { 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
@@ -99,13 +103,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 +131,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 +196,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 +207,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
     return legendItems
   }
+  const legendListItems = legendList(state.legend.style === 'gradient')
+
   const { legendClasses } = useDataVizClasses(state, viewport)
 
   const handleReset = e => {
@@ -273,14 +278,15 @@ 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 ? 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 />

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

@@ -16,8 +16,10 @@
     background-color: #fff;
     z-index: 6;
     border-top: var(--lightGray) 1px solid;
+
     @include breakpointClass(md) {
-      &.bottom, &.top {
+      &.bottom,
+      &.top {
         border: var(--lightGray) 1px solid;
       }
       &.side {
@@ -65,8 +67,10 @@
     }
 
     .legend-container {
-      padding: 1em;
       position: relative;
+      &.legend-padding {
+        padding: 15px;
+      }
       .legend-container__title {
         font-size: 1.3em;
         padding-bottom: 0;
@@ -166,6 +170,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/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='0 0 45 51' 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

@@ -4,21 +4,50 @@ import ConfigContext from './../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
 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 TerritoryRectangle: React.FC<TerritoryShape> = ({
+  dataTooltipId,
+  dataTooltipHtml,
+  handleShapeClick,
+  hasPattern,
+  label,
+  stroke,
+  strokeWidth,
+  territory,
+  text,
+  textColor,
+  ...props
+}) => {
   const { state, supportedTerritories } = 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'
 
   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'>
+      <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: textColor, strokeWidth: 1 }}
+          className='territory-text'
+          paintOrder='stroke'
+          onClick={handleShapeClick}
+          data-tooltip-id={dataTooltipId}
+          data-tooltip-html={dataTooltipHtml}
+        >
           {label}
         </text>
 
@@ -31,18 +60,62 @@ const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPa
 
           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-${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']}
+                />
+              )}
               <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'
+                d={rectanglePath}
                 fill={`url(#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
+}

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -604,7 +604,7 @@ const CountyMap = props => {
         className='county-map-canvas'
       ></canvas>
 
-      <button className={`btn btn--reset`} onClick={onReset} ref={resetButton} tabIndex='0'>
+      <button className={`btn btn-primary btn--reset`} onClick={onReset} ref={resetButton} tabIndex='0'>
         Reset Zoom
       </button>
     </ErrorBoundary>

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -195,9 +195,9 @@ const UsaMap = () => {
           text={styles.color}
           strokeWidth={1.5}
           textColor={textColor}
-          onClick={() => geoClickHandler(territory, territoryData)}
-          data-tooltip-id={`tooltip__${tooltipId}`}
-          data-tooltip-html={toolTip}
+          handleShapeClick={() => geoClickHandler(territory, territoryData)}
+          dataTooltipId={`tooltip__${tooltipId}`}
+          dataTooltipHtml={toolTip}
           territory={territory}
           territoryData={territoryData}
           tabIndex={-1}

package/src/components/UsaMap/helpers/shapes.ts

@@ -2,7 +2,7 @@ export const drawCircle = (circle, context, state) => {
   const percentOfOriginalSize = 0.75
   const adjustedGeoRadius =
     state.mapPosition.zoom > 1 ? Number(circle.geoRadius) * percentOfOriginalSize : circle.geoRadius
-  context.lineWidth = 3
+  context.lineWidth = 1
   context.fillStyle = circle.color
   context.beginPath()
   context.arc(circle.x, circle.y, adjustedGeoRadius, 0, 2 * Math.PI)
@@ -145,7 +145,7 @@ export const drawPin = (pin, ctx) => {
   ctx.fillStyle = pin.color
   ctx.fill()
   ctx.strokeStyle = 'black'
-  ctx.lineWidth = 1.5
+  ctx.lineWidth = 1
   ctx.stroke()
   ctx.beginPath()
   ctx.arc(0, -21, 3, 0, Math.PI * 2)
@@ -178,12 +178,13 @@ export const createShapeProperties = (type, pixelCoords, legendValues, state, ge
     x: pixelCoords[0],
     y: pixelCoords[1],
     color: legendValues[0],
-    size: geoRadius
+    size: geoRadius,
+    lineWidth: 1
   }
 
   switch (type) {
     case 'circle':
-      return { ...baseProps, geoRadius: geoRadius / 2, type: 'circle' }
+      return { ...baseProps, geoRadius: geoRadius, type: 'circle' }
     case 'pin':
       return { ...baseProps, type: 'pin' }
     case 'square':

package/src/scss/editor-panel.scss

@@ -546,9 +546,6 @@
       font-weight: normal;
     }
 
-    .btn {
-      margin-top: 1em;
-    }
     .sort-list {
       list-style: none;
       > li {

package/src/scss/filters.scss

@@ -1,7 +1,5 @@
 .cdc-open-viz-module .cdc-map-inner-container .filters-section,
 .cove .cdc-map-inner-container .filters-section {
-  margin-left: 1rem;
-  margin-right: 1rem;
 
   &__title {
     margin: 15px 0;
@@ -23,17 +21,14 @@
   @include breakpoint(md) {
     display: flex;
     gap: 30px;
+    flex-wrap: wrap;
   }
 
+
   label:not(:empty) {
     margin-right: 0.4em;
   }
 
-  select {
-    font-size: 1em;
-    padding-right: 5px;
-  }
-
   .single-filter {
     margin-bottom: 0.5em;
   }

package/src/scss/main.scss

@@ -55,10 +55,6 @@
   text-align: left;
   max-width: 100%;
   background-color: white;
-  .btn {
-    padding: 0.375em 0.75em;
-    border-radius: 0.3em;
-  }
 
   header.hidden {
     display: none;

package/src/scss/map.scss

@@ -266,10 +266,6 @@ $medium: 768px;
   transition: none !important;
 }
 
-// .state {
-// 	display: none;
-// }
-
 .state {
   &--inactive:hover path {
     cursor: pointer;

package/src/types/MapConfig.ts

@@ -48,7 +48,7 @@ export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type LegendShapeItem = {
   column: string
   key: string
-  operator: string
+  operator: '=' | '≠' | '<' | '>' | '<=' | '>='
   shape: string
   value: string
 }