@cdc/core 4.25.11 → 4.26.1

package/components/DataTable/data-table.css

@@ -1,284 +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;
+      }
 
-    &:last-child {
-      border-right: 0 !important;
+      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
+      }
+
+      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 div a {
-    position: relative;
-    padding: 0;
-    display: inline;
-  }
+    td {
+      position: relative;
 
-  td span.table-link {
-    text-decoration: underline;
-    cursor: pointer;
-    color: #075290;
+      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,12 +4,18 @@ 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, runtimeData = null) => {
@@ -92,7 +98,9 @@ const mapCellArray = ({
   setFilteredCountryCode,
   legendMemo,
   legendSpecialClassLastMemo,
-  runtimeLegend
+  runtimeLegend,
+  applyLegendToRow,
+  getPatternForRow
 }: MapRowsProps): ReactNode[][] => {
   const { allowMapZoom, geoType, type } = config.general
   return rows.map(row =>
@@ -116,11 +124,11 @@ const mapCellArray = ({
             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/EditorPanel/ColumnsEditor.tsx

@@ -5,8 +5,10 @@ import { Visualization } from '../../types/Visualization'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import { Column } from '../../types/Column'
 import _ from 'lodash'
-import React, { useState } from 'react'
+import React, { useState, useMemo } from 'react'
 import FieldSetWrapper from './FieldSetWrapper'
+import { useDataColumns } from '../../hooks/useDataColumns'
+import Alert from '../Alert/components/Alert'
 
 interface ColumnsEditorProps {
   config: Partial<Visualization>
@@ -52,19 +54,21 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
     updateField(null, null, 'columns', newColumns)
   }
 
-  const getColumns = () => {
-    const columns: string[] = config.data.flatMap(row => {
-      return Object.keys(row).map(columnName => columnName)
-    })
+  // Extract column names from data with memoization (replaces getColumns)
+  const allColumns = useDataColumns(config.data)
+
+  // Filter out groupBy and already configured columns
+  const availableColumns = useMemo(() => {
     const configuredColumns = Object.values(config.columns).map(col => col.name)
-    const cols = _.uniq(columns).filter(key => {
+    const cols = allColumns.filter(key => {
       if (config.table.groupBy === key) return false
       if (configuredColumns.includes(key)) return false
       return true
     })
+    // Add current column name if it exists
     if (config.columns[colKey]?.name) cols.push(config.columns[colKey].name)
     return cols
-  }
+  }, [allColumns, config.table.groupBy, config.columns, colKey])
 
   const colName = config.columns[colKey]?.name
 
@@ -82,7 +86,7 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
         fieldName='name'
         section={'columns'}
         initial={'-Select-'}
-        options={getColumns()}
+        options={availableColumns}
         updateField={(_section, _subsection, _fieldName, value) => changeName(value)}
       />
       {config.type !== 'table' && (
@@ -92,7 +96,11 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
           fieldName={'series'}
           section='columns'
           initial={'Select series'}
-          options={config.series?.map(series => series.dataKey) || []}
+          options={
+            config.visualizationType === 'Pie'
+              ? config.runtime?.seriesKeys || []
+              : config.series?.map(series => series.dataKey) || []
+          }
           updateField={(_section, _subsection, _fieldName, value) => editColumn('series', value)}
         />
       )}
@@ -147,16 +155,26 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
         </li>
         <li>
           {config.table.showVertical && (
-            <label className='checkbox'>
-              <input
-                type='checkbox'
-                checked={config.columns[colKey].dataTable ?? true}
-                onChange={event => {
-                  editColumn('dataTable', event.target.checked)
-                }}
-              />
-              <span className='edit-label'>Show in Data Table</span>
-            </label>
+            <>
+              <label className='checkbox'>
+                <input
+                  type='checkbox'
+                  checked={config.columns[colKey].dataTable ?? true}
+                  onChange={event => {
+                    editColumn('dataTable', event.target.checked)
+                  }}
+                />
+                <span className='edit-label'>Show in Data Table</span>
+              </label>
+              {(config.confidenceKeys?.upper === colName || config.confidenceKeys?.lower === colName) && (
+                <Alert
+                  type="danger"
+                  message="Confidence Interval column - required for 508 compliance"
+                  showCloseButton={false}
+                  iconSize={14}
+                />
+              )}
+            </>
           )}
         </li>
         {config.visualizationType === 'Pie' && (