@cdc/map 4.25.10 → 4.25.11

package/examples/example-city-state.json

@@ -19,7 +19,15 @@
     "displayStateLabels": false,
     "fullBorder": false,
     "palette": {
-      "isReversed": false
+      "isReversed": false,
+      "customColors": [
+        "red",
+        "red",
+        "orange",
+        "orange",
+        "yellow",
+        "yellow"
+      ]
     },
     "allowMapZoom": true,
     "hideGeoColumnInTooltip": false,

package/examples/multi-country-centering.json

@@ -0,0 +1,45 @@
+{
+  "data": [
+    {
+      "geo": "US",
+      "value": 100
+    },
+    {
+      "geo": "CA",
+      "value": 200
+    },
+    {
+      "geo": "MX",
+      "value": 150
+    }
+  ],
+  "columns": {
+    "geo": {
+      "name": "geo"
+    },
+    "primary": {
+      "name": "value"
+    }
+  },
+  "type": "world",
+  "general": {
+    "geoType": "world",
+    "type": "data",
+    "title": "Multi-Country Centering Test",
+    "showTitle": true,
+    "countriesPicked": [
+      { "iso": "US", "name": "United States" },
+      { "iso": "CA", "name": "Canada" },
+      { "iso": "MX", "name": "Mexico" }
+    ],
+    "hideUnselectedCountries": true,
+    "allowMapZoom": true
+  },
+  "legend": {
+    "descriptions": {
+      "US": "United States",
+      "CA": "Canada",
+      "MX": "Mexico"
+    }
+  }
+}

package/examples/private/colors-2.json

@@ -0,0 +1,221 @@
+{
+  "annotations": [],
+  "general": {
+    "navigationTarget": "_self",
+    "noDataMessage": "No State Selected",
+    "annotationDropdownText": "Annotations",
+    "geoBorderColor": "darkGray",
+    "headerColor": "theme-blue",
+    "title": "",
+    "showTitle": true,
+    "showSidebar": true,
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "territoriesAlwaysShow": false,
+    "language": "en",
+    "geoType": "us-county",
+    "geoLabelOverride": "Sewershed",
+    "hasRegions": false,
+    "fullBorder": false,
+    "type": "us-geocode",
+    "convertFipsCodes": true,
+    "palette": {
+      "isReversed": false,
+      "name": "sequential_pink_purple",
+      "version": "1.0",
+      "customColors": [
+        "#6b0057",
+        "#6b0057",
+        "#6b0057",
+        "#5bc2b9",
+        "#e0e0e0",
+        "#e0e0e0"
+      ],
+      "backups": [
+        {
+          "name": "sequential_pink_purple",
+          "version": "1.0",
+          "isReversed": false
+        }
+      ]
+    },
+    "allowMapZoom": false,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "statesPicked": [
+      {
+        "fipsCode": "01",
+        "stateName": "Alabama"
+      }
+    ],
+    "expandDataTable": false,
+    "introText": "",
+    "subtext": "<div class=\"text-left ml-3 pb-3\" >\nWastewater measles data available on this site may not represent all jurisdictions currently conducting monitoring. Some states and local health departments may publish additional data on their own webpages. CDC continues to work closely with partners to integrate these data into national reporting.\n\nFor Utah, please visit: <a href=\"https://avrpublic.dhhs.utah.gov/uwss/\">Utah Department of Health and Human Services</a>.\n</div>\n\n<div class=\"text-left ml-3 pb-3\">Data <span class=\"date\">FromDB</span></div>\n<p class=\"float-right\"><a href=\"/wcms/vizdata/NCEZID_DIDRI/measles/nwssmeaslessitemapnocoords.csv\">Download Data</a></p>",
+    "footnotes": ""
+  },
+  "type": "map",
+  "columns": {
+    "geo": {
+      "name": "Sewershed",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "",
+      "name": "Detection_Category",
+      "label": "Detection Category",
+      "roundToPlace": 0
+    },
+    "navigate": {
+      "name": ""
+    },
+    "latitude": {
+      "name": "Latitude"
+    },
+    "longitude": {
+      "name": "Longitude"
+    },
+    "additionalColumn1": {
+      "label": "State/Territory",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "State/Territory",
+      "tooltip": true
+    },
+    "additionalColumn2": {
+      "label": "Counties Served",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "Counties_Served",
+      "tooltip": true
+    },
+    "additionalColumn4": {
+      "label": "Population Served",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "Population_Served",
+      "useCommas": true,
+      "tooltip": true
+    }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": false,
+    "singleRow": true,
+    "verticalSorted": false,
+    "showSpecialClassesLast": false,
+    "dynamicDescription": false,
+    "type": "category",
+    "numberOfItems": 3,
+    "position": "bottom",
+    "title": "Select a detection type below to add or remove it from the map.",
+    "style": "circles",
+    "subStyle": "linear blocks",
+    "tickRotation": "",
+    "singleColumnLegend": false,
+    "hideBorder": false,
+    "groupBy": "",
+    "categoryValuesOrder": [
+      "Detection",
+      "No Detection",
+      "No Data",
+      "H5 Detection",
+      "No Samples in Last Week"
+    ],
+    "additionalCategories": [
+      "Detection",
+      ""
+    ]
+  },
+  "filters": [],
+  "table": {
+    "wrapColumns": false,
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": false,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": false,
+    "indexLabel": "Sewershed",
+    "cellMinWidth": "0",
+    "collapsible": true
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "opacity": 90,
+    "capitalizeLabels": true
+  },
+  "visual": {
+    "minBubbleSize": 1,
+    "maxBubbleSize": 20,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "cityStyleLabel": "",
+    "showBubbleZeros": false,
+    "additionalCityStyles": [],
+    "geoCodeCircleSize": "5"
+  },
+  "mapPosition": {
+    "coordinates": [
+      0,
+      30
+    ],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": [
+      {
+        "legendTitle": "",
+        "legendDescription": "",
+        "items": [
+          {
+            "key": "",
+            "shape": "Arrow Up",
+            "column": "",
+            "operator": "=",
+            "value": ""
+          }
+        ]
+      }
+    ]
+  },
+  "filterBehavior": "Filter Change",
+  "filterIntro": "",
+  "markupVariables": [],
+  "enableMarkupVariables": false,
+  "dataFileName": "/wcms/vizdata/NCEZID_DIDRI/measles/nwssmeaslessitemap.json",
+  "dataFileSourceType": "url",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "version": "4.25.10",
+  "dataUrl": "https://www.cdc.gov/wcms/vizdata/NCEZID_DIDRI/measles/nwssmeaslessitemap.json",
+  "migrations": {
+    "addColorMigration": true
+  }
+}

