@cdc/map 4.24.10 → 4.24.12-2

package/src/hooks/useTooltip.ts

@@ -14,7 +14,9 @@ const useTooltip = props => {
     if (geoType === 'us-county' && type !== 'us-geocode') {
       let stateFipsCode = row[config.columns.geo.name].substring(0, 2)
       const stateName = supportedStatesFipsCodes[stateFipsCode]
-      toolTipText += hideGeoColumnInTooltip ? `<strong>${stateName}</strong><br/>` : `<strong>Location:  ${stateName}</strong><br/>`
+      toolTipText += hideGeoColumnInTooltip
+        ? `<strong>${stateName}</strong><br/>`
+        : `<strong>Location:  ${stateName}</strong><br/>`
     }
     return toolTipText
   }
@@ -61,7 +63,7 @@ const useTooltip = props => {
   const handleTooltipSpecialClassText = (specialClasses, column, row, value, columnKey) => {
     if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
       for (const specialClass of specialClasses) {
-        if (column.name === specialClass.key && String(row[specialClass.key]) === specialClass.value) {
+        if (column.name === specialClass.key && String(row?.[specialClass.key]) === specialClass.value) {
           value = displayDataAsText(specialClass.label, columnKey)
           break
         }
@@ -73,7 +75,8 @@ const useTooltip = props => {
   const handleTooltipPrimaryColumn = (tooltipValue, column) => {
     const { hidePrimaryColumnInTooltip } = config.general as { hidePrimaryColumnInTooltip: boolean }
     let tooltipPrefix = column.label?.length > 0 ? column.label : ''
-    if ((column.name === config.columns.primary.name && hidePrimaryColumnInTooltip) || !tooltipPrefix) return `<li class="tooltip-body">${tooltipValue}</li>`
+    if ((column.name === config.columns.primary.name && hidePrimaryColumnInTooltip) || !tooltipPrefix)
+      return `<li class="tooltip-body">${tooltipValue}</li>`
     return `<li class="tooltip-body">${tooltipPrefix}: ${tooltipValue}</li>`
   }
 
@@ -91,7 +94,7 @@ const useTooltip = props => {
       legend: { specialClasses }
     } = config
 
-    if (tooltipEnabledMaps.includes(currentMapType) && undefined !== row) {
+    if (tooltipEnabledMaps.includes(currentMapType) && (row !== undefined || config.general.geoType === 'world')) {
       toolTipText += `<ul>`
 
       // if tooltips are allowed, loop through each column
@@ -102,7 +105,7 @@ const useTooltip = props => {
           let tooltipValue = handleTooltipSpecialClassText(specialClasses, column, row, '', columnKey)
 
           if (!tooltipValue) {
-            tooltipValue = displayDataAsText(row[column.name], columnKey)
+            tooltipValue = row ? displayDataAsText(row[column.name], columnKey) : 'No Data'
           }
 
           toolTipText += handleTooltipPrimaryColumn(tooltipValue, column)
@@ -115,7 +118,7 @@ const useTooltip = props => {
   }
 
   const buildTooltip = (row, geoName, toolTipText = '') => {
-    if (!row) return
+    if (!row && config.general.geoType !== 'world') return
 
     // Handle County Location Columns
     toolTipText += handleTooltipStateNameColumn(toolTipText, row)

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,8 +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;
   }
@@ -22,18 +19,13 @@
 
   @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

@@ -47,7 +47,6 @@
 
 .cdc-map-inner-container {
   @import './map';
-  @import './datatable';
   flex-grow: 1;
   text-rendering: geometricPrecision;
   color: #202020;
@@ -55,10 +54,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

@@ -86,25 +86,10 @@ $medium: 768px;
       transition: 0.2s all;
     }
   }
-  // make logo smaller on mobile
-  @media screen and (max-width: $small) {
-    .map-logo {
-      position: absolute;
-      bottom: 4em; // needed to align to top of Territories
-      right: 1em;
-      z-index: 3;
-      width: 50px; // make it smaller
-    }
-  }
-  // everything else but mobile
-  @media screen and (min-width: $small) {
-    .map-logo {
-      position: absolute;
-      bottom: 2em;
-      right: 1em;
-      z-index: 3;
-      width: 75px;
-    }
+  .map-logo {
+    display: block;
+    margin: 0 0 0 auto;
+    max-height: 35px;
   }
 }
 
@@ -116,61 +101,25 @@ $medium: 768px;
   }
 }
 
-// for Territories label in one col and Territory blocks wrapping in 2nd column
-.two-col {
-  display: flex;
-  margin-top: 0;
-
-  justify-content: flex-start;
-  > label {
-    margin-top: 0;
-    display: inline-block;
-  }
-}
-
 .territories-label {
   color: black;
-  margin: 2em 5px 2em 1em;
   font-size: 1.1em;
   display: block;
+  margin-top: 15px;
 }
 
 // Cities and Territories
 .territories {
-  margin: 2em 200px 2em 0;
-  font-size: 1.1em;
-  width: 100%;
-  display: block;
-  align-items: center;
-  > span {
-    margin-left: 1em;
-    margin-right: 0.5em;
-  }
+  gap: 0.5em;
   svg {
     max-width: 35px;
     min-width: 25px;
-    margin-left: 0.5em;
     transition: 0.3s all;
+
     text {
       font-size: 0.95em;
     }
   }
-
-  &--mobile {
-    @extend .territories;
-    width: 60%;
-    svg {
-      margin-bottom: 0.5em;
-    }
-  }
-
-  &--tablet {
-    @extend .territories;
-    width: 70%;
-    svg {
-      margin-bottom: 0.5em;
-    }
-  }
 }
 
 .zoom-controls {
@@ -266,10 +215,6 @@ $medium: 768px;
   transition: none !important;
 }
 
-// .state {
-// 	display: none;
-// }
-
 .state {
   &--inactive:hover path {
     cursor: pointer;
@@ -384,5 +329,8 @@ canvas {
 }
 
 .data-table-container {
-  margin: 5px 0px !important;
+  margin: 20px 0px 0px;
+  &.download-link-above {
+    margin-top: 0;
+  }
 }

package/src/types/MapConfig.ts

@@ -1,6 +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 { VizFilter } from '@cdc/core/types/VizFilter'
 
 export type MapVisualSettings = {
   /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
@@ -33,6 +35,7 @@ type PatternSelection = {
   label: string
   // size of pattern
   size: 'small' | 'medium' | 'large'
+  color: string
   contrastCheck: boolean
 }
 
@@ -48,7 +51,7 @@ export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type LegendShapeItem = {
   column: string
   key: string
-  operator: string
+  operator: '=' | '≠' | '<' | '>' | '<=' | '>='
   shape: string
   value: string
 }
@@ -79,7 +82,7 @@ export type MapConfig = Visualization & {
   }
   dataUrl: string
   runtimeDataUrl: string
-  filters: any[]
+  filters: VizFilter[]
   general: {
     allowMapZoom: boolean
     convertFipsCodes: boolean
@@ -163,5 +166,8 @@ export type MapConfig = Visualization & {
   }
   hexMap: HexMapSettings
   filterBehavior: string
+  filterIntro: string
   visual: MapVisualSettings
+  // version of the map
+  version: Version
 }

package/src/types/MapContext.ts

@@ -24,6 +24,7 @@ export type MapContext = {
   isEditor
   isFilterValueSupported: boolean
   loadConfig
+  logo: string
   navigationHandler
   position
   resetLegendToggles