@cdc/core 4.24.9 → 4.24.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-combo-chart.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.31 82.55"><g id="a"><path d="M88.56,66.3H15.36V9.68c0-1.1-.9-2-2-2H7.89c-1.1,0-2,.9-2,2V73.77c0,1.1,.9,2,2,2H88.56c1.1,0,2-.9,2-2v-5.48c0-1.1-.9-2-2-2Z"/><path d="M18.36,54.67v6.94c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-6.94c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M30.43,45.3v16.31c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-16.31c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M42.51,32.3v29.31c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-29.31c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M54.58,32.3v29.31c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-29.31c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M66.66,42.22v19.33c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-19.33c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><path d="M78.73,58.89v2.72c0,1.1,.9,2,2,2h5.48c1.1,0,2-.9,2-2l-.13-2.72c0-1.1-.9-2-2-2h-5.34c-1.1,0-2,.9-2,2Z"/><g><path d="M20.25,38.69c-.65,0-1.3-.32-1.68-.91-.6-.93-.34-2.16,.59-2.77,.01,0,1.17-.76,2.86-1.92,.91-.62,2.16-.39,2.78,.52,.62,.91,.39,2.16-.52,2.78-1.75,1.2-2.95,1.98-2.95,1.98-.34,.22-.71,.32-1.09,.32Z"/><path d="M28.5,32.92c-.61,0-1.21-.28-1.6-.8-.66-.88-.48-2.14,.4-2.8,1.91-1.43,3.51-2.72,4.76-3.83l.21-.19c.82-.74,2.09-.67,2.82,.16,.74,.82,.66,2.09-.16,2.82l-.22,.2c-1.34,1.19-3.03,2.55-5.02,4.04-.36,.27-.78,.4-1.2,.4Zm50.28-1.66c-.34,0-.68-.09-1-.27-1.64-.95-3.38-2.08-5.66-3.67-.91-.63-1.13-1.88-.49-2.79,.63-.9,1.88-1.13,2.79-.49,2.17,1.52,3.83,2.6,5.37,3.48,.96,.55,1.28,1.78,.73,2.73-.37,.64-1.04,1-1.73,1Zm-40.24-6.8c-.58,0-1.15-.25-1.55-.73-.7-.85-.58-2.11,.28-2.81,1.98-1.63,3.82-2.93,5.61-3.98,.95-.56,2.18-.24,2.74,.72s.24,2.18-.72,2.74c-1.61,.94-3.27,2.12-5.09,3.62-.37,.31-.82,.45-1.27,.45Zm29.37-.59c-.4,0-.8-.12-1.15-.37-1.61-1.13-3.5-2.44-5.34-3.52-.95-.56-1.27-1.78-.72-2.74,.56-.95,1.78-1.27,2.74-.72,1.98,1.16,3.95,2.52,5.63,3.7,.9,.64,1.12,1.88,.48,2.79-.39,.55-1.01,.85-1.64,.85Zm-18-5.77c-.89,0-1.7-.6-1.93-1.49-.28-1.07,.36-2.16,1.43-2.44,1.72-.45,3.46-.68,5.17-.68,.71,0,1.46,.08,2.24,.24,1.08,.23,1.77,1.29,1.55,2.37s-1.29,1.77-2.37,1.55c-.5-.11-.98-.16-1.42-.16-1.37,0-2.77,.18-4.16,.55-.17,.04-.34,.07-.51,.07Z"/><path d="M88.21,34.46c-1.26,0-2.6-.2-4-.6-1.06-.3-1.68-1.41-1.37-2.47,.3-1.06,1.41-1.68,2.47-1.37,1.04,.3,2.02,.45,2.9,.45,1.1,0,2,.9,2,2s-.9,2-2,2Z"/></g></g><g id="b"/></svg>

