@cdc/chart 4.23.9 → 4.23.10

package/src/hooks/useTooltip.jsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
+import { defaultStyles } from '@visx/tooltip'
 
 // third party
 import { localPoint } from '@visx/event'
@@ -30,6 +31,8 @@ export const useTooltip = props => {
     }
 
     const tooltipInformation = {
+      tooltipLeft: tooltipData.dataXPosition,
+      tooltipTop: tooltipData.dataYPosition,
       tooltipData: tooltipData
     }
 
@@ -50,11 +53,22 @@ export const useTooltip = props => {
     // Additional data for pie charts
     const { data: pieChartData, arc } = additionalChartData
 
-    const closestXScaleValue = getXValueFromCoordinate(x)
+    const closestXScaleValue = getXValueFromCoordinate(x - Number(config.yAxis.size || 0))
 
     const includedSeries = visualizationType !== 'Pie' ? config.series.filter(series => series.tooltip === true).map(item => item.dataKey) : config.series.map(item => item.dataKey)
     includedSeries.push(config.xAxis.dataKey)
 
+    if (config.visualizationType === 'Forecasting') {
+      config.series.map(s => {
+        s.confidenceIntervals.map(c => {
+          if (c.showInTooltip) {
+            includedSeries.push(c.high)
+            includedSeries.push(c.low)
+          }
+        })
+      })
+    }
+
     const yScaleValues = getYScaleValues(closestXScaleValue, includedSeries)
 
     const xScaleValues = data.filter(d => d[xAxis.dataKey] === getClosestYValue(y))
@@ -103,14 +117,14 @@ export const useTooltip = props => {
       if (visualizationType === 'Pie') {
         return [
           [config.xAxis.dataKey, pieChartData],
-          [config.runtime.yAxis.dataKey, formatNumber(arc.data[config.runtime.yAxis.dataKey])],
-          ['Percent', `${Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}`]
+          [config.runtime.yAxis.dataKey, formatNumber(arc?.data[config.runtime.yAxis.dataKey])],
+          ['Percent', `${Math.round((((arc?.endAngle - arc?.startAngle) * 180) / Math.PI / 360) * 100) + '%'}`]
         ]
       }
 
       return getIncludedTooltipSeries()
         .filter(Boolean)
-        .flatMap(seriesKey => {
+        .flatMap((seriesKey, index) => {
           return resolvedScaleValues[0][seriesKey] ? [[seriesKey, resolvedScaleValues[0][seriesKey], getAxisPosition(seriesKey)]] : []
         })
     }
@@ -131,7 +145,6 @@ export const useTooltip = props => {
    */
   const handleTooltipMouseOff = () => {
     if (config.visualizationType === 'Area Chart') {
-      console.log('HERE IN OFF')
       setTimeout(() => {
         hideTooltip()
       }, 3000)
@@ -174,7 +187,7 @@ export const useTooltip = props => {
       // Find the closest x value by calculating the minimum distance
       let closestX = null
       let minDistance = Number.MAX_VALUE
-      let offset = x - yAxis.size
+      let offset = x
 
       data.forEach(d => {
         const xPosition = xAxis.type === 'date' ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])

package/src/scss/main.scss

@@ -180,6 +180,12 @@
       align-items: flex-start !important;
       user-select: none;
       white-space: nowrap;
+
+      .visx-legend-label {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
     }
 
     .vertical-sorted:not(.single-row) .legend-item {
@@ -676,14 +682,6 @@
     padding: 1em;
   }
 
-  .cove-component__content:not(.no-borders) {
-    border: 1px solid $lightGray;
-  }
-
-  .cove-component__header ~ .cove-component__content:not(.no-borders) {
-    border-top: none !important;
-  }
-
   .subtext {
     margin-top: 0px;
   }
@@ -691,10 +689,6 @@
   .isEditor {
     position: relative;
   }
-
-  .subtext {
-    margin-bottom: 15px;
-  }
 }
 
 .cdc-open-viz-module .cove-component__content.sparkline {

package/src/components/DataTable.jsx

@@ -1,494 +0,0 @@
-import React, { useContext, useEffect, useState, useMemo } from 'react'
-import { useTable, useSortBy, useResizeColumns, useBlockLayout } from 'react-table'
-import Papa from 'papaparse'
-import { Base64 } from 'js-base64'
-import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
-
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendCircle from '@cdc/core/components/LegendCircle'
-import Icon from '@cdc/core/components/ui/Icon'
-import { DataTransform } from '@cdc/core/helpers/DataTransform'
-
-import ConfigContext from '../ConfigContext'
-
-import MediaControls from '@cdc/core/components/MediaControls'
-
-const DataTable = props => {
-  // had to pass in runtimeData as prop to get the raw prop names in the inbound data (TT)
-  const { runtimeData, isDebug } = props
-
-  const { rawData, tableData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, currentViewport } = useContext(ConfigContext)
-
-  const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
-  const [tableExpanded, setTableExpanded] = useState(config.table.expanded)
-  const [accessibilityLabel, setAccessibilityLabel] = useState('')
-  const isLegendBottom = ['sm', 'xs', 'xxs'].includes(currentViewport)
-  const transform = new DataTransform()
-
-  const DownloadButton = ({ data }, type) => {
-    const fileName = `${config.title.substring(0, 50)}.csv`
-
-    const csvData = Papa.unparse(data)
-
-    const saveBlob = () => {
-      //@ts-ignore
-      if (typeof window.navigator.msSaveBlob === 'function') {
-        const dataBlob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
-        //@ts-ignore
-        window.navigator.msSaveBlob(dataBlob, fileName)
-      }
-    }
-
-    // - trying to eliminate console error that occurs if formatted with prettier
-    // prettier-ignore
-    switch (type) {
-      case 'download':
-        return (<a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border margin-sm`}>Download Data (CSV)</a>)
-      default:
-        return (<a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`no-border`}>Download Data (CSV)</a>)
-    }
-  }
-
-  // Creates columns structure for the table
-  const tableColumns = useMemo(() => {
-    const newTableColumns =
-      config.visualizationType === 'Pie'
-        ? []
-        : config.visualizationType === 'Box Plot'
-        ? [
-            {
-              Header: 'Measures',
-              Cell: props => {
-                const resolveName = () => {
-                  let {
-                    boxplot: { labels }
-                  } = config
-                  const columnLookup = {
-                    columnMean: labels.mean,
-                    columnMax: labels.maximum,
-                    columnMin: labels.minimum,
-                    columnIqr: labels.iqr,
-                    columnCategory: 'Category',
-                    columnMedian: labels.median,
-                    columnFirstQuartile: labels.q1,
-                    columnThirdQuartile: labels.q3,
-                    columnOutliers: labels.outliers,
-                    values: labels.values,
-                    columnTotal: labels.total,
-                    columnSd: 'Standard Deviation',
-                    nonOutlierValues: 'Non Outliers',
-                    columnLowerBounds: labels.lowerBounds,
-                    columnUpperBounds: labels.upperBounds
-                  }
-
-                  let resolvedName = columnLookup[props.row.original[0]]
-
-                  return resolvedName
-                }
-
-                return resolveName()
-              }
-            }
-          ]
-        : [
-            {
-              Header: ' ',
-              Cell: ({ row }) => {
-                const getSeriesLabel = () => {
-                  let userUpdatedSeriesName = config.series.filter(series => series.dataKey === row.original)?.[0]?.name
-
-                  if (userUpdatedSeriesName) return userUpdatedSeriesName
-                  if (config.runtimeSeriesLabels) return config.runtime.seriesLabels[row.original]
-                  return row.original
-                }
-                return (
-                  <>
-                    {config.visualizationType !== 'Pie' && (
-                      <LegendCircle
-                        fill={
-                          // non-dynamic legend
-                          !config.legend.dynamicLegend && config.visualizationType !== 'Forecasting'
-                            ? colorScale(getSeriesLabel())
-                            : config.legend.dynamicLegend
-                            ? colorPalettes[config.palette][row.index]
-                            : // fallback
-                              '#000'
-                        }
-                      />
-                    )}
-                    <span>{getSeriesLabel()}</span>
-                  </>
-                )
-              },
-              id: 'series-label',
-              sortType: 'custom',
-              canSort: true
-            }
-          ]
-    if (config.visualizationType !== 'Box Plot') {
-      data.forEach((d, index) => {
-        const resolveTableHeader = () => {
-          if (config.runtime[section].type === 'date') return formatDate(parseDate(d[config.runtime.originalXAxis.dataKey]))
-          if (config.runtime[section].type === 'continuous') return numberFormatter(d[config.runtime.originalXAxis.dataKey], 'bottom')
-          return d[config.runtime.originalXAxis.dataKey]
-        }
-        const newCol = {
-          Header: resolveTableHeader(),
-          Cell: ({ row }) => {
-            let leftAxisItems = config.series.filter(item => item?.axis === 'Left')
-            let rightAxisItems = config.series.filter(item => item?.axis === 'Right')
-            let resolvedAxis = ''
-
-            leftAxisItems.map(leftSeriesItem => {
-              if (leftSeriesItem.dataKey === row.original) resolvedAxis = 'left'
-            })
-
-            rightAxisItems.map(rightSeriesItem => {
-              if (rightSeriesItem.dataKey === row.original) resolvedAxis = 'right'
-            })
-
-            if (config.visualizationType !== 'Combo') resolvedAxis = 'left'
-
-            return <>{numberFormatter(d[row.original], resolvedAxis)}</>
-          },
-          id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
-          sortType: 'custom',
-          canSort: true,
-          defaultCanSort: true
-        }
-
-        newTableColumns.push(newCol)
-      })
-    }
-
-    if (config.visualizationType === 'Box Plot') {
-      config.boxplot.tableData.map((plot, index) => {
-        const newCol = {
-          Header: plot.columnCategory,
-          Cell: props => {
-            let resolveCell = () => {
-              if (Number(props.row.id) === 0) return true
-              if (Number(props.row.id) === 1) return plot.columnMax
-              if (Number(props.row.id) === 2) return plot.columnThirdQuartile
-              if (Number(props.row.id) === 3) return plot.columnMedian
-              if (Number(props.row.id) === 4) return plot.columnFirstQuartile
-              if (Number(props.row.id) === 5) return plot.columnMin
-              if (Number(props.row.id) === 6) return plot.columnTotal
-              if (Number(props.row.id) === 7) return plot.columnSd
-              if (Number(props.row.id) === 8) return plot.columnMean
-              if (Number(props.row.id) === 9) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
-              if (Number(props.row.id) === 10) return plot.values.length > 0 ? plot.values.toString() : '-'
-              return <p>-</p>
-            }
-            return resolveCell()
-          },
-          id: `${index}`,
-          canSort: false
-        }
-
-        return newTableColumns.push(newCol)
-      })
-    }
-
-    return newTableColumns
-  }, [config, colorScale]) // eslint-disable-line
-
-  // prettier-ignore
-  const tableData = useMemo(() => (
-    config.visualizationType === 'Pie'
-      ? [config.yAxis.dataKey]
-      : config.visualizationType === 'Box Plot'
-        ? Object.entries(config.boxplot.tableData[0])
-        : config.runtime.seriesKeys),
-    [config.runtime.seriesKeys]) // eslint-disable-line
-
-  // Change accessibility label depending on expanded status
-  useEffect(() => {
-    const expandedLabel = 'Accessible data table.'
-    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
-
-    if (tableExpanded === true && accessibilityLabel !== expandedLabel) {
-      setAccessibilityLabel(expandedLabel)
-    }
-
-    if (tableExpanded === false && accessibilityLabel !== collapsedLabel) {
-      setAccessibilityLabel(collapsedLabel)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tableExpanded])
-
-  const defaultColumn = useMemo(
-    () => ({
-      minWidth: 150,
-      width: 200,
-      maxWidth: 400
-    }),
-    []
-  )
-  const upIcon = (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
-      <path d='M0 5l5-5 5 5z' />
-    </svg>
-  )
-  const downIcon = (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
-      <path d='M0 0l5 5 5-5z' />
-    </svg>
-  )
-  const getSpecificCellData = (array, value) => {
-    return array.filter(data => JSON.stringify(data).toLowerCase().indexOf(value.toLowerCase()) !== -1)
-  }
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
-    {
-      columns: tableColumns,
-      data: tableData,
-      defaultColumn,
-      disableSortRemove: true, // otherwise 3rd click on header removes sorting entirely
-      sortTypes: {
-        custom: (rowA, rowB, columnId) => {
-          // NOTE:
-          // 1) Main issue causing all this code:
-          //     rowA and rowB are coming in with all values undefined
-          // - if it passed the values we could just use the columnId to get the correct sort value
-          // but since it's not there we have to go through a bunch of code to get it because
-          // we also do not know the Y axis data key (TT)
-          // 2). if formattedData did not truncate the strings we could get it from there
-          // but Hispanic or Latino is truncated to just Hispanic as the key
-          // and 'White, Non-Hispanic/Latino' gets truncated to remove the /Latino
-
-          // rowA.original - is the row data field name to access the value
-          // columnId = the column indicator typically date or date--index
-          let a, b
-          if (columnId === 'series-label') {
-            // comparing strings
-            a = rowA.original
-            b = rowB.original
-            return a.localeCompare(b)
-          }
-
-          let dataKey = config.xAxis.dataKey
-          let columnIdIndexRemoved = columnId.split('--')[0] // have to remove index for compare
-          //get all the data from that column
-          let colData = runtimeData.filter(obj => {
-            // problem is dates can be in different formats
-            if (config.xAxis.type === 'date' && !isNaN(Date.parse(obj[dataKey])) && !isNaN(Date.parse(columnIdIndexRemoved))) {
-              // must convert to datetime number to compare
-              return parseDate(obj[dataKey]).getTime() === parseDate(columnIdIndexRemoved).getTime()
-            } else {
-              return obj[dataKey] === columnIdIndexRemoved // have to remove index
-            }
-          })
-
-          if (colData === undefined || colData[0] === undefined) {
-            return -1
-          }
-
-          let rowA_cellObj = getSpecificCellData(colData, rowA.original)
-          let rowB_cellObj = getSpecificCellData(colData, rowB.original)
-
-          // - ** REMOVE any data points NOT selected in the data series ***
-          // I dont understand why not selected data series are still sent down in the data
-          // - would be better to scrub outside of here (TT)
-          let newRowA_cellObj = []
-          let newRowB_cellObj = []
-          if (config.runtime.seriesKeys) {
-            config.runtime.seriesKeys.forEach(seriesKey => {
-              if (seriesKey in rowA_cellObj[0]) newRowA_cellObj.push(rowA_cellObj[0][seriesKey])
-              if (seriesKey in rowB_cellObj[0]) newRowB_cellObj.push(rowB_cellObj[0][seriesKey])
-            })
-            // copy back over
-            rowA_cellObj[0] = newRowA_cellObj
-            rowB_cellObj[0] = newRowB_cellObj
-          }
-
-          // REMOVE the following:
-          // - value equal to column date
-          // - value that is the .original
-          // - any data still in that's not really a number
-          let rowA_valueObj = Object.values(rowA_cellObj[0]).filter(value => value !== columnIdIndexRemoved && value !== rowA.original && !isNaN(value))
-          let rowB_valueObj = Object.values(rowB_cellObj[0]).filter(value => value !== columnIdIndexRemoved && value !== rowB.original && !isNaN(value))
-
-          // NOW we can get the sort values from the cell object
-          a = rowA_valueObj.length > 1 ? rowA_valueObj[rowA.id] : rowA_valueObj[0]
-          b = rowB_valueObj.length > 1 ? rowB_valueObj[rowB.id] : rowB_valueObj[0]
-
-          // force null and undefined to the bottom
-          a = a === null || a === undefined ? '' : transform.cleanDataPoint(a)
-          b = b === null || b === undefined ? '' : transform.cleanDataPoint(b)
-          if (a === '' || a === null) {
-            if (b === '' || b === null) {
-              return 0 // Both empty/null
-            }
-            return -1 // Sort a to an index lower than b
-          }
-          if (b === '' || b === null) {
-            if (a === '' || a === null) {
-              return 0 // Both empty/null
-            }
-            return 1 // Sort b to an index lower than a
-          }
-          // End code for forcing NULLS to bottom
-
-          // convert any strings that are actually numbers to proper data type
-          const aNum = Number(a)
-
-          if (!Number.isNaN(aNum)) {
-            a = aNum
-          }
-
-          const bNum = Number(b)
-
-          if (!Number.isNaN(bNum)) {
-            b = bNum
-          }
-          // remove iso code prefixes
-          if (typeof a === 'string') {
-            a = a.replace('us-', '')
-            a = displayGeoName(a)
-          }
-
-          if (typeof b === 'string') {
-            b = b.replace('us-', '')
-            b = displayGeoName(b)
-          }
-
-          // force any string values to lowercase
-          a = typeof a === 'string' ? a.toLowerCase() : a
-          b = typeof b === 'string' ? b.toLowerCase() : b
-
-          // When comparing a number to a string, always send string to bottom
-          if (typeof a === 'number' && typeof b === 'string') {
-            return 1
-          }
-
-          if (typeof b === 'number' && typeof a === 'string') {
-            return -1
-          }
-
-          // Return either 1 or -1 to indicate a sort priority
-          if (a > b) {
-            return 1
-          }
-          if (a < b) {
-            return -1
-          }
-          // returning 0, undefined or any falsey value will use subsequent sorts or
-          // the index as a tiebreaker
-          return 0
-        }
-      },
-      initialState: {
-        sortBy: [{ id: 'series-label', desc: false }] // default sort on 1st column -
-      }
-    },
-    useSortBy,
-    useBlockLayout,
-    useResizeColumns
-  )
-
-  // sort continuous x axis scaling for data tables, ie. xAxis should read 1,2,3,4,5
-  if (config.xAxis.type === 'continuous' && headerGroups) {
-    data.sort((a, b) => a[config.xAxis.dataKey] - b[config.xAxis.dataKey])
-  }
-
-  return (
-    <ErrorBoundary component='DataTable'>
-      <MediaControls.Section classes={['download-links']}>
-        <MediaControls.Link config={config} />
-        {config.table.download && <DownloadButton data={rawData} type='link' />}
-      </MediaControls.Section>
-
-      <section style={{ marginTop: !isLegendBottom ? config.dynamicMarginTop / 4 + 'px' : '0px' }} id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
-        <div
-          role='button'
-          className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}
-          tabIndex={0}
-          onClick={() => {
-            setTableExpanded(!tableExpanded)
-          }}
-          onKeyDown={e => {
-            if (e.keyCode === 13) {
-              setTableExpanded(!tableExpanded)
-            }
-          }}
-        >
-          <Icon display={tableExpanded ? 'minus' : 'plus'} base />
-          {config.table.label}
-        </div>
-        <div className='table-container' hidden={!tableExpanded} style={{ maxHeight: config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' }}>
-          <table className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'} {...getTableProps()} aria-rowcount={config?.series?.length ? config?.series?.length : '-1'}>
-            <caption className='cdcdataviz-sr-only visually-hidden'>{config.table.caption ? config.table.caption : config.table.label ? config.table.label : 'Data Table'}</caption>
-            <thead>
-              {headerGroups.map((headerGroup, index) => (
-                <tr {...headerGroup.getHeaderGroupProps()} key={`headerGroups--${index}`}>
-                  {' '}
-                  {headerGroup.headers.map((column, index) => (
-                    <th
-                      tabIndex='0'
-                      title={column.Header}
-                      key={`trth--${index}`}
-                      role='columnheader'
-                      scope='col'
-                      {...column.getHeaderProps(column.getSortByToggleProps())}
-                      className={column.isSorted && column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc'}
-                      {...(column.isSorted && column.isSortedDesc ? { 'aria-sort': 'descending' } : { 'aria-sort': 'ascending' })}
-                    >
-                      {column.render('Header')}
-                      {column.isSorted && <span className={'sort-icon'}>{column.isSortedDesc ? downIcon : upIcon}</span>}
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-            <tbody {...getTableBodyProps()}>
-              {rows.map((row, index) => {
-                prepareRow(row)
-                return (
-                  <tr {...row.getRowProps()} key={`tbody__tr-${index}`} className={`row-${String(config.visualizationType).replace(' ', '-')}--${index}`}>
-                    {row.cells.map((cell, index) => {
-                      return (
-                        <td tabIndex='0' {...cell.getCellProps()} key={`tbody__tr__td-${index}`} role='gridcell'>
-                          {cell.render('Cell')}
-                        </td>
-                      )
-                    })}
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-          {config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' ? (
-            <table className='region-table data-table'>
-              <caption className='visually-hidden'>Table of the highlighted regions in the visualization</caption>
-              <thead>
-                <tr>
-                  <th>Region Name</th>
-                  <th>Start Date</th>
-                  <th>End Date</th>
-                </tr>
-              </thead>
-              <tbody>
-                {config.regions.map((region, index) => {
-                  if (config.visualizationType === 'Box Plot') return false
-                  if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
-
-                  return (
-                    <tr key={`row-${region.label}--${index}`}>
-                      <td>{region.label}</td>
-                      <td>{formatDate(parseDate(region.from))}</td>
-                      <td>{formatDate(parseDate(region.to))}</td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
-          ) : (
-            ''
-          )}
-        </div>
-      </section>
-    </ErrorBoundary>
-  )
-}
-
-export default DataTable