@cdc/dashboard 4.23.3 → 4.23.5

package/src/components/Header.jsx

@@ -2,6 +2,8 @@ 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'
 
@@ -12,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] = {}
@@ -44,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()
@@ -89,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
             }
@@ -97,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))
           })
         }
@@ -127,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)
@@ -141,6 +160,47 @@ 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>
@@ -156,81 +216,146 @@ 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>{' '}
+                <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={e => {
-                          e.preventDefault()
-                          removeFilterUsedBy(filter, index, vizKey)
-                        }}
+                        onClick={() => removeValue(valueIndex)}
                       >
                         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}`}>
+              <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>
+                </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>
+            </>}
           </fieldset>
           <button type='button' className='btn btn-primary' style={{ display: 'inline-block', 'margin-right': '1em' }} onClick={overlay?.actions.toggleOverlay}>
             Cancel
@@ -320,7 +445,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
                 <div className="wrap">
                   <label>
                     <input type='checkbox' defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)} />
-                    Show Table
+                    Show Data Table(s)
                   </label><br />
 
                   <label>
@@ -351,11 +476,11 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
                 <div className="wrap">
                   <label>
                     <input type='checkbox' defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
-                    Show CSV Button
+                    Show Download CSV Link
                   </label>
                   <label>
                     <input type='checkbox' defaultChecked={config.table.showDownloadUrl} onChange={e => changeConfigValue('table', 'showDownloadUrl', e.target.checked)} />
-                    Show Link to Dataset
+                    Show URL to Automatically Updated Data
                   </label>
                 </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,
   }
 }

package/src/index.jsx

@@ -4,11 +4,12 @@ import ReactDOM from 'react-dom/client'
 import CdcDashboard from './CdcDashboard'
 
 let isEditor = window.location.href.includes('editor=true')
+let isDebug = window.location.href.includes('debug=true')
 
 let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcDashboard configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
-  </React.StrictMode>,
+    <CdcDashboard configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
+  </React.StrictMode>
 )

package/src/scss/main.scss

@@ -48,7 +48,8 @@
       .wrap {
         display: inline-flex;
         flex-wrap: wrap;
-        width: 20%;
+        width: 33%;  // changed from 20% so that long checkbox name will fit without wrapping
+        font-size: 0.8em;
 
         .table-height-input {
           width: 100%;
@@ -322,4 +323,4 @@
     display: block;
     margin: 1em 0;
   }
-}
+}