@cdc/chart 4.24.12 → 4.25.2-25

package/src/components/LinearChart.tsx

@@ -26,8 +26,7 @@ import Regions from './Regions'
 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 +35,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 +49,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
@@ -60,6 +64,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     brushConfig,
     colorScale,
     config,
+    convertLineToBarGraph,
     currentViewport,
     dimensions,
     formatDate,
@@ -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
@@ -249,10 +257,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const useDateSpanMonths = isDateTime && dateSpanMonths > xTickCount
 
   // GETTERS & FUNCTIONS
-  const checkLineToBarGraph = () => {
-    return isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)
-  }
-
   const handleLeftTickFormatting = (tick, index, ticks) => {
     if (isLogarithmicAxis && tick === 0.1) {
       //when logarithmic scale applied change value of first tick
@@ -377,7 +381,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const topLabelOnGridline = topYLabelRef.current && yAxis.labelsAboveGridlines
 
     // Heights to add
-    const brushHeight = brush?.active ? brush?.height : 0
+
+    const brushHeight = brush?.active ? brush?.height + brush?.height : 0
     const forestRowsHeight = isForestPlot ? config.data.length * forestPlot.rowHeight : 0
     const topLabelOnGridlineHeight = topLabelOnGridline ? topYLabelRef.current.getBBox().height : 0
     const additionalHeight = axisBottomHeight + brushHeight + forestRowsHeight + topLabelOnGridlineHeight
@@ -410,21 +415,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
+
+    // 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
 
-    setYAxisAutoPadding(newPadding * 100)
+    /* 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 +454,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 +496,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 +514,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 +545,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 +562,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 +580,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                     stroke='#333'
                     textAnchor={'middle'}
                     verticalAnchor='start'
+                    fontSize={axisLabelFontSize}
                   >
                     {runtime.xAxis.label}
                   </Text>
@@ -641,6 +657,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>
@@ -712,7 +729,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               showTooltip={showTooltip}
             />
           )}
-          {(visualizationType === 'Bar' || visualizationType === 'Combo' || checkLineToBarGraph()) && (
+          {(visualizationType === 'Bar' || visualizationType === 'Combo' || convertLineToBarGraph) && (
             <BarChart
               xScale={xScale}
               yScale={yScale}
@@ -731,7 +748,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               chartRef={svgRef}
             />
           )}
-          {((visualizationType === 'Line' && !checkLineToBarGraph()) ||
+          {((visualizationType === 'Line' && !convertLineToBarGraph) ||
             visualizationType === 'Combo' ||
             visualizationType === 'Bump Chart') && (
             <LineChart
@@ -795,7 +812,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           {!['Paired Bar', 'Box Plot', 'Area Chart', 'Scatter Plot', 'Deviation Bar', 'Forecasting', 'Bar'].includes(
             visualizationType
           ) &&
-            !checkLineToBarGraph() && (
+            !convertLineToBarGraph && (
               <>
                 <LineChart
                   xScale={xScale}
@@ -928,7 +945,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               {config.chartMessage.noData}
             </Text>
           )}
-          {(config.visualizationType === 'Bar' || checkLineToBarGraph()) &&
+          {(config.visualizationType === 'Bar' || convertLineToBarGraph) &&
             config.tooltips.singleSeries &&
             config.visual.horizontalHoverLine && (
               <Group
@@ -947,7 +964,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 />
               </Group>
             )}
-          {(config.visualizationType === 'Bar' || checkLineToBarGraph()) &&
+          {(config.visualizationType === 'Bar' || convertLineToBarGraph) &&
             config.tooltips.singleSeries &&
             config.visual.verticalHoverLine && (
               <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
@@ -1034,7 +1051,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 +1068,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 +1086,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 +1102,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 +1117,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 +1133,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 +1152,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 +1195,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 +1217,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 +1233,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 +1296,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 +1316,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                       }, ${axisCenter}) rotate(-90)`}
                       fontWeight='bold'
                       fill={config.yAxis.rightAxisLabelColor}
+                      fontSize={axisLabelFontSize}
                     >
                       {props.label}
                     </Text>
@@ -1328,17 +1356,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 +1375,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 +1403,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 +1500,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                   : undefined
                               }
                               fill={config.xAxis.tickLabelColor}
+                              fontSize={tickLabelFontSize}
                             >
                               {tick.formattedValue}
                             </Text>
@@ -1488,6 +1518,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                       verticalAnchor='start'
                       fontWeight='bold'
                       fill={config.xAxis.labelColor}
+                      fontSize={axisLabelFontSize}
                     >
                       {props.label}
                     </Text>
@@ -1502,6 +1533,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           Object.entries(tooltipData.data).length > 0 &&
           tooltipOpen &&
           showTooltip &&
+          !tooltipData?.data?.some(subArray => subArray.some(item => item === undefined)) &&
           tooltipData.dataYPosition &&
           tooltipData.dataXPosition && (
             <>
@@ -1517,7 +1549,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               >
                 <ul>
                   {typeof tooltipData === 'object' &&
-                    Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}
+                    Object.entries(tooltipData.data)
+                      .filter(([_, values]) => Array.isArray(values) && !values.includes(undefined))
+                      .map((item, index) => <TooltipListItem item={item} key={index} />)}
                 </ul>
               </TooltipWithBounds>
             </>

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, `${appFontSize / 1.1}px`)
 
   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,24 @@
+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
+
+  while (numberOfKeys > palette.length) {
+    palette = palette.concat(palette)
+  }
+
+  palette = palette.slice(0, numberOfKeys)
+
+  return scaleOrdinal({
+    domain: config.runtime.seriesLabelsAll,
+    range: palette,
+    unknown: null
+  })
+}