@cdc/core 4.24.12 → 4.25.1

package/components/DataTable/DataTable.tsx

@@ -30,7 +30,7 @@ export type DataTableProps = {
   columns?: Record<string, Column>
   config: TableConfig
   dataConfig?: Object
-  displayDataAsText?: Function
+  defaultSortBy?: string
   displayGeoName?: Function
   expandDataTable: boolean
   formatLegendLocation?: Function
@@ -59,6 +59,7 @@ const DataTable = (props: DataTableProps) => {
   const {
     config,
     dataConfig,
+    defaultSortBy,
     tableTitle,
     vizTitle,
     rawData,
@@ -88,9 +89,8 @@ const DataTable = (props: DataTableProps) => {
   }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumn])
 
   const [expanded, setExpanded] = useState(expandDataTable)
-
   const [sortBy, setSortBy] = useState<any>({
-    column: '',
+    column: defaultSortBy || '',
     asc: false,
     colIndex: null
   })
@@ -207,6 +207,24 @@ const DataTable = (props: DataTableProps) => {
     [config.runtime?.seriesKeys]) // eslint-disable-line
 
   const hasNoData = runtimeData.length === 0
+
+  const getClassNames = (): string => {
+    const classes = ['data-table-container']
+
+    if (config.table.showDownloadLinkBelow) {
+      classes.push('mt-4')
+    }
+
+    const isBrushActive = config?.brush?.active && config.legend?.position !== 'bottom'
+    if (isBrushActive) {
+      classes.push('brush-active')
+    }
+
+    classes.push(viewport)
+
+    return classes.join(' ')
+  }
+
   if (config.visualizationType !== 'Box Plot') {
     const getDownloadData = () => {
       // only use fullGeoName on County maps and no other
@@ -221,11 +239,12 @@ const DataTable = (props: DataTableProps) => {
     const getMediaControlsClasses = belowTable => {
       const classes = ['download-links']
       if (!belowTable) {
+        classes.push('mt-4', 'mb-2')
         const isLegendOnBottom = config?.legend?.position === 'bottom' || isLegendWrapViewport(viewport)
         if (config.brush?.active && !isLegendOnBottom) classes.push('brush-active')
         if (config.brush?.active && config.legend.hide) classes.push('brush-active')
       } else {
-        classes.push('below-table')
+        classes.push('mt-2')
       }
       return classes
     }
@@ -244,23 +263,6 @@ const DataTable = (props: DataTableProps) => {
         </MediaControls.Section>
       )
     }
-    const getClassNames = (): string => {
-      const classes = ['data-table-container']
-      const isBrushActive = config?.brush?.active && config.legend?.position !== 'bottom'
-
-      if (isBrushActive) {
-        classes.push('brush-active')
-      }
-
-      classes.push(viewport)
-
-      const downloadLinkClass = !config.table.showDownloadLinkBelow ? 'download-link-above' : ''
-      if (downloadLinkClass) {
-        classes.push(downloadLinkClass)
-      }
-
-      return classes.join(' ')
-    }
 
     return (
       <ErrorBoundary component='DataTable'>
@@ -268,13 +270,7 @@ const DataTable = (props: DataTableProps) => {
         <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           {config.table.collapsible !== false && (
-            <ExpandCollapse
-              expanded={expanded}
-              setExpanded={setExpanded}
-              fontSize={config.fontSize}
-              tableTitle={tableTitle}
-              viewport={viewport}
-            />
+            <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} viewport={viewport} />
           )}
           <div className='table-container' style={limitHeight}>
             <Table
@@ -302,6 +298,7 @@ const DataTable = (props: DataTableProps) => {
                     isVertical={isVertical}
                     sortBy={sortBy}
                     setSortBy={setSortBy}
+                    viewport={viewport}
                   />
                 )
               }
@@ -313,7 +310,6 @@ const DataTable = (props: DataTableProps) => {
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
                 hidden: !expanded
               }}
-              fontSize={config.fontSize}
             />
 
             {/* REGION Data Table */}
@@ -336,7 +332,6 @@ const DataTable = (props: DataTableProps) => {
                     </tr>
                   }
                   tableOptions={{ className: 'table table-striped region-table data-table' }}
-                  fontSize={config.fontSize}
                 />
               )}
           </div>
