@cdc/chart 4.23.7 → 4.23.9

package/src/components/BarChartType.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import BarChartStackedVertical from './BarChart.StackedVertical'
+import BarChartStackedHorizontal from './BarChart.StackedHorizontal'
+import BarChartVertical from './BarChart.Vertical'
+import BarChartHorizontal from './BarChart.Horizontal'
+
+const BarChartType = {
+  Vertical: BarChartVertical,
+  Horizontal: BarChartHorizontal,
+  StackedVertical: BarChartStackedVertical,
+  StackedHorizontal: BarChartStackedHorizontal
+}
+
+export default BarChartType

package/src/components/BrushHandle.jsx

@@ -0,0 +1,17 @@
+import { Group } from '@visx/group'
+
+const BrushHandle = props => {
+  const { x, height, isBrushActive } = props
+  const pathWidth = 8
+  const pathHeight = 15
+  if (!isBrushActive) {
+    return null
+  }
+  return (
+    <Group left={x + pathWidth / 2} top={(height - pathHeight) / 2}>
+      <path fill='#f2f2f2' d='M -4.5 0.5 L 3.5 0.5 L 3.5 15.5 L -4.5 15.5 L -4.5 0.5 M -1.5 4 L -1.5 12 M 0.5 4 L 0.5 12' stroke='#999999' strokeWidth='1' style={{ cursor: 'ew-resize' }} />
+    </Group>
+  )
+}
+
+export default BrushHandle

package/src/components/DataTable.jsx

@@ -7,18 +7,23 @@ 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'
 
-export default function DataTable() {
+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`
@@ -34,19 +39,13 @@ export default function DataTable() {
       }
     }
 
+    // - 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>
-        )
+        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>
-        )
+        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>)
     }
   }
 
@@ -93,7 +92,7 @@ export default function DataTable() {
           ]
         : [
             {
-              Header: '',
+              Header: ' ',
               Cell: ({ row }) => {
                 const getSeriesLabel = () => {
                   let userUpdatedSeriesName = config.series.filter(series => series.dataKey === row.original)?.[0]?.name
@@ -121,7 +120,9 @@ export default function DataTable() {
                   </>
                 )
               },
-              id: 'series-label'
+              id: 'series-label',
+              sortType: 'custom',
+              canSort: true
             }
           ]
     if (config.visualizationType !== 'Box Plot') {
@@ -151,7 +152,9 @@ export default function DataTable() {
             return <>{numberFormatter(d[row.original], resolvedAxis)}</>
           },
           id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
-          canSort: true
+          sortType: 'custom',
+          canSort: true,
+          defaultCanSort: true
         }
 
         newTableColumns.push(newCol)
@@ -222,7 +225,166 @@ export default function DataTable() {
     }),
     []
   )
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns)
+  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) {
@@ -236,7 +398,7 @@ export default function DataTable() {
         {config.table.download && <DownloadButton data={rawData} type='link' />}
       </MediaControls.Section>
 
-      <section style={{ marginTop: !isLegendBottom ? config.dynamicMarginTop + 'px' : '0px' }} id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
+      <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'}
@@ -259,6 +421,7 @@ export default function DataTable() {
             <thead>
               {headerGroups.map((headerGroup, index) => (
                 <tr {...headerGroup.getHeaderGroupProps()} key={`headerGroups--${index}`}>
+                  {' '}
                   {headerGroup.headers.map((column, index) => (
                     <th
                       tabIndex='0'
@@ -267,14 +430,11 @@ export default function DataTable() {
                       role='columnheader'
                       scope='col'
                       {...column.getHeaderProps(column.getSortByToggleProps())}
-                      className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : 'sort'}
-                      {...(column.isSorted ? (column.isSortedDesc ? { 'aria-sort': 'descending' } : { 'aria-sort': 'ascending' }) : null)}
+                      className={column.isSorted && column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc'}
+                      {...(column.isSorted && column.isSortedDesc ? { 'aria-sort': 'descending' } : { 'aria-sort': 'ascending' })}
                     >
-                      {index === 0 ? (config.table.indexLabel ? config.table.indexLabel : column.render('Header')) : column.render('Header')}
-                      <button>
-                        <span className='cdcdataviz-sr-only'>{`Sort by ${typeof column.render('Header') === 'string' ? column.render('Header').toLowerCase() : column.render('Header')} in ${column.isSorted ? (column.isSortedDesc ? 'descending' : 'ascending') : 'no'} `} order</span>
-                      </button>
-                      <div {...column.getResizerProps()} className='resizer' />
+                      {column.render('Header')}
+                      {column.isSorted && <span className={'sort-icon'}>{column.isSortedDesc ? downIcon : upIcon}</span>}
                     </th>
                   ))}
                 </tr>
@@ -330,3 +490,5 @@ export default function DataTable() {
     </ErrorBoundary>
   )
 }
+
+export default DataTable