@cdc/dashboard 4.23.4 → 4.23.6

package/src/components/Header.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useContext } from 'react'
 
 import ConfigContext from '../ConfigContext'
 
+import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import Modal from '@cdc/core/components/ui/Modal'
@@ -13,6 +14,8 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
 
   const [columns, setColumns] = useState([])
 
+  const transform = new DataTransform()
+
   const changeConfigValue = (parentObj, key, value) => {
     let newConfig = { ...config }
     if (!newConfig[parentObj]) newConfig[parentObj] = {}
@@ -45,6 +48,13 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
 
     dashboardConfig.sharedFilters.splice(index, 1)
 
+    // Ensures URL filters refresh after filter removal
+    if (dashboardConfig.datasets) {
+      Object.keys(dashboardConfig.datasets).forEach(datasetKey => {
+        delete dashboardConfig.datasets[datasetKey].runtimeDataUrl
+      })
+    }
+
     updateConfig({ ...config, dashboard: dashboardConfig })
 
     overlay?.actions.toggleOverlay()
@@ -90,7 +100,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
           if (config.datasets[dataKeys[i]].dataDescription) {
             try {
               config.datasets[dataKeys[i]].data = transform.autoStandardize(config.datasets[dataKeys[i]].data)
-              config.datasets[dataKeys[i]].data = transform.developerStandardize(config.datasets[dataKeys[i]].data, config.datasets[dataKey].dataDescription)
+              config.datasets[dataKeys[i]].data = transform.developerStandardize(config.datasets[dataKeys[i]].data, config.datasets[dataKeys[i]].dataDescription)
             } catch (e) {
               //Data not able to be standardized, leave as is
             }
@@ -98,7 +108,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
         }
 
         if (config.datasets[dataKeys[i]].data) {
-          config.datasets[dataKeys[i]].data.map(row => {
+          config.datasets[dataKeys[i]].data.forEach(row => {
             Object.keys(row).forEach(columnName => (columns[columnName] = true))
           })
         }
@@ -128,6 +138,14 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
       overlay?.actions.openOverlay(filterModal(newFilter, index))
     }
 
+    const updateFilterPropByFunction = (index, func) => {
+      let newFilter = { ...filter }
+
+      newFilter = func(newFilter)
+
+      overlay?.actions.openOverlay(filterModal(newFilter, index))
+    }
+
     const addFilterUsedBy = (filter, index, value) => {
       if (!filter.usedBy) filter.usedBy = []
       filter.usedBy.push(value)
@@ -142,6 +160,46 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
       }
     }
 
+    const updateLabel = (e, value) => {
+      let newLabels = filter.labels || {}
+
+      newLabels[value] = e.target.value
+
+      updateFilterProp('labels', index, newLabels)
+    }
+
+    const removeValue = valueIndex => {
+      let newLabels = filter.labels || {}
+      let newValues = filter.values || []
+
+      delete newLabels[filter.values[valueIndex]]
+      newValues.splice(valueIndex, 1)
+
+      updateFilterPropByFunction(index, newFilter => {
+        newFilter.labels = newLabels
+        newFilter.orderedValue = newValues
+        return newFilter
+      })
+    }
+
+    const addNewValue = e => {
+      e.preventDefault()
+      if (!filter.values || filter.values.indexOf(e.target[0].value) === -1) {
+        let newValues = filter.values || []
+        newValues.push(e.target[0].value)
+
+        updateFilterPropByFunction(index, newFilter => {
+          newFilter.values = newValues
+          if (!newFilter.active) {
+            newFilter.active = e.target[0].value
+          }
+          return newFilter
+        })
+
+        e.target[0].value = ''
+      }
+    }
+
     return (
       <Modal>
         <Modal.Content>
@@ -157,81 +215,149 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
               Remove Filter
             </button>
             <label>
-              <span className='edit-label column-heading'>Filter: </span>
-              <select
-                value={filter.columnName}
-                onChange={e => {
-                  updateFilterProp('columnName', index, e.target.value)
-                }}
-              >
-                <option value=''>- Select Option -</option>
-                {columns.map(dataKey => (
-                  <option value={dataKey} key={`filter-column-select-item-${dataKey}`}>
-                    {dataKey}
-                  </option>
-                ))}
-              </select>
-            </label>
-            <label>
-              <span className='edit-label column-heading'>Label: </span>
-              <input
-                type='text'
-                value={filter.key}
-                onChange={e => {
-                  updateFilterProp('key', index, e.target.value)
-                }}
-              />
-            </label>
-            <label>
-              <span className='edit-label column-heading'>Show Dropdown</span>
-              <input
-                type='checkbox'
-                defaultChecked={filter.showDropdown === true}
-                onChange={e => {
-                  updateFilterProp('showDropdown', index, !filter.showDropdown)
-                }}
-              />
-            </label>
-            <label>
-              <span className='edit-label column-heading'>Set By: </span>
-              <select value={filter.setBy} onChange={e => updateFilterProp('setBy', index, e.target.value)}>
-                <option value=''>- Select Option -</option>
-                {Object.keys(config.visualizations).map(vizKey => (
-                  <option value={vizKey} key={`set-by-select-item-${vizKey}`}>
-                    {config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}
-                  </option>
-                ))}
-              </select>
-            </label>
-            <label>
-              <span className='edit-label column-heading'>Used By:</span>
-              <ul>
-                {filter.usedBy &&
-                  filter.usedBy.map(vizKey => (
-                    <li key={`used-by-list-item-${vizKey}`}>
-                      <span>{config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}</span>{' '}
-                      <button
-                        onClick={e => {
-                          e.preventDefault()
-                          removeFilterUsedBy(filter, index, vizKey)
-                        }}
-                      >
-                        X
-                      </button>
-                    </li>
-                  ))}
-              </ul>
-              <select onChange={e => addFilterUsedBy(filter, index, e.target.value)}>
-                <option value=''>- Select Option -</option>
-                {Object.keys(config.visualizations)
-                  .filter(vizKey => filter.setBy !== vizKey && (!filter.usedBy || filter.usedBy.indexOf(vizKey) === -1) && !config.visualizations[vizKey].usesSharedFilter)
-                  .map(vizKey => (
-                    <option value={vizKey} key={`used-by-select-item-${vizKey}`}>
-                      {config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}
-                    </option>
-                  ))}
+              <span className='edit-label column-heading'>Filter Type:</span>
+              <select defaultValue={filter.type || 'data'} onChange={e => updateFilterProp('type', index, e.target.value)}>
+                <option value='url'>URL</option>
+                <option value='data'>Data</option>
               </select>
             </label>
+            {filter.type === 'url' && (
+              <>
+                <label>
+                  <span className='edit-label column-heading'>Label: </span>
+                  <input
+                    type='text'
+                    value={filter.key}
+                    onChange={e => {
+                      updateFilterProp('key', index, e.target.value)
+                    }}
+                  />
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>URL to Filter: </span>
+                  <select defaultValue={filter.datasetKey || ''} onChange={e => updateFilterProp('datasetKey', index, e.target.value)}>
+                    <option value=''>- Select Option -</option>
+                    {Object.keys(config.datasets).map(datasetKey => {
+                      if (config.datasets[datasetKey].dataUrl) {
+                        return (
+                          <option key={datasetKey} value={datasetKey}>
+                            {config.datasets[datasetKey].dataUrl.substring(0, 50)}
+                          </option>
+                        )
+                      }
+                      return <React.Fragment key={datasetKey}></React.Fragment>
+                    })}
+                  </select>
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Query string parameter</span> <input type='text' defaultValue={filter.queryParameter} onChange={e => updateFilterProp('queryParameter', index, e.target.value)} />
+                </label>
+                <span className='edit-label column-heading'>Values</span>{' '}
+                <ul className='value-list'>
+                  {filter.values &&
+                    filter.values.map((value, valueIndex) => (
+                      <li>
+                        {value}
+                        <input type='text' value={filter.labels ? filter.labels[value] : undefined} onChange={e => updateLabel(e, value)} />
+                        <button onClick={() => removeValue(valueIndex)}>X</button>
+                      </li>
+                    ))}
+                </ul>
+                <form onSubmit={addNewValue}>
+                  <input type='text' /> <button type='submit'>Add New Value</button>
+                </form>
+              </>
+            )}
+            {filter.type !== 'url' && (
+              <>
+                <label>
+                  <span className='edit-label column-heading'>Filter: </span>
+                  <select
+                    value={filter.columnName}
+                    onChange={e => {
+                      updateFilterProp('columnName', index, e.target.value)
+                    }}
+                  >
+                    <option value=''>- Select Option -</option>
+                    {columns.map(dataKey => (
+                      <option value={dataKey} key={`filter-column-select-item-${dataKey}`}>
+                        {dataKey}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Label: </span>
+                  <input
+                    type='text'
+                    value={filter.key}
+                    onChange={e => {
+                      updateFilterProp('key', index, e.target.value)
+                    }}
+                  />
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Show Dropdown</span>
+                  <input
+                    type='checkbox'
+                    defaultChecked={filter.showDropdown === true}
+                    onChange={e => {
+                      updateFilterProp('showDropdown', index, !filter.showDropdown)
+                    }}
+                  />
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Set By: </span>
+                  <select value={filter.setBy} onChange={e => updateFilterProp('setBy', index, e.target.value)}>
+                    <option value=''>- Select Option -</option>
+                    {Object.keys(config.visualizations).map(vizKey => (
+                      <option value={vizKey} key={`set-by-select-item-${vizKey}`}>
+                        {config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Used By:</span>
+                  <ul>
+                    {filter.usedBy &&
+                      filter.usedBy.map(vizKey => (
+                        <li key={`used-by-list-item-${vizKey}`}>
+                          <span>{config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}</span>{' '}
+                          <button
+                            onClick={e => {
+                              e.preventDefault()
+                              removeFilterUsedBy(filter, index, vizKey)
+                            }}
+                          >
+                            X
+                          </button>
+                        </li>
+                      ))}
+                  </ul>
+                  <select onChange={e => addFilterUsedBy(filter, index, e.target.value)}>
+                    <option value=''>- Select Option -</option>
+                    {Object.keys(config.visualizations)
+                      .filter(vizKey => filter.setBy !== vizKey && (!filter.usedBy || filter.usedBy.indexOf(vizKey) === -1) && !config.visualizations[vizKey].usesSharedFilter)
+                      .map(vizKey => (
+                        <option value={vizKey} key={`used-by-select-item-${vizKey}`}>
+                          {config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}
+                        </option>
+                      ))}
+                  </select>
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Reset Label: </span>
+                  <input
+                    type='text'
+                    value={filter.resetLabel ? filter.resetLabel : ''}
+                    onChange={e => {
+                      updateFilterProp('resetLabel', index, e.target.value)
+                    }}
+                  />
+                </label>
+              </>
+            )}
           </fieldset>
           <button type='button' className='btn btn-primary' style={{ display: 'inline-block', 'margin-right': '1em' }} onClick={overlay?.actions.toggleOverlay}>
             Cancel
@@ -258,7 +384,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
         </div>
       )}
       {!subEditor && (
-        <div className="toggle-bar__wrapper">
+        <div className='toggle-bar__wrapper'>
           <ul className='toggle-bar'>
             <li
               className={tabSelected === 0 ? 'active' : 'inactive'}
@@ -317,17 +443,18 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
             )}
             {tabSelected === 2 && (
               <>
-
-                <div className="wrap">
+                <div className='wrap'>
                   <label>
                     <input type='checkbox' defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)} />
                     Show Data Table(s)
-                  </label><br />
+                  </label>
+                  <br />
 
                   <label>
                     <input type='checkbox' defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
                     Expanded by Default
-                  </label><br />
+                  </label>
+                  <br />
                 </div>
 
                 {/* <div className="wrap">
@@ -341,7 +468,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
                   </label>
                 </div> */}
 
-                <div className="wrap">
+                <div className='wrap'>
                   <label>
                     <input type='checkbox' defaultChecked={config.table.limitHeight} onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)} />
                     Limit Table Height
@@ -349,7 +476,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
                   {config.table.limitHeight && <input class='table-height-input' type='text' placeholder='Height (px)' defaultValue={config.table.height} onChange={e => changeConfigValue('table', 'height', e.target.value)} />}
                 </div>
 
-                <div className="wrap">
+                <div className='wrap'>
                   <label>
                     <input type='checkbox' defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
                     Show Download CSV Link
@@ -362,10 +489,9 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
               </>
             )}
           </div>
-        </div >
-      )
-      }
-    </div >
+        </div>
+      )}
+    </div>
   )
 }
 

package/src/data/initial-state.js

@@ -7,6 +7,7 @@ export default {
   table: {
     label: 'Data Table',
     show: true,
-    showDownloadUrl: false
+    showDownloadUrl: false,
+    showVertical: true,
   }
 }