@cdc/editor 4.23.3 → 4.23.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.23.3",
+  "version": "4.23.5",
   "description": "React component for generating a new component entry",
   "moduleName": "CdcEditor",
   "main": "dist/cdceditor",
@@ -24,13 +24,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.23.3",
-    "@cdc/core": "^4.23.3",
-    "@cdc/dashboard": "^4.23.3",
-    "@cdc/data-bite": "^4.23.3",
-    "@cdc/map": "^4.23.3",
-    "@cdc/markup-include": "^4.23.3",
-    "@cdc/waffle-chart": "^4.23.3",
+    "@cdc/chart": "^4.23.5",
+    "@cdc/core": "^4.23.5",
+    "@cdc/dashboard": "^4.23.5",
+    "@cdc/data-bite": "^4.23.5",
+    "@cdc/map": "^4.23.5",
+    "@cdc/markup-include": "^4.23.5",
+    "@cdc/waffle-chart": "^4.23.5",
     "axios": "^0.21.1",
     "d3": "^7.0.0",
     "html-react-parser": "^3.0.8",
@@ -43,5 +43,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "6fa3b11db159d38538f18023fe70b67a29e7d327"
+  "gitHead": "34add3436994ca3cf13e51f313add4d70377f53e"
 }

package/src/CdcEditor.jsx

@@ -19,7 +19,7 @@ import Tabs from './components/Tabs'
 
 import './scss/main.scss'
 
-export default function CdcEditor({ config: configObj = { newViz: true }, hostname, containerEl, sharepath }) {
+export default function CdcEditor({ config: configObj = { newViz: true }, hostname, containerEl, sharepath, isDebug }) {
   const [config, setConfig] = useState(configObj)
   const [tempConfig, setTempConfig] = useState(null)
   const [errors, setErrors] = useState([])
@@ -146,7 +146,8 @@ export default function CdcEditor({ config: configObj = { newViz: true }, hostna
     setGlobalActive,
     tempConfig,
     setTempConfig,
-    sharepath
+    sharepath,
+    isDebug
   }
 
   let configureDisabled = true

package/src/components/ChooseTab.jsx

@@ -18,6 +18,7 @@ import PairedBarIcon from '@cdc/core/assets/icon-chart-bar-paired.svg'
 import HorizontalStackIcon from '@cdc/core/assets/icon-chart-bar-stacked.svg'
 import ScatterPlotIcon from '@cdc/core/assets/icon-chart-scatterplot.svg'
 import BoxPlotIcon from '@cdc/core/assets/icon-chart-box-whisker.svg'
+import AreaChartIcon from '@cdc/core/assets/icon-area-chart.svg'
 
 export default function ChooseTab() {
   const { config, setConfig, setGlobalActive, tempConfig, setTempConfig } = useContext(ConfigContext)
@@ -205,14 +206,14 @@ export default function ChooseTab() {
             <Tooltip.Content>Display a scatter plot</Tooltip.Content>
           </Tooltip>
         </li>
-        {/* <li>
+        <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label='Area Chart' type='chart' subType='Area Chart' orientation='vertical' icon={<GenericIcon />} />
+              <IconButton label='Area Chart' type='chart' subType='Area Chart' orientation='vertical' icon={<AreaChartIcon />} />
             </Tooltip.Target>
             <Tooltip.Content>Display an area chart</Tooltip.Content>
           </Tooltip>
-        </li> */}
+        </li>
       </ul>
 
       <div className='heading-2'>Maps</div>

package/src/components/ConfigureTab.jsx

@@ -13,7 +13,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
 
 export default function ConfigureTab({ containerEl }) {
-  const { config, setTempConfig, hostname } = useContext(ConfigContext)
+  const { config, setTempConfig, hostname, isDebug } = useContext(ConfigContext)
 
   let { type } = config
 
@@ -21,37 +21,37 @@ export default function ConfigureTab({ containerEl }) {
     case 'map':
       return (
         <ErrorBoundary component='CdcMap'>
-          <CdcMap isEditor={true} config={config} hostname={hostname} setConfig={setTempConfig} containerEl={containerEl} />
+          <CdcMap isEditor={true} isDebug={isDebug} config={config} hostname={hostname} setConfig={setTempConfig} containerEl={containerEl} />
         </ErrorBoundary>
       )
     case 'chart':
       return (
         <ErrorBoundary component='CdcChart'>
-          <CdcChart isEditor={true} config={config} setConfig={setTempConfig} />
+          <CdcChart isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
         </ErrorBoundary>
       )
     case 'dashboard':
       return (
         <ErrorBoundary component='CdcDashboard'>
-          <CdcDashboard isEditor={true} config={config} setConfig={setTempConfig} />
+          <CdcDashboard isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
         </ErrorBoundary>
       )
     case 'data-bite':
       return (
         <ErrorBoundary component='CdcDashboard'>
-          <CdcDataBite isEditor={true} config={config} setConfig={setTempConfig} />
+          <CdcDataBite isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
         </ErrorBoundary>
       )
     case 'waffle-chart':
       return (
         <ErrorBoundary component='CdcDashboard'>
-          <CdcWaffleChart isEditor={true} config={config} setConfig={setTempConfig} />
+          <CdcWaffleChart isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
         </ErrorBoundary>
       )
     case 'markup-include':
       return (
         <ErrorBoundary component='CdcDashboard'>
-          <CdcMarkupInclude isEditor={true} config={config} setConfig={setTempConfig} />
+          <CdcMarkupInclude isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
         </ErrorBoundary>
       )
     default:

package/src/components/DataImport.jsx

@@ -17,7 +17,10 @@ import SampleData from './SampleData'
 import FileUploadIcon from '../assets/icons/file-upload-solid.svg'
 import CloseIcon from '@cdc/core/assets/icon-close.svg'
 
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import DataDesigner from '@cdc/core/components/managers/DataDesigner'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
 
 import '../scss/data-import.scss'
 
@@ -36,6 +39,8 @@ export default function DataImport() {
 
   const [editingDataset, setEditingDataset] = useState()
 
+  const [asyncPreviewData, setAsyncPreviewData] = useState()
+
   const supportedDataTypes = {
     '.csv': 'text/csv',
     '.json': 'application/json'
@@ -294,8 +299,6 @@ export default function DataImport() {
           setEditingDataset(undefined)
         }
         setAddingDataset(false)
-        setExternalURL('')
-        setKeepURL(false)
       } catch (err) {
         setErrors(err)
       }
@@ -320,6 +323,34 @@ export default function DataImport() {
     setConfig(newConfig)
   }, []) // eslint-disable-line
 
+  useEffect(() => {
+    const asyncWrapper = 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)) {
+                setAsyncPreviewData(remoteData)
+              }
+            } else if (Array.isArray(config.datasets[datasetKey].data)) {
+              setAsyncPreviewData(config.datasets[datasetKey].data)
+            }
+          }
+        })
+      } else {
+        if (config.dataUrl) {
+          const remoteData = await fetchRemoteData(config.dataUrl)
+          if (Array.isArray(remoteData)) {
+            setAsyncPreviewData(remoteData)
+          }
+        }
+      }
+    }
+
+    asyncWrapper()
+  }, [config.datasets]) // eslint-disable-line
+
   const updateDescriptionProp = (visualizationKey, datasetKey, key, value) => {
     if (config.type === 'dashboard') {
       let dataDescription = { ...config.datasets[datasetKey].dataDescription, [key]: value }
@@ -395,9 +426,9 @@ export default function DataImport() {
     return (
       //todo convert to modal
       <>
-      <button className='btn danger' onClick={() => resetEditor({ type: config.type, visualizationType: config.visualizationType }, 'Resetting will remove your data and settings. Do you want to continue?')}>
-        Clear
-        <CloseIcon />
+        <button className='btn danger' onClick={() => resetEditor({ type: config.type, visualizationType: config.visualizationType }, 'Resetting will remove your data and settings. Do you want to continue?')}>
+          Clear
+          <CloseIcon />
         </button>
         {/* DEV-851 link to replace file should pop file dialog */}
         {config.dataFileSourceType === 'file' && (
@@ -406,7 +437,8 @@ export default function DataImport() {
             <p>
               <span>or replace file</span>
             </p>
-          </div>)}
+          </div>
+        )}
       </>
     )
   }
@@ -475,7 +507,7 @@ export default function DataImport() {
   if (config.type === 'dashboard') {
     readyToConfigure = Object.keys(config.datasets).length > 0
     Object.keys(config.datasets).forEach(datasetKey => {
-      if (config.datasets[datasetKey].preview) {
+      if (config.datasets[datasetKey].preview && Array.isArray(config.datasets[datasetKey].data)) {
         previewData = config.datasets[datasetKey].data
       }
     })
@@ -491,6 +523,139 @@ export default function DataImport() {
     readyToConfigure = true
   }
 
+  const urlFilters = (
+    <>
+      {config.filters &&
+        config.filters.map((filter, i) =>
+          filter.type !== 'url' ? (
+            <></>
+          ) : (
+            <fieldset key={filter.key} className='edit-block url-filters-block'>
+              <button
+                onClick={e => {
+                  let newFilters = [...config.filters]
+                  newFilters.splice(i, 1)
+                  setConfig({ ...config, filters: newFilters, runtimeDataUrl: undefined })
+                }}
+              >
+                Remove
+              </button>
+              <label>
+                <span class='edit-label column-heading'>
+                  Label
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p style={{ padding: '0.5rem' }}>The label that will appear above the dropdown filter.</p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                </span>{' '}
+                <input
+                  type='text'
+                  defaultValue={filter.label}
+                  onChange={e => {
+                    let newFilters = [...config.filters]
+                    newFilters[i].label = e.target.value
+                    setConfig({ ...config, filters: newFilters })
+                  }}
+                />
+              </label>
+              <label>
+                <span class='edit-label column-heading'>
+                  Query string parameter
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p style={{ padding: '0.5rem' }}>Name of the query string parameter that will be appended to the URL above with the values provided below.</p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                </span>{' '}
+                <input
+                  type='text'
+                  defaultValue={filter.queryParameter}
+                  onChange={e => {
+                    let newFilters = [...config.filters]
+                    newFilters[i].queryParameter = e.target.value
+                    setConfig({ ...config, filters: newFilters })
+                  }}
+                />
+              </label>
+              <label>
+                <span class='edit-label column-heading'>Values</span>{' '}
+              </label>
+              <ul className='value-list'>
+                {filter.orderedValues &&
+                  filter.orderedValues.map((value, valueIndex) => (
+                    <li>
+                      {value}
+                      <input
+                        type='text'
+                        placeholder='Enter value display name here'
+                        value={filter.labels ? filter.labels[value] : undefined}
+                        className='url-value-label'
+                        onChange={e => {
+                          let newFilters = [...config.filters]
+
+                          newFilters[i].labels = newFilters[i].labels || {}
+                          newFilters[i].labels[value] = e.target.value
+
+                          setConfig({ ...config, filters: newFilters })
+                        }}
+                      />
+                      <button
+                        onClick={() => {
+                          let newFilters = [...config.filters]
+
+                          if (newFilters[i].labels) {
+                            delete newFilters[i].labels[newFilters[i].orderedValues[valueIndex]]
+                          }
+
+                          newFilters[i].orderedValues.splice(valueIndex, 1)
+                          setConfig({ ...config, filters: newFilters })
+                        }}
+                      >
+                        X
+                      </button>
+                    </li>
+                  ))}
+              </ul>
+              <form
+                onSubmit={e => {
+                  e.preventDefault()
+                  if (!config.filters[i].orderedValues || config.filters[i].orderedValues.indexOf(e.target[0].value) === -1) {
+                    let newFilters = [...config.filters]
+                    newFilters[i].orderedValues = newFilters[i].orderedValues || []
+                    newFilters[i].orderedValues.push(e.target[0].value)
+                    newFilters[i].values = newFilters[i].orderedValues
+                    if (!newFilters[i].active) newFilters[i].active = e.target[0].value
+                    e.target[0].value = ''
+                    setConfig({ ...config, filters: newFilters })
+                  }
+                }}
+              >
+                <input type='text' placeholder='Enter new value name here' />{' '}
+                <button type='submit' style={{ marginTop: '1em' }}>
+                  Add New Value
+                </button>
+              </form>
+            </fieldset>
+          )
+        )}
+      <button
+        className='btn full-width'
+        onClick={() => {
+          setConfig({ ...config, filters: config.filters ? [...config.filters, { type: 'url', key: Date.now() }] : [{ type: 'url', key: Date.now() }] })
+        }}
+      >
+        Add New URL Filter
+      </button>
+    </>
+  )
+
   const showDataDesigner = config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Scatter Plot'
 
   return (
@@ -560,7 +725,7 @@ export default function DataImport() {
               <>
                 <div className='heading-3'>Data Source</div>
                 <div className='file-loaded-area'>
-                  {config.dataFileSourceType === 'file' && (
+                  {(config.dataFileSourceType === 'file' || !config.dataFileSourceType) && (
                     <div className='data-source-options'>
                       <div className={isDragActive2 ? 'drag-active cdcdataviz-file-selector loaded-file' : 'cdcdataviz-file-selector loaded-file'} {...getRootProps2()}>
                         <input {...getInputProps2()} />
@@ -577,10 +742,13 @@ export default function DataImport() {
                   )}
 
                   {config.dataFileSourceType === 'url' && (
-                    <div className='url-source-options'>
-                      <div>{loadFileFromUrl(externalURL)}</div>
-                      <div>{resetButton()}</div>
-                    </div>
+                    <>
+                      <div className='url-source-options'>
+                        <div>{loadFileFromUrl(externalURL)}</div>
+                        <div>{resetButton()}</div>
+                      </div>
+                      {config.dataUrl && (config.type === 'chart' || config.type === 'map') && urlFilters}
+                    </>
                   )}
                 </div>
               </>
@@ -614,10 +782,10 @@ export default function DataImport() {
             {errors &&
               (errors.map
                 ? errors.map((message, index) => (
-                  <div className='error-box slim mt-2' key={`error-${message}`}>
-                    <span>{message}</span> <CloseIcon className='inline-icon dismiss-error' onClick={() => setErrors(errors.filter((val, i) => i !== index))} />
-                  </div>
-                ))
+                    <div className='error-box slim mt-2' key={`error-${message}`}>
+                      <span>{message}</span> <CloseIcon className='inline-icon dismiss-error' onClick={() => setErrors(errors.filter((val, i) => i !== index))} />
+                    </div>
+                  ))
                 : errors.message)}
             <p className='footnote'>
               Supported file types: {Object.keys(supportedDataTypes).join(', ')}. Maximum file size {maxFileSize}MB.
@@ -627,29 +795,24 @@ export default function DataImport() {
             <SampleDataContext.Provider value={{ loadData, editingDataset, config }}>
               <SampleData.Buttons />
             </SampleDataContext.Provider>
-          </div >
-        )
-        }
+          </div>
+        )}
 
-        {
-          config.type === 'dashboard' && !addingDataset && (
-            <p>
-              <button className='btn btn-primary' onClick={() => setAddingDataset(true)}>
-                + Add More Files
-              </button>
-            </p>
-          )
-        }
+        {config.type === 'dashboard' && !addingDataset && (
+          <p>
+            <button className='btn btn-primary' onClick={() => setAddingDataset(true)}>
+              + Add More Files
+            </button>
+          </p>
+        )}
 
-        {
-          readyToConfigure && (
-            <p>
-              <button className='btn btn-primary' onClick={() => setGlobalActive(2)}>
-                Configure your visualization
-              </button>
-            </p>
-          )
-        }
+        {readyToConfigure && (
+          <p>
+            <button className='btn btn-primary' onClick={() => setGlobalActive(2)}>
+              Configure your visualization
+            </button>
+          </p>
+        )}
 
         <a href='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html' target='_blank' rel='noopener noreferrer' className='guidance-link'>
           <div>
@@ -657,9 +820,9 @@ export default function DataImport() {
             <p>Documentation and examples on formatting data and configuring visualizations.</p>
           </div>
         </a>
-      </div >
+      </div>
       <div className='right-col'>
-        <PreviewDataTable data={previewData} />
+        <PreviewDataTable data={asyncPreviewData || previewData} />
       </div>
     </>
   )

package/src/components/SampleData.jsx

@@ -28,12 +28,12 @@ const sampleData = {
       text: 'Scatter Plot Sample Data',
       fileName: 'valid-scatterplot.csv',
       data: validScatterPlot
+    },
+    {
+      text: 'Area Chart Sample Data',
+      fileName: 'valid-area-chart.json',
+      data: validAreaChart
     }
-    // {
-    //   text: 'Area Chart Sample Data',
-    //   fileName: 'valid-area-chart.json',
-    //   data: validAreaChart
-    // }
   ],
   maps: [
     {

package/src/index.jsx

@@ -9,8 +9,10 @@ let activeTab = Number.parseInt(standaloneParams.get('active')) - 1 || null
 
 let domContainer = document.getElementsByClassName('react-container')[0]
 
+let isDebug = window.location.href.includes('debug=true')
+
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcEditor startingTab={activeTab} containerEl={domContainer} />
-  </React.StrictMode>,
+    <CdcEditor startingTab={activeTab} containerEl={domContainer} isDebug={isDebug} />
+  </React.StrictMode>
 )