@cdc/core 4.24.3 → 4.24.5

package/components/Table/components/Row.tsx

@@ -7,15 +7,19 @@ type RowProps = {
   wrapColumns: boolean
   isTotal?: boolean
   cellMinWidth?: number
+  fontSize: 'small' | 'medium' | 'large'
+  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
 }
 
-const Row = ({ childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal }: RowProps) => {
+const Row = ({ childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, fontSize, viewport }: RowProps) => {
   const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
   const minWidth = cellMinWidth + 'px'
+  const fontSizes = { small: 16, medium: 18, large: 20 }
+  const cellFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '11px' : `${fontSizes[fontSize]}px`
   return (
     <tr>
       {childRow.map((child, i) => (
-        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth }} isBold={isTotal}>
+        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth, fontSize: cellFontSize }} isBold={isTotal}>
           {child}
         </Cell>
       ))}

package/components/Table/types/RowType.ts

@@ -3,3 +3,6 @@ export enum RowType {
   total = 'total',
   row_group_total = 'row_group_total'
 }
+
+// The only distinction between total and row_group_total is the way the UI renders it.
+// They function otherwise the same a regular row.

package/components/Waiting.jsx

@@ -1,8 +1,18 @@
 import React from 'react'
 import '../styles/waiting.scss'
 
+const styles = {
+  position: 'relative',
+  height: '100vh',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gridArea: 'content'
+}
+
 export default ({ requiredColumns, className }) => (
-  <section className={className}>
+  <section className={className} style={styles}>
     <section className='waiting-container'>
       <h3>Configuration Required</h3>
       <p>

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/createBarElement.jsx

@@ -1,6 +1,9 @@
 export default function createBarElement(props) {
   const { config, index, id, className, background, borderColor, borderWidth, width, height, x, y, onMouseOver, onMouseLeave, onClick, tooltipHtml, tooltipId, styleOverrides, seriesHighlight } = props
 
+  const adjustedWidth = Math.max(0, width);
+  const adjustedHeight = Math.max(0, height);
+
   const isHorizontal = config.orientation === 'horizontal'
   const isRounded = config.barStyle === 'rounded'
   const isStacked = config.visualizationSubType === 'stacked'
@@ -11,67 +14,67 @@ export default function createBarElement(props) {
   const stackCount = comboBarSeriesCount ? comboBarSeriesCount : isolateSeriesCount ? isolateSeriesCount : barSeriesCount
 
   let radius = config.roundingStyle === 'standard' ? 8 : config.roundingStyle === 'shallow' ? 5 : config.roundingStyle === 'finger' ? 15 : 0
-  if (radius > width / 2 || radius > height / 2) {
-    radius = Math.min(width / 2, height / 2)
+  if (radius > adjustedWidth / 2 || radius > adjustedHeight / 2) {
+    radius = Math.min(adjustedWidth / 2, adjustedHeight / 2)
   }
 
   const roundTop = () => {
-    return `M${x},${y + height}
+    return `M${x},${y + adjustedHeight}
       L${x},${y + radius}
       Q${x},${y} ${x + radius},${y}
-      L${x + width - radius},${y}
-      Q${x + width},${y} ${x + width},${y + radius}
-      L${x + width},${y + height}
-      L${x},${y + height}`
+      L${x + adjustedWidth - radius},${y}
+      Q${x + adjustedWidth},${y} ${x + adjustedWidth},${y + radius}
+      L${x + adjustedWidth},${y + adjustedHeight}
+      L${x},${y + adjustedHeight}`
   }
 
   const roundRight = () => {
-    return `M${x},${y + height}
+    return `M${x},${y + adjustedHeight}
       L${x},${y}
-      L${x + width - radius},${y}
-      Q${x + width},${y} ${x + width},${y + radius}
-      L${x + width},${y + height - radius}
-      Q${x + width},${y + height} ${x + width - radius},${y + height}
-      L${x},${y + height}`
+      L${x + adjustedWidth - radius},${y}
+      Q${x + adjustedWidth},${y} ${x + adjustedWidth},${y + radius}
+      L${x + adjustedWidth},${y + adjustedHeight - radius}
+      Q${x + adjustedWidth},${y + adjustedHeight} ${x + adjustedWidth - radius},${y + adjustedHeight}
+      L${x},${y + adjustedHeight}`
   }
 
   const roundBottom = () => {
-    return `M${x + radius},${y + height}
-      Q${x},${y + height} ${x},${y + height - radius}
+    return `M${x + radius},${y + adjustedHeight}
+      Q${x},${y + adjustedHeight} ${x},${y + adjustedHeight - radius}
       L${x},${y}
-      L${x + width},${y}
-      L${x + width},${y + height - radius}
-      Q${x + width},${y + height} ${x + width - radius},${y + height}
-      L${x + radius},${y + height}`
+      L${x + adjustedWidth},${y}
+      L${x + adjustedWidth},${y + adjustedHeight - radius}
+      Q${x + adjustedWidth},${y + adjustedHeight} ${x + adjustedWidth - radius},${y + adjustedHeight}
+      L${x + radius},${y + adjustedHeight}`
   }
 
   const roundLeft = () => {
-    return `M${x + radius},${y + height}
-      Q${x},${y + height} ${x},${y + height - radius}
+    return `M${x + radius},${y + adjustedHeight}
+      Q${x},${y + adjustedHeight} ${x},${y + adjustedHeight - radius}
       L${x},${y + radius}
       Q${x},${y} ${x + radius},${y}
-      L${x + width},${y}
-      L${x + width},${y + height}
-      L${x + radius},${y + height}`
+      L${x + adjustedWidth},${y}
+      L${x + adjustedWidth},${y + adjustedHeight}
+      L${x + radius},${y + adjustedHeight}`
   }
 
   const roundFull = () => {
-    return `M${x + radius},${y + height}
-      Q${x},${y + height} ${x},${y + height - radius}
+    return `M${x + radius},${y + adjustedHeight}
+      Q${x},${y + adjustedHeight} ${x},${y + adjustedHeight - radius}
       L${x},${y + radius}
       Q${x},${y} ${x + radius},${y}
-      L${x + width - radius},${y}
-      Q${x + width},${y} ${x + width},${y + radius}
-      L${x + width},${y + height - radius}
-      Q${x + width},${y + height} ${x + width - radius},${y + height}
-      L${x + radius},${y + height}`
+      L${x + adjustedWidth - radius},${y}
+      Q${x + adjustedWidth},${y} ${x + adjustedWidth},${y + radius}
+      L${x + adjustedWidth},${y + adjustedHeight - radius}
+      Q${x + adjustedWidth},${y + adjustedHeight} ${x + adjustedWidth - radius},${y + adjustedHeight}
+      L${x + radius},${y + adjustedHeight}`
   }
 
   const nonRounded = () => {
     return `M${x},${y}
-      L${x + width},${y}
-      L${x + width},${y + height}
-      L${x},${y + height}
+      L${x + adjustedWidth},${y}
+      L${x + adjustedWidth},${y + adjustedHeight}
+      L${x},${y + adjustedHeight}
       L${x},${y}`
   }
 

package/components/elements/SkipTo.tsx

@@ -1,3 +1,5 @@
+import { useId } from 'react'
+
 type SkipToProps = {
   // id to skip to
   skipId: string
@@ -5,10 +7,40 @@ type SkipToProps = {
   skipMessage: string
 }
 
-const SkipTo: React.FC<SkipToProps> = ({ skipId, skipMessage }) => (
-  <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
-    {skipMessage}
-  </a>
-)
+const SkipTo: React.FC<SkipToProps> = ({ skipId, skipMessage }) => {
+  const accessibleId = useId()
+  const handleOnClick = () => {
+    // Navigate to the specific part of the page
+    const targetElement = document.getElementById(skipId)
+    if (targetElement) {
+      targetElement.scrollIntoView()
+      targetElement.setAttribute('tabIndex', '-1')
+      targetElement.focus()
+      // Setup to remove tabIndex on blur to maintain document flow
+      const blurListener = () => {
+        targetElement.removeAttribute('tabIndex')
+        targetElement.removeEventListener('blur', blurListener)
+      }
+      targetElement.addEventListener('blur', blurListener)
+    }
+  }
+  return (
+    <div
+      tabIndex={0}
+      id={`skip-nav--${accessibleId}`}
+      className='cdcdataviz-sr-only-focusable'
+      onClick={handleOnClick}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          handleOnClick()
+        }
+      }}
+      role='link'
+      aria-label={skipMessage}
+    >
+      {skipMessage}
+    </div>
+  )
+}
 
 export default SkipTo

package/components/managers/DataDesigner.tsx

@@ -5,18 +5,18 @@ import Card from '../elements/Card'
 
 import { DATA_TABLE_VERTICAL, DATA_TABLE_HORIZONTAL, DATA_TABLE_SINGLE_ROW, DATA_TABLE_MULTI_ROW } from '../../templates/dataDesignerTables'
 import '../../styles/v2/components/data-designer.scss'
+import { ConfigureData } from '../../types/ConfigureData'
 
 type DataDesignerProps = {
-  configureData?: any // todo: add description here when understood better
-  updateDescriptionProp?: (vizKey: string, dataKey: string, propName: string, value: any) => void // used to update data description fields
-  visualizationKey?: any // todo: add description here when understood better
-  dataKey?: string // appears to be the data file name, ie valid-data.csv
+  configureData?: ConfigureData
+  updateDescriptionProp: (propName: string, value: any) => void // used to update data description fields
+  visualizationKey: string
   config?: any // can be one of many different types of chart configs that aren't fully established yet
   setConfig?: (newConfig: any) => void
 }
 
 const DataDesigner = (props: DataDesignerProps) => {
-  const { configureData, updateDescriptionProp, visualizationKey, dataKey, config, setConfig } = props
+  const { configureData, updateDescriptionProp, config, setConfig } = props
   const hasDataOrientation = config?.visualizationType !== 'Forest Plot'
   const hasMultipleSeries = config?.visualizationType !== 'Forest Plot'
   const hasRowSelection = config?.visualizationType !== 'Forest Plot'
@@ -47,7 +47,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                 <button
                   className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', false)
+                    updateDescriptionProp('horizontal', false)
                   }}
                 >
                   <Card>
@@ -63,7 +63,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                 <button
                   className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', true)
+                    updateDescriptionProp('horizontal', true)
                   }}
                 >
                   <Card>
