@cdc/chart 4.24.1 → 4.24.3

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -0,0 +1,140 @@
+import { colorPalettesChart as colorPalettes, sequentialPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { FaStar } from 'react-icons/fa'
+import { Label } from '../../../types/Label'
+import { ColorScale, TransformedData } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const createFormatLabels =
+  (config: ChartConfig, tableData: Object[], data: TransformedData[], colorScale: ColorScale) =>
+  (defaultLabels: Label[]): Label[] => {
+    const { visualizationType, visualizationSubType, series, runtime } = config
+
+    const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
+    const colorCode = config.legend?.colorCode
+    if (visualizationType === 'Deviation Bar') {
+      const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
+      const labelBelow = {
+        datum: 'X',
+        index: 0,
+        text: `Below ${config.xAxis.targetLabel}`,
+        value: belowColor
+      }
+      const labelAbove = {
+        datum: 'X',
+        index: 1,
+        text: `Above ${config.xAxis.targetLabel}`,
+        value: aboveColor
+      }
+
+      return reverseLabels([labelBelow, labelAbove])
+    }
+    if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
+      let palette = colorPalettes[config.palette]
+
+      while (tableData.length > palette.length) {
+        palette = palette.concat(palette)
+      }
+      palette = palette.slice(0, data.length)
+      //store unique values to Set by colorCode
+      const set = new Set()
+
+      tableData.forEach(d => set.add(d[colorCode]))
+
+      // create labels with unique values
+      const uniqueLabels = Array.from(set).map((val, i) => {
+        const newLabel = {
+          datum: val,
+          index: i,
+          text: val,
+          value: palette[i]
+        }
+        return newLabel
+      })
+
+      return reverseLabels(uniqueLabels)
+    }
+
+    // get forecasting items inside of combo
+    if (runtime?.forecastingSeriesKeys?.length > 0) {
+      let seriesLabels = []
+
+      //store unique values to Set by colorCode
+      // loop through each stage/group/area on the chart and create a label
+      config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
+        return outerGroup?.stages?.map((stage, index) => {
+          let colorValue = sequentialPalettes[stage.color]?.[2] ? sequentialPalettes[stage.color]?.[2] : colorPalettes[stage.color]?.[2] ? colorPalettes[stage.color]?.[2] : '#ccc'
+
+          const newLabel = {
+            datum: stage.key,
+            index: index,
+            text: stage.key,
+            value: colorValue
+          }
+
+          seriesLabels.push(newLabel)
+        })
+      })
+
+      // loop through bars for now to meet requirements.
+      config.runtime.barSeriesKeys &&
+        config.runtime.barSeriesKeys.forEach((bar, index) => {
+          let colorValue = colorPalettes[config.palette][index] ? colorPalettes[config.palette][index] : '#ccc'
+
+          const newLabel = {
+            datum: bar,
+            index: index,
+            text: bar,
+            value: colorValue
+          }
+
+          seriesLabels.push(newLabel)
+        })
+
+      return reverseLabels(seriesLabels)
+    }
+
+    // DEV-4161: replaceable series name in the legend
+    const hasNewSeriesName = config.series.filter(item => !!item.name).length > 0
+    if (hasNewSeriesName) {
+      //store unique values to Set by colorCode
+      const set = new Set()
+
+      config.series.forEach(d => {
+        set.add(d.name || d.dataKey)
+      })
+
+      // create labels with unique values
+      const uniqueLabels = Array.from(set).map((val, i) => {
+        const newLabel = {
+          datum: val,
+          index: i,
+          text: val,
+          value: colorScale(val)
+        }
+        return newLabel
+      })
+
+      return reverseLabels(uniqueLabels)
+    }
+
+    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.visualizationSubType === 'regular' && config.suppressedData) {
+      const lastIndex = defaultLabels.length - 1
+      let newLabels = []
+
+      config.suppressedData?.forEach(({ label, icon }, index) => {
+        if (label && icon) {
+          const newLabel = {
+            datum: label,
+            index: lastIndex + index,
+            text: label,
+            icon: <FaStar color='#000' size={15} />
+          }
+          newLabels.push(newLabel)
+        }
+      })
+
+      return [...defaultLabels, ...newLabels]
+    }
+
+    return reverseLabels(defaultLabels)
+  }

package/src/components/LineChart/LineChartProps.ts

