@cdc/dashboard 1.1.2 → 1.1.4

package/src/components/DataTable.tsx

@@ -30,9 +30,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);
       }
     }
 
@@ -51,40 +53,40 @@ export default function DataTable() {
   
   // 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
@@ -134,7 +136,7 @@ export default function DataTable() {
             <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 +147,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,12 +265,12 @@ 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'}>
+      <section className={displayPanel ? 'editor-panel cove' : 'hidden editor-panel cove'}>
         <div className="heading-2">Configure</div>
         <section className="form-container">
           <form>
@@ -284,7 +283,14 @@ const EditorPanel = memo(() => {
                 </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 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>
+                  }/>
                 </AccordionItemPanel>
               </AccordionItem>
               <AccordionItem>
@@ -345,4 +351,4 @@ const EditorPanel = memo(() => {
   )
 })
 
-export default EditorPanel;
+export default EditorPanel;

package/src/components/Header.js

@@ -2,7 +2,7 @@ import React, { useContext, memo } from 'react'
 
 const Header = ({preview, setPreview, back, subEditor = null}) => {
   return (
-    <div className="editor-heading">
+    <div aria-level="2" role="heading" className="editor-heading">
       {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</div>}
       {!subEditor && <ul className="toggle-bar">
         <li className={preview ? 'inactive' : 'active'} onClick={() => {setPreview(false)}}>Build Layout</li>

package/src/components/Widget.js

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 import { useDrag } from 'react-dnd';
 import CloseIcon from '../images/icon-close.svg';
+import GridIcon from '../images/icon-grid.svg';
+import CodeIcon from '../images/icon-code.svg';
 import EditIcon from '../images/icon-edit.svg';
 import MoveIcon from '../images/icon-move.svg';
 import BiteIcon from '@cdc/core/assets/data-bite-graphic.svg';
@@ -9,30 +11,43 @@ import LineIcon from '@cdc/core/assets/chart-line-solid.svg';
 import PieIcon from '@cdc/core/assets/chart-pie-solid.svg';
 import UsaIcon from '@cdc/core/assets/usa-graphic.svg';
 import WorldIcon from '@cdc/core/assets/world-graphic.svg';
+import AlabamaIcon from '@cdc/core/assets/alabama-graphic.svg';
 
 import Context from '../context';
 
 const iconHash = {
   'data-bite' : <BiteIcon />,
-  'Bar' : <BarIcon />,
+  'Bar': <BarIcon />,
+  'Spark Line': <LineIcon />,
+  'waffle-chart' : <GridIcon />,
+  'markup-include' : <CodeIcon />,
   'Line' : <LineIcon />,
   'Pie' : <PieIcon />,
   'us' : <UsaIcon />,
-  'world' : <WorldIcon />
+  'us-county': <UsaIcon />,
+  'world' : <WorldIcon />,
+  'single-state': <AlabamaIcon />
 }
 
 const labelHash = {
-  'data-bite' : 'Data Bite',
+  'data-bite': 'Data Bite',
+  'waffle-chart' : 'Waffle Chart',
+  'markup-include' : 'Markup Include',
   'Bar' : 'Bar',
   'Line' : 'Line',
   'Pie' : 'Pie',
-  'us' : 'United States',
-  'world' : 'World'
+  'Spark Line' : 'Spark Line',
+  'us': 'United States (State- or County-Level)',
+  'us-county': 'United States (State- or County-Level)',
+  'world' : 'World',
+  'single-state': 'U.S. State'
 }
 
 const Widget = ({ data = {}, addVisualization, type }) => {
   const { rows, visualizations, config, updateConfig } = useContext(Context)
 
+  console.log('type', type)
+
   const handleWidgetMove = (item, monitor) => {
       let result = monitor.getDropResult()
 

package/src/images/icon-code.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path fill="currentColor" d="M414.8 40.79L286.8 488.8C281.9 505.8 264.2 515.6 247.2 510.8C230.2 505.9 220.4 488.2 225.2 471.2L353.2 23.21C358.1 6.216 375.8-3.624 392.8 1.232C409.8 6.087 419.6 23.8 414.8 40.79H414.8zM518.6 121.4L630.6 233.4C643.1 245.9 643.1 266.1 630.6 278.6L518.6 390.6C506.1 403.1 485.9 403.1 473.4 390.6C460.9 378.1 460.9 357.9 473.4 345.4L562.7 256L473.4 166.6C460.9 154.1 460.9 133.9 473.4 121.4C485.9 108.9 506.1 108.9 518.6 121.4V121.4zM166.6 166.6L77.25 256L166.6 345.4C179.1 357.9 179.1 378.1 166.6 390.6C154.1 403.1 133.9 403.1 121.4 390.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4L121.4 121.4C133.9 108.9 154.1 108.9 166.6 121.4C179.1 133.9 179.1 154.1 166.6 166.6V166.6z"/>
+</svg>

package/src/images/icon-edit.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/>
+</svg>

package/src/images/icon-grid.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z">
+    </path>
+</svg>

package/src/index.html

@@ -1,10 +1,10 @@
-<!DOCTYPE html>	
-<html lang="en">	
-  <head>	
-    <meta charset="utf-8" />	
-    <meta	
-      name="viewport"	
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"	
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <style>
       body {
@@ -12,14 +12,16 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
+        min-height: unset !important;
       }
       .react-container + .react-container {
         margin-top: 3rem;
       }
     </style>
-  </head>	
+  </head>
   <body>
-    <div class="react-container" data-config="/examples/default.json"></div>
-    <noscript>You need to enable JavaScript to run this app.</noscript>	
-  </body>	
-</html>
+    <!-- <div class="react-container" data-config="/examples/default.json"></div> -->
+    <div class="react-container" data-config="/examples/test-example.json"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+  </body>
+</html>

package/src/scss/editor-panel.scss

@@ -11,6 +11,11 @@
 }
 
 .editor-panel {
+    //TODO: Remove after COVE refactor
+    &.cove {
+      @import "@cdc/core/styles/v2/layout/tooltip.scss";
+    }
+
     .two-col-inputs {
       display: flex;
       margin-top: 1em;
@@ -150,14 +155,14 @@
       transform: rotate(-45deg) translateY(-50%);
       transition: .1s all;
     }
-  
+
     .accordion__button[aria-expanded='true']::before,
     .accordion__button[aria-selected='true']::before {
       transform: rotate(45deg) translateY(-50%);
       margin-right: 1.3em;
       transition: .1s all;
     }
-  
+
     .accordion__panel {
       border-bottom: 1px solid rgba(0, 0, 0, 0.2);
       padding: 1em 1.25em 2em;
@@ -166,7 +171,7 @@
         font-size: .8em;
       }
     }
-  
+
     .advanced {
       padding: 0 1em 1em;
       text-align: left;
@@ -199,17 +204,17 @@
         box-sizing: border-box
       }
     }
-  
+
     @keyframes fadein {
       0% {
         opacity: 0;
       }
-  
+
       100% {
         opacity: 1;
       }
     }
-  
+
     .heading-2 {
       background: #565656;
       color: #fff;
@@ -219,7 +224,7 @@
       border-bottom:#565656 3px solid;
       z-index: 3;
     }
-  
+
     label {
       text-transform: uppercase;
       display: block;
@@ -292,17 +297,17 @@
         }
       }
     }
-  
+
     fieldset {
       display: block;
     }
-  
+
     .primary-fieldset {
       padding: 0;
       margin: 0;
       border: 0;
     }
-  
+
     ul.column-edit {
       list-style: none;
       li {
@@ -321,11 +326,11 @@
         }
       }
     }
-  
+
     &.hidden {
       display: none;
     }
-  
+
     .emove-column {
       float: right;
       text-transform: uppercase;
@@ -341,7 +346,7 @@
       cursor: pointer;
       font-weight: bold;
     }
-  
+
     .edit-block {
       padding-left: 1em;
       border-left: rgba(0, 0, 0, 0.2) 4px solid;
@@ -370,7 +375,7 @@
       text-transform: none;
       font-weight: normal;
     }
-  
+
     .btn {
       margin-top: 1em;
     }
@@ -378,7 +383,7 @@
       list-style: none;
       > li {
         margin-right: .3em;
-        margin-bottom: .3em;  
+        margin-bottom: .3em;
       }
     }
     .sort-list li > div {
@@ -389,21 +394,21 @@
       background: #F1F1F1;
       padding: .4em .6em;
       font-size: .8em;
-      margin-bottom: .3em; 
+      margin-bottom: .3em;
       cursor: move;
     }
-    
+
     .info {
       font-size: .8em;
       line-height: 1.4em;
       font-style: italic;
       padding-top: 10px;
     }
-  
+
     .react-tags__search {
       width: 100%;
     }
-  
+
     .react-tags {
       position: relative;
       input.react-tags__search-input {
@@ -415,15 +420,15 @@
         display: inline
       }
     }
-  
+
     .react-tags.is-focused {
       border-color: rgba(0, 0, 0, 0.7);
     }
-  
+
     .react-tags__selected {
       display: inline;
     }
-  
+
     .react-tags__selected-tag {
       display: inline-block;
       box-sizing: border-box;
@@ -435,67 +440,67 @@
       margin-right: .3em;
       margin-bottom: .3em;
     }
-  
+
     .react-tags__selected-tag:after {
       content: '\2715';
       color: #AAA;
       margin-left: 8px;
     }
-  
+
     .react-tags__selected-tag:hover,
     .react-tags__selected-tag:focus {
       border-color: #B1B1B1;
     }
-  
+
     .react-tags__search {
       display: inline-block;
-  
+
       /* prevent autoresize overflowing the container */
       max-width: 100%;
     }
-  
+
     @media screen and (min-width: 30em) {
-  
+
       .react-tags__search {
         /* this will become the offsetParent for suggestions */
         position: relative;
       }
-  
+
     }
-  
+
     .react-tags__search input {
       /* prevent autoresize overflowing the container */
       max-width: 100%;
-  
+
       /* emove styles and layout from this element */
       margin: 0;
       outline: none;
       padding: .5em .3em;
-  
+
       /* match the font styles */
       font-size: inherit;
       line-height: inherit;
     }
-  
+
     .react-tags__search input::-ms-clear {
       display: none;
     }
-  
+
     .react-tags__suggestions {
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
     }
-  
+
     @media screen and (min-width: 30em) {
-  
+
       .react-tags__suggestions {
         width: 240px;
       }
-  
+
     }
-  
+
     .react-tags__suggestions ul {
       margin: 4px -1px;
       padding: 0;
@@ -505,27 +510,27 @@
       border-radius: 2px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     }
-  
+
     .react-tags__suggestions li {
       border-bottom: 1px solid #ddd;
       padding: 6px 8px;
     }
-  
+
     .react-tags__suggestions li mark {
       text-decoration: underline;
       background: none;
       font-weight: 600;
     }
-  
+
     .react-tags__suggestions li:hover {
       cursor: pointer;
       background: #eee;
     }
-  
+
     .react-tags__suggestions li.is-active {
       background: #b7cfe0;
     }
-  
+
     .react-tags__suggestions li.is-disabled {
       opacity: 0.5;
       cursor: auto;
@@ -541,7 +546,7 @@
         border: 1px solid gray;
       }
     }
-  
+
     .viz-icon {
       background-color: #FFF;
       color: #565656;
@@ -557,7 +562,7 @@
 
       &:hover {
         background: #F2F2F2;
-        transition: .2s all;  
+        transition: .2s all;
       }
 
       svg {
@@ -571,7 +576,7 @@
           }
       }
     }
-}  
+}
 .editor-toggle {
   background: #F2F2F2;
   border-radius: 60px;
@@ -596,7 +601,7 @@
   }
   &.collapsed {
     left: 1em;
-    margin-left: 0;  
+    margin-left: 0;
     &:before {
     content: "\00bb";
    }
@@ -644,4 +649,4 @@
       }
     }
   }
-}
+}