@cdc/core 4.24.5 → 4.24.9

package/assets/icon-gear-multi.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #231f20;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M218.85,262.45c-.39-37.16-30.83-66.97-68.01-66.58-37.16.41-66.97,30.86-66.58,68.03.4,37.15,30.86,66.94,68.02,66.57,37.18-.41,66.98-30.86,66.57-68.02ZM151.88,292.62c-4.07.04-7.95-.74-11.49-2.19-10.62-4.36-18.15-14.75-18.28-26.94-.17-16.27,12.86-29.59,29.13-29.76,4.06-.04,7.95.74,11.48,2.19,10.62,4.35,18.15,14.74,18.28,26.94.18,16.25-12.87,29.59-29.12,29.76Z"/>
+    <path class="cls-1" d="M250.22,280.09c.99-5.85,1.5-11.87,1.44-18.01-.05-3.92-.34-7.82-.82-11.64l23.73-17.16c-1.72-7.65-4.12-15.04-7.14-22.1l-30.29.03c-4.82-7.93-10.7-15.12-17.46-21.39l7.59-30.08c-6.16-4.7-12.74-8.82-19.71-12.35l-24.62,20.71c-7.91-2.64-16.26-4.28-24.91-4.81l-4.17-8.61-10.1-20.88c-7.89.37-15.6,1.46-23.03,3.17l-5.77,33c-7.53,2.96-14.62,6.81-21.11,11.39l-30.76-13.8c-5.69,5.27-10.89,11.08-15.55,17.29l16.85,29.12c-3.92,6.93-7.04,14.4-9.23,22.24l-32.12,9.11c-.72,5.75-1.1,11.59-1.03,17.54.02,1.92.1,3.82.2,5.73l30.61,11.08c1.43,8.61,3.98,16.85,7.44,24.55l-17.93,26.42c4.21,6.54,9,12.7,14.3,18.34l28.94-10.58c6.98,6.15,14.83,11.31,23.32,15.33l3.06,29.9c7.33,2.28,14.93,3.88,22.74,4.81l14.52-25.22c1.14.03,2.29.07,3.45.04,9.06-.08,17.81-1.4,26.14-3.74l20.52,19.93c7.2-3.04,14.06-6.7,20.53-10.93l-4.95-27.85c7.91-6.47,14.82-14.1,20.44-22.65l28.22,2.05c3.53-6.85,6.48-14.04,8.74-21.52l-22.06-18.46ZM152.4,341.41c-43.21.47-78.62-34.19-79.08-77.4-.46-43.2,34.19-78.61,77.4-79.08,43.21-.46,78.6,34.21,79.06,77.41.47,43.2-34.18,78.6-77.39,79.07Z"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M345.31,139.47c-7.44-19.18-29.04-28.71-48.23-21.26-19.18,7.45-28.7,29.05-21.25,48.24,7.45,19.18,29.04,28.69,48.24,21.25,19.19-7.46,28.71-29.05,21.25-48.24ZM316.47,168.16c-2.1.82-4.26,1.17-6.38,1.1-6.35-.19-12.28-4.11-14.73-10.4-3.26-8.4.9-17.85,9.3-21.11,2.1-.82,4.26-1.17,6.38-1.1,6.35.19,12.28,4.1,14.73,10.4,3.26,8.39-.9,17.85-9.29,21.1Z"/>
+    <path class="cls-1" d="M365.01,142.5c-.63-3.23-1.54-6.45-2.76-9.62-.79-2.02-1.7-3.99-2.69-5.87l8.96-13.52c-2.38-3.63-5.07-7-8.01-10.06l-15.7,5.92c-4.05-3.17-8.5-5.75-13.22-7.69l-1.93-17.07c-4.11-1.24-8.33-2.09-12.62-2.56l-8.73,15.54c-4.61.17-9.26.95-13.85,2.36l-3.84-3.65-9.31-8.86c-4.02,1.73-7.8,3.79-11.32,6.13l3.44,18.23c-3.33,3-6.25,6.38-8.72,10.02l-18.64-1.16c-1.93,3.84-3.49,7.87-4.69,11.99l14.41,11.81c-.68,4.36-.85,8.84-.45,13.33l-14.87,10.98c.75,3.12,1.69,6.22,2.88,9.29.38.99.8,1.96,1.22,2.93l18.03-.22c2.42,4.19,5.35,7.96,8.64,11.28l-4.15,17.19c3.46,2.57,7.14,4.83,10.99,6.72l12.94-11.13c4.82,1.83,9.89,2.98,15.07,3.4l7.42,14.9c4.24-.25,8.5-.9,12.73-1.94l2.61-15.9c.6-.21,1.2-.41,1.8-.65,4.68-1.81,8.96-4.2,12.82-7.04l14.52,6.33c3.14-2.98,5.99-6.21,8.51-9.67l-7.99-13.47c2.84-4.9,4.94-10.2,6.18-15.73l15.03-4.44c.49-4.24.62-8.54.34-12.86l-15.03-5.27ZM326.25,193.35c-22.31,8.66-47.42-2.4-56.08-24.71-8.66-22.3,2.4-47.42,24.71-56.08,22.31-8.66,47.41,2.41,56.07,24.72,8.66,22.3-2.4,47.41-24.7,56.07Z"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M219.71,100.11c13.58-15.46,12.07-39.01-3.4-52.6-15.47-13.58-39.02-12.06-52.61,3.41-13.58,15.46-12.05,39.01,3.41,52.6,15.47,13.58,39.02,12.06,52.6-3.41ZM180.95,87.77c-1.69-1.49-3-3.24-3.92-5.15-2.76-5.72-2.02-12.79,2.43-17.87,5.95-6.77,16.25-7.44,23.02-1.49,1.69,1.49,3,3.24,3.92,5.15,2.77,5.72,2.03,12.79-2.43,17.87-5.94,6.76-16.25,7.44-23.01,1.49Z"/>
+    <path class="cls-1" d="M226.11,118.99c2.57-2.05,5.01-4.34,7.26-6.89,1.43-1.64,2.75-3.35,3.97-5.1l16.13,1.71c2.12-3.79,3.87-7.72,5.23-11.75l-12.5-11.19c.94-5.05,1.18-10.19.72-15.28l14.26-9.59c-.8-4.22-1.99-8.35-3.55-12.38l-17.81-.57c-2.28-4.01-5.12-7.78-8.49-11.2l1.47-5.09,3.56-12.34c-3.39-2.77-6.97-5.17-10.67-7.21l-14.59,11.47c-4.2-1.57-8.54-2.6-12.92-3.11l-7.57-17.07c-4.3.06-8.59.54-12.81,1.37l-3.83,18.24c-4.18,1.41-8.23,3.33-12.03,5.75l-16.61-8.13c-2.42,2.1-4.74,4.37-6.91,6.85-.7.8-1.37,1.61-2.04,2.44l8.52,15.89c-2.6,4.08-4.59,8.42-6.02,12.87l-17.16,4.25c-.68,4.26-.99,8.56-.89,12.85l15.84,6.34c.6,5.12,1.92,10.15,3.94,14.94l-9.8,13.46c2.18,3.65,4.72,7.12,7.59,10.4l15.31-5.02c.46.44.92.87,1.41,1.29,3.76,3.32,7.86,6.01,12.16,8.13l1.09,15.81c4.09,1.41,8.27,2.44,12.5,3.09l8.26-13.31c5.65.26,11.32-.33,16.8-1.78l10.87,11.29c3.99-1.52,7.86-3.39,11.57-5.64l-2.26-15.77ZM163.11,108.07c-17.98-15.79-19.75-43.18-3.96-61.15,15.79-17.98,43.17-19.75,61.16-3.96,17.98,15.8,19.74,43.18,3.95,61.15-15.79,17.98-43.16,19.75-61.15,3.96Z"/>
+  </g>
+</svg>

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react'
+import MapIcon from '../../assets/map-folded.svg'
+import ChartIcon from '../../assets/icon-chart-bar.svg'
+import MarkupIncludeIcon from '../../assets/icon-code.svg'
+import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
+import { formatConfigBeforeSave as stripConfig } from '../../helpers/formatConfigBeforeSave'
+import './advanced-editor-styles.css'
+import _ from 'lodash'
+
+export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExpandCollapse = () => {} }) => {
+  const [advancedToggle, _setAdvancedToggle] = useState(false)
+  const [configTextboxValue, setConfigTextbox] = useState<Record<string, any>>({})
+  const setAdvancedToggle = val => {
+    _setAdvancedToggle(val)
+    onExpandCollapse()
+  }
+
+  const collapseFields: FilterFunction = input => {
+    if (['datasets', 'data', 'originalFormattedData', 'formattedData'].includes(String(input.key))) return true
+    return false
+  }
+
+  const onUpdate: UpdateFunction = val => {
+    setConfigTextbox(val.newData)
+  }
+
+  useEffect(() => {
+    let parsedConfig = stripConfig(config)
+    if (config.type !== 'dashboard') {
+      parsedConfig = convertStateToConfig()
+    }
+
+    setConfigTextbox(parsedConfig)
+  }, [config])
+
+  const typeLookup = {
+    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 />]
+  }
+
+  if (!config.type) return <></>
+  return (
+    <>
+      <a href={typeLookup[config.type][1]} target='_blank' rel='noopener noreferrer' className='guidance-link'>
+        {typeLookup[config.type][2]}
+        <div>
+          <span className='heading-3'>Get Help with {typeLookup[config.type][0]}</span>
+          <p>Examples and documentation</p>
+        </div>
+      </a>
+      <div className='advanced'>
+        <span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
+          <span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
+        </span>
+        {advancedToggle && (
+          <React.Fragment>
+            <section className='error-box py-2 px-3 my-2'>
+              <div>
+                <strong className='pt-1'>Warning</strong>
+                <p>This can cause serious errors in your visualization.</p>
+              </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.
+            </p>
+            <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'
+              onClick={() => {
+                loadConfig(configTextboxValue)
+                setAdvancedToggle(!advancedToggle)
+              }}
+            >
+              Apply
+            </button>
+          </React.Fragment>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default AdvancedEditor

package/components/AdvancedEditor/advanced-editor-styles.css

@@ -0,0 +1,3 @@
+.advanced-json-editor {
+  width: 100vw;
+}

package/components/AdvancedEditor/index.ts

@@ -0,0 +1 @@
+export { default } from './AdvancedEditor'

package/components/Alert/components/Alert.styles.css

@@ -0,0 +1,15 @@
+.cdc-open-viz-module {
+  .accordion__panel > .alert {
+    margin-bottom: 15px;
+  }
+
+  .alert {
+    align-items: center;
+    justify-content: center;
+    display: inline-flex;
+
+    .cove-icon {
+      margin: 5px;
+    }
+  }
+}

package/components/Alert/components/Alert.tsx

@@ -0,0 +1,39 @@
+import Icon from '../../ui/Icon'
+
+import DOMPurify from 'dompurify'
+import React from 'react'
+
+import './Alert.styles.css'
+
+type AlertProps = {
+  // type of alert for styling the alert box
+  type?: 'success' | 'danger' | 'info'
+  // message to display in the alert box
+  message?: string
+  // size of the icon in the alert box
+  iconSize?: number
+  // heading for the alert box
+  heading?: string
+}
+
+const Alert: React.FC<AlertProps> = ({ type = 'info', message = '', iconSize = 21, heading }) => {
+  // sanitize the text for setting dangerouslySetInnerHTML
+  const sanitizedData = () => ({
+    __html: DOMPurify.sanitize(message)
+  })
+
+  // reset styles to avoid conflicts in wcms
+  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>
+  )
+}
+
+export default Alert

package/components/Alert/index.tsx

@@ -0,0 +1,3 @@
+import Alert from './components/Alert'
+
+export default Alert

package/components/DataTable/DataTable.tsx

@@ -19,6 +19,7 @@ import boxplotCellMatrix from './helpers/boxplotCellMatrix'
 import removeNullColumns from './helpers/removeNullColumns'
 import { TableConfig } from './types/TableConfig'
 import { Column } from '../../types/Column'
+import { pivotData } from '../../helpers/pivotData'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
@@ -52,11 +53,39 @@ export type DataTableProps = {
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
-  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData: parentRuntimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
-  const runtimeData = removeNullColumns(parentRuntimeData)
+  const {
+    config,
+    dataConfig,
+    tableTitle,
+    vizTitle,
+    rawData,
+    runtimeData: parentRuntimeData,
+    headerColor,
+    expandDataTable,
+    columns,
+    viewport,
+    formatLegendLocation,
+    tabbingId,
+    wrapColumns
+  } = props
+  const runtimeData = useMemo(() => {
+    const data = removeNullColumns(parentRuntimeData)
+    if (config.table.pivot) {
+      const { columnName, valueColumn } = config.table.pivot
+      if (columnName && valueColumn) {
+        return pivotData(data, columnName, valueColumn)
+      }
+    }
+    return data
+  }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumn])
+
   const [expanded, setExpanded] = useState(expandDataTable)
 
-  const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
+  const [sortBy, setSortBy] = useState<any>({
+    column: config.type === 'map' ? 'geo' : 'date',
+    asc: false,
+    colIndex: null
+  })
 
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
@@ -75,7 +104,8 @@ const DataTable = (props: DataTableProps) => {
   // Change accessibility label depending on expanded status
   useEffect(() => {
     const expandedLabel = 'Accessible data table.'
-    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
+    const collapsedLabel =
+      'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
 
     if (expanded === true && accessibilityLabel !== expandedLabel) {
       setAccessibilityLabel(expandedLabel)
@@ -130,7 +160,9 @@ const DataTable = (props: DataTableProps) => {
 
   const caption = useMemo(() => {
     if (config.type === 'map') {
-      return config.table.caption ? config.table.caption : `Data table showing data for the ${mapLookup[config.general.geoType]} figure.`
+      return config.table.caption
+        ? config.table.caption
+        : `Data table showing data for the ${mapLookup[config.general.geoType]} figure.`
     } else {
       return config.table.caption ? config.table.caption : `Data table showing data for the ${config.type} figure.`
     }
@@ -176,48 +208,102 @@ const DataTable = (props: DataTableProps) => {
       }
     }
 
+    const getMediaControlsClasses = () => {
+      const classes = ['download-links']
+      const isLegendOnBottom = config?.legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(viewport)
+      if (config.brush?.active && !isLegendOnBottom) classes.push('brush-active')
+      if (config.brush?.active && config.legend.hide) classes.push('brush-active')
+      return classes
+    }
+
     return (
       <ErrorBoundary component='DataTable'>
-        <MediaControls.Section classes={['download-links']}>
+        <MediaControls.Section classes={getMediaControlsClasses()}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
-          {(config.table.download || config.general?.showDownloadButton) && <DownloadButton rawData={getDownloadData()} fileName={`${vizTitle || 'data-table'}.csv`} headerColor={headerColor} />}
+          {(config.table.download || config.general?.showDownloadButton) && (
+            <DownloadButton
+              rawData={getDownloadData()}
+              fileName={`${vizTitle || 'data-table'}.csv`}
+              headerColor={headerColor}
+            />
+          )}
         </MediaControls.Section>
-        <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+        <section
+          id={tabbingId.replace('#', '')}
+          className={`data-table-container ${viewport} w-100`}
+          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} />}
+          {config.table.collapsible !== false && (
+            <ExpandCollapse
+              expanded={expanded}
+              setExpanded={setExpanded}
+              fontSize={config.fontSize}
+              tableTitle={tableTitle}
+              viewport={viewport}
+            />
+          )}
           <div className='table-container' style={limitHeight}>
             <Table
+              preliminaryData={config.preliminaryData}
               viewport={viewport}
               wrapColumns={wrapColumns}
-              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport }) : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })}
+              childrenMatrix={
+                config.type === 'map'
+                  ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
+                  : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
+              }
               tableName={config.type}
               caption={caption}
               stickyHeader
               hasRowType={hasRowType}
-              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={runtimeData} {...props} hasRowType={hasRowType} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
-              tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${isVertical ? '' : ' horizontal'}`, 'aria-live': 'assertive', 'aria-rowcount': config?.data?.length ? config.data.length : -1, hidden: !expanded }}
+              headContent={
+                config.type === 'map' ? (
+                  <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} />
+                ) : (
+                  <ChartHeader
+                    data={runtimeData}
+                    {...props}
+                    hasRowType={hasRowType}
+                    isVertical={isVertical}
+                    sortBy={sortBy}
+                    setSortBy={setSortBy}
+                  />
+                )
+              }
+              tableOptions={{
+                className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${
+                  isVertical ? '' : ' horizontal'
+                }`,
+                'aria-live': 'assertive',
+                'aria-rowcount': config?.data?.length ? config.data.length : -1,
+                hidden: !expanded
+              }}
               fontSize={config.fontSize}
             />
 
             {/* REGION Data Table */}
