@cdc/core 4.24.10 → 4.24.12

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -6,6 +6,7 @@ import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
 import { formatConfigBeforeSave as stripConfig } from '../../helpers/formatConfigBeforeSave'
 import './advanced-editor-styles.css'
 import _ from 'lodash'
+import Tooltip from '../ui/Tooltip'
 
 export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExpandCollapse = () => {} }) => {
   const [advancedToggle, _setAdvancedToggle] = useState(false)
@@ -37,7 +38,11 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
     chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
     dashboard: ['Dashboard', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
     map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
-    'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon />]
+    'markup-include': [
+      'Markup Include',
+      'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html',
+      <MarkupIncludeIcon />
+    ]
   }
 
   if (!config.type) return <></>
@@ -63,25 +68,24 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
               </div>
             </section>
             <p className='pb-2'>
-              This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration that is generated by this editor and allows you to edit properties directly and apply them.
+              This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration
+              that is generated by this editor and allows you to edit properties directly and apply them.
             </p>
+            <JsonEditor
+              className='advanced-json-editor'
+              data={configTextboxValue}
+              onUpdate={onUpdate}
+              rootName=''
+              collapse={collapseFields}
+            />
             <button
-              className='btn '
-              onClick={() => {
-                navigator.clipboard.writeText(JSON.stringify(configTextboxValue))
-              }}
-            >
-              Copy to Clipboard
-            </button>
-            <JsonEditor className='advanced-json-editor' data={configTextboxValue} onUpdate={onUpdate} rootName='' collapse={collapseFields} />
-            <button
-              className='btn full-width'
+              className='btn btn-success m-2 p-2'
               onClick={() => {
                 loadConfig(configTextboxValue)
                 setAdvancedToggle(!advancedToggle)
               }}
             >
-              Apply
+              Apply Configuration Changes
             </button>
           </React.Fragment>
         )}

package/components/Alert/components/Alert.tsx

@@ -1,7 +1,7 @@
 import Icon from '../../ui/Icon'
 
 import DOMPurify from 'dompurify'
-import React from 'react'
+import React, { useEffect } from 'react'
 
 import './Alert.styles.css'
 
@@ -14,10 +14,34 @@ type AlertProps = {
   iconSize?: number
   // heading for the alert box
   heading?: string
+  // dismiss function
+  onDismiss?: Function
+  // make the alert dismiss on it's own
+  autoDismiss?: boolean
+  // set seconds until autoDismiss, default is 5 seconds
+  secondsBeforeDismiss?: number
+  // provide option for non dismissable alert
+  showCloseButton?: boolean
 }
 