package/examples/private/colors.json

@@ -0,0 +1,221 @@
+{
+  "annotations": [],
+  "general": {
+    "navigationTarget": "_self",
+    "noDataMessage": "No State Selected",
+    "annotationDropdownText": "Annotations",
+    "geoBorderColor": "darkGray",
+    "headerColor": "theme-blue",
+    "title": "",
+    "showTitle": true,
+    "showSidebar": true,
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "territoriesAlwaysShow": false,
+    "language": "en",
+    "geoType": "us-county",
+    "geoLabelOverride": "Sewershed",
+    "hasRegions": false,
+    "fullBorder": false,
+    "type": "us-geocode",
+    "convertFipsCodes": true,
+    "palette": {
+      "isReversed": false,
+      "name": "sequential_pink_purple",
+      "version": "1.0",
+      "customColors": [
+        "#6b0057",
+        "#6b0057",
+        "#6b0057",
+        "#5bc2b9",
+        "#e0e0e0",
+        "#e0e0e0"
+      ],
+      "backups": [
+        {
+          "name": "sequential_pink_purple",
+          "version": "1.0",
+          "isReversed": false
+        }
+      ]
+    },
+    "allowMapZoom": false,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "statesPicked": [
+      {
+        "fipsCode": "01",
+        "stateName": "Alabama"
+      }
+    ],
+    "expandDataTable": false,
+    "introText": "",
+    "subtext": "<div class=\"text-left ml-3 pb-3\" >\nWastewater measles data available on this site may not represent all jurisdictions currently conducting monitoring. Some states and local health departments may publish additional data on their own webpages. CDC continues to work closely with partners to integrate these data into national reporting.\n\nFor Utah, please visit: <a href=\"https://avrpublic.dhhs.utah.gov/uwss/\">Utah Department of Health and Human Services</a>.\n</div>\n\n<div class=\"text-left ml-3 pb-3\">Data <span class=\"date\">FromDB</span></div>\n<p class=\"float-right\"><a href=\"/wcms/vizdata/NCEZID_DIDRI/measles/nwssmeaslessitemapnocoords.csv\">Download Data</a></p>",
+    "footnotes": ""
+  },
+  "type": "map",
+  "columns": {
+    "geo": {
+      "name": "Sewershed",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "",
+      "name": "Detection_Category",
+      "label": "Detection Category",
+      "roundToPlace": 0
+    },
+    "navigate": {
+      "name": ""
+    },
+    "latitude": {
+      "name": "Latitude"
+    },
+    "longitude": {
+      "name": "Longitude"
+    },
+    "additionalColumn1": {
+      "label": "State/Territory",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "State/Territory",
+      "tooltip": true
+    },
+    "additionalColumn2": {
+      "label": "Counties Served",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "Counties_Served",
+      "tooltip": true
+    },
+    "additionalColumn4": {
+      "label": "Population Served",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "Population_Served",
+      "useCommas": true,
+      "tooltip": true
+    }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": false,
+    "singleRow": true,
+    "verticalSorted": false,
+    "showSpecialClassesLast": false,
+    "dynamicDescription": false,
+    "type": "category",
+    "numberOfItems": 3,
+    "position": "bottom",
+    "title": "Select a detection type below to add or remove it from the map.",
+    "style": "circles",
+    "subStyle": "linear blocks",
+    "tickRotation": "",
+    "singleColumnLegend": false,
+    "hideBorder": false,
+    "groupBy": "",
+    "categoryValuesOrder": [
+      "Detection",
+      "No Detection",
+      "No Data",
+      "H5 Detection",
+      "No Samples in Last Week"
+    ],
+    "additionalCategories": [
+      "Detection",
+      ""
+    ]
+  },
+  "filters": [],
+  "table": {
+    "wrapColumns": false,
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": false,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": false,
+    "indexLabel": "Sewershed",
+    "cellMinWidth": "0",
+    "collapsible": true
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "opacity": 90,
+    "capitalizeLabels": true
+  },
+  "visual": {
+    "minBubbleSize": 1,
+    "maxBubbleSize": 20,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "cityStyleLabel": "",
+    "showBubbleZeros": false,
+    "additionalCityStyles": [],
+    "geoCodeCircleSize": "5"
+  },
+  "mapPosition": {
+    "coordinates": [
+      0,
+      30
+    ],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": [
+      {
+        "legendTitle": "",
+        "legendDescription": "",
+        "items": [
+          {
+            "key": "",
+            "shape": "Arrow Up",
+            "column": "",
+            "operator": "=",
+            "value": ""
+          }
+        ]
+      }
+    ]
+  },
+  "filterBehavior": "Filter Change",
+  "filterIntro": "",
+  "markupVariables": [],
+  "enableMarkupVariables": false,
+  "dataFileName": "/wcms/vizdata/NCEZID_DIDRI/measles/nwssmeaslessitemap.json",
+  "dataFileSourceType": "url",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "version": "4.25.10",
+  "dataUrl": "https://www.cdc.gov/wcms/vizdata/NCEZID_DIDRI/measles/nwssmeaslessitemap.json",
+  "migrations": {
+    "addColorMigration": true
+  }
+}

