@cdc/core 4.24.2 → 4.24.3

package/components/ui/Title/Title.scss

@@ -2,9 +2,15 @@
   position: relative;
   padding: 0.6em 0.8em;
   margin: 0;
-  color: #fff;
+  color: var(--white);
   font-size: 1.1em;
 
+  h2 {
+    font-size: 1.1rem;
+    color: var(--white);
+    margin: 0;
+  }
+
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
 

package/components/ui/Title/index.tsx

@@ -21,11 +21,11 @@ const Title = (props: HeaderProps) => {
   return (
     title &&
     showTitle && (
-      <header className={updatedClasses.join(' ')} aria-hidden='true' style={props.style} aria-level={ariaLevel}>
+      <header className={updatedClasses.join(' ')} style={props.style}>
         {superTitle && <sup>{parse(superTitle)}</sup>}
-        <div>
+        <h2>
           {parse(title)} {isDashboard}
-        </div>
+        </h2>
       </header>
     )
   )

package/components/ui/Tooltip.jsx

@@ -26,7 +26,7 @@ const Tooltip = ({ place = 'top', trigger = 'hover', float = false, shadow = tru
 
   return (
     <span className='cove-tooltip' style={style} {...attributes}>
-      <a id={uid} className='cove-tooltip--target' data-tooltip-float={float} data-tooltip-place={place} data-tooltip-events={generateTriggerEvent()}>
+      <a id={uid} role='dialog' tabIndex={0} className='cove-tooltip--target' data-tooltip-float={float} data-tooltip-place={place} data-tooltip-events={generateTriggerEvent()}>
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
       </a>
       {/* prettier-ignore */}

package/data/colorPalettes.js

@@ -11,17 +11,12 @@ const colorPalettesMap = {
   greenblue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267BA6', '#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 doesn't appear to be used anywhere...
   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']
 }
 

package/helpers/cove/accessibility.ts

@@ -0,0 +1,23 @@
+import chroma from 'chroma-js'
+
+/**
+ * WCAG 2.0 Standard requires 4.5:1 contrast ratio
+ * https://www.w3.org/TR/WCAG20-TECHS/G18.html
+ *
+ * !important - DO NOT CHANGE.
+ */
+export const WCAG_CONTRAST_RATIO = 4.5
+
+export const getContrastColor = (textColor: string, bgColor: string) => {
+  if (chroma.contrast(textColor, bgColor) < WCAG_CONTRAST_RATIO) {
+    switch (textColor) {
+      case '#FFF':
+        return '#000'
+      case '#000':
+        return '#FFF'
+      default:
+        return textColor
+    }
+  }
+  return textColor
+}

package/helpers/cove/date.ts

@@ -0,0 +1,19 @@
+import { timeFormat, timeParse } from 'd3-time-format'
+import { type Axis } from '@cdc/core/types/Axis'
+
+export function formatDate(format = undefined, date) {
+  return timeFormat(format)(date)
+}
+
+export function parseDate(format = undefined, dateString) {
+  return timeParse(format)(dateString) || new Date()
+}
+
+export const isDateScale = (axis: Axis) => {
+  try {
+    if (!axis) throw new Error('COVE: No axis passed to isDateScale')
+    return ['date', 'date-time'].includes(axis.type)
+  } catch ({ message }) {
+    console.warn(message) // eslint-disable-line
+  }
+}

package/helpers/coveUpdateWorker.js

@@ -1,6 +1,7 @@
 // If config key names or position in the config have been changed with a version change,
 // process those config entries and format old values into new
 import update_4_23 from './ver/4.23'
+import update_4_24_3 from './ver/4.24.3'
 
 // 4.23.6 ------------------------------------------------------
 const coveUpdateWorker = async config => {
@@ -9,6 +10,9 @@ const coveUpdateWorker = async config => {
   // v4.23
   genConfig = await update_4_23(genConfig)
 
+  // v4.24.3
+  genConfig = await update_4_24_3(genConfig)
+
   return genConfig
 }
 

package/helpers/isDomainExternal.js

@@ -0,0 +1,14 @@
+export default function isDomainExternal(domain) {
+  const internalDomains = ['cdc.gov', 'localhost', 'facebook.com', 'twitter.com', 'linkedin.com', 'pinterest.com', 'youtube.com', 'youtube-nocookie.com', 'plus.google.com', 'instagram.com', 'flickr.com', 'tumblr.com', 'cdc.sharepoint.com', 'vaccines.gov', 'vacunas.gov']
+
+  const hostname = new URL(domain, window.location.origin).hostname
+  let external = true
+
+  internalDomains.forEach(internalDomain => {
+    if (hostname.indexOf(internalDomain) !== -1 && hostname.indexOf(internalDomain) === hostname.length - internalDomain.length) {
+      external = false
+    }
+  })
+
+  return external
+}

package/helpers/queryStringUtils.js

@@ -0,0 +1,26 @@
+export function getQueryStringFilterValue(filter) {
+  const urlParams = new URLSearchParams(window.location.search)
+  if(filter.setByQueryParameter){ // Only check the query string if the filter is supposed to be set by QS param
+    const filterValue = urlParams.get(filter.setByQueryParameter)
+    if(filterValue && filter.values){
+      for(let i = 0; i < filter.values.length; i++){
+        if(filter.values[i] && filter.values[i].toLowerCase() === filterValue.toLowerCase()){
+          return filter.values[i]
+        }
+      }
+    }
+  }
+}
+
+export function getQueryParams(filter) {
+  const queryParams = {};
+  for (const [key, value] of (new URLSearchParams(window.location.search)).entries()) {
+    queryParams[key] = value
+  }
+  return queryParams;
+}
+
+export function updateQueryString(queryParams) {
+  const updateUrl = `${window.location.origin}${window.location.pathname}?${Object.keys(queryParams).map(queryParam => `${queryParam}=${encodeURIComponent(queryParams[queryParam])}`).join('&')}`;
+  window.history.pushState({path: updateUrl}, '', updateUrl);
+}

package/helpers/tests/updateFieldFactory.test.ts

@@ -0,0 +1,89 @@
+import { updateFieldFactory } from '../updateFieldFactory'
+
+describe('updateFieldFactory', () => {
+  it('should update the top level field when section and subsection are null', () => {
+    const config = { filterColumn: 'oldValue', filterValue: 'oldValue' }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField(null, null, 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ filterColumn: 'newValue', filterValue: '' })
+  })
+
+  it('should update the second level when section is not null and subsection is null', () => {
+    const config = { section: { filterColumn: 'oldValue', filterValue: 'oldValue' } }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField('section', null, 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: { filterColumn: 'newValue', filterValue: 'oldValue' } })
+  })
+
+  it('should add to the second level when section is an array and subsection is null', () => {
+    const config = { section: ['oldValue'] }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField('section', null, 'thisParamDoesNotMatter', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: ['oldValue', 'newValue'] })
+  })
+
+  it('should update the third level when section and subsection are not null', () => {
+    const config = { section: { subsection: { filterColumn: 'oldValue', filterValue: 'oldValue' } } }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField('section', 'subsection', 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: { subsection: { filterColumn: 'newValue', filterValue: 'oldValue' } } })
+  })
+
+  it('should update the third level when section is an array', () => {
+    const config = { section: [{ filterColumn: 'oldValue', filterValue: 'oldValue' }] }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField('section', 0, 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: [{ filterColumn: 'newValue', filterValue: 'oldValue' }] })
+  })
+
+  it('should update the second level when newValue is a string and legacy is true', () => {
+    // test for legacy use case
+    // puts the newValue in two places for some reason
+    const config = { section: { subsection: 'oldValue' } }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig, true)
+    updateField('section', 'subsection', 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: { subsection: 'newValue', filterColumn: 'newValue' } })
+
+    updateField('section', null, 'filterColumn', 'newValue2')
+    expect(updatedConfig).toEqual({ section: { subsection: 'oldValue', filterColumn: 'newValue2' } })
+
+    updateField('section', 'subsection', null, 'newValue2')
+    expect(updatedConfig).toEqual({ section: { subsection: 'newValue2', null: 'newValue2' } })
+  })
+})

