@cdc/core 4.23.10 → 4.24.1

package/components/EditorPanel/DataTableEditor.tsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '../ui/Icon'
+import { CheckBox, TextField } from './Inputs'
+import type { Table } from '@cdc/core/types/Table'
+import MultiSelect from '../MultiSelect'
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+
+interface DataTableProps {
+  config: {
+    table: Table
+    visualizationType: string
+  }
+  updateField: UpdateFieldFunc<string | boolean | string[] | number>
+  isDashboard: boolean
+  isLoadedFromUrl: boolean
+  columns: string[]
+}
+
+const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard, isLoadedFromUrl, columns }) => {
+  return (
+    <>
+      <TextField
+        value={config.table.label}
+        updateField={updateField}
+        section='table'
+        fieldName='table-label'
+        id='tableLabel'
+        label='Data Table Title'
+        placeholder='Data Table'
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Label is required for Data Table for 508 Compliance</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      <CheckBox
+        value={config.table.show}
+        fieldName='show'
+        label='Show Data Table'
+        section='table'
+        updateField={updateField}
+        className='column-heading'
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a 508 requirement.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      {config.visualizationType !== 'Box Plot' && (
+        <CheckBox
+          value={config.table.showVertical}
+          fieldName='showVertical'
+          label='Show Vertical Data'
+          section='table'
+          updateField={updateField}
+          className='column-heading'
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>This will draw the data table with vertical data instead of horizontal.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+      )}
+      <TextField value={config.table.indexLabel} section='table' fieldName='indexLabel' label='Index Column Header' updateField={updateField} />
+      <TextField
+        value={config.table.caption}
+        updateField={updateField}
+        section='table'
+        type='textarea'
+        fieldName='caption'
+        label='Screen Reader Description'
+        placeholder=' Data table'
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Enter a description of the data table to be read by screen readers.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label='Limit Table Height' updateField={updateField} />
+      <CheckBox
+        value={config.table.customTableConfig}
+        fieldName='customTableConfig'
+        label='Customize Table Config'
+        section='table'
+        updateField={updateField}
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>This will display all available columns in the data set. It will not show any columns where all of the column cells are null.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      {config.table.customTableConfig && <MultiSelect options={columns.map(c => ({ label: c, value: c }))} fieldName='excludeColumns' label='Exclude Columns' section='table' updateField={updateField} />}
+      {config.table.limitHeight && <TextField value={config.table.height} fieldName='height' label='Data Table Height' type='number' min={0} max={500} placeholder='Height(px)' updateField={updateField} />}
+      <CheckBox value={config.table.expanded} fieldName='expanded' label='Expanded by Default' section='table' updateField={updateField} />
+      {isDashboard && <CheckBox value={config.table.showDataTableLink} fieldName='showDataTableLink' label='Show Data Table Name & Link' section='table' updateField={updateField} />}
+      {isLoadedFromUrl && <CheckBox value={config.table.showDownloadUrl} fieldName='showDownloadUrl' label='Show URL to Automatically Updated Data' section='table' updateField={updateField} />}
+      <CheckBox value={config.table.download} fieldName='download' label='Show Download CSV Link' section='table' updateField={updateField} />
+      <CheckBox value={config.table.showDownloadImgButton} fieldName='showDownloadImgButton' label='Display Image Button' section='table' updateField={updateField} />
+      <label>
+        <span className='edit-label column-heading'>Table Cell Min Width</span>
+        <input type='number' value={config.table.cellMinWidth ? config.table.cellMinWidth : 0} onChange={e => updateField('table', null, 'cellMinWidth', e.target.value)} />
+      </label>
+    </>
+  )
+}
+
+export default DataTable

package/components/EditorPanel/Inputs.tsx