package/assets/icon-epi-chart.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 96.3 82.6" style="enable-background:new 0 0 96.3 82.6;" xml:space="preserve">
+<path d="M88.6,66.5H15.4V7.6c0-1.1-0.9-2-2-2H7.9c-1.1,0-2,0.9-2,2V74c0,1.1,0.9,2,2,2h80.7c1.1,0,2-0.9,2-2v-5.5
+	C90.6,67.4,89.7,66.5,88.6,66.5L88.6,66.5z"/>
+<path d="M31.7,51.1V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-11.9c0-1.1-0.9-2-2-2h-0.9C32.6,49.1,31.7,50,31.7,51.1L31.7,51.1z
+	"/>
+<path d="M38.7,41.7V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-21.3c0-1.1-0.9-2-2-2h-0.9C39.6,39.7,38.7,40.6,38.7,41.7
+	L38.7,41.7z"/>
+<path d="M45.7,28.7V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-34.3c0-1.1-0.9-2-2-2h-0.9C46.6,26.7,45.7,27.6,45.7,28.7
+	L45.7,28.7z"/>
+<path d="M59.7,28.7V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-34.3c0-1.1-0.9-2-2-2h-0.9C60.6,26.7,59.7,27.6,59.7,28.7
+	L59.7,28.7z"/>
+<path d="M52.7,23.6V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-39.4c0-1.1-0.9-2-2-2h-0.9C53.6,21.6,52.7,22.5,52.7,23.6
+	L52.7,23.6z"/>
+<path d="M66.8,38.6v24.3c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-24.3c0-1.1-0.9-2-2-2h-0.9C67.7,36.6,66.8,37.5,66.8,38.6
+	L66.8,38.6z"/>
+<path d="M73.8,55.3V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-7.7c0-1.1-0.9-2-2-2h-0.9C74.7,53.3,73.8,54.2,73.8,55.3L73.8,55.3
+	z"/>
+<path d="M24.7,55.3V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2l-0.1-7.7c0-1.1-0.9-2-2-2h-0.9C25.6,53.3,24.7,54.2,24.7,55.3L24.7,55.3
+	z"/>
+<path d="M17.6,61.5V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2v-1.6c0-1.1-1-1.9-2.1-1.9h-0.9C18.5,59.5,17.6,60.4,17.6,61.5L17.6,61.5
+	z"/>
+<path d="M80.8,61.5V63c0,1.1,0.9,2,2,2h1.1c1.1,0,2-0.9,2-2v-1.6c0-1.1-1-1.9-2.1-1.9h-0.9C81.7,59.5,80.8,60.4,80.8,61.5L80.8,61.5
+	z"/>
+</svg>

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,31 @@ 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
 }
 
-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
+}) => {
   // sanitize the text for setting dangerouslySetInnerHTML
+
+  useEffect(() => {
+    if (autoDismiss) {
+      setTimeout(() => onDismiss(), secondsBeforeDismiss * 1000)
+    }
+  }, [])
+
   const sanitizedData = () => ({
     __html: DOMPurify.sanitize(message)
   })
@@ -26,12 +47,17 @@ 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>
+      <button type='button' className='close pl-5' aria-label='Close' onClick={() => onDismiss()}>
+        X
+      </button>
     </div>
   )
 }

package/components/BlurStrokeText.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Text } from '@visx/text'
+
+// Extension for visx Text component that creates a second text element and a def with a blur effect to create a feathered stroke effect using a filter with Gaussian blur. No actual stroke is used
+
+export interface BlurStrokeTextProps extends React.ComponentProps<typeof Text> {
+  blurRadius?: number
+  stroke?: string
+  strokeWidth?: number
+  strokeMiterLimit?: number
+  disableStroke?: boolean
+  disableBlur?: boolean
+}
+
+export const BlurStrokeText: React.FC<BlurStrokeTextProps> = ({
+  blurRadius = 1,
+  stroke = 'white',
+  strokeWidth = 8,
+  strokeMiterLimit = 2,
+  disableStroke = false,
+  disableBlur = false,
+  ...props
+}) => {
+  return (
+    <>
+      <defs>
+        <filter id='blur' x='-50%' y='-50%' width='200%' height='200%'>
+          <feGaussianBlur in='SourceGraphic' stdDeviation={blurRadius} />
+        </filter>
+      </defs>
+      {!disableStroke && (
+        <Text
+          {...props}
+          filter={disableBlur ? undefined : 'url(#blur)'}
+          fill={stroke}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          strokeMiterlimit={strokeMiterLimit}
+        />
+      )}
+      <Text {...props} />
+    </>
+  )
+}

package/components/DataTable/DataTable.tsx

@@ -20,6 +20,9 @@ import removeNullColumns from './helpers/removeNullColumns'
 import { TableConfig } from './types/TableConfig'
 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
@@ -71,9 +74,14 @@ const DataTable = (props: DataTableProps) => {
   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)
