@cdc/editor 4.23.5 → 4.23.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.23.5",
+  "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.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",
+    "@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": "34add3436994ca3cf13e51f313add4d70377f53e"
+  "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>
@@ -214,6 +222,14 @@ export default function ChooseTab() {
             <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>
 
       <div className='heading-2'>Maps</div>

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

@@ -209,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') {
@@ -262,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] = {

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 = {
@@ -34,6 +35,11 @@ const sampleData = {
       fileName: 'valid-area-chart.json',
       data: validAreaChart
     }
+    // {
+    //   text: 'Forecast Chart Data',
+    //   fileName: 'valid-forecast-data.csv',
+    //   data: validForecastData
+    // }
   ],
   maps: [
     {