@cdc/core 4.23.10 → 4.23.11

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/assets/icon-deviation-bar.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99.1 79.69"><defs><style>.cls-1{fill:#231f20;}</style></defs><rect class="cls-1" x="46.87" y="5.79" width="8.32" height="67.79" rx="1"/><rect class="cls-1" x="23.98" y="17.65" width="8.32" height="23.31" rx="1" transform="translate(57.44 1.16) rotate(90)"/><rect class="cls-1" x="19.53" y="25.99" width="8.32" height="32.21" rx="1" transform="translate(65.79 18.41) rotate(90)"/><rect class="cls-1" x="27.33" y="60.4" width="8.32" height="14.6" rx="1" transform="translate(99.19 36.2) rotate(90)"/><path class="cls-1" d="M81,52.74v4.32H64.55V52.74H81m1-2H63.55a1,1,0,0,0-1,1v6.32a1,1,0,0,0,1,1H82a1,1,0,0,0,1-1V51.74a1,1,0,0,0-1-1Z"/><path class="cls-1" d="M90,14.41v4.33H64.55V14.41H90m1-2H63.55a1,1,0,0,0-1,1v6.33a1,1,0,0,0,1,1H91a1,1,0,0,0,1-1V13.41a1,1,0,0,0-1-1Z"/></svg>

package/components/DataTable/DataTable.tsx

