@cdc/map 4.25.6 → 4.25.7

package/src/_stories/_mock/floating-point.json

@@ -0,0 +1,427 @@
+{
+    "general": {
+        "geoType": "us",
+        "geoBorderColor": "darkGray",
+        "showTitle": false,
+        "showSidebar": true,
+        "showDownloadButton": false,
+        "showDownloadMediaButton": false,
+        "displayAsHex": true,
+        "displayStateLabels": false,
+        "territoriesLabel": "Territories",
+        "language": "en",
+        "hasRegions": false,
+        "expandDataTable": false,
+        "fullBorder": false,
+        "type": "data",
+        "palette": {
+            "isReversed": true
+        },
+        "geoLabelOverride": "",
+        "convertFipsCodes": true,
+        "allowMapZoom": true,
+        "hideGeoColumnInTooltip": false,
+        "hidePrimaryColumnInTooltip": false,
+        "superTitle": "",
+        "equalNumberOptIn": true,
+        "navigationTarget": "_self",
+        "noStateFoundMessage": "Map Unavailable",
+        "annotationDropdownText": "Annotations",
+        "headerColor": "theme-blue",
+        "title": "",
+        "territoriesAlwaysShow": false,
+        "statePicked": {
+            "fipsCode": "01",
+            "stateName": "Alabama"
+        }
+    },
+    "type": "map",
+    "customColors": [
+        "gray",
+        "#edf8fb",
+        "gray",
+        "#b3cde3",
+        "gray",
+        "#8c96c6",
+        "#8856a7",
+        "#810f7c"
+    ],
+    "columns": {
+        "geo": {
+            "name": "state",
+            "label": "Location",
+            "tooltip": false,
+            "dataTable": true
+        },
+        "primary": {
+            "dataTable": true,
+            "tooltip": true,
+            "prefix": "",
+            "suffix": "%",
+            "name": "value",
+            "label": "",
+            "roundToPlace": 1
+        },
+        "navigate": {
+            "name": ""
+        },
+        "latitude": {
+            "name": ""
+        },
+        "longitude": {
+            "name": ""
+        }
+    },
+    "legend": {
+        "descriptions": {},
+        "specialClasses": [
+            {
+                "key": "value",
+                "value": "",
+                "label": "No data"
+            }
+        ],
+        "unified": false,
+        "singleColumn": false,
+        "dynamicDescription": false,
+        "type": "equalnumber",
+        "numberOfItems": 5,
+        "position": "side",
+        "title": "Legend",
+        "singleRow": false,
+        "verticalSorted": false,
+        "showSpecialClassesLast": true,
+        "categoryValuesOrder": [
+            "No",
+            "Yes"
+        ]
+    },
+    "filters": [],
+    "table": {
+        "wrapColumns": false,
+        "label": "Data Table",
+        "expanded": false,
+        "limitHeight": false,
+        "height": "",
+        "caption": "",
+        "showDownloadUrl": false,
+        "showDataTableLink": false,
+        "showFullGeoNameInCSV": false,
+        "forceDisplay": false,
+        "download": true,
+        "indexLabel": "",
+        "showDownloadLinkBelow": true,
+        "cellMinWidth": "0"
+    },
+    "tooltips": {
+        "appearanceType": "hover",
+        "linkLabel": "Learn More",
+        "capitalizeLabels": true,
+        "opacity": 90
+    },
+    "visual": {
+        "minBubbleSize": 1,
+        "maxBubbleSize": 20,
+        "extraBubbleBorder": false,
+        "cityStyle": "circle",
+        "cityStyleLabel": "",
+        "showBubbleZeros": false,
+        "additionalCityStyles": [],
+        "geoCodeCircleSize": 8
+    },
+    "mapPosition": {
+        "coordinates": [
+            0,
+            30
+        ],
+        "zoom": 1
+    },
+    "map": {
+        "layers": [],
+        "patterns": []
+    },
+    "filterBehavior": "Filter Change",
+    "dataTable": {
+        "title": "Data Table",
+        "forceDisplay": true,
+        "caption": "Lorem Ipsum - Text added to Data Table Caption",
+        "limitHeight": true,
+        "height": "100"
+    },
+    "orientation": null,
+    "visualizationSubType": null,
+    "validated": "4.24.3",
+    "version": "4.24.12",
+    "data": [
+        {
+            "state": "Alaska",
+            "stratification": "Total",
+            "value": "33.3"
+        },
+        {
+            "state": "Alabama",
+            "stratification": "Total",
+            "value": "32.7"
+        },
+        {
+            "state": "Arkansas",
+            "stratification": "Total",
+            "value": "31.8"
+        },
+        {
+            "state": "Arizona",
+            "stratification": "Total",
+            "value": "34.5"
+        },
+        {
+            "state": "California",
+            "stratification": "Total",
+            "value": "36.4"
+        },
+        {
+            "state": "Colorado",
+            "stratification": "Total",
+            "value": "35.0"
+        },
+        {
+            "state": "Connecticut",
+            "stratification": "Total",
+            "value": "36.5"
+        },
+        {
+            "state": "District of Columbia",
+            "stratification": "Total",
+            "value": "33.5"
+        },
+        {
+            "state": "Delaware",
+            "stratification": "Total",
+            "value": "35.6"
+        },
+        {
+            "state": "Florida",
+            "stratification": "Total",
+            "value": "35.6"
+        },
+        {
+            "state": "Georgia",
+            "stratification": "Total",
+            "value": "33.7"
+        },
+        {
+            "state": "Guam",
+            "stratification": "Total",
+            "value": "34.9"
+        },
+        {
+            "state": "Hawaii",
+            "stratification": "Total",
+            "value": "34.4"
+        },
+        {
+            "state": "Iowa",
+            "stratification": "Total",
+            "value": "34.3"
+        },
+        {
+            "state": "Idaho",
+            "stratification": "Total",
+            "value": "35.7"
+        },
+        {
+            "state": "Illinois",
+            "stratification": "Total",
+            "value": "35.0"
+        },
+        {
+            "state": "Indiana",
+            "stratification": "Total",
+            "value": "33.3"
+        },
+        {
+            "state": "Kansas",
+            "stratification": "Total",
+            "value": "33.3"
+        },
+        {
+            "state": "Kentucky",
+            "stratification": "Total",
+            "value": ""
+        },
+        {
+            "state": "Louisiana",
+            "stratification": "Total",
+            "value": "32.1"
+        },
+        {
+            "state": "Massachusetts",
+            "stratification": "Total",
+            "value": "35.2"
+        },
+        {
+            "state": "Maryland",
+            "stratification": "Total",
+            "value": "34.7"
+        },
+        {
+            "state": "Maine",
+            "stratification": "Total",
+            "value": "35.3"
+        },
+        {
+            "state": "Michigan",
+            "stratification": "Total",
+            "value": "33.4"
+        },
+        {
+            "state": "Minnesota",
+            "stratification": "Total",
+            "value": "34.2"
+        },
+        {
+            "state": "Missouri",
+            "stratification": "Total",
+            "value": "34.3"
+        },
+        {
+            "state": "Mississippi",
+            "stratification": "Total",
+            "value": "31.6"
+        },
+        {
+            "state": "Montana",
+            "stratification": "Total",
+            "value": "35.2"
+        },
+        {
+            "state": "North Carolina",
+            "stratification": "Total",
+            "value": "35.0"
+        },
+        {
+            "state": "North Dakota",
+            "stratification": "Total",
+            "value": "35.8"
+        },
+        {
+            "state": "Nebraska",
+            "stratification": "Total",
+            "value": "34.8"
+        },
+        {
+            "state": "New Hampshire",
+            "stratification": "Total",
+            "value": "35.6"
+        },
+        {
+            "state": "New Jersey",
+            "stratification": "Total",
+            "value": "35.9"
+        },
+        {
+            "state": "New Mexico",
+            "stratification": "Total",
+            "value": "33.9"
+        },
+        {
+            "state": "Nevada",
+            "stratification": "Total",
+            "value": "35.6"
+        },
+        {
+            "state": "New York",
+            "stratification": "Total",
+            "value": "36.1"
+        },
+        {
+            "state": "Ohio",
+            "stratification": "Total",
+            "value": "33.2"
+        },
+        {
+            "state": "Oklahoma",
+            "stratification": "Total",
+            "value": "31.9"
+        },
+        {
+            "state": "Oregon",
+            "stratification": "Total",
+            "value": "33.4"
+        },
+        {
+            "state": "Pennsylvania",
+            "stratification": "Total",
+            "value": ""
+        },
+        {
+            "state": "Puerto Rico",
+            "stratification": "Total",
+            "value": "35.1"
+        },
+        {
+            "state": "Rhode Island",
+            "stratification": "Total",
+            "value": "34.8"
+        },
+        {
+            "state": "South Carolina",
+            "stratification": "Total",
+            "value": "33.9"
+        },
+        {
+            "state": "South Dakota",
+            "stratification": "Total",
+            "value": "34.3"
+        },
+        {
+            "state": "Tennessee",
+            "stratification": "Total",
+            "value": "33.1"
+        },
+        {
+            "state": "Texas",
+            "stratification": "Total",
+            "value": "35.0"
+        },
+        {
+            "state": "Utah",
+            "stratification": "Total",
+            "value": "34.3"
+        },
+        {
+            "state": "Virginia",
+            "stratification": "Total",
+            "value": "34.3"
+        },
+        {
+            "state": "Virgin Islands",
+            "stratification": "Total",
+            "value": "38.2"
+        },
+        {
+            "state": "Vermont",
+            "stratification": "Total",
+            "value": "34.8"
+        },
+        {
+            "state": "Washington",
+            "stratification": "Total",
+            "value": "35.2"
+        },
+        {
+            "state": "Wisconsin",
+            "stratification": "Total",
+            "value": "34.1"
+        },
+        {
+            "state": "West Virginia",
+            "stratification": "Total",
+            "value": "32.0"
+        },
+        {
+            "state": "Wyoming",
+            "stratification": "Total",
+            "value": "35.7"
+        }
+    ]
+}

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -1104,8 +1104,9 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                 </span>
                 <ul className='geo-buttons d-grid' style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px' }}>
                   <button
