@cdc/editor 4.26.1 → 4.26.3

package/src/components/DataImport/components/samples/valid-horizon-chart.json

@@ -0,0 +1,373 @@
+[
+    {
+        "Date": "01/01/2022",
+        "Data 1": "2",
+        "Data 2": "3",
+        "Data 3": "2",
+        "Data 4": "2"
+    },
+    {
+        "Date": "01/08/2022",
+        "Data 1": "3",
+        "Data 2": "4",
+        "Data 3": "3",
+        "Data 4": "2"
+    },
+    {
+        "Date": "01/15/2022",
+        "Data 1": "4",
+        "Data 2": "5",
+        "Data 3": "4",
+        "Data 4": "3"
+    },
+    {
+        "Date": "01/22/2022",
+        "Data 1": "6",
+        "Data 2": "7",
+        "Data 3": "6",
+        "Data 4": "5"
+    },
+    {
+        "Date": "01/29/2022",
+        "Data 1": "8",
+        "Data 2": "10",
+        "Data 3": "8",
+        "Data 4": "7"
+    },
+    {
+        "Date": "02/05/2022",
+        "Data 1": "15",
+        "Data 2": "18",
+        "Data 3": "14",
+        "Data 4": "12"
+    },
+    {
+        "Date": "02/12/2022",
+        "Data 1": "25",
+        "Data 2": "28",
+        "Data 3": "22",
+        "Data 4": "20"
+    },
+    {
+        "Date": "02/19/2022",
+        "Data 1": "45",
+        "Data 2": "40",
+        "Data 3": "35",
+        "Data 4": "32"
+    },
+    {
+        "Date": "02/26/2022",
+        "Data 1": "80",
+        "Data 2": "55",
+        "Data 3": "60",
+        "Data 4": "58"
+    },
+    {
+        "Date": "03/05/2022",
+        "Data 1": "150",
+        "Data 2": "70",
+        "Data 3": "85",
+        "Data 4": "95"
+    },
+    {
+        "Date": "03/12/2022",
+        "Data 1": "230",
+        "Data 2": "85",
+        "Data 3": "110",
+        "Data 4": "120"
+    },
+    {
+        "Date": "03/19/2022",
+        "Data 1": "300",
+        "Data 2": "95",
+        "Data 3": "130",
+        "Data 4": "145"
+    },
+    {
+        "Date": "03/26/2022",
+        "Data 1": "260",
+        "Data 2": "105",
+        "Data 3": "145",
+        "Data 4": "160"
+    },
+    {
+        "Date": "04/02/2022",
+        "Data 1": "230",
+        "Data 2": "120",
+        "Data 3": "165",
+        "Data 4": "175"
+    },
+    {
+        "Date": "04/09/2022",
+        "Data 1": "210",
+        "Data 2": "135",
+        "Data 3": "185",
+        "Data 4": "190"
+    },
+    {
+        "Date": "04/16/2022",
+        "Data 1": "190",
+        "Data 2": "150",
+        "Data 3": "205",
+        "Data 4": "205"
+    },
+    {
+        "Date": "04/23/2022",
+        "Data 1": "175",
+        "Data 2": "165",
+        "Data 3": "225",
+        "Data 4": "215"
+    },
+    {
+        "Date": "04/30/2022",
+        "Data 1": "160",
+        "Data 2": "180",
+        "Data 3": "245",
+        "Data 4": "225"
+    },
+    {
+        "Date": "05/07/2022",
+        "Data 1": "145",
+        "Data 2": "200",
+        "Data 3": "265",
+        "Data 4": "240"
+    },
+    {
+        "Date": "05/14/2022",
+        "Data 1": "135",
+        "Data 2": "220",
+        "Data 3": "285",
+        "Data 4": "255"
+    },
+    {
+        "Date": "05/21/2022",
+        "Data 1": "125",
+        "Data 2": "240",
+        "Data 3": "305",
+        "Data 4": "270"
+    },
+    {
+        "Date": "05/28/2022",
+        "Data 1": "115",
+        "Data 2": "260",
+        "Data 3": "325",
+        "Data 4": "285"
+    },
+    {
+        "Date": "06/04/2022",
+        "Data 1": "105",
+        "Data 2": "280",
+        "Data 3": "345",
+        "Data 4": "300"
+    },
+    {
+        "Date": "06/11/2022",
+        "Data 1": "95",
+        "Data 2": "300",
+        "Data 3": "365",
+        "Data 4": "315"
+    },
+    {
+        "Date": "06/18/2022",
+        "Data 1": "90",
+        "Data 2": "320",
+        "Data 3": "385",
+        "Data 4": "330"
+    },
+    {
+        "Date": "06/25/2022",
+        "Data 1": "85",
+        "Data 2": "340",
+        "Data 3": "405",
+        "Data 4": "340"
+    },
+    {
+        "Date": "07/02/2022",
+        "Data 1": "80",
+        "Data 2": "360",
+        "Data 3": "420",
+        "Data 4": "350"
+    },
+    {
+        "Date": "07/09/2022",
+        "Data 1": "75",
+        "Data 2": "380",
+        "Data 3": "435",
+        "Data 4": "360"
+    },
+    {
+        "Date": "07/16/2022",
+        "Data 1": "70",
+        "Data 2": "400",
+        "Data 3": "450",
+        "Data 4": "365"
+    },
+    {
+        "Date": "07/23/2022",
+        "Data 1": "65",
+        "Data 2": "420",
+        "Data 3": "460",
+        "Data 4": "370"
+    },
+    {
+        "Date": "07/30/2022",
+        "Data 1": "60",
+        "Data 2": "440",
+        "Data 3": "470",
+        "Data 4": "372"
+    },
+    {
+        "Date": "08/06/2022",
+        "Data 1": "55",
+        "Data 2": "470",
+        "Data 3": "460",
+        "Data 4": "370"
+    },
+    {
+        "Date": "08/13/2022",
+        "Data 1": "50",
+        "Data 2": "495",
+        "Data 3": "445",
+        "Data 4": "365"
+    },
+    {
+        "Date": "08/20/2022",
+        "Data 1": "48",
+        "Data 2": "480",
+        "Data 3": "430",
+        "Data 4": "355"
+    },
+    {
+        "Date": "08/27/2022",
+        "Data 1": "45",
+        "Data 2": "455",
+        "Data 3": "410",
+        "Data 4": "345"
+    },
+    {
+        "Date": "09/03/2022",
+        "Data 1": "42",
+        "Data 2": "420",
+        "Data 3": "380",
+        "Data 4": "325"
+    },
+    {
+        "Date": "09/10/2022",
+        "Data 1": "38",
+        "Data 2": "380",
+        "Data 3": "345",
+        "Data 4": "300"
+    },
+    {
+        "Date": "09/17/2022",
+        "Data 1": "34",
+        "Data 2": "330",
+        "Data 3": "300",
+        "Data 4": "270"
+    },
+    {
+        "Date": "09/24/2022",
+        "Data 1": "30",
+        "Data 2": "280",
+        "Data 3": "255",
+        "Data 4": "240"
+    },
+    {
+        "Date": "10/01/2022",
+        "Data 1": "25",
+        "Data 2": "230",
+        "Data 3": "210",
+        "Data 4": "205"
+    },
+    {
+        "Date": "10/08/2022",
+        "Data 1": "20",
+        "Data 2": "185",
+        "Data 3": "165",
+        "Data 4": "170"
+    },
+    {
+        "Date": "10/15/2022",
+        "Data 1": "15",
+        "Data 2": "140",
+        "Data 3": "120",
+        "Data 4": "130"
+    },
+    {
+        "Date": "10/22/2022",
+        "Data 1": "10",
+        "Data 2": "95",
+        "Data 3": "80",
+        "Data 4": "90"
+    },
+    {
+        "Date": "10/29/2022",
+        "Data 1": "8",
+        "Data 2": "70",
+        "Data 3": "55",
+        "Data 4": "65"
+    },
+    {
+        "Date": "11/05/2022",
+        "Data 1": "6",
+        "Data 2": "45",
+        "Data 3": "35",
+        "Data 4": "40"
+    },
+    {
+        "Date": "11/12/2022",
+        "Data 1": "5",
+        "Data 2": "30",
+        "Data 3": "22",
+        "Data 4": "28"
+    },
+    {
+        "Date": "11/19/2022",
+        "Data 1": "4",
+        "Data 2": "18",
+        "Data 3": "12",
+        "Data 4": "15"
+    },
+    {
+        "Date": "11/26/2022",
+        "Data 1": "3",
+        "Data 2": "10",
+        "Data 3": "6",
+        "Data 4": "8"
+    },
+    {
+        "Date": "12/03/2022",
+        "Data 1": "3",
+        "Data 2": "8",
+        "Data 3": "5",
+        "Data 4": "6"
+    },
+    {
+        "Date": "12/10/2022",
+        "Data 1": "2",
+        "Data 2": "6",
+        "Data 3": "4",
+        "Data 4": "4"
+    },
+    {
+        "Date": "12/17/2022",
+        "Data 1": "2",
+        "Data 2": "5",
+        "Data 3": "3",
+        "Data 4": "3"
+    },
+    {
+        "Date": "12/24/2022",
+        "Data 1": "1",
+        "Data 2": "3",
+        "Data 3": "2",
+        "Data 4": "2"
+    },
+    {
+        "Date": "12/31/2022",
+        "Data 1": "1",
+        "Data 2": "2",
+        "Data 3": "1",
+        "Data 4": "1"
+    }
+]

