@cdc/editor 4.23.2 → 4.23.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.23.2",
+  "version": "4.23.4",
   "description": "React component for generating a new component entry",
   "moduleName": "CdcEditor",
   "main": "dist/cdceditor",
@@ -10,7 +10,9 @@
     "build": "vite build",
     "preview": "vite preview",
     "graph": "nx graph",
-    "prepublishOnly": "lerna run --scope @cdc/editor build"
+    "prepublishOnly": "lerna run --scope @cdc/editor build",
+    "test": "vitest watch --reporter verbose",
+    "test:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -22,13 +24,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.23.2",
-    "@cdc/core": "^4.23.2",
-    "@cdc/dashboard": "^4.23.2",
-    "@cdc/data-bite": "^4.23.2",
-    "@cdc/map": "^4.23.2",
-    "@cdc/markup-include": "^4.23.2",
-    "@cdc/waffle-chart": "^4.23.2",
+    "@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",
     "axios": "^0.21.1",
     "d3": "^7.0.0",
     "html-react-parser": "^3.0.8",
@@ -41,5 +43,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "cd4216f47b1c41bfbc1de3b704f70c52cc7293c2"
+  "gitHead": "dcd395d76f70b2d113f2b4c6fe50a52522655cd1"
 }

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

@@ -16,7 +16,9 @@ import WaffleChartIcon from '@cdc/core/assets/icon-grid.svg'
 import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg'
 import PairedBarIcon from '@cdc/core/assets/icon-chart-bar-paired.svg'
 import HorizontalStackIcon from '@cdc/core/assets/icon-chart-bar-stacked.svg'
-import GenericIcon from '@cdc/core/assets/icon-info.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)
@@ -184,11 +186,14 @@ export default function ChooseTab() {
             <Tooltip.Content>Use bars to show comparisons between data categories.</Tooltip.Content>
           </Tooltip>
         </li>
+      </ul>
+
+      <ul className='grid cove-temp'>
         {/* temporarily hiding these */}
-        {/* <li>
+        <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label='Box Plot' type='chart' subType='Box Plot' orientation='vertical' icon={<GenericIcon />} />
+              <IconButton label='Box Plot' type='chart' subType='Box Plot' orientation='vertical' icon={<BoxPlotIcon />} />
             </Tooltip.Target>
             <Tooltip.Content>Display a box plot</Tooltip.Content>
           </Tooltip>
@@ -196,10 +201,18 @@ export default function ChooseTab() {
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label='Scatter Plot' type='chart' subType='Scatter Plot' orientation='vertical' icon={<GenericIcon />} />
+              <IconButton label='Scatter Plot' type='chart' subType='Scatter Plot' orientation='vertical' icon={<ScatterPlotIcon />} />
             </Tooltip.Target>
             <Tooltip.Content>Display a scatter plot</Tooltip.Content>
           </Tooltip>
+        </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> */}
       </ul>
 

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

@@ -394,10 +394,20 @@ export default function DataImport() {
   const resetButton = () => {
     return (
       //todo convert to modal
-      <button className='btn danger' onClick={() => resetEditor({ type: config.type, visualizationType: config.visualizationType }, 'Reseting will remove your data and settings. Do you want to continue?')}>
+      <>
+      <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>
+        </button>
+        {/* DEV-851 link to replace file should pop file dialog */}
+        {config.dataFileSourceType === 'file' && (
+          <div className='link link-replace' {...getRootProps2()}>
+            <input {...getInputProps2()} />
+            <p>
+              <span>or replace file</span>
+            </p>
+          </div>)}
+      </>
     )
   }
 

package/src/components/SampleData.jsx

@@ -8,6 +8,8 @@ import validCountyMapData from './../samples/valid-county-data.csv?raw'
 import validGeoPoint from './../samples/valid-geo-point.csv?raw'
 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'
 
 // Add additional data to samples
 const sampleData = {
@@ -17,15 +19,20 @@ const sampleData = {
       fileName: 'valid-data-chart.csv',
       data: validChartData
     },
+    {
+      text: 'Box Plot Sample Data',
+      fileName: 'valid-boxplot.csv',
+      data: validBoxPlotData
+    },
+    {
+      text: 'Scatter Plot Sample Data',
+      fileName: 'valid-scatterplot.csv',
+      data: validScatterPlot
+    }
     // {
-    //   text: 'Box Plot Sample Data',
-    //   fileName: 'valid-boxplot.csv',
-    //   data: validBoxPlotData
-    // },
-    // {
-    //   text: 'Scatter Plot Sample Data',
-    //   fileName: 'valid-scatterplot.csv',
-    //   data: validScatterPlot
+    //   text: 'Area Chart Sample Data',
+    //   fileName: 'valid-area-chart.json',
+    //   data: validAreaChart
     // }
   ],
   maps: [
@@ -43,6 +50,11 @@ const sampleData = {
       text: 'United States: Geo Point Sample Data',
       fileName: 'supported-cities.csv',
       data: validGeoPoint
+    },
+    {
+      text: 'World: Geocode Sample Data',
+      fileName: 'valid-world-geocode.json',
+      data: validWorldGeocodeData
     }
   ]
 }

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>
 )

package/src/samples/valid-area-chart.json

@@ -0,0 +1,56 @@
+[
+    {
+      "Date": "1/15/2016",
+      "Data 1": "900",
+      "Data 2": "135",
+      "Data 3": "300",
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "4000",
+      "Data 2": "90",
+      "Data 3": "240",
+      "Data 4": "60",
+      "Data 5": "160",
+      "Data 6": "2000"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "500",
+      "Data 2": "300",
+      "Data 3": "290",
+      "Data 4": "100",
+      "Data 5": "200",
+      "Data 6": "250"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "1200",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "8000",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "9000",
+      "Data 2": "220",
+      "Data 3": "320",
+      "Data 4": "100",
+      "Data 5": "220",
+      "Data 6": "300"
+    }
+  ]

package/src/samples/valid-world-geocode.json

@@ -0,0 +1,18 @@
+[
+  {
+    "Country": "Argentina",
+    "Cases": "100",
+    "Category": "Has not historically reported monkeypox",
+    "AsOf": "11 Jul 2022 5:00 PM EDT",
+    "longitude": "-63.6",
+    "latitude": "-38.4"
+  },
+  {
+    "Country": "New York City",
+    "Cases": "10",
+    "Category": "Has not historically reported monkeypox",
+    "AsOf": "11 Jul 2022 5:00 PM EDT",
+    "longitude": "-74.006",
+    "latitude": "40.712"
+  }
+]

package/src/scss/main.scss

@@ -104,6 +104,18 @@
     font-size: 12px;
   }
 
+    .link.link-replace {
+    display: block;
+    color: #005eaa;
+    background: unset;
+    padding-left: unset;
+    margin-top: 0.2rem;
+    color: #005eaa;
+    text-decoration: none;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
   .value-list {
     list-style: none;
     border: #c7c7c7 1px solid;

package/src/test/CdcEditor.test.jsx

@@ -0,0 +1,6 @@
+// Placeholder test until we add them in.
+describe('Editor', () => {
+  it('has a test.', async () => {
+    return true
+  })
+})