-                    className={`${config.general.geoType === 'us' || config.general.geoType === 'us-county' ? 'active' : ''
-                      } full-width`}
+                    className={`${
+                      config.general.geoType === 'us' || config.general.geoType === 'us-county' ? 'active' : ''
+                    } full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us')
@@ -3110,19 +3111,19 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               )}
               {(config.general.geoType === 'world' ||
                 (config.general.geoType === 'us' && config.general.type === 'bubble')) && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={config.visual.showBubbleZeros}
-                      onChange={event => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.visual.showBubbleZeros = event.target.checked
-                        setConfig(_newConfig)
-                      }}
-                    />
-                    <span className='edit-label'>Show Data with Zero's on Bubble Map</span>
-                  </label>
-                )}
+                <label className='checkbox'>
+                  <input
+                    type='checkbox'
+                    checked={config.visual.showBubbleZeros}
+                    onChange={event => {
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.visual.showBubbleZeros = event.target.checked
+                      setConfig(_newConfig)
+                    }}
+                  />
+                  <span className='edit-label'>Show Data with Zero's on Bubble Map</span>
+                </label>
+              )}
               {(config.general.geoType === 'world' || config.general.geoType === 'single-state') && (
                 <label className='checkbox'>
                   <input
@@ -3156,42 +3157,42 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               {(config.general.geoType === 'us' ||
                 config.general.geoType === 'us-county' ||
                 config.general.geoType === 'world') && (
-                  <>
-                    <label>
-                      <span className='edit-label'>Default City Style</span>
-                      <select
-                        value={config.visual.cityStyle || false}
-                        onChange={event => {
-                          handleEditorChanges('handleCityStyle', event.target.value)
-                        }}
-                      >
-                        <option value='circle'>Circle</option>
-                        <option value='pin'>Pin</option>
-                        <option value='square'>Square</option>
-                        <option value='triangle'>Triangle</option>
-                        <option value='diamond'>Diamond</option>
-                        <option value='star'>Star</option>
-                      </select>
-                    </label>
-                    <TextField
-                      value={config.visual.cityStyleLabel}
-                      section='visual'
-                      fieldName='cityStyleLabel'
-                      label='Label (Optional) '
-                      updateField={updateField}
-                      tooltip={
-                        <Tooltip style={{ textTransform: 'none' }}>
-                          <Tooltip.Target>
-                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                          </Tooltip.Target>
-                          <Tooltip.Content>
-                            <p>When a label is provided, the default city style will appear in the legend.</p>
-                          </Tooltip.Content>
-                        </Tooltip>
-                      }
-                    />
-                  </>
-                )}
+                <>
+                  <label>
+                    <span className='edit-label'>Default City Style</span>
+                    <select
+                      value={config.visual.cityStyle || false}
+                      onChange={event => {
+                        handleEditorChanges('handleCityStyle', event.target.value)
+                      }}
+                    >
+                      <option value='circle'>Circle</option>
+                      <option value='pin'>Pin</option>
+                      <option value='square'>Square</option>
+                      <option value='triangle'>Triangle</option>
+                      <option value='diamond'>Diamond</option>
+                      <option value='star'>Star</option>
+                    </select>
+                  </label>
+                  <TextField
+                    value={config.visual.cityStyleLabel}
+                    section='visual'
+                    fieldName='cityStyleLabel'
+                    label='Label (Optional) '
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>When a label is provided, the default city style will appear in the legend.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+                </>
+              )}
               {/* <AdditionalCityStyles /> */}
               <>
                 {config.visual.additionalCityStyles.length > 0 &&

package/src/components/Legend/components/Legend.tsx

@@ -94,7 +94,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           label: parse(legendLabel),
           disabled: entry.disabled,
           special: entry.hasOwnProperty('special'),
-          value: [entry.min, entry.max]
+          value: legend.type === 'category' ? entry.value : [entry.min, entry.max],
+          categoryValue: legend.type === 'category' ? entry.value : undefined
         }
       })
     } catch (e) {
@@ -122,19 +123,48 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         dispatch({ type: 'SET_ACCESSIBLE_STATUS', payload: message })
       }
 
+      // Find the correct runtime index for toggling
+      // This is needed because special classes may have been moved to the end
+      const findRuntimeIndex = () => {
+        if (!runtimeLegend.items) return idx
+
+        return runtimeLegend.items.findIndex(runtimeItem => {
+          if (item.special && runtimeItem.special) {
+            // For special classes, match by label (since formatted item label comes from runtime item)
+            const runtimeLabel = runtimeItem.label || runtimeItem.value
+            const itemLabel = typeof item.label === 'string' ? item.label : item.label?.props?.children || item.label
+            return runtimeLabel === itemLabel
+          } else if (!item.special && !runtimeItem.special) {
+            // For categorical/qualitative items, match by single value
+            if (config.legend.type === 'category' && item.categoryValue !== undefined) {
+              return runtimeItem.value === item.categoryValue
+            }
+            // For numeric items, match by min/max values
+            return runtimeItem.min === item.value?.[0] && runtimeItem.max === item.value?.[1]
+          }
+          return false
+        })
+      }
+
+      const runtimeIndex = findRuntimeIndex()
+      const safeRuntimeIndex = runtimeIndex >= 0 ? runtimeIndex : idx
+
       return (
         <li
           className={handleListItemClass()}
           key={idx}
           title={`Legend item ${item.label} - Click to disable`}
-          onClick={() => toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)}
+          onClick={() =>
+            toggleLegendActive(safeRuntimeIndex, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+          }
           onKeyDown={e => {
             if (e.key === 'Enter') {
               e.preventDefault()
-              toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+              toggleLegendActive(safeRuntimeIndex, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
             }
           }}
           tabIndex={0}
+          role='button'
         >
           <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
           <span>{item.label}</span>