@cdc/core 4.24.10 → 4.24.12-2

package/components/EditorPanel/DataTableEditor.tsx

@@ -83,7 +83,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           </Tooltip>
         }
       />
-      {config.type !== 'table' && (
+      {config.type !== 'table' ? (
         <CheckBox
           value={config.table.show}
           fieldName='show'
@@ -108,6 +108,15 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
             </Tooltip>
           }
         />
+      ) : (
+        <CheckBox
+          value={config.general?.showDownloadButton}
+          fieldName='showDownloadButton'
+          label='Show Download CSV link'
+          section='general'
+          updateField={updateField}
+          className='column-heading'
+        />
       )}
 
       {config.visualizationType !== 'Box Plot' && config.type !== 'table' && (
@@ -196,15 +205,18 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         />
       )}
       {config?.visualizationType !== 'Sankey' && (
-        <MultiSelect
-          key={excludedColumns.join('') + 'excluded'}
-          options={dataColumns.map(c => ({ label: c, value: c }))}
-          selected={excludedColumns}
-          fieldName='dataTable'
-          label='Exclude Columns'
-          section='columns'
-          updateField={excludeColumns}
-        />
+        <label>
+          <span className='edit-label column-heading mt-1'>Exclude Columns </span>
+          <MultiSelect
+            key={excludedColumns.join('') + 'excluded'}
+            options={dataColumns.map(c => ({ label: c, value: c }))}
+            selected={excludedColumns}
+            label={'Exclude Columns'}
+            fieldName='dataTable'
+            section='columns'
+            updateField={excludeColumns}
+          />
+        </label>
       )}
       <CheckBox
         value={config.table.collapsible}
@@ -249,15 +261,14 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
-      {config.type !== 'table' && (
-        <CheckBox
-          value={config.table.showDownloadLinkBelow}
-          fieldName='showDownloadLinkBelow'
-          label='Show Download Link Below Table'
-          section='table'
-          updateField={updateField}
-        />
-      )}
+
+      <CheckBox
+        value={config.table.showDownloadLinkBelow}
+        fieldName='showDownloadLinkBelow'
+        label='Show Download Link Below Table'
+        section='table'
+        updateField={updateField}
+      />
       <label>
         <span className='edit-label column-heading'>Table Cell Min Width</span>
         <input
@@ -267,9 +278,17 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         />
       </label>
       {config?.visualizationType !== 'Sankey' && (
-        <label>
-          <span className='edit-label column-heading'>
-            Group By{' '}
+        <Select
+          value={config.table.groupBy}
+          fieldName={'groupBy'}
+          section='table'
+          label='Group By'
+          updateField={(_section, _subSection, _fieldName, value) => changeGroupBy(value)}
+          initial={PLACEHOLDER}
+          options={groupPivotColumns.filter(
+            col => col !== config.table.pivot?.columnName && !(config.table.pivot?.valueColumns || []).includes(col)
+          )}
+          tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -281,27 +300,11 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
                 </p>
               </Tooltip.Content>
             </Tooltip>
-          </span>
-
-          <select
-            value={config.table.groupBy}
-            onChange={event => {
-              changeGroupBy(event.target.value)
-            }}
-          >
-            {[
-              PLACEHOLDER,
-              ...groupPivotColumns.filter(
-                col => col !== config.table.pivot?.columnName && col !== config.table.pivot?.valueColumn
-              )
-            ].map(option => (
-              <option key={option}>{option}</option>
-            ))}
-          </select>
-        </label>
+          }
+        />
       )}
       <Select
-        label='Pivot Column: '
+        label='Pivot Column'
         tooltip={
           <Tooltip style={{ textTransform: 'none' }}>
             <Tooltip.Target>
@@ -314,7 +317,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         }
         value={config.table.pivot?.columnName}
         options={groupPivotColumns.filter(
-          col => col !== config.table.groupBy && col !== config.table.pivot?.valueColumn
+          col => col !== config.table.groupBy && !(config.table.pivot?.valueColumns || []).includes(col)
         )}
         initial='-Select-'
         section='table'
