@cdc/dashboard 4.24.4 → 4.24.5

package/src/_stories/_mock/pivot-filter.json

@@ -41,6 +41,8 @@
         "horizontal": false,
         "series": false
       },
+      "filters": [],
+      "filterBehavior": "Filter Change",
       "formattedData": [
         {
           "Race": "Hispanic or Latino",

package/src/_stories/_mock/standalone-table.json

@@ -17,6 +17,8 @@
       "newViz": true,
       "openModal": false,
       "uid": "table1707840146431",
+      "filters": [],
+      "filterBehavior": "Filter Change",
       "table": {
         "label": "Data Table",
         "show": true,

package/src/components/Header/FilterModal.tsx

@@ -369,6 +369,7 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
                   value={filter.pivot}
                   onChange={e => {
                     updateFilterProp('pivot', e.target.value)
+                    updateFilterProp('showDropdown', true)
                   }}
                 >
                   <option value=''>- Select Option -</option>
@@ -391,16 +392,19 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
                   }}
                 />
               </label>
-              <label>
-                <span className='edit-label column-heading'>Show Dropdown</span>
-                <input
-                  type='checkbox'
-                  defaultChecked={filter.showDropdown === true}
-                  onChange={e => {
-                    updateFilterProp('showDropdown', !filter.showDropdown)
-                  }}
-                />
-              </label>
+              {!filter.pivot && (
+                <label>
+                  <span className='edit-label column-heading'>Show Dropdown</span>
+                  <input
+                    type='checkbox'
+                    defaultChecked={filter.showDropdown === true}
+                    onChange={e => {
+                      updateFilterProp('showDropdown', !filter.showDropdown)
+                    }}
+                  />
+                </label>
+              )}
+
               <label>
                 <span className='edit-label column-heading'>Set By: </span>
                 <select value={filter.setBy} onChange={e => updateFilterProp('setBy', e.target.value)}>

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/VisualizationRow.tsx

@@ -2,9 +2,7 @@ import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAl
 import React, { MouseEventHandler, 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'
@@ -16,6 +14,7 @@ import { FilterBehavior } from './Header/Header'
 import { DashboardContext } from '../DashboardContext'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import { getVizConfig } from '../helpers/getVizConfig'
+import { TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
 
 type VizRowProps = {
   filteredDataOverride?: Object[]
@@ -134,12 +133,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' && (
@@ -160,7 +159,17 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
                     <GoButton autoLoad={visualizationConfig.autoLoad} />
                   </React.Fragment>
                 )}
-                {visualizationConfig.type === 'table' && <DataTableStandAlone key={col.widget} visualizationKey={col.widget} config={visualizationConfig} viewport={currentViewport} />}
+                {visualizationConfig.type === 'table' && (
+                  <DataTableStandAlone
+                    key={col.widget}
+                    updateConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    visualizationKey={col.widget}
+                    config={visualizationConfig as TableConfig}
+                    viewport={currentViewport}
+                  />
+                )}
               </div>
             </React.Fragment>
           )

package/src/components/VisualizationsPanel.tsx

@@ -7,6 +7,8 @@ import { Table } from '@cdc/core/types/Table'
 const addVisualization = (type, subType) => {
   const modalWillOpen = type !== 'markup-include'
   const newVisualizationConfig: Partial<Visualization> = {
+    filters: [],
+    filterBehavior: 'Filter Change',
     newViz: type !== 'table',
     openModal: modalWillOpen,
     uid: type + Date.now(),
@@ -21,15 +23,36 @@ const addVisualization = (type, subType) => {
       newVisualizationConfig.general = {}
       newVisualizationConfig.general.geoType = subType
       break
-    case 'data-bite' || 'waffle-chart' || 'markup-include' || 'filtered-text':
+    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 }
+      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
     default:
       newVisualizationConfig.visualizationType = type
@@ -65,7 +88,7 @@ const VisualizationsPanel = ({ loadConfig, config }) => (
       <Widget addVisualization={() => addVisualization('table', '')} type='table' />
     </div>
     <span className='subheading-3'>Advanced</span>
-    <AdvancedEditor loadConfig={loadConfig} state={config} convertStateToConfig={undefined} />
+    <AdvancedEditor loadConfig={loadConfig} state={config} convertStateToConfig={() => undefined} />
   </div>
 )
 

package/src/components/Widget.tsx

@@ -168,7 +168,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
 
   let isConfigurationReady = false
   const dataConfiguredForRow = !!rows[data?.rowIdx]?.dataKey
-  if (dataConfiguredForRow || ['markup-include', 'filter-dropdowns'].includes(type)) {
+  if (dataConfiguredForRow || ['filter-dropdowns', 'markup-include'].includes(type)) {
     isConfigurationReady = true
   } else {
     if (data?.formattedData) {
@@ -182,7 +182,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     }
   }
 
-  const needsDataConfiguration = !dataConfiguredForRow && type !== 'markup-include'
+  const needsDataConfiguration = !dataConfiguredForRow
 
   return (
     <>

package/src/helpers/filterData.ts

@@ -23,21 +23,19 @@ function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
 }
 
 function filter(data, filters, condition) {
-  return data
-    ? data.filter(row => {
-        const found = filters.find(filter => {
-          if (filter.pivot) return false
-          const currentValue = row[filter.columnName]
-          const selectedValue = filter.queuedActive || filter.active
-          const isNotTheSelectedValue = selectedValue && currentValue != selectedValue
-          const isFirstOccurrenceOfTier = filter.tier === condition
-          if (filter.type !== 'urlfilter' && isFirstOccurrenceOfTier && isNotTheSelectedValue) {
-            return true
-          }
-        })
-        return !found
-      })
-    : []
+  return data ? data.filter(row => {
+    const found = filters.find(filter => {
+      if (filter.pivot) return false
+      const currentValue = row[filter.columnName]
+      const selectedValue = filter.queuedActive || filter.active
+      const isNotTheSelectedValue = selectedValue && currentValue != selectedValue
+      const isFirstOccurrenceOfTier = filter.tier === condition
+      if (filter.type !== 'urlfilter' && isFirstOccurrenceOfTier && isNotTheSelectedValue) {
+        return true
+      }
+    })
+    return !found
+  })  : []
 }
 
 function setFilterValuesAndActiveFilter(filters: SharedFilter[], filteredData: Object[], i: number) {
@@ -68,7 +66,7 @@ const pivotData = (data, pivotFilter: SharedFilter) => {
       const row = newData[index] || {}
       if (!inactive.includes(key)) row[key] = val[valueColumn]
       const toAdd = _.omit(val, [pivotColumn, valueColumn, ...inactive])
-      newData[index] = { ...row, ...toAdd }
+      newData[index] = { ...toAdd, ...row }
     })
   }
   return newData
@@ -84,7 +82,7 @@ export const filterData = (filters: SharedFilter[], _data: Object[]): Object[] =
 
     const filteredData = filter(_data, filters, i + 1)
 
-    setFilterValuesAndActiveFilter(_.cloneDeep(filters), filteredData, i)
+    setFilterValuesAndActiveFilter(filters, filteredData, i)
 
     if (lastIteration) {
       const pivotFilter = filters.find(filter => filter.pivot)

package/src/store/dashboard.actions.ts

@@ -1,14 +1,10 @@
 import type { DashboardConfig as Config } from '../types/DashboardConfig'
 import { type Action } from '@cdc/core/types/Action'
 import { Tab } from '../types/Tab'
-<<<<<<< HEAD
 import { ConfigureData } from '@cdc/core/types/ConfigureData'
 import { ConfigRow } from '../types/ConfigRow'
-=======
-import { SharedFilter } from '../types/SharedFilter'
->>>>>>> 35436844 (fixed api dropdowns)
 
-type SET_CONFIG = Action<'SET_CONFIG', Partial<Config>>
+type SET_CONFIG = Action<'SET_CONFIG', Config>
 type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
 type SET_DATA = Action<'SET_DATA', Object>
 type SET_LOADING = Action<'SET_LOADING', boolean>
@@ -23,12 +19,8 @@ type ADD_NEW_DASHBOARD = Action<'ADD_NEW_DASHBOARD', undefined>
 type SAVE_CURRENT_CHANGES = Action<'SAVE_CURRENT_CHANGES', undefined>
 type SWITCH_CONFIG = Action<'SWITCH_CONFIG', number>
 type TOGGLE_ROW = Action<'TOGGLE_ROW', { rowIndex: number; colIndex: number }>
-<<<<<<< HEAD
 type UPDATE_VISUALIZATION = Action<'UPDATE_VISUALIZATION', { vizKey: string; configureData: Partial<ConfigureData> }>
 type UPDATE_ROW = Action<'UPDATE_ROW', { rowIndex: number; rowData: Partial<ConfigRow> }>
-=======
-type SET_SHARED_FILTERS = Action<'SET_SHARED_FILTERS', SharedFilter[]>
->>>>>>> 35436844 (fixed api dropdowns)
 
 type DashboardActions =
   | ADD_NEW_DASHBOARD
@@ -42,7 +34,6 @@ type DashboardActions =
   | SET_LOADING
   | SET_PREVIEW
   | SET_FILTERED_DATA
-  | SET_SHARED_FILTERS
   | SET_TAB_SELECTED
   | SWITCH_CONFIG
   | INITIALIZE_MULTIDASHBOARDS

package/src/store/dashboard.reducer.ts

@@ -1,19 +1,26 @@
 import _ from 'lodash'
 import { getUpdateConfig } from '../helpers/getUpdateConfig'
-import { MultiDashboardConfig } from '../types/MultiDashboard'
+import { MultiDashboard, MultiDashboardConfig } from '../types/MultiDashboard'
 import DashboardActions from './dashboard.actions'
 import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
 import { Tab } from '../types/Tab'
+import { DashboardConfig } from '../types/DashboardConfig'
+import { ConfigRow } from '../types/ConfigRow'
 
-const createBlankDashboard = () => ({
-  dashboard: {
-    theme: 'theme-blue'
-  },
-  rows: [[{ width: 12 }, {}, {}]],
+type BlankMultiConfig = {
+  dashboard: Partial<DashboardConfig>
+  rows: Partial<ConfigRow>[]
+  visualizations: Record<string, Object>
+  table: Object
+}
+
+const createBlankDashboard: () => BlankMultiConfig = () => ({
+  dashboard: {},
+  rows: [{ columns: [{ width: 12 }] }],
   visualizations: {},
   table: {
     label: 'Data Table',
-    show: true,
+    show: false,
     showDownloadUrl: false,
     showVertical: true
   }
@@ -41,7 +48,7 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       return { ...state, config, filteredData }
     }
     case 'SET_CONFIG': {
-      return { ...state, config: { ...state.config, ...action.payload } }
+      return { ...state, config: action.payload }
     }
     case 'SET_DATA': {
       return { ...state, data: action.payload }
@@ -92,11 +99,6 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       newMultiDashboards[saveSlot] = { ...toSave, label }
       return applyMultiDashboards(state, newMultiDashboards)
     }
-    case 'SET_SHARED_FILTERS': {
-      const newSharedFilters = action.payload
-      const newDashboardConfig = { ...state.config.dashboard, sharedFilters: newSharedFilters }
-      return { ...state, config: { ...state.config, dashboard: newDashboardConfig } }
-    }
     case 'INITIALIZE_MULTIDASHBOARDS': {
       const label = 'New Dashboard 1'
       const toSave = _.pick(state.config, ['dashboard', 'visualizations', 'rows'])

package/src/types/APIFilter.ts

@@ -1,4 +1,5 @@
-export type APIFilter = Record<'apiEndpoint' | 'valueSelector' | 'textSelector', string> & {
-  autoLoad?: boolean
-  defaultValue?: string
-}
+export type APIFilter = Record<'apiEndpoint'|'valueSelector'|'textSelector', string> & {
+    heirarchyLookup?: string
+    autoLoad?: boolean
+    defaultValue?: string
+}

package/src/components/EditorWrapper/EditorWrapper.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { Accordion } from 'react-accessible-accordion'
-import Header from '../Header'
-import { Visualization } from '@cdc/core/types/Visualization'
-import { ViewPort } from '@cdc/core/types/ViewPort'
-import './editor-wrapper.style.css'
-
-type StandAloneComponentProps = {
-  visualizationKey: string
-  config: Visualization
-  isEditor: boolean
-  setConfig: Function
-  isDashboard: boolean
-  configUrl: string
-  setEditing: Function
-  hostname: string
-  viewport?: ViewPort
-}
-
-type EditorProps = {
-  component: React.JSXElementConstructor<StandAloneComponentProps>
-  type: string
-  visualizationKey: string
-  visualizationConfig: Visualization
-  updateConfig: Function
-  viewport?: ViewPort
-}
-
-const EditorWrapper: React.FC<React.PropsWithChildren<EditorProps>> = ({ children, visualizationKey, visualizationConfig, type, component: Component, updateConfig, viewport }) => {
-  const [displayPanel, setDisplayPanel] = React.useState(true)
-  return (
-    <>
-      <Header visualizationKey={visualizationKey} subEditor={type} />
-      <div className='editor-wrapper'>
-        <button className={`editor-toggle ${displayPanel ? '' : 'collapsed'}`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={() => setDisplayPanel(!displayPanel)} />
-        <section className={`${displayPanel ? '' : 'hidden'} editor-panel cove`}>
-          <div aria-level={2} role='heading' className='heading-2'>
-            Configure {type}
-          </div>
-          <form>
-            <Accordion allowZeroExpanded={true}>{children}</Accordion>
-          </form>
-        </section>
-        <div className='preview-wrapper'>
-          <Component visualizationKey={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} configUrl={undefined} setEditing={undefined} hostname={undefined} viewport={viewport} />
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default EditorWrapper

package/src/components/EditorWrapper/editor-wrapper.style.css

@@ -1,13 +0,0 @@
-.editor-wrapper {
-  --editorPanelWidth: 350px;
-  position: relative;
-  .editor-panel {
-    :is(form) {
-      border-right: var(--lightGray) 1px solid;
-      flex-grow: 1;
-    }
-  }
-  .preview-wrapper {
-    padding-left: var(--editorPanelWidth);
-  }
-}