@cdc/dashboard 1.1.4 → 9.22.9

package/src/components/{Column.js → Column.jsx}

@@ -1,11 +1,11 @@
-import React, { useContext, memo } from 'react'
+import React, { useContext } from 'react'
 import { useDrop } from 'react-dnd'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 import Widget from './Widget'
 
 const Column = ({ data, rowIdx, colIdx }) => {
-  const { visualizations } = useContext(Context)
+  const { visualizations } = useContext(ConfigContext)
 
   const [ { isOver, canDrop }, drop ] = useDrop(() => ({
     accept: 'vis-widget',
@@ -28,19 +28,21 @@ const Column = ({ data, rowIdx, colIdx }) => {
     'column-size--' + data.width,
   ]
 
-  if(isOver && canDrop) {
+  if (isOver && canDrop) {
     classNames.push('column--drop')
   }
 
-  if(widget) {
+  if (widget) {
     classNames.push('column--populated')
   }
 
   return (
     <div className={classNames.join(' ')} ref={drop}>
-      {widget ? <Widget data={{rowIdx, colIdx, ...widget}} type={widget.visualizationType ?? widget.general?.geoType} /> : <p className="builder-column__text">Drag and drop <br/> visualization</p>}
+      {widget ?
+        <Widget data={{ rowIdx, colIdx, ...widget }} type={widget.visualizationType ?? widget.general?.geoType}/> :
+        <p className="builder-column__text">Drag and drop <br/> visualization</p>}
     </div>
   )
 }
 
-export default Column
+export default Column

package/src/components/DataTable.tsx

@@ -15,11 +15,9 @@ import { Base64 } from 'js-base64';
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 
-import Context from '../context';
+export default function DataTable(props) {
 
-export default function DataTable() {
-
-  const { data, config } = useContext<any>(Context);
+  const { data, datasetKey, config } = props;
 
   const [tableExpanded, setTableExpanded] = useState<boolean>(config.table ? config.table.expanded : false);
   const [accessibilityLabel, setAccessibilityLabel] = useState('');
@@ -46,7 +44,7 @@ export default function DataTable() {
         aria-label="Download this data in a CSV file format."
         className={`btn btn-download no-border`}
       >
-        Download Data (CSV)
+        Download {datasetKey ? `"${datasetKey}"` : 'Data'} (CSV)
       </a>
     )
   });
@@ -60,9 +58,7 @@ export default function DataTable() {
       return [{
           Header : 'No Data Found'
       }];
-    }
-
-    else {
+    } else {
       Object.keys(data[0]).map((key) => {
           const newCol = {
             Header: key,
@@ -125,12 +121,13 @@ export default function DataTable() {
     <ErrorBoundary component="DataTable">
       <section className={`data-table-container`} aria-label={accessibilityLabel}>
           <div
+            role="button"
             className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}
             onClick={() => { setTableExpanded(!tableExpanded); }}
             tabIndex={0}
             onKeyDown={(e) => { if (e.keyCode === 13) { setTableExpanded(!tableExpanded); } }}
           >
-            {config.table.label}
+            {config.table.label}{datasetKey ? `: ${datasetKey}` : ''}
           </div>
           <div className="table-container">
             <table  className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}  hidden={!tableExpanded} {...getTableProps()}>

package/src/components/EditorPanel.js

@@ -268,87 +268,243 @@ const EditorPanel = memo(() => {
 
   return (
     <ErrorBoundary component="EditorPanel">
-      {config.runtime && config.runtime.editorErrorMessage && <Error /> }
-      <button className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={() => setDisplayPanel(!displayPanel) }></button>
-      <section className={displayPanel ? 'editor-panel cove' : 'hidden editor-panel cove'}>
+      {config.runtime && config.runtime.editorErrorMessage && <Error />}
+      <button
+        className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`}
+        title={displayPanel ? `Collapse Editor` : `Expand Editor`}
+        onClick={() => setDisplayPanel(!displayPanel)}
+      ></button>
+      <section
+        className={
+          displayPanel ? "editor-panel cove" : "hidden editor-panel cove"
+        }
+      >
         <div className="heading-2">Configure</div>
         <section className="form-container">
           <form>
             <Accordion allowZeroExpanded={true}>
-              <AccordionItem> {/* General */}
+              <AccordionItem>
+                {" "}
+                {/* General */}
                 <AccordionItemHeading>
-                  <AccordionItemButton>
-                    General
-                  </AccordionItemButton>
+                  <AccordionItemButton>General</AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <TextField value={config.dashboard.title} section="dashboard" fieldName="title" label="Title" updateField={updateField} />
-                  <TextField type="textarea" value={config.dashboard.description} section="dashboard" fieldName="description" label="Description" updateField={updateField} tooltip={
-                    <Tooltip style={{textTransform: 'none'}}>
-                      <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
-                      <Tooltip.Content>
-                        <p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
-                      </Tooltip.Content>
-                    </Tooltip>
-                  }/>
+                  <TextField
+                    value={config.dashboard.title}
+                    section="dashboard"
+                    fieldName="title"
+                    label="Title"
+                    updateField={updateField}
+                  />
+
+                  <TextField
+                    value={"Super Title"}
+                    updateField={updateField}
+                    section="general"
+                    fieldName="superTitle"
+                    label="Super Title"
+                    placeholder="Super Title"
+                    tooltip={
+                      <Tooltip style={{ textTransform: "none" }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display="question"
+                            style={{ marginLeft: "0.5rem" }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Super Title</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+
+                  <TextField
+                    type="textarea"
+                    value={"Intro Text"}
+                    updateField={updateField}
+                    section="general"
+                    fieldName="introText"
+                    label="Intro Text"
+                    tooltip={
+                      <Tooltip style={{ textTransform: "none" }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display="question"
+                            style={{ marginLeft: "0.5rem" }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Intro Text</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+
+                  <TextField
+                    type="textarea"
+                    value={config.dashboard.description}
+                    section="dashboard"
+                    fieldName="description"
+                    label="Description"
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: "none" }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display="question"
+                            style={{ marginLeft: "0.5rem" }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            Enter supporting text to display below the data
+                            visualization, if applicable. The following HTML
+                            tags are supported: strong, em, sup, and sub.
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+
+                  <TextField
+                    type="textarea"
+                    value={"Foootnotes"}
+                    updateField={updateField}
+                    section="general"
+                    fieldName="footnotes"
+                    label="Footnotes"
+                    tooltip={
+                      <Tooltip style={{ textTransform: "none" }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display="question"
+                            style={{ marginLeft: "0.5rem" }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Footnotes</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                 </AccordionItemPanel>
               </AccordionItem>
               <AccordionItem>
                 <AccordionItemHeading>
-                  <AccordionItemButton>
-                    Filters
-                  </AccordionItemButton>
+                  <AccordionItemButton>Filters</AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
                   <ul className="filters-list">
-                    {config.dashboard.filters && config.dashboard.filters.map((filter, index) => (
-                        <fieldset className="edit-block" key={filter.columnName + index}>
-                          <button type="button" className="remove-column" onClick={() => {removeFilter(index)}}>Remove</button>
+                    {config.dashboard.filters &&
+                      config.dashboard.filters.map((filter, index) => (
+                        <fieldset
+                          className="edit-block"
+                          key={filter.columnName + index}
+                        >
+                          <button
+                            type="button"
+                            className="remove-column"
+                            onClick={() => {
+                              removeFilter(index);
+                            }}
+                          >
+                            Remove
+                          </button>
                           <label>
-                            <span className="edit-label column-heading">Filter</span>
-                            <select value={filter.columnName} onChange={(e) => {updateFilterProp('columnName', index, e.target.value)}}>
+                            <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>
                               {getColumns().map((dataKey) => (
-                                <option value={dataKey} key={dataKey}>{dataKey}</option>
+                                <option value={dataKey} key={dataKey}>
+                                  {dataKey}
+                                </option>
                               ))}
                             </select>
                           </label>
                           <label>
-                            <span className="edit-label column-heading">Label</span>
-                            <input type="text" value={filter.label} onChange={(e) => {updateFilterProp('label', index, e.target.value)}}/>
+                            <span className="edit-label column-heading">
+                              Label
+                            </span>
+                            <input
+                              type="text"
+                              value={filter.label}
+                              onChange={(e) => {
+                                updateFilterProp(
+                                  "label",
+                                  index,
+                                  e.target.value
+                                );
+                              }}
+                            />
                           </label>
                         </fieldset>
-                      )
-                    )}
+                      ))}
                   </ul>
 
-                  <button type="button" onClick={addNewFilter} className="btn btn-primary">Add Filter</button>
+                  <button
+                    type="button"
+                    onClick={addNewFilter}
+                    className="btn btn-primary"
+                  >
+                    Add Filter
+                  </button>
                 </AccordionItemPanel>
               </AccordionItem>
               <AccordionItem>
                 <AccordionItemHeading>
-                  <AccordionItemButton>
-                    Data Table
-                  </AccordionItemButton>
+                  <AccordionItemButton>Data Table</AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <CheckBox value={config.table.show} section="table" fieldName="show" label="Show Table" updateField={updateField}  />
-                  <CheckBox value={config.table.expanded} section="table" fieldName="expanded" label="Expanded by Default" updateField={updateField} />
-                  <CheckBox value={config.table.download} section="table" fieldName="download" label="Display Download Button" updateField={updateField} />
-                  <TextField value={config.table.label} section="table" fieldName="label" label="Label" updateField={updateField} />
+                  <CheckBox
+                    value={config.table.show}
+                    section="table"
+                    fieldName="show"
+                    label="Show Table"
+                    updateField={updateField}
+                  />
+                  <CheckBox
+                    value={config.table.expanded}
+                    section="table"
+                    fieldName="expanded"
+                    label="Expanded by Default"
+                    updateField={updateField}
+                  />
+                  <CheckBox
+                    value={config.table.download}
+                    section="table"
+                    fieldName="download"
+                    label="Display Download Button"
+                    updateField={updateField}
+                  />
+                  <TextField
+                    value={config.table.label}
+                    section="table"
+                    fieldName="label"
+                    label="Label"
+                    updateField={updateField}
+                  />
                 </AccordionItemPanel>
               </AccordionItem>
-           </Accordion>
+            </Accordion>
           </form>
         </section>
-        <ReactTooltip
-            html={true}
-            multiline={true}
-            className="helper-tooltip"
-          />
+        <ReactTooltip html={true} multiline={true} className="helper-tooltip" />
       </section>
     </ErrorBoundary>
-  )
+  );
 })
 
 export default EditorPanel;

package/src/components/{Grid.js → Grid.jsx}

@@ -1,17 +1,18 @@
 import React, { useContext } from 'react'
 import Row from './Row'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 
 const Grid = () => {
-  const { rows, config, updateConfig } = useContext(Context)
+  const { rows, config, updateConfig } = useContext(ConfigContext)
 
   const addRow = () => {
     updateConfig({
       ...config,
       rows: [
         ...rows,
-        [{width: 12}, {}, {}]
+        [ { width: 12 }, { equalHeight: false }, {}, {} ]
+        //[{width: 12}, {}, {}]      ],
       ],
       uuid: Date.now()
     })
@@ -25,4 +26,4 @@ const Grid = () => {
   )
 }
 
-export default Grid
+export default Grid

package/src/components/Header.jsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useContext } from 'react'
+
+import ConfigContext from '../ConfigContext'
+
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Modal from '@cdc/core/components/ui/Modal'
+
+const Header = ({setPreview, tabSelected, setTabSelected, back, subEditor = null}) => {
+
+  const {
+    config,
+    updateConfig,
+    setParentConfig
+  } = useContext(ConfigContext);
+
+  const { overlay } = useGlobalContext()
+
+  const [ columns, setColumns ] = useState([])
+
+  const changeConfigValue = (parentObj, key, value) => {
+
+    let newConfig = {...config};
+    if(!newConfig[parentObj]) newConfig[parentObj] = {};
+    newConfig[parentObj][key] = value;
+
+    updateConfig(newConfig)
+  }
+
+  const setTab = (index) => {
+    setTabSelected(index)
+    if(index === 3){
+      setPreview(true)
+    } else {
+      setPreview(false)
+    }
+  }
+
+  const addNewFilter = () => {
+    let dashboardConfig = {...config.dashboard};
+
+    dashboardConfig.sharedFilters = dashboardConfig.sharedFilters || [];
+
+    dashboardConfig.sharedFilters.push({key: 'Dashboard Filter ' + (dashboardConfig.sharedFilters.length + 1), values: []});
+
+    updateConfig({...config, dashboard: dashboardConfig});
+
+  }
+
+  const removeFilter = (index) => {
+    let dashboardConfig = {...config.dashboard};
+
+    dashboardConfig.sharedFilters.splice(index, 1);
+
+    updateConfig({...config, dashboard: dashboardConfig});
+
+    overlay?.actions.toggleOverlay();
+  }
+
+  const convertStateToConfig = (type = "JSON") => {
+    let strippedState = JSON.parse(JSON.stringify(config))
+    delete strippedState.newViz
+    delete strippedState.runtime
+
+    if(type === "JSON") {
+      return JSON.stringify( strippedState )
+    }
+
+    return strippedState
+  }
+
+  useEffect(() => {
+    const parsedData = convertStateToConfig()
+
+    // Emit the data in a regular JS event so it can be consumed by anything.
+    const event = new CustomEvent('updateVizConfig', { detail: parsedData})
+
+    window.dispatchEvent(event)
+
+    // Pass up to Editor if needed
+    if(setParentConfig) {
+      const newConfig = convertStateToConfig("object")
+      setParentConfig(newConfig)
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config]);
+
+  useEffect(() => {
+    const runSetColumns = async () => {
+      let columns = {};
+      let dataKeys = Object.keys(config.datasets);
+
+      for(let i = 0; i < dataKeys.length; i++){
+        if(!config.datasets[dataKeys[i]].data && config.datasets[dataKeys[i]].dataUrl){
+          config.datasets[dataKeys[i]].data = await fetchRemoteData(config.datasets[dataKeys[i]].dataUrl);
+          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);
+            } catch(e) {
+              //Data not able to be standardized, leave as is
+            }
+          }
+        }
+
+        if(config.datasets[dataKeys[i]].data) {
+          config.datasets[dataKeys[i]].data.map(row => {
+            Object.keys(row).forEach(columnName => columns[columnName] = true)
+          })
+        }
+      }
+
+      setColumns(Object.keys(columns))
+    }
+
+    runSetColumns()
+  }, [config.datasets]);
+
+  const filterModal = (filter, index) => {
+
+    const saveChanges = () => {
+      let tempConfig = {...config.dashboard};
+      tempConfig.sharedFilters[index] = filter;
+
+      updateConfig({...config, dashboard: tempConfig});
+  
+      overlay?.actions.toggleOverlay()
+    }
+
+    const updateFilterProp = (name, index, value) => {
+      let newFilter = {...filter};
+
+      newFilter[name] = value;
+
+      overlay?.actions.openOverlay(filterModal(newFilter, index))
+    }
+
+    const addFilterUsedBy = (filter, index, value) => {
+      if(!filter.usedBy) filter.usedBy = [];
+      filter.usedBy.push(value);
+      updateFilterProp('usedBy', index, filter.usedBy);
+    }
+  
+    const removeFilterUsedBy = (filter, index, value) => {
+      let usedByIndex = filter.usedBy.indexOf(value);
+      if(usedByIndex !== -1){
+        filter.usedBy.splice(usedByIndex, 1);
+        updateFilterProp('usedBy', index, filter.usedBy);
+      }
+  
+    }
+    
+    return (
+      <Modal>
+        <Modal.Content>
+          <h2>Dashboard Filter Settings</h2>
+          <fieldset className="shared-filter-modal" key={filter.columnName + index}>
+            <button type="button" className="btn btn-primary remove-column" onClick={() => {removeFilter(index)}}>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>
+                ))}
+              </select>
+            </label>
+          </fieldset>
+          <button type="button" className="btn btn-primary" style={{display: 'inline-block', 'margin-right': '1em'}} onClick={overlay?.actions.toggleOverlay}>Cancel</button>
+          <button type="button" className="btn btn-primary" style={{display: 'inline-block'}} onClick={saveChanges}>Save</button>
+        </Modal.Content>
+      </Modal>
+    )
+  }
+
+  return (
+    <div aria-level="2" role="heading" className={`editor-heading${subEditor ? ' sub-dashboard-viz' : ''}`}>
+      {subEditor ? <div className="heading-1 back-to" onClick={back} style={{cursor: 'pointer'}}><span>&#8592;</span> Back to Dashboard</div> : <div className="heading-1">Dashboard Editor<br/>{<input type="text" placeholder="Enter Dashboard Name Here" defaultValue={config.dashboard.title} onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}/>}</div>}
+      {!subEditor && <div>
+        <ul className="toggle-bar">
+          <li className={tabSelected === 0 ? 'active' : 'inactive'} onClick={() => {setTab(0)}}>Dashboard Description</li>
+          <li className={tabSelected === 1 ? 'active' : 'inactive'} onClick={() => {setTab(1)}}>Dashboard Filters</li>
+          <li className={tabSelected === 2 ? 'active' : 'inactive'} onClick={() => {setTab(2)}}>Data Table Settings</li>
+          <li className={tabSelected === 3 ? 'active' : 'inactive'} onClick={() => {setTab(3)}}>Dashboard Preview</li>
+        </ul>
+        <div className="heading-body">
+          {tabSelected === 0 && <input type="text" className="description-input" placeholder="Type a dashboard description here." defaultValue={config.dashboard.description} onChange={e => changeConfigValue('dashboard', 'description', e.target.value)} />}
+          {tabSelected === 1 && (
+            <>
+              {config.dashboard.sharedFilters && config.dashboard.sharedFilters.map((sharedFilter, index) => (
+                <span className="shared-filter-button" key={`shared-filter-${sharedFilter.key}`}>
+                  <a href="#" onClick={(e) => {e.preventDefault(); overlay?.actions.openOverlay(filterModal(sharedFilter, index))}}>{sharedFilter.key}</a>
+                  <button onClick={() => removeFilter(index)}>X</button>
+                </span>
+              ))}
+              <button onClick={addNewFilter}>Add New Filter</button></>
+          )}
+          {tabSelected === 2 && (
+            <>
+              <label>Show Table</label><input type="checkbox" defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)}  />
+              <label>Expanded by Default</label><input type="checkbox" defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
+              <label>Display Download Button</label><input type="checkbox" defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
+            </>
+          )}
+        </div>
+      </div>}
+    </div>
+  )
+}
+
+export default Header

package/src/components/Row.js

@@ -135,3 +135,4 @@ const Row = ({ row, idx: rowIdx, uuid}) => {
 }
 
 export default Row
+