@cdc/dashboard 4.24.3 → 4.24.4

package/src/_stories/_mock/multi-viz.json

@@ -0,0 +1,378 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "Dashboard Filter 1",
+        "type": "datafilter",
+        "columnName": "Sample Categories",
+        "showDropdown": true,
+        "usedBy": ["0"],
+        "tier": 1
+      }
+    ]
+  },
+  "rows": [
+    {
+      "toggle": true,
+      "columns": [
+        {
+          "width": 12,
+          "widget": "chart1711646813542"
+        },
+        {
+          "width": 12,
+          "widget": "table1711646820983"
+        },
+        {
+          "width": 12
+        }
+      ],
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+
+      "dataKey": "valid-world-data.json",
+
+      "multiVizColumn": "Country"
+    }
+  ],
+  "visualizations": {
+    "chart1711646813542": {
+      "type": "chart",
+      "debugSvg": false,
+      "chartMessage": {
+        "noData": "No Data Available"
+      },
+      "title": "",
+      "showTitle": true,
+      "showDownloadMediaButton": false,
+      "theme": "theme-blue",
+      "animate": false,
+      "fontSize": "medium",
+      "lineDatapointStyle": "hover",
+      "lineDatapointColor": "Same as Line",
+      "barHasBorder": "false",
+      "isLollipopChart": false,
+      "lollipopShape": "circle",
+      "lollipopColorStyle": "two-tone",
+      "visualizationSubType": "regular",
+      "barStyle": "",
+      "roundingStyle": "standard",
+      "tipRounding": "top",
+      "isResponsiveTicks": false,
+      "general": {
+        "showDownloadButton": false
+      },
+      "padding": {
+        "left": 5,
+        "right": 5
+      },
+      "suppressedData": [],
+      "preliminaryData": [],
+      "yAxis": {
+        "hideAxis": false,
+        "displayNumbersOnBar": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 50,
+        "gridLines": false,
+        "enablePadding": false,
+        "min": "",
+        "max": "",
+        "labelColor": "#333",
+        "tickLabelColor": "#333",
+        "tickColor": "#333",
+        "rightHideAxis": true,
+        "rightAxisSize": 0,
+        "rightLabel": "",
+        "rightLabelOffsetSize": 0,
+        "rightAxisLabelColor": "#333",
+        "rightAxisTickLabelColor": "#333",
+        "rightAxisTickColor": "#333",
+        "numTicks": "",
+        "axisPadding": 0,
+        "scalePadding": 10,
+        "tickRotation": 0,
+        "anchors": []
+      },
+      "boxplot": {
+        "plots": [],
+        "borders": "true",
+        "firstQuartilePercentage": 25,
+        "thirdQuartilePercentage": 75,
+        "boxWidthPercentage": 40,
+        "plotOutlierValues": false,
+        "plotNonOutlierValues": true,
+        "legend": {
+          "showHowToReadText": false,
+          "howToReadText": ""
+        },
+        "labels": {
+          "q1": "Lower Quartile",
+          "q2": "q2",
+          "q3": "Upper Quartile",
+          "q4": "q4",
+          "minimum": "Minimum",
+          "maximum": "Maximum",
+          "mean": "Mean",
+          "median": "Median",
+          "sd": "Standard Deviation",
+          "iqr": "Interquartile Range",
+          "total": "Total",
+          "outliers": "Outliers",
+          "values": "Values",
+          "lowerBounds": "Lower Bounds",
+          "upperBounds": "Upper Bounds"
+        }
+      },
+      "topAxis": {
+        "hasLine": false
+      },
+      "isLegendValue": false,
+      "barThickness": 0.35,
+      "barHeight": 25,
+      "barSpace": 15,
+      "heights": {
+        "vertical": 300,
+        "horizontal": 750
+      },
+      "xAxis": {
+        "sortDates": false,
+        "anchors": [],
+        "type": "categorical",
+        "showTargetLabel": true,
+        "targetLabel": "Target",
+        "hideAxis": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 75,
+        "tickRotation": 0,
+        "min": "",
+        "max": "",
+        "labelColor": "#333",
+        "tickLabelColor": "#333",
+        "tickColor": "#333",
+        "numTicks": "",
+        "labelOffset": 65,
+        "axisPadding": 0,
+        "target": 0,
+        "maxTickRotation": 0,
+        "dataKey": "Sample Categories",
+        "tickWidthMax": 89
+      },
+      "table": {
+        "label": "Data Table",
+        "expanded": true,
+        "limitHeight": false,
+        "height": "",
+        "caption": "",
+        "showDownloadUrl": false,
+        "showDataTableLink": false,
+        "indexLabel": "",
+        "download": false,
+        "showVertical": true,
+        "dateDisplayFormat": "",
+        "show": false
+      },
+      "orientation": "vertical",
+      "color": "pinkpurple",
+      "columns": {},
+      "legend": {
+        "hide": false,
+        "behavior": "isolate",
+        "singleRow": true,
+        "colorCode": "",
+        "reverseLabelOrder": false,
+        "description": "",
+        "dynamicLegend": false,
+        "dynamicLegendDefaultText": "Show All",
+        "dynamicLegendItemLimit": 5,
+        "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+        "dynamicLegendChartMessage": "Select Options from the Legend",
+        "lineMode": false,
+        "verticalSorted": false,
+        "highlightOnHover": false,
+        "seriesHighlight": []
+      },
+      "brush": {
+        "height": 25,
+        "active": false
+      },
+      "exclusions": {
+        "active": false,
+        "keys": []
+      },
+      "palette": "qualitative-bold",
+      "isPaletteReversed": false,
+      "twoColor": {
+        "palette": "monochrome-1",
+        "isPaletteReversed": false
+      },
+      "labels": false,
+      "dataFormat": {
+        "commas": false,
+        "prefix": "",
+        "suffix": "",
+        "abbreviated": false,
+        "bottomSuffix": "",
+        "bottomPrefix": "",
+        "bottomAbbreviated": false
+      },
+      "confidenceKeys": {},
+      "visual": {
+        "border": true,
+        "accent": true,
+        "background": true,
+        "verticalHoverLine": false,
+        "horizontalHoverLine": false
+      },
+      "useLogScale": false,
+      "filterBehavior": "Filter Change",
+      "highlightedBarValues": [],
+      "series": [
+        {
+          "dataKey": "Data",
+          "type": "Bar",
+          "axis": "Left",
+          "tooltip": true
+        }
+      ],
+      "tooltips": {
+        "opacity": 90,
+        "singleSeries": false,
+        "dateDisplayFormat": ""
+      },
+      "forestPlot": {
+        "startAt": 0,
+        "colors": {
+          "line": "",
+          "shape": ""
+        },
+        "lineOfNoEffect": {
+          "show": true
+        },
+        "type": "",
+        "pooledResult": {
+          "diamondHeight": 5,
+          "column": ""
+        },
+        "estimateField": "",
+        "estimateRadius": "",
+        "shape": "square",
+        "rowHeight": 20,
+        "description": {
+          "show": true,
+          "text": "description",
+          "location": 0
+        },
+        "result": {
+          "show": true,
+          "text": "result",
+          "location": 100
+        },
+        "radius": {
+          "min": 2,
+          "max": 10,
+          "scalingColumn": ""
+        },
+        "regression": {
+          "lower": 0,
+          "upper": 0,
+          "estimateField": 0
+        },
+        "leftWidthOffset": 0,
+        "rightWidthOffset": 0,
+        "showZeroLine": false,
+        "leftLabel": "",
+        "rightLabel": ""
+      },
+      "area": {
+        "isStacked": false
+      },
+      "sankey": {
+        "title": {
+          "defaultColor": "black"
+        },
+        "iterations": 1,
+        "rxValue": 0.9,
+        "overallSize": {
+          "width": 900,
+          "height": 700
+        },
+        "margin": {
+          "margin_y": 25,
+          "margin_x": 0
+        },
+        "nodeSize": {
+          "nodeWidth": 26,
+          "nodeHeight": 40
+        },
+        "nodePadding": 55,
+        "nodeFontColor": "black",
+        "nodeColor": {
+          "default": "#ff8500",
+          "inactive": "#808080"
+        },
+        "linkColor": {
+          "default": "#ffc900",
+          "inactive": "#D3D3D3"
+        },
+        "opacity": {
+          "nodeOpacityDefault": 1,
+          "nodeOpacityInactive": 0.1,
+          "LinkOpacityDefault": 1,
+          "LinkOpacityInactive": 0.1
+        },
+        "storyNodeFontColor": "#006778",
+        "storyNodeText": [],
+        "nodeValueStyle": {
+          "textBefore": "(",
+          "textAfter": ")"
+        },
+        "data": []
+      },
+      "openModal": true,
+      "uid": "chart1711646813542",
+      "visualizationType": "Bar",
+      "editing": false,
+      "dataKey": "valid-world-data.json",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "version": "4.23",
+      "dynamicMarginTop": 0
+    },
+    "table1711646820983": {
+      "newViz": false,
+      "openModal": true,
+      "uid": "table1711646820983",
+      "type": "table",
+      "formattedData": {},
+      "table": {
+        "label": "Data Table",
+        "show": true,
+        "showDownloadUrl": false,
+        "showVertical": true,
+        "expanded": true
+      },
+      "columns": {},
+      "dataFormat": {},
+      "visualizationType": "table",
+      "editing": false
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showVertical": true
+  },
+  "newViz": true,
+  "datasets": {},
+  "type": "dashboard",
+  "runtime": {},
+  "version": "4.23"
+}

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