@@ -323,18 +326,9 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         updateField={updateField}
       />
       {config.table.pivot?.columnName && (
-        <MultiSelect
-          key={config.table.pivot?.columnName}
-          options={groupPivotColumns
-            .filter(col => col !== config.table.pivot?.columnName && col !== config.table.groupBy)
-            .map(c => ({ label: c, value: c }))}
-          selected={config.table.pivot?.valueColumns}
-          label='Pivot Value Column(s) '
-          section='table'
-          subsection='pivot'
-          fieldName='valueColumns'
-          updateField={updateField}
-          tooltip={
+        <label>
+          <span className='edit-label column-heading mt-1'>
+            Pivot Value Column(s)
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -343,8 +337,20 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
                 <p>The column(s) whos values will be pivoted under the column selected as the Filter.</p>
               </Tooltip.Content>
             </Tooltip>
-          }
-        />
+          </span>
+          <MultiSelect
+            key={config.table.pivot?.columnName}
+            options={groupPivotColumns
+              .filter(col => col !== config.table.pivot?.columnName && col !== config.table.groupBy)
+              .map(c => ({ label: c, value: c }))}
+            selected={config.table.pivot?.valueColumns}
+            label='Pivot Value Column(s) '
+            section='table'
+            subsection='pivot'
+            fieldName='valueColumns'
+            updateField={updateField}
+          />
+        </label>
       )}
     </>
   )

package/components/EditorPanel/FieldSetWrapper.tsx

