@cdc/core 4.24.4 → 4.24.5

package/components/Filters.jsx

@@ -8,30 +8,57 @@ import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryString
 // Third Party
 import PropTypes from 'prop-types'
 
+export const filterStyleOptions = ['dropdown', 'pill', 'tab', 'tab bar']
+
+export const filterOrderOptions = [
+  {
+    label: 'Ascending Alphanumeric',
+    value: 'asc'
+  },
+  {
+    label: 'Descending Alphanumeric',
+    value: 'desc'
+  },
+  {
+    label: 'Custom',
+    value: 'cust'
+  }
+]
+
+export const handleSorting = singleFilter => {
+  const { order } = singleFilter
+
+  const sortAsc = (a, b) => {
+    return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+  }
+
+  const sortDesc = (a, b) => {
+    return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+  }
+
+  if (!order || order === '') {
+    singleFilter.order = 'asc'
+  }
+
+  if (order === 'desc') {
+    singleFilter.values = singleFilter.values.sort(sortDesc)
+  }
+
+  if (order === 'asc') {
+    singleFilter.values = singleFilter.values.sort(sortAsc)
+  }
+  return singleFilter
+}
+
+const hasStandardFilterBehavior = ['chart', 'table']
+
 export const useFilters = props => {
   const [showApplyButton, setShowApplyButton] = useState(false)
 
   // Desconstructing: notice, adding more descriptive visualizationConfig name over config
   // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
-  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, filterData } = props
-  const { type, filterBehavior, filters } = visualizationConfig
-
-  const filterStyleOptions = ['dropdown', 'pill', 'tab', 'tab bar']
-
-  const filterOrderOptions = [
-    {
-      label: 'Ascending Alphanumeric',
-      value: 'asc'
-    },
-    {
-      label: 'Descending Alphanumeric',
-      value: 'desc'
-    },
-    {
-      label: 'Custom',
-      value: 'cust'
-    }
-  ]
+  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, filterData, getUniqueValues } = props
+  const { type, data } = visualizationConfig
 
   /**
    * Re-orders a filter based on two indices and updates the runtime filters array and filters state
@@ -51,7 +78,7 @@ export const useFilters = props => {
     const [movedItem] = updatedValues.splice(idx1, 1)
     updatedValues.splice(idx2, 0, movedItem)
 
-    const filtersCopy = visualizationConfig.type === 'chart' ? [...visualizationConfig.filters] : [...filteredData]
+    const filtersCopy = hasStandardFilterBehavior.includes(visualizationConfig.type) ? [...visualizationConfig.filters] : [...filteredData]
     const filterItem = { ...filtersCopy[filterIndex] }
 
     // Overwrite filterItem.values since thats what we map through in the editor panel
@@ -99,7 +126,7 @@ export const useFilters = props => {
     }
 
     // If we're on a chart and not using the apply button
-    if (visualizationConfig.type === 'chart' && visualizationConfig.filterBehavior === 'Filter Change') {
+    if (hasStandardFilterBehavior.includes(visualizationConfig.type) && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(filterData(newFilters, excludedData))
     }
   }
@@ -127,7 +154,7 @@ export const useFilters = props => {
       setFilteredData(newFilters, excludedData)
     }
 
-    if (type === 'chart') {
+    if (hasStandardFilterBehavior.includes(visualizationConfig.type)) {
       setFilteredData(filterData(newFilters, excludedData))
     }
 
@@ -139,19 +166,33 @@ export const useFilters = props => {
     e.preventDefault()
 
     // reset to first item in values array.
-    newFilters.map(filter => {
-      filter = handleSorting(filter)
-      filter.active = filter.values[0]
-      return filter
+    let needsQueryUpdate = false
+    const queryParams = getQueryParams()
+    newFilters.forEach((filter, i) => {
+      if(!filter.values || filter.values.length === 0){
+        filter.values = getUniqueValues(data, filter.columnName)
+      }
+      newFilters[i].active = handleSorting(filter).values[0]
+
+
+      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
+        queryParams[filter.setByQueryParameter] = filter.active
+        needsQueryUpdate = true
+      }
     })
 
+    if (needsQueryUpdate) {
+      updateQueryString(queryParams)
+    }
+
+    setConfig({ ...visualizationConfig, filters: newFilters })
+
     if (type === 'map') {
       setFilteredData(newFilters, excludedData)
     } else {
       setFilteredData(filterData(newFilters, excludedData))
     }
 
-    setConfig({ ...visualizationConfig, filters: newFilters })
   }
 
   const filterConstants = {
@@ -161,31 +202,6 @@ export const useFilters = props => {
     applyText: 'Select the apply button to update the visualization information.'
   }
 
-  const handleSorting = singleFilter => {
-    const { order } = singleFilter
-
-    const sortAsc = (a, b) => {
-      return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-    }
-
-    const sortDesc = (a, b) => {
-      return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-    }
-
-    if (!order || order === '') {
-      singleFilter.order = 'asc'
-    }
-
-    if (order === 'desc') {
-      singleFilter.values = singleFilter.values.sort(sortDesc)
-    }
-
-    if (order === 'asc') {
-      singleFilter.values = singleFilter.values.sort(sortAsc)
-    }
-    return singleFilter
-  }
-
   // prettier-ignore
   return {
     handleApplyButton,
@@ -202,8 +218,8 @@ export const useFilters = props => {
 }
 
 const Filters = props => {
-  const { config: visualizationConfig, filteredData, dimensions } = props
-  const { filters, type, general, theme, filterBehavior } = visualizationConfig
+  const { config: visualizationConfig, filteredData, dimensions, getUniqueValues } = props
+  const { filters, type, general, theme, filterBehavior, data } = visualizationConfig
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState('')
   const id = useId()

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

@@ -4,13 +4,15 @@ import React, { forwardRef, useRef } 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'
 
 type VisualizationWrapper = {
-  config: ChartConfig | DataBiteConfig | WaffleChartConfig
-  isEditor: boolean
+  children: React.ReactNode
+  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig
   currentViewport: string
   imageId: string
-  children: React.ReactNode
+  isEditor: boolean
+  showEditorPanel: boolean
 }
 
 const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {

package/components/MediaControls.jsx

@@ -59,7 +59,7 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
-      html2canvas(baseSvg).then(canvas => {
+      html2canvas(baseSvg, {ignoreElements: el => el.className?.indexOf && el.className.search(/download-buttons|download-links|data-table-container/) !== -1}).then(canvas => {
         saveImageAs(canvas.toDataURL(), filename + '.png')
       })
       return

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/styles.scss

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

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

@@ -1,13 +1,15 @@
 // 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'
 
-// 4.23.6 ------------------------------------------------------
 export const coveUpdateWorker = config => {
   let genConfig = config
 
-  // v4.24.3
   genConfig = update_4_24_3(genConfig)
+  genConfig = update_4_24_4(genConfig)
+  genConfig = update_4_24_5(genConfig)
 
   return genConfig
 }

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.4",
+  "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": "1843b4632140d582af6a87606374cbd4fe25ad5c"
+  "gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95"
 }

package/styles/_reset.scss

@@ -141,15 +141,16 @@
     top: -0.5em;
   }
 
-  header sup {
-    /* Allow line breaks using html in the header. */
-    top: initial;
-    line-height: initial;
-  }
-
   sub {
     /* Move the subscripted text down, but only
       half as far down as the superscript moved up */
     bottom: -0.25em;
   }