package/index.html

@@ -30,7 +30,8 @@
 
 <body>
   <!-- DEFAULT EXAMPLES -->
-  <div class="react-container" data-config="/examples/example-city-state.json"></div>
+  <!-- <div class="react-container" data-config="/examples/example-city-state.json"></div> -->
+  <div class="react-container" data-config="/examples/private/measles.json"></div>
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script type="module" src="./src/index.jsx"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.25.10",
+  "version": "4.25.11",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "moduleName": "CdcMap",
   "main": "dist/cdcmap",
@@ -25,7 +25,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.25.10",
+    "@cdc/core": "^4.25.11",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-google-maps/api": "^2.20.6",
@@ -57,7 +57,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "topojson-client": "^3.1.0",
     "use-debounce": "^10.0.5",
-    "vite": "^4.4.11",
+    "vite": "^5.4.21",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^2.4.0",
     "whatwg-fetch": "3.6.20"
@@ -66,5 +66,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
+  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
 }

package/src/CdcMapComponent.tsx

@@ -40,12 +40,13 @@ import {
   hashObj,
   navigationHandler
 } from './helpers'
-import generateRuntimeLegend from './helpers/generateRuntimeLegend'
+import { generateRuntimeLegend } from './helpers/generateRuntimeLegend'
 import generateRuntimeData from './helpers/generateRuntimeData'
 import { reloadURLData } from './helpers/urlDataHelpers'
 import { observeMapSvgLoaded } from './helpers/mapObserverHelpers'
 import { buildSectionClassNames } from './helpers/componentHelpers'
 import { shouldShowDataTable } from './helpers/dataTableHelpers'
+import { prepareSmallMultiplesDataTable } from './helpers/smallMultiplesHelpers'
 
 // Child Components
 import Annotation from './components/Annotation'
@@ -169,7 +170,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   const tooltipId = 'tooltipId'
 
   // hooks
