@cdc/chart 4.23.10 → 4.23.11

package/src/components/ZoomBrush.tsx

@@ -0,0 +1,168 @@
+import { Brush } from '@visx/brush'
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import { useBarChart } from '../hooks/useBarChart'
+import { FC, useContext, useEffect, useRef, useState } from 'react'
+import ConfigContext from '../ConfigContext'
+import { ScaleLinear, ScaleBand } from 'd3-scale'
+
+interface Props {
+  xScaleBrush: ScaleLinear<number, number>
+  yScale: ScaleBand<string>
+  xMax: number
+  yMax: number
+}
+const ZoomBrush: FC<Props> = props => {
+  const { transformedData: data, config, parseDate, formatDate, updateConfig } = useContext(ConfigContext)
+  const { fontSize } = useBarChart()
+
+  const [filteredData, setFilteredData] = useState([...data])
+  const brushRef = useRef(null)
+  const radius = 15
+
+  const [textProps, setTextProps] = useState({
+    startPosition: 0,
+    endPosition: 0,
+    startValue: '',
+    endValue: ''
+  })
+
+  const initialPosition = {
+    start: { x: 0 },
+    end: { x: props.xMax }
+  }
+
+  const style = {
+    fill: '#ddd',
+    stroke: 'blue',
+    fillOpacity: 0.8,
+    strokeOpacity: 0,
+    rx: radius
+  }
+
+  const onBrushChange = event => {
+    if (!event) return
+
+    const { xValues } = event
+
+    const dataKey = config.xAxis?.dataKey
+
+    const filteredData = data.filter(item => xValues.includes(item[dataKey]))
+
+    const endValue = xValues
+      .slice()
+      .reverse()
+      .find(item => item !== undefined)
+    const startValue = xValues.find(item => item !== undefined)
+
+    const formatIfDate = value => (config.runtime.xAxis.type === 'date' ? formatDate(parseDate(value)) : value)
+
+    setTextProps(prev => ({
+      ...prev,
+      startPosition: brushRef.current?.state.start.x,
+      endPosition: brushRef.current?.state.end.x,
+      endValue: formatIfDate(endValue),
+      startValue: formatIfDate(startValue)
+    }))
+
+    setFilteredData(filteredData)
+  }
+
+  useEffect(() => {
+    updateConfig({
+      ...config,
+      brush: {
+        ...config.brush,
+        data: filteredData
+      }
+    })
+  }, [filteredData])
+
+  //reset filters  if brush is off
+  useEffect(() => {
+    if (!config.brush.active) {
+      setFilteredData(data)
+    }
+  }, [config.brush.active])
+
+  const calculateTop = (): number => {
+    const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
+    let top = 0
+    const offSet = 20
+    if (!config.xAxis.label) {
+      if (!config.isResponsiveTicks && tickRotation) {
+        top = Number(tickRotation + config.xAxis.tickWidthMax) / 1.6
+      }
+      if (!config.isResponsiveTicks && !tickRotation) {
+        top = Number(config.xAxis.labelOffset) - offSet
+      }
+      if (config.isResponsiveTicks && config.dynamicMarginTop) {
+        top = Number(config.xAxis.labelOffset + config.xAxis.tickWidthMax / 1.6)
+      }
+      if (config.isResponsiveTicks && !config.dynamicMarginTop) {
+        top = Number(config.xAxis.labelOffset - offSet)
+      }
+    }
+    if (config.xAxis.label) {
+      if (!config.isResponsiveTicks && tickRotation) {
+        top = Number(config.xAxis.tickWidthMax + tickRotation)
+      }
+
+      if (!config.isResponsiveTicks && !tickRotation) {
+        top = config.xAxis.labelOffset + offSet
+      }
+
+      if (config.isResponsiveTicks && !tickRotation) {
+        top = Number(config.dynamicMarginTop ? config.dynamicMarginTop : config.xAxis.labelOffset) + offSet
+      }
+    }
+
+    return top
+  }
+  if (!['Line', 'Bar', 'Area Chart', 'Combo'].includes(config.visualizationType)) {
+    return
+  }
+  return (
+    <Group display={config.brush.active ? 'block' : 'none'} top={Number(props.yMax) + calculateTop()} left={Number(config.runtime.yAxis.size)} pointerEvents='fill'>
+      <rect fill='#eee' width={props.xMax} height={config.brush.height} rx={radius} />
+      <Brush
+        renderBrushHandle={props => <BrushHandle textProps={textProps} fontSize={fontSize[config.fontSize]} {...props} isBrushing={brushRef.current?.state.isBrushing} />}
+        innerRef={brushRef}
+        useWindowMoveEvents={true}
+        selectedBoxStyle={style}
+        xScale={props.xScaleBrush}
+        yScale={props.yScale}
+        width={props.xMax}
+        resizeTriggerAreas={['left', 'right']}
+        height={config.brush.height}
+        handleSize={8}
+        brushDirection='horizontal'
+        initialBrushPosition={initialPosition}
+        onChange={onBrushChange}
+      />
+    </Group>
+  )
+}
+
+const BrushHandle = props => {
+  const { x, isBrushActive, isBrushing, className, textProps } = props
+  const pathWidth = 8
+  if (!isBrushActive) {
+    return null
+  }
+  // Flip the SVG path horizontally for the left handle
+  const isLeft = className.includes('left')
+  const transform = isLeft ? 'scale(-1, 1)' : 'translate(0,0)'
+  const textAnchor = isLeft ? 'end' : 'start'
+
+  return (
+    <Group left={x + pathWidth / 2} top={-2}>
+      <Text pointerEvents='visiblePainted' dominantBaseline='hanging' x={0} verticalAnchor='start' textAnchor={textAnchor} fontSize={props.fontSize / 1.4} dy={10} y={15}>
+        {isLeft ? textProps.startValue : textProps.endValue}
+      </Text>
+      <path cursor='ew-resize' d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12' fill={!isBrushing ? '#666' : '#297EF1'} strokeWidth='1' transform={transform}></path>
+    </Group>
+  )
+}
+
+export default ZoomBrush

