@cdc/core 4.24.5 → 4.24.7

package/components/Layout/components/Sidebar/components/sidebar.styles.scss

@@ -601,7 +601,7 @@
       /* clicking anywhere will focus the input */
       cursor: text;
 
-      span {
+      span:not(.cove-tooltip, .cove-icon) {
         display: inline;
       }
     }
@@ -723,6 +723,10 @@
       margin-right: 5px;
     }
 
+    .cove-tooltip {
+      position: relative;
+    }
+
     // tooltips
     .cove-label + .cove-tooltip {
       top: 1px;
@@ -731,9 +735,9 @@
     }
 
     .cove-accordion__button .cove-tooltip {
-      display: inline-flex;
-      right: 1.5rem;
-      line-height: inherit;
+      // display: inline-flex;
+      // right: 1.5rem;
+      // line-height: inherit;
     }
 
     .cove-list-group__item .cove-tooltip {

package/components/Layout/components/Visualization/index.tsx

@@ -1,18 +1,19 @@
 // main visualization wrapper
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef } from 'react'
 import { Config as DataBiteConfig } from '@cdc/data-bite/src/types/Config'
 import './visualizations.scss'
 import { Config as WaffleChartConfig } from '@cdc/waffle-chart/src/types/Config'
 import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
+import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 
 type VisualizationWrapper = {
   children: React.ReactNode
-  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig
-  currentViewport: string
-  imageId: string
+  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters
+  currentViewport?: string
+  imageId?: string
   isEditor: boolean
-  showEditorPanel: boolean
+  showEditorPanel?: boolean
 }
 
 const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
@@ -33,6 +34,12 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
       classes.push('editor-panel--hidden')
     }
 
+    if (config.type === 'filtered-text') {
+      classes.push('type-filtered-text')
+      classes = classes.filter(item => item !== 'cove-component__content')
+      return classes
+    }
+
     if (config.type === 'chart') {
       classes.push('type-chart')
       config?.visualizationType === 'Spark Line' && classes.push(`type-sparkline`)

package/components/MultiSelect/MultiSelect.tsx

@@ -21,8 +21,8 @@ interface MultiSelectProps {
   limit?: number
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected, limit }) => {
-  const preselectedItems = options.filter(opt => selected?.includes(opt.value)).slice(0, limit)
+const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected = [], limit }) => {
+  const preselectedItems = options.filter(opt => selected.includes(opt.value)).slice(0, limit)
   const [selectedItems, setSelectedItems] = useState<Option[]>(preselectedItems)
   const [expanded, setExpanded] = useState(false)
   const multiSelectRef = useRef(null)
@@ -68,22 +68,39 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
   return (
     <div ref={multiSelectRef} className='cove-multiselect'>
       {label && (
-        <label id={multiID} className='cove-input__label'>
+        <span id={multiID} className='edit-label column-heading'>
           {label}
-        </label>
+        </span>
       )}
 
       <div className='wrapper'>
         <div className='selected'>
           {selectedItems.map(item => (
-            <div key={item.value} aria-labelledby={label ? multiID : undefined} role='button' onClick={() => handleItemRemove(item)} onKeyUp={e => handleItemRemove(item, e)}>
+            <div key={item.value} aria-labelledby={label ? multiID : undefined}>
               {item.label}
-              <button aria-label='Remove' onClick={() => handleItemRemove(item)}>
+              <button
+                aria-label='Remove'
+                onClick={e => {
+                  e.preventDefault()
+                  handleItemRemove(item)
+                }}
+                onKeyUp={e => {
+                  handleItemRemove(item, e)
+                }}
+              >
                 x
               </button>
             </div>
           ))}
-          <button aria-label={expanded ? 'Collapse' : 'Expand'} aria-labelledby={label ? multiID : undefined} className='expand' onClick={() => setExpanded(!expanded)}>
+          <button
+            aria-label={expanded ? 'Collapse' : 'Expand'}
+            aria-labelledby={label ? multiID : undefined}
+            className='expand'
+            onClick={e => {
+              e.preventDefault()
+              setExpanded(!expanded)
+            }}
+          >
             <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
           </button>
         </div>
@@ -98,11 +115,21 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
           </Tooltip>
         )}
       </div>
