@cdc/core 1.1.4 → 9.22.9

package/components/ui/Modal.jsx

@@ -42,12 +42,17 @@ const Modal = ({
       <div className="cove-modal__header" style={{
         backgroundColor: headerBgColor,
         boxShadow: dividerBorder(modalHeaderChildren && showDividerTop),
-        padding: !modalHeaderChildren ? '0' : null
+        padding: !modalHeaderChildren ? '0' : null,
+        minHeight: !modalHeaderChildren ? 'unset' : null
       }}>
         {modalHeaderChildren && modalHeaderChildren.props.children}
         {showClose &&
         <button className="cove-modal--close"
-                onClick={(e) => override ? override.actions.toggleOverlay(false) : overlay ? overlay?.actions.toggleOverlay(false) : e.preventDefault()}>
+                onClick={(e) => {
+                  if (override) return override.actions.toggleOverlay(false)
+                  if (overlay) return overlay?.actions.toggleOverlay(false)
+                  e.preventDefault()
+                }}>
           <Icon display="close"/>
         </button>
         }

package/components/ui/Overlay.jsx

@@ -13,10 +13,11 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
   const [ overlayAnimationState, setOverlayAnimationState ] = useState(null)
   const [ overlayErrorState, setOverlayErrorState ] = useState(false)
 
-  const overlayDisplay = overlay?.show || override?.show
+  const overlayDisplay = override ? override?.show : overlay?.show
 
   //Animate In effect
   useEffect(() => {
+    if (overlayDisplay === undefined) return
     if (overlayDisplay === false) return //Reject
 
     document.body.style.overflow = 'hidden'
@@ -32,6 +33,7 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
 
   //Animate Out effect
   useEffect(() => {
+    if (overlayDisplay === undefined) return
     if (overlayDisplay === true) return //Reject
 
     setOverlayAnimationState('animate-out')

package/components/ui/Tooltip.jsx

@@ -6,7 +6,7 @@ const TooltipContent = () => null
 
 const Tooltip = ({
                    position = 'top',
-                   trigger = 'hover',
+                   trigger = 'hover focus',
                    float = false,
                    shadow = true,
                    border = null,
@@ -20,20 +20,29 @@ const Tooltip = ({
   const tooltipTargetChildren = children.find(el => el.type === TooltipTarget)
   const tooltipContentChildren = children.find(el => el.type === TooltipContent)
 
+
   const uid = 'tooltip-' + Math.floor(Math.random() * 100000)
 
   return (
     <span className="cove-tooltip" style={style} {...attributes}>
-      <a className="cove-tooltip--target"
-         data-for={uid}
-         data-place={position}
-         data-event={trigger !== 'click' ? null : 'click focus'}
-         data-effect={float ? 'float' : 'solid'}
-         data-scroll-hide={hideOnScroll}
-         data-tip
+      <button className="cove-tooltip--target"
+        data-for={uid}
+        data-place={position}
+        data-event={trigger}
+        data-effect={float ? 'float' : 'solid'}
+        data-scroll-hide={hideOnScroll}
+        data-tip
+        onClick={e => {
+          e.preventDefault()
+        }}
+        onMouseEnter={ e => ReactTooltip.show(e.target)}
+        onMouseLeave={e => ReactTooltip.hide(e.target)}
+        onFocus={(e) => ReactTooltip.show(e.target)}
+        onBlur={(e) => ReactTooltip.hide(e.target)}
+        style={{ background: 'transparent', border: 'none' }}
       >
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
-      </a>
+      </button>
       <ReactTooltip
         id={uid}
         className={'cove-tooltip__content' + (trigger === 'click' ? ' interactive' : '') + (border ? (' cove-tooltip--border-' + border) : '') + (shadow ? ' has-shadow' : '')}

package/data/colorPalettes.js

@@ -1,149 +1,149 @@
-import { updatePaletteNames} from "../helpers/updatePaletteNames";
+import { updatePaletteNames } from '../helpers/updatePaletteNames'
 
 const colorPalettesMap = {
   yelloworangered: [
-    '#ffffcc',
-    '#ffeda0',
-    '#fed976',
-    '#feb24c',
-    '#fd8d3c',
-    '#fc4e2a',
-    '#e31a1c',
-    '#bd0026',
-    '#800026',
+    "#ffffcc",
+    "#ffeda0",
+    "#fed976",
+    "#feb24c",
+    "#fd8d3c",
+    "#fc4e2a",
+    "#e31a1c",
+    "#bd0026",
+    "#800026",
   ],
   yelloworangebrown: [
-    '#ffffe5',
-    '#fff7bc',
-    '#fee391',
-    '#fec44f',
-    '#fe9929',
-    '#ec7014',
-    '#cc4c02',
-    '#993404',
-    '#662506',
+    "#ffffe5",
+    "#fff7bc",
+    "#fee391",
+    "#fec44f",
+    "#fe9929",
+    "#ec7014",
+    "#cc4c02",
+    "#993404",
+    "#662506",
   ],
   pinkpurple: [
-    '#fff7f3',
-    '#fde0dd',
-    '#fcc5c0',
-    '#fa9fb5',
-    '#f768a1',
-    '#dd3497',
-    '#ae017e',
-    '#7a0177',
-    '#49006a',
+    "#fff7f3",
+    "#fde0dd",
+    "#fcc5c0",
+    "#fa9fb5",
+    "#f768a1",
+    "#dd3497",
+    "#ae017e",
+    "#7a0177",
+    "#49006a",
   ],
   bluegreen: [
-    '#fff7fb',
-    '#ece2f0',
-    '#d0d1e6',
-    '#a6bddb',
-    '#67a9cf',
-    '#3690c0',
-    '#02818a',
-    '#016c59',
-    '#014636',
+    "#fff7fb",
+    "#ece2f0",
+    "#d0d1e6",
+    "#a6bddb",
+    "#67a9cf",
+    "#3690c0",
+    "#02818a",
+    "#016c59",
+    "#014636",
   ],
   orangered: [
-    '#fff7ec',
-    '#fee8c8',
-    '#fdd49e',
-    '#fdbb84',
-    '#fc8d59',
-    '#ef6548',
-    '#d7301f',
-    '#b30000',
-    '#7f0000',
+    "#fff7ec",
+    "#fee8c8",
+    "#fdd49e",
+    "#fdbb84",
+    "#fc8d59",
+    "#ef6548",
+    "#d7301f",
+    "#b30000",
+    "#7f0000",
   ],
   red: [
-    '#fff5f0',
-    '#fee0d2',
-    '#fcbba1',
-    '#fc9272',
-    '#fb6a4a',
-    '#ef3b2c',
-    '#cb181d',
-    '#a50f15',
-    '#67000d',
+    "#fff5f0",
+    "#fee0d2",
+    "#fcbba1",
+    "#fc9272",
+    "#fb6a4a",
+    "#ef3b2c",
+    "#cb181d",
+    "#a50f15",
+    "#67000d",
   ],
   greenblue: [
-    '#f7fcf0',
-    '#e0f3db',
-    '#ccebc5',
-    '#a8ddb5',
-    '#7bccc4',
-    '#4eb3d3',
-    '#2b8cbe',
-    '#0868ac',
-    '#084081',
+    "#f7fcf0",
+    "#e0f3db",
+    "#ccebc5",
+    "#a8ddb5",
+    "#7bccc4",
+    "#4eb3d3",
+    "#267BA6",
+    "#0868ac",
+    "#084081",
   ],
   yellowpurple: [
-    '#FFF0B0',
-    '#F5CC76',
-    '#EDAE4B',
-    '#E3683C',
-    '#BF2A48',
-    '#6D2059',
-    '#8F0C4B',
-    '#310958',
-    '#0E0943',
+    "#FFF0B0",
+    "#F5CC76",
+    "#EDAE4B",
+    "#E3683C",
+    "#BF2A48",
+    "#6D2059",
+    "#8F0C4B",
+    "#310958",
+    "#0E0943",
   ],
   qualitative1: [
-    '#a6cee3',
-    '#1f78b4',
-    '#b2df8a',
-    '#33a02c',
-    '#fb9a99',
-    '#e31a1c',
-    '#6a3d9a',
-    '#cab2d6',
-    '#E31A90',
-    '#15017A',
-    '#C2C0FC',
-  ],
- 
+    "#a6cee3",
+    "#1f78b4",
+    "#b2df8a",
+    "#33a02c",
+    "#fb9a99",
+    "#e31a1c",
+    "#6a3d9a",
+    "#cab2d6",
+    "#E31A90",
+    "#15017A",
+    "#C2C0FC",
+  ],
+
   qualitative2: [
-    '#7fc97f',
-    '#beaed4',
-    '#ff9',
-    '#386cb0',
-    '#f0027f',
-    '#bf5b17',
-    '#666',
-    '#fedab8',
-  ],
- 
+    "#7fc97f",
+    "#beaed4",
+    "#ff9",
+    "#386cb0",
+    "#f0027f",
+    "#bf5b17",
+    "#666",
+    "#fedab8",
+  ],
+
   qualitative3: [
-    '#1b9e77',
-    '#d95f02',
-    '#7570b3',
-    '#e7298a',
-    '#66a61e',
-    '#e6ab02',
-    '#a6761d',
-    '#666',
-  ],
- 
+    "#1b9e77",
+    "#d95f02",
+    "#7570b3",
+    "#e7298a",
+    "#66a61e",
+    "#e6ab02",
+    "#a6761d",
+    "#666",
+  ],
+
   qualitative4: [
-    '#e41a1c',
-    '#377eb8',
-    '#4daf4a',
-    '#984ea3',
-    '#ff7f00',
-    '#ff3',
-    '#a65628',
-    '#f781bf',
+    "#e41a1c",
+    "#377eb8",
+    "#4daf4a",
+    "#984ea3",
+    "#ff7f00",
+    "#ff3",
+    "#a65628",
+    "#f781bf",
   ],
- 
+
   qualitative9: [
-    '#497d0c',
-    '#84BC49',
-    '#88c3ea',
-    '#fcad90',
-    '#f26b4f',
-    '#c31b1f',
-    '#c31b1f',
+    "#497d0c",
+    "#84BC49",
+    "#88c3ea",
+    "#fcad90",
+    "#f26b4f",
+    "#c31b1f",
+    "#c31b1f",
   ],
 
 
@@ -188,7 +188,7 @@ const colorPalettes2 = {
     '#f781bf',
     '#3399CC',
   ],
- 
+
   'qualitative-soft': [
     '#A6CEE3',
     '#1F78B4',
@@ -200,6 +200,52 @@ const colorPalettes2 = {
     '#FF7F00',
     '#ACA9EB',
   ],
+  qualitative1: [
+    "#a6cee3",
+    "#1f78b4",
+    "#b2df8a",
+    "#33a02c",
+    "#fb9a99",
+    "#e31a1c",
+    "#6a3d9a",
+    "#cab2d6",
+    "#E31A90",
+    "#15017A",
+    "#C2C0FC",
+  ],
+
+  qualitative2: [
+    "#7fc97f",
+    "#beaed4",
+    "#ff9",
+    "#386cb0",
+    "#f0027f",
+    "#bf5b17",
+    "#666",
+    "#fedab8",
+  ],
+
+  qualitative3: [
+    "#1b9e77",
+    "#d95f02",
+    "#7570b3",
+    "#e7298a",
+    "#66a61e",
+    "#e6ab02",
+    "#a6761d",
+    "#666",
+  ],
+
+  qualitative4: [
+    "#e41a1c",
+    "#377eb8",
+    "#4daf4a",
+    "#984ea3",
+    "#ff7f00",
+    "#ff3",
+    "#a65628",
+    "#f781bf",
+  ],
 
   'sequential-blue': [
     '#C6DBEF',
@@ -237,4 +283,4 @@ const colorPalettes2 = {
 
 export const colorPalettesChart = updatePaletteNames(colorPalettes2)  // adds reverse keyword to eact palette
 const colorPalettes = updatePaletteNames(colorPalettesMap)   // adds reverse keyword to eact palette
-export default colorPalettes;
+export default colorPalettes

package/data/dataDesignerTables.js

@@ -0,0 +1,148 @@
+import React from 'react'
+
+export const DATA_TABLE_VERTICAL = (
+  <>
+    <table>
+      <tbody>
+      <tr>
+        <th>Date</th>
+        <th>Value</th>
+        <th>...</th>
+      </tr>
+      <tr>
+        <td>01/01/2020</td>
+        <td>150</td>
+        <td>...</td>
+      </tr>
+      <tr>
+        <td>02/01/2020</td>
+        <td>150</td>
+        <td>...</td>
+      </tr>
+      </tbody>
+    </table>
+    <table>
+      <tbody>
+      <tr>
+        <th>State</th>
+        <th>Value</th>
+        <th>...</th>
+      </tr>
+      <tr>
+        <td>Georgia</td>
+        <td>150</td>
+        <td>...</td>
+      </tr>
+      <tr>
+        <td>Florida</td>
+        <td>150</td>
+        <td>...</td>
+      </tr>
+      </tbody>
+    </table>
+  </>
+)
+
+export const DATA_TABLE_HORIZONTAL = (
+  <>
+    <table>
+      <tbody>
+      <tr>
+        <th>Date</th>
+        <td>01/01/2020</td>
+        <td>02/01/2020</td>
+        <td>...</td>
+      </tr>
+      <tr>
+        <th>Value</th>
+        <td>100</td>
+        <td>150</td>
+        <td>...</td>
+      </tr>
+      </tbody>
+    </table>
+    <table>
+      <tbody>
+      <tr>
+        <th>State</th>
+        <td>Georgia</td>
+        <td>Florida</td>
+        <td>...</td>
+      </tr>
+      <tr>
+        <th>Value</th>
+        <td>100</td>
+        <td>150</td>
+        <td>...</td>
+      </tr>
+      </tbody>
+    </table>
+  </>
+)
+
+export const DATA_TABLE_SINGLE_ROW = (
+  <table>
+    <tbody>
+    <tr>
+      <th>Date</th>
+      <th>Virus 1</th>
+      <th>Virus 2</th>
+      <th>...</th>
+    </tr>
+    <tr>
+      <td>01/01/2020</td>
+      <td>100</td>
+      <td>150</td>
+      <td>...</td>
+    </tr>
+    <tr>
+      <td>02/01/2020</td>
+      <td>15</td>
+      <td>20</td>
+      <td>...</td>
+    </tr>
+    </tbody>
+  </table>
+)
+
+export const DATA_TABLE_MULTI_ROW = (
+  <table>
+    <tbody>
+    <tr>
+      <th>Virus</th>
+      <th>Date</th>
+      <th>Value</th>
+    </tr>
+    <tr>
+      <td>Virus 1</td>
+      <td>01/01/2020</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <td>Virus 1</td>
+      <td>02/01/2020</td>
+      <td>150</td>
+    </tr>
+    <tr>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+    </tr>
+    <tr>
+      <td>Virus 2</td>
+      <td>01/01/2020</td>
+      <td>15</td>
+    </tr>
+    <tr>
+      <td>Virus 2</td>
+      <td>02/01/2020</td>
+      <td>20</td>
+    </tr>
+    <tr>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+    </tr>
+    </tbody>
+  </table>
+)

package/{components → helpers}/DataTransform.js

@@ -1,7 +1,7 @@
 export class DataTransform {
   constructor() {
     this.constants = {
-      errorMessageEmtpyData: 'Your data file is empty.', 
+      errorMessageEmtpyData: 'Your data file is empty.',
       errorMessageFormat: 'Your datatype is not supported.',
       descriptionHeader: 1,
       descriptionRoot: 2,
@@ -16,7 +16,7 @@ export class DataTransform {
     // Empty data
     if ( 0 === data.length ) {
       errorsFound.push(this.constants.errorMessageEmptyData);
-    }   
+    }
 
     // Does it have the correct data structure?
     if (!data.filter || data.filter(row =>  typeof row !== 'object').length > 0) {
@@ -153,7 +153,7 @@ export class DataTransform {
       } else {
         return undefined
       }
-    } 
+    }
 
     return data;
   }

package/helpers/fetchRemoteData.js

@@ -0,0 +1,43 @@
+import Papa from 'papaparse';
+
+export default async function (url) {
+    try {
+
+        // Using URL Object to get pathname without URL paramaters on regex.
+        url = new URL(url)
+
+        const path = url.pathname
+        const regex = /(?:\.([^.]+))?$/
+        const ext = (regex.exec(path)[1])
+
+        let data = []
+
+        if ('csv' === ext) {
+            data = await fetch(url.href)
+                .then(response => response.text())
+                .then(responseText => {
+                    const parsedCsv = Papa.parse(responseText, {
+                        header: true,
+                        dynamicTyping: true,
+                        skipEmptyLines: true
+                    })
+                    return parsedCsv.data
+                })
+        }
+
+        if ('json' === ext) {
+            data = await fetch(url.href)
+                .then(response => response.json())
+        }
+
+        return data;
+    } catch {
+        // If we can't parse it, still attempt to fetch it
+        try {
+            let response = await (await fetch(url)).json()
+            return response
+        } catch {
+            console.error(`Cannot parse URL: ${url}`);
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "1.1.4",
+  "version": "9.22.9",
   "description": "Core elements of the CDC Open Visualization project",
   "author": "Daniel Immke <npm@daniel.do>",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
@@ -20,6 +20,7 @@
     "react-dom": ">=16"
   },
   "dependencies": {
+    "papaparse": "^5.3.0",
     "prop-types": "^15.8.1",
     "react-accessible-accordion": "^3.3.4",
     "react-select": "^5.3.1",
@@ -29,5 +30,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
+  "gitHead": "90faf22c91ca0062432607e4599598f9e67c848a"
 }