@cdc/core 1.1.2 → 1.1.3

package/components/ui/Tooltip.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import ReactTooltip from 'react-tooltip'
+
+const TooltipTarget = () => null
+const TooltipContent = () => null
+
+const Tooltip = ({
+                   position = 'top',
+                   trigger = 'hover',
+                   float = false,
+                   shadow = true,
+                   border = null,
+                   borderColor = '#bdbdbd',
+                   hideOnScroll = true,
+                   children,
+                   style,
+                   ...attributes
+                 }) => {
+
+  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
+      >
+        {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
+      </a>
+      <ReactTooltip
+        id={uid}
+        className={'cove-tooltip__content' + (trigger === 'click' ? ' interactive' : '') + (border ? (' cove-tooltip--border-' + border) : '') + (shadow ? ' has-shadow' : '')}
+        type="light"
+        effect="solid"
+        border={!!border}
+        borderColor={borderColor}
+        globalEventOff="click"
+      >
+        {tooltipContentChildren ? tooltipContentChildren.props.children : null}
+      </ReactTooltip>
+    </span>
+  )
+}
+
+Tooltip.Target = TooltipTarget
+Tooltip.Content = TooltipContent
+
+export default Tooltip

package/data/colorPalettes.js

@@ -0,0 +1,240 @@
+import { updatePaletteNames} from "../helpers/updatePaletteNames";
+
+const colorPalettesMap = {
+  yelloworangered: [
+    '#ffffcc',
+    '#ffeda0',
+    '#fed976',
+    '#feb24c',
+    '#fd8d3c',
+    '#fc4e2a',
+    '#e31a1c',
+    '#bd0026',
+    '#800026',
+  ],
+  yelloworangebrown: [
+    '#ffffe5',
+    '#fff7bc',
+    '#fee391',
+    '#fec44f',
+    '#fe9929',
+    '#ec7014',
+    '#cc4c02',
+    '#993404',
+    '#662506',
+  ],
+  pinkpurple: [
+    '#fff7f3',
+    '#fde0dd',
+    '#fcc5c0',
+    '#fa9fb5',
+    '#f768a1',
+    '#dd3497',
+    '#ae017e',
+    '#7a0177',
+    '#49006a',
+  ],
+  bluegreen: [
+    '#fff7fb',
+    '#ece2f0',
+    '#d0d1e6',
+    '#a6bddb',
+    '#67a9cf',
+    '#3690c0',
+    '#02818a',
+    '#016c59',
+    '#014636',
+  ],
+  orangered: [
+    '#fff7ec',
+    '#fee8c8',
+    '#fdd49e',
+    '#fdbb84',
+    '#fc8d59',
+    '#ef6548',
+    '#d7301f',
+    '#b30000',
+    '#7f0000',
+  ],
+  red: [
+    '#fff5f0',
+    '#fee0d2',
+    '#fcbba1',
+    '#fc9272',
+    '#fb6a4a',
+    '#ef3b2c',
+    '#cb181d',
+    '#a50f15',
+    '#67000d',
+  ],
+  greenblue: [
+    '#f7fcf0',
+    '#e0f3db',
+    '#ccebc5',
+    '#a8ddb5',
+    '#7bccc4',
+    '#4eb3d3',
+    '#2b8cbe',
+    '#0868ac',
+    '#084081',
+  ],
+  yellowpurple: [
+    '#FFF0B0',
+    '#F5CC76',
+    '#EDAE4B',
+    '#E3683C',
+    '#BF2A48',
+    '#6D2059',
+    '#8F0C4B',
+    '#310958',
+    '#0E0943',
+  ],
+  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',
+  ],
+ 
+  qualitative9: [
+    '#497d0c',
+    '#84BC49',
+    '#88c3ea',
+    '#fcad90',
+    '#f26b4f',
+    '#c31b1f',
+    '#c31b1f',
+  ],
+
+
+
+  'sequential-blue-2(MPX)':[
+  '#F5FEFF',
+  '#E1FBFF',
+  '#C0F2FD',
+  '#94E2ED',
+  '#5EBAD4',
+  '#3695BE',
+  '#2273A0',
+  '#0E5181',
+  '#093460',
+  ],
+
+'sequential-orange(MPX)':[
+   '#FFFDF0',
+   '#FFF7DC',
+   '#FFE9C2',
+   '#FFD097',
+   '#F7A866',
+   '#EB7723',
+   '#B95117',
+   '#853209',
+   '#661F00'
+]
+
+};
+
+// * ============= Palettes for Chart project ==========  * //
+
+const colorPalettes2 = {
+  'qualitative-bold': [
+    '#377eb8',
+    '#ff7f00',
+    '#4daf4a',
+    '#984ea3',
+    '#e41a1c',
+    '#ffff33',
+    '#a65628',
+    '#f781bf',
+    '#3399CC',
+  ],
+ 
+  'qualitative-soft': [
+    '#A6CEE3',
+    '#1F78B4',
+    '#B2DF8A',
+    '#33A02C',
+    '#FB9A99',
+    '#E31A1C',
+    '#FDBF6F',
+    '#FF7F00',
+    '#ACA9EB',
+  ],
+
+  'sequential-blue': [
+    '#C6DBEF',
+    '#9ECAE1',
+    '#6BAED6',
+    '#4292C6',
+    '#2171B5',
+    '#084594',
+  ],
+  'sequential-blue-2-(MPX)':[
+    '#D5F6F9',
+    '#99E2ED',
+    '#5FB6D1',
+    '#3189B0',
+    '#116091',
+    '#0A3E72'
+  ],
+  'sequential-orange-(MPX)':[
+    '#FFEFCF',
+    '#FFD49C',
+    '#F7A866',
+    '#EB7723',
+    '#B95117',
+    '#862B0B'
+   ],
+  'sequential-green': [
+    '#C7E9C0',
+    '#A1D99B',
+    '#74C476',
+    '#41AB5D',
+    '#238B45',
+    '#005A32',
+  ]
+};
+
+export const colorPalettesChart = updatePaletteNames(colorPalettes2)  // adds reverse keyword to eact palette
+const colorPalettes = updatePaletteNames(colorPalettesMap)   // adds reverse keyword to eact palette
+export default colorPalettes;