@@ -21,7 +21,7 @@ const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, con
   if (!show)
     return (
       <div className='mb-1'>
-        <button onClick={() => setShow(fieldKey, true)}>
+        <button className='btn btn-light' onClick={() => setShow(fieldKey, true)}>
           <Icon display='caretDown' />
         </button>
         <span> {fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
@@ -30,7 +30,7 @@ const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, con
   return (
     <fieldset className='edit-block mb-1' key={fieldKey}>
       <div className='d-flex justify-content-between'>
-        <button onClick={() => setShow(fieldKey, false)}>
+        <button className='btn btn-light' onClick={() => setShow(fieldKey, false)}>
           <Icon display='caretUp' />
         </button>
         <button

package/components/EditorPanel/Inputs.tsx

@@ -31,16 +31,6 @@ export type CheckboxProps = {
 } & Input &
   Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'>
 
-export type SelectProps = {
-  value?: string
-  options?: string[]
-  required?: boolean
-  initial?: string
-
-  // all other props
-  [x: string]: any
-} & Input
-
 const TextField = memo((props: TextFieldProps) => {
   const {
     display = true,
@@ -141,6 +131,16 @@ const CheckBox = memo((props: CheckboxProps) => {
   )
 })
 
+export type SelectProps = {
+  value?: string
+  options?: string[] | { label: string; value: string }[]
+  required?: boolean
+  initial?: string
+
+  // all other props
+  [x: string]: any
+} & Input
+
 const Select = memo((props: SelectProps) => {
   const {
     display = true,
@@ -156,11 +156,21 @@ const Select = memo((props: SelectProps) => {
     initial: initialValue,
     ...attributes
   } = props
-  let optionsJsx = options.map((optionName, index) => (
-    <option value={optionName} key={index}>
-      {optionName}
-    </option>
-  ))
+  const optionsJsx = options.map((option, index) => {
+    if (typeof option === 'string') {
+      return (
+        <option value={option} key={index}>
+          {option}
+        </option>
+      )
+    } else {
+      return (
+        <option value={option.value} key={index}>
+          {option.label}
+        </option>
+      )
+    }
+  })
 
   if (initialValue) {
     optionsJsx.unshift(
@@ -180,7 +190,7 @@ const Select = memo((props: SelectProps) => {
         {tooltip}
       </span>
       <select
-        className={required && !value ? 'warning' : ''}
+        className={`cove-form-select ${required && !value ? 'warning' : ''}`}
         name={fieldName}
         value={value}
         onChange={event => {

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -67,7 +67,12 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
 
   const addNewFilter = () => {
     const filters = config.filters ? [...config.filters] : []
-    const newVizFilter: VizFilter = { values: [], filterStyle: 'dropdown', id: Date.now() } as VizFilter
+    const newVizFilter: VizFilter = {
+      values: [],
+      filterStyle: 'dropdown',
+      id: Date.now(),
+      showDropdown: true
+    } as VizFilter
     filters.push(newVizFilter)
     updateField(null, null, 'filters', filters)
   }
@@ -125,6 +130,13 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
               </Tooltip>
             }
           />
+          <TextField
+            type='textarea'
+            label='Filter intro text'
+            value={config.filterIntro}
+            updateField={updateField}
+            fieldName='filterIntro'
+          />
           <br />
           <ul className='filters-list'>
             {/* Whether filters should apply onChange or Apply Button */}
@@ -140,43 +152,24 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                   controls={openControls}
                   deleteField={() => removeFilter(filterIndex)}
                 >
-                  <label>
-                    <span className='edit-label column-heading'>Filter Style</span>
-
-                    <select
-                      value={filter.filterStyle || 'dropdown'}
-                      onChange={e => {
-                        updateFilterStyle(filterIndex, e.target.value)
-                      }}
-                    >
-                      {filterStyleOptions.map((item, index) => {
-                        return (
-                          <option key={`filter-style-${index}`} value={item}>
-                            {item}
-                          </option>
-                        )
-                      })}
-                    </select>
-                  </label>
+                  <Select
+                    value={filter.filterStyle}
+                    fieldName='filterStyle'
+                    label='Filter Style'
+                    updateField={(_section, _subsection, _field, value) => updateFilterStyle(filterIndex, value)}
+                    options={filterStyleOptions}
+                  />
 
                   {filter.filterStyle !== 'nested-dropdown' ? (
                     <>
-                      <label>
-                        <span className='edit-label column-heading'>Filter</span>
-                        <select
-                          value={filter.columnName}
-                          onChange={e => {
-                            handleNameChange(filterIndex, e.target.value)
-                          }}
-                        >
-                          <option value=''>- Select Option -</option>
-                          {dataColumns.map((dataKey, filterIndex) => (
-                            <option value={dataKey} key={filterIndex}>
-                              {dataKey}
-                            </option>
-                          ))}
-                        </select>
-                      </label>
+                      <Select
+                        value={filter.columnName}
+                        fieldName='columnName'
+                        label='Filter'
+                        updateField={(_section, _subsection, _field, value) => handleNameChange(filterIndex, value)}
+                        options={dataColumns}
+                        initial='- Select Option -'
+                      />
 
                       <label>
                         <span className='edit-showDropdown column-heading'>Show Filter Input</span>
@@ -233,27 +226,32 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         />
                       </label>
 
-                      <label>
-                        <span className='edit-filterOrder column-heading'>Filter Order</span>
-                        <select
-                          value={filter.order ? filter.order : 'asc'}
-                          onChange={e => updateFilterProp('order', filterIndex, e.target.value)}
-                        >
-                          {filterOrderOptions.map((option, index) => {
-                            return (
-                              <option value={option.value} key={`filter-${index}`}>
-                                {option.label}
-                              </option>
-                            )
-                          })}
-                        </select>
-                        {filter.order === 'cust' && (
-                          <FilterOrder
-                            orderedValues={filter.orderedValues || filter.values}
-                            handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
-                          />
-                        )}
-                      </label>
+                      <Select
+                        value={filter.order || 'asc'}
+                        fieldName='order'
+                        label='Filter Order'
+                        updateField={(_section, _subSection, _field, value) =>
+                          updateFilterProp('order', filterIndex, value)
+                        }
+                        options={filterOrderOptions}
+                      />
+                      {filter.order === 'cust' && (
+                        <FilterOrder
+                          orderedValues={filter.orderedValues || filter.values}
+                          handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
+                        />
+                      )}
+                      {filter.order === 'column' && (
+                        <Select
+                          value={filter.orderColumn}
+                          fieldName='orderColumn'
+                          label='Order Column'
+                          updateField={(_section, _subSection, _field, value) =>
+                            updateFilterProp('orderColumn', filterIndex, value)
+                          }
+                          options={dataColumns}
+                        />
+                      )}
                     </>
                   ) : (
                     <NestedDropdownEditor
@@ -287,6 +285,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         updateFilterProp('parents', filterIndex, value)
                       }}
                       options={getParentFilterOptions(filterIndex)}
+                      selected={config.filters[filterIndex].parents}
                     />
                   </label>
                 </FieldSetWrapper>

package/components/Filters/Filters.tsx

@@ -41,18 +41,25 @@ export const filterOrderOptions: { label: string; value: OrderBy }[] = [
   {
     label: 'Custom',
     value: 'cust'
-  }
+  },
+  { label: 'Order By Data Column', value: 'column' }
 ]
 
-const hasStandardFilterBehavior = ['chart', 'table']
-
 export const useFilters = props => {
   const [showApplyButton, setShowApplyButton] = useState(false)
 
   // Desconstructing: notice, adding more descriptive visualizationConfig name over config
   // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
-  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, getUniqueValues } = props
-  const { type, data } = visualizationConfig
+  const {
+    config: visualizationConfig,
+    setConfig,
+    filteredData,
+    setFilteredData,
+    excludedData,
+    getUniqueValues,
+    standaloneMap
+  } = props
+  const { data } = visualizationConfig
 
   /**
    * Re-orders a filter based on two indices and updates the runtime filters array and filters state
@@ -72,9 +79,7 @@ export const useFilters = props => {
     const [movedItem] = updatedValues.splice(idx1, 1)
     updatedValues.splice(idx2, 0, movedItem)
 
-    const filtersCopy = hasStandardFilterBehavior.includes(visualizationConfig.type)
-      ? [...visualizationConfig.filters]
-      : [...filteredData]
+    const filtersCopy = !standaloneMap ? [...visualizationConfig.filters] : [...filteredData]
     const filterItem = { ...filtersCopy[filterIndex] }
 
     // Overwrite filterItem.values since thats what we map through in the editor panel
@@ -86,7 +91,7 @@ export const useFilters = props => {
     // Update the filters
     filtersCopy[filterIndex] = filterItem
 
-    if (visualizationConfig.type === 'map') {
+    if (standaloneMap) {
       setFilteredData(filtersCopy)
     }
 
@@ -94,7 +99,7 @@ export const useFilters = props => {
   }
 
   const changeFilterActive = (index, value) => {
-    let newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
+    let newFilters = standaloneMap ? [...filteredData] : [...visualizationConfig.filters]
 
     if (visualizationConfig.filterBehavior === 'Apply Button') {
       newFilters[index].queuedActive = value
@@ -120,7 +125,7 @@ export const useFilters = props => {
         queryParams[newFilter?.subGrouping?.setByQueryParameter] = newFilter.subGrouping.active
         updateQueryString(queryParams)
       }
-      setFilteredData(newFilters[index])
+      setFilteredData(newFilters)
     }
 
     if (!visualizationConfig.dynamicSeries) {
@@ -132,15 +137,12 @@ export const useFilters = props => {
     }
 
     // Used for setting active filter, fromHash breaks the filteredData functionality.
-    if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
+    if (standaloneMap && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(newFilters)
     }
 
     // If we're on a chart and not using the apply button
-    if (
-      hasStandardFilterBehavior.includes(visualizationConfig.type) &&
-      visualizationConfig.filterBehavior === 'Filter Change'
-    ) {
+    if (!standaloneMap && visualizationConfig.filterBehavior === 'Filter Change') {
       const newFilteredData = filterVizData(newFilters, excludedData)
       setFilteredData(newFilteredData)
 
@@ -204,11 +206,9 @@ export const useFilters = props => {
 
     setConfig({ ...visualizationConfig, filters: newFilters })
 
-    if (type === 'map') {
+    if (standaloneMap) {
       setFilteredData(newFilters, excludedData)
-    }
-
-    if (hasStandardFilterBehavior.includes(visualizationConfig.type)) {
+    } else {
       setFilteredData(filterVizData(newFilters, excludedData))
     }
 
@@ -240,7 +240,7 @@ export const useFilters = props => {
 
     setConfig({ ...visualizationConfig, filters: newFilters })
 
-    if (type === 'map') {
+    if (standaloneMap) {
       setFilteredData(newFilters, excludedData)
     } else {
       setFilteredData(filterVizData(newFilters, excludedData))
@@ -249,9 +249,7 @@ export const useFilters = props => {
 
   const filterConstants = {
     buttonText: 'Apply Filters',
-    resetText: 'Reset All',
-    introText: `Make a selection from the filters to change the visualization information.`,
-    applyText: 'Select the apply button to update the visualization information.'
+    resetText: 'Reset All'
   }
 
   // prettier-ignore
@@ -276,13 +274,12 @@ type FilterProps = {
   setFilteredData: Function
   // updating function for setting fitlerBehavior
   setConfig: Function
-  // exclusions
-  exclusions: any[]
+  standaloneMap?: boolean
 }
 
 const Filters = (props: FilterProps) => {
-  const { config: visualizationConfig, filteredData, dimensions } = props
-  const { filters, type, general, theme, filterBehavior } = visualizationConfig
+  const { config: visualizationConfig, filteredData, dimensions, standaloneMap } = props
+  const { filters, general, theme, filterBehavior } = visualizationConfig
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
   const id = useId()
@@ -351,7 +348,7 @@ const Filters = (props: FilterProps) => {
         id={`filter-${outerIndex}`}
         name={label}
         aria-label={`Filter by ${label}`}
-        className='filter-select'
+        className='cove-form-select'
         data-index='0'
         value={active}
         onChange={e => {
@@ -365,7 +362,7 @@ const Filters = (props: FilterProps) => {
 
   const vizFiltersWithValues = useMemo(() => {
     // Here charts is using config.filters where maps is using a runtime value
-    let vizfilters = type === 'map' ? filteredData : filters
+    let vizfilters = standaloneMap ? filteredData : filters
     if (!vizfilters) return []
     if (vizfilters.fromHash) delete vizfilters.fromHash // support for Maps config
     return addValuesToFilters(vizfilters as VizFilter[], visualizationConfig.data)
@@ -439,6 +436,7 @@ const Filters = (props: FilterProps) => {
 
       const classList = [
         'single-filters',
+        'form-group mr-3',
         mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
       ]
       const mobileExempt = ['nested-dropdown', 'multi-select'].includes(filterStyle)
@@ -446,7 +444,11 @@ const Filters = (props: FilterProps) => {
       return (
         <div className={classList.join(' ')} key={outerIndex}>
           <>
-            {label && <label htmlFor={`filter-${outerIndex}`}>{label}</label>}
+            {label && (
+              <label className='font-weight-bold mt-1 mb-0' htmlFor={`filter-${outerIndex}`}>
+                {label}
+              </label>
+            )}
             {filterStyle === 'tab' && !mobileFilterStyle && Tabs}
             {filterStyle === 'pill' && !mobileFilterStyle && Pills}
             {filterStyle === 'tab bar' && !mobileFilterStyle && <TabBar filter={singleFilter} index={outerIndex} />}
@@ -463,6 +465,7 @@ const Filters = (props: FilterProps) => {
               <NestedDropdown
                 activeGroup={(singleFilter.active as string) || (singleFilter.queuedActive || [])[0]}
                 activeSubGroup={(singleFilter.subGrouping?.active as string) || (singleFilter.queuedActive || [])[1]}
+                filterIndex={outerIndex}
                 options={getNestedOptions(singleFilter)}
                 listLabel={label}
                 handleSelectedItems={value => changeFilterActive(outerIndex, value)}
@@ -488,7 +491,7 @@ const Filters = (props: FilterProps) => {
   const getClasses = () => {
     const { visualizationType, legend } = visualizationConfig || {}
     const baseClass = 'filters-section'
-    const conditionalClass = type === 'map' ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
+    const conditionalClass = standaloneMap ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
     const legendClass = legend && !legend.hide && legend.position === 'top' ? 'mb-0' : null
 
     return [baseClass, conditionalClass, legendClass].filter(Boolean)
@@ -496,18 +499,19 @@ const Filters = (props: FilterProps) => {
 
   return (
     <section className={getClasses().join(' ')}>
-      <p className='filters-section__intro-text'>
-        {filters?.some(filter => filter.active && filter.columnName) ? filterConstants.introText : ''}{' '}
-        {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
-      </p>
-      <div className='filters-section__wrapper'>
+      {visualizationConfig.filterIntro && (
+        <p className='filters-section__intro-text'>{visualizationConfig.filterIntro}</p>
+      )}
+      <div className='d-flex flex-wrap w-100 filters-section__wrapper'>
         {' '}
         <>
           <Style />
           {filterBehavior === 'Apply Button' ? (
             <div className='filters-section__buttons'>
               <Button
-                onClick={() => handleApplyButton(filters)}
+                onClick={e => {
+                  handleApplyButton(filters)
+                }}
                 disabled={!showApplyButton}
                 className={[general?.headerColor ? general.headerColor : theme, 'apply'].join(' ')}
               >

package/components/Filters/helpers/handleSorting.ts

@@ -7,6 +7,11 @@ export const handleSorting = singleFilter => {
     return singleFilter
   }
 
+  if (singleFilter.order === 'column') {
+    // sorting is done in the generateValuesForFilter function
+    return singleFilter
+  }
+
   const sort = (a, b) => {
     const asc = singleFilter.order !== 'desc'
     return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })