@cdc/editor 4.23.4 → 4.23.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.23.4",
+  "version": "4.23.6",
   "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.4",
-    "@cdc/core": "^4.23.4",
-    "@cdc/dashboard": "^4.23.4",
-    "@cdc/data-bite": "^4.23.4",
-    "@cdc/map": "^4.23.4",
-    "@cdc/markup-include": "^4.23.4",
-    "@cdc/waffle-chart": "^4.23.4",
+    "@cdc/chart": "^4.23.6",
+    "@cdc/core": "^4.23.6",
+    "@cdc/dashboard": "^4.23.6",
+    "@cdc/data-bite": "^4.23.6",
+    "@cdc/map": "^4.23.6",
+    "@cdc/markup-include": "^4.23.6",
+    "@cdc/waffle-chart": "^4.23.6",
     "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": "dcd395d76f70b2d113f2b4c6fe50a52522655cd1"
+  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade"
 }

package/src/components/ChooseTab.jsx

@@ -19,6 +19,8 @@ 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'
+import GaugeChartIcon from '@cdc/core/assets/icon-linear-gauge.svg'
+import InfoIcon from '@cdc/core/assets/icon-info.svg'
 
 export default function ChooseTab() {
   const { config, setConfig, setGlobalActive, tempConfig, setTempConfig } = useContext(ConfigContext)
@@ -37,18 +39,16 @@ export default function ChooseTab() {
     let isSubType = false
     let isHorizontalStackedChart = false
     let classNames
-
     if (type === 'map' && config.general) {
       let geoType = config.general.geoType
       isSubType = subType === geoType
     }
-
     if (type === 'chart') {
       isSubType = subType === config.visualizationType
       isHorizontalStackedChart = orientation === config.orientation && stacked === true
     }
 
-    if (type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') isSubType = true
+    if (type === 'dashboard' || type === 'data-bite' || type === 'markup-include') isSubType = true
 
     // TODO: sorry, we should refactor this at some point.
     // trying to get this out for 4.22.5 - this is so stacked horizontal and bar charts aren't highlighted at the same time.
@@ -137,11 +137,19 @@ export default function ChooseTab() {
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label='Waffle Chart' type='waffle-chart' icon={<WaffleChartIcon />} />
+              <IconButton label='Waffle Chart' type='chart' subType='Waffle' icon={<WaffleChartIcon />} />
             </Tooltip.Target>
             <Tooltip.Content>Highlight a piece of data in relationship to a data set.</Tooltip.Content>
           </Tooltip>
         </li>
+        {/* <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label='Gauge Chart' type='chart' subType='Gauge' icon={<GaugeChartIcon />} />
+            </Tooltip.Target>
+            <Tooltip.Content>Specify the calculation of a single data point (such as a percentage value) and present it on a horizontal scale.</Tooltip.Content>
+          </Tooltip>
+        </li> */}
       </ul>
 
       <div className='heading-2'>Charts</div>
@@ -206,13 +214,21 @@ 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={<AreaChartIcon />} />
             </Tooltip.Target>
             <Tooltip.Content>Display an area chart</Tooltip.Content>
           </Tooltip>
+        </li>
+        {/* <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label='Forecast Chart' type='chart' subType='Forecasting' orientation='vertical' icon={<InfoIcon />} />
+            </Tooltip.Target>
+            <Tooltip.Content>Display a forecasting chart</Tooltip.Content>
+          </Tooltip>
         </li> */}
       </ul>
 

package/src/components/ConfigureTab.jsx

@@ -25,11 +25,19 @@ export default function ConfigureTab({ containerEl }) {
         </ErrorBoundary>
       )
     case 'chart':
-      return (
-        <ErrorBoundary component='CdcChart'>
-          <CdcChart isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
-        </ErrorBoundary>
-      )
+      if (config.visualizationType === 'Waffle' || config.visualizationType === 'Gauge') {
+        return (
+          <ErrorBoundary component='CdcWaffleChart'>
+            <CdcWaffleChart isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
+          </ErrorBoundary>
+        )
+      } else {
+        return (
+          <ErrorBoundary component='CdcChart'>
+            <CdcChart isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
+          </ErrorBoundary>
+        )
+      }
     case 'dashboard':
       return (
         <ErrorBoundary component='CdcDashboard'>
@@ -42,12 +50,6 @@ export default function ConfigureTab({ containerEl }) {
           <CdcDataBite isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
         </ErrorBoundary>
       )
-    case 'waffle-chart':
-      return (
-        <ErrorBoundary component='CdcDashboard'>
-          <CdcWaffleChart isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
-        </ErrorBoundary>
-      )
     case 'markup-include':
       return (
         <ErrorBoundary component='CdcDashboard'>

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'
@@ -204,7 +209,6 @@ export default function DataImport() {
       // Validate parsed data and set if no issues.
       try {
         text = transform.autoStandardize(text)
-
         if (config.data && config.series) {
           if (dataExists(text, config.series, config?.xAxis.dataKey)) {
             if (config.type === 'dashboard') {
@@ -257,7 +261,6 @@ export default function DataImport() {
         } else {
           if (config.type === 'dashboard') {
             let newDatasets = { ...config.datasets }
-
             Object.keys(newDatasets).forEach(datasetKey => (newDatasets[datasetKey].preview = false))
 
             newDatasets[editingDatasetKey || fileSource] = {
@@ -294,8 +297,6 @@ export default function DataImport() {
           setEditingDataset(undefined)
         }
         setAddingDataset(false)
-        setExternalURL('')
-        setKeepURL(false)
       } catch (err) {
         setErrors(err)
       }
@@ -320,6 +321,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 +424,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 +435,8 @@ export default function DataImport() {
             <p>
               <span>or replace file</span>
             </p>
-          </div>)}
+          </div>
+        )}
       </>
     )
   }
@@ -475,7 +505,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 +521,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 +723,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 +740,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 +780,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 +793,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 +818,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

@@ -10,6 +10,7 @@ import validScatterPlot from './../samples/valid-scatterplot.csv?raw'
 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'
 
 // Add additional data to samples
 const sampleData = {
@@ -28,11 +29,16 @@ 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
+    //   text: 'Forecast Chart Data',
+    //   fileName: 'valid-forecast-data.csv',
+    //   data: validForecastData
     // }
   ],
   maps: [