@cdc/map 4.24.9 → 4.24.11

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

@@ -11,7 +11,16 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
-import Annotation from '../../Annotation'
+import {
+  drawCircle,
+  drawDiamond,
+  drawSquare,
+  drawTriangle,
+  drawPin,
+  drawStar,
+  drawShape,
+  createShapeProperties
+} from '../helpers/shapes'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -265,7 +274,6 @@ const CountyMap = props => {
       // Redraw with focus on state
       setFocus({ id: clickedState.id, index: focusIndex, center: geoCentroid(clickedState), feature: clickedState })
     }
-
     if (state.general.type === 'us-geocode') {
       const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
       let clickedGeo
@@ -304,7 +312,7 @@ const CountyMap = props => {
     let pointCoordinates = topoData.projection.invert([x, y])
 
     const currentTooltipIndex = parseInt(tooltipRef.current.getAttribute('data-index'))
-    const geoRadius = (state.visual.geoCodeCircleSize || 5) * 1
+    const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
 
     const context = canvas.getContext('2d')
     const path = geoPath(topoData.projection, context)
@@ -397,8 +405,9 @@ const CountyMap = props => {
           data[runtimeKeys[i]][state.columns.longitude.name],
           data[runtimeKeys[i]][state.columns.latitude.name]
         ])
+        let includedShapes = ['circle', 'diamond', 'star', 'triangle', 'square'].includes(state.visual.cityStyle)
         if (
-          state.visual.cityStyle === 'circle' &&
+          includedShapes &&
           pixelCoords &&
           Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius &&
           applyLegendToRow(data[runtimeKeys[i]])
@@ -530,59 +539,50 @@ const CountyMap = props => {
         })
       }
 