@@ -22,6 +22,7 @@ export interface PreliminaryDataItem {
   column: string
   value: string
   seriesKey: string
+  label: string
 }
 
 export interface DataItem {
@@ -33,7 +34,7 @@ export interface Config {
 }
 export interface StyleProps {
   preliminaryData: PreliminaryDataItem[]
-  rawData: DataItem[]
+  data: DataItem[]
   stroke: string
   handleLineType: Function
   lineType: string

package/src/components/LineChart/components/LineChart.Circle.tsx

@@ -21,17 +21,15 @@ type LineChartCircleProps = {
   colorScale: any
   parseDate: any
   seriesAxis: string
+  dataIndex: number
+  mode: 'ISOLATED_POINTS' | 'HOVER_POINTS' | 'ALWAYS_SHOW_POINTS'
 }
 
 const LineChartCircle = (props: LineChartCircleProps) => {
-  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData } = props
+  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData, dataIndex, mode } = props
   const { lineDatapointStyle } = config
   const filtered = config?.series.filter(s => s.dataKey === seriesKey)?.[0]
   // If we're not showing the circle, simply return
-  if (lineDatapointStyle === 'hidden') return <></>
-
-  const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey)
-
   const getColor = (displayArea: boolean, colorScale: Function, config: ChartConfig, hoveredKey: string, seriesKey: string) => {
     const seriesLabels = config.runtime.seriesLabels || []
     let color
@@ -47,65 +45,100 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     }
     return color
   }
-  if (lineDatapointStyle === 'always show') {
-    const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey])
-    if (isMatch) {
-      return <></>
-    }
-    return (
-      <circle
-        cx={config.xAxis.type === 'categorical' ? xScale(d[config.xAxis.dataKey]) : xScale(parseDate(d[config.xAxis.dataKey]))}
-        cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])}
-        r={4.5}
-        opacity={d[seriesKey] ? 1 : 0}
-        fillOpacity={1}
-        fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
-        style={{ filter: 'unset', opacity: 1 }}
-      />
-    )
+  const getXPos = hoveredXValue => {
+    return (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
+  if (mode === 'ALWAYS_SHOW_POINTS') {
+    if (lineDatapointStyle === 'hidden') return <></>
+    const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey)
 
-  if (lineDatapointStyle === 'hover') {
-    if (!tooltipData) return
-    if (!seriesKey) return
-    if (!tooltipData.data) return
-    let hoveredXValue = tooltipData?.data?.[0]?.[1]
-    if (!hoveredXValue) return
-
-    let hoveredSeriesValue
-    let hoveredSeriesIndex
-    let hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
-    let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
-    let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
-    if (!hoveredSeriesKey) return
-    hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
-    hoveredSeriesValue = data?.find(d => {
-      return d[config?.xAxis.dataKey] === hoveredXValue
-    })?.[seriesKey]
-
-    //    hoveredSeriesValue = extractNumber(hoveredSeriesValue)
-    return tooltipData?.data.map((tooltipItem, index) => {
-      let seriesIndex = config.runtime.seriesLabelsAll.indexOf(hoveredXValue)
-
-      if (isNaN(hoveredSeriesValue)) return <></>
-      const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === hoveredXValue)
-
+    if (lineDatapointStyle === 'always show') {
+      const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey])
       if (isMatch) {
         return <></>
       }
       return (
         <circle
-          cx={config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))}
-          cy={hoveredSeriesAxis === 'right' ? yScaleRight(hoveredSeriesValue) : yScale(hoveredSeriesValue)}
+          cx={getXPos(d[config.xAxis.dataKey])}
+          cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])}
           r={4.5}
-          opacity={1}
+          opacity={d[seriesKey] ? 1 : 0}
           fillOpacity={1}
-          fill={getColor(displayArea, colorScale, config, hoveredSeriesKey, seriesKey)}
+          fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
           style={{ filter: 'unset', opacity: 1 }}
-          key={`line-chart-circle--${JSON.stringify(tooltipItem)}--${index}`}
         />
       )