-            {noRelativeRegions && config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
-              <Table
-                viewport={viewport}
-                wrapColumns={wrapColumns}
-                childrenMatrix={regionCellMatrix({ config })}
-                tableName={config.visualizationType}
-                caption='Table of the highlighted regions in the visualization'
-                headContent={
-                  <tr>
-                    <th>Region Name</th>
-                    <th>Start Date</th>
-                    <th>End Date</th>
-                  </tr>
-                }
-                tableOptions={{ className: 'region-table data-table' }}
-                fontSize={config.fontSize}
-              />
-            )}
+            {noRelativeRegions &&
+              config.regions &&
+              config.regions.length > 0 &&
+              config.visualizationType !== 'Box Plot' && (
+                <Table
+                  viewport={viewport}
+                  wrapColumns={wrapColumns}
+                  childrenMatrix={regionCellMatrix({ config })}
+                  tableName={config.visualizationType}
+                  caption='Table of the highlighted regions in the visualization'
+                  headContent={
+                    <tr>
+                      <th>Region Name</th>
+                      <th>Start Date</th>
+                      <th>End Date</th>
+                    </tr>
+                  }
+                  tableOptions={{ className: 'region-table data-table' }}
+                  fontSize={config.fontSize}
+                />
+              )}
           </div>
         </section>
         <div id={skipId} className='cdcdataviz-sr-only'>