package/helpers/updateFieldFactory.ts

@@ -0,0 +1,38 @@
+import { UpdateFieldFunc } from '../types/UpdateFieldFunc'
+
+export const updateFieldFactory =
+  (config, updateConfig, legacy = false): UpdateFieldFunc<any> =>
+  (section, subsection, fieldName, newValue) => {
+    // Top level
+    if (null === section && null === subsection) {
+      const updatedConfig = { ...config, [fieldName]: newValue }
+
+      if ('filterColumn' === fieldName) {
+        updatedConfig.filterValue = ''
+      }
+
+      updateConfig(updatedConfig)
+      return
+    }
+
+    const isArray = Array.isArray(config[section])
+
+    let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
+
+    if (null !== subsection) {
+      if (isArray) {
+        sectionValue = [...config[section]]
+        sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
+      } else if (typeof newValue === 'string' && legacy) {
+        // supports data-bite, filter-text, markup-include, and waffle-chart.
+        // i'm not sure what the use case for this could be considering you should be able to
+        // update by not passing the subsection. Therefore I'm labeling it as legacy.
+        sectionValue[subsection] = newValue
+      } else {
+        sectionValue = { ...config[section], [subsection]: { ...config[section][subsection], [fieldName]: newValue } }
+      }
+    }
+    const updatedConfig = { ...config, [section]: sectionValue }
+
+    updateConfig(updatedConfig)
+  }