-    })
+    }
+  }
+
+  if (mode === 'HOVER_POINTS') {
+    if (lineDatapointStyle === 'hover') {
+      if (!tooltipData) return
+      if (!seriesKey) return
+      if (!tooltipData.data) return
+      let hoveredXValue = tooltipData?.data?.[0]?.[1]
+      if (!hoveredXValue) return
+
+      let hoveredSeriesValue
+      let hoveredSeriesIndex
+      let hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
+      let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
+      let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
+      if (!hoveredSeriesKey) return
+      hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
+      hoveredSeriesValue = data?.find(d => {
+        return d[config?.xAxis.dataKey] === hoveredXValue
+      })?.[seriesKey]
+
+      //    hoveredSeriesValue = extractNumber(hoveredSeriesValue)
+      return tooltipData?.data.map((tooltipItem, index) => {
+        let seriesIndex = config.runtime.seriesLabelsAll.indexOf(hoveredXValue)
+
+        if (isNaN(hoveredSeriesValue)) return <></>
+        const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === hoveredXValue)
+
+        if (isMatch) {
+          return <></>
+        }
+        return (
+          <circle
+            cx={getXPos(hoveredXValue)}
+            cy={hoveredSeriesAxis === 'right' ? yScaleRight(hoveredSeriesValue) : yScale(hoveredSeriesValue)}
+            r={4.5}
+            opacity={1}
+            fillOpacity={1}
+            fill={getColor(displayArea, colorScale, config, hoveredSeriesKey, seriesKey)}
+            style={{ filter: 'unset', opacity: 1 }}
+            key={`line-chart-circle--${JSON.stringify(tooltipItem)}--${index}`}
+          />
+        )
+      })
+    }
+  }
+
+  if (mode === 'ISOLATED_POINTS') {
+    const drawIsolatedPoints = (currentIndex, seriesKey) => {
+      const currentPoint = data[currentIndex]
+      const previousPoint = data[currentIndex - 1]
+      const nextPoint = data[currentIndex + 1]
+      if (currentIndex === 0 && !nextPoint[seriesKey]) {
+        return true
+      }
+      if (currentIndex === data.length - 1 && !previousPoint[seriesKey]) {
+        return true
+      }
+      if (currentIndex !== 0 && currentPoint[seriesKey] && !previousPoint[seriesKey] && !nextPoint[seriesKey]) {
+        return true
+      }
+    }
+
+    if (mode) {
+      if (drawIsolatedPoints(dataIndex, seriesKey)) {
+        return (
+          <circle cx={getXPos(d[config.xAxis.dataKey])} cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])} r={5.3} strokeWidth={2} stroke={colorScale(config.runtime.seriesLabels[seriesKey])} fill={colorScale(config.runtime.seriesLabels[seriesKey])} />
+        )
+      }
+    }
   }
 
   return null

package/src/components/LineChart/helpers.ts

@@ -1,7 +1,7 @@
 import { type PreliminaryDataItem, DataItem, StyleProps, Style } from './LineChartProps'
 
 export const createStyles = (props: StyleProps): Style[] => {
-  const { preliminaryData, rawData, stroke, handleLineType, lineType, seriesKey } = props
+  const { preliminaryData, data, stroke, strokeWidth, handleLineType, lineType, seriesKey } = props
 
   const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style)
   const getMatchingPd = (point: DataItem): PreliminaryDataItem => validPreliminaryData.find(pd => pd.seriesKey === seriesKey && point[pd.column] === pd.value && pd.type === 'effect' && pd.style !== 'Open Circles')
