@cdc/core 4.23.5 → 4.23.7

package/assets/icon-filter-dropdowns.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.31 82.55"><path d="M87.87,5.89H11.35c-1.56,0-2.84,1.28-2.84,2.84v14.78c0,1.56,1.28,2.84,2.84,2.84l76.52-.19c1.56,0,2.84-1.28,2.84-2.84V8.73c0-1.56-1.28-2.84-2.84-2.84ZM25.95,14.33l-5.19,5.19c-.29,.29-.77,.29-1.06,0l-5.19-5.19c-.29-.29-.29-.77,0-1.06h11.43c.29,.29,.29,.77,0,1.06Zm60.97,10.22H32.18V7.7h54.73V24.55Z"/><path transform="translate(0, 30)" d="M87.87,5.89H11.35c-1.56,0-2.84,1.28-2.84,2.84v14.78c0,1.56,1.28,2.84,2.84,2.84l76.52-.19c1.56,0,2.84-1.28,2.84-2.84V8.73c0-1.56-1.28-2.84-2.84-2.84ZM25.95,14.33l-5.19,5.19c-.29,.29-.77,.29-1.06,0l-5.19-5.19c-.29-.29-.29-.77,0-1.06h11.43c.29,.29,.29,.77,0,1.06Zm60.97,10.22H32.18V7.7h54.73V24.55Z"/></svg>

package/assets/icon-linear-gauge.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.31 82.55"><path d="M18.29,39.57c0-1.03,.23-1.79,.68-2.28,.45-.49,1.06-.74,1.83-.74s1.42,.25,1.87,.74c.45,.49,.68,1.25,.68,2.29s-.23,1.79-.68,2.28c-.45,.5-1.06,.74-1.83,.74s-1.42-.25-1.87-.74c-.45-.49-.68-1.25-.68-2.29Zm1.71-.02c0,.75,.09,1.25,.26,1.5,.13,.19,.31,.28,.54,.28s.42-.09,.55-.28c.17-.25,.25-.75,.25-1.5s-.08-1.24-.25-1.49c-.13-.19-.31-.29-.55-.29s-.41,.09-.54,.28c-.17,.26-.26,.76-.26,1.5Zm2.47,9.08h-1.62l6.1-12.09h1.58l-6.05,12.09Zm3.55-3.01c0-1.03,.23-1.79,.68-2.28,.45-.49,1.07-.74,1.85-.74s1.4,.25,1.86,.74c.45,.5,.68,1.26,.68,2.28s-.23,1.79-.68,2.29c-.45,.49-1.06,.74-1.83,.74s-1.42-.25-1.87-.74c-.45-.49-.68-1.26-.68-2.29Zm1.71,0c0,.75,.09,1.24,.26,1.49,.13,.19,.31,.29,.54,.29s.41-.09,.54-.28c.17-.25,.26-.75,.26-1.5s-.08-1.24-.25-1.5c-.13-.19-.31-.28-.55-.28s-.41,.09-.54,.28c-.17,.26-.26,.76-.26,1.5Z"/><path d="M92.33,52.83v-20.42c0-1.61-1.31-2.93-2.93-2.93H6.65c-1.61,0-2.93,1.31-2.93,2.93v20.42c0,1.61,1.31,2.93,2.93,2.93H89.4c1.61,0,2.93-1.31,2.93-2.93Zm-52.34-2.93H9.58v-14.56h30.41v14.56Zm5.86-14.56h40.63v14.56H45.85v-14.56Z"/></svg>

package/components/AdvancedEditor.jsx

@@ -8,7 +8,12 @@ export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
   const [configTextboxValue, setConfigTextbox] = useState({})
 
   useEffect(() => {
-    const parsedData = convertStateToConfig()
+    let parsedData = state
+    if (state.type !== 'dashboard') {
+      parsedData = convertStateToConfig()
+    } else {
+      parsedData = JSON.parse(JSON.stringify(parsedData))
+    }
     const formattedData = JSON.stringify(parsedData, undefined, 2)
 
     setConfigTextbox(formattedData)
@@ -16,6 +21,7 @@ export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
 
   const typeLookup = {
     chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
+    dashboard: ['Dashboard', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
     map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
     'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon />]
   }

package/components/DataTable.jsx

@@ -1,22 +1,30 @@
 import React, { useEffect, useState, memo, useMemo } from 'react'
 
 import Papa from 'papaparse'
-import ExternalIcon from '../assets/external-link.svg' // TODO: Move to Icon component
+import ExternalIcon from '../assets/external-link.svg'
 import Icon from '@cdc/core/components/ui/Icon'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
+
+import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
+import { formatNumber } from '@cdc/core/helpers/cove/number'
 
 import Loading from '@cdc/core/components/Loading'
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = props => {
-  const { config, tableTitle, indexTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, displayDataAsText, formatNumber, applyLegendToRow, displayGeoName, navigationHandler, viewport, formatLegendLocation, tabbingId, parseDate, formatDate, isDebug } = props
-  if (isDebug) console.log('core/DataTable: props=', props)
-  if (isDebug) console.log('core/DataTable: runtimeData=', runtimeData)
-  if (isDebug) console.log('core/DataTable: rawData=', rawData)
-  if (isDebug) console.log('core/DataTable: config=', config)
+  const { config, tableTitle, indexTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, displayDataAsText, applyLegendToRow, displayGeoName, navigationHandler, viewport, formatLegendLocation, tabbingId, isDebug } = props
+
+  /* eslint-disable no-console */
+  if (isDebug) {
+    console.log('core/DataTable: props=', props)
+    console.log('core/DataTable: runtimeData=', runtimeData)
+    console.log('core/DataTable: rawData=', rawData)
+    console.log('core/DataTable: config=', config)
+  }
+  /* eslint-enable no-console */
 
   const [expanded, setExpanded] = useState(expandDataTable)
 
@@ -137,7 +145,7 @@ const DataTable = props => {
   const DownloadButton = memo(() => {
     if (rawData !== undefined) {
       let csvData
-      if (config.type === 'chart' || config.general.type === 'bubble') {
+      if (config.type === 'chart' || config.general.type === 'bubble' || !config.table.showFullGeoNameInCSV) {
         // Just Unparse
         csvData = Papa.unparse(rawData)
       } else if ((config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') || config.general.type === 'us-geocode') {
@@ -197,16 +205,19 @@ const DataTable = props => {
 
   const rows = Object.keys(runtimeData).sort((a, b) => {
     let sortVal
-    if (config.columns.length > 0) {
+    if (config.type === 'map' && config.columns) {
       sortVal = customSort(runtimeData[a][config.columns[sortBy.column].name], runtimeData[b][config.columns[sortBy.column].name])
     }
+    if (config.type === 'chart') {
+      sortVal = customSort(runtimeData[a][sortBy.column], runtimeData[b][sortBy.column])
+    }
     if (!sortBy.asc) return sortVal
     if (sortVal === 0) return 0
     if (sortVal < 0) return 1
     return -1
   })
 
-  function genMapRows(rows) {
+  const genMapRows = rows => {
     const allrows = rows.map(row => {
       return (
         <tr role='row'>
@@ -299,12 +310,18 @@ const DataTable = props => {
     }
   }
 
-  function genChartHeader(columns, data) {
+  const genChartHeader = (columns, data) => {
+    if (!data) return
     return (
       <tr>
         {dataSeriesColumns().map(column => {
           let custLabel = getLabel(column) ? getLabel(column) : column
           let text = column === config.xAxis.dataKey ? config.table.indexLabel : custLabel
+
+          // If a user sets the name on a series use that.
+          let userUpdatedSeriesName = config.series.filter(series => series.dataKey === column)?.[0]?.name
+          if (userUpdatedSeriesName) text = userUpdatedSeriesName
+
           return (
             <th
               key={`col-header-${column}`}
@@ -334,38 +351,66 @@ const DataTable = props => {
     )
   }
 
-  function genChartRows(rows) {
-    const allrows = rows.map(row => {
+  // if its additional column, return formatting params
+  const isAdditionalColumn = column => {
+    let inthere = false
+    let formattingParams = {}
+    Object.keys(config.columns).forEach(keycol => {
+      if (config.columns[keycol].name === column) {
+        inthere = true
+        formattingParams = {
+          addColPrefix: config.columns[keycol].prefix,
+          addColSuffix: config.columns[keycol].suffix,
+          addColRoundTo: config.columns[keycol].roundToPlace ? config.columns[keycol].roundToPlace : '',
+          addColCommas: config.columns[keycol].commas
+        }
+      }
+    })
+    return formattingParams
+  }
+
+  const genChartRows = rows => {
+    const allRows = rows.map(row => {
       return (
         <tr role='row'>
-          {dataSeriesColumns()
-            //.filter(column => columns[column].dataTable === true && columns[column].name)
-            .map(column => {
-              let cellValue
-              if (column === config.xAxis.dataKey) {
-                const rowObj = runtimeData[row]
-                //const legendColor = applyLegendToRow(rowObj)
-                var labelValue = rowObj[column] // just raw X axis string
-                labelValue = getCellAnchor(labelValue, rowObj)
-                // no colors on row headers for charts bc it's Date not data
-                // Remove this - <LegendCircle fill={legendColor[row]} />
-                cellValue = <>{labelValue}</>
+          {dataSeriesColumns().map(column => {
+            const rowObj = runtimeData[row]
+            let cellValue // placeholder for formatting below
+            let labelValue = rowObj[column] // just raw X axis string
+            if (column === config.xAxis.dataKey) {
+              // not the prettiest, but helper functions work nicely here.
+              cellValue = <>{config.xAxis.type === 'date' ? formatDate(config.xAxis.dateDisplayFormat, parseDate(config.xAxis.dateParseFormat, labelValue)) : labelValue}</>
+            } else {
+              let resolvedAxis = 'left'
+              let leftAxisItems = config.series.filter(item => item?.axis === 'Left')
+              let rightAxisItems = config.series.filter(item => item?.axis === 'Right')
+
+              leftAxisItems.map(leftSeriesItem => {
+                if (leftSeriesItem.dataKey === column) resolvedAxis = 'left'
+              })
+
+              rightAxisItems.map(rightSeriesItem => {
+                if (rightSeriesItem.dataKey === column) resolvedAxis = 'right'
+              })
+
+              let addColParams = isAdditionalColumn(column)
+              if (addColParams) {
+                cellValue = formatNumber(runtimeData[row][column], resolvedAxis, true, config, addColParams)
               } else {
-                cellValue = displayDataAsText(runtimeData[row][column], column)
+                cellValue = formatNumber(runtimeData[row][column], resolvedAxis, true, config)
               }
+            }
 
-              //MAP SPECIFIC- change to CHART specific
-              // onClick = { e => (config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world' ? setFilteredCountryCode(row) : true)}
-              return (
-                <td tabIndex='0' role='gridcell' id={`${runtimeData[config.runtime.originalXAxis.dataKey]}--${row}`}>
-                  {cellValue}
-                </td>
-              )
-            })}
+            return (
+              <td tabIndex='0' role='gridcell' id={`${runtimeData[config.runtime.originalXAxis.dataKey]}--${row}`}>
+                {cellValue}
+              </td>
+            )
+          })}
         </tr>
       )
     })
-    return allrows
+    return allRows
   }
 
   const limitHeight = {
@@ -391,7 +436,7 @@ const DataTable = props => {
     [config.runtime.seriesKeys]) // eslint-disable-line
 
   if (config.visualizationType !== 'Box Plot') {
-    function genMapHeader(columns) {
+    const genMapHeader = columns => {
       return (
         <tr>
           {Object.keys(columns)
@@ -406,9 +451,11 @@ const DataTable = props => {
               if (config.type === 'map' && (text === undefined || text === '')) {
                 text = 'Location'
               }
+
               return (
                 <th
                   key={`col-header-${column}`}
+                  id={column}
                   tabIndex='0'
                   title={text}
                   role='columnheader'
@@ -437,10 +484,10 @@ const DataTable = props => {
 
     return (
       <ErrorBoundary component='DataTable'>
-        <CoveMediaControls.Section classes={['download-links']}>
-          <CoveMediaControls.Link config={config} />
+        <MediaControls.Section classes={['download-links']}>
+          <MediaControls.Link config={config} />
           {(config.table.download || config.general.showDownloadButton) && <DownloadButton />}
-        </CoveMediaControls.Section>
+        </MediaControls.Section>
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
           <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
             Skip Navigation or Skip to Content
@@ -503,7 +550,7 @@ const DataTable = props => {
     )
   } else {
     // Render Data Table for Box Plots
-    function genBoxplotHeader(categories) {
+    const genBoxplotHeader = categories => {
       let columns = ['Measures', ...categories]
       return (
         <tr>
@@ -557,7 +604,7 @@ const DataTable = props => {
       if (Number(rowid) === 10) return plot.values.length > 0 ? plot.values.toString() : '-'
       return <p>-</p>
     }
-    function genBoxplotRows(rows) {
+    const genBoxplotRows = rows => {
       // get list of data keys for each row
       let dataKeys = rows.map(row => {
         return row[0]
@@ -590,10 +637,10 @@ const DataTable = props => {
     return (
       <ErrorBoundary component='DataTable'>
         {/* cove media results in error so disabling for now (TT)
-        <CoveMediaControls.Section classes={['download-links']}>
-          <CoveMediaControls.Link config={config} />
+        <MediaControls.Section classes={['download-links']}>
+          <MediaControls.Link config={config} />
           {config.general.showDownloadButton && <DownloadButton />}
-        </CoveMediaControls.Section>
+        </MediaControls.Section>
         */}
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
           <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>

package/components/Filters.jsx

@@ -312,6 +312,8 @@ const Filters = props => {
       delete filtersToLoop.fromHash
 
       return filtersToLoop.map((singleFilter, outerIndex) => {
+        if(singleFilter.showDropdown === false) return
+
         const values = []
         const pillValues = []
         const tabValues = []

package/components/{CoveMediaControls.jsx → MediaControls.jsx}

@@ -134,11 +134,11 @@ const Section = ({ children, classes }) => {
   )
 }
 
-const CoveMediaControls = () => null
+const MediaControls = () => null
 
-CoveMediaControls.Section = Section
-CoveMediaControls.Link = Link
-CoveMediaControls.Button = Button
-CoveMediaControls.generateMedia = generateMedia
+MediaControls.Section = Section
+MediaControls.Link = Link
+MediaControls.Button = Button
+MediaControls.generateMedia = generateMedia
 
-export default CoveMediaControls
+export default MediaControls

package/components/RepeatableGroup.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { Draggable } from '@hello-pangea/dnd'
+import Icon from '@cdc/core/components/ui/Icon'
+
+const RepeatableGroupSection = props => {
+  return <div className='repeatable-group'>{props.children}</div>
+}
+
+export const RepeatableGroupItem = props => {
+  const { item, index, title } = props
+
+  return (
+    <Draggable key={item} draggableId={`draggable-repeatable-item-${item}`} index={index}>
+      {(provided, snapshot) => (
+        <div key={index} className={snapshot.isDragging ? 'currently-dragging' : ''} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+          <Accordion allowZeroExpanded>
+            <AccordionItem className='series-item series-item--chart'>
+              <AccordionItemHeading className='series-item__title'>
+                <AccordionItemButton className={''}>
+                  <Icon display='move' size={15} style={{ cursor: 'default' }} />
+                  Title Section
+                </AccordionItemButton>
+              </AccordionItemHeading>
+              <AccordionItemPanel>panel section to be built</AccordionItemPanel>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      )}
+    </Draggable>
+  )
+}
+
+export const RepeatableGroup = {
+  Section: RepeatableGroupSection,
+  Item: RepeatableGroupItem
+}

package/components/inputs/InputSelect.jsx

@@ -33,7 +33,7 @@ const InputSelect = memo(({ label, value, options, fieldName, section = null, su
   }
 
   return (
-    <label>
+    <label style={{ width: '100%', display: 'block' }}>
       {label && <span className='edit-label cove-input__label'>{label}</span>}
       <select
         className={required && !value ? 'warning' : ''}

package/components/ui/Accordion.jsx

@@ -21,6 +21,7 @@ const Accordion = ({ children }) => {
           <AccordionItem className='cove-accordion__item' key={index}>
             <AccordionItemHeading className='cove-accordion__heading'>
               <AccordionItemButton className='cove-accordion__button'>
+                {section.props.icon}
                 {section.props.title}
                 {section.props.tooltipText ? (
                   <Tooltip position='bottom'>
@@ -43,6 +44,8 @@ const Accordion = ({ children }) => {
 Accordion.Section = AccordionSection
 
 Accordion.Section.propTypes = {
+  /* Icon for the accordion label */
+  icon: PropTypes.node,
   /* Title for the accordion label*/
   title: PropTypes.string,
   /* Tooltip for the accordion label*/

package/components/ui/Icon.jsx

@@ -27,7 +27,8 @@ import iconWarningCircle from '../../assets/icon-warning-circle.svg'
 import iconWarningTriangle from '../../assets/icon-warning-triangle.svg'
 import iconGear from '../../assets/icon-gear.svg'
 import iconTools from '../../assets/icon-tools.svg'
-import iconText from '../../assets/filtered-text.svg'
+import iconText from '../../assets/icon-filtered-text.svg'
+import iconDropdowns from '../../assets/icon-filter-dropdowns.svg'
 import iconPlus from '../../assets/icon-plus.svg'
 import iconMinus from '../../assets/icon-minus.svg'
 
@@ -62,7 +63,8 @@ const iconHash = {
   tools: iconTools,
   plus: iconPlus,
   minus: iconMinus,
-  'filtered-text': iconText
+  'filtered-text': iconText,
+  'filter-dropdowns': iconDropdowns
 }
 
 const Icon = ({ display = null, base, alt = '', size, color, style, ...attributes }) => {

package/components/ui/Tooltip.jsx

@@ -9,42 +9,30 @@ import '../../styles/v2/components/ui/tooltip.scss'
 const TooltipTarget = () => null
 const TooltipContent = () => null
 
-const Tooltip = ({
-                   place = 'top',
-                   trigger = 'hover',
-                   float = false,
-                   shadow = true,
-                   border = false,
-                   children,
-                   style,
-                   ...attributes
-                 }) => {
-
+const Tooltip = ({ place = 'top', trigger = 'hover', float = false, shadow = true, border = false, children, style, ...attributes }) => {
   const tooltipTargetChildren = children.find(el => el.type === TooltipTarget)
   const tooltipContentChildren = children.find(el => el.type === TooltipContent)
 
   const uid = 'tooltip-' + useId()
 
-  const generateTriggerEvent = (trigger) => {
+  const generateTriggerEvent = trigger => {
     const eventList = {
-      'hover': null,
-      'focus': 'focus',
-      'click': 'click focus'
+      hover: null,
+      focus: 'focus',
+      click: 'click focus'
     }
     return eventList[trigger]
   }
 
   return (
-    <span className="cove-tooltip" style={style} {...attributes}>
-      <a id={uid} className="cove-tooltip--target"
-         data-tooltip-float={float}
-         data-tooltip-place={place}
-         data-tooltip-events={generateTriggerEvent()}
-      >
+    <span className='cove-tooltip' style={style} {...attributes}>
+      <a id={uid} className='cove-tooltip--target' data-tooltip-float={float} data-tooltip-place={place} data-tooltip-events={generateTriggerEvent()}>
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
       </a>
+      {/* prettier-ignore */}
       <ReactTooltip
-        id={uid} anchorId={uid}
+        id={uid}
+        anchorId={uid}
         className={'cove-tooltip__content' + (' place-' + place) + (!float ? ' cove-tooltip__content--animated' : '') + (trigger === 'click' ? ' interactive' : '') + (border ? (' cove-tooltip--border') : '') + (shadow ? ' has-shadow' : '')}
         globalEventOff="click"
       >