@cdc/dashboard 4.24.2 → 4.24.4

package/src/components/DataDesignerModal.tsx

@@ -0,0 +1,145 @@
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import DataDesigner from '@cdc/core/components/managers/DataDesigner'
+import { useContext, useMemo, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import { CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import _ from 'lodash'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import DataTransform from '@cdc/core/helpers/DataTransform'
+import { ConfigureData } from '@cdc/core/types/ConfigureData'
+import Icon from '@cdc/core/components/ui/Icon'
+import InputSelect from '@cdc/core/components/inputs/InputSelect'
+
+type DataDesignerModalProps = {
+  rowIndex: number
+  vizKey?: string
+}
+
+export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, rowIndex }) => {
+  const { config } = useContext(DashboardContext)
+  const { overlay } = useGlobalContext()
+  const transform = new DataTransform()
+  const dispatch = useContext(DashboardDispatchContext)
+  const [canContinue, setCanContinue] = useState(false)
+  const [useRow, setUseRow] = useState(!vizKey)
+  const [multiViz, setMultiViz] = useState(!!config.rows[rowIndex].multiVizColumn)
+
+  const configureData = useMemo(() => {
+    if (vizKey && !useRow) {
+      return config.visualizations[vizKey]
+    }
+    return config.rows[rowIndex]
+  }, [config.visualizations, config.rows, vizKey, rowIndex, useRow])
+
+  const updateConfigureData = (newConfigureData: Partial<ConfigureData>) => {
+    if (vizKey && !useRow) {
+      dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey, configureData: newConfigureData } })
+    } else {
+      dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: newConfigureData } })
+    }
+  }
+
+  const changeDataset = ({ target: { value } }) => {
+    const newConfigureData = { dataDescription: {}, formattedData: undefined, dataKey: value }
+
+    updateConfigureData(newConfigureData)
+  }
+
+  const updateDescriptionProp = async (key, value) => {
+    const datasetKey = configureData.dataKey
+    const { data, dataUrl } = config.datasets[datasetKey]
+    let newData = data
+    if (!data && dataUrl) {
+      newData = await fetchRemoteData(dataUrl)
+      newData = transform.autoStandardize(newData)
+    }
+
+    const dataDescription = { ...configureData.dataDescription, [key]: value }
+
+    const newConfigureData = { data: newData, dataDescription, formattedData: transform.developerStandardize(newData, dataDescription) }
+
+    updateConfigureData(newConfigureData)
+    setCanContinue(true)
+  }
+
+  const setMultiVizColumn = (column: string) => {
+    if (column !== '') {
+      dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: { multiVizColumn: column } } })
+      setCanContinue(true)
+    }
+  }
+
+  return (
+    <Modal>
+      <Modal.Content>
+        <div className='dataset-selector-container'>
+          Select a dataset:&nbsp;
+          <select className='dataset-selector' value={configureData.dataKey || ''} onChange={changeDataset}>
+            <option value=''>Select a dataset</option>
+            {config.datasets && Object.keys(config.datasets).map(datasetKey => <option key={datasetKey}>{datasetKey}</option>)}
+          </select>
+          {vizKey && (
+            <CheckBox
+              label='Apply To Row'
+              value={useRow}
+              updateField={(section, subsection, fieldName, value) => {
+                setUseRow(value)
+                changeDataset({ target: { value: '' } })
+              }}
+            />
+          )}
+        </div>
+        {configureData.dataKey && (
+          <DataDesigner
+            {...{
+              configureData,
+              visualizationKey: vizKey,
+              updateDescriptionProp
+            }}
+          />
+        )}
+        {useRow && !!configureData.dataKey ? (
+          !multiViz ? (
+            <CheckBox
+              label='Configure Multiple Visualizations'
+              value={multiViz}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>You can select a column where for each unique value in the column the configuration for the row will be repeated in to the data preview.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+              updateField={(section, subsection, fieldName, value) => {
+                if (canContinue && value === true) setCanContinue(false)
+                setMultiViz(value)
+              }}
+            />
+          ) : (
+            <InputSelect
+              options={Object.keys(config.datasets[configureData.dataKey]?.data[0] || {})}
+              value={config.rows[rowIndex].multiVizColumn}
+              label='Multi-Visualization Column'
+              initial='--Select--'
+              fieldName=''
+              updateField={(section, subsection, fieldName, value) => setMultiVizColumn(value)}
+              required
+            />
+          )
+        ) : (
+          <></>
+        )}
+        {canContinue && (
+          <button style={{ margin: '1em', display: 'block' }} className='cove-button' onClick={() => overlay?.actions.toggleOverlay()}>
+            Continue
+          </button>
+        )}
+      </Modal.Content>
+    </Modal>
+  )
+}