@@ -0,0 +1,150 @@
+import { memo, useEffect, useState } from 'react'
+import { useDebounce } from 'use-debounce'
+
+export type Input = {
+  label: string
+  tooltip?: any
+  section?: any
+  placeholder?: string
+  subsection?: any
+  updateField?: Function
+  fieldName?: string
+}
+
+export type TextFieldProps = {
+  className?: string
+  value: string | number
+  type?: 'text' | 'number' | 'textarea' | 'date'
+  min?: number
+  max?: number
+  i?: number
+  id?: string
+} & Input
+
+export type CheckboxProps = {
+  value?: boolean
+  min?: number
+  i?: number
+  className?: string
+} & Input
+
+export type SelectProps = {
+  value?: string
+  options?: string[]
+  required?: boolean
+  initial?: string
+
+  // all other props
+  [x: string]: any
+} & Input
+
+const TextField = memo((props: TextFieldProps) => {
+  const { label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'text', i = null, min = null, ...attributes } = props
+  const [value, setValue] = useState(stateValue)
+  const [debouncedValue] = useDebounce(value, 500)
+
+  useEffect(() => {
+    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
+      updateField(section, subsection, fieldName, debouncedValue, i)
+    }
+  }, [debouncedValue])
+
+  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
+
+  const onChange = e => {
+    if ('number' !== type || min === null) {
+      setValue(e.target.value)
+    } else {
+      if (!e.target.value || min <= parseFloat(e.target.value)) {
+        setValue(e.target.value)
+      } else {
+        setValue(min.toString())
+      }
+    }
+  }
+
+  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
+
+  if ('textarea' === type) {
+    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
+  }
+
+  if ('number' === type) {
+    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  if ('date' === type) {
+    formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  return (
+    <label>
+      <span className='edit-label column-heading'>
+        {label}
+        {tooltip}
+      </span>
+      {formElement}
+    </label>
+  )
+})
+
+const CheckBox = memo((props: CheckboxProps) => {
+  const { label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes } = props
+
+  return (
+    <label className='checkbox column-heading'>
+      <input
+        type='checkbox'
+        name={fieldName}
+        checked={value}
+        onChange={e => {
+          updateField(section, subsection, fieldName, !value)
+        }}
+        {...attributes}
+      />
+      <span className='edit-label'>
+        {label}
+        {tooltip}
+      </span>
+    </label>
+  )
+})
+
+const Select = memo((props: SelectProps) => {
+  const { label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes } = props
+  let optionsJsx = options.map((optionName, index) => (
+    <option value={optionName} key={index}>
+      {optionName}
+    </option>
+  ))
+
+  if (initialValue) {
+    optionsJsx.unshift(
+      <option value='' key='initial'>
+        {initialValue}
+      </option>
+    )
+  }
+
+  return (
+    <label>
+      <span className='edit-label'>
+        {label}
+        {tooltip}
+      </span>
+      <select
+        className={required && !value ? 'warning' : ''}
+        name={fieldName}
+        value={value}
+        onChange={event => {
+          updateField(section, subsection, fieldName, event.target.value)
+        }}
+        {...attributes}
+      >
+        {optionsJsx}
+      </select>
+    </label>
+  )
+})
+
+export { Select, CheckBox, TextField }

package/components/Filters.jsx

@@ -89,7 +89,7 @@ export const useFilters = props => {
         filters: newFilters
       })
     }
-
+    
     // Used for setting active filter, fromHash breaks the filteredData functionality.
     if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(newFilters)