@@ -90,7 +90,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   hoverStyle={{ backgroundColor: '#015daa' }}
                   className='mr-1'
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'series', true)
+                    updateDescriptionProp('series', true)
                   }}
                   active={configureData.dataDescription.series === true}
                 >
@@ -100,7 +100,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   style={{ backgroundColor: '#00345d' }}
                   hoverStyle={{ backgroundColor: '#015daa' }}
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'series', false)
+                    updateDescriptionProp('series', false)
                   }}
                   active={configureData.dataDescription.series === false}
                 >
@@ -114,7 +114,7 @@ const DataDesigner = (props: DataDesignerProps) => {
               <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
               <select
                 onChange={e => {
-                  updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+                  updateDescriptionProp('seriesKey', e.target.value)
                 }}
                 defaultValue={configureData.dataDescription.seriesKey}
               >
@@ -136,7 +136,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <button
                       className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === true ? ' active' : '')}
                       onClick={() => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'singleRow', true)
+                        updateDescriptionProp('singleRow', true)
                       }}
                     >
                       <Card>
@@ -150,7 +150,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <button
                       className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === false ? ' active' : '')}
                       onClick={() => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'singleRow', false)
+                        updateDescriptionProp('singleRow', false)
                       }}
                     >
                       <Card>
@@ -168,7 +168,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
                     <select
                       onChange={e => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+                        updateDescriptionProp('seriesKey', e.target.value)
                       }}
                       defaultValue={configureData.dataDescription.seriesKey}
                     >
@@ -184,7 +184,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <div className='mb-1'>Which property in the dataset represents the values for the category/date axis or map geography?</div>
                     <select
                       onChange={e => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'xKey', e.target.value)
+                        updateDescriptionProp('xKey', e.target.value)
                       }}
                       defaultValue={configureData.dataDescription.xKey}
                     >
@@ -207,7 +207,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                               onClick={() => {
                                 let newValueKeys = configureData.dataDescription.valueKeysTallSupport
                                 newValueKeys.splice(index, 1)
-                                updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', newValueKeys)
+                                updateDescriptionProp('valueKeysTallSupport', newValueKeys)
                               }}
                             >
                               X