package/src/components/EditorWrapper/EditorWrapper.tsx

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,13 @@
+.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);
+  }
+}

package/src/components/Filters.tsx

@@ -0,0 +1,88 @@
+import MultiSelect from '@cdc/core/components/MultiSelect'
+import { getApiFilterKey } from '../helpers/getApiFilterKey'
+import { SharedFilter } from '../types/SharedFilter'
+
+export type DropdownOptions = Record<'value' | 'text', string>[]
+
+export type APIFilterDropdowns = {
+  // null means still loading
+  [filtername: string]: null | DropdownOptions
+}
+
+type FilterProps = {
+  hide?: number[]
+  filters: SharedFilter[]
+  apiFilterDropdowns: APIFilterDropdowns
+  handleOnChange: Function
+}
+
+const Filters: React.FC<FilterProps> = ({ hide, filters, apiFilterDropdowns, handleOnChange }) => {
+  const updateField = (_section, _subsection, fieldName, value) => {
+    handleOnChange(fieldName, value)
+  }
+  return (
+    <>
+      {filters.map((singleFilter, filterIndex) => {
+        if ((singleFilter.type !== 'urlfilter' && !singleFilter.showDropdown) || (hide && hide.indexOf(filterIndex) !== -1)) return <></>
+        const values: JSX.Element[] = []
+        const multiValues = []
+        if (singleFilter.resetLabel) {
+          values.push(
+            <option key={`${singleFilter.resetLabel}-option`} value={singleFilter.resetLabel}>
+              {singleFilter.resetLabel}
+            </option>
+          )
+        }
+        const _key = singleFilter.apiFilter ? getApiFilterKey(singleFilter.apiFilter) : undefined
+        if (_key && apiFilterDropdowns[_key]) {
+          // URL Filter
+          apiFilterDropdowns[_key].forEach(({ text, value }, index) => {
+            values.push(
+              <option key={`${value}-option-${index}`} value={value}>
+                {text}
+              </option>
+            )
+          })
+        } else {
+          // Data Filter
+          singleFilter.values?.forEach((filterOption, index) => {
+            const labeledOpt = singleFilter.labels && singleFilter.labels[filterOption]
+            values.push(
+              <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
+                {labeledOpt || filterOption}
+              </option>
+            )
+            multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
+          })
+        }
+
+        return (
+          <div className='cove-dashboard-filters' key={`${singleFilter.key}-filtersection-${filterIndex}`}>
+            <section className='dashboard-filters-section'>
+              {!singleFilter.pivot ? (
+                <>
+                  <label htmlFor={`filter-${filterIndex}`}>{singleFilter.key}</label>
+                  <select
+                    id={`filter-${filterIndex}`}
+                    className='filter-select'
+                    data-index='0'
+                    value={singleFilter.queuedActive || singleFilter.active}
+                    onChange={val => {
+                      handleOnChange(filterIndex, val.target.value)
+                    }}
+                  >
+                    {values}
+                  </select>
+                </>
+              ) : (
+                <MultiSelect label={singleFilter.key} options={multiValues} fieldName={filterIndex} updateField={updateField} selected={singleFilter.active as string[]} limit={singleFilter.selectLimit || 5} />
+              )}
+            </section>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export default Filters

package/src/components/Grid.tsx

@@ -2,6 +2,7 @@ import React, { useContext } from 'react'
 import Row from './Row'
 
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
+import { ConfigRow } from '../types/ConfigRow'
 
 const Grid = () => {
   const { config } = useContext(DashboardContext)
@@ -10,9 +11,10 @@ const Grid = () => {
   const dispatch = useContext(DashboardDispatchContext)
   const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
   const addRow = () => {
+    const blankRow: Partial<ConfigRow> = { columns: [{ width: 12 }] }
     updateConfig({
       ...config,
-      rows: [...rows, [{ width: 12 }, { equalHeight: false }, {}, {}]],
+      rows: [...rows, blankRow],
       uuid: Date.now()
     })
   }