@@ -0,0 +1,205 @@
+import { useEffect, useState, useMemo } from 'react'
+
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import MediaControls from '@cdc/core/components/MediaControls'
+import Loading from '@cdc/core/components/Loading'
+import DownloadButton from '../DownloadButton'
+import { customSort } from './helpers/customSort'
+import ChartHeader from './components/ChartHeader'
+import BoxplotHeader from './components/BoxplotHeader'
+import MapHeader from './components/MapHeader'
+import SkipNav from './components/SkipNav'
+import ExpandCollapse from './components/ExpandCollapse'
+import mapCellMatrix from './helpers/mapCellMatrix'
+import Table from '../Table'
+import chartCellMatrix from './helpers/chartCellMatrix'
+import regionCellMatrix from './helpers/regionCellMatrix'
+import boxplotCellMatrix from './helpers/boxplotCellMatrix'
+import { TableConfig } from './types/TableConfig'
+
+export type DataTableProps = {
+  applyLegendToRow?: Function
+  colorScale?: Function
+  columns?: { navigate: { name: string } }
+  config: TableConfig
+  dataConfig?: Object
+  displayDataAsText?: Function
+  displayGeoName?: Function
+  expandDataTable: boolean
+  formatLegendLocation?: Function
+  groupBy?: string
+  headerColor?: string
+  indexTitle?: string
+  navigationHandler?: Function
+  rawData: Object[]
+  runtimeData: Object[] | Record<string, Object> // UNSAFE
+  setFilteredCountryCode?: Function // used for Maps only
+  tabbingId: string
+  tableTitle: string
+  viewport: string
+  vizTitle?: string
+}
+
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
+const DataTable = (props: DataTableProps) => {
+  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId } = props
+
+  const [expanded, setExpanded] = useState(expandDataTable)
+
+  const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
+
+  const [accessibilityLabel, setAccessibilityLabel] = useState('')
+
+  const isVertical = !(config.type === 'chart' && !config.table?.showVertical)
+
+  const rand = Math.random().toString(16).substr(2, 8)
+  const skipId = `btn__${rand}`
+
+  const mapLookup = {
+    'us-county': 'United States County Map',
+    'single-state': 'State Map',
+    us: 'United States Map',
+    world: 'World Map'
+  }
+
+  // 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.'
+
+    if (expanded === true && accessibilityLabel !== expandedLabel) {
+      setAccessibilityLabel(expandedLabel)
+    }
+
+    if (expanded === false && accessibilityLabel !== collapsedLabel) {
+      setAccessibilityLabel(collapsedLabel)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expanded])
+
+  switch (config.visualizationType) {
+    case 'Box Plot':
+      if (!config.boxplot) return <Loading />
+      break
+    case 'Line' || 'Bar' || 'Combo' || 'Pie' || 'Deviation Bar' || 'Paired Bar':
+      if (!runtimeData) return <Loading />
+      break
+    default:
+      if (!runtimeData) return <Loading />
+      break
+  }
+
+  const rawRows = Object.keys(runtimeData)
+  const rows = isVertical
+    ? rawRows.sort((a, b) => {
+        let dataA
+        let dataB
+        if (config.type === 'map' && config.columns) {
+          const sortByColName = config.columns[sortBy.column].name
+          dataA = runtimeData[a][sortByColName]
+          dataB = runtimeData[b][sortByColName]
+        }
+        if (config.type === 'chart' || config.type === 'dashboard') {
+          dataA = runtimeData[a][sortBy.column]
+          dataB = runtimeData[b][sortBy.column]
+        }
+        return dataA && dataB ? customSort(dataA, dataB, sortBy, config) : 0
+      })
+    : rawRows
+
+  const limitHeight = {
+    maxHeight: config.table.limitHeight && `${config.table.height}px`,
+    OverflowY: 'scroll'
+  }
+
+  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.`
+    } else {
+      return config.table.caption ? config.table.caption : `Data table showing data for the ${config.type} figure.`
+    }
+  }, [config.table.caption])
+
+  // prettier-ignore
+  const tableData = useMemo(() => (
+    config.visualizationType === 'Pie'
+      ? [config.yAxis.dataKey]
+      : config.visualizationType === 'Box Plot'
+        ? Object.entries(config.boxplot.tableData[0])
+        : config.runtime?.seriesKeys),
+    [config.runtime?.seriesKeys]) // eslint-disable-line
+
+  if (config.visualizationType !== 'Box Plot') {
+    const getDownloadData = () => {
+      // only use fullGeoName on County maps and no other
+      if (config.general?.geoType === 'us-county') {
+        // Add column for full Geo name along with State
+        return rawData.map(row => ({ FullGeoName: formatLegendLocation(row[config.columns.geo.name]), ...row }))
+      } else {
+        return rawData
+      }
+    }
+
+    return (
+      <ErrorBoundary component='DataTable'>
+        <MediaControls.Section classes={['download-links']}>
+          <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
+          {(config.table.download || config.general?.showDownloadButton) && <DownloadButton rawData={getDownloadData()} fileName={`${vizTitle || 'data-table'}.csv`} headerColor={headerColor} skipId={skipId} />}
+        </MediaControls.Section>
+        <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+          <SkipNav skipId={skipId} />
+          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
+          <div className='table-container' style={limitHeight}>
+            <Table
+              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, ...props }) : chartCellMatrix({ rows, ...props, isVertical, sortBy })}
+              tableName={config.type}
+              caption={caption}
+              stickyHeader
+              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={runtimeData} {...props} 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 }}
+            />
+
+            {/* REGION Data Table */}
+            {config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
+              <Table
+                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' }}
+              />
+            )}
+          </div>
+        </section>
+      </ErrorBoundary>
+    )
+  } else {
+    // Render Data Table for Box Plots
+    return (
+      <ErrorBoundary component='DataTable'>
+        <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+          <SkipNav skipId={skipId} />
+          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
+          <div className='table-container' style={limitHeight}>
+            <Table
+              childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
+              tableName={config.visualizationType}
+              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 }}
+            />
+          </div>
+        </section>
+      </ErrorBoundary>
+    )
+  }
+}
+
+export default DataTable

package/components/DataTable/components/BoxplotHeader.tsx

@@ -0,0 +1,16 @@
+const BoxplotHeader = ({ categories }) => {
+  let columns = ['Measures', ...categories]
+  return (
+    <tr>
+      {columns.map(column => {
+        return (
+          <th key={`col-header-${column}`} tabIndex={0} title={column} role='columnheader' scope='col'>
+            {column}
+          </th>
+        )
+      })}
+    </tr>
+  )
+}
+
+export default BoxplotHeader

package/components/DataTable/components/CellAnchor.tsx

@@ -0,0 +1,44 @@
+import ExternalIcon from '@cdc/core/assets/external-link.svg'
+// Optionally wrap cell with anchor if config defines a navigation url
+const CellAnchor = ({ markup, row, columns, navigationHandler, mapZoomHandler }) => {
+  if (columns.navigate && row[columns.navigate.name]) {
+    return (
+      <span
+        onClick={() => navigationHandler(row[columns.navigate.name])}
+        className='table-link'
+        title='Click for more information (Opens in a new window)'
+        role='link'
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.keyCode === 13) {
+            navigationHandler(row[columns.navigate.name])
+          }
+        }}
+      >
+        {markup}
+        <ExternalIcon className='inline-icon' />
+      </span>
+    )
+  } else if (mapZoomHandler) {
+    return (
+      <span
+        onClick={mapZoomHandler}
+        className='table-link'
+        title='Click to view on map'
+        role='link'
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.keyCode === 13) {
+            mapZoomHandler()
+          }
+        }}
+      >
+        {markup}
+      </span>
+    )
+  }
+
+  return <>{markup}</>
+}
+
+export default CellAnchor

package/components/DataTable/components/ChartHeader.tsx

@@ -0,0 +1,91 @@
+import { getChartCellValue } from '../helpers/getChartCellValue'
+import { getSeriesName } from '../helpers/getSeriesName'
+import { getDataSeriesColumns } from '../helpers/getDataSeriesColumns'
+import { DownIcon, UpIcon } from './Icons'
+
+type ChartHeaderProps = { data; isVertical; config; runtimeData; setSortBy; sortBy; groupBy? }
+
+const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy, groupBy }: ChartHeaderProps) => {
+  if (!data) return
+  let dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
+  if (groupBy) {
+    let groupHeaderRemoved = dataSeriesColumns.filter(col => col !== groupBy)
+    if (groupHeaderRemoved.length != dataSeriesColumns.length) {
+      // match was found
+      // assign headers with groupHeaderRemoved
+      dataSeriesColumns = groupHeaderRemoved
+    }
+  }
+  if (isVertical) {
+    return (
+      <tr>
+        {dataSeriesColumns.map((column, index) => {
+          const text = getSeriesName(column, config)
+
+          return (
+            <th
+              key={`col-header-${column}__${index}`}
+              tabIndex={0}
+              title={text}
+              role='columnheader'
+              scope='col'
+              onClick={() => {
+                setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
+              }}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
+                }
+              }}
+              className={sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
+              {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
+            >
+              {text}
+              {column === sortBy.column && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
+              <button>
+                <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
+              </button>
+            </th>
+          )
+        })}
+      </tr>
+    )
+  } else {
+    const sliceVal = config.visualizationType === 'Pie' ? 1 : 0
+    return (
+      <tr>
+        {['__series__', ...Object.keys(runtimeData)].slice(sliceVal).map((row, index) => {
+          let column = config.xAxis?.dataKey
+          let text = row !== '__series__' ? getChartCellValue(row, column, config, runtimeData) : '__series__'
+          return (
+            <th
+              key={`col-header-${text}__${index}`}
+              tabIndex={0}
+              title={text}
+              role='columnheader'
+              scope='col'
+              onClick={() => {
+                setSortBy({ column: text, asc: sortBy.column === text ? !sortBy.asc : false, colIndex: index })
+              }}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  setSortBy({ column: text, asc: sortBy.column === text ? !sortBy.asc : false, colIndex: index })
+                }
+              }}
+              className={sortBy.column === text ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
+              {...(sortBy.column === text ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
+            >
+              {text === '__series__' ? '' : text}
+              {index === sortBy.colIndex && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
+              <button>
+                <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === text ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
+              </button>
+            </th>
+          )
+        })}
+      </tr>
+    )
+  }
+}
+
+export default ChartHeader

package/components/DataTable/components/ExpandCollapse.tsx

@@ -0,0 +1,21 @@
+import Icon from '@cdc/core/components/ui/Icon'
+
+const ExpandCollapse = ({ expanded, setExpanded, tableTitle }) => (
+  <div
+    className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+    onClick={() => {
+      setExpanded(!expanded)
+    }}
+    tabIndex={0}
+    onKeyDown={e => {
+      if (e.keyCode === 13) {
+        setExpanded(!expanded)
+      }
+    }}
+  >
+    <Icon display={expanded ? 'minus' : 'plus'} base />
+    {tableTitle}
+  </div>
+)
+
+export default ExpandCollapse

package/components/DataTable/components/Icons.tsx

@@ -0,0 +1,10 @@
+export const UpIcon = () => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+    <path d='M0 5l5-5 5 5z' />
+  </svg>
+)
+export const DownIcon = () => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+    <path d='M0 0l5 5 5-5z' />
+  </svg>
+)

package/components/DataTable/components/MapHeader.tsx

@@ -0,0 +1,56 @@
+import { DataTableProps } from '../DataTable'
+import { DownIcon, UpIcon } from './Icons'
+
+type MapHeaderProps = DataTableProps & {
+  sortBy: { column; asc }
+  setSortBy: Function
+}
+
+const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeaderProps) => {
+  return (
+    <tr>
+      {Object.keys(columns)
+        .filter(column => columns[column].dataTable === true && columns[column].name)
+        .map((column, index) => {
+          let text
+          if (column !== 'geo') {
+            text = columns[column].label ? columns[column].label : columns[column].name
+          } else {
+            text = config.type === 'map' ? indexTitle : config.xAxis?.dataKey
+          }
+          if (config.type === 'map' && (text === undefined || text === '')) {
+            text = 'Location'
+          }
+
+          return (
+            <th
+              key={`col-header-${column}__${index}`}
+              id={column}
+              tabIndex={0}
+              title={text}
+              role='columnheader'
+              scope='col'
+              onClick={() => {
+                setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
+              }}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
+                }
+              }}
+              className={sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
+              {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
+            >
+              {text}
+              {sortBy.column === column && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
+              <button>
+                <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
+              </button>
+            </th>
+          )
+        })}
+    </tr>
+  )
+}
+
+export default MapHeader

package/components/DataTable/components/SkipNav.tsx

@@ -0,0 +1,7 @@
+const SkipNav = skipId => (
+  <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
+    Skip Navigation or Skip to Content
+  </a>
+)
+
+export default SkipNav