@cdc/dashboard 1.1.2 → 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('');
@@ -30,9 +28,11 @@ export default function DataTable() {
     const csvData = Papa.unparse(data);
 
     const saveBlob = () => {
-      if (navigator.msSaveBlob) {
-        const dataBlob = new Blob([csvData], {type:  "text/csv;charset=utf-8;"});
-        navigator.msSaveBlob(dataBlob, fileName);
+      //@ts-ignore
+      if (typeof window.navigator.msSaveBlob === 'function') {
+        const dataBlob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });
+        //@ts-ignore
+        window.navigator.msSaveBlob(dataBlob, fileName);
       }
     }
 
@@ -44,47 +44,45 @@ 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>
     )
   });
   
   // Creates columns structure for the table
   const tableColumns = useMemo(() => {
-    const newTableColumns = []/*[{
-      Header: '',
-      Cell: ({ row }) => {
-        return (
-          <>
-          </>
-        )
-      },
-      id: 'series-label'
-    }];*/
-
-    Object.keys(data[0]).map((key) => {
-        const newCol = {
-          Header: key,
-          Cell: ({ row }) => {
-            return (
-              <>
-                {row.original[key]}
-              </>
-            );
-          },
-          id: key,
-          canSort: true
-        };
-
-        newTableColumns.push(newCol);
-    });
+    const newTableColumns = [];
+
+    // catch no data errors and update the table header.
+    if(data.length === 0) {
+      return [{
+          Header : 'No Data Found'
+      }];
+    } else {
+      Object.keys(data[0]).map((key) => {
+          const newCol = {
+            Header: key,
+            Cell: ({ row }) => {
+              return (
+                <>
+                  {row.original[key]}
+                </>
+              );
+            },
+            id: key,
+            canSort: true
+          };
+
+          newTableColumns.push(newCol);
+      });
+    }
 
     return newTableColumns;
   }, [config]);
 
   const tableData = useMemo(
-    () => config.data,
-    [config.data]
+    () => data,
+    [data]
   );
 
   // Change accessibility label depending on expanded status
@@ -123,18 +121,19 @@ 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()}>
               <caption className="visually-hidden">{config.table.label}</caption>
               <thead>
-                {headerGroups.map((headerGroup) => (
+                {headerGroups && headerGroups.map((headerGroup) => (
                   <tr {...headerGroup.getHeaderGroupProps()}>
                     {headerGroup.headers.map((column) => (
                       <th tabIndex="0" {...column.getHeaderProps(column.getSortByToggleProps())} className={column.isSorted ? column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc' : 'sort'} title={column.Header}>
@@ -145,24 +144,26 @@ export default function DataTable() {
                   </tr>
                 ))}
               </thead>
-              <tbody {...getTableBodyProps()}>
-                {rows.map((row) => {
-                  prepareRow(row);
-                  return (
-                    <tr {...row.getRowProps()}>
-                      {row.cells.map((cell) => (
-                        <td tabIndex="0" {...cell.getCellProps()}>
-                          {cell.render('Cell')}
-                        </td>
-                      ))}
-                    </tr>
-                  );
-                })}
-              </tbody>
+              {rows &&
+                <tbody {...getTableBodyProps()}>
+                  {rows.map((row) => {
+                    prepareRow(row);
+                    return (
+                      <tr {...row.getRowProps()}>
+                        {row.cells && row.cells.map((cell) => (
+                          <td tabIndex="0" {...cell.getCellProps()}>
+                            {cell.render('Cell')}
+                          </td>
+                        ))}
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              }
             </table>
           </div>
           {config.table.download && <DownloadButton data={data} />}
       </section>
     </ErrorBoundary>
   );
-}
+}

package/src/components/EditorPanel.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, memo, useContext } from 'react'
+import React, { useState, useEffect, memo, useContext } from 'react'
 import ReactTooltip from 'react-tooltip'
 
 import {
@@ -14,6 +14,8 @@ import Context from '../context';
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 import QuestionIcon from '@cdc/core/assets/question-circle.svg';
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
 
 const Helper = ({text}) => {
   return (
@@ -38,7 +40,7 @@ const Helper = ({text}) => {
   window.CustomEvent = CustomEvent;
 })();
 
-const TextField = memo(({label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = "input", i = null, min = null, ...attributes}) => {
+const TextField = memo(({label, section = null, subsection = null, fieldName, updateField, value: stateValue, tooltip, type = "input", i = null, min = null, ...attributes}) => {
   const [ value, setValue ] = useState(stateValue);
 
   const [ debouncedValue ] = useDebounce(value, 500);
@@ -77,7 +79,7 @@ const TextField = memo(({label, section = null, subsection = null, fieldName, up
 
   return (
     <label>
-      <span className="edit-label column-heading">{label}</span>
+      <span className="edit-label column-heading">{label}{tooltip}</span>
       {formElement}
     </label>
   )
@@ -108,8 +110,6 @@ const Select = memo(({label, value, options, fieldName, section = null, subsecti
   )
 })
 
-const headerColors = ['theme-blue','theme-purple','theme-brown','theme-teal','theme-pink','theme-orange','theme-slate','theme-indigo','theme-cyan','theme-green','theme-amber']
-
 const EditorPanel = memo(() => {
   const {
     config,
@@ -203,7 +203,6 @@ const EditorPanel = memo(() => {
         </section>
       </section>
     );
-
   }
 
   const convertStateToConfig = (type = "JSON") => {
@@ -266,83 +265,246 @@ const EditorPanel = memo(() => {
 
     updateConfig({...config, dashboard: dashboardConfig});
   }
-  
+
   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' : 'hidden editor-panel'}>
+      {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} />
+                  <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;
+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