@cdc/editor 4.24.5 → 4.24.9-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.24.5",
+  "version": "4.24.9-1",
   "description": "React component for generating a new component entry",
   "moduleName": "CdcEditor",
   "main": "dist/cdceditor",
@@ -11,8 +11,9 @@
     "preview": "vite preview",
     "graph": "nx graph",
     "prepublishOnly": "lerna run --scope @cdc/editor build",
-    "test": "vitest watch --reporter verbose",
-    "test:ui": "vitest --ui"
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -24,13 +25,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.24.5",
-    "@cdc/core": "^4.24.5",
-    "@cdc/dashboard": "^4.24.5",
-    "@cdc/data-bite": "^4.24.5",
-    "@cdc/map": "^4.24.5",
-    "@cdc/markup-include": "^4.24.5",
-    "@cdc/waffle-chart": "^4.24.5",
+    "@cdc/chart": "^4.24.9-1",
+    "@cdc/core": "^4.24.9-1",
+    "@cdc/dashboard": "^4.24.9-1",
+    "@cdc/data-bite": "^4.24.9-1",
+    "@cdc/map": "^4.24.9-1",
+    "@cdc/markup-include": "^4.24.9-1",
+    "@cdc/waffle-chart": "^4.24.9-1",
     "axios": "^1.6.0",
     "d3": "^7.0.0",
     "html-react-parser": "^3.0.8",
@@ -43,5 +44,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95"
+  "gitHead": "4a77c2fa79c8fa6074da3b6dfee3d8e32f0b2586"
 }

package/src/CdcEditor.tsx

@@ -16,7 +16,7 @@ import ChooseTab from './components/ChooseTab'
 import ConfigureTab from './components/ConfigureTab'
 import TabPane from './components/TabPane'
 import { GlobalTabs as Tabs } from './components/Tabs'
-import { formatConfigBeforeSave as stripConfig } from './helpers/formatConfigBeforeSave'
+import { formatConfigBeforeSave as stripConfig } from '@cdc/core/helpers/formatConfigBeforeSave'
 import { saveConfigToWindow as updateVizConfig } from './helpers/saveConfigToWindow'
 import { legacyConfigSupport } from './helpers/legacyConfigSupport'
 
