@cdc/dashboard 4.24.4 → 4.24.7

package/src/components/Header/Header.tsx

@@ -2,19 +2,9 @@ import { useEffect, useContext } from 'react'
 
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 
-// types
-import { type SharedFilter } from '../../types/SharedFilter'
-import { type DashboardConfig as Config } from '../../types/DashboardConfig'
-import { useGlobalContext } from '@cdc/core/components/GlobalContext'
-
-import Tooltip from '@cdc/core/components/ui/Tooltip'
-import Icon from '@cdc/core/components/ui/Icon'
-import Select from '@cdc/core/components/ui/Select'
-
 import './index.scss'
 import MultiConfigTabs from '../MultiConfigTabs'
 import { Tab } from '../../types/Tab'
-import FilterModal from './FilterModal'
 import _ from 'lodash'
 
 type HeaderProps = {
@@ -29,7 +19,7 @@ export const FilterBehavior = {
 }
 
 const Header = (props: HeaderProps) => {
-  const tabs: Tab[] = ['Dashboard Description', 'Dashboard Filters', 'Data Table Settings', 'Dashboard Preview']
+  const tabs: Tab[] = ['Dashboard Description', 'Data Table Settings', 'Dashboard Preview']
   const { visualizationKey, subEditor } = props
   const { config, setParentConfig, tabSelected } = useContext(DashboardContext)
   if (!config) return null
@@ -41,8 +31,6 @@ const Header = (props: HeaderProps) => {
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
   }
 
-  const { overlay } = useGlobalContext()
-
   const changeConfigValue = (parentObj, key, value) => {
     let newConfig = { ...config }
     if (!newConfig[parentObj]) newConfig[parentObj] = {}
@@ -50,48 +38,6 @@ const Header = (props: HeaderProps) => {
     dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
   }
 
-  const addNewFilter = () => {
-    let dashboardConfig = { ...config.dashboard }
-
-    dashboardConfig.sharedFilters = dashboardConfig.sharedFilters || []
-    const newFilter: SharedFilter = { key: 'Dashboard Filter ' + (dashboardConfig.sharedFilters.length + 1) }
-    dashboardConfig.sharedFilters.push(newFilter)
-
-    dispatch({ type: 'UPDATE_CONFIG', payload: [{ ...config, dashboard: dashboardConfig }] })
-  }
-
-  const removeFilter = index => {
-    let dashboardConfig = { ...config.dashboard }
-    let visualizations = { ...config.visualizations }
-
-    dashboardConfig.sharedFilters?.splice(index, 1)
-
-    Object.keys(visualizations).forEach(vizKey => {
-      if (visualizations[vizKey].visualizationType === 'filter-dropdowns' && visualizations[vizKey].hide && visualizations[vizKey].hide.length > 0) {
-        if (visualizations[vizKey].hide.indexOf(index) !== -1) {
-          visualizations[vizKey].hide.splice(visualizations[vizKey].hide.indexOf(index), 1)
-        }
-        visualizations[vizKey].hide.forEach((hideIndex, i) => {
-          if (hideIndex > index) {
-            visualizations[vizKey].hide[i] = hideIndex - 1
-          }
-        })
-      }
-    })
-
-    // Ensures URL filters refresh after filter removal
-    if (dashboardConfig.datasets) {
-      Object.keys(dashboardConfig.datasets).forEach(datasetKey => {
-        dashboardConfig.datasets![datasetKey].runtimeDataUrl = ''
-      })
-    }
-
-    const newConfig = { ...config, visualizations, dashboard: dashboardConfig }
-    dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
-
-    overlay?.actions.toggleOverlay()
-  }
-
   const convertStateToConfig = (type = 'JSON') => {
     let strippedState = JSON.parse(JSON.stringify(config))
     delete strippedState.newViz
@@ -166,48 +112,6 @@ const Header = (props: HeaderProps) => {
           </ul>
           <div className='heading-body'>
             {tabSelected === 'Dashboard Description' && <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 === 'Dashboard Filters' && (
-              <>
-                {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 index={index} config={config} filterState={sharedFilter} removeFilter={removeFilter} />)
-                        }}
-                      >
-                        {sharedFilter.key}
-                      </a>
-                      <button onClick={() => removeFilter(index)}>X</button>
-                    </span>
-                  ))}
-                <button onClick={addNewFilter}>Add New Filter</button>
-
-                <Select
-                  value={config.filterBehavior}
-                  fieldName='filterBehavior'
-                  label='Filter Behavior'
-                  initial='- Select Option -'
-                  onchange={e => {
-                    const newConfig = { ...config, filterBehavior: e.target.value }
-                    dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
-                  }}
-                  options={Object.values(FilterBehavior)}
-                  tooltip={
-                    <Tooltip style={{ textTransform: 'none' }}>
-                      <Tooltip.Target>
-                        <Icon display='question' color='' style={{ marginLeft: '0.5rem' }} />
-                      </Tooltip.Target>
-                      <Tooltip.Content>
-                        <p>The Apply Button option changes the visualization when the user clicks "apply". The Filter Change option immediately changes the visualization when the selection is changed.</p>
-                      </Tooltip.Content>
-                    </Tooltip>
-                  }
-                />
-              </>
-            )}
             {tabSelected === 'Data Table Settings' && (
               <>
                 <div className='wrap'>

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -65,14 +65,14 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
 
   return (
     <li className='nav-item'>
-      <a className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} href='#' onClick={onClick}>
+      <div className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} onClick={onClick}>
         {canMoveLeft && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
         {editing ? <input type='text' defaultValue={name} onBlur={onBlur} ref={inputRef} /> : <>{name}</>}
         {canMoveRight && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
         <button className='remove' onClick={handleRemove}>
           X
         </button>
-      </a>
+      </div>
     </li>
   )
 }
@@ -95,9 +95,9 @@ const MultiConfigTabs = () => {
         <Tab key={tab + index} name={tab} tabs={tabs} index={index} handleClick={() => saveAndLoad(index)} active={index === activeTab} />
       ))}
       <li className='nav-item'>
-        <a className='nav-link add' href='#' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
+        <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
           +
-        </a>
+        </button>
       </li>
     </ul>
   )

package/src/components/MultiConfigTabs/MultiTabs.tsx

@@ -9,7 +9,8 @@ const MultiTabs = () => {
   const tabs = useMemo<string[]>(() => (config.multiDashboards || []).map(({ label }) => label), [config.multiDashboards])
   const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
 
-  const load = (indexToSwitchTo: number) => {
+  const load = (indexToSwitchTo: number, e) => {
+    e.preventDefault() // some form wrapper is causing this to act as a submit button
     dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
   }
 
@@ -18,7 +19,7 @@ const MultiTabs = () => {
     <ul className='nav nav-tabs multi-config-tabs'>
       {tabs.map((tab, index) => (
         <li className='nav-item'>
-          <a className={`nav-link${activeTab === index ? ' active' : ''}`} aria-current={activeTab === index ? 'page' : null} href='#' onClick={() => load(index)}>
+          <a className={`nav-link${activeTab === index ? ' active' : ''}`} aria-current={activeTab === index ? 'page' : null} href='#' onClick={e => load(index, e)}>
             {tab}
           </a>
         </li>

package/src/components/Row.tsx

@@ -17,6 +17,7 @@ import { DataDesignerModal } from './DataDesignerModal'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import { iconHash } from '../helpers/iconHash'
 import _ from 'lodash'
+import { Visualization } from '@cdc/core/types/Visualization'
 
 type RowMenuProps = {
   rowIdx: number
@@ -104,9 +105,20 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
   }
 
   const deleteRow = () => {
-    rows.splice(rowIdx, 1) // Just delete the row. Don't delete the instantiated widgets for now.
+    let newVisualizations = { ...config.visualizations }
+
+    //delete the instantiated widgets
+    if (rows[rowIdx] && rows[rowIdx].columns && rows[rowIdx].columns.length && config.visualizations) {
+      rows[rowIdx].columns.forEach(column => {
+        if (column.widget) {
+          delete newVisualizations[column.widget]
+        }
+      })
+    }
 
-    updateConfig({ ...config, rows })
+    rows.splice(rowIdx, 1) // delete the row
+
+    updateConfig({ ...config, rows, visualizations: newVisualizations })
   }
 
   const layoutList = [
@@ -149,31 +161,52 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
   )
 }
 
-const Row = ({ row, idx: rowIdx, uuid }) => {
+type RowProps = { row: ConfigRow; idx: number; uuid: number | string }
+
+const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
   const { overlay } = useGlobalContext()
-  return (
-    <div className='builder-row' data-row-id={rowIdx}>
-      <RowMenu rowIdx={rowIdx} />
-      <div className='column-container'>
-        <>
-          <button
-            title='Configure Data'
-            className='btn btn-configure-row'
-            onClick={() => {
-              overlay?.actions.openOverlay(<DataDesignerModal rowIndex={rowIdx} />)
-            }}
-          >
-            {iconHash['gear']}
-          </button>
+  const dispatch = useContext(DashboardDispatchContext)
 
+  const configureFootnotes = () => {
+    if (!row.footnotesId) {
+      const type = 'footnotes'
+      const uid = type + Date.now()
+      const newVisualizationConfig = {
+        uid,
+        type,
+        visualizationType: type,
+        editing: true
+      }
+      dispatch({ type: 'ADD_FOOTNOTE', payload: { id: uid, rowIndex: rowIdx, config: newVisualizationConfig as Visualization } })
+    } else {
+      dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey: row.footnotesId, configureData: { editing: true } } })
+    }
+  }
+  return (
+    <>
+      <div className='builder-row' data-row-id={rowIdx}>
+        <RowMenu rowIdx={rowIdx} />
+        <button
+          title='Configure Data'
+          className='btn btn-configure-row'
+          onClick={() => {
+            overlay?.actions.openOverlay(<DataDesignerModal rowIndex={rowIdx} />)
+          }}
+        >
+          {iconHash['gear']}
+        </button>
+        <div className='column-container'>
           {row.columns
             .filter(column => column.width)
             .map((column, colIdx) => (
               <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
             ))}
-        </>
+        </div>
+        <button className='btn btn-primary footnotes' onClick={configureFootnotes}>
+          {row.footnotesId ? 'Edit' : 'Add'} Footnotes
+        </button>
       </div>
-    </div>
+    </>
   )
 }
 

package/src/components/Toggle/Toggle.tsx

@@ -1,7 +1,5 @@
-import { useContext } from 'react'
-import { DashboardDispatchContext } from '../../DashboardContext'
 import { ConfigRow } from '../../types/ConfigRow'
-import { Visualization } from '@cdc/core/types/Visualization'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { getIcon } from '../../helpers/iconHash'
 import './toggle-style.css'
 import _ from 'lodash'
@@ -9,7 +7,7 @@ import _ from 'lodash'
 type ToggleProps = {
   active: number
   row: ConfigRow
-  visualizations: Record<string, Visualization>
+  visualizations: Record<string, AnyVisualization>
   setToggled: (colIndex: number) => void
 }
 const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled }) => {

package/src/components/VisualizationRow.tsx

@@ -1,57 +1,104 @@
 import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
-import React, { MouseEventHandler, useContext, useMemo } from 'react'
+import React, { useContext, useMemo } from 'react'
 import Toggle from './Toggle'
 import _ from 'lodash'
-import { DashboardConfig } from '../types/DashboardConfig'
 import { ConfigRow } from '../types/ConfigRow'
-import DataTransform from '@cdc/core/helpers/DataTransform'
-import CdcMap from '@cdc/map'
 import CdcChart from '@cdc/chart'
 import CdcDataBite from '@cdc/data-bite'
+import CdcMap from '@cdc/map'
 import CdcWaffleChart from '@cdc/waffle-chart'
 import CdcMarkupInclude from '@cdc/markup-include'
 import CdcFilteredText from '@cdc/filtered-text'
-import Filters, { APIFilterDropdowns } from './Filters'
-import { FilterBehavior } from './Header/Header'
+import DashboardSharedFilters, { APIFilterDropdowns } from './DashboardFilters'
 import { DashboardContext } from '../DashboardContext'
 import { ViewPort } from '@cdc/core/types/ViewPort'
-import { getVizConfig } from '../helpers/getVizConfig'
+import { getFootnotesVizConfig, getVizConfig } from '../helpers/getVizConfig'
+import { TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
+import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
+import CollapsibleVisualizationRow from './CollapsibleVisualizationRow'
+import { DashboardFilters } from '../types/DashboardFilters'
+import { hasDashboardApplyBehavior } from '../helpers/hasDashboardApplyBehavior'
+
+type VisualizationWrapperProps = {
+  allExpanded: boolean
+  children: React.ReactNode
+  currentViewport: ViewPort
+  groupName: string
+  row: ConfigRow
+}
+
+const VisualizationWrapper: React.FC<VisualizationWrapperProps> = ({ allExpanded, currentViewport, groupName, row, children }) => {
+  return row.expandCollapseAllButtons ? (
+    <div className='collapsable-multiviz-container'>
+      <CollapsibleVisualizationRow allExpanded={allExpanded} fontSize={'26px'} groupName={groupName} currentViewport={currentViewport}>
+        {children}
+      </CollapsibleVisualizationRow>
+    </div>
+  ) : (
+    <>
+      <h3>{groupName}</h3>
+      {children}
+    </>
+  )
+}
 
 type VizRowProps = {
+  allExpanded: boolean
   filteredDataOverride?: Object[]
+  groupName: string
   row: ConfigRow
   rowIndex: number
   setSharedFilter: Function
   updateChildConfig: Function
-  applyFilters: MouseEventHandler<HTMLButtonElement>
   apiFilterDropdowns: APIFilterDropdowns
-  handleOnChange: Function
   currentViewport: ViewPort
 }
 
-const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, rowIndex: index, setSharedFilter, updateChildConfig, applyFilters, apiFilterDropdowns, handleOnChange, currentViewport }) => {
+const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOverride, groupName, row, rowIndex: index, setSharedFilter, updateChildConfig, applyFilters, apiFilterDropdowns, handleOnChange, currentViewport }) => {
   const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
   const [show, setShow] = React.useState(row.columns.map((col, i) => i === 0))
   const setToggled = (colIndex: number) => {
     setShow(show.map((_, i) => i === colIndex))
   }
   const inNoDataState = useMemo(() => {
-    const vals = Object.values(rawData)
+    const vals = Object.values(rawData).flatMap(val => val)
     if (!vals.length) return true
     return vals.some(val => val === undefined)
   }, [rawData])
-  const GoButton = ({ autoLoad }: { autoLoad?: boolean }) => {
-    if (config.filterBehavior === FilterBehavior.Apply && !autoLoad) {
-      return <button onClick={applyFilters}>GO!</button>
+
+  const footnotesConfig = useMemo(() => {
+    if (row.footnotesId) {
+      const footnoteConfig = getFootnotesVizConfig(row.footnotesId, index, config)
+      if (row.multiVizColumn && filteredDataOverride) {
+        const vizCategory = filteredDataOverride[0][row.multiVizColumn]
+        // the multiViz filtering filtering is applied after the dashboard filters
+        const categoryFootnote = footnoteConfig.formattedData.filter(d => d[row.multiVizColumn] === vizCategory)
+        footnoteConfig.formattedData = categoryFootnote
+      }
+      return footnoteConfig
     }
     return null
+  }, [config, row, rawData, dashboardFilteredData])
+
+  const applyButtonNotClicked = (vizConfig: DashboardFilters): boolean => {
+    const dashboardFilters = Object.values(config.visualizations).filter(v => v.type === 'dashboardFilters') as DashboardFilters[]
+    const applyFilters = dashboardFilters.filter(v => !v.autoLoad).flatMap(v => v.sharedFilterIndexes)
+    if (hasDashboardApplyBehavior(config.visualizations) && vizConfig.autoLoad) {
+      return applyFilters.some(index => {
+        const { queuedActive, active } = config.dashboard.sharedFilters[index]
+        if (!active && !queuedActive) return true
+        if (!queuedActive) return false
+        return queuedActive !== active
+      })
+    }
+    return false
   }
   return (
-    <div className={`dashboard-row ${row.equalHeight ? 'equal-height' : ''} ${row.toggle ? 'toggle' : ''}`} key={`row__${index}`}>
+    <div className={`row mb-5 ${row.equalHeight ? 'equal-height' : ''} ${row.toggle ? 'toggle' : ''}`} key={`row__${index}`}>
       {row.toggle && <Toggle row={row} visualizations={config.visualizations} active={show.indexOf(true)} setToggled={setToggled} />}
       {row.columns.map((col, colIndex) => {
         if (col.width) {
-          if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`dashboard-col dashboard-col-${col.width}`}></div>
+          if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`col-md-${col.width}`}></div>
 
           const visualizationConfig = getVizConfig(col.widget, index, config, rawData, dashboardFilteredData)
           if (filteredDataOverride) {
@@ -68,12 +115,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
               {visualizationConfig.dataKey} (Go to Table)
             </a>
           )
-          const hideFilter = visualizationConfig.autoLoad && inNoDataState
+          const hideFilter = inNoDataState && visualizationConfig.type === 'dashboardFilters' && applyButtonNotClicked(visualizationConfig)
 
           const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
+
+          const body = <></>
+
           return (
-            <React.Fragment key={`vis__${index}__${colIndex}`}>
-              <div className={`dashboard-col dashboard-col-${col.width} ${!shouldShow ? 'hidden-toggle' : ''}`}>
+            <div key={`vis__${index}__${colIndex}`} className={`col-${col.width} ${!shouldShow ? 'd-none' : ''}`}>
+              <VisualizationWrapper allExpanded={allExpanded} currentViewport={currentViewport} groupName={groupName} row={row}>
                 {visualizationConfig.type === 'chart' && (
                   <CdcChart
                     key={col.widget}
@@ -134,12 +184,12 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
                   <CdcMarkupInclude
                     key={col.widget}
                     config={visualizationConfig}
+                    configUrl={undefined}
+                    isDashboard={true}
                     isEditor={false}
                     setConfig={newConfig => {
                       updateChildConfig(col.widget, newConfig)
                     }}
-                    isDashboard={true}
-                    configUrl={undefined}
                   />
                 )}
                 {visualizationConfig.type === 'filtered-text' && (
@@ -154,19 +204,36 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
                     configUrl={undefined}
                   />
                 )}
-                {visualizationConfig.type === 'filter-dropdowns' && !hideFilter && (
-                  <React.Fragment key={col.widget}>
-                    <Filters hide={visualizationConfig.hide} filters={config.dashboard.sharedFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
-                    <GoButton autoLoad={visualizationConfig.autoLoad} />
-                  </React.Fragment>
+                {visualizationConfig.type === 'dashboardFilters' && !hideFilter && (
+                  <DashboardSharedFilters
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    key={col.widget}
+                    visualizationConfig={visualizationConfig as DashboardFilters}
+                    apiFilterDropdowns={apiFilterDropdowns}
+                    currentViewport={currentViewport}
+                  />
+                )}
+                {visualizationConfig.type === 'table' && (
+                  <DataTableStandAlone
+                    key={col.widget}
+                    updateConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    visualizationKey={col.widget}
+                    config={visualizationConfig as TableConfig}
+                    viewport={currentViewport}
+                  />
                 )}
-                {visualizationConfig.type === 'table' && <DataTableStandAlone key={col.widget} visualizationKey={col.widget} config={visualizationConfig} viewport={currentViewport} />}
-              </div>
-            </React.Fragment>
+                {visualizationConfig.type === 'footnotes' && <FootnotesStandAlone key={col.widget} visualizationKey={col.widget} config={visualizationConfig} viewport={currentViewport} />}
+              </VisualizationWrapper>
+            </div>
           )
         }
         return <React.Fragment key={`vis__${index}__${colIndex}`}></React.Fragment>
       })}
+      {row.footnotesId ? <FootnotesStandAlone isEditor={false} visualizationKey={row.footnotesId} config={footnotesConfig} viewport={currentViewport} /> : null}
     </div>
   )
 }

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -0,0 +1,116 @@
+import { useContext, useState } from 'react'
+import type { AnyVisualization } from '@cdc/core/types/Visualization'
+import Widget from '../Widget'
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
+import { Table } from '@cdc/core/types/Table'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import { mapDataToConfig } from '../../helpers/mapDataToConfig'
+import './visualizations-panel-styles.css'
+
+const addVisualization = (type, subType) => {
+  const modalWillOpen = type !== 'markup-include'
+  const newVisualizationConfig: Partial<AnyVisualization> = {
+    filters: [],
+    filterBehavior: 'Filter Change',
+    newViz: type !== 'table',
+    openModal: modalWillOpen,
+    uid: type + Date.now(),
+    type
+  }
+
+  switch (type) {
+    case 'chart':
+      newVisualizationConfig.visualizationType = subType
+      break
+    case 'map':
+      newVisualizationConfig.general = {}
+      newVisualizationConfig.general.geoType = subType
+      break
+    case 'data-bite' || 'waffle-chart' || 'filtered-text':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'table':
+      const tableConfig: Table = { label: 'Data Table', show: true, showDownloadUrl: false, showVertical: true, expanded: true, collapsible: true }
+      newVisualizationConfig.table = tableConfig
+      newVisualizationConfig.columns = {}
+      newVisualizationConfig.dataFormat = {}
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'markup-include':
+      newVisualizationConfig.contentEditor = {
+        inlineHTML: '<h2>Inline HTML</h2>',
+        markupVariables: [],
+        showHeader: true,
+        srcUrl: '#example',
+        title: 'Markup Include',
+        useInlineHTML: true
+      }
+      newVisualizationConfig.theme = 'theme-blue'
+      newVisualizationConfig.visual = {
+        border: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false,
+        borderColorTheme: false
+      }
+      newVisualizationConfig.showEditorPanel = true
+      newVisualizationConfig.visualizationType = type
+
+      break
+    case 'dashboardFilters': {
+      newVisualizationConfig.sharedFilterIndexes = []
+      newVisualizationConfig.visualizationType = type
+      break
+    }
+    default:
+      newVisualizationConfig.visualizationType = type
+      break
+  }
+
+  return newVisualizationConfig
+}
+
+const VisualizationsPanel = () => {
+  const [advancedEditing, setAdvancedEditing] = useState(false)
+  const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const loadConfig = newConfig => dispatch({ type: 'APPLY_CONFIG', payload: [mapDataToConfig(newConfig)] })
+  return (
+    <div className={`visualizations-panel${advancedEditing ? ' advanced-editor' : ''}`}>
+      <p style={{ fontSize: '14px' }}>Click and drag an item onto the grid to add it to your dashboard.</p>
+      <span className='subheading-3'>Chart</span>
+      <div className='drag-grid'>
+        <Widget addVisualization={() => addVisualization('chart', 'Bar')} type='Bar' />
+        <Widget addVisualization={() => addVisualization('chart', 'Line')} type='Line' />
+        <Widget addVisualization={() => addVisualization('chart', 'Pie')} type='Pie' />
+        <Widget addVisualization={() => addVisualization('chart', 'Sankey')} type='Sankey' />
+      </div>
+      <span className='subheading-3'>Map</span>
+      <div className='drag-grid'>
+        <Widget addVisualization={() => addVisualization('map', 'us')} type='us' />
+        <Widget addVisualization={() => addVisualization('map', 'world')} type='world' />
+        <Widget addVisualization={() => addVisualization('map', 'single-state')} type='single-state' />
+      </div>
+      <span className='subheading-3'>Misc.</span>
+      <div className='drag-grid'>
+        <Widget addVisualization={() => addVisualization('data-bite', '')} type='data-bite' />
+        <Widget addVisualization={() => addVisualization('waffle-chart', '')} type='waffle-chart' />
+        <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
+        <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
+        <Widget addVisualization={() => addVisualization('dashboardFilters', '')} type='dashboardFilters' />
+        <Widget addVisualization={() => addVisualization('table', '')} type='table' />
+      </div>
+      <span className='subheading-3'>Advanced</span>
+      <AdvancedEditor
+        loadConfig={loadConfig}
+        config={config}
+        convertStateToConfig={() => undefined}
+        onExpandCollapse={() => {
+          setAdvancedEditing(!advancedEditing)
+        }}
+      />
+    </div>
+  )
+}
+
+export default VisualizationsPanel

package/src/components/VisualizationsPanel/index.ts

@@ -0,0 +1 @@
+export { default } from './VisualizationsPanel'

package/src/components/VisualizationsPanel/visualizations-panel-styles.css

@@ -0,0 +1,12 @@
+.visualizations-panel {
+  background-color: #fff;
+  padding: 1em;
+  width: var(--editorWidth);
+  border-right: #c7c7c7 1px solid;
+  z-index: 1;
+  overflow-y: scroll;
+
+  &.advanced-editor {
+    width: 50vw;
+  }
+}