@@ -229,7 +315,11 @@ 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={`data-table-container ${viewport} w-100`}
+          aria-label={accessibilityLabel}
+        >
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
@@ -241,7 +331,12 @@ const DataTable = (props: DataTableProps) => {
               caption={caption}
               stickyHeader
               headContent={<BoxplotHeader categories={config.boxplot.categories} />}
-              tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`, 'aria-live': 'assertive', 'aria-rowcount': 11, hidden: !expanded }}
+              tableOptions={{
+                className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`,
+                'aria-live': 'assertive',
+                'aria-rowcount': 11,
+                hidden: !expanded
+              }}
               fontSize={config.fontSize}
             />
           </div>

package/components/DataTable/DataTableStandAlone.tsx

@@ -5,6 +5,7 @@ import DataTable from './DataTable'
 import DataTableEditorPanel from './components/DataTableEditorPanel'
 import Filters from '../Filters'
 import { TableConfig } from './types/TableConfig'
+import { filterVizData } from '../../helpers/filterVizData'
 
 type StandAloneProps = {
   visualizationKey: string
@@ -14,34 +15,12 @@ type StandAloneProps = {
   updateConfig?: (Visualization) => void
 }
 
-// filterData is copied from ./packages/chart/src/helpers/filterData.ts
-// consider moving this to a shared location
-const filterData = (filters, data) => {
-  if (!filters) return data
-  const filteredData: any[] = []
-
-  data.forEach(row => {
-    let add = true
-    filters
-      .filter(filter => filter.type !== 'url')
-      .forEach(filter => {
-        if (row[filter.columnName] != filter.active) {
-          add = false
-        }
-      })
-
-    if (add) filteredData.push(row)
-  })
-
-  return filteredData
-}
-
 const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, updateConfig, viewport, isEditor }) => {
-  const [filteredData, setFilteredData] = useState<Record<string, any>[]>(filterData(config.filters, config.formattedData))
+  const [filteredData, setFilteredData] = useState<Record<string, any>[]>(filterVizData(config.filters, config.formattedData))
 
   useEffect(() => {
     // when using editor changes to filter should update the data
-    setFilteredData(filterData(config.filters, config.formattedData))
+    setFilteredData(filterVizData(config.filters, config?.formattedData?.length > 0 ? config.formattedData : config.data))
   }, [config.filters])
 
   if (isEditor)
@@ -53,7 +32,7 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, conf
 
   return (
     <>
-      <Filters config={config} setConfig={updateConfig} setFilteredData={setFilteredData} filterData={filterData} filteredData={filteredData} excludedData={config.formattedData} />
+      <Filters config={config} setConfig={updateConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={config.formattedData} />
       <DataTable expandDataTable={true} config={config} rawData={config.data} runtimeData={filteredData} tabbingId={visualizationKey} tableTitle={config.table.label} viewport={viewport || 'lg'} />
     </>
   )

package/components/DataTable/components/DataTableEditorPanel.tsx

@@ -1,4 +1,4 @@
-import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
+import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
 import DataTableEditor from '../../EditorPanel/DataTableEditor'
 import { Visualization } from '@cdc/core/types/Visualization'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
@@ -25,9 +25,9 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
     })
   }
 
