@cdc/chart 4.24.12 → 4.25.1

package/src/components/LinearChart.tsx

@@ -27,7 +27,7 @@ import CategoricalYAxis from './Axis/Categorical.Axis'
 
 // Helpers
 import { isConvertLineToBarGraph } from '../helpers/isConvertLineToBarGraph'
-import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
+import { isLegendWrapViewport, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { calcInitialHeight } from '../helpers/sizeHelpers'
 
@@ -36,13 +36,13 @@ import useMinMax from '../hooks/useMinMax'
 import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
 import useScales, { getTickValues, filterAndShiftLinearDateTicks } from '../hooks/useScales'
-import useTopAxis from '../hooks/useTopAxis'
+import getTopAxis from '../helpers/getTopAxis'
 import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
 import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 import Annotation from './Annotations'
 import { BlurStrokeText } from '@cdc/core/components/BlurStrokeText'
-import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
+import _ from 'lodash'
 
 type LinearChartProps = {
   parentWidth: number
@@ -50,9 +50,14 @@ type LinearChartProps = {
 }
 
 const BOTTOM_LABEL_PADDING = 9
-const X_TICK_LABEL_PADDING = 3
+const X_TICK_LABEL_PADDING = 4.5
 const DEFAULT_TICK_LENGTH = 8
 const MONTH_AS_MS = 1000 * 60 * 60 * 24 * 30
+const TICK_LABEL_FONT_SIZE = 16
+const TICK_LABEL_FONT_SIZE_SMALL = 13
+const AXIS_LABEL_FONT_SIZE = 18
+const AXIS_LABEL_FONT_SIZE_SMALL = 14
+const TICK_LABEL_MARGIN_RIGHT = 4.5
 
 const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, parentWidth }, svgRef) => {
   // prettier-ignore
@@ -99,7 +104,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   // HOOKS  % STATES
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
   const { visSupportsReactTooltip } = useEditorPermissions()
-  const { hasTopAxis } = useTopAxis(config)
+  const { hasTopAxis } = getTopAxis(config)
   const [animatedChart, setAnimatedChart] = useState(false)
   const [point, setPoint] = useState({ x: 0, y: 0 })
   const [suffixWidth, setSuffixWidth] = useState(0)
@@ -129,6 +134,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const labelsOverflow = onlyShowTopPrefixSuffix && !suffixHasNoSpace
   const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
   const yLabelOffset = isNaN(parseInt(`${runtime.yAxis.labelOffset}`)) ? 0 : parseInt(`${runtime.yAxis.labelOffset}`)
+  const tickLabelFontSize = isMobileHeightViewport(currentViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
+  const axisLabelFontSize = isMobileHeightViewport(currentViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE
+  const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
 
   // zero if not forest plot
   const forestRowsHeight = isForestPlot ? config.data.length * config.forestPlot.rowHeight : 0
@@ -410,21 +418,37 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   useEffect(() => {
     if (lastMaxValue.current === maxValue) return
     lastMaxValue.current = maxValue
+
     if (!yAxisAutoPadding) return
     setYAxisAutoPadding(0)
   }, [maxValue])
+
   useEffect(() => {
     if (orientation === 'horizontal') return
+    if (!labelsOverflow) return
+
+    // minimum percentage of the max value that the distance should be from the top grid line
+    const MINIMUM_DISTANCE_PERCENTAGE = 0.025
 
-    const maxValueIsGreaterThanTopGridLine = maxValue > Math.max(...yScale.ticks(handleNumTicks))
+    const topGridLine = Math.max(...yScale.ticks(handleNumTicks))
+    const needsPaddingThreshold = topGridLine - maxValue * MINIMUM_DISTANCE_PERCENTAGE
+    const maxValueIsGreaterThanThreshold = maxValue > needsPaddingThreshold
 
-    if (!maxValueIsGreaterThanTopGridLine || !labelsOverflow) return
+    if (!maxValueIsGreaterThanThreshold) return
 
-    const tickGap = yScale.ticks(handleNumTicks)[1] - yScale.ticks(handleNumTicks)[0]
+    const ticks = yScale.ticks(handleNumTicks)
+    const tickGap = ticks.length === 1 ? ticks[0] : ticks[1] - ticks[0]
     const nextTick = Math.max(...yScale.ticks(handleNumTicks)) + tickGap
-    const newPadding = minValue < 0 ? (nextTick - maxValue) / maxValue / 2 : (nextTick - maxValue) / maxValue
+    const divideBy = minValue < 0 ? maxValue / 2 : maxValue
+    const calculatedPadding = (nextTick - maxValue) / divideBy
 
-    setYAxisAutoPadding(newPadding * 100)
+    // if auto padding is too close to next tick, add one more ticks worth of padding
+    const newPadding =
+      calculatedPadding > MINIMUM_DISTANCE_PERCENTAGE ? calculatedPadding : calculatedPadding + tickGap / divideBy
+
+    /* sometimes even though the padding is getting to the next tick exactly,
+    d3 still doesn't show the tick. we add 0.1 to ensure to tip it over the edge */
+    setYAxisAutoPadding(newPadding * 100 + 0.1)
   }, [maxValue, labelsOverflow, yScale, handleNumTicks])
 
   // Render Functions
@@ -433,12 +457,12 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
     const getTickPositions = (ticks, xScale) => {
       if (!ticks.length) return false
-      // filterout first index
+      // filter out first index
       const filteredTicks = ticks.filter(tick => tick.index !== 0)
       const numberOfTicks = filteredTicks?.length
       const xMaxHalf = xScale.range()[0] || xMax / 2
       const tickWidthAll = filteredTicks.map(tick =>
-        getTextWidth(formatNumber(tick.value, 'left'), `normal ${fontSizes[config.fontSize]}px sans-serif`)
+        getTextWidth(formatNumber(tick.value, 'left'), GET_TEXT_WIDTH_FONT)
       )
       const accumulator = 100
       const sumOfTickWidth = tickWidthAll.reduce((a, b) => a + b, accumulator)
@@ -475,10 +499,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             return (
               <Group className='bottom-axis'>
                 {props.ticks.map((tick, i) => {
-                  const textWidth = getTextWidth(
-                    formatNumber(tick.value, 'left'),
-                    `normal ${fontSizes[config.fontSize]}px sans-serif`
-                  )
                   const isTicksOverlapping = getTickPositions(props.ticks, g1xScale)
                   const maxTickRotation = Number(config.xAxis.maxTickRotation) || 90
                   const isResponsiveTicks = config.isResponsiveTicks && isTicksOverlapping
@@ -497,6 +517,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                           angle={-angle}
                           verticalAnchor={angle ? 'middle' : 'start'}
                           textAnchor={textAnchor}
+                          fontSize={tickLabelFontSize}
                         >
                           {formatNumber(tick.value, 'left')}
                         </Text>
@@ -527,10 +548,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               <>
                 <Group className='bottom-axis'>
                   {props.ticks.map((tick, i) => {
-                    const textWidth = getTextWidth(
-                      formatNumber(tick.value, 'left'),
-                      `normal ${fontSizes[config.fontSize]}px sans-serif`
-                    )
                     const isTicksOverlapping = getTickPositions(props.ticks, g2xScale)
                     const maxTickRotation = Number(config.xAxis.maxTickRotation) || 90
                     const isResponsiveTicks = config.isResponsiveTicks && isTicksOverlapping
@@ -548,6 +565,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                             angle={-angle}
                             verticalAnchor={angle ? 'middle' : 'start'}
                             textAnchor={textAnchor}
+                            fontSize={tickLabelFontSize}
                           >
                             {formatNumber(tick.value, 'left')}
                           </Text>
@@ -565,6 +583,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                     stroke='#333'
                     textAnchor={'middle'}
                     verticalAnchor='start'
+                    fontSize={axisLabelFontSize}
                   >
                     {runtime.xAxis.label}
                   </Text>
@@ -641,6 +660,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                       transform={`translate(${-1 * runtime.yAxis.size + yLabelOffset}, ${axisCenter}) rotate(-90)`}
                       fontWeight='bold'
                       fill={config.yAxis.labelColor}
+                      fontSize={axisLabelFontSize}
                     >
                       {props.label}
                     </Text>
@@ -1034,7 +1054,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                       const lastTick = props.ticks.length - 1 === i
                       const hideTopTick = lastTick && onlyShowTopPrefixSuffix && suffix && !suffixHasNoSpace
                       const valueOnLinePadding = hideAxis ? -8 : -12
-                      const labelXPadding = labelsAboveGridlines ? valueOnLinePadding : 2
+                      const labelXPadding = labelsAboveGridlines ? valueOnLinePadding : TICK_LABEL_MARGIN_RIGHT
                       const labelYPadding = labelsAboveGridlines ? 4 : 0
                       const labelX = tick.to.x - labelXPadding
                       const labelY = tick.to.y - labelYPadding
@@ -1051,6 +1071,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                               to={isLogarithmicAxis ? to : tick.to}
                               stroke={config.yAxis.tickColor}
                               display={orientation === 'horizontal' ? 'none' : 'block'}
+                              fontSize={tickLabelFontSize}
                             />
                           )}
 
@@ -1068,6 +1089,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                 }) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation || 0 : 0})`}
                                 verticalAnchor={'start'}
                                 textAnchor={'end'}
+                                fontSize={tickLabelFontSize}
                               >
                                 {tick.formattedValue}
                               </Text>
@@ -1083,6 +1105,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                 }) rotate(-${runtime.horizontal ? runtime.yAxis.tickRotation : 0})`}
                                 verticalAnchor={'start'}
                                 textAnchor={'end'}
+                                fontSize={tickLabelFontSize}
                               >
                                 {tick.formattedValue}
                               </Text>
@@ -1097,6 +1120,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                 }) rotate(-${runtime.horizontal ? runtime.yAxis.tickRotation : 0})`}
                                 textAnchor={'end'}
                                 verticalAnchor='middle'
+                                fontSize={tickLabelFontSize}
                               >
                                 {tick.formattedValue}
                               </Text>
@@ -1112,6 +1136,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                 }) rotate(-${runtime.horizontal ? runtime.yAxis.tickRotation : 0})`}
                                 textAnchor={'end'}
                                 verticalAnchor='middle'
+                                fontSize={tickLabelFontSize}
                               >
                                 {tick.formattedValue}
                               </Text>
@@ -1130,6 +1155,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                   verticalAnchor={config.runtime.horizontal ? 'start' : 'middle'}
                                   textAnchor={config.runtime.horizontal ? 'start' : 'end'}
                                   fill={config.yAxis.tickLabelColor}
+                                  fontSize={tickLabelFontSize}
                                 >
                                   {config.runtime.seriesLabelsAll[tick.formattedValue - 1]}
                                 </Text>
@@ -1172,6 +1198,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                     paintOrder={'stroke'} // keeps stroke under fill
                                     strokeLinejoin='round'
                                     style={{ whiteSpace: 'pre-wrap' }} // prevents leading spaces from being trimmed
+                                    fontSize={tickLabelFontSize}
                                   >
                                     {suffix}
                                   </BlurStrokeText>
@@ -1193,6 +1220,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                   strokeLinejoin='round'
                                   paintOrder={'stroke'} // keeps stroke under fill
                                   style={{ whiteSpace: 'pre-wrap' }} // prevents leading spaces from being trimmed
+                                  fontSize={tickLabelFontSize}
                                 >
                                   {`${tick.formattedValue}${combineDomSuffixWithValue ? suffix : ''}`}
                                 </BlurStrokeText>
@@ -1208,6 +1236,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                       transform={`translate(${-1 * runtime.yAxis.size + yLabelOffset}, ${axisCenter}) rotate(-90)`}
                       fontWeight='bold'
                       fill={config.yAxis.labelColor}
+                      fontSize={axisLabelFontSize}
                     >
                       {props.label}
                     </Text>
@@ -1270,6 +1299,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                               verticalAnchor={runtime.horizontal ? 'start' : 'middle'}
                               textAnchor={'start'}
                               fill={config.yAxis.rightAxisTickLabelColor}
+                              fontSize={tickLabelFontSize}
                             >
                               {tick.formattedValue}
                             </Text>
@@ -1289,6 +1319,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                       }, ${axisCenter}) rotate(-90)`}
                       fontWeight='bold'
                       fill={config.yAxis.rightAxisLabelColor}
+                      fontSize={axisLabelFontSize}
                     >
                       {props.label}
                     </Text>
@@ -1328,17 +1359,18 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               numTicks={useDateSpanMonths ? dateSpanMonths : xTickCount}
               tickStroke='#333'
               tickValues={
-                config.xAxis.manual
+                config.runtime.xAxis.manual
                   ? getTickValues(xAxisDataMapped, xScale, isDateTime ? xTickCount : getManualStep(), config)
-                  : config.xAxis.type === 'date'
+                  : config.runtime.xAxis.type === 'date'
                   ? xAxisDataMapped
                   : undefined
               }
             >
               {props => {
+                const hasDynamicCategory = config.series.some(s => s.dynamicCategory)
                 // For these charts, we generated all ticks in tickValues above, and now need to filter/shift them
                 // so the last tick is always labeled
-                if (config.xAxis.type === 'date' && !config.xAxis.manual) {
+                if (config.runtime.xAxis.type === 'date' && !config.runtime.xAxis.manual && !hasDynamicCategory) {
                   props.ticks = filterAndShiftLinearDateTicks(config, props, xAxisDataMapped, formatDate)
                 }
 
@@ -1346,7 +1378,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   useDateSpanMonths &&
                   xScale
                     .ticks(xTickCount)
-                    .map(t => props.ticks.findIndex(tick => tick.value.getTime() === t.getTime()))
+                    .map(t =>
+                      props.ticks.findIndex(
+                        tick => (typeof tick.value === 'number' ? tick.value : tick.value.getTime()) === t.getTime()
+                      )
+                    )
                     .slice(0, 2)
                     .reduce((acc, curr) => curr - acc)
 
@@ -1370,16 +1406,12 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
                 // Calculate sumOfTickWidth here, before map function
                 const tickWidthMax = Math.max(
-                  ...filteredTicks.map(tick =>
-                    getTextWidth(tick.formattedValue, `normal ${fontSizes[config.fontSize]}px sans-serif`)
-                  )
+                  ...filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
                 )
                 // const marginTop = 20 // moved to top bc need for yMax calcs
                 const accumulator = ismultiLabel ? 180 : 100
 
-                const textWidths = filteredTicks.map(tick =>
-                  getTextWidth(tick.formattedValue, `normal ${fontSizes[config.fontSize]}px sans-serif`)
-                )
+                const textWidths = filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
                 const sumOfTickWidth = textWidths.reduce((a, b) => a + b, accumulator)
                 const spaceBetweenEachTick = (xMax - sumOfTickWidth) / (filteredTicks.length - 1)
 
@@ -1471,6 +1503,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                   : undefined
                               }
                               fill={config.xAxis.tickLabelColor}
+                              fontSize={tickLabelFontSize}
                             >
                               {tick.formattedValue}
                             </Text>
@@ -1488,6 +1521,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                       verticalAnchor='start'
                       fontWeight='bold'
                       fill={config.xAxis.labelColor}
+                      fontSize={axisLabelFontSize}
                     >
                       {props.label}
                     </Text>

package/src/components/PairedBarChart.jsx

@@ -15,7 +15,6 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 
   const borderWidth = config.barHasBorder === 'true' ? 1 : 0
   const halfWidth = width / 2
-  const fontSize = { small: 16, medium: 18, large: 20 }
   const offset = 1.02 // Offset of the left bar from the Axis
 
   const groupOne = {
@@ -109,10 +108,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(
-                  formatNumber(d[groupOne.dataKey], 'left'),
-                  `normal ${fontSize[config.fontSize]}px sans-serif`
-                )
+                const textWidth = getTextWidth(formatNumber(d[groupOne.dataKey], 'left'))
                 const textFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
@@ -170,10 +166,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(
-                  formatNumber(d[groupTwo.dataKey], 'left'),
-                  `normal ${fontSize[config.fontSize]}px sans-serif`
-                )
+                const textWidth = getTextWidth(formatNumber(d[groupTwo.dataKey], 'left'))
                 const isTextFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (

package/src/components/ZoomBrush.tsx

@@ -1,13 +1,13 @@
 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'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
 
 interface Props {
   xScaleBrush: ScaleLinear<number, number>
@@ -19,7 +19,6 @@ const ZoomBrush: FC<Props> = props => {
   const { tableData, config, parseDate, formatDate, setBrushConfig, dashboardConfig } = useContext(ConfigContext)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
   const isDashboardFilters = sharedFilters?.length > 0
-  const { fontSize } = useBarChart()
   const [showTooltip, setShowTooltip] = useState(false)
   const [brushKey, setBrushKey] = useState(0)
   const brushRef = useRef(null)
@@ -178,7 +177,6 @@ const ZoomBrush: FC<Props> = props => {
               showTooltip={showTooltip}
               pixelDistance={textProps.endPosition - textProps.startPosition}
               textProps={textProps}
-              fontSize={fontSize[config.fontSize]}
               {...props}
               isBrushing={brushRef.current?.state.isBrushing}
             />
@@ -202,7 +200,7 @@ const ZoomBrush: FC<Props> = props => {
 }
 
 const BrushHandle = props => {
-  const { x, isBrushActive, isBrushing, className, textProps, fontSize, showTooltip, left } = props
+  const { x, isBrushActive, isBrushing, className, textProps, showTooltip, left } = props
   const pathWidth = 8
   if (!isBrushActive) {
     return null
@@ -212,7 +210,7 @@ const BrushHandle = props => {
   const transform = isLeft ? 'scale(-1, 1)' : 'translate(0,0)'
   const textAnchor = isLeft ? 'end' : 'start'
   const tooltipText = isLeft ? ` Drag edges to focus on a specific segment ` : ''
-  const textWidth = getTextWidth(tooltipText, `normal ${fontSize / 1.1}px sans-serif`)
+  const textWidth = getTextWidth(tooltipText, `normal ${appFontSize / 1.1}px sans-serif`)
 
   return (
     <>
@@ -221,7 +219,7 @@ const BrushHandle = props => {
           x={(Number(textProps.xMax) - textWidth) / 2}
           dy={-12}
           pointerEvents='visiblePainted'
-          fontSize={fontSize / 1.1}
+          fontSize={appFontSize / 1.1}
         >
           {tooltipText}
         </Text>
@@ -234,7 +232,7 @@ const BrushHandle = props => {
           y={25}
           verticalAnchor='start'
           textAnchor={textAnchor}
-          fontSize={fontSize / 1.4}
+          fontSize={appFontSize / 1.4}
         >
           {isLeft ? textProps.startValue : textProps.endValue}
         </Text>

package/src/data/initial-state.js

@@ -11,10 +11,9 @@ export default {
   showDownloadMediaButton: false,
   theme: 'theme-blue',
   animate: false,
-  fontSize: 'medium',
   lineDatapointStyle: 'hover',
   lineDatapointColor: 'Same as Line',
-  barHasBorder: 'false',
+  barHasBorder: 'true',
   isLollipopChart: false,
   lollipopShape: 'circle',
   lollipopColorStyle: 'two-tone',
@@ -167,6 +166,7 @@ export default {
     seriesHighlight: [],
     style: 'circles',
     subStyle: 'linear blocks',
+    shape: 'circle',
     tickRotation: '',
     hideBorder: {
       side: false,
@@ -198,13 +198,16 @@ export default {
     bottomPrefix: '',
     bottomAbbreviated: false
   },
+  filters: [],
   confidenceKeys: {},
   visual: {
     border: true,
     accent: true,
     background: true,
     verticalHoverLine: false,
-    horizontalHoverLine: false
+    horizontalHoverLine: false,
+    lineDatapointSymbol: 'none',
+    maximumShapeAmount: 7
   },
   useLogScale: false,
   filterBehavior: 'Filter Change',

package/src/helpers/getBoxPlotConfig.ts

@@ -0,0 +1,68 @@
+import _ from 'lodash'
+import { ChartConfig } from '../types/ChartConfig'
+import * as d3 from 'd3-array'
+
+export const getBoxPlotConfig = (newConfig: ChartConfig, data: object[]) => {
+  const combinedData = data
+  const groups = _.uniq(_.map(combinedData, newConfig.xAxis.dataKey))
+  const seriesKeys = _.map(newConfig.series, 'dataKey')
+  const plots: any[] = []
+
+  groups.forEach(g => {
+    seriesKeys.forEach(seriesKey => {
+      try {
+        if (!g) throw new Error('No groups resolved in box plots')
+
+        // Start handle operations on combinedData
+        const { count, sortedData } = _.chain(combinedData)
+          // Filter by xAxis data key
+          .filter(item => item[newConfig.xAxis.dataKey] === g)
+          // perform multiple operations on the filtered data
+          .thru(filteredData => ({
+            count: filteredData.length,
+            sortedData: _.map(filteredData, item => Number(item[seriesKey])).sort()
+          }))
+          // get the results from the chain
+          .value()
+
+        if (!sortedData) throw new Error('boxplots dont have data yet')
+        if (!plots) throw new Error('boxplots dont have plots yet')
+
+        const q1 = d3.quantile(sortedData, 0.25)
+        const q3 = d3.quantile(sortedData, 0.75)
+
+        const iqr = q3 - q1
+        const lowerBounds = q1 - 1.5 * iqr
+        const upperBounds = q3 + 1.5 * iqr
+        const nonOutliers = sortedData.filter(value => value >= lowerBounds && value <= upperBounds)
+        plots.push({
+          columnCategory: g,
+          columnMax: d3.max(nonOutliers),
+          columnThirdQuartile: _.round(q3, newConfig.dataFormat.roundTo),
+          columnMedian: Number(d3.median(sortedData)).toFixed(newConfig.dataFormat.roundTo),
+          columnFirstQuartile: _.round(q1, newConfig.dataFormat.roundTo),
+          columnMin: _.min(nonOutliers),
+          columnCount: count,
+          columnSd: Number(d3.deviation(sortedData)).toFixed(newConfig.dataFormat.roundTo),
+          columnMean: Number(d3.mean(sortedData)).toFixed(newConfig.dataFormat.roundTo),
+          columnIqr: _.round(iqr, newConfig.dataFormat.roundTo),
+          values: sortedData,
+          columnLowerBounds: lowerBounds,
+          columnUpperBounds: upperBounds,
+          columnOutliers: _.filter(sortedData, value => value < lowerBounds || value > upperBounds),
+          columnNonOutliers: _.filter(sortedData, value => value >= lowerBounds && value <= upperBounds)
+        })
+      } catch (e) {
+        console.error('COVE: ', e.message) // eslint-disable-line
+      }
+    })
+  })
+
+  // Generate a flat list of categories based on seriesKeys and groups
+  const categories =
+    seriesKeys.length > 1
+      ? _.flatMap(groups, value => _.map(seriesKeys, key => `${_.capitalize(key)} - ${_.capitalize(value)}`))
+      : groups
+
+  return [plots, categories]
+}

package/src/helpers/getColorScale.ts

@@ -0,0 +1,28 @@
+import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { scaleOrdinal } from '@visx/scale'
+import { ChartConfig } from '../types/ChartConfig'
+
+export const getColorScale = (config: ChartConfig): ((value: string) => string) => {
+  const configPalette = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
+    ? config.twoColor.palette
+    : config.palette
+  const allPalettes: Record<string, string[]> = { ...colorPalettes, ...twoColorPalette }
+  let palette = config.customColors || allPalettes[configPalette]
+  let numberOfKeys = config.runtime.seriesKeys.length
+  let newColorScale
+
+  while (numberOfKeys > palette.length) {
+    palette = palette.concat(palette)
+  }
+
+  palette = palette.slice(0, numberOfKeys)
+
+  newColorScale = () =>
+    scaleOrdinal({
+      domain: config.runtime.seriesLabelsAll,
+      range: palette,
+      unknown: null
+    })
+
+  return newColorScale
+}

package/src/helpers/getComboChartConfig.ts

@@ -0,0 +1,42 @@
+import _ from 'lodash'
+import { ChartConfig } from '../types/ChartConfig'
+import * as d3 from 'd3-array'
+
+export const getComboChartConfig = (newConfig: ChartConfig) => {
+  if (newConfig.visualizationType !== 'Combo' || !newConfig.series) return
+
+  const runtimeKeys = {
+    barSeriesKeys: [],
+    lineSeriesKeys: [],
+    areaSeriesKeys: [],
+    forecastingSeriesKeys: []
+  }
+
+  // Define a mapping of series types to runtime keys
+  const seriesTypeMap = new Map([
+    ['Area Chart', 'areaSeriesKeys'],
+    ['Forecasting', 'forecastingSeriesKeys'],
+    ['Bar', 'barSeriesKeys'],
+    ['Combo', 'barSeriesKeys'],
+    ['Line', 'lineSeriesKeys'],
+    ['dashed-sm', 'lineSeriesKeys'],
+    ['dashed-md', 'lineSeriesKeys'],
+    ['dashed-lg', 'lineSeriesKeys']
+  ])
+
+  newConfig.series.forEach(series => {
+    const runtimeKey = seriesTypeMap.get(series.type)
+    if (runtimeKey) {
+      const valueToPush = runtimeKey === 'barSeriesKeys' || runtimeKey === 'lineSeriesKeys' ? series.dataKey : series
+      runtimeKeys[runtimeKey].push(valueToPush)
+    }
+
+    // Change Combo series type to Bar
+    if (series.type === 'Combo') {
+      series.type = 'Bar'
+    }
+  })
+
+  // Assign the processed runtime keys to the configuration
+  return { ...newConfig.runtime, ...runtimeKeys }
+}

package/src/helpers/getExcludedData.ts

@@ -0,0 +1,37 @@
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+import _ from 'lodash'
+import { ChartConfig } from '../types/ChartConfig'
+export const getExcludedData = (newConfig: ChartConfig, data: object[]) => {
+  let newExcludedData = data
+  if (newConfig.exclusions && newConfig.exclusions.active) {
+    if (newConfig.xAxis.type === 'categorical' && newConfig.exclusions.keys?.length > 0) {
+      newExcludedData = data.filter(e => !newConfig.exclusions.keys.includes(e[newConfig.xAxis.dataKey]))
+    } else if (
+      isDateScale(newConfig.xAxis) &&
+      (newConfig.exclusions.dateStart || newConfig.exclusions.dateEnd) &&
+      newConfig.xAxis.dateParseFormat
+    ) {
+      // Filter dates
+      const timestamp = e => new Date(e).getTime()
+
+      let startDate = timestamp(newConfig.exclusions.dateStart)
+      let endDate = timestamp(newConfig.exclusions.dateEnd) + 86399999 //Increase by 24h in ms (86400000ms - 1ms) to include selected end date for .getTime() comparative
+
+      let startDateValid = undefined !== typeof startDate && false === isNaN(startDate)
+      let endDateValid = undefined !== typeof endDate && false === isNaN(endDate)
+
+      if (startDateValid && endDateValid) {
+        newExcludedData = data.filter(
+          e => timestamp(e[newConfig.xAxis.dataKey]) >= startDate && timestamp(e[newConfig.xAxis.dataKey]) <= endDate
+        )
+      } else if (startDateValid) {
+        newExcludedData = data.filter(e => timestamp(e[newConfig.xAxis.dataKey]) >= startDate)
+      } else if (endDateValid) {
+        newExcludedData = data.filter(e => timestamp(e[newConfig.xAxis.dataKey]) <= endDate)
+      }
+    } else {
+      newExcludedData = data
+    }
+  }
+  return newExcludedData
+}

package/src/helpers/getTopAxis.ts

@@ -0,0 +1,7 @@
+export default function getTopAxis(config) {
+  // When to show top axis
+  const hasTopAxis =
+    config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Line'
+
+  return { hasTopAxis }
+}