@cdc/core 4.25.5-1 → 4.25.6-1

package/components/NestedDropdown/NestedDropdown.tsx

@@ -50,7 +50,7 @@ const Options: React.FC<{
         onKeyUp={handleKeyUp}
         className={`nested-dropdown-group-${filterIndex}`}
       >
-        <span className={'font-weight-bold'}>{label} </span>
+        <span className={'font-weight-bold fw-bold'}>{label} </span>
         {
           <span className='list-arrow' aria-hidden='true'>
             {isTierOneExpanded ? (
@@ -241,7 +241,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
       setInputHasFocus(false)
       setIsListOpened(false)
     } else {
-      ;(e.relatedTarget as HTMLElement).focus()
+      ; (e.relatedTarget as HTMLElement).focus()
     }
   }
 
@@ -302,23 +302,23 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
         >
           {filterOptions.length
             ? filterOptions.map(([group, subgroup], index) => {
-                const [groupValue, groupText] = group
-                const groupTextValue = String(groupText || groupValue)
-                return (
-                  <Options
-                    key={groupTextValue + '_' + index}
-                    handleBlur={handleOnBlur}
-                    subOptions={subgroup}
-                    filterIndex={filterIndex}
-                    label={groupTextValue}
-                    handleSubGroupSelect={subGroupValue => {
-                      chooseSelectedSubGroup(groupValue, subGroupValue)
-                    }}
-                    userSelectedLabel={activeGroup + activeSubGroup}
-                    userSearchTerm={userSearchTerm || ''}
-                  />
-                )
-              })
+              const [groupValue, groupText] = group
+              const groupTextValue = String(groupText || groupValue)
+              return (
+                <Options
+                  key={groupTextValue + '_' + index}
+                  handleBlur={handleOnBlur}
+                  subOptions={subgroup}
+                  filterIndex={filterIndex}
+                  label={groupTextValue}
+                  handleSubGroupSelect={subGroupValue => {
+                    chooseSelectedSubGroup(groupValue, subGroupValue)
+                  }}
+                  userSelectedLabel={activeGroup + activeSubGroup}
+                  userSearchTerm={userSearchTerm || ''}
+                />
+              )
+            })
             : 'There are no matching items'}
         </ul>
       </div>

package/helpers/cove/number.ts

@@ -1,3 +1,5 @@
+import { VisualizationType } from './../../../../node_modules/@cdc/chart/src/types/ChartConfig'
+import { Visualization } from '@cdc/core/types/Visualization'
 import numberFromString from '@cdc/core/helpers/numberFromString'
 
 const abbreviateNumber = num => {
@@ -54,7 +56,6 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null, addCol
       bottomSuffix,
       bottomComas,
       commas,
-      onlyShowTopPrefixSuffix,
       prefix,
       rightPrefix,
       rightRoundTo,
@@ -63,6 +64,7 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null, addCol
       suffix
     }
   } = config
+  const { inlineLabel } = config.yAxis || {}
 
   // destructure Additional Col dataformat values
   const { addColCommas, addColRoundTo, addColPrefix, addColSuffix } = addColParams || {}
@@ -154,7 +156,7 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null, addCol
     num = abbreviateNumber(parseFloat(num))
   }
 