@@ -351,11 +346,7 @@ const DataTable = (props: DataTableProps) => {
     // Render Data Table for Box Plots
     return (
       <ErrorBoundary component='DataTable'>
-        <section
-          id={tabbingId.replace('#', '')}
-          className={`data-table-container ${viewport}`}
-          aria-label={accessibilityLabel}
-        >
+        <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
@@ -374,7 +365,6 @@ const DataTable = (props: DataTableProps) => {
                 'aria-rowcount': 11,
                 hidden: !expanded
               }}
-              fontSize={config.fontSize}
             />
           </div>
         </section>

package/components/DataTable/DataTableStandAlone.tsx

@@ -6,6 +6,7 @@ import DataTableEditorPanel from './components/DataTableEditorPanel'
 import Filters from '../Filters'
 import { TableConfig } from './types/TableConfig'
 import { filterVizData } from '../../helpers/filterVizData'
+import { addValuesToFilters } from '../../helpers/addValuesToFilters'
 
 type StandAloneProps = {
   visualizationKey: string
@@ -28,9 +29,8 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
 
   useEffect(() => {
     // when using editor changes to filter should update the data
-    setFilteredData(
-      filterVizData(config.filters, config?.formattedData?.length > 0 ? config.formattedData : config.data)
-    )
+    const filters = addValuesToFilters(config.filters, config.data)
+    setFilteredData(filterVizData(filters, config?.formattedData?.length > 0 ? config.formattedData : config.data))
   }, [config.filters])
 
   if (isEditor)

package/components/DataTable/components/ChartHeader.tsx

@@ -5,9 +5,9 @@ import ScreenReaderText from '@cdc/core/components/elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
 
-type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType? }
+type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType?; viewport }
 