package/helpers/useDataVizClasses.js

@@ -65,8 +65,8 @@ export default function useDataVizClasses(config, viewport = null) {
     ul: getUlClasses(),
     li: ['single-legend-item', 'legend-container__li'],
     title: ['legend-container__title'],
-    resetButton: ['legend-container__reset-button', 'btn', 'clear'],
-    description: ['legend-container__description']
+    description: ['legend-container__description'],
+    div: [legend?.position === 'bottom' && legend?.singleRow ? 'shape-container single-row' : 'shape-container']
   }
 
   return { innerContainerClasses, contentClasses, barBorderClass, lineDatapointClass, sparkLineStyles, legendClasses }

package/helpers/ver/4.24.3.js

@@ -0,0 +1,25 @@
+const update_4_24_3 = async config => {
+  const ver = '4.24.3'
+
+  let newConfig = { ...config }
+
+  newConfig.validated = ver
+
+  if (newConfig.type === 'chart') {
+    if (newConfig.xAxis.sortDates) {
+      newConfig.xAxis.type = 'date-time'
+    }
+    newConfig.table.download = true
+
+    delete newConfig.xAxis.sortDates
+  }
+
+  if (newConfig.type === 'map') {
+    newConfig.table.download = true
+    newConfig.general.showDownloadButton = true
+  }
+
+  return newConfig
+}
+
+export default update_4_24_3

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.2",
+  "version": "4.24.3",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
   "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1"
+    "test": "vitest watch --reporter verbose --globals true",
+    "test:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -30,5 +31,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "edde49c96dee146de5e3a4537880b1bcf4dbee08"
+  "gitHead": "9c7ef7ca74f2d2a1e04d923b133fe0fc557a62bf"
 }

package/styles/_data-table.scss