@@ -45,15 +45,15 @@ const CdcEditor: React.FC<WCMSProps> = ({ config: configObj, hostname, container
   const [state, dispatch] = useReducer(editorReducer, initialState)
 
   const setTempConfigAndUpdate = config => {
-    updateVizConfig(JSON.parse(JSON.stringify(config)))
+    updateVizConfig(_.cloneDeep(config))
     dispatch({ type: 'EDITOR_TEMP_SAVE', payload: config })
   }
 
   const resizeObserver = new ResizeObserver(entries => {
     const container = entries[0]
-    let { width } = container.contentRect
-    let newViewport = getViewport(width)
-    dispatch({ type: 'EDITOR_SET_VIEWPORT', payload: newViewport })
+    const { width } = container.contentRect
+    const newViewport = getViewport(width)
+    if (state.currentViewport !== newViewport) dispatch({ type: 'EDITOR_SET_VIEWPORT', payload: newViewport })
   })
 
   const outerContainerRef = useCallback(node => {

package/src/_stories/Editor.stories.tsx

@@ -1,8 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react'
 import CdcEditor from '../CdcEditor'
-import StandAloneTableConfig from './_mock/standalone-table.json'
-import BlankConfig from './_mock/blank-config.json'
-import PivotFilterConfig from './_mock/pivot-filter.json'
 
 const meta: Meta<typeof CdcEditor> = {
   title: 'Components/Pages/CdcEditor',
@@ -14,6 +11,6 @@ type Story = StoryObj<typeof CdcEditor>
 
 export const DefaultEditor: Story = {
   args: {
-    config: BlankConfig
+    config: {}
   }
 }

package/src/components/ChooseTab.tsx

@@ -26,6 +26,7 @@ import ForecastIcon from '@cdc/core/assets/icon-chart-forecast.svg'
 import DeviationIcon from '@cdc/core/assets/icon-deviation-bar.svg'
 import SankeyIcon from '@cdc/core/assets/icon-sankey.svg'
 import { Visualization } from '@cdc/core/types/Visualization'
+import Icon from '@cdc/core/components/ui/Icon'
 
 export default function ChooseTab() {
   const { config, tempConfig } = useContext(ConfigContext)
@@ -68,17 +69,17 @@ export default function ChooseTab() {
       classNames = config.type === type && isSubType && !isHorizontalStackedChart ? 'active' : ''
     }
 
-    let setTypes = () => {
+    const setTypes = () => {
       if (type === config.type) {
         if (subType !== config.visualizationType) {
           dispatch({ type: 'EDITOR_SET_CONFIG', payload: { ...config, newViz: true, visualizationType: subType } })
         }
         dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
       } else {
-        let confirmation = !config.type || window.confirm('Changing visualization type will clear configuration settings. Do you want to continue?')
+        const confirmation = !config.type || window.confirm('Changing visualization type will clear configuration settings. Do you want to continue?')
 
         if (confirmation) {
-          let newConfig = {
+          const newConfig = {
             newViz: true,
             datasets: {},
             type
@@ -112,6 +113,22 @@ export default function ChooseTab() {
     )
   }
 
+  const handleUpload = e => {
+    const file = e.target.files[0]
+    const reader = new FileReader()
+    reader.onload = e => {
+      const text = e.target.result
+      try {
+        const newConfig = JSON.parse(text as string)
+        dispatch({ type: 'EDITOR_SET_CONFIG', payload: newConfig })
+        dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
+      } catch (e) {
+        alert('Invalid JSON')
+      }
+    }
+    reader.readAsText(file)
+  }
+
   return (
     <div className='choose-vis'>
       <a href='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/index.html' target='_blank' rel='noopener noreferrer' className='guidance-link' style={{ marginTop: 0, marginBottom: '2rem' }}>
@@ -309,6 +326,21 @@ export default function ChooseTab() {
           </Tooltip>
         </li>
       </ul>
+      <hr />
+      <div className='form-group'>
+        <label htmlFor='uploadConfig'>
+          Upload Custom Configuration{' '}
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='warningCircle' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Make sure you have properly validated the configuration before uploading.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        </label>
+        <input type='file' accept='.txt,.json' className='form-control-file' id='uploadConfig' onChange={handleUpload} />
+      </div>
     </div>
   )
 }

package/src/components/DataImport.tsx

@@ -132,6 +132,10 @@ export default function DataImport() {
       throw errorMessages.failedFetch
     }
 
+    if (config.type === 'dashboard') {
+      setExternalURL('')
+    }
+
     return responseBlob
   }
 
@@ -435,6 +439,7 @@ export default function DataImport() {
 
   let configureData,
     readyToConfigure = false
+
   if (config.type === 'dashboard') {
     readyToConfigure = Object.keys(config.datasets).length > 0
   } else {
@@ -442,6 +447,10 @@ export default function DataImport() {
     readyToConfigure = !!config.formattedData || (config.data && config.dataDescription && transform.autoStandardize(config.data))
   }
 
+  if (config.visualizationType === 'Sankey' && config.data) {
+    readyToConfigure = true
+  }
+
   // Box plots skip the data description steps.
   // If we have data and the visualizations is a box plot proceed...
   if ((config.visualizationType === 'Box Plot' && config.data) || config.visualizationType === 'Scatter Plot') {
@@ -581,7 +590,7 @@ export default function DataImport() {
     </>
   )
 
-  const showDataDesigner = config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Scatter Plot'
+  const showDataDesigner = !['Box Plot', 'Scatter Plot', 'Sankey'].includes(config?.visualizationType)
 
   return (
     <>

package/src/components/PreviewDataTable.tsx

@@ -71,37 +71,45 @@ const PreviewDataTable = () => {
 
   const dispatch = useContext(EditorDispatchContext)
 
-  const fetchAsyncData = async () => {
-    if (config.type === 'dashboard') {
-      Object.keys(config.datasets).forEach(async datasetKey => {
-        if (config.datasets[datasetKey].preview) {
-          if (config.datasets[datasetKey].dataUrl) {
-            const remoteData = await fetchRemoteData(config.datasets[datasetKey].dataUrl)
-            if (Array.isArray(remoteData)) {
-              setTableData(remoteData)
-            }
-          } else if (Array.isArray(config.datasets[datasetKey].data)) {
-            setTableData(config.datasets[datasetKey].data)
-          }
-        }
-      })
-    } else {
-      if (config.dataUrl) {
-        const remoteData = await fetchRemoteData(config.dataUrl)
+  const fetchDatasetData = async (datasetKey, datasetConfig) => {
+    if (datasetConfig.preview) {
+      if (datasetConfig.dataUrl) {
+        const remoteData = await fetchRemoteData(datasetConfig.dataUrl)
         if (Array.isArray(remoteData)) {
           setTableData(remoteData)
         }
+      } else if (Array.isArray(datasetConfig.data)) {
+        setTableData(datasetConfig.data)
       }
     }
   }
 
+  const handleDashboardData = async datasets => {
+    for (const datasetKey of Object.keys(datasets)) {
+      await fetchDatasetData(datasetKey, datasets[datasetKey])
+    }
+  }
+
   useEffect(() => {
-    if (!config.data) {
-      fetchAsyncData()
-    } else {
-      setTableData(previewData)
+    const loadData = async () => {
+      if (!config.data) {
+        if (config.type === 'dashboard') {
+          await handleDashboardData(config.datasets)
+        } else {
+          if (config.dataUrl) {
+            const remoteData = await fetchRemoteData(config.dataUrl)
+            if (Array.isArray(remoteData)) {
+              setTableData(remoteData)
+            }
+          }
+        }
+      } else {
+        setTableData(previewData)
+      }
     }
-  }, [config.data]) // eslint-disable-line
+
+    loadData()
+  }, [config, config.data, previewData]) // eslint-disable-line
 
   const tableColumns = useMemo(() => {
     if (!tableData) return []

package/src/components/SampleData.tsx

@@ -3,6 +3,7 @@ import SampleDataContext from '../samples/SampleDataContext'
 
 // Data Samples
 import validMapData from './../samples/valid-data-map.csv?raw'
+import validMapDataFootnotes from './../samples/valid-data-map-footnotes.csv?raw'
 import validChartData from './../samples/valid-data-chart.csv?raw'
 import validCountyMapData from './../samples/valid-county-data.csv?raw'
 import validGeoPoint from './../samples/valid-geo-point.csv?raw'
@@ -11,10 +12,10 @@ import validBoxPlotData from './../samples/valid-boxplot.csv?raw'
 import validAreaChart from './../samples/valid-area-chart.json?raw'
 import validWorldGeocodeData from './../samples/valid-world-geocode.json?raw'
 import validForecastData from './../samples/valid-forecast-data.csv?raw'
-import validForestPlotData from './../samples/valid-forest-plot-data.csv?raw'
 import vaidWorldData from './../samples/valid-world-data.json?raw'
 import validRegionData from './../samples/valid-region-data.json?raw'
 import validSankeyData from './../samples/valid-sankey-data.json?raw'
+import pivotData from './../samples/pivotData.json?raw'
 
 // Add additional data to samples
 const sampleData = {
@@ -44,15 +45,15 @@ const sampleData = {
       fileName: 'valid-forecast-data.csv',
       data: validForecastData
     },
-    // {
-    //   text: 'Forest Plot Data',
-    //   fileName: 'valid-forest-plot-data.csv',
-    //   data: validForestPlotData
-    // },
     {
       text: 'Sankey Chart Data',
       fileName: 'valid-sankey-data.json',
       data: validSankeyData
+    },
+    {
+      text: 'Pivot Table Data',
+      fileName: 'pivotData.json',
+      data: pivotData
     }
   ],
   maps: [
@@ -61,6 +62,11 @@ const sampleData = {
       fileName: 'valid-data-map.csv',
       data: validMapData
     },
+    {
+      text: 'United States: State Sample Data Footnotes',
+      fileName: 'valid-data-map-footnotes.csv',
+      data: validMapDataFootnotes
+    },
     {
       text: 'United States: County Sample Data',
       fileName: 'valid-county-data.csv',

package/src/helpers/saveConfigToWindow.ts

@@ -1,4 +1,4 @@
-import { formatConfigBeforeSave } from './formatConfigBeforeSave'
+import { formatConfigBeforeSave } from '@cdc/core/helpers/formatConfigBeforeSave'
 
 export const saveConfigToWindow = newTempConfig => {
   if (null !== newTempConfig) {

package/src/samples/pivotData.json

@@ -0,0 +1,11 @@
+[
+  { "Year": 2019, "Country": "USA", "Rate": 2.5 },
+  { "Year": 2019, "Country": "Canada", "Rate": 3.2 },
+  { "Year": 2019, "Country": "Germany", "Rate": 1.8 },
+  { "Year": 2020, "Country": "USA", "Rate": 2.7 },
+  { "Year": 2020, "Country": "Canada", "Rate": 3.5 },
+  { "Year": 2020, "Country": "Germany", "Rate": 2.1 },
+  { "Year": 2021, "Country": "USA", "Rate": 3.0 },
+  { "Year": 2021, "Country": "Canada", "Rate": 3.8 },
+  { "Year": 2021, "Country": "Germany", "Rate": 2.4 }
+]

package/src/samples/valid-data-map-footnotes.csv

@@ -0,0 +1,8 @@
+Location,symbolCol,textCol,orderCol
+School,¶,Footnote 4,4
+School,§,Footnote 3,3
+School,†,Footnote 2,2
+School,*,Footnote 1,1
+Vehicle,*,Some Vehicle Footnote,1
+Work,*,Some Work Footnote,1
+Home,*,Some Home Footnote,1

package/src/_stories/_mock/blank-config.json

@@ -1,79 +0,0 @@
-{
-  "dashboard": {
-    "theme": "theme-blue"
-  },
-  "rows": [
-    [
-      {
-        "width": 12
-      },
-      {},
-      {}
-    ]
-  ],
-  "visualizations": {},
-  "table": {
-    "label": "Data Table",
-    "show": true,
-    "showDownloadUrl": false,
-    "showVertical": true
-  },
-  "newViz": true,
-  "datasets": {
-    "https://data.cdc.gov/resource/vdgb-f9s3.json": {
-      "data": [
-        {
-          "surveyname": "American Indian Adult Tobacco Survey",
-          "surveynameabbrev": "AI ATS",
-          "year": "2007",
-          "e_cigarettes": "No",
-          "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
-          "responses": "Don't know/Not sure"
-        },
-        {
-          "surveyname": "American Indian Adult Tobacco Survey",
-          "surveynameabbrev": "AI ATS",
-          "year": "2007",
-          "e_cigarettes": "No",
-          "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
-          "responses": "Refused"
-        },
-        {
-          "surveyname": "American Indian Adult Tobacco Survey",
-          "surveynameabbrev": "AI ATS",
-          "year": "2007",
-          "e_cigarettes": "No",
-          "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
-          "responses": "No"
-        }
-      ]
-    }
-  },
-  "data": [
-    {
-      "surveyname": "American Indian Adult Tobacco Survey",
-      "surveynameabbrev": "AI ATS",
-      "year": "2007",
-      "e_cigarettes": "No",
-      "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
-      "responses": "Don't know/Not sure"
-    },
-    {
-      "surveyname": "American Indian Adult Tobacco Survey",
-      "surveynameabbrev": "AI ATS",
-      "year": "2007",
-      "e_cigarettes": "No",
-      "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
-      "responses": "Refused"
-    },
-    {
-      "surveyname": "American Indian Adult Tobacco Survey",
-      "surveynameabbrev": "AI ATS",
-      "year": "2007",
-      "e_cigarettes": "No",
-      "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
-      "responses": "No"
-    }
-  ],
-  "type": "dashboard"
-}

package/src/helpers/formatConfigBeforeSave.ts

@@ -1,36 +0,0 @@
-import _ from 'lodash'
-
-export const formatConfigBeforeSave = configToStrip => {
-  let strippedConfig = { ...configToStrip }
-
-  if (strippedConfig.type === 'dashboard') {
-    if (strippedConfig.datasets) {
-      Object.keys(strippedConfig.datasets).forEach(datasetKey => {
-        delete strippedConfig.datasets[datasetKey].formattedData
-        if (strippedConfig.datasets[datasetKey].dataUrl) {
-          delete strippedConfig.datasets[datasetKey].data
-        }
-      })
-    }
-    if (strippedConfig.visualizations) {
-      Object.keys(strippedConfig.visualizations).forEach(vizKey => {
-        strippedConfig.visualizations[vizKey] = _.omit(strippedConfig.visualizations[vizKey], ['runtime', 'formattedData', 'data'])
-      })
-    }
-    if (strippedConfig.rows) {
-      strippedConfig.rows.forEach(row => {
-        if (row.dataKey) {
-          row = _.omit(row, ['data', 'formattedData'])
-        }
-      })
-    }
-  } else {
-    delete strippedConfig.runtime
-    delete strippedConfig.formattedData
-    if (strippedConfig.dataUrl) {
-      delete strippedConfig.data
-    }
-  }
-
-  return strippedConfig
-}