-const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }: ChartHeaderProps) => {
+const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType, viewport }: ChartHeaderProps) => {
   const groupBy = config.table?.groupBy
   if (!data) return
   let dataSeriesColumns = getDataSeriesColumns(config, isVertical, data)
@@ -69,6 +69,7 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
           const text = getSeriesName(column, config)
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
+
           return (
             <th
               style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,13 +1,10 @@
 import Icon from '../../ui/Icon'
-import { fontSizes } from '../../../helpers/cove/fontSettings'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
-  const titleFontSize = ['xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
   return (
     <div
-      style={{ fontSize: titleFontSize }}
       role='button'
-      className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+      className={expanded ? 'data-table-heading p-3' : 'collapsed data-table-heading p-3'}
       onClick={() => {
         setExpanded(!expanded)
       }}

package/components/DataTable/data-table.css

@@ -15,9 +15,8 @@
 
 .cdc-open-viz-module div.data-table-heading {
   position: relative;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 0.5em 0.7em;
-  border: var(--lightGray) 1px solid;
+  border: var(--cool-gray-10) 1px solid;
+  border-radius: 6px;
 
   svg {
     position: absolute;
@@ -31,9 +30,6 @@
     z-index: 2;
     position: relative;
   }
-  @media (max-width: var(--breakpoint-sm)) {
-    font-size: var(--font-small) + 0.2em;
-  }
 }
 
 table.horizontal {
@@ -127,7 +123,6 @@ table.data-table {
     &:last-child {
       border-right: 0 !important;
     }
-    font-size: var(--font-size);
   }
 
   td {

package/components/DataTable/helpers/customSort.ts

@@ -25,11 +25,11 @@ export const customSort = (a, b, sortBy, config) => {
   const trimmedA = String(valueA).trim()
   const trimmedB = String(valueB).trim()
 
-  if (config.xAxis?.dataKey === sortBy.column && config.xAxis.type === 'date') {
+  if (config.xAxis?.dataKey === sortBy.column && ['date', 'date-time'].includes(config.xAxis.type)) {
     const dateA = parseDate(config.xAxis.dateParseFormat, trimmedA)?.getTime()
 
     const dateB = parseDate(config.xAxis.dateParseFormat, trimmedB)?.getTime()
-    console.log(dateA, dateB)
+
     return sortBy.asc ? dateA - dateB : dateB - dateA
   }
   // Check if values are numbers

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -1,60 +1,83 @@
-import LegendShape from '@cdc/core/components/LegendShape'
-import CellAnchor from '../components/CellAnchor'
-import { DataTableProps } from '../DataTable'
-import { ReactNode } from 'react'
-
-type MapRowsProps = DataTableProps & {
-  rows: string[]
-}
-
-const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode }: MapRowsProps): ReactNode[][] => {
-  return rows.map(row =>
-    Object.keys(columns)
-      .filter(column => columns[column].dataTable === true && columns[column].name)
-      .map(column => {
-        let cellValue
-
-        if (column === 'geo') {
-          const rowObj = runtimeData[row]
-          const legendColor = applyLegendToRow(rowObj)
-
-          let labelValue
-          const mapZoomHandler = config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
-          if ((config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') || config.general.type === 'us-geocode') {
-            const capitalize = str => {
-              return str.charAt(0).toUpperCase() + str.slice(1)
-            }
-            labelValue = displayGeoName(row)
-            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
-          } else {
-            labelValue = formatLegendLocation(row)
-          }
-          cellValue = (
-            <div className='col-12'>
-              <LegendShape fill={legendColor[0]} />
-              <CellAnchor markup={labelValue} row={rowObj} columns={columns} navigationHandler={navigationHandler} mapZoomHandler={mapZoomHandler} />
-            </div>
-          )
-        } else {
-          // check for special classes
-          let specialValFound = ''
-          let columnName = config.columns[column].name
-          const { specialClasses } = config.legend
-          if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
-            specialClasses.forEach(specialClass => {
-              if (specialClass.key === columnName) {
-                if (String(runtimeData[row][specialClass.key]) === specialClass.value) {
-                  specialValFound = specialClass.label
-                }
-              }
-            })
-          }
-          cellValue = displayDataAsText(specialValFound || runtimeData[row][columnName], column)
-        }
-
-        return cellValue
-      })
-  )
-}
-
-export default mapCellArray
+import LegendShape from '@cdc/core/components/LegendShape'
+import CellAnchor from '../components/CellAnchor'
+import { DataTableProps } from '../DataTable'
+import { ReactNode } from 'react'
+import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
+
+type MapRowsProps = DataTableProps & {
+  rows: string[]
+}
+
+const mapCellArray = ({
+  rows,
+  columns,
+  runtimeData,
+  config,
+  applyLegendToRow,
+  displayGeoName,
+  formatLegendLocation,
+  navigationHandler,
+  setFilteredCountryCode
+}: MapRowsProps): ReactNode[][] => {
+  return rows.map(row =>
+    Object.keys(columns)
+      .filter(column => columns[column].dataTable === true && columns[column].name)
+      .map(column => {
+        let cellValue
+
+        if (column === 'geo') {
+          const rowObj = runtimeData[row]
+          const legendColor = applyLegendToRow(rowObj)
+
+          let labelValue
+          const mapZoomHandler =
+            config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world'
+              ? () => setFilteredCountryCode(row)
+              : undefined
+          if (
+            (config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') ||
+            config.general.type === 'us-geocode'
+          ) {
+            const capitalize = str => {
+              return str.charAt(0).toUpperCase() + str.slice(1)
+            }
+            labelValue = displayGeoName(row)
+            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
+          } else {
+            labelValue = formatLegendLocation(row)
+          }
+          cellValue = (
+            <div className='col-12'>
+              <LegendShape fill={legendColor[0]} />
+              <CellAnchor
+                markup={labelValue}
+                row={rowObj}
+                columns={columns}
+                navigationHandler={navigationHandler}
+                mapZoomHandler={mapZoomHandler}
+              />
+            </div>
+          )
+        } else {
+          // check for special classes
+          let specialValFound = ''
+          let columnName = config.columns[column].name
+          const { specialClasses } = config.legend
+          if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
+            specialClasses.forEach(specialClass => {
+              if (specialClass.key === columnName) {
+                if (String(runtimeData[row][specialClass.key]) === specialClass.value) {
+                  specialValFound = specialClass.label
+                }
+              }
+            })
+          }
+          cellValue = displayDataAsText(specialValFound || runtimeData[row][columnName], column, config)
+        }
+
+        return cellValue
+      })
+  )
+}
+
+export default mapCellArray

package/components/DataTable/types/TableConfig.ts

@@ -7,7 +7,6 @@ import { Visualization } from '../../../types/Visualization'
 
 export type TableConfig = Visualization & {
   boxplot?: BoxPlot
-  fontSize: 'small' | 'medium' | 'large'
   regions?: Region[]
   runtime?: Runtime
   runtimeSeriesLabels?: Object

package/components/EditorPanel/FootnotesEditor.tsx

@@ -39,13 +39,40 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }
     <>
       <em>Dynamic Footnotes</em>
       <div className='row border p-2'>
-        <InputSelect label='Select a Footnote Dataset' value={config.dataKey} options={dataSetOptions} fieldName='dataKey' updateField={updateField} />
+        <InputSelect
+          label='Select a Footnote Dataset'
+          value={config.dataKey}
+          options={dataSetOptions}
+          fieldName='dataKey'
+          updateField={updateField}
+        />
 
         {config.dataKey && (
           <div className='p-3'>
-            <InputSelect label='Footnote Symbol Column' value={config.dynamicFootnotes?.symbolColumn} options={dataColumns} section='dynamicFootnotes' fieldName='symbolColumn' updateField={updateField} />
-            <InputSelect label='Footnote Text Column' value={config.dynamicFootnotes?.textColumn} options={dataColumns} section='dynamicFootnotes' fieldName='textColumn' updateField={updateField} />
-            <InputSelect label='Footnote Order Column' value={config.dynamicFootnotes?.orderColumn} options={dataColumns} section='dynamicFootnotes' fieldName='orderColumn' updateField={updateField} />
+            <InputSelect
+              label='Footnote Symbol Column'
+              value={config.dynamicFootnotes?.symbolColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='symbolColumn'
+              updateField={updateField}
+            />
+            <InputSelect
+              label='Footnote Text Column'
+              value={config.dynamicFootnotes?.textColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='textColumn'
+              updateField={updateField}
+            />
+            <InputSelect
+              label='Footnote Order Column'
+              value={config.dynamicFootnotes?.orderColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='orderColumn'
+              updateField={updateField}
+            />
           </div>
         )}
       </div>
@@ -57,10 +84,25 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }
       {config.staticFootnotes?.map((note, index) => (
         <div key={index} className='row border p-2'>
           <div className='col-8'>
-            <InputSelect label='Symbol' value={note.symbol} options={[['', '--Select--'], ...footnotesSymbols]} fieldName='symbol' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, symbol: value })} />{' '}
-            <TextField label='Text' value={note.text} fieldName='text' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, text: value })} />
+            <InputSelect
+              label='Symbol'
+              value={note.symbol}
+              options={[['', '--Select--'], ...footnotesSymbols]}
+              fieldName='symbol'
+              updateField={(section, subsection, fieldName, value) =>
+                updateStaticFootnote(index, { ...note, symbol: value })
+              }
+            />{' '}
+            <TextField
+              label='Text'
+              value={note.text}
+              fieldName='text'
+              updateField={(section, subsection, fieldName, value) =>
+                updateStaticFootnote(index, { ...note, text: value })
+              }
+            />
           </div>
-          <div className='col-2 ml-4'>
+          <div className='col-2 ms-4'>
             <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
               Delete
             </button>

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -230,9 +230,10 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         value={filter.order || 'asc'}
                         fieldName='order'
                         label='Filter Order'
-                        updateField={(_section, _subSection, _field, value) =>
+                        updateField={(_section, _subSection, _field, value) => {
                           updateFilterProp('order', filterIndex, value)
-                        }
+                          if (filter.orderColumn && value !== 'column') updateFilterProp('orderColumn', filterIndex, '')
+                        }}
                         options={filterOrderOptions}
                       />
                       {filter.order === 'cust' && (
@@ -241,6 +242,17 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                           handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
                         />
                       )}
+                      {filter.order === 'column' && (
+                        <Select
+                          value={filter.orderColumn}
+                          fieldName='orderColumn'
+                          label='Order Column'
+                          updateField={(_section, _subSection, _field, value) =>
+                            updateFilterProp('orderColumn', filterIndex, value)
+                          }
+                          options={dataColumns}
+                        />
+                      )}
                     </>
                   ) : (
                     <NestedDropdownEditor
@@ -274,6 +286,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         updateFilterProp('parents', filterIndex, value)
                       }}
                       options={getParentFilterOptions(filterIndex)}
+                      selected={config.filters[filterIndex].parents}
                     />
                   </label>
                 </FieldSetWrapper>