@cdc/core 4.24.10 → 4.24.12

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,21 @@ 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)}
+                        />
+                      )}
                     </>
                   ) : (
                     <NestedDropdownEditor

package/components/Filters/Filters.tsx

@@ -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
@@ -351,7 +349,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 => {
@@ -439,6 +437,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 +445,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 +466,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)}
@@ -496,18 +500,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/Footnotes/FootnotesStandAlone.tsx

@@ -15,20 +15,33 @@ type StandAloneProps = {
   viewport?: ViewPort
 }
 
-const FootnotesStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, viewport, isEditor, updateConfig }) => {
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({
+  visualizationKey,
+  config,
+  viewport,
+  isEditor,
+  updateConfig
+}) => {
   const updateField = updateFieldFactory<Footnote[]>(config, updateConfig)
   if (isEditor)
     return (
-      <EditorWrapper component={FootnotesStandAlone} visualizationKey={visualizationKey} visualizationConfig={config} updateConfig={updateConfig} type={'Footnotes'} viewport={viewport}>
+      <EditorWrapper
+        component={FootnotesStandAlone}
+        visualizationKey={visualizationKey}
+        visualizationConfig={config}
+        updateConfig={updateConfig}
+        type={'Footnotes'}
+        viewport={viewport}
+      >
         <FootnotesEditor key={visualizationKey} config={config} updateField={updateField} />
       </EditorWrapper>
     )
 
   // get the api footnotes from the config
   const apiFootnotes = useMemo(() => {
-    if (config.dataKey && config.dynamicFootnotes) {
+    const configData = config.formattedData || config.data
+    if (configData && config.dataKey && config.dynamicFootnotes) {
       const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
-      const configData = config.formattedData || config.data
       const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))
       _data.sort((a, b) => a[orderColumn] - b[orderColumn])
       return _data.map(row => ({ symbol: row[symbolColumn], text: row[textColumn] }))

package/components/Layout/components/Sidebar/components/sidebar.styles.scss

@@ -542,10 +542,6 @@
       font-weight: normal;
     }
 
-    .btn {
-      margin-top: 1em;
-    }
-
     .sort-list {
       list-style: none;
 

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,6 +1,6 @@
 .cdc-open-viz-module {
   .cdc-chart-inner-container .cove-component__content {
-    padding: 25px 15px !important;
+    padding: 25px 15px 25px 0 !important;
   }
   &.isEditor {
     overflow: auto;