+      const excludeColumns = Object.values(config.columns || {})
+        .filter(column => column.dataTable === false)
+        .map(col => col.name)
+      const { columnName, valueColumns } = config.table.pivot
+      if (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
@@ -82,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
   })
@@ -130,26 +138,27 @@ const DataTable = (props: DataTableProps) => {
   }
 
   const rawRows = Object.keys(runtimeData).filter(column => column != 'columns')
-  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]
-        }
-        if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
-          dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
-          dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
-        }
-        return dataA && dataB ? customSort(dataA, dataB, sortBy, config) : 0
-      })
-    : rawRows
+  const rows =
+    isVertical && sortBy.column
+      ? 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 (['chart', 'dashboard', 'table'].includes(config.type)) {
+            dataA = runtimeData[a][sortBy.column]
+            dataB = runtimeData[b][sortBy.column]
+          }
+          if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
+            dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
+            dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
+          }
+          return dataA && dataB ? customSort(dataA, dataB, sortBy, config) : 0
+        })
+      : rawRows
 
   const limitHeight = {
     maxHeight: config.table.limitHeight && `${config.table.height}px`,
@@ -197,6 +206,7 @@ const DataTable = (props: DataTableProps) => {
         : 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
@@ -208,17 +218,21 @@ const DataTable = (props: DataTableProps) => {
       }
     }
 
-    const getMediaControlsClasses = () => {
+    const getMediaControlsClasses = belowTable => {
       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')
+      if (!belowTable) {
+        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')
+      }
       return classes
     }
 
-    return (
-      <ErrorBoundary component='DataTable'>
-        <MediaControls.Section classes={getMediaControlsClasses()}>
+    const TableMediaControls = ({ belowTable }) => {
+      return (
+        <MediaControls.Section classes={getMediaControlsClasses(belowTable)}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
           {(config.table.download || config.general?.showDownloadButton) && (
             <DownloadButton
@@ -228,9 +242,17 @@ const DataTable = (props: DataTableProps) => {
             />
           )}
         </MediaControls.Section>
+      )
+    }
+
+    return (
+      <ErrorBoundary component='DataTable'>
+        {!config.table.showDownloadLinkBelow && <TableMediaControls />}
         <section
           id={tabbingId.replace('#', '')}
-          className={`data-table-container ${viewport} w-100`}
+          className={`data-table-container ${viewport} ${
+            !config.table.showDownloadLinkBelow ? 'download-link-above' : ''
+          }`}
           aria-label={accessibilityLabel}
         >
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
@@ -248,6 +270,7 @@ const DataTable = (props: DataTableProps) => {
               preliminaryData={config.preliminaryData}
               viewport={viewport}
               wrapColumns={wrapColumns}
+              noData={hasNoData}
               childrenMatrix={
                 config.type === 'map'
                   ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
@@ -272,7 +295,7 @@ const DataTable = (props: DataTableProps) => {
                 )
               }
               tableOptions={{
-                className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${
+                className: `table table-striped ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${
                   isVertical ? '' : ' horizontal'
                 }`,
                 'aria-live': 'assertive',
@@ -291,6 +314,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={
@@ -300,12 +324,13 @@ const DataTable = (props: DataTableProps) => {
                       <th>End Date</th>
                     </tr>
                   }
-                  tableOptions={{ className: 'region-table data-table' }}
+                  tableOptions={{ className: 'table table-striped region-table data-table' }}
                   fontSize={config.fontSize}
                 />
               )}
           </div>
         </section>
+        {config.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
         <div id={skipId} className='cdcdataviz-sr-only'>
           Skipped data table.
         </div>
@@ -317,7 +342,7 @@ const DataTable = (props: DataTableProps) => {
       <ErrorBoundary component='DataTable'>
         <section
           id={tabbingId.replace('#', '')}
-          className={`data-table-container ${viewport} w-100`}
+          className={`data-table-container ${viewport}`}
           aria-label={accessibilityLabel}
         >
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
@@ -327,12 +352,13 @@ const DataTable = (props: DataTableProps) => {
               viewport={viewport}
               wrapColumns={wrapColumns}
               childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
+              noData={hasNoData}
               tableName={config.visualizationType}
               caption={caption}
               stickyHeader
               headContent={<BoxplotHeader categories={config.boxplot.categories} />}
               tableOptions={{
-                className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`,
+                className: `table table-striped ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`,
                 'aria-live': 'assertive',
                 'aria-rowcount': 11,
                 hidden: !expanded