@cdc/core 4.24.4 → 4.24.7

package/components/_stories/DataTable.stories.tsx

@@ -51,13 +51,12 @@ export const CityState: Story = {
 
 export const Grouped: Story = {
   args: {
-    config: Example_1,
+    config: { ...Example_1, table: { ...Example_1.table, groupBy: 'TimeZone' } },
     dataConfig: Example_1.datasets[datasetKey],
     rawData: Example_1.datasets[datasetKey].data,
     runtimeData: Example_1.datasets[datasetKey].data,
     expandDataTable: true,
     tableTitle: 'COVE DataTable',
-    groupBy: 'TimeZone',
     viewport: 'lg',
     tabbingId: datasetKey
   }

package/components/_stories/EditorPanel.stories.tsx

@@ -46,6 +46,7 @@ export const Primary: Story = {
         label: 'Data Table',
         show: true
       },
+      columns: {},
       visualizationType: 'Pie'
     },
     isDashboard: true

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/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/DataTransform.ts

@@ -134,27 +134,27 @@ export class DataTransform {
           let standardized: string[] = []
 
           data.forEach(row => {
-            let uniqueKey = row[description.xKey];
+            let uniqueKey = row[description.xKey]
             Object.keys(row).forEach(key => {
-              if(key !== description.xKey && key !== description.seriesKey && description.valueKeysTallSupport.indexOf(key) === -1 && (!description.ignoredKeys || description.ignoredKeys.indexOf(key) === -1)){
-                uniqueKey += "|" + row[key];
+              if (key !== description.xKey && key !== description.seriesKey && description.valueKeysTallSupport.indexOf(key) === -1 && (!description.ignoredKeys || description.ignoredKeys.indexOf(key) === -1)) {
+                uniqueKey += '|' + row[key]
               }
             })
 
-            if(!standardizedMapped[uniqueKey]){
-              standardizedMapped[uniqueKey] = {[description.xKey]: row[description.xKey]}
+            if (!standardizedMapped[uniqueKey]) {
+              standardizedMapped[uniqueKey] = { [description.xKey]: row[description.xKey] }
             }
             Object.keys(row).forEach(key => {
-              if(key !== description.xKey && key !== description.seriesKey && description.valueKeysTallSupport.indexOf(key) === -1 && (!description.ignoredKeys || description.ignoredKeys.indexOf(key) === -1)){
-                standardizedMapped[uniqueKey][key] = row[key];
+              if (key !== description.xKey && key !== description.seriesKey && description.valueKeysTallSupport.indexOf(key) === -1 && (!description.ignoredKeys || description.ignoredKeys.indexOf(key) === -1)) {
+                standardizedMapped[uniqueKey][key] = row[key]
               }
             })
             description.valueKeysTallSupport.forEach(valueKey => {
-              standardizedMapped[uniqueKey][row[description.seriesKey] + '-' + valueKey] = row[valueKey];
+              standardizedMapped[uniqueKey][row[description.seriesKey] + '-' + valueKey] = row[valueKey]
             })
           })
 
-          standardized = Object.keys(standardizedMapped).map(key => standardizedMapped[key]);
+          standardized = Object.keys(standardizedMapped).map(key => standardizedMapped[key])
 
           return standardized
         } else if (description.valueKeys !== undefined) {
@@ -291,29 +291,6 @@ export class DataTransform {
     return cleanedupData
   }
 
-  applySuppression = (data, suppressedData) => {
-    if (!suppressedData || suppressedData.length === 0) return data
-
-    // Create a new array to store the result without modifying the original data
-    const result = data.map(item => {
-      // Create a new object to store the updated item without modifying the original item
-      const newItem = { ...item }
-
-      // For each suppressedData item
-      for (let i = 0; i < suppressedData.length; i++) {
-        // If the object contains the column and its value matches the suppressed one
-        if (newItem[suppressedData[i].column] && newItem[suppressedData[i].column] === suppressedData[i].value) {
-          // Replace the value with the label in the new object
-          newItem[suppressedData[i].column] = suppressedData[i].label
-        }
-      }
-
-      return newItem
-    })
-
-    return result
-  }
-
   // clean out %, $, commas from numbers when needing to do sorting!
   cleanDataPoint(data, testing = false) {
     if (testing) console.log('clean', data)

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

@@ -1,13 +1,22 @@
 // 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_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'
 
-// 4.23.6 ------------------------------------------------------
 export const coveUpdateWorker = config => {
+  if (config.multiDashboards) {
+    config.multiDashboards.forEach((dashboard, index) => {
+      config.multiDashboards[index] = coveUpdateWorker(dashboard)
+    })
+  }
   let genConfig = config
 
-  // v4.24.3
   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/footnoteSymbols.ts

@@ -0,0 +1,11 @@
+import _ from 'lodash'
+
+const symbols = [
+  ['*', 'Asterisk'],
+  ['†', 'Dagger'],
+  ['§', 'Section Symbol'],
+  ['¶', 'Paragraph Symbol']
+]
+
+export const footnotesSymbols = symbols.concat(symbols.map(([symbol, name]) => [symbol + symbol, 'Double ' + name]))
+export const adjustedSymbols = _.fromPairs(_.map(footnotesSymbols, ([symbol, name]) => [name, symbol]))

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/useDataVizClasses.js

@@ -18,10 +18,6 @@ export default function useDataVizClasses(config, viewport = null) {
     if (title && showTitle) contentClasses.push('component--has-title')
   }
 
-  if (config.type === 'markup-include') {
-    contentClasses = contentClasses.filter(item => item !== 'cove-component__content')
-  }
-
   config.showTitle && contentClasses.push('component--has-title')
   config.title && config.visualizationType !== 'chart' && config.visualizationType !== 'Spark Line' && contentClasses.push('component--has-title')
   config.subtext && innerContainerClasses.push('component--has-subtext')

package/helpers/ver/4.23.4.ts

@@ -0,0 +1,27 @@
+import _ from 'lodash'
+
+const addFiltersToTables = config => {
+  if (config.type === 'dashboard') {
+    Object.keys(config.visualizations).forEach(vizKey => {
+      const viz = config.visualizations[vizKey]
+      if (viz.type === 'table') {
+        if (!viz.filters) {
+          viz.filters = []
+          viz.filterBehavior = 'Filter Change'
+        }
+      }
+    })
+  }
+}
+
+const update_4_24_4 = config => {
+  const ver = '4.24.4'
+
+  const newConfig = _.cloneDeep(config)
+  addFiltersToTables(newConfig)
+
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_24_4

package/helpers/ver/4.24.5.ts

@@ -0,0 +1,32 @@
+import _ from 'lodash'
+
+const migrateMarkupInclude = newConfig => {
+  if (newConfig.type === 'markup-include') {
+    if (!newConfig.contentEditor) {
+      newConfig.contentEditor = {
+        title: newConfig.title,
+        showHeader: newConfig.showHeader,
+        srcUrl: newConfig.srcUrl
+      }
+      delete newConfig.title
+      delete newConfig.showHeader
+      delete newConfig.srcUrl
+    }
+    if (!newConfig.visual) {
+      newConfig.visual = {}
+    }
+  }
+}
+
+const update_4_24_4 = config => {
+  const ver = '4.24.4'
+
+  const newConfig = _.cloneDeep(config)
+
+  migrateMarkupInclude(newConfig)
+
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_24_4

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