-const Alert: React.FC<AlertProps> = ({ type = 'info', message = '', iconSize = 21, heading }) => {
+const Alert: React.FC<AlertProps> = ({
+  type = 'info',
+  message = '',
+  iconSize = 21,
+  heading,
+  onDismiss,
+  autoDismiss,
+  secondsBeforeDismiss = 5,
+  showCloseButton = true
+}) => {
   // sanitize the text for setting dangerouslySetInnerHTML
+
+  useEffect(() => {
+    if (autoDismiss) {
+      setTimeout(() => onDismiss(), secondsBeforeDismiss * 1000)
+    }
+  }, [])
+
   const sanitizedData = () => ({
     __html: DOMPurify.sanitize(message)
   })
@@ -26,12 +50,19 @@ const Alert: React.FC<AlertProps> = ({ type = 'info', message = '', iconSize = 2
   const styleResets = { width: 'unset', height: 'unset', paddingRight: '5px' }
 
   return (
-    <div className={`alert alert-${type} p-1`} role='alert'>
-      {heading && <h4 className='alert-heading'>{heading}</h4>}
-      {type === 'success' && <Icon display='check' size={iconSize} />}
-      {type === 'danger' && <Icon display='warningCircle' size={iconSize} />}
-      {type === 'info' && <Icon display='info' size={iconSize} />}
-      <span dangerouslySetInnerHTML={sanitizedData()} />
+    <div className={`alert alert-${type} p-1 d-flex justify-content-between`} role='alert'>
+      <div className='d-flex'>
+        {heading && <h4 className='alert-heading'>{heading}</h4>}
+        {type === 'success' && <Icon display='check' size={iconSize} />}
+        {type === 'danger' && <Icon display='warningCircle' size={iconSize} />}
+        {type === 'info' && <Icon display='info' size={iconSize} />}
+        <span dangerouslySetInnerHTML={sanitizedData()} />
+      </div>
+      {showCloseButton && (
+        <button type='button' className='close pl-5' aria-label='Close' onClick={() => onDismiss()}>
+          X
+        </button>
+      )}
     </div>
   )
 }

package/components/DataTable/DataTable.tsx

@@ -22,6 +22,7 @@ import { Column } from '../../types/Column'
 import { pivotData } from '../../helpers/pivotData'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import './data-table.css'
+import _ from 'lodash'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
@@ -73,9 +74,14 @@ const DataTable = (props: DataTableProps) => {
   const runtimeData = useMemo(() => {
     const data = removeNullColumns(parentRuntimeData)
     if (config.table.pivot) {
+      const excludeColumns = Object.values(config.columns || {})
+        .filter(column => column.dataTable === false)
+        .map(col => col.name)
       const { columnName, valueColumns } = config.table.pivot
       if (columnName && valueColumns) {
-        return pivotData(data, columnName, valueColumns)
+        // remove excluded columns so that they aren't included in the pivot calculation
+        const _data = data.map(row => _.omit(row, excludeColumns))
+        return pivotData(_data, columnName, valueColumns)
       }
     }
     return data
@@ -84,7 +90,7 @@ const DataTable = (props: DataTableProps) => {
   const [expanded, setExpanded] = useState(expandDataTable)
 
   const [sortBy, setSortBy] = useState<any>({
-    column: config.type === 'map' ? 'geo' : 'date',
+    column: '',
     asc: false,
     colIndex: null
   })
@@ -196,10 +202,11 @@ const DataTable = (props: DataTableProps) => {
       : config.visualizationType === 'Pie'
       ? [config.yAxis.dataKey]
       : config.visualizationType === 'Box Plot'
-        ? Object.entries(config.boxplot.tableData[0])
+        ? config?.boxplot?.plots?.[0] ? Object.entries(config.boxplot.plots[0]) : []
         : config.runtime?.seriesKeys),
     [config.runtime?.seriesKeys]) // eslint-disable-line
 
+  const hasNoData = runtimeData.length === 0
   if (config.visualizationType !== 'Box Plot') {
     const getDownloadData = () => {
       // only use fullGeoName on County maps and no other
@@ -237,17 +244,28 @@ 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'>
         {!config.table.showDownloadLinkBelow && <TableMediaControls />}
-        <section
-          id={tabbingId.replace('#', '')}
-          className={`data-table-container ${viewport} ${
-            !config.table.showDownloadLinkBelow ? 'download-link-above' : ''
-          }`}
-          aria-label={accessibilityLabel}
-        >
+        <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           {config.table.collapsible !== false && (
             <ExpandCollapse
@@ -263,6 +281,7 @@ const DataTable = (props: DataTableProps) => {
               preliminaryData={config.preliminaryData}
               viewport={viewport}
               wrapColumns={wrapColumns}
+              noData={hasNoData}
               childrenMatrix={
                 config.type === 'map'
                   ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
@@ -306,6 +325,7 @@ const DataTable = (props: DataTableProps) => {
                   viewport={viewport}
                   wrapColumns={wrapColumns}
                   childrenMatrix={regionCellMatrix({ config })}
+                  noData={hasNoData}
                   tableName={config.visualizationType}
                   caption='Table of the highlighted regions in the visualization'
                   headContent={
@@ -343,6 +363,7 @@ const DataTable = (props: DataTableProps) => {
               viewport={viewport}
               wrapColumns={wrapColumns}
               childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
+              noData={hasNoData}
               tableName={config.visualizationType}
               caption={caption}
               stickyHeader

package/components/DataTable/components/ExpandCollapse.tsx

@@ -2,7 +2,7 @@ import Icon from '../../ui/Icon'
 import { fontSizes } from '../../../helpers/cove/fontSettings'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
+  const titleFontSize = ['xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
   return (
     <div
       style={{ fontSize: titleFontSize }}

package/components/DataTable/components/SortIcon/sort-icon.css

@@ -19,3 +19,18 @@
     top: 0.5rem;
   }
 }
+
+@media (max-width: 576px) {
+  .sort-icon {
+    :is(svg) {
+      width: 0.9rem;
+      height: 0.9rem;
+    }
+    .up {
+      bottom: 0.3rem;
+    }
+    .down {
+      top: 0.3rem;
+    }
+  }
+}

package/components/DataTable/data-table.css

@@ -211,33 +211,15 @@ table.data-table {
     }
     button {
       background: var(--mediumGray);
-      padding: 0.6rem 0.8rem;
       &:hover {
         background: lighten(var(--mediumGray), 5%);
       }
     }
-    button.btn-next {
-      &::before {
-        content: ' ';
-        background-image: url(../assets/icon-caret-filled-up.svg);
-        background-size: 10px 5px;
-        width: 10px;
-        height: 5px;
-        display: block;
-        transform: rotate(90deg);
-      }
-    }
-    button.btn-prev {
-      &::before {
-        content: ' ';
-        background-image: url(../assets/icon-caret-filled-up.svg);
-        background-size: 10px 5px;
-        width: 10px;
-        height: 5px;
-        display: block;
-        transform: rotate(-90deg);
-      }
+
+    button.btn svg {
+      margin: 0px 0 3px 0;
     }
+
     button[disabled] {
       background: var(--mediumGray);
       opacity: 0.3;

package/components/DataTable/helpers/boxplotCellMatrix.tsx

@@ -16,9 +16,9 @@ const boxplotCellMatrix = ({ rows, config }): CellMatrix => {
       columnThirdQuartile: labels.q3,
       columnOutliers: labels.outliers,
       values: labels.values,
-      columnTotal: labels.total,
+      columnCount: labels.count,
       columnSd: 'Standard Deviation',
-      nonOutlierValues: 'Non Outliers',
+      columnNonOutliers: 'Non Outliers',
       columnLowerBounds: labels.lowerBounds,
       columnUpperBounds: labels.upperBounds
     }
@@ -28,30 +28,35 @@ const boxplotCellMatrix = ({ rows, config }): CellMatrix => {
     return resolvedName
   }
   let resolveCell = (rowid, plot) => {
-    if (Number(rowid) === 0) return true
-    if (Number(rowid) === 1) return plot.columnMax
-    if (Number(rowid) === 2) return plot.columnThirdQuartile
-    if (Number(rowid) === 3) return plot.columnMedian
-    if (Number(rowid) === 4) return plot.columnFirstQuartile
-    if (Number(rowid) === 5) return plot.columnMin
-    if (Number(rowid) === 6) return plot.columnTotal
-    if (Number(rowid) === 7) return plot.columnSd
-    if (Number(rowid) === 8) return plot.columnMean
-    if (Number(rowid) === 9) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
-    if (Number(rowid) === 10) return plot.values.length > 0 ? plot.values.toString() : '-'
+    if (Number(rowid) === 0) return plot.columnMax
+    if (Number(rowid) === 1) return plot.columnThirdQuartile
+    if (Number(rowid) === 2) return plot.columnMedian
+    if (Number(rowid) === 3) return plot.columnFirstQuartile
+    if (Number(rowid) === 4) return plot.columnMin
+    if (Number(rowid) === 5) return plot.columnCount
+    if (Number(rowid) === 6) return plot.columnSd
+    if (Number(rowid) === 7) return plot.columnMean
+    if (Number(rowid) === 8) return plot.columnIqr
+    if (Number(rowid) === 9) return plot.values.length > 0 ? plot.values.toString() : '-'
+    if (Number(rowid) === 10) return plot.columnLowerBounds
+    if (Number(rowid) === 11) return plot.columnUpperBounds
+    if (Number(rowid) === 12) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
+    if (Number(rowid) === 13) return plot.columnNonOutliers.length > 0 ? plot.columnNonOutliers.toString() : '-'
     return <p>-</p>
   }
   // get list of data keys for each row
   let dataKeys = rows.map(row => {
     return row[0]
   })
+
   let columns = ['Measures', ...config.boxplot.categories]
   dataKeys.shift() // remove index 0 // we did header column separately
+
   return dataKeys.map((rowkey, index) => {
     return columns.map((column, colnum) => {
       let cellValue
       if (column === 'Measures') {
-        let labelValue = index > 0 ? resolveName(rowkey) : ''
+        let labelValue = resolveName(rowkey)
         cellValue = <>{labelValue}</>
       } else {
         cellValue = resolveCell(index, config.boxplot.plots[colnum - 1])

package/components/DataTable/helpers/getChartCellValue.ts

@@ -1,5 +1,5 @@
 import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
-import { formatNumber } from '@cdc/core/helpers/cove/number'
+import { formatNumber } from '../../../helpers/cove/number'
 import { TableConfig } from '../types/TableConfig'
 
 // if its additional column, return formatting params
@@ -29,10 +29,18 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
 
   const rowObj = runtimeData[row]
   let cellValue // placeholder for formatting below
-  let labelValue = rowObj[column] // just raw X axis string
+  const labelValue = rowObj[column] // just raw X axis string
   if (column === config.xAxis?.dataKey) {
-    // not the prettiest, but helper functions work nicely here.
-    cellValue = config.xAxis?.type === 'date' ? formatDate(config.table?.dateDisplayFormat || config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
+    const { type, dateDisplayFormat, dateParseFormat } = config.xAxis || {}
+    const dateFormat = config.table?.dateDisplayFormat || dateDisplayFormat
+
+    if (type === 'date' || type === 'date-time') {
+      cellValue = formatDate(dateFormat, parseDate(dateParseFormat, labelValue))
+    } else if (type === 'continuous') {
+      cellValue = formatNumber(runtimeData[row][column], 'bottom', false, config)
+    } else {
+      cellValue = labelValue
+    }
   } else {
     let resolvedAxis = 'left'
     let leftAxisItems = config.series ? config.series.filter(item => item?.axis === 'Left') : []
@@ -48,9 +56,13 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
 
     let addColParams = isAdditionalColumn(column, config)
     if (addColParams) {
-      cellValue = config.dataFormat ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams) : runtimeData[row][column]
+      cellValue = config.dataFormat
+        ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams)
+        : runtimeData[row][column]
     } else {
-      cellValue = config.dataFormat ? formatNumber(runtimeData[row][column], resolvedAxis, false, config) : runtimeData[row][column]
+      cellValue = config.dataFormat
+        ? formatNumber(runtimeData[row][column], resolvedAxis, false, config)
+        : runtimeData[row][column]
     }
   }
 
@@ -63,7 +75,13 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
     const barSeriesExist = config.runtime?.barSeriesKeys?.includes(column)
     const lineSeriesExist = config.runtime?.lineSeriesKeys?.includes(column)
     const showSymbol = config.general.showSuppressedSymbol
-    if (isValueMatch && isColumnMatch && pd.displayTable && pd.type === 'suppression' && config.visualizationSubType !== 'stacked') {
+    if (
+      isValueMatch &&
+      isColumnMatch &&
+      pd.displayTable &&
+      pd.type === 'suppression' &&
+      config.visualizationSubType !== 'stacked'
+    ) {
       switch (config.visualizationType) {
         case 'Combo':
           cellValue = barSeriesExist && showSymbol ? pd.iconCode : lineSeriesExist && showSymbol ? pd.lineCode : ''

package/components/EditorPanel/ColumnsEditor.tsx

@@ -1,6 +1,6 @@
 import Tooltip from '../ui/Tooltip'
 import Icon from '../ui/Icon'
-import { TextField } from './Inputs'
+import { Select, TextField } from './Inputs'
 import { Visualization } from '../../types/Visualization'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import { Column } from '../../types/Column'
@@ -16,7 +16,13 @@ interface ColumnsEditorProps {
 
 type OpenControls = [Record<string, boolean>, Function] // useState type
 
-const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({ config, deleteColumn, updateField, colKey, controls }) => {
+const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({
+  config,
+  deleteColumn,
+  updateField,
+  colKey,
+  controls
+}) => {
   const [openControls, setOpenControls] = controls
 
   const editColumn = (key, value) => {
@@ -63,43 +69,69 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
   const colName = config.columns[colKey]?.name
 
   return (
-    <FieldSetWrapper fieldName={colName} fieldKey={colKey} fieldType='Column' controls={controls} deleteField={() => deleteColumn(colKey)}>
-      <label>
-        <span className='edit-label column-heading'>Column</span>
-        <select
-          value={config.columns[colKey] ? config.columns[colKey].name : undefined}
-          onChange={event => {
-            changeName(event.target.value)
-          }}
-        >
-          {['-Select-', ...getColumns()].map(option => (
-            <option key={option}>{option}</option>
-          ))}
-        </select>
-      </label>
+    <FieldSetWrapper
+      fieldName={colName}
+      fieldKey={colKey}
+      fieldType='Column'
+      controls={controls}
+      deleteField={() => deleteColumn(colKey)}
+    >
+      <Select
+        label='Column'
+        value={config.columns[colKey]?.name}
+        fieldName='name'
+        section={'columns'}
+        initial={'-Select-'}
+        options={getColumns()}
+        updateField={(_section, _subsection, _fieldName, value) => changeName(value)}
+      />
       {config.type !== 'table' && (
-        <label>
-          <span className='edit-label column-heading'>Associate to Series</span>
-          <select
-            value={config.columns[colKey] ? config.columns[colKey].series : ''}
-            onChange={event => {
-              editColumn('series', event.target.value)
-            }}
-          >
-            <option value=''>Select series</option>
-            {(config.series || []).map(series => (
-              <option key={series.dataKey}>{series.dataKey}</option>
-            ))}
-          </select>
-        </label>
+        <Select
+          label='Associate to Series'
+          value={config.columns[colKey]?.series}
+          fieldName={'series'}
+          section='columns'
+          initial={'Select series'}
+          options={config.series?.map(series => series.dataKey) || []}
+          updateField={(_section, _subsection, _fieldName, value) => editColumn('series', value)}
+        />
       )}
 
-      <TextField value={config.columns[colKey].label} section='columns' subsection={colKey} fieldName='label' label='Label' updateField={updateField} />
+      <TextField
+        value={config.columns[colKey].label}
+        section='columns'
+        subsection={colKey}
+        fieldName='label'
+        label='Label'
+        updateField={updateField}
+      />
       <ul className='column-edit'>
         <li className='three-col'>
-          <TextField value={config.columns[colKey].prefix} section='columns' subsection={colKey} fieldName='prefix' label='Prefix' updateField={updateField} />
-          <TextField value={config.columns[colKey].suffix} section='columns' subsection={colKey} fieldName='suffix' label='Suffix' updateField={updateField} />
-          <TextField type='number' value={config.columns[colKey].roundToPlace} section='columns' subsection={colKey} fieldName='roundToPlace' label='Round' updateField={updateField} />
+          <TextField
+            value={config.columns[colKey].prefix}
+            section='columns'
+            subsection={colKey}
+            fieldName='prefix'
+            label='Prefix'
+            updateField={updateField}
+          />
+          <TextField
+            value={config.columns[colKey].suffix}
+            section='columns'
+            subsection={colKey}
+            fieldName='suffix'
+            label='Suffix'
+            updateField={updateField}
+          />
+          <TextField
+            type='number'
+            value={config.columns[colKey].roundToPlace}
+            section='columns'
+            subsection={colKey}
+            fieldName='roundToPlace'
+            label='Round'
+            updateField={updateField}
+          />
         </li>
         <li>
           <label className='checkbox'>
@@ -202,7 +234,13 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
       </ul>
       <label>
         <span className='edit-label column-heading'>Order</span>
-        <input onWheel={e => e.currentTarget.blur()} type='number' min='1' value={config.columns[colKey].order} onChange={e => updateField('columns', colKey, 'order', parseInt(e.target.value))} />
+        <input
+          onWheel={e => e.currentTarget.blur()}
+          type='number'
+          min='1'
+          value={config.columns[colKey].order}
+          onChange={e => updateField('columns', colKey, 'order', parseInt(e.target.value))}
+        />
       </label>
     </FieldSetWrapper>
   )
@@ -252,7 +290,14 @@ const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, dele
             </span>
           </label>
           {additionalColumns.map((val, i) => (
-            <FieldSet key={val + i} controls={openControls} config={config} deleteColumn={deleteColumn} updateField={updateField} colKey={val} />
+            <FieldSet
+              key={val + i}
+              controls={openControls}
+              config={config}
+              deleteColumn={deleteColumn}
+              updateField={updateField}
+              colKey={val}
+            />
           ))}
           <button
             className={'btn btn-primary'}