@cdc/core 4.24.2 → 4.24.4

package/helpers/tests/updateFieldFactory.test.ts

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

package/helpers/updateFieldFactory.ts

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

package/helpers/useDataVizClasses.js

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

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

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

package/styles/_data-table.scss

@@ -28,10 +28,12 @@ div.data-table-heading {
     z-index: 2;
     position: relative;
   }
+  @include breakpoint(xs) {
+    font-size: $font-small + 0.2em;
+  }
 }
 
 table.horizontal {
-
   th,
   td {
     min-width: 200px;
@@ -103,18 +105,6 @@ table.data-table {
       background-size: 10px 5px;
     }
 
-    /* doesnt work
-    th.sort-asc,
-    td.sort-asc {
-      background-image: url(../assets/icon-caret-filled-up.svg);
-    }
-
-    th.sort-desc,
-    td.sort-desc {
-      background-image: url(../assets/icon-caret-filled-down.svg);
-    }
-    */
-
     // format the white triangle sort icon in data table headers
     .sort-icon {
       fill: white;
@@ -152,6 +142,7 @@ table.data-table {
 
   td {
     padding: 0.3em 0.7em;
+
     border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
 
@@ -164,6 +155,10 @@ table.data-table {
     &:last-child {
       border-right: 0 !important;
     }
+
+    @include breakpoint(xs) {
+      font-size: $font-small;
+    }
   }
   tr {
     & > * {

package/styles/_global.scss

@@ -38,7 +38,11 @@ strong {
   border: 0 !important;
   display: flex;
 }
-
+.cdcdataviz-sr-only-focusable:focus {
+  width: fit-content;
+  margin-bottom: 0.5em;
+  margin-left: 1em;
+}
 .inline-icon {
   width: 1em !important;
   height: auto !important;
@@ -80,9 +84,9 @@ strong {
   }
   &.danger {
     background-color: $red;
-    padding: 0em 0.6em 0.0em;
+    padding: 0em 0.6em 0em;
     height: 1.6em;
-    font-size: 0.8   em;
+    font-size: 0.8 em;
     color: #fff;
     &:hover {
       background-color: darken($red, 5%);
@@ -193,4 +197,3 @@ section.footnotes {
 .margin-left-href {
   margin-left: 15px;
 }
-

package/styles/_variables.scss

@@ -61,3 +61,6 @@ $amber-primary: #fbab18 !default;
 $amber-secondary: #ffd54f !default;
 $amber-tertiary: #ffecb3 !default;
 $amber-quaternary: #fff7e1 !default;
+
+/// Fonts
+$font-small: 0.7em;

package/styles/base.scss

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

package/styles/v2/base/index.scss

@@ -1,4 +1,4 @@
-//@import "reset"; TODO: Enable after cove refactor
+// @import 'reset'; //TODO: Enable after cove refactor
 @import 'typography';
 
 @import 'general';

package/styles/v2/components/ui/tooltip.scss

@@ -27,27 +27,6 @@
     }
   }
 
-  // editor-panel
-  .editor-panel {
-    .cove-label + .cove-tooltip {
-      top: 1px;
-      margin-left: 0.5rem;
-      font-size: 0.75rem;
-    }
-
-    .cove-accordion__button .cove-tooltip {
-      display: inline-flex;
-      right: 1.5rem;
-      line-height: inherit;
-    }
-
-    .cove-list-group__item .cove-tooltip {
-      width: 100%;
-      display: block;
-      line-height: inherit;
-    }
-  }
-
   // begin actual tooltip styles
   .react-tooltip,
   .tooltip {

package/types/Axis.ts

@@ -19,10 +19,13 @@ export type Axis = {
   label?: string
   labelOffset?: number
   labelPlacement?: string
+  manual?: boolean
+  manualStep?: number
   max?: string
   maxTickRotation?: number
   min?: string
   numTicks?: number
+  paddingPercent?: number
   rightAxisSize?: number
   rightHideAxis?: boolean
   rightHideLabel?: boolean

package/types/BaseVisualizationType.ts

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

package/types/ConfidenceInterval.ts

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

package/types/ConfigureData.ts

@@ -0,0 +1,8 @@
+import { DataDescription } from './DataDescription'
+
+export type ConfigureData = {
+  dataDescription: Partial<DataDescription>
+  data: Object[]
+  formattedData?: Object[]
+  dataKey: string // This is the key of the dataset in the config
+}

package/types/DataDescription.ts

@@ -0,0 +1,9 @@
+export type DataDescription = {
+  series: boolean
+  horizontal: boolean
+  singleRow: boolean
+  seriesKey: string
+  xKey: string
+  valueKeysTallSupport: string[]
+  ignoredKeys: string[]
+}

package/types/Legend.ts

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

package/types/Region.ts

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

package/types/Runtime.ts

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

package/types/Table.ts

@@ -17,5 +17,6 @@ export type Table = {
   showDownloadPdfButton?: boolean
   downloadImageButton?: boolean
   downloadPdfButton?: boolean
-  dateDisplayFormat: string
+  dateDisplayFormat?: string
+  fontSize: 'small' | 'medium' | 'large'
 }

package/types/UpdateFieldFunc.ts

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

package/types/Visualization.ts

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

package/components/DataTable/components/SkipNav.tsx

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

package/helpers/cove/date.js

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

package/helpers/ver/4.23.js

@@ -1,10 +0,0 @@
-const update_4_23 = async config => {
-  const ver = 4.23
-
-  let newConfig = { ...config }
-
-  newConfig.validated = ver
-  return newConfig
-}
-
-export default update_4_23