@cdc/chart 4.23.8 → 4.23.9

package/index.html

@@ -34,10 +34,10 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <div class="react-container" data-config="/examples/private/tooltip-issue.json"></div>
+  <!-- <div class="react-container" data-config="/examples/private/double.json"></div> -->
   <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/private/mpox-bar-test-aug-31.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div> -->
+  <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div>
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forest-plot/broken.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
@@ -46,7 +46,7 @@
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
-  <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div>
+  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
@@ -60,13 +60,31 @@
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
-  <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div>
+  <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
 
   <!-- SPARKLINE -->
   <!-- <div class="react-container" data-config="/examples/feature/sparkline/example-sparkline.json"></div> -->
 
+  <!-- TESTS DATA TABLE SORTING  -->
+  <!-- Bar Chart with Confidence Intervals (bottom of page)  -->
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Example_Bar_CI.json"></div> -->
+  <!-- TPOXX Patient Data -->
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/tpoxx_weekly_race_eth.json"></div> -->
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-tpoxx-age-gender.json"></div> -->
+  <!-- Non-Variola Orthopoxvirus (NVO) Laboratory Testing by Demographics -->
+  <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data.json"></div> -->
+  <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data-age.json"></div> -->
+  <!-- PROBLEM WITH THEIR PAGE CONFIG or CONFLICT with -->
+  <!-- <div class="react-container" data-config="/examples/private/outbreak-repro-bug.json"></div> -->
+  <!-- CORS ERROR pulling data on Covid Flu RSV page at https://wwwdev-cdc.msappproxy.net/respiratory-viruses/index.html-->
+ <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/respiratory-viruses/modules/emergency-dept-visits_live.json"></div> -->
+  <!-- MPOX -->
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpox-demographics-monthly.json"></div> -->
+  <!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
+
+
   <!-- TESTS DATE EXCLUSIONS -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
@@ -112,7 +130,7 @@
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div>  -->
-  <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div>
+  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.8",
+  "version": "4.23.9",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -58,7 +58,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ba0a072a40c430baf121ad5ece0165f52a414b86",
+  "gitHead": "1a737cd5d226963d5ad9c6efb8d59e4a1311141c",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }

package/src/components/BarChart.StackedVertical.jsx

@@ -27,6 +27,8 @@ const BarChartStackedVertical = props => {
               const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.xAxis.dataKey])) : data[bar.index][config.runtime.xAxis.dataKey]
               const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
 
+              if(!yAxisValue) return <></>
+
               const style = applyRadius(barStack.index)
               let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
               const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue

package/src/components/DataTable.jsx

@@ -13,7 +13,10 @@ import ConfigContext from '../ConfigContext'
 
 import MediaControls from '@cdc/core/components/MediaControls'
 