@@ -219,7 +219,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <select
                       onChange={e => {
                         if (e.target.value && (!configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(e.target.value) === -1)) {
-                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
+                          updateDescriptionProp('valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
                         }
                       }}
                     >
@@ -244,7 +244,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                               onClick={() => {
                                 let newIgnoredKeys = configureData.dataDescription.ignoredKeys
                                 newIgnoredKeys.splice(index, 1)
-                                updateDescriptionProp(visualizationKey, dataKey, 'ignoredKeys', newIgnoredKeys)
+                                updateDescriptionProp('ignoredKeys', newIgnoredKeys)
                               }}
                             >
                               X
@@ -256,7 +256,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <select
                       onChange={e => {
                         if (e.target.value) {
-                          updateDescriptionProp(visualizationKey, dataKey, 'ignoredKeys', [...(configureData.dataDescription.ignoredKeys || []), e.target.value])
+                          updateDescriptionProp('ignoredKeys', [...(configureData.dataDescription.ignoredKeys || []), e.target.value])
                         }
                         e.target.value = ''
                       }}

package/components/ui/Icon.tsx

@@ -33,6 +33,8 @@ import iconPlus from '../../assets/icon-plus.svg'
 import iconMinus from '../../assets/icon-minus.svg'
 import iconTable from '../../assets/icon-table.svg'
 import iconSankey from '../../assets/icon-sankey.svg'
+import iconRotateLeft from '../../assets/icon-rotate-left.svg'
+import iconCommand from '../../assets/icon-command.svg'
 
 import '../../styles/v2/components/icon.scss'
 
@@ -68,7 +70,9 @@ const iconHash = {
   'filtered-text': iconText,
   'filter-dropdowns': iconDropdowns,
   table: iconTable,
-  sankey: iconSankey
+  sankey: iconSankey,
+  rotateLeft: iconRotateLeft,
+  command: iconCommand
 }
 
 export const ICON_TYPES = Object.keys(iconHash)

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

@@ -0,0 +1,21 @@
+// 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'
+
+export const coveUpdateWorker = config => {
+  let genConfig = config
+
+  genConfig = update_4_24_3(genConfig)
+  genConfig = update_4_24_4(genConfig)
+  genConfig = update_4_24_5(genConfig)
+
+  return genConfig
+}
+
+const asyncWorker = async config => {
+  return await coveUpdateWorker(config)
+}
+
+export default asyncWorker

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

@@ -1,7 +1,6 @@
 export default function useDataVizClasses(config, viewport = null) {
   const { legend } = config
   let lineDatapointClass = ''
-  let barBorderClass = ''
 
   if (config.lineDatapointStyle === 'hover') {
     lineDatapointClass = ' chart-line--hover'
@@ -9,9 +8,6 @@ export default function useDataVizClasses(config, viewport = null) {
   if (config.lineDatapointStyle === 'always show') {
     lineDatapointClass = ' chart-line--always'
   }
-  if (config.barHasBorder === 'false') {
-    barBorderClass = ' chart-bar--no-border'
-  }
 
   let innerContainerClasses = ['cove-component__inner']
   let contentClasses = ['cove-component__content']
@@ -69,5 +65,5 @@ export default function useDataVizClasses(config, viewport = null) {
     div: [legend?.position === 'bottom' && legend?.singleRow ? 'shape-container single-row' : 'shape-container']
   }
 
-  return { innerContainerClasses, contentClasses, barBorderClass, lineDatapointClass, sparkLineStyles, legendClasses }
+  return { innerContainerClasses, contentClasses, lineDatapointClass, sparkLineStyles, legendClasses }
 }

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.3.ts

@@ -0,0 +1,56 @@
+import { ConfigRow } from '@cdc/dashboard/src/types/ConfigRow'
+import _ from 'lodash'
+
+const remapDashboardRows = config => {
+  if (config.type === 'dashboard') {
+    config.rows = config.rows.map(row => {
+      let newRow = undefined
+      if (row.columns === undefined) {
+        newRow = {} as ConfigRow
+        const newColumns = row.map(column => {
+          newRow.uuid = column.uuid
+          newRow.toggle = column.toggle
+          newRow.equalHeight = column.equalHeight
+          return _.pick(column, 'equalHeight', 'width', 'hide', 'widget', 'uuid')
+        })
+        newRow.columns = newColumns
+      }
+      return newRow ?? row
+    })
+  }
+}
+
+const chartUpdates = newConfig => {
+  if (newConfig.type === 'chart') {
+    if (newConfig.xAxis.sortDates) {
+      newConfig.xAxis.type = 'date-time'
+    }
+    newConfig.table.download = true
+
+    delete newConfig.xAxis.sortDates
+  }
+}
+
+const mapUpdates = newConfig => {
+  if (newConfig.type === 'map') {
+    newConfig.table.download = true
+    newConfig.general.showDownloadButton = true
+    // expandDataTable should be removed in the future....
+    newConfig.general.expandDataTable = newConfig.table.expanded
+  }
+}
+
+const update_4_24_3 = config => {
+  const ver = '4.24.3'
+
+  const newConfig = _.cloneDeep(config)
+
+  remapDashboardRows(newConfig)
+  chartUpdates(newConfig)
+  mapUpdates(newConfig)
+
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_24_3

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.3",
+  "version": "4.24.5",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -31,5 +31,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9c7ef7ca74f2d2a1e04d923b133fe0fc557a62bf"
+  "gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95"
 }