@@ -31,7 +31,6 @@ div.data-table-heading {
 }
 
 table.horizontal {
-
   th,
   td {
     min-width: 200px;
@@ -103,18 +102,6 @@ table.data-table {
       background-size: 10px 5px;
     }
 
-    /* doesnt work
-    th.sort-asc,
-    td.sort-asc {
-      background-image: url(../assets/icon-caret-filled-up.svg);
-    }
-
-    th.sort-desc,
-    td.sort-desc {
-      background-image: url(../assets/icon-caret-filled-down.svg);
-    }
-    */
-
     // format the white triangle sort icon in data table headers
     .sort-icon {
       fill: white;

package/styles/base.scss

@@ -77,10 +77,18 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   @import 'series-list';
   @import 'typography';
 
+  // Force printing chart images
+  -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
+  color-adjust: exact !important; /* Firefox 48 – 96 */
+  print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
+
   .editor-panel.cove {
     position: absolute;
     height: 100vh;
     top: 0;
+    max-width: 350px;
+    width: 350px;
+
     .editor-toggle {
       position: absolute !important;
       top: 10px !important;

package/types/Axis.ts

@@ -23,6 +23,7 @@ export type Axis = {
   maxTickRotation?: number
   min?: string
   numTicks?: number
+  paddingPercent?: number
   rightAxisSize?: number
   rightHideAxis?: boolean
   rightHideLabel?: boolean

package/types/BaseVisualizationType.ts

@@ -0,0 +1 @@
+export type BaseVisualizationType = 'dashboard' | 'chart' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'filter-dropdowns' | 'table' | 'navigation'

package/types/ConfidenceInterval.ts

@@ -0,0 +1 @@
+export type ConfidenceInterval = Record<'lower' | 'upper', number | string>

package/types/Legend.ts

@@ -0,0 +1,18 @@
+export type Legend = {
+  additionalCategories: string[]
+  // general legend onClick behavior
+  behavior: 'highlight' | 'isolate' | string
+  axisAlign: boolean
+  colorCode: string
+  description: string
+  // show or hide the legend
+  hide: boolean
+  highlightOnHover: boolean
+  label: string
+  lineMode: boolean
+  position: string
+  reverseLabelOrder: boolean
+  singleRow: boolean
+  type: string
+  verticalSorted: boolean
+}

package/types/Region.ts

@@ -0,0 +1,10 @@
+export type Region = {
+  from: string
+  to: string
+  label: string
+  color: string
+  background: string
+  range: 'Custom' | string
+  fromType: 'Fixed' | 'Previous Days'
+  toType: 'Fixed' | 'Last Date'
+}

package/types/Runtime.ts

@@ -26,4 +26,6 @@ export type Runtime = {
   seriesLabels: Record<string, any>
   seriesLabelsAll: string[]
   editorErrorMessage: string
+  lineSeriesKeys: any[]
+  horizontal: boolean
 }

package/types/Table.ts

@@ -17,5 +17,5 @@ export type Table = {
   showDownloadPdfButton?: boolean
   downloadImageButton?: boolean
   downloadPdfButton?: boolean
-  dateDisplayFormat: string
+  dateDisplayFormat?: string
 }

package/types/UpdateFieldFunc.ts

@@ -1 +1 @@
-export type UpdateFieldFunc<T> = (section: string | null, subsection: string | null, fieldName: string, value: T) => void
+export type UpdateFieldFunc<T> = (section: string | null, subsection: string | number | null, fieldName: string | number, value: T) => void

package/types/Visualization.ts

@@ -1,27 +1,39 @@
+import { Legend } from './Legend'
+import { Axis } from './Axis'
+import { Column } from './Column'
+import { Series } from './Series'
+import { Table } from './Table'
+import { ConfidenceInterval } from './ConfidenceInterval'
+import { BaseVisualizationType } from './BaseVisualizationType'
+
 export type Visualization = {
   autoLoad: boolean
+  columns: Record<string, Column>
+  confidenceKeys: ConfidenceInterval
   data: any
   dataDescription: Object
   dataFileName: string
   dataFileSourceType: string
+  dataFormat: any
   dataKey: string
   datasets: Record<string, any>
   editing: boolean
-  formattedData?: Object[]
+  formattedData?: Object[] & Record<string, Object>
   general: any
   hide: any[]
+  legend: Legend
   multiDashboards?: any[]
   newViz: boolean
   openModal: boolean
   originalFormattedData: any
   orientation: 'vertical' | 'horizontal'
-  table: {
-    showDataTableLink: boolean
-  }
+  series: Series
+  table: Table
   title: string
-  type: 'dashboard' | 'chart' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'filter-dropdowns'
+  type: BaseVisualizationType
   uid: string
   usesSharedFilter: any
   visualizationType: string
   visualizationSubType: string
+  xAxis: Axis
 }

package/components/DataTable/components/SkipNav.tsx

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

package/helpers/cove/date.js

@@ -1,9 +0,0 @@
-import { timeFormat, timeParse } from 'd3-time-format'
-
-export function formatDate(format = undefined, date) {
-  return timeFormat(format)(date)
-}
-
-export function parseDate(format = undefined, dateString) {
-  return timeParse(format)(dateString) || new Date()
-}