+
+  ul > li:first-child {
+    margin-top: auto;
+  }
+  ul > li:last-of-type {
+    margin-bottom: auto;
+  }
 }

package/types/Axis.ts

@@ -37,6 +37,8 @@ export type Axis = {
   sortDates?: boolean
   sortKey?: string
   showTargetLabel?: boolean
+  showSuppressedLine: boolean
+  showSuppressedSymbol: boolean
   size?: number
   target?: number
   targetLabel?: string

package/types/Column.ts

@@ -6,6 +6,7 @@ export type Column = {
   roundToPlace: number
   commas: boolean
   dataTable: boolean
+  order?: number
   showInViz: boolean
   startingPoint: string
   series?: string

package/types/Legend.ts

@@ -7,6 +7,7 @@ export type Legend = {
   description: string
   // show or hide the legend
   hide: boolean
+  hideSuppressedLabels: boolean
   highlightOnHover: boolean
   label: string
   lineMode: boolean

package/types/MarkupInclude.ts

@@ -0,0 +1,26 @@
+import { Runtime } from '@cdc/core/types/Runtime'
+import { Variable } from '@cdc/markup-include/src/types/Variable'
+import { Visualization } from './Visualization'
+
+export type MarkupIncludeConfig = Visualization & {
+  contentEditor: {
+    // Changing the base config object creates an infinite loop, nesting it is a workaround
+    inlineHTML: string
+    markupVariables: Variable[]
+    showHeader: boolean
+    srcUrl: string
+    title: string
+    useInlineHTML: boolean
+  }
+  data?: Object[]
+  formattedData: {}
+  newViz?: boolean
+  runtime?: Runtime
+  visual: {
+    border: boolean
+    accent: boolean
+    background: boolean
+    hideBackgroundColor: boolean
+    borderColorTheme: boolean
+  }
+}

package/types/Runtime.ts

@@ -28,4 +28,5 @@ export type Runtime = {
   editorErrorMessage: string
   lineSeriesKeys: any[]
   horizontal: boolean
+  uniqueId: number | string
 }

package/types/Series.ts

@@ -1 +1 @@
-export type Series = { dataKey: string; name: string; axis: string; type: string }[]
+export type Series = { dataKey: string; name: string; axis: string; type: string; tooltip: boolean }[]

package/types/Table.ts

@@ -1,22 +1,23 @@
 export type Table = {
+  caption?: string
   cellMinWidth?: number
-  label?: string
-  show?: boolean
-  showVertical?: boolean
+  collapsible?: boolean
+  dateDisplayFormat?: string
+  download?: boolean
+  downloadImageButton?: boolean
+  downloadPdfButton?: boolean
+  excludeColumns?: string[]
+  expanded?: boolean
+  fontSize: 'small' | 'medium' | 'large'
+  groupBy?: string
+  height?: number
   indexLabel?: string
-  caption?: string
+  label?: string
   limitHeight?: boolean
-  height?: number
-  expanded?: boolean
+  show?: boolean
   showDataTableLink?: boolean
-  showDownloadUrl?: boolean
-  download?: boolean
-  customTableConfig?: boolean
-  excludeColumns?: string[]
   showDownloadImgButton?: boolean
   showDownloadPdfButton?: boolean
-  downloadImageButton?: boolean
-  downloadPdfButton?: boolean
-  dateDisplayFormat?: string
-  fontSize: 'small' | 'medium' | 'large'
+  showDownloadUrl?: boolean
+  showVertical?: boolean
 }

package/types/Visualization.ts

@@ -6,31 +6,38 @@ import { Table } from './Table'
 import { ConfidenceInterval } from './ConfidenceInterval'
 import { BaseVisualizationType } from './BaseVisualizationType'
 import { ConfigureData } from './ConfigureData'
+import { VizFilter } from './VizFilter'
+import { FilterBehavior } from './FilterBehavior'
+import { General } from './General'
 
 export type Visualization = ConfigureData & {
   autoLoad: boolean
-  columns: Record<string, Column>
+  columns: Record<string, Partial<Column>>
   confidenceKeys: ConfidenceInterval
   dataFileName: string
   dataFileSourceType: string
   dataFormat: any
   datasets: Record<string, any>
   editing: boolean
-  general: any
+  filterBehavior: FilterBehavior
+  filters: VizFilter[]
+  general: General
   hide: any[]
   legend: Legend
   multiDashboards?: any[]
   newViz: boolean
   openModal: boolean
-  originalFormattedData: any
   orientation: 'vertical' | 'horizontal'
+  originalFormattedData: any
   series: Series
+  showEditorPanel: boolean
   table: Table
+  theme: string
   title: string
   type: BaseVisualizationType
   uid: string // this is the actual key of the visualization object
   usesSharedFilter: any
-  visualizationType: string
   visualizationSubType: string
+  visualizationType: string
   xAxis: Axis
 }

package/types/VizFilter.ts

@@ -0,0 +1,13 @@
+export type VizFilter = {
+  active: string
+  columnName: string
+  filterStyle: 'tab' | 'pill' | 'tab bar' | 'dropdown'
+  label: string
+  order: 'asc' | 'desc' | 'cust'
+  orderedValues?: string[]
+  queryParameter: string
+  setByQueryParameter: string
+  showDropdown: boolean
+  type: 'url'
+  values: string[]
+}