package/src/components/DataImport/components/samples/valid-radar-chart.csv

@@ -0,0 +1,3 @@
+Program,Reach,Engagement,Effectiveness,Adoption,Maintenance,Cost Efficiency
+Program A,85,70,90,65,75,80
+Program B,60,85,70,90,80,55

package/src/components/PreviewDataTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useMemo, useCallback, useEffect, memo } from 'react'
+import React, { useState, useContext, useMemo, useCallback, useEffect, useRef, memo } from 'react'
 import {
   useTable,
   useBlockLayout,
@@ -20,16 +20,19 @@ import { errorMessages } from '../helpers/errorMessages'
 import { DataSet } from '@cdc/core/types/DataSet'
 import Icon from '@cdc/core/components/ui/Icon'
 
-const TableFilter = memo(({ globalFilter, setGlobalFilter, disabled = false }: any) => {
-  const [filterValue, setFilterValue] = useState(globalFilter)
+const TableFilter = memo(({ globalFilter, setGlobalFilter = () => {}, disabled = false }: any) => {
+  const [filterValue, setFilterValue] = useState(globalFilter ?? '')
 
   const [debouncedValue] = useDebounce(filterValue, 200)
 
   useEffect(() => {
-    if ('string' === typeof debouncedValue && debouncedValue !== globalFilter) {
-      setGlobalFilter(debouncedValue ?? '')
+    if ('string' === typeof debouncedValue && typeof setGlobalFilter === 'function') {
+      const nextFilter = debouncedValue.trim() ? debouncedValue : undefined
+      if (nextFilter !== globalFilter) {
+        setGlobalFilter(nextFilter)
+      }
     }
-  }, [debouncedValue])
+  }, [debouncedValue, globalFilter, setGlobalFilter])
 
   const onChange = e => {
     setFilterValue(e.target.value)
@@ -86,30 +89,40 @@ const Footer = memo(({ previousPage, nextPage, canPreviousPage, canNextPage, pag
 ))
 
 const PreviewDataTable = () => {
-  const { config } = useContext(ConfigContext)
+  const { config, errors } = useContext(ConfigContext)
   const previewData = useMemo(() => {
     if (config.type === 'dashboard') {
-      return Object.values(config.datasets).find((dataset: DataSet) => {
+      const previewDataset = Object.values(config.datasets).find((dataset: DataSet) => {
         return dataset.preview && Array.isArray(dataset.data)
       })
+      return previewDataset?.data
     }
     return config.data
   }, [config.type, config.data, config.datasets])
-  const [tableData, _setTableData] = useState(previewData)
+  const [tableData, _setTableData] = useState(Array.isArray(previewData) ? previewData : null)
+  const lastDataSourceRef = useRef<any[]>(null)
   const runSideEffects = (td: any[]) => {
+    if (!Array.isArray(td) || td.length === 0) return td
+
     const isSankey = Object.keys(td[0]).includes('tableData')
-    const newData = generateColumns(isSankey ? td[0].tableData : td)
-    validateFipsCodeLength(newData)
-    return newData
+    const normalizedData = isSankey ? td[0].tableData : td
+    validateFipsCodeLength(normalizedData)
+    return normalizedData
+  }
+  const setTableData = td => {
+    if (!Array.isArray(td) || td.length === 0) return
+    if (lastDataSourceRef.current === td) return
+
+    lastDataSourceRef.current = td
+    _setTableData(runSideEffects(td))
   }
-  const setTableData = td => _setTableData(runSideEffects(td))
 
   const dispatch = useContext(EditorDispatchContext)
 
   const fetchDatasetData = async (datasetKey, datasetConfig) => {
     if (datasetConfig.preview) {
       if (datasetConfig.dataUrl) {
-        const remoteData = await fetchRemoteData(datasetConfig.dataUrl)
+        const { data: remoteData } = await fetchRemoteData(datasetConfig.dataUrl)
         if (Array.isArray(remoteData)) {
           setTableData(remoteData)
         }
@@ -132,7 +145,7 @@ const PreviewDataTable = () => {
           await handleDashboardData(config.datasets)
         } else {
           if (config.dataUrl) {
-            const remoteData = await fetchRemoteData(config.dataUrl)
+            const { data: remoteData } = await fetchRemoteData(config.dataUrl)
             if (Array.isArray(remoteData)) {
               setTableData(remoteData)
             }
@@ -144,16 +157,11 @@ const PreviewDataTable = () => {
     }
 
     loadData()
-  }, [config, config.data, previewData]) // eslint-disable-line
+  }, [config.data, config.dataUrl, config.datasets, config.type, previewData]) // eslint-disable-line
 
   const tableColumns = useMemo(() => {
-    if (!tableData) return []
-    const columns = tableData.columns ?? []
-    if (columns.length > 0 && columns.includes('')) {
-      // todo find a way to call the errors. Currently they are in DataImport.js
-      // maybe these can be moved to a file? but then we need a way to add settings like size...
-      dispatch({ type: 'EDITOR_SET_ERRORS', payload: [errorMessages.emptyCols] })
-    }
+    if (!Array.isArray(tableData)) return []
+    const columns = Object.keys(tableData[0] ?? {})
 
     return columns.map(columnName => {
       const columnConfig = {
@@ -166,27 +174,13 @@ const PreviewDataTable = () => {
     })
   }, [tableData])
 
-  // This adds a columns property just like the D3 function for JSON parsing.
-  const generateColumns = data => {
-    let columns = []
-
-    data.forEach(rowObj => {
-      Object.keys(rowObj).forEach(columnHeading => {
-        if (false === columns.includes(columnHeading)) {
-          columns.push(columnHeading)
-        }
-      })
-    })
-
-    // D3 uses a weird quirk where it attaches a named property to an array. Replicating here.
-    type D3Data = any[] & { columns }
-    const newData: D3Data = [...data] as D3Data
-
-    if (Array.isArray(newData)) {
-      newData.columns = columns
-      return newData
+  useEffect(() => {
+    if (!tableData) return
+    const columns = Object.keys(tableData[0] ?? {})
+    if (columns.length > 0 && columns.includes('') && !errors?.includes(errorMessages.emptyCols)) {
+      dispatch({ type: 'EDITOR_SET_ERRORS', payload: [errorMessages.emptyCols] })
     }
-  }
+  }, [dispatch, errors, tableData])
 
   const {
     getTableProps,
@@ -245,7 +239,8 @@ const PreviewDataTable = () => {
     )
   }
 
-  if (!tableData) return [<Header key='header' />, <PlaceholderTable key='table' />]
+  if (!Array.isArray(tableData) || tableData.length === 0)
+    return [<Header key='header' />, <PlaceholderTable key='table' />]
 
   const footerProps = {
     previousPage,

package/src/components/modal/Modal.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react'
-// import FocusLock from "react-focus-lock";
 import ReactDOM from 'react-dom'
 import CloseIcon from '../../assets/icons/close.svg'
 
@@ -21,7 +20,6 @@ export const Modal = ({ isShown, hide, modalContent, headerText }) => {
   const modal = (
     <>
       <div className='modal-backdrop' onClick={hide} />
-      {/* <FocusLock> */}
       <div className='modal-wrapper' aria-modal aria-labelledby={headerText} tabIndex={-1} role='dialog'>
         <div className='modal'>
           <div className='modal-header'>
@@ -31,7 +29,6 @@ export const Modal = ({ isShown, hide, modalContent, headerText }) => {
           <div className='modal-content'>{modalContent}</div>
         </div>
       </div>
-      {/* </FocusLock> */}
     </>
   )
 

package/src/scss/choose-vis-tab.scss

@@ -14,7 +14,7 @@
     display: grid;
     gap: 1em;
     &.category_general {
-      grid-template-columns: repeat(5, 160px);
+      grid-template-columns: repeat(6, 160px);
     }
     &.category_charts {
       grid-template-columns: repeat(7, 160px);

package/src/scss/main.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 
-.cdc-open-viz-module.cdc-editor {
+.cove-visualization.cdc-editor {
   min-height: inherit;
   display: flex;
   flex-direction: column;

package/vite.config.js

@@ -1,4 +1,5 @@
 import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 
-export default GenerateViteConfig(moduleName)
+// Editor doesn't want the default padding CSS
+export default GenerateViteConfig(moduleName, {}, {}, { css: '' })