-      const drawPin = (pin, ctx) => {
-        ctx.save()
-        ctx.translate(pin.x, pin.y)
-        ctx.beginPath()
-        ctx.moveTo(0, 0)
-        ctx.bezierCurveTo(2, -10, -20, -25, 0, -30)
-        ctx.bezierCurveTo(20, -25, -2, -10, 0, 0)
-        ctx.fillStyle = pin.color
-        ctx.fill()
-        ctx.strokeStyle = 'black'
-        ctx.lineWidth = 1.5
-        ctx.stroke()
-        ctx.beginPath()
-        ctx.arc(0, -21, 3, 0, Math.PI * 2)
-        ctx.closePath()
-        ctx.fill()
-        ctx.restore()
-      }
-
-      const drawCircle = (circle, context) => {
-        const adjustedGeoRadius = Number(circle.geoRadius)
-        context.lineWidth = lineWidth
-        context.fillStyle = circle.color
-        context.beginPath()
-        context.arc(circle.x, circle.y, adjustedGeoRadius, 0, 2 * Math.PI)
-        context.fill()
-        context.stroke()
-      }
-
       if (state.general.type === 'us-geocode') {
         context.strokeStyle = 'black'
-        const geoRadius = state.visual.geoCodeCircleSize || 5
+        const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
+        const { additionalCityStyles } = state.visual || []
+        const cityStyles = Object.values(data)
+          .filter(d => additionalCityStyles.some(style => String(d[style.column]) === String(style.value)))
+          .map(d => {
+            const conditionsMatched = additionalCityStyles.find(
+              style => String(d[style.column]) === String(style.value)
+            )
+            return { ...conditionsMatched, ...d }
+          })
+
+        let cityPixelCoords = []
+        cityStyles.forEach(city => {
+          cityPixelCoords = topoData.projection([city[state.columns.longitude.name], city[state.columns.latitude.name]])
+
+          if (cityPixelCoords) {
+            const legendValues = applyLegendToRow(data[city?.value])
+            if (legendValues) {
+              const shapeType = city?.shape?.toLowerCase()
+              const shapeProperties = createShapeProperties(shapeType, cityPixelCoords, legendValues, state, geoRadius)
+              if (shapeProperties) {
+                drawShape(shapeProperties, context, state, lineWidth)
+              }
+            }
+          }
+        })
 
         runtimeKeys.forEach(key => {
+          const citiesList = new Set(cityStyles.map(item => item.value))
+
           const pixelCoords = topoData.projection([
             data[key][state.columns.longitude.name],
             data[key][state.columns.latitude.name]
           ])
-
-          if (pixelCoords) {
+          if (pixelCoords && !citiesList.has(key)) {
             const legendValues = data[key] !== undefined ? applyLegendToRow(data[key]) : false
-            if (legendValues && state.visual.cityStyle === 'circle') {
-              const circle = {
-                x: pixelCoords[0],
-                y: pixelCoords[1],
-                color: legendValues[0],
-                geoRadius: geoRadius
+            if (legendValues) {
+              const shapeType = state.visual.cityStyle.toLowerCase()
+              const shapeProperties = createShapeProperties(shapeType, pixelCoords, legendValues, state, geoRadius)
+              if (shapeProperties) {
+                drawShape(shapeProperties, context, state, lineWidth)
               }
-              drawCircle(circle, context)
-            }
-            if (legendValues && state.visual.cityStyle === 'pin') {
-              const pin = { x: pixelCoords[0], y: pixelCoords[1], color: legendValues[0] }
-              drawPin(pin, context)
             }
           }
         })
@@ -603,7 +603,8 @@ const CountyMap = props => {
         onClick={canvasClick}
         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}
@@ -595,7 +595,8 @@ const UsaMap = () => {
 
       {territories.length > 0 && (
         <>
-          <div className='two-col'>
+          {/* Temporarily make the max width fit the image width */}
+          <div className='two-col' style={{ maxWidth: 'calc(100% - 75px)' }}>
             <div>
               <span className='territories-label label'>{state.general.territoriesLabel}</span>
             </div>

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

@@ -0,0 +1,207 @@
+export const drawCircle = (circle, context, state) => {
+  const percentOfOriginalSize = 0.75
+  const adjustedGeoRadius =
+    state.mapPosition.zoom > 1 ? Number(circle.geoRadius) * percentOfOriginalSize : circle.geoRadius
+  context.lineWidth = 1
+  context.fillStyle = circle.color
+  context.beginPath()
+  context.arc(circle.x, circle.y, adjustedGeoRadius, 0, 2 * Math.PI)
+  context.fill()
+  context.stroke()
+}
+export const drawSquare = (square, context, state) => {
+  const percentOfOriginalSize = 0.75
+  const sideLength = square.size
+
+  const adjustedSize = state.mapPosition.zoom > 1 ? sideLength * percentOfOriginalSize : sideLength
+
+  context.lineWidth = square.lineWidth
+  context.fillStyle = square.color
+  context.beginPath()
+
+  const halfSize = adjustedSize / 2
+  const topLeftX = square.x - halfSize
+  const topLeftY = square.y - halfSize
+
+  context.rect(topLeftX, topLeftY, adjustedSize, adjustedSize)
+  context.fill()
+  context.stroke()
+}
+
+export const drawDiamond = (diamond, context, state) => {
+  const percentOfOriginalSize = 0.75
+  const fullSize = diamond.size
+
+  const adjustedSize = state.mapPosition.zoom > 1 ? fullSize * percentOfOriginalSize : fullSize
+
+  context.lineWidth = diamond.lineWidth
+  context.fillStyle = diamond.color
+  context.beginPath()
+
+  // Calculate the vertices of the diamond
+
+  const Ax = diamond.x
+  const Ay = diamond.y - adjustedSize / 2
+
+  // Vertex B (right vertex)
+  const Bx = diamond.x + adjustedSize / 2
+  const By = diamond.y
+
+  // Vertex C (bottom vertex)
+  const Cx = diamond.x
+  const Cy = diamond.y + adjustedSize / 2
+
+  // Vertex D (left vertex)
+  const Dx = diamond.x - adjustedSize / 2
+  const Dy = diamond.y
+
+  // Draw the diamond
+  context.moveTo(Ax, Ay)
+  context.lineTo(Bx, By)
+  context.lineTo(Cx, Cy)
+  context.lineTo(Dx, Dy)
+  context.closePath()
+  context.fill()
+  context.stroke()
+}
+export const drawTriangle = (triangle, context, state) => {
+  const percentOfOriginalSize = 0.75
+  const baseLength = triangle.size
+
+  // Adjust the size
+  const adjustedSize = state.mapPosition.zoom > 1 ? baseLength * percentOfOriginalSize : baseLength
+
+  // Calculate height
+  const height = (adjustedSize * Math.sqrt(3)) / 2
+
+  context.lineWidth = triangle.lineWidth
+  context.fillStyle = triangle.color
+  context.beginPath()
+
+  // Calculatef the triangle
+  const Ax = triangle.x
+  const Ay = triangle.y - height / 2
+
+  const Bx = triangle.x - adjustedSize / 2
+  const By = triangle.y + height / 2
+
+  const Cx = triangle.x + adjustedSize / 2
+  const Cy = By
+
+  // Draw the triangle
+  context.moveTo(Ax, Ay)
+  context.lineTo(Bx, By)
+  context.lineTo(Cx, Cy)
+  context.closePath()
+  context.fill()
+  context.stroke()
+}
+export const drawStar = (star, context, state) => {
+  const percentOfOriginalSize = 0.75
+  const spikes = star.spikes
+  const outerRadius = star.outerRadius
+  const innerRadius = star.innerRadius
+
+  const adjustedOuterRadius = state.mapPosition.zoom > 1 ? outerRadius * percentOfOriginalSize : outerRadius
+  const adjustedInnerRadius = state.mapPosition.zoom > 1 ? innerRadius * percentOfOriginalSize : innerRadius
+
+  context.lineWidth = star.lineWidth
+  context.fillStyle = star.color
+  context.beginPath()
+
+  let rot = (Math.PI / 2) * 3
+  let step = Math.PI / spikes
+
+  // Starting coordinates for the first point
+  let x = star.x
+  let y = star.y
+  context.moveTo(x, y - adjustedOuterRadius)
+
+  for (let i = 0; i < spikes; i++) {
+    x = star.x + Math.cos(rot) * adjustedOuterRadius
+    y = star.y + Math.sin(rot) * adjustedOuterRadius
+    context.lineTo(x, y)
+    rot += step
+
+    x = star.x + Math.cos(rot) * adjustedInnerRadius
+    y = star.y + Math.sin(rot) * adjustedInnerRadius
+    context.lineTo(x, y)
+    rot += step
+  }
+
+  context.lineTo(star.x, star.y - adjustedOuterRadius)
+  context.closePath()
+  context.fill()
+  context.stroke()
+}
+
+export const drawPin = (pin, ctx) => {
+  ctx.save()
+  ctx.translate(pin.x, pin.y)
+  ctx.beginPath()
+  ctx.moveTo(0, 0)
+  ctx.bezierCurveTo(2, -10, -20, -25, 0, -30)
+  ctx.bezierCurveTo(20, -25, -2, -10, 0, 0)
+  ctx.fillStyle = pin.color
+  ctx.fill()
+  ctx.strokeStyle = 'black'
+  ctx.lineWidth = 1
+  ctx.stroke()
+  ctx.beginPath()
+  ctx.arc(0, -21, 3, 0, Math.PI * 2)
+  ctx.closePath()
+  ctx.fill()
+  ctx.restore()
+}
+
+export const drawShape = (shape, context, state, additionalParams) => {
+  const shapeMap = {
+    circle: drawCircle,
+    square: drawSquare,
+    diamond: drawDiamond,
+    triangle: drawTriangle,
+    star: drawStar,
+    pin: drawPin
+  }
+
+  const drawFunction = shapeMap[shape.type]
+
+  if (drawFunction) {
+    drawFunction(shape, context, state, additionalParams)
+  } else {
+    console.error('Shape type not recognized or draw function not available:', shape.type)
+  }
+}
+
+export const createShapeProperties = (type, pixelCoords, legendValues, state, geoRadius) => {
+  const baseProps = {
+    x: pixelCoords[0],
+    y: pixelCoords[1],
+    color: legendValues[0],
+    size: geoRadius,
+    lineWidth: 1
+  }
+
+  switch (type) {
+    case 'circle':
+      return { ...baseProps, geoRadius: geoRadius, type: 'circle' }
+    case 'pin':
+      return { ...baseProps, type: 'pin' }
+    case 'square':
+      return { ...baseProps, type: 'square' }
+    case 'triangle':
+      return { ...baseProps, type: 'triangle' }
+    case 'diamond':
+      return { ...baseProps, type: 'diamond' }
+    case 'star':
+      return {
+        ...baseProps,
+        spikes: 5,
+        outerRadius: state.visual.geoCodeCircleSize / 3,
+        innerRadius: (state.visual.geoCodeCircleSize / 3) * 2,
+        type: 'star'
+      }
+    default:
+      return null
+  }
+}

package/src/coreStyles_map.scss

@@ -0,0 +1,3 @@
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/heading-colors';
+@import '@cdc/core/styles/v2/components/ui/tooltip';

package/src/data/initial-state.js

@@ -85,6 +85,7 @@ export default {
     caption: '',
     showDownloadUrl: false,
     showDataTableLink: true,
+    showDownloadLinkBelow: true,
     showFullGeoNameInCSV: false,
     forceDisplay: true,
     download: false,

package/src/index.jsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client'
 import CdcMap from './CdcMap'
 
 import 'react-tooltip/dist/react-tooltip.css'
+import './coreStyles_map.scss'
 
 let isEditor = window.location.href.includes('editor=true')
 let isDebug = window.location.href.includes('debug=true')
@@ -11,6 +12,11 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcMap isEditor={isEditor} isDebug={isDebug} configUrl={domContainer.attributes['data-config'].value} containerEl={domContainer} />
+    <CdcMap
+      isEditor={isEditor}
+      isDebug={isDebug}
+      configUrl={domContainer.attributes['data-config'].value}
+      containerEl={domContainer}
+    />
   </React.StrictMode>
 )

package/src/scss/editor-panel.scss

@@ -18,7 +18,7 @@
   .geo-buttons {
     list-style: none;
     display: flex;
-    color: $mediumGray;
+    color: var(--mediumGray);
     svg {
       display: block;
       max-width: 80px;
@@ -33,7 +33,7 @@
       background: transparent;
       padding: 0.3em 0.75em;
       display: flex;
-      border: $lightGray 1px solid;
+      border: var(--lightGray) 1px solid;
       width: 40%;
       align-items: center;
       margin-right: 1em;
@@ -110,11 +110,6 @@
   }
 
   .editor-panel {
-    //TODO: Remove after COVE refactor
-    &.cove {
-      @import '@cdc/core/styles/v2/layout/tooltip.scss';
-    }
-
     .cove-input-group,
     .cove-accordion__small-inputs {
       position: relative;
@@ -191,10 +186,10 @@
     }
 
     .accordion__heading {
-      background: $lightestGray;
+      background: var(--lightestGray);
     }
     .form-container {
-      border-right: $lightGray 1px solid;
+      border-right: var(--lightGray) 1px solid;
       flex-grow: 1;
     }
     .guidance-link {
@@ -207,7 +202,7 @@
       }
       svg {
         width: 60px;
-        color: $blue;
+        color: var(--blue);
         margin-right: 1rem;
         height: 60px; // IE11
         path {
@@ -551,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

@@ -1,9 +1,8 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
+@import 'mixins';
+
 @import 'variables';
 @import 'editor-panel';
 @import 'filters';
-@import '@cdc/core/styles/v2/components/ui/tooltip';
 
 .type-map--has-error {
   overflow: hidden !important;
@@ -39,7 +38,7 @@
 
   @include breakpointClass(md) {
     .map-container.modal-background::before {
-      border-bottom: $lightGray 1px solid;
+      border-bottom: var(--lightGray) 1px solid;
       margin-bottom: -1px;
       bottom: 1px;
     }
@@ -56,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;
@@ -194,7 +189,7 @@
     padding: 1em;
     z-index: 6;
     width: 100%;
-    border-top: $lightGray 1px solid;
+    border-top: var(--lightGray) 1px solid;
     label {
       flex-grow: 1;
       > div.select-heading {

package/src/scss/map.scss

@@ -31,7 +31,7 @@ header + .map-container.full-border {
 // World Specific Styles
 .map-container.world {
   &.data .geography-container {
-    border-bottom: $lightGray 1px solid;
+    border-bottom: var(--lightGray) 1px solid;
   }
   .geography-container {
     cursor: move;
@@ -129,6 +129,7 @@ $medium: 768px;
 }
 
 .territories-label {
+  color: black;
   margin: 2em 5px 2em 1em;
   font-size: 1.1em;
   display: block;
@@ -158,13 +159,16 @@ $medium: 768px;
   &--mobile {
     @extend .territories;
     width: 60%;
+    svg {
+      margin-bottom: 0.5em;
+    }
   }
 
   &--tablet {
     @extend .territories;
     width: 70%;
     svg {
-      margin-bottom: 0.2em;
+      margin-bottom: 0.5em;
     }
   }
 }
@@ -262,10 +266,6 @@ $medium: 768px;
   transition: none !important;
 }
 
-// .state {
-// 	display: none;
-// }
-
 .state {
   &--inactive:hover path {
     cursor: pointer;

package/src/scss/mixins.scss

@@ -0,0 +1,47 @@
+@mixin breakpoint($class) {
+  @if $class == xs {
+    @media (max-width: 767px) {
+      @content;
+    }
+  } @else if $class == sm {
+    @media (min-width: 768px) {
+      @content;
+    }
+  } @else if $class == md {
+    @media (min-width: 960px) {
+      @content;
+    }
+  } @else if $class == lg {
+    @media (min-width: 1300px) {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg";
+  }
+}
+
+@mixin breakpointClass($class) {
+  @if $class == xs {
+    &.xs,
+    &.xxs {
+      @content;
+    }
+  } @else if $class == sm {
+    &.sm,
+    &.md,
+    &.lg {
+      @content;
+    }
+  } @else if $class == md {
+    &.md,
+    &.lg {
+      @content;
+    }
+  } @else if $class == lg {
+    &.lg {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
+  }
+}

package/src/types/MapConfig.ts

@@ -10,7 +10,7 @@ export type MapVisualSettings = {
   /** extraBubbleBorder - Bubble Maps > adds a white circle around the bubble to show contrast on other bubbles */
   extraBubbleBorder: boolean
   /** cityStyle - visual indicator of cities on state maps */
-  cityStyle: 'circle' | 'pin'
+  cityStyle: 'circle' | 'pin' | 'star' | 'diamond' | 'triangle' | 'square'
   /** cityStyle - optional visual indicator of label on the Legend */
   cityStyleLabel: string
   /** geoCodeCircleSize - controls the size of the city style option (circle or pin) */
@@ -40,12 +40,15 @@ export type GeoColumnProperties = Pick<EditorColumnProperties, 'name' | 'label'
 export type LatitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
 export type LongitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
 export type NavigateColumnProperties = Pick<EditorColumnProperties, 'name'>
-export type PrimaryColumnProperties = Pick<EditorColumnProperties, 'dataTable' | 'label' | 'name' | 'prefix' | 'suffix' | 'tooltip'>
+export type PrimaryColumnProperties = Pick<
+  EditorColumnProperties,
+  'dataTable' | 'label' | 'name' | 'prefix' | 'suffix' | 'tooltip'
+>
 export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type LegendShapeItem = {
   column: string
   key: string
-  operator: string
+  operator: '=' | '≠' | '<' | '>' | '<=' | '>='
   shape: string
   value: string
 }

package/src/types/MapContext.ts

@@ -55,5 +55,4 @@ export type MapContext = {
   runtimeData: Object[]
   tooltipId: string
   setTopoData: Function
-  getTextWidth: (text: string, font: string) => string | undefined
 }