@@ -320,7 +320,7 @@ const Filters = props => {
         const tabValues = []
         const tabBarValues = []
 
-        const { active, label, filterStyle } = singleFilter
+        const { active, queuedActive, label, filterStyle } = singleFilter
 
         handleSorting(singleFilter)
 
@@ -387,7 +387,7 @@ const Filters = props => {
               {filterStyle === 'tab' && !mobileFilterStyle && <Filters.Tabs tabs={tabValues} />}
               {filterStyle === 'pill' && !mobileFilterStyle && <Filters.Pills pills={pillValues} />}
               {filterStyle === 'tab bar' && !mobileFilterStyle && <Filters.TabBar filter={singleFilter} index={outerIndex} />}
-              {(filterStyle === 'dropdown' || mobileFilterStyle) && <Filters.Dropdown filter={singleFilter} index={outerIndex} label={label} active={active} filters={values} />}
+              {(filterStyle === 'dropdown' || mobileFilterStyle) && <Filters.Dropdown filter={singleFilter} index={outerIndex} label={label} active={queuedActive || active} filters={values} />}
             </>
           </div>
         )

package/components/LegendCircle.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-export default function LegendCircle({ fill, borderColor }) {
+export default function LegendCircle({ fill, borderColor, display = 'inline-block' }) {
   const styles = {
     marginRight: '5px',
     borderRadius: '300px',
     verticalAlign: 'middle',
-    display: 'inline-block',
+    display: display,
     height: '1em',
     width: '1em',
     border: borderColor ? `${borderColor}  1px solid` : 'rgba(0,0,0,.3) 1px solid',

package/components/MediaControls.jsx

@@ -59,7 +59,7 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
-      html2canvas(baseSvg, {foreignObjectRendering: true}).then(canvas => {
+      html2canvas(baseSvg, {foreignObjectRendering: true, x: -1 * (window.pageXOffset + baseSvg.getBoundingClientRect().left), y: -1 * (window.pageYOffset + baseSvg.getBoundingClientRect().top)}).then(canvas => {
         saveImageAs(canvas.toDataURL(), filename + '.png')
       })
       return

package/components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Icon from '../ui/Icon'
+
+import './multiselect.styles.css'
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+
+interface Option {
+  value: string
+  label: string
+}
+
+interface MultiSelectProps {
+  section?: string
+  subsection?: string
+  fieldName: string
+  options: Option[]
+  updateField: UpdateFieldFunc<string[]>
+  label?: string
+}
+
+const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField }) => {
+  const [selectedItems, setSelectedItems] = useState<Option[]>([])
+  const [expanded, setExpanded] = useState(false)
+  const multiSelectRef = useRef(null)
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (multiSelectRef.current && !multiSelectRef.current.contains(event.target)) {
+        setExpanded(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  const update = newItems =>
+    updateField(
+      section,
+      subsection,
+      fieldName,
+      newItems.map(item => item.value)
+    )
+
+  const handleItemSelect = (option: Option) => {
+    const newItems = [...selectedItems, option]
+    setSelectedItems(newItems)
+    update(newItems)
+  }
+
+  const handleItemRemove = (option: Option, caller: string) => {
+    const newItems = selectedItems.filter(item => item.value !== option.value)
+    setSelectedItems(newItems)
+    update(newItems)
+  }
+
+  const multiID = 'multiSelect_' + label
+  return (
+    <div ref={multiSelectRef} className='cove-multiselect'>
+      {label && (
+        <span id={multiID} className='edit-label cove-input__label'>
+          {label}
+        </span>
+      )}
+
+      <div aria-labelledby={label ? multiID : undefined} className='selected'>
+        {selectedItems.map(item => (
+          <div key={item.value} role='button' tabIndex={0} onClick={() => handleItemRemove(item, 'button click')} onKeyUp={() => handleItemRemove(item, 'button key up')}>
+            {item.label}
+            <button aria-label='Remove' onClick={() => handleItemRemove(item, 'X')}>
+              x
+            </button>
+          </div>
+        ))}
+        <button aria-label={expanded ? 'Collapse' : 'Expand'} className='expand' onClick={() => setExpanded(!expanded)}>
+          <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
+        </button>
+      </div>
+      <ul className={'dropdown' + (expanded ? '' : ' hide')}>
+        {options
+          .filter(option => !selectedItems.find(item => item.value === option.value))
+          .map(option => (
+            <li className='cove-multiselect-li' key={option.value} role='option' tabIndex={0} onClick={() => handleItemSelect(option)} onKeyUp={() => handleItemSelect(option)}>
+              {option.label}
+            </li>
+          ))}
+      </ul>
+    </div>
+  )
+}
+
+export default MultiSelect

package/components/MultiSelect/index.ts

@@ -0,0 +1 @@
+export { default } from './MultiSelect'

package/components/MultiSelect/multiselect.styles.css

@@ -0,0 +1,50 @@
+.cove-multiselect {
+  position: relative;
+  .selected {
+    border: 1px solid #ccc;
+    padding: 5px;
+    min-height: 40px;
+    :is(button) {
+      border: none;
+      background: none;
+    }
+    :is(div) {
+      display: inline-block;
+      padding: 0 0 0 5px;
+      margin-right: 5px;
+      margin-bottom: 2px;
+      background: #ccc;
+      border-radius: 5px;
+    }
+    .expand {
+      padding: 0 5px;
+      border-radius: 5px;
+      background: #ccc;
+      float: right;
+    }
+    border-radius: 5px;
+  }
+  .dropdown {
+    background: white;
+    position: absolute;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    padding: 0;
+    min-height: 40px;
+    overflow: scroll;
+    max-height: 200px;
+    z-index: 1;
+    &.hide {
+      display: none;
+    }
+
+    :is(li) {
+      cursor: pointer;
+      list-style: none;
+      padding-left: 10px;
+      &:hover {
+        background: #ccc;
+      } 
+    }
+  }
+}

package/components/Table/Table.tsx

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react'
+import Row from './components/Row'
+import GroupRow from './components/GroupRow'
+import { CellMatrix, GroupCellMatrix } from './types/CellMatrix'
+import { RowType } from './types/RowType'
+
+type TableProps = {
+  childrenMatrix: CellMatrix | GroupCellMatrix
+  tableName: string
+  caption: string
+  stickyHeader?: boolean
+  headContent: ReactNode
+  tableOptions: {
+    className: string
+    'aria-live'?: 'off' | 'assertive' | 'polite'
+    hidden?: boolean
+    'aria-rowcount'?: number
+    cellMinWidth?: number
+  }
+  wrapColumns?: boolean
+  hasRowType?: boolean // if it has row type then the first column is the row type which will explain how to render the row
+}
+
+type Position = 'sticky'
+
+const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType }: TableProps) => {
+  const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 999 } : {}
+  const isGroupedMatrix = !Array.isArray(childrenMatrix)
+  return (
+    <table {...tableOptions}>
+      <caption className='visually-hidden'>{caption}</caption>
+      <thead style={headStyle}>{headContent}</thead>
+      <tbody>
+        {isGroupedMatrix
+          ? Object.keys(childrenMatrix).flatMap(groupName => {
+              let colSpan = 0
+              const rows = childrenMatrix[groupName].map((row, i) => {
+                colSpan = row.length
+                const key = `${tableName}-${groupName}-row-${i}`
+                return <Row key={key} rowKey={key} childRow={row} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+              })
+              return [<GroupRow label={groupName} colSpan={colSpan} key={`${tableName}-${groupName}`} />, ...rows]
+            })
+          : childrenMatrix.map((childRow, i) => {
+              let childRowCopy = [...childRow]
+              let rowType = undefined
+              if (hasRowType) rowType = childRowCopy.shift()
+              const key = `${tableName}-row-${i}`
+              if (rowType === undefined) {
+                return <Row key={key} rowKey={key} childRow={childRow} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+              } else {
+                switch (rowType) {
+                  case RowType.row_group:
+                    return <GroupRow label={childRowCopy[0]} colSpan={childRowCopy.length} key={key} />
+                  case RowType.total:
+                    return <Row key={key} rowKey={key} childRow={childRowCopy} isTotal={true} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                  case RowType.row_group_total:
+                    return <GroupRow label={childRowCopy[0]} colSpan={1} key={key} data={childRowCopy.slice(1)} />
+                  default:
+                    return <Row key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                }
+              }
+            })}
+      </tbody>
+    </table>
+  )
+}
+
+export default Table

package/components/Table/components/Cell.tsx

@@ -0,0 +1,9 @@
+const Cell = ({ children, style, isBold = false }) => {
+  return (
+    <td tabIndex={0} role='gridcell' style={style}>
+      {isBold ? <strong>{children}</strong> : children}
+    </td>
+  )
+}
+
+export default Cell

package/components/Table/components/GroupRow.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+type GroupRowProps = {
+  label: ReactNode
+  colSpan: number
+  data?: ReactNode[]
+}
+
+const GroupRow = ({ label, colSpan, data }: GroupRowProps) => {
+  return (
+    <tr>
+      <th scope='colgroup' colSpan={colSpan}>
+        {label}
+      </th>
+      {data && data.map((item, i) => <th key={`${label}-${i}`}>{item}</th>)}
+    </tr>
+  )
+}
+
+export default GroupRow

package/components/Table/components/Row.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react'
+import Cell from './Cell'
+
+type RowProps = {
+  childRow: ReactNode[]
+  rowKey: string
+  wrapColumns: boolean
+  isTotal?: boolean
+  cellMinWidth?: number
+}
+
+const Row = ({ childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal }: RowProps) => {
+  const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
+  const minWidth = cellMinWidth + 'px'
+  return (
+    <tr>
+      {childRow.map((child, i) => (
+        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth }} isBold={isTotal}>
+          {child}
+        </Cell>
+      ))}
+    </tr>
+  )
+}
+
+export default Row

package/components/Table/index.ts

@@ -0,0 +1 @@
+export { default } from './Table'

package/components/Table/types/CellMatrix.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react'
+
+export type CellMatrix = ReactNode[][]
+export type GroupCellMatrix = Record<string, CellMatrix>

package/components/Table/types/RowType.ts

@@ -0,0 +1,5 @@
+export enum RowType {
+  row_group = 'row_group',
+  total = 'total',
+  row_group_total = 'row_group_total'
+}