@@ -9,11 +9,11 @@ export const createStyles = (props: StyleProps): Style[] => {
   let styles: Style[] = []
   const createStyle = (lineStyle): Style => ({
     stroke: stroke,
-    strokeWidth: 2,
+    strokeWidth: strokeWidth,
     strokeDasharray: lineStyle
   })
 
-  rawData.forEach((d, index) => {
+  data.forEach((d, index) => {
     let matchingPd: PreliminaryDataItem = getMatchingPd(d)
     let style: Style = matchingPd ? createStyle(handleLineType(matchingPd.style)) : createStyle(handleLineType(lineType))
 

package/src/components/LineChart/index.tsx

@@ -52,7 +52,7 @@ const LineChart = (props: LineChartProps) => {
 
   return (
     <ErrorBoundary component='LineChart'>
-      <Group left={config.runtime.yAxis.size ? parseInt(config.runtime.yAxis.size) : 66}>
+      <Group left={config.runtime.yAxis.size}>
         {' '}
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
@@ -62,7 +62,11 @@ const LineChart = (props: LineChartProps) => {
           let displayArea = legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
           const circleData = filterCircles(config.preliminaryData, rawData, seriesKey)
           // styles for preliminary Data  items
-          let styles = createStyles({ preliminaryData: config.preliminaryData, rawData, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), handleLineType, lineType, seriesKey })
+          let styles = createStyles({ preliminaryData: config.preliminaryData, data: tableData, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), strokeWidth: seriesData[0].weight || 2, handleLineType, lineType, seriesKey })
+
+          let xPos = d => {
+            return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+          }
 
           return (
             <Group
@@ -91,12 +95,14 @@ const LineChart = (props: LineChartProps) => {
                       <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, tableData)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
 
                       {/* Render legend */}
-                      <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))} fill={'#000'} textAnchor='middle'>
+                      <Text display={config.labels ? 'block' : 'none'} x={xPos(d)} y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))} fill={'#000'} textAnchor='middle'>
                         {formatNumber(d[seriesKey], 'left')}
                       </Text>
 
                       {(lineDatapointStyle === 'hidden' || lineDatapointStyle === 'always show') && (
                         <LineChartCircle
+                          mode='ALWAYS_SHOW_POINTS'
+                          dataIndex={dataIndex}
                           circleData={circleData}
                           data={data}
                           d={d}
@@ -113,43 +119,113 @@ const LineChart = (props: LineChartProps) => {
                           key={`line-circle--${dataIndex}`}
                         />
                       )}
+
+                      <LineChartCircle
+                        mode='ISOLATED_POINTS'
+                        dataIndex={dataIndex}
+                        circleData={circleData}
+                        data={data}
+                        d={d}
+                        config={config}
+                        seriesKey={seriesKey}
+                        displayArea={displayArea}
+                        tooltipData={tooltipData}
+                        xScale={xScale}
+                        yScale={yScale}
+                        colorScale={colorScale}
+                        parseDate={parseDate}
+                        yScaleRight={yScaleRight}
+                        seriesAxis={seriesAxis}
+                        key={`isolated-circle-${dataIndex}`}
+                      />
                     </Group>
                   )
                 )
               })}
               <>
                 {lineDatapointStyle === 'hover' && (
-                  <LineChartCircle circleData={circleData} data={data} config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} seriesAxis={seriesAxis} />
+                  <LineChartCircle
+                    dataIndex={0}
+                    mode='HOVER_POINTS'
+                    circleData={circleData}
+                    data={data}
+                    config={config}
+                    seriesKey={seriesKey}
+                    displayArea={displayArea}
+                    tooltipData={tooltipData}
+                    xScale={xScale}
+                    yScale={yScale}
+                    colorScale={colorScale}
+                    parseDate={parseDate}
+                    yScaleRight={yScaleRight}
+                    seriesAxis={seriesAxis}
+                  />
                 )}
               </>
-              {/* STANDARD LINE */}
-              <LinePath
-                curve={allCurves[seriesData[0].lineType]}
-                data={data}
-                x={d => xScale(getXAxisData(d))}
-                y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
-                stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
-                strokeWidth={2}
-                strokeOpacity={1}
-                shapeRendering='geometricPrecision'
-                strokeDasharray={lineType ? handleLineType(lineType) : 0}
-                defined={(item, i) => {
-                  return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
-                }}
-              />
+              {/* SPLIT LINE */}
+              {config?.preliminaryData?.some(d => d.value && d.column) ? (
+                <SplitLinePath
+                  curve={allCurves[seriesData[0].lineType]}
+                  segments={(config.xAxis.type === 'date-time'
+                    ? data.sort((d1, d2) => {
+                        let x1 = getXAxisData(d1)
+                        let x2 = getXAxisData(d2)
+                        if (x1 < x2) return -1
+                        if (x2 < x1) return 1
+                        return 0
+                      })
+                    : data
+                  ).map(d => [d])}
+                  segmentation='x'
+                  x={d => xPos(d)}
+                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                  styles={styles}
+                  defined={(item, i) => {
+                    return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                  }}
+                />
+              ) : (
+                <>
+                  {/* STANDARD LINE */}
+                  <LinePath
+                    curve={allCurves[seriesData[0].lineType]}
+                    data={
+                      config.xAxis.type === 'date-time'
+                        ? data.sort((d1, d2) => {
+                            let x1 = getXAxisData(d1)
+                            let x2 = getXAxisData(d2)
+                            if (x1 < x2) return -1
+                            if (x2 < x1) return 1
+                            return 0
+                          })
+                        : data
+                    }
+                    x={d => xPos(d)}
+                    y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                    stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
+                    strokeWidth={seriesData[0].weight || 2}
+                    strokeOpacity={1}
+                    shapeRendering='geometricPrecision'
+                    strokeDasharray={lineType ? handleLineType(lineType) : 0}
+                    defined={(item, i) => {
+                      return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                    }}
+                  />
+                </>
+              )}
 
               {/* circles for preliminaryData data */}
               {circleData.map((d, i) => {
-                return <circle key={i} cx={xScale(getXAxisData(d))} cy={yScale(Number(getYAxisData(d, seriesKey)))} r={6} strokeWidth={2} stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'} fill='#fff' />
+                return <circle key={i} cx={xPos(d)} cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey)))} r={6} strokeWidth={seriesData[0].weight || 2} stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'} fill='#fff' />
               })}
 
               {/* ANIMATED LINE */}
               {config.animate && (
                 <LinePath
                   className='animation'
-                  curve={seriesData.lineType}
+                  curve={allCurves[seriesData[0].lineType]}
                   data={data}
-                  x={d => xScale(getXAxisData(d))}
+                  x={d => xPos(d)}
                   y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
                   stroke='#fff'
                   strokeWidth={3}
@@ -175,7 +251,7 @@ const LineChart = (props: LineChartProps) => {
                     return <></>
                   }
                   return (
-                    <text x={xScale(getXAxisData(lastDatum)) + 5} y={yScale(getYAxisData(lastDatum, seriesKey))} alignmentBaseline='middle' fill={config.colorMatchLineSeriesLabels && colorScale ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey) : 'black'}>
+                    <text x={xPos(lastDatum) + 5} y={yScale(getYAxisData(lastDatum, seriesKey))} alignmentBaseline='middle' fill={config.colorMatchLineSeriesLabels && colorScale ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey) : 'black'}>
                       {config.runtime.seriesLabels[seriesKey] || seriesKey}
                     </text>
                   )

