@cdc/core 4.23.11 → 4.24.1

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

@@ -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

package/components/_stories/_mocks/row_type.json

@@ -0,0 +1,42 @@
+[
+  {
+    "type": "row_group",
+    "overall": "",
+    "male": "",
+    "female": "",
+    "row_type": "row_group",
+    "nullColumn": null
+  },
+  {
+    "type": "row_group_total",
+    "overall": "100",
+    "male": "50",
+    "female": "50",
+    "row_type": "row_group_total",
+    "nullColumn": null
+  },
+  {
+    "type": "regular",
+    "overall": "50",
+    "male": "25",
+    "female": "25",
+    "row_type": null,
+    "nullColumn": null
+  },
+  {
+    "type": "regular",
+    "overall": "50",
+    "male": "25",
+    "female": "25",
+    "row_type": null,
+    "nullColumn": null
+  },
+  {
+    "type": "total",
+    "overall": "100",
+    "male": "50",
+    "female": "50",
+    "row_type": "total",
+    "nullColumn": null
+  }
+]

package/components/inputs/{InputSelect.jsx → InputSelect.tsx}

@@ -1,9 +1,19 @@
-import React, { memo } from 'react'
-
 import '../../styles/v2/components/input/index.scss'
 
-const InputSelect = memo(({ label, value, options, fieldName, section = null, subsection = null, required = false, updateField, initial: initialValue, ...attributes }) => {
-  let optionsJsx = ''
+interface InputProps {
+  label?
+  value?
+  options: string[] | { [key: string]: string }
+  fieldName
+  section?
+  subsection?
+  required?
+  updateField
+  initial?
+}
+
+const InputSelect = ({ label, value, options, fieldName, section = null, subsection = null, required = false, updateField, initial: initialValue, ...attributes }: InputProps) => {
+  let optionsJsx = []
 
   if (Array.isArray(options)) {
     //Handle basic array
@@ -48,6 +58,6 @@ const InputSelect = memo(({ label, value, options, fieldName, section = null, su
       </select>
     </label>
   )
-})
+}
 
 export default InputSelect

package/components/managers/DataDesigner.tsx

@@ -8,7 +8,7 @@ import '../../styles/v2/components/data-designer.scss'
 
 type DataDesignerProps = {
   configureData?: any // todo: add description here when understood better
-  updateDescriptionProp?: () => void // used to update data description fields
+  updateDescriptionProp?: (vizKey: string, dataKey: string, propName: string, value: any) => void // used to update data description fields
   visualizationKey?: any // todo: add description here when understood better
   dataKey?: string // appears to be the data file name, ie valid-data.csv
   config?: any // can be one of many different types of chart configs that aren't fully established yet
@@ -198,16 +198,16 @@ const DataDesigner = (props: DataDesignerProps) => {
                   </div>
                   <div className='mb-2'>
                     <div className='mb-1'>Which properties in the dataset represent the numeric value? (all remaining properties will be treated as filters)</div>
-                    {configureData.dataDescription.valueKeys && configureData.dataDescription.valueKeys.length > 0 && (
+                    {configureData.dataDescription.valueKeysTallSupport && configureData.dataDescription.valueKeysTallSupport.length > 0 && (
                       <ul className='value-list'>
-                        {configureData.dataDescription.valueKeys.map((valueKey, index) => (
+                        {configureData.dataDescription.valueKeysTallSupport.map((valueKey, index) => (
                           <li key={`value-keys-list-${index}`}>
                             {valueKey}
                             <button
                               onClick={() => {
-                                let newValueKeys = configureData.dataDescription.valueKeys
+                                let newValueKeys = configureData.dataDescription.valueKeysTallSupport
                                 newValueKeys.splice(index, 1)
-                                updateDescriptionProp(visualizationKey, dataKey, 'valueKeys', newValueKeys)
+                                updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', newValueKeys)
                               }}
                             >
                               X
@@ -218,14 +218,14 @@ const DataDesigner = (props: DataDesignerProps) => {
                     )}
                     <select
                       onChange={e => {
-                        if (e.target.value && (!configureData.dataDescription.valueKeys || configureData.dataDescription.valueKeys.indexOf(e.target.value) === -1)) {
-                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeys', [...(configureData.dataDescription.valueKeys || []), e.target.value])
+                        if (e.target.value && (!configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(e.target.value) === -1)) {
+                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
                         }
                       }}
                     >
                       <option value=''>Choose an option</option>
                       {Object.keys(configureData.data[0])
-                        .filter(value => !configureData.dataDescription.valueKeys || configureData.dataDescription.valueKeys.indexOf(value) === -1)
+                        .filter(value => !configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(value) === -1)
                         .map((value, index) => (
                           <option value={value} key={`value-keys-option-${index}`}>
                             {value}

package/components/ui/{Icon.jsx → Icon.tsx}

@@ -69,17 +69,17 @@ const iconHash = {
 
 export const ICON_TYPES = Object.keys(iconHash)
 
-const Icon = ({ display = '', base, alt = '', size, color, style, ...attributes }) => {
+const Icon = ({ display = '', base = undefined, alt = '', size = undefined, color = undefined, style = undefined, ...attributes }) => {
   const IconObj = iconHash[display] || null
 
   const filteredAttrs = { ...attributes }
   delete filteredAttrs.className
 
   const styles = {
-    ...style,
     color: color ? color : null,
     width: size ? size + 'px' : null,
-    cursor: display === 'move' ? 'move' : 'default'
+    cursor: display === 'move' ? 'move' : 'default',
+    ...style
   }
 
   return (

package/helpers/DataTransform.ts

@@ -128,8 +128,36 @@ export class DataTransform {
         return standardized
       }
     } else if (description.series === true && description.singleRow === false) {
-      if (description.seriesKey !== undefined && description.xKey !== undefined && (description.valueKey !== undefined || (description.valueKeys !== undefined && description.valueKeys.length > 0))) {
-        if (description.valueKeys !== undefined) {
+      if (description.seriesKey !== undefined && description.xKey !== undefined && (description.valueKey !== undefined || (description.valueKeys !== undefined && description.valueKeys.length > 0) || (description.valueKeysTallSupport !== undefined && description.valueKeysTallSupport.length > 0))) {
+        if (description.valueKeysTallSupport !== undefined) {
+          let standardizedMapped = {}
+          let standardized: string[] = []
+
+          data.forEach(row => {
+            let uniqueKey = row[description.xKey];
+            Object.keys(row).forEach(key => {
+              if(key !== description.xKey && key !== description.seriesKey && description.valueKeysTallSupport.indexOf(key) === -1 && (!description.ignoredKeys || description.ignoredKeys.indexOf(key) === -1)){
+                uniqueKey += "|" + row[key];
+              }
+            })
+
+            if(!standardizedMapped[uniqueKey]){
+              standardizedMapped[uniqueKey] = {[description.xKey]: row[description.xKey]}
+            }
+            Object.keys(row).forEach(key => {
+              if(key !== description.xKey && key !== description.seriesKey && description.valueKeysTallSupport.indexOf(key) === -1 && (!description.ignoredKeys || description.ignoredKeys.indexOf(key) === -1)){
+                standardizedMapped[uniqueKey][key] = row[key];
+              }
+            })
+            description.valueKeysTallSupport.forEach(valueKey => {
+              standardizedMapped[uniqueKey][row[description.seriesKey] + '-' + valueKey] = row[valueKey];
+            })
+          })
+
+          standardized = Object.keys(standardizedMapped).map(key => standardizedMapped[key]);
+
+          return standardized
+        } else if (description.valueKeys !== undefined) {
           let standardizedMapped = {}
           let standardized: string[] = []
           let valueKeys = description.valueKeys

package/helpers/getFileExtension.ts

@@ -1,5 +1,28 @@
-export const getFileExtension = (path: string): string => {
-    const regex = /(?:\.([^.]+))?$/
-    const outCome: RegExpExecArray | null = regex.exec(path)
-    return outCome ? outCome[1] : ''
-}
+// export const getFileExtensionx = (path: string): string => {
+//   const regex = /(?:\.([^.]+))?$/
+//   const outCome: RegExpExecArray | null = regex.exec(path)
+//   return outCome ? outCome[1] : ''
+// }
+
+export const getFileExtension = (url: string): string => {
+  const regexForExtension = /(?:\.([^.]+))$/
+  const regexForQueryParam = /[?&]wt=(csv|json)(?:&|$)/ // Regular expression for 'wt' query parameter
+
+  const urlObject = new URL(url, window.location.origin)
+  const pathname = urlObject.pathname
+  const searchParams = urlObject.search
+
+  // First, try to get the extension from the pathname
+  const pathnameMatch = regexForExtension.exec(pathname)
+  if (pathnameMatch && pathnameMatch[1]) {
+    return pathnameMatch[1]
+  }
+
+  // Then, try to get it from the query parameter 'wt'
+  const queryParamsMatch = regexForQueryParam.exec(searchParams)
+  if (queryParamsMatch && queryParamsMatch[1]) {
+    return queryParamsMatch[1]
+  }
+
+  return ''
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.23.11",
+  "version": "4.24.1",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -30,5 +30,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ecad213667a3cb96c921eaddba43a31c84caaa08"
+  "gitHead": "a352a3f74f4b681191e3244061dbb3621f36eec3"
 }