@cdc/core 4.23.11 → 4.24.2

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

@@ -74,22 +74,17 @@ export const useFilters = props => {
   const changeFilterActive = (index, value) => {
     let newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
 
-    newFilters[index].active = value
-    setConfig({ ...visualizationConfig })
-
-    // If this is a button filter type show the button.
     if (visualizationConfig.filterBehavior === 'Apply Button') {
+      newFilters[index].queuedActive = value
       setShowApplyButton(true)
+    } else {
+      newFilters[index].active = value
     }
-
-    // If we're not using the apply button we can set the filters right away.
-    if (visualizationConfig.filterBehavior !== 'Apply Button') {
-      setConfig({
-        ...visualizationConfig,
-        filters: newFilters
-      })
-    }
-
+    setConfig({ 
+      ...visualizationConfig,
+      filters: newFilters 
+    })
+    
     // Used for setting active filter, fromHash breaks the filteredData functionality.
     if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(newFilters)
@@ -102,6 +97,13 @@ export const useFilters = props => {
   }
 
   const handleApplyButton = newFilters => {
+    newFilters.forEach(newFilter => {
+      if(newFilter.queuedActive){
+        newFilter.active = newFilter.queuedActive
+        delete newFilter.queuedActive
+      }
+    })
+    
     setConfig({ ...visualizationConfig, filters: newFilters })
 
     if (type === 'map') {
@@ -320,7 +322,7 @@ const Filters = props => {
         const tabValues = []
         const tabBarValues = []
 
-        const { active, label, filterStyle } = singleFilter
+        const { active, queuedActive, label, filterStyle } = singleFilter
 
         handleSorting(singleFilter)
 
@@ -387,7 +389,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/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) => {
+    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)} onKeyUp={() => handleItemRemove(item)}>
+            {item.label}
+            <button aria-label='Remove' onClick={() => handleItemRemove(item)}>
+              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

@@ -2,6 +2,7 @@ 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
@@ -14,12 +15,15 @@ type TableProps = {
     '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 }: TableProps) => {
+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 (
@@ -33,13 +37,29 @@ const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent,
               const rows = childrenMatrix[groupName].map((row, i) => {
                 colSpan = row.length
                 const key = `${tableName}-${groupName}-row-${i}`
-                return <Row key={key} rowKey={key} childRow={row} />
+                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}`
-              return <Row key={key} rowKey={key} childRow={childRow} />
+              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>

package/components/Table/components/Cell.tsx

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

package/components/Table/components/GroupRow.tsx

@@ -1,14 +1,18 @@
+import { ReactNode } from 'react'
+
 type GroupRowProps = {
-  label: string
+  label: ReactNode
   colSpan: number
+  data?: ReactNode[]
 }
 
-const GroupRow = ({ label, colSpan }: GroupRowProps) => {
+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>
   )
 }

package/components/Table/components/Row.tsx

@@ -4,13 +4,20 @@ import Cell from './Cell'
 type RowProps = {
   childRow: ReactNode[]
   rowKey: string
+  wrapColumns: boolean
+  isTotal?: boolean
+  cellMinWidth?: number
 }
 
-const Row = ({ childRow, rowKey }: RowProps) => {
+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}>{child}</Cell>
+        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth }} isBold={isTotal}>
+          {child}
+        </Cell>
       ))}
     </tr>
   )

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'
+}

package/components/_stories/DataTable.stories.tsx

@@ -5,6 +5,8 @@ import './styles.scss'
 import Example_1 from './_mocks/dashboard_no_filter.json'
 import CityStateExample from './_mocks/example-city-state.json'
 import { displayGeoName } from '@cdc/map/src/helpers/displayGeoName'
+import rowTypeData from './_mocks/row_type.json'
+import { TableConfig } from '../DataTable/types/TableConfig'
 
 const meta: Meta<typeof DataTable> = {
   title: 'Components/Organisms/DataTable',
@@ -60,3 +62,42 @@ export const Grouped: Story = {
     tabbingId: datasetKey
   }
 }
+
+export const RowType: Story = {
+  args: {
+    config: {
+      dashboard: {
+        theme: 'theme-blue',
+        title: 'RowType'
+      },
+      title: 'RowType',
+      dataUrl: '/examples/feature/__data__/ardi.json',
+      animate: false,
+      animateReplay: true,
+      palette: 'qualitative-soft',
+      aspectRatio: 1,
+      dataFormat: {
+        roundTo: 1,
+        commas: false,
+        prefix: '',
+        suffix: ''
+      },
+      legend: {
+        hide: false
+      },
+      table: {
+        label: 'Data Table',
+        expanded: true,
+        show: true,
+        customTableConfig: true
+      }
+    } as unknown as TableConfig,
+    dataConfig: { data: rowTypeData },
+    rawData: rowTypeData,
+    runtimeData: rowTypeData,
+    expandDataTable: true,
+    tableTitle: 'DataTable',
+    viewport: 'lg',
+    tabbingId: '#asdf'
+  }
+}

package/components/_stories/EditorPanel.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import DataTableEditor from '../EditorPanel/DataTableEditor'
+import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
+import { useState } from 'react'
+
+const EditorPanel = () => {
+  const { config, isDashboard } = Primary.args
+  const [_config, setConfig] = useState(config)
+  const updateField = (section, subsection, fieldName, value) => {
+    setConfig({
+      ..._config,
+      [section]: {
+        ..._config[section],
+        [fieldName]: value
+      }
+    })
+  }
+  return (
+    <Accordion>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Data Table</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <DataTableEditor config={_config} isDashboard={isDashboard} updateField={updateField} isLoadedFromUrl={false} />
+        </AccordionItemPanel>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+const meta: Meta<typeof DataTableEditor> = {
+  title: 'Components/Organisms/EditorPanel',
+  component: EditorPanel
+}
+
+export default meta
+
+type Story = StoryObj<typeof DataTableEditor>
+
+export const Primary: Story = {
+  args: {
+    config: {
+      table: {
+        label: 'Data Table',
+        show: true
+      },
+      visualizationType: 'Pie'
+    },
+    isDashboard: true
+  }
+}

package/components/_stories/Inputs.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import InputSelect from '../inputs/InputSelect'
+import { useState } from 'react'
+
+const Inputs: React.FC = ({ config }: any) => {
+  const [_config, setConfig] = useState(config)
+  const updateField = (section, subsection, fieldName, value) => {
+    setConfig({
+      ..._config,
+      [section]: {
+        ..._config[section],
+        [fieldName]: value
+      }
+    })
+  }
+  return (
+    <div>
+      <InputSelect label='Select' options={['apple', 'banana', 'orange']} fieldName='inputselect' updateField={updateField} />
+    </div>
+  )
+}
+
+const meta: Meta<typeof Inputs> = {
+  title: 'Components/Atoms/Inputs',
+  component: Inputs
+}
+
+export default meta
+
+type Story = StoryObj<typeof Inputs>
+
+export const Select: Story = {
+  args: {
+    config: {}
+  }
+}

package/components/_stories/MultiSelect.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import MultiSelect from '../MultiSelect'
+
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/Molecules/MultiSelect',
+  component: MultiSelect
+}
+
+type Story = StoryObj<typeof MultiSelect>
+
+export const Primary: Story = {
+  args: {
+    options: [
+      { value: '1', label: 'One' },
+      { value: '2', label: 'Two' },
+      { value: '3', label: 'Three' }
+    ],
+    label: 'MultiSelect',
+    updateField: (section, subsection, fieldName, value) => {}
+  }
+}
+
+export default meta