@cdc/core 4.25.10 → 4.26.1

package/components/DataTable/data-table.css

@@ -1,278 +1,285 @@
-.table {
-  width: unset;
-  min-width: 100%;
-}
-
-.bs4 .table.table-width-unset {
-  width: unset;
-}
-
-.collapsed+.table-container {
-  border-bottom: none;
-}
-
-.table-container {
-  overflow-x: auto;
-  border-right: 1px solid var(--lightGray);
-  border-left: 1px solid var(--lightGray);
-  border-bottom: 1px solid var(--lightGray);
-}
-
-.cdc-open-viz-module div.data-table-heading {
-  position: relative;
-  border: var(--cool-gray-10) 1px solid;
-  border-radius: 6px;
-
-  svg {
-    position: absolute;
-    height: 100%;
-    width: 15px;
-    top: 0;
-    right: 1em;
+.cove,
+.cdc-open-viz-module {
+  .table {
+    width: unset;
+    min-width: 100%;
   }
 
-  &:focus {
-    z-index: 2;
-    position: relative;
+  .bs4 .table.table-width-unset {
+    width: unset;
   }
-}
 
-table.horizontal {
-
-  th,
-  td {
-    min-width: 200px;
-  }
-}
-
-table.data-table {
-  margin-bottom: 0;
-  background: #fff;
-  position: relative;
-  border: none;
-  border-collapse: collapse;
-  appearance: none;
-  table-layout: fixed;
-
-  * {
-    box-sizing: border-box;
+  .collapsed+.table-container {
+    border-bottom: none;
   }
 
-  thead {
-    user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-
-    button {
-      background: none;
-      font-size: initial;
-      color: #fff;
-      border: 0;
-    }
-
-    tr {
-      background: none;
-    }
+  .table-container {
+    overflow-x: auto;
+    border-right: 1px solid var(--lightGray);
+    border-left: 1px solid var(--lightGray);
+    border-bottom: 1px solid var(--lightGray);
   }
 
-  thead {
-    color: #fff;
+  div.data-table-heading {
+    position: relative;
+    border: var(--cool-gray-10) 1px solid;
+    border-radius: 6px;
 
-    .resizer {
-      cursor: e-resize;
-      width: 10px;
+    svg {
       position: absolute;
+      height: 100%;
+      width: 15px;
       top: 0;
-      bottom: 0;
-      right: 0;
-      touch-action: none;
+      right: 1em;
     }
 
-    tr {
-      text-align: left;
+    &:focus {
+      z-index: 2;
+      position: relative;
     }
+  }
+
+  table.horizontal {
 
     th,
     td {
-      padding: 0.5em 0.7em;
-      line-height: normal;
-      position: relative;
-      text-align: left;
-      border-right: 1px solid var(--lightGray) !important;
+      min-width: 200px;
     }
+  }
 
-    th {
-      background-color: var(--primary);
-      background-repeat: no-repeat;
-      background-position: right 0.5em center;
-      background-size: 10px 5px;
-    }
+  table.data-table {
+    margin-bottom: 0;
+    background: #fff;
+    position: relative;
+    border: none;
+    border-collapse: collapse;
+    appearance: none;
+    table-layout: fixed;
 
-    th:last-child,
-    td:last-child {
-      border-right: 0;
+    * {
+      box-sizing: border-box;
     }
-  }
 
-  tr {
-    &.row-group {
-      background-color: var(--tertiary) !important;
-      font-weight: bold;
-    }
+    thead {
+      user-select: none;
+      -moz-user-select: none;
+      user-select: none;
 
-    border-bottom: solid 1px #e5e5e5;
-    min-width: 100%;
+      button {
+        background: none;
+        font-size: initial;
+        color: #fff !important;
+        border: 0;
+      }
 
-    /* Needed to fill content up*/
-    &:last-child {
-      border-bottom: 0;
+      tr {
+        background: none;
+      }
     }
-  }
 
-  th,
-  td {
-    padding: 0.3em 0.7em;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
-    white-space: nowrap;
+    thead {
+      color: #fff !important;
+
+      .resizer {
+        cursor: e-resize;
+        width: 10px;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        touch-action: none;
+      }
+
+      tr {
+        text-align: left;
+      }
+
+      th,
+      td {
+        padding: 0.5em 0.7em;
+        line-height: normal;
+        position: relative;
+        text-align: left;
+        border-right: 1px solid var(--lightGray) !important;
+      }
+
+      th {
+        background-color: var(--primary);
+        background-repeat: no-repeat;
+        background-position: right 0.5em center;
+        background-size: 10px 5px;
+        color: #fff !important
+      }
 
-    &:last-child {
-      border-right: 0 !important;
+      th:last-child,
+      td:last-child {
+        border-right: 0;
+      }
     }
-  }
 
-  td {
-    position: relative;
+    tr {
+      &.row-group {
+        background-color: var(--tertiary) !important;
+        font-weight: bold;
+      }
 
-    svg {
-      margin-left: 1rem;
+      border-bottom: solid 1px #e5e5e5;
+      min-width: 100%;
 
-      &.legend-shape-svg {
-        display: flex;
-        margin-left: 0 !important;
+      /* Needed to fill content up*/
+      &:last-child {
+        border-bottom: 0;
       }
     }
 
-  }
+    th,
+    td {
+      padding: 0.3em 0.7em;
+      border-right: 1px solid rgba(0, 0, 0, 0.1);
+      white-space: nowrap;
 
-  td a {
-    padding: 0.3em 0.7em;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    display: block;
-    color: inherit;
-    text-decoration: none;
-  }
+      &:last-child {
+        border-right: 0 !important;
+      }
+    }
 
-  td span.table-link {
-    text-decoration: underline;
-    cursor: pointer;
-    color: #075290;
+    td {
+      position: relative;
+
+      svg {
+        margin-left: 1rem;
+
+        &.legend-shape-svg {
+          display: flex;
+          margin-left: 0 !important;
+        }
+      }
 
-    svg {
-      max-width: 13px;
-      vertical-align: baseline;
-      margin-left: 5px;
     }
-  }
 
-  .boxplot-td {
-    table-layout: fixed;
-    width: 200;
-  }
-}
-
-.no-data {
-  position: relative;
-
-  .no-data-message {
-    background: rgba(255, 255, 255, 0.5);
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 7;
+    td a {
+      padding: 0.3em 0.7em;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      display: block;
+      color: inherit;
+      text-decoration: none;
+    }
 
-    :is(h3) {
-      font-size: 1.3rem;
-      font-weight: 600;
-      margin-bottom: 0.3rem;
+    td div a {
+      position: relative;
+      padding: 0;
+      display: inline;
     }
-  }
 
-  tr:hover {
-    background: #fff;
-  }
+    td span.table-link {
+      text-decoration: underline;
+      cursor: pointer;
+      color: #075290;
 
-  th,
-  td {
-    width: 50%;
+      svg {
+        max-width: 13px;
+        vertical-align: baseline;
+        margin-left: 5px;
+      }
+    }
 
-    &::before {
-      content: '\00a0';
+    .boxplot-td {
+      table-layout: fixed;
+      width: 200;
     }
   }
-}
 
-.data-table-pagination {
-  margin: 1rem 0;
-  display: flex;
-  align-items: center;
+  .no-data {
+    position: relative;
 
-  ul {
-    list-style: none;
-    margin: 0 1rem 0 0;
-    display: flex;
+    .no-data-message {
+      background: rgba(255, 255, 255, 0.5);
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      position: absolute;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 7;
+
+      :is(h3) {
+        font-size: 1.3rem;
+        font-weight: 600;
+        margin-bottom: 0.3rem;
+      }
+    }
 
-    li+li {
-      margin-left: 0.3rem;
+    tr:hover {
+      background: #fff;
     }
 
-    button {
-      background: var(--mediumGray);
+    th,
+    td {
+      width: 50%;
 
-      &:hover {
-        background: lighten(var(--mediumGray), 5%);
+      &::before {
+        content: '\00a0';
       }
     }
+  }
 
-    button.btn svg {
-      margin: 0px 0 3px 0;
-    }
+  .data-table-pagination {
+    margin: 1rem 0;
+    display: flex;
+    align-items: center;
+
+    ul {
+      list-style: none;
+      margin: 0 1rem 0 0;
+      display: flex;
+
+      li+li {
+        margin-left: 0.3rem;
+      }
 
-    button[disabled] {
-      background: var(--mediumGray);
-      opacity: 0.3;
-      cursor: default;
+      button {
+        background: var(--mediumGray);
+
+        &:hover {
+          background: lighten(var(--mediumGray), 5%);
+        }
+      }
 
-      &:hover {
+      button.btn svg {
+        margin: 0px 0 3px 0;
+      }
+
+      button[disabled] {
         background: var(--mediumGray);
+        opacity: 0.3;
+        cursor: default;
+
+        &:hover {
+          background: var(--mediumGray);
+        }
       }
     }
   }
-}
-
-.btn-download {
-  color: #fff;
-  float: right;
-  text-decoration: none;
-  transition: 0.3s all;
-  margin: 1em 0;
 
-  &:hover {
+  .btn-download {
+    color: #fff;
+    float: right;
+    text-decoration: none;
     transition: 0.3s all;
+    margin: 1em 0;
+
+    &:hover {
+      transition: 0.3s all;
+    }
   }
-}
 
-.cove,
-.cdc-open-viz-module {
   .download-links a:not(:last-child) {
     margin-right: 10px;
     display: inline-block;

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -4,19 +4,36 @@ import { DataTableProps } from '../DataTable'
 import { ReactNode } from 'react'
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 import _ from 'lodash'
-import { applyLegendToRow } from '@cdc/map/src/helpers/applyLegendToRow'
-import { hashObj } from '@cdc/map/src/helpers'
-import { getPatternForRow } from '@cdc/map/src/helpers/getPatternForRow'
+import { hashObj } from '../../../helpers/hashObj'
 
 type MapRowsProps = DataTableProps & {
   rows: string[]
+  applyLegendToRow: (
+    rowObj: any,
+    config: any,
+    runtimeLegend: any,
+    legendMemo: any,
+    legendSpecialClassLastMemo: any
+  ) => string[]
+  getPatternForRow: (rowObj: any, config: any) => any
 }
 
-const getGeoLabel = (config, row, formatLegendLocation, displayGeoName) => {
+const getGeoLabel = (config, row, formatLegendLocation, displayGeoName, runtimeData = null) => {
   const { geoType, type } = config.general
+
   let labelValue
   if (!['single-state', 'us-county'].includes(geoType) || type === 'us-geocode') {
+    // Use the row (UID) for lookup - this allows "US-AL" to become "Alabama"
     labelValue = displayGeoName(row)
+
+    // If displayGeoName returned the same value (not found in lookups), use the raw imported data
+    if (labelValue === row && runtimeData && config.columns?.geo?.name) {
+      const rawGeoValue = runtimeData[row]?.[config.columns.geo.name]
+      if (rawGeoValue && rawGeoValue !== row) {
+        labelValue = rawGeoValue
+      }
+    }
+
     labelValue = String(labelValue).startsWith('region') ? _.capitalize(labelValue) : labelValue
   } else {
     labelValue = formatLegendLocation(row)
@@ -58,7 +75,7 @@ export const getMapRowData = (
     ].map(column => {
       const label = columns[column]?.label || columns[column]?.name || column
       if (column === 'geo') {
-        dataRow[label] = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
+        dataRow[label] = getGeoLabel(config, row, formatLegendLocation, displayGeoName, runtimeData)
       } else if (filterColumns.includes(column)) {
         dataRow[label] = runtimeData[row][column]
       } else {
@@ -81,7 +98,9 @@ const mapCellArray = ({
   setFilteredCountryCode,
   legendMemo,
   legendSpecialClassLastMemo,
-  runtimeLegend
+  runtimeLegend,
+  applyLegendToRow,
+  getPatternForRow
 }: MapRowsProps): ReactNode[][] => {
   const { allowMapZoom, geoType, type } = config.general
   return rows.map(row =>
@@ -100,16 +119,16 @@ const mapCellArray = ({
           if (!legendColor) {
             console.error('No legend color found') // eslint-disable-line no-console
           }
-          const labelValue = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
+          const labelValue = getGeoLabel(config, row, formatLegendLocation, displayGeoName, runtimeData)
           const mapZoomHandler =
             type === 'bubble' && allowMapZoom && geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
 
           const validColor = legendColor && legendColor.length > 0 && !noColor
-          
+
           // Check for pattern information
           const patternInfo = getPatternForRow(rowObj, config)
           const mapId = config.runtime?.uniqueId || 'map'
-          
+
           return (
             <div className='col-12'>
               {validColor ? (

package/components/DataTable/helpers/standardizeState.js

@@ -8,8 +8,8 @@ const states = {
   CO: 'Colorado',
   CT: 'Connecticut',
   DE: 'Delaware',
-  DC: 'District Of Columbia',
-  FM: 'Federated States Of Micronesia',
+  DC: 'District of Columbia',
+  FM: 'Federated States of Micronesia',
   FL: 'Florida',
   GA: 'Georgia',
   GU: 'Guam',

package/components/DataTable/helpers/tests/standardizeState.test.js

@@ -0,0 +1,54 @@
+import { standardizeStateName } from '../standardizeState'
+
+describe('standardizeStateName', () => {
+  it('should return non-string values unchanged', () => {
+    expect(standardizeStateName(123)).toBe(123)
+    expect(standardizeStateName(null)).toBe(null)
+    expect(standardizeStateName(undefined)).toBe(undefined)
+    expect(standardizeStateName(true)).toBe(true)
+  })
+
+  it('should return numeric strings unchanged', () => {
+    expect(standardizeStateName('123')).toBe('123')
+    expect(standardizeStateName('456.78')).toBe('456.78')
+  })
+
+  it('should convert state abbreviations to full names', () => {
+    expect(standardizeStateName('DC')).toBe('District of Columbia')
+    expect(standardizeStateName('dc')).toBe('District of Columbia')
+    expect(standardizeStateName('CA')).toBe('California')
+    expect(standardizeStateName('ca')).toBe('California')
+    expect(standardizeStateName('FM')).toBe('Federated States of Micronesia')
+    expect(standardizeStateName('fm')).toBe('Federated States of Micronesia')
+  })
+
+  it('should handle Virgin Islands variations', () => {
+    expect(standardizeStateName('VI')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('vi')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('Virgin Islands')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('VIRGIN ISLANDS')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('U.S. Virgin Islands')).toBe('U.S. VIRGIN ISLANDS')
+    expect(standardizeStateName('US VIRGIN ISLANDS')).toBe('U.S. VIRGIN ISLANDS')
+  })
+
+  it('should verify "of" is lowercase in state names', () => {
+    const dcName = standardizeStateName('DC')
+    expect(dcName).toContain('of')
+    expect(dcName).not.toContain('Of')
+
+    const fmName = standardizeStateName('FM')
+    expect(fmName).toContain('of')
+    expect(fmName).not.toContain('Of')
+  })
+
+  it('should return original value for unknown state codes', () => {
+    expect(standardizeStateName('ZZ')).toBe('ZZ')
+    expect(standardizeStateName('Unknown State')).toBe('Unknown State')
+  })
+
+  it('should handle mixed case state names', () => {
+    expect(standardizeStateName('California')).toBe('California')
+    expect(standardizeStateName('CALIFORNIA')).toBe('CALIFORNIA')
+    expect(standardizeStateName('cAlIfOrNiA')).toBe('cAlIfOrNiA')
+  })
+})