package/helpers/events.js

@@ -0,0 +1,15 @@
+
+function subscribe(eventName, listener) {
+  document.addEventListener(eventName, listener);
+}
+
+function unsubscribe(eventName, listener) {
+  document.removeEventListener(eventName, listener);
+}
+
+function publish(eventName, data) {
+  const event = new CustomEvent(eventName, { detail: data });
+  document.dispatchEvent(event);
+}
+
+export { publish, subscribe, unsubscribe};

package/helpers/numberFromString.js

@@ -1,10 +1,11 @@
-export default function numberFromString(value = '') {
+export default function numberFromString(value = '', state = null) {
     // Only do this to values that are ONLY numbers - without this parseFloat strips all the other text
-    let nonNumeric = /[^\d.]/g
+    if (typeof value === 'string' && state?.legend?.type === 'category') return value;
 
+    let nonNumeric = /[^\d.-]/g
     if( false === Number.isNaN( parseFloat(value) ) && null === String(value).match(nonNumeric) ) {
         return parseFloat(value)
     }
 
     return value
-}
+}

package/helpers/updatePaletteNames.js

@@ -0,0 +1,18 @@
+
+
+  export function updatePaletteNames (colorPalettes){
+    // this function adds REVERSE keyword to each palette
+    delete colorPalettes.qualitative9 // delete palette before reversing
+    let palettereversed={}
+    for (const [paletteName, hexCodeArr] of Object.entries(colorPalettes)) {
+      const paletteStr = String(paletteName);
+
+     if (!paletteStr.endsWith('reverse') ){
+       let palette = paletteStr.concat('reverse'); // add to the end of the string "reverse"
+       palettereversed[palette] = [...hexCodeArr].reverse();  // reverses arrays elements and create new keys on object
+     }else{
+      palettereversed = {...colorPalettes}
+     }
+   }
+   return  {...palettereversed,...colorPalettes}
+  }

package/helpers/validateFipsCodeLength.js