-  const columns = Object.keys(config.originalFormattedData[0] || {})
+  const columns = Object.keys(config.originalFormattedData?.[0] || {})
   return (
-    <>
+    <Accordion allowZeroExpanded={true}>
       <AccordionItem>
         <AccordionItemHeading>
           <AccordionItemButton>Filters</AccordionItemButton>
@@ -52,7 +52,7 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
           <DataTableEditor config={config} columns={columns} updateField={updateField} isDashboard={true} />
         </AccordionItemPanel>
       </AccordionItem>
-    </>
+    </Accordion>
   )
 }
 

package/components/DataTable/components/ExpandCollapse.tsx

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

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -1,4 +1,4 @@
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
 import { customSort } from './customSort'
 import { getSeriesName } from './getSeriesName'
 import { DataTableProps } from '../DataTable'
@@ -6,6 +6,7 @@ import { getChartCellValue } from './getChartCellValue'
 import { getDataSeriesColumns } from './getDataSeriesColumns'
 import { ReactNode } from 'react'
 import { CellMatrix, GroupCellMatrix } from '../../Table/types/CellMatrix'
+import { getRowType } from './getRowType'
 
 type ChartRowsProps = DataTableProps & {
   rows: string[]
@@ -15,7 +16,7 @@ type ChartRowsProps = DataTableProps & {
   hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, hasRowType, viewport }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, hasRowType }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
   const groupBy = config.table?.groupBy
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
@@ -58,15 +59,8 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
     } else {
       return rows.map(row => {
         if (hasRowType) {
-          let rowType
-          let rowValues = []
-          dataSeriesColumns.forEach((column, j) => {
-            if (column.match(/row[_-]?type/i)) {
-              rowType = getChartCellValue(row, column, config, runtimeData)
-            } else {
-              rowValues.push(getChartCellValue(row, column, config, runtimeData))
-            }
-          })
+          const rowType = getRowType(runtimeData[row])
+          const rowValues = dataSeriesColumns.map(column => getChartCellValue(row, column, config, runtimeData))
           return [rowType, ...rowValues]
         } else {
           return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData))
@@ -80,7 +74,7 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
         config.visualizationType !== 'Pie'
           ? [
               <>
-                {colorScale && colorScale(seriesName) && <LegendCircle viewport={viewport} fill={colorScale(seriesName)} />}
+                {colorScale && colorScale(seriesName) && <LegendShape fill={colorScale(seriesName)} />}
                 {seriesName}
               </>
             ]

package/components/DataTable/helpers/getChartCellValue.ts

@@ -60,19 +60,23 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
     const isValueMatch = String(pd.value) === String(labelValue)
     // check entered suppression column against table key
     const isColumnMatch = !pd.column || pd.column === column
-    if (isValueMatch && isColumnMatch && pd.displayTable && pd.type === 'suppression') {
+    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') {
       switch (config.visualizationType) {
         case 'Combo':
-          cellValue = config.runtime.barSeriesKeys.includes(column) ? pd.iconCode : config.runtime.lineSeriesKeys.includes(column) ? pd.lineCode : ''
+          cellValue = barSeriesExist && showSymbol ? pd.iconCode : lineSeriesExist && showSymbol ? pd.lineCode : ''
           break
         case 'Bar':
-          cellValue = pd.iconCode
+          cellValue = !showSymbol ? '' : pd.iconCode
           break
         case 'Line':
-          cellValue = pd.lineCode
+          cellValue = !showSymbol ? '' : pd.lineCode
           break
       }
     }
   })