package/src/data/initial-state.js

@@ -7,11 +7,11 @@ export default {
   title: '',
   showTitle: true,
   showDownloadMediaButton: false,
-  showChartBrush: false,
   theme: 'theme-blue',
   animate: false,
   fontSize: 'medium',
   lineDatapointStyle: 'hover',
+  lineDatapointColor: 'Same as Line',
   barHasBorder: 'false',
   isLollipopChart: false,
   lollipopShape: 'circle',
@@ -28,6 +28,8 @@ export default {
     left: 5,
     right: 5
   },
+  suppressedData: [],
+
   yAxis: {
     hideAxis: false,
     displayNumbersOnBar: false,
@@ -134,6 +136,7 @@ export default {
     // start with a blank list
   },
   legend: {
+    hide: false,
     behavior: 'isolate',
     singleRow: false,
     colorCode: '',
@@ -145,7 +148,13 @@ export default {
     dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
     dynamicLegendChartMessage: 'Select Options from the Legend',
     lineMode: false,
-    verticalSorted: false
+    verticalSorted: false,
+    highlightOnHover: false
+  },
+  brush: {
+    height: 25,
+    data: [],
+    active: false
   },
   exclusions: {
     active: false,
@@ -180,22 +189,27 @@ export default {
   highlightedBarValues: [],
   series: [],
   tooltips: {
-    opacity: 90
+    opacity: 90,
+    singleSeries: false
   },
   forestPlot: {
     startAt: 0,
-    width: 'auto',
     colors: {
       line: '',
       shape: ''
     },
+    lineOfNoEffect: {
+      show: true
+    },
+    type: '',
+    pooledResult: {
+      diamondHeight: 5,
+      column: ''
+    },
     estimateField: '',
     estimateRadius: '',
-    lowerCiField: '',
-    upperCiField: '',
     shape: '',
     rowHeight: 20,
-    showZeroLine: false,
     description: {
       show: true,
       text: 'description',
@@ -217,12 +231,13 @@ export default {
       estimateField: 0
     },
     leftWidthOffset: 0,
-    rightWidthOffset: 0
-  },
-  brush: {
-    pattern_id: 'brush_pattern',
-    accent_color: '#ddd'
+    rightWidthOffset: 0,
+    showZeroLine: false,
+    hideDateCategoryCol: false,
+    leftLabel: '',
+    rightLabel: ''
   },
+
   area: {
     isStacked: false
   }

package/src/hooks/useBarChart.js

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import ConfigContext from '../ConfigContext'
-
+import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 export const useBarChart = () => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate } = useContext(ConfigContext)
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight } = useContext(ConfigContext)
   const { orientation } = config
+  const [hoveredBar, setHoveredBar] = useState(null)
 
   const isHorizontal = orientation === 'horizontal'
   const barBorderWidth = 1
@@ -80,7 +81,7 @@ export const useBarChart = () => {
     if (!config.legend.colorCode && config.series.length > 1) {
       return currentBarColor
     }
-    const palettesArr = colorPalettes[config.palette]
+    const palettesArr = config.customColors ?? colorPalettes[config.palette]
     const values = tableData.map(d => {
       return d[config.legend.colorCode]
     })
@@ -144,10 +145,10 @@ export const useBarChart = () => {
   }
 
   const getHighlightedBarColorByValue = value => {
-    const match = config?.highlightedBarValues.filter(item => {
+    const match = config?.highlightedBarValues.find(item => {
       if (!item.value) return
       return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
-    })[0]
+    })
 
     if (!match?.color) return `rgba(255, 102, 1)`
     return match.color
@@ -161,8 +162,66 @@ export const useBarChart = () => {
     if (!match?.color) return false
     return match
   }
+  const generateIconSize = barWidth => {
+    if (barWidth < 4) {
+      return 1
+    }
+    if (barWidth < 5) {
+      return 4
+    }
+    if (barWidth < 10) {
+      return 6
+    }
+    if (barWidth < 15) {
+      return 7
+    }
+    if (barWidth < 20) {
+      return 8
+    }
+    if (barWidth < 90) {
+      return 8
+    }
+    return 0
+  }
+
+  const getAdditionalColumn = xAxisDataValue => {
+    if (!xAxisDataValue) return ''
+    const columns = config.columns
+    const columnsWithTooltips = []
+    let additionalTooltipItems = ''
+    const closestVal =
+      tableData.find(d => {
+        return d[config.xAxis.dataKey] === xAxisDataValue
+      }) || {}
+    for (const [colKeys, colVals] of Object.entries(columns)) {
+      const formattingParams = {
+        addColPrefix: config.columns[colKeys].prefix,
+        addColSuffix: config.columns[colKeys].suffix,
+        addColRoundTo: config.columns[colKeys].roundToPlace ? config.columns[colKeys].roundToPlace : '',
+        addColCommas: config.columns[colKeys].commas
+      }
+
+      const formattedValue = formatColNumber(closestVal[colVals?.name], 'left', true, config, formattingParams)
+      if (colVals.tooltips) {
+        columnsWithTooltips.push([colVals.label, formattedValue])
+      }
+    }
+    columnsWithTooltips.forEach(columnData => {
+      additionalTooltipItems += `${columnData[0]} : ${columnData[1]} <br/>`
+    })
+    return additionalTooltipItems
+  }
+
+  const onMouseOverBar = (categoryValue, barKey) => {
+    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) setSeriesHighlight([barKey])
+    setHoveredBar(categoryValue)
+  }
+  const onMouseLeaveBar = () => {
+    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') setSeriesHighlight([])
+  }
 
   return {
+    generateIconSize,
     isHorizontal,
     barBorderWidth,
     lollipopBarWidth,
@@ -181,6 +240,11 @@ export const useBarChart = () => {
     updateBars,
     assignColorsToValues,
     getHighlightedBarColorByValue,
-    getHighlightedBarByValue
+    getHighlightedBarByValue,
+    getAdditionalColumn,
+    hoveredBar,
+    setHoveredBar,
+    onMouseOverBar,
+    onMouseLeaveBar
   }
 }

package/src/hooks/useColorScale.ts

@@ -0,0 +1,50 @@
+import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { scaleOrdinal } from '@visx/scale'
+import { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+
+const useColorScale = () => {
+  const { config, data } = useContext(ConfigContext)
+  const { visualizationSubType, visualizationType, series, legend } = config
+
+  const generatePalette = colorsCount => {
+    if (!series?.length) return []
+    const isSpecialType = ['Paired Bar', 'Deviation Bar'].includes(visualizationType)
+    const chosenPalette = isSpecialType ? config.twoColor.palette : config.palette
+    const allPalettes = { ...colorPalettes, ...twoColorPalette }
+    let palette = config.customColors || allPalettes[chosenPalette]
+    while (colorsCount > palette.length) palette = palette.concat(palette)
+    return palette.slice(0, colorsCount)
+  }
+
+  let colorScale = scaleOrdinal({
+    domain: config?.runtime?.seriesLabelsAll,
+    range: generatePalette(series.length)
+  })
+
+  if (visualizationType === 'Deviation Bar') {
+    const { targetLabel } = config.xAxis
+    colorScale = scaleOrdinal({
+      domain: [`Below ${targetLabel}`, `Above ${targetLabel}`],
+      range: generatePalette(2)
+    })
+  }
+  if (visualizationType === 'Bar' && visualizationSubType === 'regular' && series?.length === 1 && legend?.colorCode) {
+    const set = new Set(data.map(d => d[legend.colorCode]))
+    colorScale = scaleOrdinal({
+      domain: [...set],
+      range: generatePalette([...set].length)
+    })
+  }
+  if (config.series.some(s => s.name)) {
+    const set = new Set(series.map(d => d.name || d.dataKey))
+    colorScale = colorScale = scaleOrdinal({
+      domain: [...set],
+      range: generatePalette(series.length)
+    })
+  }
+
+  return { colorScale }
+}
+
+export default useColorScale

package/src/hooks/useEditorPermissions.js

@@ -3,7 +3,7 @@ import ConfigContext from '../ConfigContext'
 
 export const useEditorPermissions = () => {
   const { config } = useContext(ConfigContext)
-  const { visualizationType, series, orientation } = config
+  const { visualizationType, series, orientation, visualizationSubType } = config
 
   // Overall support for the chart types
   // prettier-ignore
@@ -84,6 +84,15 @@ export const useEditorPermissions = () => {
     }
   }
 
+  const visHasDataSuppression = () => {
+    if ((visualizationType === 'Bar' || 'Combo') && visualizationSubType === 'regular') {
+      return true
+    }
+  }
+  const visHasBrushChart = () => {
+    return ['Line', 'Bar', 'Area Chart', 'Combo'].includes(visualizationType) && orientation === 'vertical'
+  }
+
   const visHasBarBorders = () => {
     const disabledCharts = ['Box Plot', 'Scatter Plot', 'Pie']
     if (disabledCharts.includes(visualizationType)) return false
@@ -154,13 +163,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryTickRotation = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line']
+    const disabledCharts = ['Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryNumTicks = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line']
+    const disabledCharts = ['Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -242,6 +251,12 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsReactTooltip = () => {
+    if (['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) || (visualizationType === 'Bar' && config.tooltips.singleSeries)) {
+      return true
+    }
+  }
+
   return {
     enabledChartTypes,
     headerColors,
@@ -250,7 +265,9 @@ export const useEditorPermissions = () => {
     visHasBarBorders,
     visHasDataCutoff,
     visHasLabelOnData,
+    visHasDataSuppression,
     visHasLegend,
+    visHasBrushChart,
     visHasNumbersOnBars,
     visSupportsBarSpace,
     visSupportsBarThickness,
@@ -276,6 +293,7 @@ export const useEditorPermissions = () => {
     visSupportsValueAxisGridLines,
     visSupportsValueAxisLabels,
     visSupportsValueAxisLine,
-    visSupportsValueAxisTicks
+    visSupportsValueAxisTicks,
+    visSupportsReactTooltip
   }
 }

package/src/hooks/{useMinMax.js → useMinMax.ts}

@@ -1,14 +1,36 @@
-const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAllLine }) => {
+import { ChartConfig } from '../types/ChartConfig'
+
+type UseMinMaxProps = {
+  /** config - standard chart config */
+  config: ChartConfig
+  /** minValue - starting minimum value */
+  minValue: number
+  /** maxValue - starting maximum value before transformations */
+  maxValue: number
+  /** existsPositiveValue - determines if axis should show values above/below 0 */
+  existPositiveValue: boolean
+  /** data - standard data array */
+  data: Object[]
+  /** isAllLine: if all series are line type including dashed lines */
+  isAllLine: boolean
+}
+
+const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAllLine }: UseMinMaxProps) => {
   let min = 0
   let max = 0
 
+  // Implementation for left and right axis
+  let leftMax = 0
+  let rightMax = 0
+
   if (!data) {
     return { min, max }
   }
 
+  const { visualizationType, series } = config
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
   const minRequiredCIPadding = 1.15 // regardless of Editor if CI data, there must be 10% padding added
-  
+
   // do validation bafore applying t0 charts
   const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
   const isMinValid = config.useLogScale ? enteredMinValue >= 0 : (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
@@ -16,31 +38,19 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   min = enteredMinValue && isMinValid ? enteredMinValue : minValue
   max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
 
-  let ciYMin = 0
-  if (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Deviation Bar') {
-    let ciYMax = 0
-    if (config.hasOwnProperty('confidenceKeys')) {
-      let upperCIValues = data.map(function (d) {
-        return d[config.confidenceKeys.upper]
-      })
-      ciYMax = Math.max.apply(Math, upperCIValues)
-      if (ciYMax > max) max = ciYMax * minRequiredCIPadding // bump up the max plus some padding always
+  const { lower, upper } = config?.confidenceKeys || {}
 
-      // check the min if lower confidence 
-      let lowerCIValues = data.map(function (d) {
-        // if no lower CI then we need lowerCIValues to have nothing in it
-        return d[config.confidenceKeys.lower] !== undefined ? d[config.confidenceKeys.lower] : ''
-      })
-      ciYMin = Math.min.apply(Math, lowerCIValues)
-      if (ciYMin < min) min = ciYMin * minRequiredCIPadding // adjust the min + 10% padding for negative numbers to separate from axis
-    }
+  if (lower && upper && config.visualizationType === 'Bar') {
+    const buffer = min < 0 ? 1.1 : 0
+    max = Math.max(maxValue, Math.max(...data.flatMap(d => [d[upper], d[lower]])) * 1.15)
+    min = Math.min(minValue, Math.min(...data.flatMap(d => [d[upper], d[lower]])) * 1.15) * buffer
   }
 
-  if (config.visualizationType === 'Forecasting') {
+  if (config.series.filter(s => s?.type === 'Forecasting')) {
     const {
       runtime: { forecastingSeriesKeys }
     } = config
-    if (forecastingSeriesKeys.length > 0) {
+    if (forecastingSeriesKeys?.length > 0) {
       // push all keys into an array
       let columnNames = []
 
@@ -73,10 +83,52 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     }
   }
 
+  if (visualizationType === 'Combo') {
+    try {
+      if (!data) throw new Error('COVE: missing data while getting min/max for combo chart.')
+      // seperate the left and right axis items & get each sides series keys
+      let leftAxisSeriesItems = series.filter(s => s.axis === 'Left')
+      let rightAxisSeriesItems = series.filter(s => s.axis === 'Right')
+
+      const findMaxFromSeriesKeys = (data, seriesData, max, axis = 'left') => {
+        let stackedBarMax = 0
+        let axisSeriesKeys = seriesData.map(i => i.dataKey) || []
+
+        axisSeriesKeys.forEach(key => {
+          let _seriesData = seriesData.find(s => s.dataKey === key)
+          let _data = data.map(d => d[key])
+          let seriesMax = Math.max.apply(null, _data)
+          if (config.visualizationSubType === 'stacked' && axis === 'left' && _seriesData.type === 'Bar') {
+            stackedBarMax += seriesMax
+          }
+          if (seriesMax > max) {
+            max = seriesMax
+          }
+
+          if (max < stackedBarMax) {
+            max = stackedBarMax
+          }
+        })
+        return max
+      }
+      leftMax = findMaxFromSeriesKeys(data, leftAxisSeriesItems, leftMax, 'left')
+      rightMax = findMaxFromSeriesKeys(data, rightAxisSeriesItems, rightMax, 'right')
+
+      if (leftMax < enteredMaxValue) {
+        leftMax = enteredMaxValue
+      }
+    } catch (e) {
+      console.error(e.message)
+    }
+  }
+
   // this should not apply to bar charts if there is negative CI data
-  if (((config.visualizationType === 'Bar' && ciYMin >= 0) || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
+  if ((visualizationType === 'Bar' || (visualizationType === 'Combo' && !isAllLine)) && min > 0) {
     min = 0
   }
+  if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min < 0) {
+    min = min * 1.1
+  }
 
   if (config.visualizationType === 'Combo' && isAllLine) {
     if ((enteredMinValue === undefined || enteredMinValue === null || enteredMinValue === '') && min > 0) {
@@ -136,6 +188,6 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     }
   }
 
-  return { min, max }
+  return { min, max, leftMax, rightMax }
 }
 export default useMinMax

package/src/hooks/{useRightAxis.js → useRightAxis.ts}

@@ -1,5 +1,5 @@
 import { scaleLinear } from '@visx/scale'
-import useReduceData from '../hooks/useReduceData'
+import useReduceData from './useReduceData'
 
 export default function useRightAxis({ config, yMax = 0, data = [], updateConfig }) {
   const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
@@ -15,7 +15,15 @@ export default function useRightAxis({ config, yMax = 0, data = [], updateConfig
     return rightAxisData
   }
 
-  const max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
+  let max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
+
+  if (config.yAxis.rightMax > max) {
+    max = config.yAxis.rightMax
+  }
+
+  if (config.yAxis.rightMin < minValue) {
+    minValue = config.yAxis.rightMin
+  }
 
   // if there is a bar series & the right axis doesn't include a negative number, default to zero
   const hasBarSeries = config.runtime?.barSeriesKeys?.length > 0