@cdc/map 4.24.12 → 4.25.2-25

package/src/scss/main.scss

@@ -48,7 +48,6 @@
 .cdc-map-inner-container {
   @import './map';
   flex-grow: 1;
-  text-rendering: geometricPrecision;
   color: #202020;
   border: 0;
   text-align: left;
@@ -81,10 +80,7 @@
         content: ' ';
         position: absolute;
         top: 0;
-        left: -1em;
-        right: -1em;
         bottom: 0;
-        background: rgba(0, 0, 0, 0.05);
         z-index: 7;
       }
       .modal-content {
@@ -94,71 +90,72 @@
         top: 50%;
         left: 50%;
         display: flex;
-        flex-direction: row;
-        border-radius: 5px;
+        flex-direction: column;
         transform: translate(-50%, -50%);
-        border: rgba(0, 0, 0, 0.3) 1px solid;
-        box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 7px;
-        opacity: 1;
-        line-height: 1.4em;
-        font-size: 1rem;
-        border-radius: 4px;
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+        padding: 16px 40px;
         min-width: 250px;
-        padding: 16px 40px 16px 20px;
         width: auto;
-        .content {
-          flex-grow: 1;
-        }
-        .legend-item {
-          margin-right: 0.75em;
-          margin-top: 3px;
-          flex-shrink: 0;
-        }
-        @include breakpointClass(sm) {
-          transform: translate(-50%, -100%);
-        }
-        @include breakpointClass(md) {
-          transform: translate(-50%, -120%);
-        }
-        @include breakpointClass(lg) {
-          font-size: 0.9em;
-          min-width: 300px;
-          .legend-item {
-            height: 1.3em;
-            width: 1.3em;
-          }
-        }
-        strong {
-          font-weight: 600;
-          font-size: 1.2em;
-        }
-        .modal-close {
-          position: absolute;
-          right: 20px;
-          top: 18px;
-          cursor: pointer;
-          width: 1em;
-        }
-        a.navigation-link {
-          text-decoration: underline;
-          cursor: pointer;
-          color: #075290;
-          display: flex;
-          svg {
-            display: inline-block;
-            max-width: 13px;
-            margin-left: 0.5em;
-          }
-        }
-        &.capitalize p {
-          text-transform: capitalize;
+        max-height: 90vh; /* Constrain the modal's height to 90% of the viewport */
+        overflow-y: auto; /* Enable vertical scrolling if content overflows */
+        font-size: 1rem;
+        line-height: 1.4em;
+      }
+
+      .modal-content .content {
+        flex-grow: 1;
+      }
+
+      .modal-content .legend-item {
+        margin-right: 0.75em;
+        margin-top: 3px;
+        flex-shrink: 0;
+      }
+
+      .modal-content strong {
+        font-weight: 600;
+        font-size: 1.2em;
+      }
+
+      .modal-content .modal-close {
+        position: absolute;
+        right: 20px;
+        top: 18px;
+        cursor: pointer;
+        width: 1em;
+      }
+
+      .modal-content a.navigation-link {
+        text-decoration: underline;
+        cursor: pointer;
+        color: #075290;
+        display: flex;
+      }
+
+      .modal-content a.navigation-link svg {
+        display: inline-block;
+        max-width: 13px;
+        margin-left: 0.5em;
+      }
+
+      .modal-content.capitalize p {
+        text-transform: capitalize;
+      }
+
+      /* Responsive adjustments for smaller screens */
+      @media (max-width: 1048px) {
+        .modal-content {
+          width: 90%; /* Adjust width to fit smaller screens */
+          top: 10%; /* Offset from the top for better usability */
+          transform: translate(-50%, 0); /* Remove vertical centering */
         }
       }
     }
   }
 
   p.subtext {
-    font-size: 0.9em;
     em {
       font-style: italic;
     }
@@ -168,7 +165,6 @@
   }
 
   span.legend-item {
-    margin-right: 5px;
     border-radius: 300px;
     vertical-align: middle;
     display: inline-block;

package/src/scss/map.scss

@@ -75,7 +75,6 @@ $medium: 768px;
   position: relative;
   flex-grow: 1;
   width: 100%;
-  overflow: hidden;
   .geo-point {
     transition: 0.3s all;
     circle {
@@ -102,10 +101,7 @@ $medium: 768px;
 }
 
 .territories-label {
-  color: black;
-  font-size: 1.1em;
-  display: block;
-  margin-top: 15px;
+  font-size: 1em;
 }
 
 // Cities and Territories
@@ -194,7 +190,6 @@ $medium: 768px;
     transform: none;
   }
   .territories {
-    font-size: 1em;
     > span {
       margin-left: 0;
     }
@@ -327,10 +322,3 @@ canvas {
   pointer-events: none;
   display: none;
 }
-
-.data-table-container {
-  margin: 20px 0px 0px;
-  &.download-link-above {
-    margin-top: 0;
-  }
-}

package/src/types/MapConfig.ts

@@ -1,7 +1,8 @@
-import { ComponentThemes } from '@cdc/core/types/ComponentThemes'
-import { Visualization } from '@cdc/core/types/Visualization'
-import { EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
-import { Version } from '@cdc/core/types/Version'
+import { type ComponentThemes } from '@cdc/core/types/ComponentThemes'
+import { type Visualization } from '@cdc/core/types/Visualization'
+import { type EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
+import { type Version } from '@cdc/core/types/Version'
+import { type VizFilter } from '@cdc/core/types/VizFilter'
 
 export type MapVisualSettings = {
   /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
@@ -15,9 +16,8 @@ export type MapVisualSettings = {
   /** cityStyle - optional visual indicator of label on the Legend */
   cityStyleLabel: string
   /** geoCodeCircleSize - controls the size of the city style option (circle or pin) */
-
   geoCodeCircleSize: number
-  /** showBubbleZeros - shows circles on maps when the data is provided even if its a zero value */
+  /** showBubbleZeros - shows circles on maps when the data is provided even if it's a zero value */
   showBubbleZeros: boolean
   /** additionalCityStyles - shows Circle, Square, Triangle, Rhombus/Diamond, Star, Map Pin on maps when the additionalCityStyles is added */
   additionalCityStyles: [] | [{ label: string; column: string; value: string; shape: string }]
@@ -46,7 +46,7 @@ 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
@@ -77,11 +77,11 @@ export type MapConfig = Visualization & {
     navigate: NavigateColumnProperties
     latitude: LatitudeColumnProperties
     longitude: LongitudeColumnProperties
-    categorical: { name }
+    categorical: { name: string }
   }
   dataUrl: string
   runtimeDataUrl: string
-  filters: any[]
+  filters: VizFilter[]
   general: {
     allowMapZoom: boolean
     convertFipsCodes: boolean
@@ -90,7 +90,16 @@ export type MapConfig = Visualization & {
     fullBorder: boolean
     geoBorderColor: string
     geoLabelOverride: string
-    geoType: 'us' | 'us-county' | 'world'
+    geoType:
+      | 'us'
+      | 'us-region'
+      | 'us-county'
+      | 'world'
+      | 'us-geocode'
+      | 'world-geocode'
+      | 'bubble'
+      | 'single-state'
+      | 'google-map'
     hasRegions: boolean
     headerColor: ComponentThemes
     hideGeoColumnInTooltip: boolean
@@ -150,7 +159,7 @@ export type MapConfig = Visualization & {
   tooltips: {
     appearanceType: 'hover' | 'click'
     linkLabel: string
-    capitalizeLabels: true
+    capitalizeLabels: boolean
     opacity: number
   }
   runtime: {

package/src/types/MapContext.ts

@@ -1,11 +1,10 @@
-import { type MapConfig, type ViewportSize } from './MapConfig'
+import { type MapConfig } from './MapConfig'
+import { type ViewPort } from '@cdc/core/types/ViewPort'
 
 export type MapContext = {
   applyLegendToRow
   applyTooltipsToGeo
-  closeModal
-  columnsInData
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
   data
   displayDataAsText
   displayGeoName
@@ -16,7 +15,6 @@ export type MapContext = {
   handleCircleClick: Function
   handleDragStateChange: Function
   isDraggingAnnotation: boolean
-  handleMapAriaLabels
   hasZoom
   innerContainerRef
   isDashboard
@@ -25,7 +23,6 @@ export type MapContext = {
   isFilterValueSupported: boolean
   loadConfig
   logo: string
-  navigationHandler
   position
   resetLegendToggles
   runtimeFilters
@@ -38,13 +35,8 @@ export type MapContext = {
   setRuntimeFilters
   setRuntimeLegend
   setSharedFilterValue
-  setState
+  setState: (newState: MapConfig) => MapConfig
   state: MapConfig
-  supportedCities
-  supportedCounties
-  supportedCountries
-  supportedTerritories
-  titleCase
   viewport
   setStateToShow: (string) => void
   stateToShow: string