-  return cellValue
+  const shoMissingDataCellValue = config.general?.showMissingDataLabel && (!labelValue || labelValue === 'null')
+  return shoMissingDataCellValue ? 'N/A' : cellValue
 }

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -3,15 +3,16 @@ import _ from 'lodash'
 import { Column } from '../../../types/Column'
 
 export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, runtimeData: Object[]): string[] => {
-  const configColumns: Record<string, Column> = _.cloneDeep(config.columns) || {}
+  if (config.visualizationType === 'Sankey') return Object.keys(config?.data?.[0]?.tableData[0])
+  const configColumns = _.cloneDeep(config.columns) || ({} as Record<string, Column>)
   const excludeColumns = Object.values(configColumns)
     .filter(column => column.dataTable === false)
     .map(column => column.name)
   let tmpSeriesColumns: string[] = []
   if (config.visualizationType !== 'Pie') {
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey] : [] //, ...config.runtime.seriesLabelsAll
-    if (config.series) {
-      config.series.forEach(element => {
+    if (config.runtime?.series) {
+      config.runtime?.series.forEach(element => {
         tmpSeriesColumns.push(element.dataKey)
       })
     } else if (runtimeData && runtimeData.length > 0) {
@@ -21,12 +22,15 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey, config.yAxis?.dataKey] : [config.yAxis?.dataKey]
   }
 
+  const dataColumns = Object.keys(runtimeData[0] || {})
+
   // then add the additional Columns
-  Object.keys(configColumns).forEach(function (key) {
-    var value = configColumns[key]
+  Object.values(configColumns).forEach(function (value) {
+    if (!value.name) return
     // add if not the index AND it is enabled to be added to data table
     const alreadyAdded = tmpSeriesColumns.includes(value.name)
-    if (value.name !== config.xAxis?.dataKey && value.dataTable === true && !alreadyAdded) {
+    const columnIsInData = dataColumns.includes(value.name) // null columns are excluded from data
+    if (value.name !== config.xAxis?.dataKey && value.dataTable === true && !alreadyAdded && columnIsInData) {
       tmpSeriesColumns.push(value.name)
     }
   })
@@ -53,6 +57,5 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
   })
 
   tmpSeriesColumns.sort((a, b) => columnOrderingHash[a] - columnOrderingHash[b])
-
   return tmpSeriesColumns
 }

package/components/DataTable/helpers/getRowType.ts

@@ -0,0 +1,6 @@
+import { RowType } from '../../Table/types/RowType'
+
+export const getRowType = (row: Record<string, any>): RowType => {
+  const rowTypeKey = Object.keys(row).find(key => key.match(/row[_-]?type/i))
+  return row[rowTypeKey]
+}