-export default function DataTable() {
+const DataTable = props => {
+  // had to pass in runtimeData as prop to get the raw prop names in the inbound data (TT)
+  const { runtimeData, isDebug } = props
+
   const { rawData, tableData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, currentViewport } = useContext(ConfigContext)
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
@@ -150,7 +153,8 @@ export default function DataTable() {
           },
           id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
           sortType: 'custom',
-          canSort: true
+          canSort: true,
+          defaultCanSort: true
         }
 
         newTableColumns.push(newCol)
@@ -231,7 +235,9 @@ export default function DataTable() {
       <path d='M0 0l5 5 5-5z' />
     </svg>
   )
-
+  const getSpecificCellData = (array, value) => {
+    return array.filter(data => JSON.stringify(data).toLowerCase().indexOf(value.toLowerCase()) !== -1)
+  }
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
     {
       columns: tableColumns,
@@ -240,27 +246,139 @@ export default function DataTable() {
       disableSortRemove: true, // otherwise 3rd click on header removes sorting entirely
       sortTypes: {
         custom: (rowA, rowB, columnId) => {
+          // NOTE:
+          // 1) Main issue causing all this code:
+          //     rowA and rowB are coming in with all values undefined
+          // - if it passed the values we could just use the columnId to get the correct sort value
+          // but since it's not there we have to go through a bunch of code to get it because
+          // we also do not know the Y axis data key (TT)
+          // 2). if formattedData did not truncate the strings we could get it from there
+          // but Hispanic or Latino is truncated to just Hispanic as the key
+          // and 'White, Non-Hispanic/Latino' gets truncated to remove the /Latino
+
           // rowA.original - is the row data field name to access the value
-          // columnId = the column indicator
+          // columnId = the column indicator typically date or date--index
+          let a, b
+          if (columnId === 'series-label') {
+            // comparing strings
+            a = rowA.original
+            b = rowB.original
+            return a.localeCompare(b)
+          }
+
           let dataKey = config.xAxis.dataKey
-          let colObj = config.data.filter(obj => {
-            return obj[dataKey] === columnId.split('--')[0] // have to remove index
+          let columnIdIndexRemoved = columnId.split('--')[0] // have to remove index for compare
+          //get all the data from that column
+          let colData = runtimeData.filter(obj => {
+            // problem is dates can be in different formats
+            if (config.xAxis.type === 'date' && !isNaN(Date.parse(obj[dataKey])) && !isNaN(Date.parse(columnIdIndexRemoved))) {
+              // must convert to datetime number to compare
+              return parseDate(obj[dataKey]).getTime() === parseDate(columnIdIndexRemoved).getTime()
+            } else {
+              return obj[dataKey] === columnIdIndexRemoved // have to remove index
+            }
           })
-          if (colObj === undefined || colObj[0] === undefined) {
+
+          if (colData === undefined || colData[0] === undefined) {
             return -1
           }
-          // NOW we can get the sort values
-          const a = transform.cleanDataPoint(colObj[0][rowA.original]) // issue was that a was UNDEFINED therefore it CANT SORT
-          const b = transform.cleanDataPoint(colObj[0][rowB.original])
 
-          if (a === undefined) {
+          let rowA_cellObj = getSpecificCellData(colData, rowA.original)
+          let rowB_cellObj = getSpecificCellData(colData, rowB.original)
+
+          // - ** REMOVE any data points NOT selected in the data series ***
+          // I dont understand why not selected data series are still sent down in the data
+          // - would be better to scrub outside of here (TT)
+          let newRowA_cellObj = []
+          let newRowB_cellObj = []
+          if (config.runtime.seriesKeys) {
+            config.runtime.seriesKeys.forEach(seriesKey => {
+              if (seriesKey in rowA_cellObj[0]) newRowA_cellObj.push(rowA_cellObj[0][seriesKey])
+              if (seriesKey in rowB_cellObj[0]) newRowB_cellObj.push(rowB_cellObj[0][seriesKey])
+            })
+            // copy back over
+            rowA_cellObj[0] = newRowA_cellObj
+            rowB_cellObj[0] = newRowB_cellObj
+          }
+
+          // REMOVE the following:
+          // - value equal to column date
+          // - value that is the .original
+          // - any data still in that's not really a number
+          let rowA_valueObj = Object.values(rowA_cellObj[0]).filter(value => value !== columnIdIndexRemoved && value !== rowA.original && !isNaN(value))
+          let rowB_valueObj = Object.values(rowB_cellObj[0]).filter(value => value !== columnIdIndexRemoved && value !== rowB.original && !isNaN(value))
+
+          // NOW we can get the sort values from the cell object
+          a = rowA_valueObj.length > 1 ? rowA_valueObj[rowA.id] : rowA_valueObj[0]
+          b = rowB_valueObj.length > 1 ? rowB_valueObj[rowB.id] : rowB_valueObj[0]
+
+          // force null and undefined to the bottom
+          a = a === null || a === undefined ? '' : transform.cleanDataPoint(a)
+          b = b === null || b === undefined ? '' : transform.cleanDataPoint(b)
+          if (a === '' || a === null) {
+            if (b === '' || b === null) {
+              return 0 // Both empty/null
+            }
+            return -1 // Sort a to an index lower than b
+          }
+          if (b === '' || b === null) {
+            if (a === '' || a === null) {
+              return 0 // Both empty/null
+            }
+            return 1 // Sort b to an index lower than a
+          }
+          // End code for forcing NULLS to bottom
+
+          // convert any strings that are actually numbers to proper data type
+          const aNum = Number(a)
+
+          if (!Number.isNaN(aNum)) {
+            a = aNum
+          }
+
+          const bNum = Number(b)
+
+          if (!Number.isNaN(bNum)) {
+            b = bNum
+          }
+          // remove iso code prefixes
+          if (typeof a === 'string') {
+            a = a.replace('us-', '')
+            a = displayGeoName(a)
+          }
+
+          if (typeof b === 'string') {
+            b = b.replace('us-', '')
+            b = displayGeoName(b)
+          }
+
+          // force any string values to lowercase
+          a = typeof a === 'string' ? a.toLowerCase() : a
+          b = typeof b === 'string' ? b.toLowerCase() : b
+
+          // When comparing a number to a string, always send string to bottom
+          if (typeof a === 'number' && typeof b === 'string') {
+            return 1
+          }
+
+          if (typeof b === 'number' && typeof a === 'string') {
             return -1
           }
-          if (!isNaN(Number(a)) && !isNaN(Number(b))) {
-            return Number(a) - Number(b)
+
+          // Return either 1 or -1 to indicate a sort priority
+          if (a > b) {
+            return 1
+          }
+          if (a < b) {
+            return -1
           }
-          return a.localeCompare(b)
+          // returning 0, undefined or any falsey value will use subsequent sorts or
+          // the index as a tiebreaker
+          return 0
         }
+      },
+      initialState: {
+        sortBy: [{ id: 'series-label', desc: false }] // default sort on 1st column -
       }
     },
     useSortBy,
@@ -372,3 +490,5 @@ export default function DataTable() {
     </ErrorBoundary>
   )
 }
+
+export default DataTable

package/src/components/EditorPanel.jsx

@@ -1826,6 +1826,7 @@ const EditorPanel = () => {
                     {config.visualizationType !== 'Forest Plot' && (
                       <Select value={config.xAxis.type} section='xAxis' fieldName='type' label='Data Type' updateField={updateField} options={config.visualizationType !== 'Scatter Plot' ? ['categorical', 'date'] : ['categorical', 'continuous', 'date']} />
                     )}
+                    <CheckBox value={config.xAxis.sortDates} section='xAxis' fieldName='sortDates' label='Force Date Scale (Sort Dates)' updateField={updateField} />{' '}
                     <Select
                       value={config.xAxis.dataKey || setCategoryAxis() || ''}
                       section='xAxis'
@@ -2678,13 +2679,20 @@ const EditorPanel = () => {
 
                   {config.visualizationType !== 'Box Plot' && <CheckBox value={config.legend.showLegendValuesTooltip ? true : false} section='legend' fieldName='showLegendValuesTooltip' label='Show Legend Values in Tooltip' updateField={updateField} />}
 
+                  {config.visualizationType === 'Line' && <CheckBox value={config.legend.lineMode} section='legend' fieldName='lineMode' label='Show Lined Style Legend' updateField={updateField} />}
+
                   {config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && config.runtime.seriesKeys.length === 1 && (
                     <Select value={config.legend.colorCode} section='legend' fieldName='colorCode' label='Color code by category' initial='Select' updateField={updateField} options={getDataValueOptions(data)} />
                   )}
                   <Select value={config.legend.behavior} section='legend' fieldName='behavior' label='Legend Behavior (When clicked)' updateField={updateField} options={['highlight', 'isolate']} />
                   <TextField value={config.legend.label} section='legend' fieldName='label' label='Title' updateField={updateField} />
                   <Select value={config.legend.position} section='legend' fieldName='position' label='Position' updateField={updateField} options={['right', 'left', 'bottom']} />
-                  {config.legend.position === 'bottom' && <CheckBox value={config.legend.singleRow} section='legend' fieldName='singleRow' label='Single Row Legend' updateField={updateField} />}
+                  {config.legend.position === 'bottom' && (
+                    <>
+                      <CheckBox value={config.legend.singleRow} section='legend' fieldName='singleRow' label='Single Row Legend' updateField={updateField} />
+                      <CheckBox value={config.legend.verticalSorted} section='legend' fieldName='verticalSorted' label='Vertical sorted Legend' updateField={updateField} />
+                    </>
+                  )}
                   <TextField type='textarea' value={config.legend.description} updateField={updateField} section='legend' fieldName='description' label='Legend Description' />
                 </AccordionItemPanel>
               </AccordionItem>
@@ -3175,7 +3183,7 @@ const EditorPanel = () => {
                   {isDashboard && <CheckBox value={config.table.showDataTableLink} section='table' fieldName='showDataTableLink' label='Show Data Table Name & Link' updateField={updateField} />}
                   {isLoadedFromUrl && <CheckBox value={config.table.showDownloadUrl} section='table' fieldName='showDownloadUrl' label='Show URL to Automatically Updated Data' updateField={updateField} />}
                   <CheckBox value={config.table.download} section='table' fieldName='download' label='Show Download CSV Link' updateField={updateField} />
-                  {/* <CheckBox value={config.table.showDownloadImgButton} section='table' fieldName='showDownloadImgButton' label='Display Image Button' updateField={updateField} /> */}
+                  <CheckBox value={config.table.showDownloadImgButton} section='table' fieldName='showDownloadImgButton' label='Display Image Button' updateField={updateField} />
                   {/* <CheckBox value={config.table.showDownloadPdfButton} section='table' fieldName='showDownloadPdfButton' label='Display PDF Button' updateField={updateField} /> */}
                 </AccordionItemPanel>
               </AccordionItem>

package/src/components/Legend.jsx

@@ -6,6 +6,7 @@ import LegendCircle from '@cdc/core/components/LegendCircle'
 
 import useLegendClasses from './../hooks/useLegendClasses'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
+import { Line } from '@visx/shape'
 
 // * FILE REVIEW *
 // TODO: fix eslint-disable jsxa11y issues
@@ -28,7 +29,8 @@ const Legend = () => {
     highlightReset,
     transformedData: data,
     colorPalettes,
-    currentViewport
+    currentViewport,
+    handleLineType
   } = useContext(ConfigContext)
 
   const { innerClasses, containerClasses } = useLegendClasses(config)
@@ -165,7 +167,6 @@ const Legend = () => {
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
   let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
-
   if (!legend) return null
 
   return (
@@ -213,7 +214,14 @@ const Legend = () => {
                         highlight(label)
                       }}
                     >
-                      <LegendCircle fill={label.value} />
+                      {config.visualizationType === 'Line' && config.legend.lineMode ? (
+                        <svg width={40} height={20}>
+                          <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={label.value} strokeWidth={2} strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')} />
+                        </svg>
+                      ) : (
+                        <LegendCircle fill={label.value} />
+                      )}
+
                       <LegendLabel align='left' margin='0 0 0 4px'>
                         {label.text}
                       </LegendLabel>

package/src/data/initial-state.js

@@ -92,6 +92,7 @@ export default {
     horizontal: 750
   },
   xAxis: {
+    sortDates: false,
     anchors: [],
     type: 'categorical',
     showTargetLabel: true,
@@ -139,7 +140,9 @@ export default {
     dynamicLegendDefaultText: 'Show All',
     dynamicLegendItemLimit: 5,
     dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
-    dynamicLegendChartMessage: 'Select Options from the Legend'
+    dynamicLegendChartMessage: 'Select Options from the Legend',
+    lineMode: false,
+    verticalSorted: false
   },
   exclusions: {
     active: false,

package/src/hooks/useLegendClasses.js

@@ -2,24 +2,27 @@ export default function useLegendClasses(config) {
   let containerClasses = ['legend-container']
   let innerClasses = ['legend-container__inner']
 
-	// Legend Positioning
-	if (config.legend.position === "left") {
-		containerClasses.push('left')
-	}
-	if (config.legend.position === "bottom") {
-		containerClasses.push('bottom')
-		innerClasses.push('bottom')
-	}
+  // Legend Positioning
+  if (config.legend.position === 'left') {
+    containerClasses.push('left')
+  }
+  if (config.legend.position === 'bottom') {
+    containerClasses.push('bottom')
+    innerClasses.push('bottom')
+  }
 
-	if(config.legend.position==='bottom' && config.legend.singleRow){
-		innerClasses.push('single-row')
-	}
+  if (config.legend.position === 'bottom' && config.legend.singleRow) {
+    innerClasses.push('single-row')
+  }
 
   // Legend > Item Ordering
   if (config.legend.reverseLabelOrder) {
     innerClasses.push('d-flex')
     innerClasses.push('flex-column-reverse')
   }
+  if (config.legend.position === 'bottom' && config.legend.verticalSorted) {
+    innerClasses.push('vertical-sorted')
+  }
 
   return {
     containerClasses,

package/src/hooks/useReduceData.js

@@ -3,13 +3,13 @@ import isNumber from '@cdc/core/helpers/isNumber'
 function useReduceData(config, data) {
   const isBar = config.series.every(({ type }) => type === 'Bar')
   const isAllLine = config.series.every(({ type }) => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(type))
-  const sumYValues = seriesKeys => xValue => seriesKeys.reduce((yTotal, k) => yTotal + Number(xValue[k]), 0)
+  const sumYValues = seriesKeys => xValue => seriesKeys.reduce((yTotal, k) => (isNaN(Number(xValue[k])) ? yTotal : yTotal + Number(xValue[k])), 0)
 
   const getMaxValueFromData = () => {
     let max = Math.max(...data.map(d => Math.max(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : 0)))))
 
     if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) && config.visualizationSubType === 'stacked') {
-      const yTotals = data.map(sumYValues(config.runtime.seriesKeys))
+      const yTotals = data.map(sumYValues(config.runtime.seriesKeys)).filter(num => !isNaN(num))
       max = Math.max(...yTotals)
     }
 

package/src/hooks/useScales.js

@@ -48,7 +48,7 @@ const useScales = properties => {
   }
 
   // handle Area chart
-  if (config.visualizationType === 'Area Chart' && config.xAxis.type === 'date') {
+  if (config.xAxis.type === 'date' && config.xAxis.sortDates) {
     xScale = scaleTime({
       domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
       range: [0, xMax]

package/src/hooks/useTooltip.jsx

@@ -170,7 +170,7 @@ export const useTooltip = props => {
   const getXValueFromCoordinate = x => {
     if (visualizationType === 'Pie') return
     if (orientation === 'horizontal') return
-    if (xScale.type === 'point' || xAxis.type === 'continuous') {
+    if (xScale.type === 'point' || xAxis.type === 'continuous' || xAxis.type === 'date') {
       // Find the closest x value by calculating the minimum distance
       let closestX = null
       let minDistance = Number.MAX_VALUE
@@ -315,7 +315,7 @@ export const useTooltip = props => {
       if (!config.dashboard) {
         switch (visualizationType) {
           case 'Combo':
-            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.barSeriesKeys, ...runtime?.lineSeriesKeys, ...stageColumns, ...ciItems]
+            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys, ...stageColumns, ...ciItems]
             break
           case 'Forecasting':
             standardLoopItems = [runtime.xAxis.dataKey, ...stageColumns, ...ciItems]