package/src/components/LinearChart.jsx

@@ -7,6 +7,7 @@ import { Line, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 // CDC Components
 import { AreaChart, AreaChartStacked } from './AreaChart'
@@ -36,32 +37,10 @@ import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 import ZoomBrush from './ZoomBrush'
 
 const LinearChart = props => {
-  const {
-    isEditor,
-    isDashboard,
-    computeMarginBottom,
-    transformedData: data,
-    dimensions,
-    config,
-    parseDate,
-    formatDate,
-    currentViewport,
-    formatNumber,
-    handleChartAriaLabels,
-    updateConfig,
-    handleLineType,
-    rawData,
-    capitalize,
-    setSharedFilter,
-    setSharedFilterValue,
-    getTextWidth,
-    isDebug
-  } = useContext(ConfigContext)
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType, getTextWidth } = useContext(ConfigContext)
   // todo: start destructuring this file for conciseness
   const { visualizationType, visualizationSubType, orientation, xAxis, yAxis, runtime, debugSvg } = config
 
-  const getDate = d => new Date(d[config.xAxis.dataKey])
-
   // configure width
   let [width] = dimensions
   if (config && config.legend && !config.legend.hide && config.legend.position !== 'bottom' && ['lg', 'md'].includes(currentViewport)) {
@@ -80,8 +59,8 @@ const LinearChart = props => {
     yMax = yMax + config.data.length * config.forestPlot.rowHeight
     width = dimensions[0]
   }
-  if (config.brush.active) {
-    height = height + config.brush.height
+  if (config.brush?.active) {
+    height = height + config.brush?.height
   }
 
   // hooks  % states
@@ -99,7 +78,7 @@ const LinearChart = props => {
   })
 
   // getters & functions
-  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getXAxisData = d => (isDateScale(config.runtime.xAxis) ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
   const getYAxisData = (d, seriesKey) => d[seriesKey]
   const xAxisDataMapped = config.brush.active && config.brush.data?.length ? config.brush.data.map(d => getXAxisData(d)) : data.map(d => getXAxisData(d))
   const section = config.orientation === 'horizontal' || config.visualizationType === 'Forest Plot' ? 'yAxis' : 'xAxis'
@@ -122,7 +101,7 @@ const LinearChart = props => {
 
     if (config.data && !config.data[index] && visualizationType === 'Forest Plot') return
     if (config.visualizationType === 'Forest Plot') return config.data[index][config.xAxis.dataKey]
-    if (runtime.yAxis.type === 'date') return formatDate(parseDate(tick))
+    if (isDateScale(runtime.yAxis)) return formatDate(parseDate(tick))
     if (orientation === 'vertical') return formatNumber(tick, 'left', shouldAbbreviate)
     return tick
   }
@@ -133,7 +112,7 @@ const LinearChart = props => {
       tick = 0
     }
 
-    if (runtime.xAxis.type === 'date' && config.visualizationType !== 'Forest Plot') return formatDate(tick)
+    if (isDateScale(runtime.xAxis) && config.visualizationType !== 'Forest Plot') return formatDate(tick)
     if (orientation === 'horizontal' && config.visualizationType !== 'Forest Plot') return formatNumber(tick, 'left', shouldAbbreviate)
     if (config.xAxis.type === 'continuous' && config.visualizationType !== 'Forest Plot') return formatNumber(tick, 'bottom', shouldAbbreviate)
     if (config.visualizationType === 'Forest Plot') return formatNumber(tick, 'left', config.dataFormat.abbreviated, config.runtime.xAxis.prefix, config.runtime.xAxis.suffix, Number(config.dataFormat.roundTo))
@@ -267,7 +246,7 @@ const LinearChart = props => {
           <Bar width={width} height={height} fill={'transparent'}></Bar> {/* Highlighted regions */}
           {/* Y axis */}
           {!['Spark Line', 'Forest Plot'].includes(visualizationType) && (
-            <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(runtime.yAxis.size) - config.yAxis.axisPadding} label={runtime.yAxis.label} stroke='#333' tickFormat={(tick, i) => handleLeftTickFormatting(tick, i)} numTicks={handleNumTicks()}>
+            <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(runtime.yAxis.size) - config.yAxis.axisPadding} label={runtime.yAxis.yAxis?.label || runtime.yAxis.label} stroke='#333' tickFormat={(tick, i) => handleLeftTickFormatting(tick, i)} numTicks={handleNumTicks()}>
               {props => {
                 const axisCenter = config.orientation === 'horizontal' ? (props.axisToPoint.y - props.axisFromPoint.y) / 2 : (props.axisFromPoint.y - props.axisToPoint.y) / 2
                 const horizontalTickOffset = yMax / props.ticks.length / 2 - (yMax / props.ticks.length) * (1 - config.barThickness) + 5
@@ -388,7 +367,7 @@ const LinearChart = props => {
           {/* X axis */}
           {visualizationType !== 'Paired Bar' && visualizationType !== 'Spark Line' && (
             <AxisBottom
-              top={runtime.horizontal && config.visualizationType !== 'Forest Plot' ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : config.visualizationType === 'Forest Plot' ? yMax + Number(config.xAxis.axisPadding) : yMax + Number(config.xAxis.axisPadding)}
+              top={runtime.horizontal && config.visualizationType !== 'Forest Plot' ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : config.visualizationType === 'Forest Plot' ? yMax + Number(config.xAxis.axisPadding) : yMax}
               left={config.visualizationType !== 'Forest Plot' ? Number(runtime.yAxis.size) : 0}
               label={runtime.xAxis.label}
               tickFormat={handleBottomTickFormatting}
@@ -502,7 +481,7 @@ const LinearChart = props => {
           )}
           {visualizationType === 'Paired Bar' && (
             <>
-              <AxisBottom top={yMax} left={Number(runtime.yAxis.size)} label={runtime.xAxis.label} tickFormat={runtime.xAxis.type === 'date' ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={runtime.xAxis.numTicks || undefined}>
+              <AxisBottom top={yMax} left={Number(runtime.yAxis.size)} label={runtime.xAxis.label} tickFormat={isDateScale(runtime.xAxis) ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={runtime.xAxis.numTicks || undefined}>
                 {props => {
                   return (
                     <Group className='bottom-axis'>
@@ -529,7 +508,7 @@ const LinearChart = props => {
                 top={yMax}
                 left={Number(runtime.yAxis.size)}
                 label={runtime.xAxis.label}
-                tickFormat={runtime.xAxis.type === 'date' ? formatDate : runtime.xAxis.dataKey !== 'Year' ? formatNumber : tick => tick}
+                tickFormat={isDateScale(runtime.xAxis) ? formatDate : runtime.xAxis.dataKey !== 'Year' ? formatNumber : tick => tick}
                 scale={g2xScale}
                 stroke='#333'
                 tickStroke='#333'
@@ -708,7 +687,7 @@ const LinearChart = props => {
                 newX = yAxis
               }
 
-              let anchorPosition = newX.type === 'date' ? xScale(parseDate(anchor.value, false)) : xScale(anchor.value)
+              let anchorPosition = isDateScale(newX) ? xScale(parseDate(anchor.value, false)) : xScale(anchor.value)
 
               // have to move up
               // const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)