@@ -24,7 +24,6 @@
   ],
   "visualizations": {
     "table1707935263149": {
-      "newViz": true,
       "openModal": false,
       "uid": "table1707935263149",
       "type": "table",
@@ -115,7 +114,6 @@
     "showDownloadUrl": false,
     "showVertical": true
   },
-  "newViz": true,
   "datasets": {
     "valid-data-chart.csv": {
       "data": [

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/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()
     })
   }

package/src/components/Header/FilterModal.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import { MultiDashboardConfig } from '../../types/MultiDashboard'
 import { SharedFilter } from '../../types/SharedFilter'
 import { DashboardDispatchContext } from '../../DashboardContext'
@@ -11,6 +11,8 @@ import Icon from '@cdc/core/components/ui/Icon'
 import Button from '@cdc/core/components/elements/Button'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import DataTransform from '@cdc/core/helpers/DataTransform'
+import { getVizRowColumnLocator } from '../../helpers/getVizRowColumnLocator'
+import _ from 'lodash'
 
 type ModalProps = {
   config: MultiDashboardConfig
@@ -26,9 +28,39 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
   const [columns, setColumns] = useState<string[]>([])
   const transform = new DataTransform()
 
+  const vizRowColumnLocator = getVizRowColumnLocator(config.rows)
+
+  const [usedByNameLookup, usedByOptions] = useMemo(() => {
+    const nameLookup = {}
+    const vizOptions = Object.keys(config.visualizations)
+      .filter(vizKey => {
+        const notAdded = !filter.usedBy || filter.usedBy.indexOf(vizKey) === -1
+        const usesSharedFilter = config.visualizations[vizKey].usesSharedFilter
+        const row = vizRowColumnLocator[vizKey].row
+        const dataConfiguredOnRow = config.rows[row].dataKey
+        return filter.setBy !== vizKey && notAdded && !usesSharedFilter && !dataConfiguredOnRow
+      })
+      .map(vizKey => {
+        const viz = config.visualizations[vizKey]
+        const vizName = viz.general?.title || viz.title || vizKey
+        nameLookup[vizKey] = vizName
+        return vizKey
+      })
+    const rowOptions: number[] = []
+
+    config.rows.forEach((row, rowIndex) => {
+      if (!!row.multiVizColumn) {
+        nameLookup[rowIndex] = `Row ${rowIndex + 1}`
+        rowOptions.push(rowIndex)
+      }
+    })
+
+    const rowsNotSelected = rowOptions.filter(row => !filter.usedBy || filter.usedBy.indexOf(row.toString()) === -1)
+    return [nameLookup, [...vizOptions, ...rowsNotSelected]]
+  }, [config.visualizations, filter.usedBy, filter.setBy, vizRowColumnLocator])
+
   useEffect(() => {
     const runSetColumns = async () => {
-      if (config.filterBehavior === FilterBehavior.Apply) return
       let columns = {}
       let dataKeys = Object.keys(config.datasets)
 
@@ -71,18 +103,13 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
   }
 
   const updateFilterProp = (name, value) => {
-    // @TODO this should be refactored into a reducer function.
-    // it's unsafe to directly set objects w/o guardrails
-    let newFilter = { ...filter }
-
-    newFilter[name] = value
-
-    console.log('newFilter', newFilter)
+    const newFilter = { ..._.cloneDeep(filter), [name]: value }
 
     setFilter(newFilter)
   }
 
   const addFilterUsedBy = (filter, value) => {
+    if (value === '') return
     if (!filter.usedBy) filter.usedBy = []
     filter.usedBy.push(value)
     updateFilterProp('usedBy', filter.usedBy)
@@ -97,9 +124,10 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
   }
 
   const updateAPIFilter = (key: keyof APIFilter, value: string | boolean) => {
-    const _filter = filter.apiFilter || { apiEndpoint: '', valueSelector: '', textSelector: '' }
+    const filterClone = _.cloneDeep(filter)
+    const _filter = filterClone.apiFilter || { apiEndpoint: '', valueSelector: '', textSelector: '' }
     const newAPIFilter: APIFilter = { ..._filter, [key]: value }
-    setFilter({ ...filter, apiFilter: newAPIFilter })
+    setFilter({ ...filterClone, apiFilter: newAPIFilter })
   }
 
   return (
@@ -388,13 +416,13 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
                 <span className='edit-label column-heading'>Used By: </span>
                 <ul>
                   {filter.usedBy &&
-                    filter.usedBy.map(vizKey => (
-                      <li key={`used-by-list-item-${vizKey}`}>
-                        <span>{config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}</span>{' '}
+                    filter.usedBy.map(opt => (
+                      <li key={`used-by-list-item-${opt}`}>
+                        <span>{usedByNameLookup[opt] || opt}</span>{' '}
                         <button
                           onClick={e => {
                             e.preventDefault()
-                            removeFilterUsedBy(filter, vizKey)
+                            removeFilterUsedBy(filter, opt)
                           }}
                         >
                           X
@@ -402,15 +430,13 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
                       </li>
                     ))}
                 </ul>
-                <select onChange={e => addFilterUsedBy(filter, e.target.value)}>
+                <select value='' onChange={e => addFilterUsedBy(filter, e.target.value)}>
                   <option value=''>- Select Option -</option>
-                  {Object.keys(config.visualizations)
-                    .filter(vizKey => filter.setBy !== vizKey && (!filter.usedBy || filter.usedBy.indexOf(vizKey) === -1) && !config.visualizations[vizKey].usesSharedFilter)
-                    .map(vizKey => (
-                      <option value={vizKey} key={`used-by-select-item-${vizKey}`}>
-                        {config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}
-                      </option>
-                    ))}
+                  {usedByOptions.map(opt => (
+                    <option value={opt} key={`used-by-select-item-${opt}`}>
+                      {usedByNameLookup[opt] || opt}
+                    </option>
+                  ))}
                 </select>
               </label>
               <label>