-  if (!onlyShowTopPrefixSuffix) {
+  if (!inlineLabel || addColPrefix) {
     if (addColPrefix !== undefined && axis === 'left') {
       result = addColPrefix + result
     } else {
@@ -174,7 +176,7 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null, addCol
 
   result += num
 
-  if (!onlyShowTopPrefixSuffix) {
+  if (!inlineLabel || addColSuffix) {
     if (addColSuffix !== undefined && axis === 'left') {
       result += addColSuffix
     } else {

package/helpers/coveUpdateWorker.ts

@@ -14,6 +14,8 @@ import update_4_24_11 from './ver/4.24.11'
 import update_4_25_1 from './ver/4.25.1'
 import update_4_25_3 from './ver/4.25.3'
 import update_4_25_4 from './ver/4.25.4'
+import update_4_25_6 from './ver/4.25.6'
+import update_4_25_7 from './ver/4.25.7'
 
 export const coveUpdateWorker = (config, multiDashboardVersion?) => {
   let genConfig = config
@@ -31,6 +33,8 @@ export const coveUpdateWorker = (config, multiDashboardVersion?) => {
     ['4.25.1', update_4_25_1],
     ['4.25.3', update_4_25_3],
     ['4.25.4', update_4_25_4],
+    ['4.25.6', update_4_25_6],
+    ['4.25.7', update_4_25_7]
   ]
 
   versions.forEach(([version, updateFunction, alwaysRun]: [string, UpdateFunction, boolean?]) => {

package/helpers/formatConfigBeforeSave.ts

@@ -5,29 +5,12 @@ import { removeDashboardFilter } from '@cdc/dashboard/src/helpers/removeDashboar
 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]
-          delete 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]
+      if (viz.footnotes) {
+        delete config.visualizations[vizKey].footnotes.data
+        delete config.visualizations[vizKey].footnotes.formattedData
       }
     })
   }
@@ -64,23 +47,27 @@ const cleanDashboardData = (config: DashboardConfig) => {
 
 export const cleanSharedFilters = (config: DashboardConfig) => {
   if (config.dashboard?.sharedFilters) {
-
     const recursiveRemoveFilters = (sharedFilters, visualizations: Record<string, AnyVisualization>) => {
-      const usedFilters = _.uniq(Object.values(visualizations).reduce((acc, viz) => {
-        if(viz.type === 'dashboardFilters') {
-          acc = acc.concat(viz.sharedFilterIndexes)
-        }
-        return acc
-      }, []))
-      for(let index = 0; index < sharedFilters.length; index++) {
+      const usedFilters = _.uniq(
+        Object.values(visualizations).reduce((acc, viz) => {
+          if (viz.type === 'dashboardFilters') {
+            acc = acc.concat(viz.sharedFilterIndexes)
+          }
+          return acc
+        }, [])
+      )
+      for (let index = 0; index < sharedFilters.length; index++) {
         const filter = sharedFilters[index]
-        if(!usedFilters.includes(index)) {
-
-          const [newSharedFilters, newVisualizations] = removeDashboardFilter(index, config.dashboard.sharedFilters, config.visualizations)
+        if (!usedFilters.includes(index)) {
+          const [newSharedFilters, newVisualizations] = removeDashboardFilter(
+            index,
+            config.dashboard.sharedFilters,
+            config.visualizations
+          )
           config.dashboard.sharedFilters = newSharedFilters
           config.visualizations = newVisualizations
           recursiveRemoveFilters(newSharedFilters, newVisualizations)
-          break;
+          break
         } else {
           delete config.dashboard.sharedFilters[index].active
           if (filter.subGrouping) delete config.dashboard.sharedFilters[index].subGrouping.active

package/helpers/updateFieldFactory.ts

@@ -18,6 +18,7 @@ export const updateFieldFactory =
     const isArray = Array.isArray(config[section])
 
     let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
+    if (!fieldName && !legacy) sectionValue = newValue
 
     if (null !== subsection) {
       if (isArray) {

package/helpers/ver/4.25.4.ts

@@ -21,11 +21,88 @@ const migrateTableGeneralSettings = config => {
   }
 }
 
+const hasMultipleWidgetColumns = row => {
+  const multipleColumns = row.columns.filter(column => column.widget).length > 1
+  return multipleColumns && !row.toggle
+}
+
+const newMarkupIncludeVisualization = (uid, footnotes) => {
+  return {
+    filters: [],
+    filterBehavior: 'Filter Change',
+    footnotes,
+    uid,
+    type: 'markup-include',
+    visualizationType: 'markup-include',
+    contentEditor: {
+      inlineHTML: '',
+      markupVariables: [],
+      showHeader: false,
+      srcUrl: '',
+      title: '',
+      useInlineHTML: false
+    },
+    theme: 'theme-blue',
+    visual: {
+      border: false,
+      accent: false,
+      background: false,
+      hideBackgroundColor: false,
+      borderColorTheme: false
+    }
+  }
+}
+
+const makeNewRow = uuid => {
+  return { columns: [{ width: 12, widget: uuid }] }
+}
+
+export const moveFootnotesToVizLevel = config => {
+  if (config.type === 'dashboard') {
+    const newRowsToAdd = [
+      /*old row index*/
+      /*new row object*/
+    ]
+    config.rows.forEach((row, index) => {
+      if (!row.footnotesId) return
+      const makeNewFootnotesRow = hasMultipleWidgetColumns(row)
+      const footnotesId = row.footnotesId
+      const footnote = _.pick(config.visualizations[footnotesId], ['dataKey', 'dynamicFootnotes', 'staticFootnotes'])
+      if (makeNewFootnotesRow) {
+        const uuid = `markup-include-${Date.now()}${index}`
+        const newRow = makeNewRow(uuid)
+        const newFootnotesViz = newMarkupIncludeVisualization(uuid, footnote)
+        config.visualizations[uuid] = newFootnotesViz
+        newRowsToAdd.push([index, newRow])
+      } else {
+        row.columns.forEach(column => {
+          if (!column.widget) return
+          const footnotes = config.visualizations[column.widget].footnotes
+          if (typeof footnotes === 'string') {
+            // move legacy footnotes
+            config.visualizations[column.widget].legacyFootnotes = footnotes
+          }
+          config.visualizations[column.widget].footnotes = footnote
+        })
+      }
+
+      delete config.visualizations[footnotesId]
+      delete row.footnotesId
+    })
+    if (newRowsToAdd.length) {
+      newRowsToAdd.forEach(([oldRowIndex, newRow]) => {
+        config.rows.splice(oldRowIndex + 1, 0, newRow)
+      })
+    }
+  }
+}
+
 const update_4_25_4 = config => {
   const ver = '4.25.4'
   const newConfig = _.cloneDeep(config)
   makeChartLegendsUnified(newConfig)
   migrateTableGeneralSettings(newConfig)
+  moveFootnotesToVizLevel(newConfig)
   newConfig.version = ver
   return newConfig
 }

package/helpers/ver/4.25.6.ts

@@ -0,0 +1,36 @@
+import _ from 'lodash'
+
+// *NOTE: This ends support for only showing the top prefix
+export const changeOnlyShowTopSuffixToInlineLabel = config => {
+  if (config.type === 'chart') {
+    if (!config.dataFormat?.suffix) return config
+    if (!config.dataFormat.onlyShowTopPrefixSuffix) return config
+
+    delete config.dataFormat.onlyShowTopPrefixSuffix
+
+    if (!config.yAxis) config.yAxis = {}
+
+    if (!config.yAxis?.inlineLabel) {
+      config.yAxis.inlineLabel = config.dataFormat.suffix
+    }
+
+    config.dataFormat.suffix = ''
+
+    return config
+  } else if (config.type === 'dashboard') {
+    Object.values(config.visualizations).forEach(visualization => {
+      changeOnlyShowTopSuffixToInlineLabel(visualization)
+    })
+    return config
+  }
+}
+
+const update_4_25_6 = config => {
+  const ver = '4.25.6'
+  const newConfig = _.cloneDeep(config)
+  changeOnlyShowTopSuffixToInlineLabel(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_6

package/helpers/ver/4.25.7.ts

@@ -0,0 +1,26 @@
+import _ from 'lodash'
+
+export const updatePreliminaryDataSeriesKeys = config => {
+  if (config.type === 'chart') {
+    ;(config.preliminaryData || []).forEach(pd => {
+      if (!pd.seriesKeys) {
+        pd.seriesKeys = pd.seriesKey ? [pd.seriesKey] : []
+        delete pd.seriesKey
+      }
+    })
+  } else if (config.type === 'dashboard') {
+    Object.values(config.visualizations).forEach(visualization => {
+      updatePreliminaryDataSeriesKeys(visualization)
+    })
+  }
+}
+
+const update_4_25_7 = config => {
+  const ver = '4.25.7'
+  const newConfig = _.cloneDeep(config)
+  updatePreliminaryDataSeriesKeys(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_7

package/helpers/ver/tests/4.25.4.test.ts

@@ -1,5 +1,5 @@
 import { expect, describe, it } from 'vitest'
-import { makeChartLegendsUnified } from '../4.25.4'
+import { makeChartLegendsUnified, moveFootnotesToVizLevel } from '../4.25.4'
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
 
@@ -22,3 +22,68 @@ describe('makeChartLegendsUnified(config) ', () => {
     expect(mockConfig.visualizations['2'].legend?.unified).toBe(true)
   })
 })
+
+describe('moveFootnotesToVizLevel', () => {
+  it('moves footnotes to visualization level', () => {
+    const toMigrate = {
+      rows: [
+        {
+          columns: [
+            {
+              width: 12,
+              widget: 'table123'
+            },
+            {},
+            {}
+          ],
+          footnotesId: 'footnotes123'
+        }
+      ],
+      visualizations: {
+        table123: {},
+        footnotes123: {
+          uid: 'footnotes123',
+          type: 'footnotes',
+          visualizationType: 'footnotes',
+          dataKey: 'valid-data-chart.csv',
+          dynamicFootnotes: {
+            symbolColumn: 'Race',
+            textColumn: 'Age-adjusted rate'
+          }
+        }
+      },
+      type: 'dashboard',
+      version: '4.25.4'
+    }
+
+    const expectedMigration = {
+      rows: [
+        {
+          columns: [
+            {
+              width: 12,
+              widget: 'table123'
+            },
+            {},
+            {}
+          ]
+        }
+      ],
+      visualizations: {
+        table123: {
+          footnotes: {
+            dataKey: 'valid-data-chart.csv',
+            dynamicFootnotes: {
+              symbolColumn: 'Race',
+              textColumn: 'Age-adjusted rate'
+            }
+          }
+        }
+      },
+      type: 'dashboard',
+      version: '4.25.4'
+    }
+    moveFootnotesToVizLevel(toMigrate)
+    expect(toMigrate).toEqual(expectedMigration)
+  })
+})

package/helpers/ver/tests/4.25.6.test.ts

@@ -0,0 +1,84 @@
+import { expect, describe, it } from 'vitest'
+import { changeOnlyShowTopSuffixToInlineLabel } from '../4.25.6'
+
+describe('changeOnlyShowTopSuffixToInlineLabel(config) ', () => {
+  it("should'nt change config if no suffix", () => {
+    const config = {
+      type: 'chart',
+      dataFormat: {
+        onlyShowTopPrefixSuffix: true,
+        suffix: ''
+      }
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig).toEqual(config)
+  })
+  it("should't change suffix if onlyShowTopPrefixSuffix is false", () => {
+    const config = {
+      type: 'chart',
+      dataFormat: {
+        onlyShowTopPrefixSuffix: false,
+        suffix: 'test'
+      }
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig).toEqual(config)
+  })
+  it('should change suffix to inlineLabel if onlyShowTopPrefixSuffix is true', () => {
+    const config = {
+      type: 'chart',
+      dataFormat: {
+        onlyShowTopPrefixSuffix: true,
+        suffix: 'test'
+      }
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig.yAxis.inlineLabel).toBe('test')
+    expect(newConfig.dataFormat.onlyShowTopPrefixSuffix).toBe(undefined)
+    expect(newConfig.dataFormat.suffix).toBe('')
+  })
+  it("should't overwrite existing yAxis inlineLabel", () => {
+    const config = {
+      type: 'chart',
+      dataFormat: {
+        onlyShowTopPrefixSuffix: true,
+        suffix: 'test'
+      },
+      yAxis: {
+        inlineLabel: 'test2'
+      }
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig.yAxis.inlineLabel).toBe('test2')
+    expect(newConfig.dataFormat.onlyShowTopPrefixSuffix).toBe(undefined)
+    expect(newConfig.dataFormat.suffix).toBe('')
+  })
+  it('should change suffix to inlineLabel for dashboard visualizations', () => {
+    const config = {
+      type: 'dashboard',
+      visualizations: [
+        {
+          type: 'chart',
+          dataFormat: {
+            onlyShowTopPrefixSuffix: true,
+            suffix: 'test'
+          }
+        },
+        {
+          type: 'chart',
+          dataFormat: {
+            onlyShowTopPrefixSuffix: true,
+            suffix: 'test2'
+          }
+        }
+      ]
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig.visualizations[0].yAxis.inlineLabel).toBe('test')
+    expect(newConfig.visualizations[0].dataFormat.onlyShowTopPrefixSuffix).toBe(undefined)
+    expect(newConfig.visualizations[0].dataFormat.suffix).toBe('')
+    expect(newConfig.visualizations[1].yAxis.inlineLabel).toBe('test2')
+    expect(newConfig.visualizations[1].dataFormat.onlyShowTopPrefixSuffix).toBe(undefined)
+    expect(newConfig.visualizations[1].dataFormat.suffix).toBe('')
+  })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.25.5-1",
+  "version": "4.25.6-1",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -21,19 +21,21 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "dompurify": "^3.2.6",
     "html2canvas": "^1.4.1",
-    "json-edit-react": "^1.12.0",
+    "json-edit-react": "^1.27.0",
     "prop-types": "^15.8.1",
-    "react-accessible-accordion": "^5.0.0",
+    "react-accessible-accordion": "^5.0.1",
     "react-select": "^5.3.1",
     "react-tooltip": "5.8.2-beta.3",
-    "use-debounce": "^6.0.1"
+    "sass": "^1.89.2",
+    "use-debounce": "^10.0.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "1d0a6e716bc113e6bea3636fcae90ebf2d19bb5c",
+  "gitHead": "ac45ee0f1d6a4045648c4e083992fc091795e084",
   "devDependencies": {
     "sass": "^1.79.4"
   }

package/styles/_global.scss

@@ -193,8 +193,4 @@ section.footnotes {
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: pointer;
-  &:focus-visible {
-    outline: 2px dashed var(--colors-blue-vivid-60, #005ea2) !important;
-    outline-offset: 2px;
-  }
 }

package/styles/filters.scss

@@ -93,10 +93,6 @@ div.single-filters {
     &:focus:not(:focus-visible) {
       outline: none !important;
     }
-    &:focus-visible {
-      outline: 2px dashed var(--colors-blue-vivid-60, #005ea2) !important;
-      outline-offset: 3px;
-    }
 
     &.tab--active {
       font-weight: 500;

package/types/Axis.ts

@@ -17,6 +17,7 @@ export type Axis = {
   hideAxis?: boolean
   hideLabel?: boolean
   hideTicks?: boolean
+  inlineLabel?: string
   label?: string
   labelOffset?: number
   labelPlacement?: string
@@ -50,4 +51,5 @@ export type Axis = {
   axisBBox: number
   maxValue: string
   sortByRecentDate: boolean
+  brushActive: boolean
 }

package/types/DataSet.ts

@@ -0,0 +1,14 @@
+import { ConfigureData } from '@cdc/core/types/ConfigureData'
+
+export type DataSet = ConfigureData & {
+  dataFileFormat?: string
+  dataFileName?: string
+  dataFileSize?: number
+  preview?: boolean
+  dataUrl: string
+  runtimeDataUrl: string
+  dataFileSourceType: string
+  loadQueryParam?: string // fetched from the browser's query string and appended to the dataUrl on load.
+}
+
+export type Datasets = Record<string, DataSet>

package/types/Footnotes.ts

@@ -1,11 +1,14 @@
-import { Visualization } from './Visualization'
+import { VizFilter } from './VizFilter'
 
 export type Footnote = {
   symbol?: string
   text: string
 }
 
-type Footnotes = Visualization & {
+type Footnotes = {
+  filters?: VizFilter[]
+  dataKey?: string
+  data?: Object[]
   dynamicFootnotes?: {
     symbolColumn?: string
     textColumn: string

package/types/Table.ts

@@ -8,6 +8,7 @@ export type Table = {
   cellMinWidth?: number
   collapsible?: boolean
   dateDisplayFormat?: string
+  showNonGeoData?: boolean
   download?: boolean
   downloadVisibleDataOnly?: boolean
   downloadImageButton?: boolean

package/types/Visualization.ts

@@ -10,6 +10,7 @@ import { FilterBehavior } from './FilterBehavior'
 import { General } from './General'
 import { Runtime } from './Runtime'
 import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
+import Footnotes from './Footnotes'
 
 // This was originally created as a catchall for the different types of visualizations.
 // Currently it includes properties that ares specific to one Visualization type.
@@ -26,7 +27,6 @@ type DeprecatedVisualizationType = {
   filters: VizFilter[]
   general: General
   legend: Legend
-  multiDashboards?: any[]
   newViz: boolean
   isResponsiveTicks: boolean
   openModal?: boolean
@@ -37,17 +37,7 @@ type DeprecatedVisualizationType = {
   table: Table
   theme: string
   title: string
-  type:
-    | 'dashboard'
-    | 'chart'
-    | 'footnotes'
-    | 'map'
-    | 'data-bite'
-    | 'waffle-chart'
-    | 'markup-include'
-    | 'filtered-text'
-    | 'table'
-    | 'navigation'
+  type: 'chart' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'table' | 'navigation'
   usesSharedFilter?: any
   visualizationSubType: string
   visualizationType: string
@@ -65,6 +55,7 @@ export type CommonVisualizationProperties = Partial<StatefulProperties> & {
   uid?: string | number // this is the actual key of the visualization object
   visualizationType?: string
   filterBehavior: FilterBehavior
+  footnotes?: Footnotes
 } & Partial<ConfigureData>
 
 export type Visualization = DeprecatedVisualizationType & CommonVisualizationProperties

package/types/VizFilter.ts

@@ -30,6 +30,9 @@ export type GeneralFilter = FilterBase & {
   setByQueryParameter: string
   subGrouping: SubGrouping
   type: 'url'
+  filterFootnotes?: boolean
+  defaultValue?: string
+  resetLabel?: string
 }
 
 export type MultiSelectFilter = {