@@ -0,0 +1,67 @@
+/**
+ * validateFipsCodeLength
+ * 
+ * When stateOrData is an object...
+ * This is used for validating maps fips codes during runtime where we 
+ * In this scenario a user is able to choose the column their Fips Codes are in.
+ * 
+ * When stateOrData is an array...
+ * The user hasn't chose which column has their FIPS codes in it. We still
+ * want to present the FIPS Codes in a friendly format so we attempt to add leading zeros.
+ * 
+ * @param {object|array} stateOrData 
+ * @returns {object|array} stateOrData
+ */
+export default function validateFipsCodeLength(stateOrData) {
+
+	// FIPS are within obj.
+	if (!Array.isArray(stateOrData)) {
+		if (stateOrData.general.geoType === 'us-county' || stateOrData.general.geoType === 'single-state' || stateOrData.general.geoType === 'us' && stateOrData?.data) {
+
+			stateOrData?.data.forEach(dataPiece => {
+				if (dataPiece[stateOrData.columns.geo.name]) {
+
+					if (!isNaN(parseInt(dataPiece[stateOrData.columns.geo.name])) && dataPiece[stateOrData.columns.geo.name].length === 4) {
+						dataPiece[stateOrData.columns.geo.name] = 0 + dataPiece[stateOrData.columns.geo.name]
+					}
+					dataPiece[stateOrData.columns.geo.name] = dataPiece[stateOrData.columns.geo.name].toString()
+				}
+			})
+		}
+	}
+
+	// Only includes data - get column name from somewhere else
+	if (Array.isArray(stateOrData)) {
+
+		let columns = Object.keys(stateOrData[0])
+
+		let potentialColumnNames = [
+			'fips',
+			'FIPS',
+			'fips codes',
+			'FIPS CODES',
+			'Fips Codes',
+			'fips Codes',
+			'Fips codes',
+			'FIPS Codes'
+		]
+
+		const fipsCol = columns.filter(columnName => potentialColumnNames.includes(columnName));
+
+		if (!fipsCol.length) return; // no column name to reference, leave the fips alone.
+
+		stateOrData?.forEach(dataPiece => {
+
+			if (dataPiece[fipsCol]) {
+
+				// specific to county fips codes.
+				if (!isNaN(parseInt(dataPiece[fipsCol])) && dataPiece[fipsCol].length === 4) {
+					dataPiece[fipsCol] = 0 + dataPiece[fipsCol]
+				}
+				dataPiece[fipsCol] = dataPiece[fipsCol].toString()
+			}
+		})
+	}
+
+	return stateOrData;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Core elements of the CDC Open Visualization project",
   "author": "Daniel Immke <npm@daniel.do>",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
@@ -15,5 +15,19 @@
   "bugs": {
     "url": "https://github.com/CDCgov/cdc-open-viz/issues"
   },
-  "gitHead": "8790a2336ff2453d0d6f09ecec56b5e4beaa7377"
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": ">=16"
+  },
+  "dependencies": {
+    "prop-types": "^15.8.1",
+    "react-accessible-accordion": "^3.3.4",
+    "react-select": "^5.3.1",
+    "react-tooltip": "4.2.8",
+    "use-debounce": "^6.0.1"
+  },
+  "resolutions": {
+    "@types/react": "17.x"
+  },
+  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
 }

package/styles/_data-table.scss

@@ -46,11 +46,17 @@ table.data-table {
     user-select: none;
     -moz-user-select: none;
     user-select: none;
+
+    button {
+      background: none;
+      font-size: initial;
+      color: #fff;
+    }
+
     tr {
       background: none;
     }
   }
-  
   thead {
     color: #fff;
     background-color: $mediumGray;
@@ -246,4 +252,4 @@ table.data-table {
   &:hover {
     transition: .3s all;
   }
-}
+}

package/styles/_global.scss

@@ -85,7 +85,7 @@ strong {
       background-color: darken($red, 5%);
     }
   }
-  
+
   &:hover {
     transition: .1s all;
     background: lighten(#005eaa, 5%);
@@ -100,9 +100,10 @@ strong {
   }
 }
 
-input[type="text"], input[role="combobox"], input[type="number"], input[type="search"], textarea {
+input[type="text"], input[type="date"], input[role="combobox"], input[type="number"], input[type="search"], textarea {
   padding: .5em .5em;
   font-size: 1em;
+  font-weight: normal;
   font-family: sans-serif;
   border: rgba(0,0,0,.3) 1px solid !important;
   &:focus {
@@ -116,6 +117,7 @@ textarea {
 select {
   width: 100%;
   font-size: 1em;
+  font-weight: normal;
   text-transform: none;
   border: rgba(0, 0, 0, 0.3) 1px solid !important;
 }
@@ -164,4 +166,4 @@ select {
     font-weight: 600;
     font-size: 1.2rem;
   }
-}
+}

package/styles/v2/base/_general.scss

@@ -0,0 +1,46 @@
+.cove {
+  margin: 0;
+  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  color: #111;
+
+  strong {
+    font-weight: 600;
+  }
+
+  .subtext {
+    margin-top: 1em;
+  }
+
+  .warning {
+    padding: .75em 1em;
+    margin: 1em 0;
+    background-color: #FFD2D2;
+    color: #D8000C;
+    font-size: .8em;
+    border: #D8000C 1px solid;
+    border-radius: .4em;
+
+    strong {
+      font-weight: 600;
+      display: block;
+    }
+  }
+
+  .sr-only,
+  .sr-only-focusable:not(:focus) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    display: flex;
+  }
+}

package/styles/v2/base/_reset.scss

@@ -0,0 +1,81 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/styles/v2/base/index.scss

@@ -0,0 +1,3 @@
+@import "reset";
+@import "typography";
+@import "general";