@cdc/dashboard 4.26.2 → 4.26.4

package/src/components/DashboardFilters/_stories/DashboardFilters.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof DashboardFilters> = {
   component: DashboardFilters,
   decorators: [
     Story => (
-      <div className='cdc-open-viz-module type-dashboard'>
+      <div className='cove-visualization type-dashboard'>
         <Story />
       </div>
     )

package/src/components/DashboardFilters/dashboardfilter.styles.css

@@ -4,18 +4,18 @@
     font-weight: 700;
   }
   .btn {
+    align-self: flex-end;
     /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */
     height: calc(1.5em + 0.75rem + 2px);
-    align-self: flex-end;
   }
   .loading-filter {
     position: relative;
     .spinner-border {
+      height: 1.5rem;
       position: absolute;
-      top: 55%;
       right: 10%;
+      top: 55%;
       width: 1.5rem;
-      height: 1.5rem;
     }
   }
   :is(select):disabled {

package/src/components/DataDesignerModal.tsx

@@ -59,8 +59,8 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
     if (dataSetChanged || noCachedData) {
       setLoadingAPIData(true)
       try {
-        newData = await fetchRemoteData(dataUrl)
-        newData = transform.autoStandardize(newData)
+        const result = await fetchRemoteData(dataUrl)
+        newData = transform.autoStandardize(result.data)
       } catch (e) {
         setErrorMessage('There was an issue loading the data source. Please check the datasource URL and try again.')
       }

package/src/components/ExpandCollapseButtons.tsx

@@ -1,3 +1,5 @@
+import Button from '@cdc/core/components/elements/Button'
+
 type ExpandCollapseButtonsProps = {
   setAllExpanded: Function
 }
@@ -6,12 +8,12 @@ const ExpandCollapseButtons: React.FC<ExpandCollapseButtonsProps> = ({ setAllExp
   return (
     <div className='d-block '>
       <div className='d-flex flex-row-reverse mb-2'>
-        <button className='btn expand-collapse-buttons' onClick={() => setAllExpanded(false)}>
+        <Button variant='light' onClick={() => setAllExpanded(false)}>
           - Collapse All
-        </button>
-        <button className='btn expand-collapse-buttons me-2' onClick={() => setAllExpanded(true)}>
+        </Button>
+        <Button variant='light' className='me-2' onClick={() => setAllExpanded(true)}>
           + Expand All
-        </button>
+        </Button>
       </div>
     </div>
   )

package/src/components/Grid.tsx

@@ -1,14 +1,15 @@
 import React, { useContext } from 'react'
 import Row from './Row'
+import Button from '@cdc/core/components/elements/Button'
 
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 import { ConfigRow } from '../types/ConfigRow'
 
 const Grid = () => {
   const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
   if (!config) return null
   const rows = config.rows
-  const dispatch = useContext(DashboardDispatchContext)
   const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
   const addRow = () => {
     const blankRow: Partial<ConfigRow> = { columns: [{ width: 12 }] }
@@ -24,9 +25,9 @@ const Grid = () => {
       {(rows || []).map((row, idx) => (
         <Row row={row} idx={idx} uuid={row.uuid} key={idx} />
       ))}
-      <button className='btn btn-primary col' onClick={addRow}>
+      <Button variant='primary' className='col' onClick={addRow}>
         Add Row
-      </button>
+      </Button>
     </div>
   )
 }

package/src/components/Header/Header.tsx

@@ -176,7 +176,6 @@ const Header = (props: HeaderProps) => {
                     Show Data Table(s)
                   </label>
                   <br />
-
                   <label>
                     <input
                       type='checkbox'
@@ -185,7 +184,6 @@ const Header = (props: HeaderProps) => {
                     />
                     Expanded by Default
                   </label>
-                  <br />
                 </div>
 
                 <div className='wrap'>
@@ -206,9 +204,6 @@ const Header = (props: HeaderProps) => {
                       onChange={e => changeConfigValue('table', 'height', e.target.value)}
                     />
                   )}
-                </div>
-
-                <div className='wrap'>
                   <label>
                     <input
                       type='checkbox'
@@ -217,6 +212,17 @@ const Header = (props: HeaderProps) => {
                     />
                     Show Download CSV Link
                   </label>
+                  {config.table.download && (
+                    <input
+                      type='text'
+                      placeholder='Customize label'
+                      defaultValue={config.table.downloadDataLabel}
+                      onChange={e => changeConfigValue('table', 'downloadDataLabel', e.target.value)}
+                    />
+                  )}
+                </div>
+
+                <div className='wrap'>
                   <label>
                     <input
                       type='checkbox'
@@ -225,6 +231,22 @@ const Header = (props: HeaderProps) => {
                     />
                     Show URL to Automatically Updated Data
                   </label>
+                  <label>
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.downloadImageButton}
+                      onChange={e => changeConfigValue('table', 'downloadImageButton', e.target.checked)}
+                    />
+                    Show Download Image Button
+                  </label>
+                  {config.table.downloadImageButton && (
+                    <input
+                      type='text'
+                      placeholder='Customize label'
+                      defaultValue={config.table.downloadImageLabel}
+                      onChange={e => changeConfigValue('table', 'downloadImageLabel', e.target.value)}
+                    />
+                  )}
                 </div>
               </>
             )}

package/src/components/Header/index.scss

@@ -1,4 +1,4 @@
-.cdc-open-viz-module .shared-filter-modal,
+.cove-visualization .shared-filter-modal,
 .cove .shared-filter-modal,
 .shared-filter-modal {
   &__title {

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -1,140 +1,141 @@
-import { createRef, useContext, useMemo, useState } from 'react'
-import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
-import Modal from '@cdc/core/components/ui/Modal'
-import { useGlobalContext } from '@cdc/core/components/GlobalContext'
-import './multiconfigtabs.styles.css'
-
-const AreYouSure = deleteCallback => {
-  return (
-    <Modal>
-      <Modal.Content>
-        <p>Are you sure you want to delete this dashboard? </p>
-        <button className='btn btn-danger' onClick={deleteCallback}>
-          DELETE
-        </button>
-      </Modal.Content>
-    </Modal>
-  )
-}
-
-const Tab = ({ name, handleClick, tabs, index, active }) => {
-  const [editing, setEditing] = useState(false)
-  const dispatch = useContext(DashboardDispatchContext)
-  const { overlay } = useGlobalContext()
-  const inputRef = createRef<HTMLInputElement>()
-
-  const saveName = e => {
-    e.stopPropagation()
-    const newVal = inputRef.current.value
-    const sameName = newVal === name
-    const blankName = !newVal
-    const duplicateName = tabs.includes(newVal)
-    if (!sameName && !blankName && !duplicateName) {
-      dispatch({ type: 'RENAME_DASHBOARD_TAB', payload: { current: name, new: newVal } })
-    }
-    setEditing(false)
-  }
-
-  const onClick = e => {
-    // ignore click on delete button
-    if (e.target.className === 'remove') return
-    if (active) {
-      setEditing(true)
-    } else {
-      handleClick()
-    }
-  }
-
-  const handleRemove = () => {
-    const deleteCallback = () => {
-      dispatch({ type: 'REMOVE_MULTIDASHBOARD_AT_INDEX', payload: index })
-      overlay?.actions.toggleOverlay(false)
-    }
-    overlay?.actions.openOverlay(AreYouSure(deleteCallback))
-  }
-
-  const handleReorder = (index: number, moveTo: -1 | 1) => {
-    const newIndex = index + moveTo
-    const inbounds = newIndex > -1 && newIndex <= tabs.length - 1
-    if (inbounds) {
-      dispatch({ type: 'REORDER_MULTIDASHBOARDS', payload: { currentIndex: index, newIndex: index + moveTo } })
-    }
-  }
-
-  const canMoveLeft = index !== 0
-  const canMoveRight = index <= tabs.length - 2
-
-  return (
-    <li className='nav-item d-flex mt-0'>
-      {canMoveLeft && editing && (
-        <button className='border-0' onClick={() => handleReorder(index, -1)}>
-          {'<'}
-        </button>
-      )}
-      <div
-        className={`edit nav-link${active ? ' active' : ''}`}
-        aria-current={active ? 'page' : null}
-        onClick={onClick}
-      >
-        {editing ? (
-          <div className='d-flex'>
-            <input type='text' defaultValue={name} onBlur={saveName} ref={inputRef} />
-            <button className='btn btn-link save' onClick={saveName}>
-              save
-            </button>
-          </div>
-        ) : (
-          <>
-            {name}
-            <button className='btn btn-danger border-0 ms-1' onClick={handleRemove}>
-              X
-            </button>
-          </>
-        )}
-      </div>
-      {canMoveRight && editing && (
-        <button className='border-0' onClick={() => handleReorder(index, 1)}>
-          {'>'}
-        </button>
-      )}
-    </li>
-  )
-}
-
-const MultiConfigTabs = () => {
-  const { config } = useContext(DashboardContext)
-  const dispatch = useContext(DashboardDispatchContext)
-  const tabs = useMemo<string[]>(
-    () => (config.multiDashboards || []).map(({ label }) => label),
-    [config.multiDashboards]
-  )
-  const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
-
-  const saveAndLoad = (indexToSwitchTo: number) => {
-    dispatch({ type: 'SAVE_CURRENT_CHANGES' })
-    dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
-  }
-
-  if (!config.multiDashboards) return null
-  return (
-    <ul className='nav nav-tabs multi-config-tabs mb-4'>
-      {tabs.map((tab, index) => (
-        <Tab
-          key={tab + index}
-          name={tab}
-          tabs={tabs}
-          index={index}
-          handleClick={() => saveAndLoad(index)}
-          active={index === activeTab}
-        />
-      ))}
-      <li className='nav-item'>
-        <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
-          +
-        </button>
-      </li>
-    </ul>
-  )
-}
-
-export default MultiConfigTabs
+import { createRef, useContext, useMemo, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Button from '@cdc/core/components/elements/Button'
+import './multiconfigtabs.styles.css'
+
+const AreYouSure = deleteCallback => {
+  return (
+    <Modal>
+      <Modal.Content>
+        <p>Are you sure you want to delete this dashboard? </p>
+        <Button variant='danger' onClick={deleteCallback}>
+          DELETE
+        </Button>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+const Tab = ({ name, handleClick, tabs, index, active }) => {
+  const [editing, setEditing] = useState(false)
+  const dispatch = useContext(DashboardDispatchContext)
+  const { overlay } = useGlobalContext()
+  const inputRef = createRef<HTMLInputElement>()
+
+  const saveName = e => {
+    e.stopPropagation()
+    const newVal = inputRef.current.value
+    const sameName = newVal === name
+    const blankName = !newVal
+    const duplicateName = tabs.includes(newVal)
+    if (!sameName && !blankName && !duplicateName) {
+      dispatch({ type: 'RENAME_DASHBOARD_TAB', payload: { current: name, new: newVal } })
+    }
+    setEditing(false)
+  }
+
+  const onClick = e => {
+    // ignore click on delete button
+    if (e.target.className === 'remove') return
+    if (active) {
+      setEditing(true)
+    } else {
+      handleClick()
+    }
+  }
+
+  const handleRemove = () => {
+    const deleteCallback = () => {
+      dispatch({ type: 'REMOVE_MULTIDASHBOARD_AT_INDEX', payload: index })
+      overlay?.actions.toggleOverlay(false)
+    }
+    overlay?.actions.openOverlay(AreYouSure(deleteCallback))
+  }
+
+  const handleReorder = (index: number, moveTo: -1 | 1) => {
+    const newIndex = index + moveTo
+    const inbounds = newIndex > -1 && newIndex <= tabs.length - 1
+    if (inbounds) {
+      dispatch({ type: 'REORDER_MULTIDASHBOARDS', payload: { currentIndex: index, newIndex: index + moveTo } })
+    }
+  }
+
+  const canMoveLeft = index !== 0
+  const canMoveRight = index <= tabs.length - 2
+
+  return (
+    <li className='nav-item d-flex mt-0'>
+      {canMoveLeft && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, -1)}>
+          {'<'}
+        </button>
+      )}
+      <div
+        className={`edit nav-link${active ? ' active' : ''}`}
+        aria-current={active ? 'page' : null}
+        onClick={onClick}
+      >
+        {editing ? (
+          <div className='d-flex'>
+            <input type='text' defaultValue={name} onBlur={saveName} ref={inputRef} />
+            <Button variant='link' className='save' onClick={saveName}>
+              save
+            </Button>
+          </div>
+        ) : (
+          <>
+            {name}
+            <Button variant='danger' className='border-0 ms-1' onClick={handleRemove}>
+              X
+            </Button>
+          </>
+        )}
+      </div>
+      {canMoveRight && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, 1)}>
+          {'>'}
+        </button>
+      )}
+    </li>
+  )
+}
+
+const MultiConfigTabs = () => {
+  const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const tabs = useMemo<string[]>(
+    () => (config.multiDashboards || []).map(({ label }) => label),
+    [config.multiDashboards]
+  )
+  const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
+
+  const saveAndLoad = (indexToSwitchTo: number) => {
+    dispatch({ type: 'SAVE_CURRENT_CHANGES' })
+    dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
+  }
+
+  if (!config.multiDashboards) return null
+  return (
+    <ul className='nav nav-tabs multi-config-tabs mb-4'>
+      {tabs.map((tab, index) => (
+        <Tab
+          key={tab + index}
+          name={tab}
+          tabs={tabs}
+          index={index}
+          handleClick={() => saveAndLoad(index)}
+          active={index === activeTab}
+        />
+      ))}
+      <li className='nav-item'>
+        <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
+          +
+        </button>
+      </li>
+    </ul>
+  )
+}
+
+export default MultiConfigTabs

package/src/components/MultiConfigTabs/multiconfigtabs.styles.css

@@ -1,17 +1,17 @@
 .multi-config-tabs {
   .nav-link {
+    border-color: var(--lightGray);
     border-radius: 6px 6px 0 0;
-    font-weight: 400;
+    color: var(--primary);
     display: block;
+    font-weight: 400;
     padding: 0.5rem 1rem;
     @media (max-width: 480px) {
       padding: 0.5rem 0.8rem;
     }
-    color: var(--primary);
-    border-color: var(--lightGray);
     :is(button) {
-      display: none;
       background: none;
+      display: none;
     }
     &:hover {
       :is(button) {
@@ -31,9 +31,9 @@
       font-weight: bold;
     }
     .btn-danger {
-      text-decoration: none;
-      padding: 0px 5px;
       font-size: inherit;
+      padding: 0px 5px;
+      text-decoration: none;
     }
   }
   .add {

package/src/components/Row.tsx

@@ -15,6 +15,7 @@ import ToggleIcon from '../images/icon-toggle.svg'
 import { ConfigRow } from '../types/ConfigRow'
 import { DataDesignerModal } from './DataDesignerModal'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Button from '@cdc/core/components/elements/Button'
 import { iconHash } from '../helpers/iconHash'
 import _ from 'lodash'
 import { Visualization } from '@cdc/core/types/Visualization'
@@ -70,6 +71,12 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     updateConfig({ ...config, rows: newRows })
   }
 
+  const toggleEqualHeight = () => {
+    const newRows = _.cloneDeep(rows)
+    newRows[rowIdx].equalHeight = !newRows[rowIdx].equalHeight
+    updateConfig({ ...config, rows: newRows })
+  }
+
   const moveRow = (dir = 'down') => {
     if (rowIdx === rows.length - 1 && dir === 'down') return
 
@@ -179,34 +186,49 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     </li>
   ]
 
+  const isMultiColumn = curr !== '12' && curr !== 'toggle'
+
   return (
     <nav className='row-menu'>
       <ul className='row-menu__flyout'>{layoutList}</ul>
+      {isMultiColumn && (
+        <Button
+          className={`btn row-menu__btn border-0${row.equalHeight ? ' btn-primary' : ''}`}
+          title={row.equalHeight ? 'Disable Equal Height Rows' : 'Enable Equal Height Rows'}
+          onClick={toggleEqualHeight}
+        >
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='25' height='20' fill='#fff'>
+            <rect x='1' y='2' width='9' height='14' rx='1' />
+            <rect x='14' y='2' width='9' height='14' rx='1' />
+            <line x1='0' y1='19' x2='24' y2='19' stroke='#fff' strokeWidth='2' strokeDasharray='3 2' />
+          </svg>
+        </Button>
+      )}
       <div className='spacer'></div>
-      <button
+      <Button
         className={`btn btn-primary row-menu__btn border-0`}
         title='Move Row Up'
         onClick={() => moveRow('up')}
         disabled={rowIdx === 0}
       >
         <Icon display='caretUp' color='#fff' size={25} />
-      </button>
-      <button
+      </Button>
+      <Button
         className={'btn btn-primary row-menu__btn border-0'}
         title='Move Row Down'
         onClick={() => moveRow('down')}
         disabled={rowIdx + 1 === rows.length}
       >
         <Icon display='caretDown' color='#fff' size={25} />
-      </button>
-      <button
+      </Button>
+      <Button
         className={'btn btn-danger row-menu__btn row-menu__btn--remove border-0'}
         title='Delete Row'
         onClick={deleteRow}
         disabled={rowIdx === 0 && rows.length === 1}
       >
         <Icon display='close' color='#fff' size={25} />
-      </button>
+      </Button>
     </nav>
   )
 }
@@ -220,7 +242,7 @@ const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
       <div className='builder-row' data-row-id={rowIdx}>
         <RowMenu rowIdx={rowIdx} />
         <span className='ms-2 mt-n3'>Row - {rowIdx + 1}</span>
-        <button
+        <Button
           title='Configure Data'
           className='btn btn-configure-row'
           onClick={() => {
@@ -228,7 +250,7 @@ const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
           }}
         >
           {iconHash['gearMulti']}
-        </button>
+        </Button>
         <div className='column-container'>
           {row.columns
             .filter(column => column.width)

package/src/components/Toggle/toggle-style.css

@@ -1,10 +1,10 @@
-.cdc-open-viz-module {
+.cove-visualization {
   --border: 1px solid var(--lightGray);
   .toggle-component {
     display: flex;
     justify-content: right;
-    width: 100%;
     margin-bottom: 15px;
+    width: 100%;
     :first-child:is(div) {
       border: var(--border);
       border-radius: 5px 0 0 5px;
@@ -14,18 +14,18 @@
       border-radius: 0 5px 5px 0;
     }
     :is(div) {
-      border-top: var(--border);
+      background-color: var(--white);
       border-bottom: var(--border);
-      padding: 7px 15px;
+      border-top: var(--border);
+      color: var(--primary);
+      cursor: pointer;
       display: inline;
       float: right;
-      cursor: pointer;
+      padding: 7px 15px;
       &.selected {
         background-color: var(--primary);
         color: white;
       }
-      background-color: var(--white);
-      color: var(--primary);
       :is(svg) {
         height: 25px;
       }