-  const { currentViewport, dimensions, container, outerContainerRef } = useResizeObserver(isEditor)
+  const { currentViewport, vizViewport, dimensions, container, outerContainerRef } = useResizeObserver(isEditor)
 
   useEffect(() => {
     if (!mapSvg.current || coveLoadedHasRan) return
@@ -229,7 +230,10 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     } else {
       if (hashLegend !== runtimeLegend?.fromHash && undefined === runtimeData?.init) {
         const legend = generateRuntimeLegend(
-          config,
+          {
+            ...config,
+            legend: { ...config.legend, unified: config.smallMultiples?.mode ? true : config.legend?.unified }
+          },
           runtimeData,
           hashLegend,
           setConfig,
@@ -245,7 +249,11 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   useEffect(() => {
     const hashLegend = generateRuntimeLegendHash(config, runtimeFilters)
     const legend = generateRuntimeLegend(
-      { ...config, data: configObj.data },
+      {
+        ...config,
+        data: configObj.data,
+        legend: { ...config.legend, unified: config.smallMultiples?.mode ? true : config.legend?.unified }
+      },
       runtimeData,
       hashLegend,
       setConfig,
@@ -327,6 +335,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     container,
     content: modal,
     currentViewport,
+    vizViewport,
     customNavigationHandler,
     dimensions,
     filteredCountryCode,
@@ -379,6 +388,17 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     </a>
   )
 
+  // Prepare data table props (pivot if small multiples mode is enabled)
+  let dataTableConfig = config
+  let dataTableColumns = columns
+  let dataTableRuntimeData = runtimeData
+  if (config.smallMultiples?.mode) {
+    const prepared = prepareSmallMultiplesDataTable(config, columns, runtimeData)
+    dataTableConfig = prepared.config
+    dataTableColumns = prepared.columns
+    dataTableRuntimeData = prepared.runtimeData
+  }
+
   return (
     <LegendMemoProvider legendMemo={legendMemo} legendSpecialClassLastMemo={legendSpecialClassLastMemo}>
       <ConfigContext.Provider value={mapProps}>
@@ -487,13 +507,13 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
 
                   {shouldShowDataTable(config, table, general, loading) && (
                     <DataTable
-                      columns={columns}
-                      config={config}
+                      columns={dataTableColumns}
+                      config={dataTableConfig}
                       currentViewport={currentViewport}
                       displayGeoName={displayGeoName}
                       expandDataTable={table.expanded}
                       formatLegendLocation={key =>
-                        formatLegendLocation(key, runtimeData?.[key]?.[config.columns.geo.name])
+                        formatLegendLocation(key, dataTableRuntimeData?.[key]?.[config.columns.geo.name])
                       }
                       headerColor={general.headerColor}
                       imageRef={imageId}
@@ -503,8 +523,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                       legendSpecialClassLastMemo={legendSpecialClassLastMemo}
                       navigationHandler={navigationHandler}
                       outerContainerRef={outerContainerRef}
-                      rawData={config.data}
-                      runtimeData={runtimeData}
+                      rawData={dataTableConfig.data}
+                      runtimeData={dataTableRuntimeData}
                       runtimeLegend={runtimeLegend}
                       showDownloadImgButton={showDownloadImgButton}
                       showDownloadPdfButton={showDownloadPdfButton}
@@ -526,16 +546,14 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                 {accessibleStatus}
               </div>
 
-              {!isDraggingAnnotation &&
-                !window.matchMedia('(any-hover: none)').matches &&
-                'hover' === tooltips.appearanceType && (
-                  <ReactTooltip
-                    id={`tooltip__${tooltipId}`}
-                    float={true}
-                    className={`tooltip tooltip-test`}
-                    style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }}
-                  />
-                )}
+              {!isDraggingAnnotation && 'hover' === tooltips.appearanceType && (
+                <ReactTooltip
+                  id={`tooltip__${tooltipId}`}
+                  float={true}
+                  className={`tooltip tooltip-test`}
+                  style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }}
+                />
+              )}
               <div
                 ref={tooltipRef}
                 id={`tooltip__${tooltipId}-canvas`}
@@ -547,7 +565,13 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                   display: 'none' // can't use d-none here
                 }}
               ></div>
-              <FootnotesStandAlone config={config.footnotes} filters={config.filters?.filter(f => f.filterFootnotes)} />
+              <FootnotesStandAlone
+                config={config.footnotes}
+                filters={config.filters?.filter(f => f.filterFootnotes)}
+                markupVariables={config.markupVariables}
+                enableMarkupVariables={config.enableMarkupVariables}
+                data={config.data}
+              />
             </Layout.Responsive>
           </Layout.VisualizationWrapper>
         </MapDispatchContext.Provider>