@cdc/core 1.1.3 → 9.22.9

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.3",
+  "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"
 }

package/styles/_data-table.scss

@@ -12,7 +12,7 @@ div.data-table-heading {
   border: $lightGray 1px solid;
   border-bottom: 0;
   cursor: pointer;
-  background-image: url(~@cdc/core/assets/minus.svg);
+  background-image: url(~@cdc/core/assets/icon-minus.svg);
   background-size: 15px 15px; // Need to define both for IE11
   background-position: right .7em center;
   background-repeat: no-repeat;
@@ -21,7 +21,7 @@ div.data-table-heading {
     position: relative;
   }
   &.collapsed {
-    background-image: url(~@cdc/core/assets/plus.svg);
+    background-image: url(~@cdc/core/assets/icon-plus.svg);
     background-size: 15px 15px; // Need to define both for IE11
     background-position: right .7em center;
     background-repeat: no-repeat;
@@ -84,7 +84,7 @@ table.data-table {
         margin-left: 1rem;
       }
     }
-    
+
     th.sort {
       background-color: darken($mediumGray, 10%);
       background-repeat: no-repeat;
@@ -94,20 +94,20 @@ table.data-table {
 
     th.sort-asc,
     td.sort-asc {
-      background-image: url(~@cdc/core/assets/asc.svg);
+      background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
     }
-    
+
     th.sort-desc,
     td.sort-desc {
-      background-image: url(~@cdc/core/assets/desc.svg);
+      background-image: url(~@cdc/core/assets/icon-caret-filled-down.svg);
     }
-    
+
     th:last-child,
     td:last-child {
       border-right: 0
     }
   }
-  
+
   tbody {
     tr {
       width: 100%;
@@ -124,12 +124,12 @@ table.data-table {
       border-bottom: 0
     }
   }
-  
+
   td {
     padding: .3em .7em;
     border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
-  
+
   th,
   td {
     white-space: nowrap;
@@ -158,7 +158,7 @@ table.data-table {
     color: inherit;
     text-decoration: none;
   }
-  
+
   td span.table-link {
     text-decoration: underline;
     cursor: pointer;
@@ -213,7 +213,7 @@ table.data-table {
     button.btn-next {
       &::before {
         content: " ";
-        background-image: url(~@cdc/core/assets/asc.svg);
+        background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
         background-size: 10px 5px;
         width: 10px;
         height: 5px;
@@ -224,7 +224,7 @@ table.data-table {
     button.btn-prev {
       &::before {
         content: " ";
-        background-image: url(~@cdc/core/assets/asc.svg);
+        background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
         background-size: 10px 5px;
         width: 10px;
         height: 5px;

package/styles/_global.scss

@@ -167,3 +167,17 @@ select {
     font-size: 1.2rem;
   }
 }
+
+section.introText {
+  padding: 15px;
+}
+
+section.footnotes {
+  border-top: 1px solid #DDD;
+  margin-top: 20px;
+  padding: 15px;
+}
+
+.cdc-chart-inner-container .subtext {
+  padding: 15px;
+}