-      <ul className={'dropdown' + (expanded ? '' : ' hide')}>
+      <ul className={'dropdown' + (expanded ? '' : ' d-none')}>
         {options
           .filter(option => !selectedItems.find(item => item.value === option.value))
           .map(option => (
-            <li className='cove-multiselect-li' key={option.value} role='option' tabIndex={0} onClick={() => handleItemSelect(option)} onKeyUp={e => handleItemSelect(option, e)}>
+            <li
+              className='cove-multiselect-li'
+              key={option.value}
+              role='option'
+              tabIndex={0}
+              onClick={e => {
+                e.preventDefault()
+                handleItemSelect(option, e)
+              }}
+              onKeyUp={e => handleItemSelect(option, e)}
+            >
               {option.label}
             </li>
           ))}

package/components/MultiSelect/multiselect.styles.css

@@ -51,9 +51,6 @@
     overflow-y: scroll;
     min-width: 200px;
     z-index: 4;
-    &.hide {
-      display: none;
-    }
 
     :is(li) {
       cursor: pointer;

package/components/_stories/Footnotes.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Footnotes from '../Footnotes'
+
+const meta: Meta<typeof Footnotes> = {
+  title: 'Components/Organisms/Footnotes',
+  component: Footnotes
+}
+
+export default meta
+
+type Story = StoryObj<typeof Footnotes>
+
+export const Primary: Story = {
+  args: {
+    footnotes: [{ symbol: '*', text: 'This is a footnote' }, { symbol: '†', text: 'This is another footnote' }, { text: 'This is a third footnote' }]
+  }
+}

package/components/_stories/styles.scss

@@ -1,3 +1,4 @@
+@import '../../styles/base.scss';
 @import '../../styles/_variables';
 @import '../../styles/_mixins';
 @import '../../styles/_data-table';

package/components/inputs/InputSelect.tsx

@@ -3,7 +3,7 @@ import '../../styles/v2/components/input/index.scss'
 interface InputProps {
   label?
   value?
-  options: string[] | { [key: string]: string }
+  options: string[] | Record<string, any> | [any, string][]
   fieldName
   section?
   subsection?
@@ -17,11 +17,22 @@ const InputSelect = ({ label, value, options, fieldName, section = null, subsect
 
   if (Array.isArray(options)) {
     //Handle basic array
-    optionsJsx = options.map(optionName => (
-      <option value={optionName} key={optionName}>
-        {optionName}
-      </option>
-    ))
+    optionsJsx = options.map(option => {
+      if (typeof option === 'string') {
+        return (
+          <option value={option} key={option}>
+            {option}
+          </option>
+        )
+      } else {
+        const [value, name] = option
+        return (
+          <option value={value} key={name}>
+            {name}
+          </option>
+        )
+      }
+    })
   } else {
     //Handle object with value/name pairs
     optionsJsx = []

package/components/ui/Icon.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 import iconCaretUp from '../../assets/icon-caret-up.svg'
@@ -68,7 +67,7 @@ const iconHash = {
   plus: iconPlus,
   minus: iconMinus,
   'filtered-text': iconText,
-  'filter-dropdowns': iconDropdowns,
+  dashboardFilters: iconDropdowns,
   table: iconTable,
   sankey: iconSankey,
   rotateLeft: iconRotateLeft,

package/helpers/addValuesToFilters.ts

@@ -0,0 +1,56 @@
+import _ from 'lodash'
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+
+type Filter = {
+  columnName: string
+  values: string[]
+  filterStyle?: string
+  active?: string | string[]
+}
+
+// Gets filter values from dataset
+const generateValuesForFilter = (columnName, data: any[] | Record<string, any[]>) => {
+  const values: string[] = []
+
+  if (Array.isArray(data)) {
+    data.forEach(row => {
+      const value = row[columnName]
+      if (!values.includes(value)) {
+        values.push(value)
+      }
+    })
+  } else {
+    // data is a dataset this loops through ALL datasets to find matching values
+    // not sure if this is desired behavior
+    Object.values(data).forEach((rows: any[]) => {
+      rows.forEach(row => {
+        const value = row[columnName]
+        if (!values.includes(value)) {
+          values.push(value)
+        }
+      })
+    })
+  }
+
+  return values
+}
+
+export const addValuesToFilters = <T>(filters: Filter[], data: any[] | Record<string, any[]>): Array<T> => {
+  return filters?.map(filter => {
+    const filterCopy = _.cloneDeep(filter)
+
+    const filterValues = generateValuesForFilter(filter.columnName, data)
+    filterCopy.values = filterValues
+    if (filterValues.length > 0) {
+      const defaultValues = filterCopy.filterStyle === 'multi-select' ? filterCopy.values : filterCopy.values[0]
+
+      const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
+      if (queryStringFilterValue) {
+        filterCopy.active = queryStringFilterValue
+      } else {
+        filterCopy.active = filterCopy.active || defaultValues
+      }
+    }
+    return filterCopy
+  }) as Array<T>
+}

package/helpers/cove/accessibility.ts

@@ -9,6 +9,7 @@ import chroma from 'chroma-js'
 export const WCAG_CONTRAST_RATIO = 4.5
 
 export const getContrastColor = (textColor: string, bgColor: string) => {
+  if (!bgColor) return
   if (chroma.contrast(textColor, bgColor) < WCAG_CONTRAST_RATIO) {
     switch (textColor) {
       case '#FFF':

package/helpers/cove/fontSettings.ts

@@ -0,0 +1,2 @@
+// TODO: handle with css
+export const fontSizes = { small: 16, medium: 18, large: 20 }

package/helpers/coveUpdateWorker.ts

@@ -3,13 +3,20 @@
 import update_4_24_4 from './ver/4.23.4'
 import update_4_24_3 from './ver/4.24.3'
 import update_4_24_5 from './ver/4.24.5'
+import update_4_24_7 from './ver/4.24.7'
 
 export const coveUpdateWorker = config => {
+  if (config.multiDashboards) {
+    config.multiDashboards.forEach((dashboard, index) => {
+      config.multiDashboards[index] = coveUpdateWorker(dashboard)
+    })
+  }
   let genConfig = config
 
   genConfig = update_4_24_3(genConfig)
   genConfig = update_4_24_4(genConfig)
   genConfig = update_4_24_5(genConfig)
+  genConfig = update_4_24_7(genConfig)
 
   return genConfig
 }

package/helpers/filterVizData.ts

@@ -0,0 +1,30 @@
+export const filterVizData = (filters, data) => {
+  if (!data) {
+    console.warn('COVE: No data to filter')
+    return []
+  }
+
+  if (!filters) return data
+  const filteredData: any[] = []
+
+  data?.forEach(row => {
+    let add = true
+    filters
+      .filter(filter => filter.type !== 'url')
+      .forEach(filter => {
+        const value = row[filter.columnName]
+        if (filter.active === undefined) return
+        if (Array.isArray(filter.active)) {
+          if (!filter.active.includes(value)) {
+            add = false
+          }
+        } else if (value != filter.active) {
+          add = false
+        }
+      })
+
+    if (add) filteredData.push(row)
+  })
+
+  return filteredData
+}

package/helpers/formatConfigBeforeSave.ts

@@ -0,0 +1,90 @@
+import Footnotes from '@cdc/core/types/Footnotes'
+import { Visualization } from '@cdc/core/types/Visualization'
+import { DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
+import _ from 'lodash'
+
+const cleanDashboardFootnotes = (config: DashboardConfig) => {
+  // strip any blank footnote visualizations
+  const footnoteIds: string[] = []
+
+  if (config.rows) {
+    config.rows.forEach(row => {
+      if (row.footnotesId) {
+        const { dataKey, staticFootnotes } = config.visualizations[row.footnotesId] as Footnotes
+        if (!dataKey && !staticFootnotes?.length) {
+          delete config.visualizations[row.footnotesId]
+        } else {
+          footnoteIds.push(row.footnotesId)
+        }
+      }
+    })
+  }
+
+  if (config.visualizations) {
+    Object.keys(config.visualizations).forEach(vizKey => {
+      const viz: Visualization = config.visualizations[vizKey]
+      if (viz.type === 'footnotes' && !footnoteIds.includes(vizKey)) {
+        // if footnote isn't being used by any rows, remove it
+        delete config.visualizations[vizKey]
+      }
+    })
+  }
+}
+
+const cleanDashboardData = (config: DashboardConfig) => {
+  if (config.datasets) {
+    Object.keys(config.datasets).forEach(datasetKey => {
+      delete config.datasets[datasetKey].formattedData
+      if (config.datasets[datasetKey].dataUrl) {
+        delete config.datasets[datasetKey].data
+      }
+    })
+  }
+  if (config.visualizations) {
+    Object.keys(config.visualizations).forEach(vizKey => {
+      config.visualizations[vizKey] = _.omit(config.visualizations[vizKey], ['runtime', 'formattedData', 'data'])
+    })
+  }
+  if (config.rows) {
+    config.rows.forEach((row, i) => {
+      if (row.dataKey) {
+        config.rows[i] = _.omit(row, ['data', 'formattedData'])
+      }
+    })
+  }
+}
+
+const cleanSharedFilters = (config: DashboardConfig) => {
+  if (config.dashboard?.sharedFilters) {
+    config.dashboard.sharedFilters.forEach((filter, index) => {
+      delete config.dashboard.sharedFilters[index].active
+      if (filter.type === 'urlfilter') {
+        delete config.dashboard.sharedFilters[index].values
+      }
+    })
+  }
+}
+
+export const formatConfigBeforeSave = configToStrip => {
+  let strippedConfig = _.cloneDeep(configToStrip)
+  if (strippedConfig.type === 'dashboard') {
+    if (strippedConfig.multiDashboards) {
+      strippedConfig.multiDashboards.forEach((multiDashboard, i) => {
+        cleanDashboardData(strippedConfig.multiDashboards[i])
+        cleanSharedFilters(strippedConfig.multiDashboards[i])
+        cleanDashboardFootnotes(strippedConfig.multiDashboards[i])
+      })
+    }
+    cleanDashboardData(strippedConfig)
+    cleanSharedFilters(strippedConfig)
+    cleanDashboardFootnotes(strippedConfig)
+  } else {
+    delete strippedConfig.runtime
+    delete strippedConfig.formattedData
+    if (strippedConfig.dataUrl) {
+      delete strippedConfig.data
+    }
+  }
+
+  return strippedConfig
+}

package/helpers/gatherQueryParams.ts

@@ -1,7 +1,14 @@
-export const gatherQueryParams = (params: {key: string, value: string}[]) => {
-    return params.map(({key, value}, i) => {
-        const leadingCharacter = i === 0 ? '?' : '&'
-        return leadingCharacter + key + '=' + value
-      })
-      .join('')
-  }
+import _ from 'lodash'
+
+export const gatherQueryParams = (baseEndpoint: string, params: { key: string; value: string }[]) => {
+  const baseEndpointHasQueryParams = baseEndpoint.includes('?')
+  return params
+    .filter(({ value }) => value !== '')
+    .map(({ key, value }, i) => {
+      const leadingCharacter = i === 0 && !baseEndpointHasQueryParams ? '?' : '&'
+      const isStatementParam = key.match(/\$.*/)
+      if (!_.isNaN(parseInt(value)) || isStatementParam) return leadingCharacter + key + '=' + value
+      return leadingCharacter + key + '=' + `"${value}"`
+    })
+    .join('')
+}

package/helpers/lineChartHelpers.js

@@ -3,5 +3,6 @@ export const approvedCurveTypes = {
   Cardinal: 'curveCardinal',
   Natural: 'curveNatural',
   'Monotone X': 'curveMonotoneX',
-  Step: 'curveStep'
+  Step: 'curveStep',
+  'Curve Basis': 'curveBasis'
 }

package/helpers/pivotData.ts

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+/** columnName is the column you'd like to select data values from to show as column headers.
+ *  Pivot is the value column who's data you'd like to show under those respective columns*/
+export const pivotData = (data: Record<string, any>[], columnName: string, pivot: string) => {
+  const grouped = _.groupBy(data, val => val[columnName])
+  const newData = []
+  for (const key in grouped) {
+    const group = grouped[key]
+    group.forEach((val, index) => {
+      const row = newData[index] || {}
+      row[key] = val[pivot]
+      const toAdd = _.omit(val, [columnName, pivot])
+      newData[index] = { ...toAdd, ...row }
+    })
+  }
+  return newData
+}

package/helpers/queryStringUtils.ts

@@ -0,0 +1,29 @@
+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() {
+  const queryParams = {}
+  for (const [key, value] of Array.from(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

@@ -1,4 +1,5 @@
 import { updateFieldFactory } from '../updateFieldFactory'
+import { expect, describe, it } from 'vitest'
 
 describe('updateFieldFactory', () => {
   it('should update the top level field when section and subsection are null', () => {

package/helpers/updateFieldFactory.ts

@@ -1,7 +1,7 @@
 import { UpdateFieldFunc } from '../types/UpdateFieldFunc'
 
 export const updateFieldFactory =
-  (config, updateConfig, legacy = false): UpdateFieldFunc<any> =>
+  <T>(config, updateConfig, legacy = false): UpdateFieldFunc<T> =>
   (section, subsection, fieldName, newValue) => {
     // Top level
     if (null === section && null === subsection) {

package/helpers/ver/4.24.7.ts

@@ -0,0 +1,92 @@
+import _ from 'lodash'
+import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
+import { MultiDashboardConfig } from '@cdc/dashboard/src/types/MultiDashboard'
+import { AnyVisualization } from '../../types/Visualization'
+
+export const dashboardFiltersMigrate = config => {
+  if (!config.dashboard) return config
+  const dashboardConfig = config as MultiDashboardConfig
+  const newVisualizations = {}
+  // autoload was removed from APIFilter type
+  const newSharedFilters = (dashboardConfig.dashboard.sharedFilters || []).map(sf => {
+    if (sf.apiFilter?.autoLoad !== undefined) {
+      delete sf.apiFilter.autoLoad
+    }
+    if (sf.apiFilter?.defaultValue !== undefined) {
+      delete sf.apiFilter.defaultValue
+    }
+    return sf
+  })
+  config.dashboard.sharedFilters = newSharedFilters
+
+  Object.keys(dashboardConfig.visualizations).forEach(vizKey => {
+    const viz = dashboardConfig.visualizations[vizKey] as DashboardFilters
+    // hide was removed from visualizations
+    if (viz.hide !== undefined) {
+      viz.sharedFilterIndexes = newSharedFilters.map((_sf, i) => i).filter(i => !viz.hide.includes(i))
+      viz.type = 'dashboardFilters'
+      if (viz.autoLoad) {
+        viz.filterBehavior = 'Filter Change'
+      } else {
+        viz.filterBehavior = 'Apply Button'
+      }
+
+      delete viz.hide
+    }
+    // 'filter-dropdowns' was renamed to 'dashboardFilters' for clarity
+    if (viz.type === 'filter-dropdowns') viz.type = 'dashboardFilters'
+    if (viz.visualizationType === 'filter-dropdowns') viz.visualizationType = 'dashboardFilters'
+    newVisualizations[vizKey] = viz
+  })
+
+  if (config.dashboard.sharedFilters.length && !Object.values(newVisualizations).find((v: AnyVisualization) => v.type === 'dashboardFilters')) {
+    const newViz = {
+      type: 'dashboardFilters',
+      visualizationType: 'dashboardFilters',
+      sharedFilterIndexes: config.dashboard.sharedFilters.map((_sf, i) => i),
+      filterBehavior: config.filterBehavior || 'Filter Change'
+    }
+    const key = 'legacySharedFilters'
+    newVisualizations[key] = newViz
+    const newRow = {
+      columns: [
+        {
+          width: 12,
+          widget: key
+        }
+      ]
+    }
+    config.rows = [newRow, ...config.rows]
+  }
+  // if there's no dashboardFilters visualization but there are sharedFilters create a visualization and update rows.
+
+  config.visualizations = newVisualizations
+}
+
+const mapUpdates = newConfig => {
+  // When switching between old version of equal number, and the revised equal number opt in, roundToPlace needs to be set.
+  // There wasn't an initial value set for this, and legends would return NaN if it wasn't set. ie. 0 - NAN instead of 0 - 1
+  const equalNumberRoundingPatch = newConfig => {
+    if (newConfig.type === 'map') {
+      if (newConfig.columns.primary.roundToPlace === undefined) {
+        newConfig.columns.primary.roundToPlace = 0
+      }
+    }
+  }
+
+  equalNumberRoundingPatch(newConfig)
+
+  return newConfig
+}
+
+const update_4_24_7 = config => {
+  const ver = '4.24.7'
+
+  const newConfig = _.cloneDeep(config)
+
+  mapUpdates(newConfig)
+  dashboardFiltersMigrate(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+export default update_4_24_7