@cdc/chart 4.23.10 → 4.24.1

package/src/components/{PieChart.jsx → PieChart/PieChart.tsx}

@@ -9,9 +9,10 @@ import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 
 // cove
-import ConfigContext from '../ConfigContext'
-import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
-import useIntersectionObserver from '../hooks/useIntersectionObserver'
+import ConfigContext from '../../ConfigContext'
+import { useTooltip as useCoveTooltip } from '../../hooks/useTooltip'
+import useIntersectionObserver from '../../hooks/useIntersectionObserver'
+import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 const enterUpdateTransition = ({ startAngle, endAngle }) => ({
@@ -19,9 +20,17 @@ const enterUpdateTransition = ({ startAngle, endAngle }) => ({
   endAngle
 })
 
+type TooltipData = {
+  data: {
+    [key: string]: string | number
+  }
+  dataXPosition: number
+  dataYPosition: number
+}
+
 const PieChart = props => {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels, isEditor } = useContext(ConfigContext)
-  const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip()
+  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, currentViewport } = useContext(ConfigContext)
+  const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
     xScale: false,
     yScale: false,
@@ -94,7 +103,7 @@ const PieChart = props => {
             </Group>
           )
         })}
-        {transitions.map(({ item: arc, key }) => {
+        {transitions.map(({ item: arc, key }, i) => {
           const [centroidX, centroidY] = path.centroid(arc)
           const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
 
@@ -104,7 +113,7 @@ const PieChart = props => {
           }
 
           return (
-            <animated.g key={key}>
+            <animated.g key={`${key}${i}`}>
               {hasSpaceForLabel && (
                 <Text style={{ fill: textColor }} x={centroidX} y={centroidY} dy='.33em' textAnchor='middle' pointerEvents='none'>
                   {Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}

package/src/components/PieChart/index.tsx

@@ -0,0 +1,3 @@
+import PieChart from './PieChart'
+
+export default PieChart

package/src/components/Regions/components/Regions.tsx

@@ -0,0 +1,135 @@
+import React, { useContext } from 'react'
+import { ChartConfig } from '../../../types/ChartConfig'
+import ConfigContext from '../../../ConfigContext'
+import { ChartContext } from '../../../types/ChartContext'
+import { Text } from '@visx/text'
+import { Group } from '@visx/group'
+import * as d3 from 'd3'
+
+type RegionsProps = {
+  xScale: Function
+  barWidth: number
+  totalBarsInGroup: number
+  yMax: number
+  barWidth?: number
+  totalBarsInGroup?: number
+}
+
+const Regions = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleTooltipMouseOff, handleTooltipMouseOver, handleTooltipClick, tooltipData, showTooltip, hideTooltip }: RegionsProps) => {
+  const { parseDate, config } = useContext<ChartContext>(ConfigContext)
+
+  const { runtime, regions, visualizationType, orientation, xAxis } = config
+
+  let from
+  let to
+  let width
+
+  if (regions && orientation === 'vertical') {
+    return regions.map(region => {
+      if (xAxis.type === 'date' && region.fromType !== 'Previous Days') {
+        from = xScale(parseDate(region.from).getTime())
+        to = xScale(parseDate(region.to).getTime())
+        width = to - from
+      }
+
+      if (xAxis.type === 'categorical') {
+        from = xScale(region.from)
+        to = xScale(region.to)
+        width = to - from
+      }
+
+      if ((visualizationType === 'Bar' || config.visualizationType === 'Combo') && xAxis.type === 'date') {
+        from = region.fromType !== 'Previous Days' ? xScale(parseDate(region.from).getTime()) - (barWidth * totalBarsInGroup) / 2 : null
+        to = region.toType !== 'Last Date' ? xScale(parseDate(region.to).getTime()) + (barWidth * totalBarsInGroup) / 2 : null
+
+        width = to - from
+      }
+
+      if ((visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.xAxis.type === 'categorical') {
+        from = xScale(region.from)
+        to = xScale(region.to)
+        width = to - from
+      }
+
+      if (region.fromType === 'Previous Days') {
+        to = region.toType !== 'Last Date' ? xScale(parseDate(region.to).getTime()) + (barWidth * totalBarsInGroup) / 2 : null
+
+        let domain = xScale.domain()
+        let bisectDate = d3.bisector(d => d).left
+        let closestValue
+
+        let previousDays = Number(region.from)
+        let lastDate = region.toType === 'Last Date' ? domain[domain.length - 1] : region.to
+        let fromDate = new Date(lastDate)
+
+        from = new Date(fromDate.setDate(fromDate.getDate() - previousDays)).getTime()
+        let targetValue = from
+
+        let index = bisectDate(domain, targetValue)
+        if (index === 0) {
+          closestValue = domain[0]
+        } else if (index === domain.length) {
+          closestValue = domain[domain.length - 1]
+        } else {
+          let d0 = domain[index - 1]
+          let d1 = domain[index]
+          closestValue = targetValue - d0 > d1 - targetValue ? d1 : d0
+        }
+
+        from = Number(xScale(closestValue) - (visualizationType === 'Bar' || visualizationType === 'Combo' ? (barWidth * totalBarsInGroup) / 2 : 0))
+
+        width = to - from
+      }
+
+      // set the region max to the charts max range.
+      if (region.toType === 'Last Date') {
+        let domainValues = xScale.domain()
+        let lastDate = domainValues[domainValues.length - 1]
+        to = Number(xScale(lastDate) + (visualizationType === 'Bar' || visualizationType === 'Combo' ? (barWidth * totalBarsInGroup) / 2 : 0))
+        width = to - from
+      }
+
+      if (!from) return null
+      if (!to) return null
+
+      const TopRegionBorderShape = () => {
+        return (
+          <path
+            stroke='#333'
+            d={`M${from} -5
+                L${from} 5
+                M${from} 0
+                L${to} 0
+                M${to} -5
+                L${to} 5`}
+          />
+        )
+      }
+
+      const HighlightedArea = () => {
+        return <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
+      }
+
+      return (
+        <Group
+          className='regions regions-group--line'
+          left={config.visualizationType === 'Bar' || config.visualizationType === 'Combo' ? 0 : config?.visualizationType === 'Line' ? Number(runtime.yAxis.size) : 0}
+          key={region.label}
+          onMouseMove={handleTooltipMouseOver}
+          onMouseLeave={handleTooltipMouseOff}
+          handleTooltipClick={handleTooltipClick}
+          tooltipData={JSON.stringify(tooltipData)}
+          showTooltip={showTooltip}
+        >
+          <TopRegionBorderShape />
+          <HighlightedArea />
+          <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
+            {region.label}
+          </Text>
+        </Group>
+      )
+    })
+  }
+}
+
+export default Regions

package/src/components/Regions/index.tsx

@@ -0,0 +1,3 @@
+import Regions from './components/Regions'
+
+export default Regions

package/src/components/{ScatterPlot.jsx → ScatterPlot/ScatterPlot.jsx}

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react'
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../ConfigContext'
 import { Group } from '@visx/group'
 
-const CoveScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
+const ScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
   const { colorScale, transformedData: data, config, formatNumber, seriesHighlight, colorPalettes } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
@@ -48,4 +48,4 @@ const CoveScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
     </Group>
   )
 }
-export default CoveScatterPlot
+export default ScatterPlot

package/src/components/ScatterPlot/index.tsx

@@ -0,0 +1,3 @@
+import ScatterPlot from './ScatterPlot.jsx'
+
+export default ScatterPlot

package/src/components/{SparkLine.jsx → Sparkline/SparkLine.jsx}

@@ -11,9 +11,9 @@ import { MarkerArrow } from '@visx/marker'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-import useReduceData from '../hooks/useReduceData'
+import useReduceData from '../../hooks/useReduceData'
 
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../ConfigContext'
 
 const SparkLine = props => {
   const { width: parentWidth, height: parentHeight } = props

package/src/components/Sparkline/index.tsx

@@ -0,0 +1,3 @@
+import SparkLine from './SparkLine.jsx'
+
+export default SparkLine

package/src/components/ZoomBrush.tsx

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

package/src/data/initial-state.js

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

package/src/helpers/abbreviateNumber.ts

@@ -0,0 +1,17 @@
+export const abbreviateNumber = num => {
+  let unit = ''
+  let absNum = Math.abs(num)
+
+  if (absNum >= 1e9) {
+    unit = 'B'
+    num = num / 1e9
+  } else if (absNum >= 1e6) {
+    unit = 'M'
+    num = num / 1e6
+  } else if (absNum >= 1e3) {
+    unit = 'K'
+    num = num / 1e3
+  }
+
+  return num + unit
+}

package/src/helpers/computeMarginBottom.ts

@@ -0,0 +1,55 @@
+import { ChartConfig, Legend } from '../types/ChartConfig'
+
+export const computeMarginBottom = (config: ChartConfig, legend: Legend, currentViewport: string): string | number => {
+  const isLegendBottom = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
+  const isHorizontal = config.orientation === 'horizontal'
+  const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
+  const isBrush = config.brush.active
+  const offset = 20
+  const brushHeight = config.brush.height
+  let bottom = 0
+  if (!isLegendBottom && isHorizontal && !config.yAxis.label) {
+    bottom = Number(config.xAxis.labelOffset)
+  }
+  if (!isLegendBottom && isHorizontal && config.yAxis.label && !config.isResponsiveTicks) {
+    bottom = Number(config.runtime.xAxis.size) + Number(config.xAxis.labelOffset)
+  }
+  if (!isLegendBottom && isHorizontal && config.yAxis.label && config.isResponsiveTicks) {
+    bottom = config.dynamicMarginTop + offset
+  }
+  if (!isLegendBottom && isHorizontal && !config.yAxis.label && config.isResponsiveTicks) {
+    bottom = config.dynamicMarginTop ? config.dynamicMarginTop - offset : Number(config.xAxis.labelOffset) - offset
+  }
+  if (!isLegendBottom && isHorizontal && config.yAxis.label && config.isResponsiveTicks) {
+    bottom = config.dynamicMarginTop ? config.dynamicMarginTop + offset : Number(config.xAxis.labelOffset)
+  }
+
+  if (!isHorizontal && !isLegendBottom && config.xAxis.label && tickRotation && !config.isResponsiveTicks) {
+    bottom = isBrush ? brushHeight + config.xAxis.tickWidthMax + -config.xAxis.size + config.xAxis.labelOffset + offset : config.xAxis.tickWidthMax + offset + -config.xAxis.size + config.xAxis.labelOffset
+  }
+  if (!isHorizontal && !isLegendBottom && !config.xAxis.label && tickRotation && !config.isResponsiveTicks) {
+  }
+  if (!isHorizontal && !isLegendBottom && !config.xAxis.label && tickRotation && !config.dynamicMarginTop && !config.isResponsiveTicks) {
+    bottom = isBrush ? config.xAxis.tickWidthMax + brushHeight + offset + -config.xAxis.size : 0
+  }
+
+  if (!isHorizontal && !isLegendBottom && config.xAxis.label && !tickRotation && !config.isResponsiveTicks) {
+    bottom = isBrush ? brushHeight + -config.xAxis.size + config.xAxis.labelOffset + offset : -config.xAxis.size + config.xAxis.labelOffset + offset
+  }
+  if (!isHorizontal && !isLegendBottom && config.xAxis.label && config.dynamicMarginTop && config.isResponsiveTicks) {
+    bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + config.xAxis.tickWidthMax : config.dynamicMarginTop + -config.xAxis.size + offset
+  }
+  if (!isHorizontal && !isLegendBottom && !config.xAxis.label && config.dynamicMarginTop && config.isResponsiveTicks) {
+    bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + config.xAxis.tickWidthMax : config.dynamicMarginTop + -config.xAxis.size - offset
+  }
+  if (!isHorizontal && !isLegendBottom && config.xAxis.label && !config.dynamicMarginTop && config.isResponsiveTicks) {
+    bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + 25 : config.xAxis.labelOffset + -config.xAxis.size + offset
+  }
+  if (!isHorizontal && !isLegendBottom && !config.xAxis.label && !config.dynamicMarginTop && config.isResponsiveTicks) {
+    bottom = -config.xAxis.size + offset + config.xAxis.labelOffset
+  }
+  if (!isHorizontal && !isLegendBottom && !config.xAxis.label && !tickRotation && !config.dynamicMarginTop && !config.isResponsiveTicks) {
+    bottom = isBrush ? brushHeight + -config.xAxis.size + config.xAxis.labelOffset : 0
+  }
+  return `${bottom}px`
+}

package/src/helpers/filterData.ts

@@ -0,0 +1,18 @@
+export const filterData = (filters, data) => {
+  let filteredData: any[] = []
+
+  data.forEach(row => {
+    let add = true
+    filters
+      .filter(filter => filter.type !== 'url')
+      .forEach(filter => {
+        if (row[filter.columnName] != filter.active) {
+          add = false
+        }
+      })
+
+    if (add) filteredData.push(row)
+  })
+
+  return filteredData
+}

package/src/helpers/generateColorsArray.ts

@@ -0,0 +1,8 @@
+import chroma from 'chroma-js'
+
+export const generateColorsArray = (color = '#000000', special = false) => {
+  let colorObj = chroma(color)
+  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
+
+  return [color, hoverColor, colorObj.darken(0.3).hex()]
+}

package/src/helpers/getQuartiles.ts

@@ -0,0 +1,30 @@
+/**
+ * Calculates the first quartile (q1) and third quartile (q3) from an array of integers or decimals.
+ *
+ * @param {Array} arr - The array of integers or decimals.
+ * @returns {Object} An object containing the q1 and q3 values.
+ */
+export const getQuartiles = arr => {
+  arr.sort((a, b) => a - b)
+
+  // Calculate the index of the median value of the array
+  const medianIndex = Math.floor(arr.length / 2)
+
+  // Check if the length of the array is even or odd
+  const isEvenLength = arr.length % 2 === 0
+
+  // Split the array into two subarrays based on the median index
+  const q1Array = isEvenLength ? arr.slice(0, medianIndex) : arr.slice(0, medianIndex + 1)
+  const q3Array = isEvenLength ? arr.slice(medianIndex) : arr.slice(medianIndex + 1)
+
+  // Calculate the median of the first subarray to get the q1 value
+  const q1Index = Math.floor(q1Array.length / 2)
+  const q1 = isEvenLength ? (q1Array[q1Index - 1] + q1Array[q1Index]) / 2 : q1Array[q1Index]
+
+  // Calculate the median of the second subarray to get the q3 value
+  const q3Index = Math.floor(q3Array.length / 2)
+  const q3 = isEvenLength ? (q3Array[q3Index - 1] + q3Array[q3Index]) / 2 : q3Array[q3Index]
+
+  // Return an object containing the q1 and q3 values
+  return { q1, q3 }
+}

package/src/helpers/handleChartAriaLabels.ts

@@ -0,0 +1,19 @@
+export const handleChartAriaLabels = (state, testing = false) => {
+  if (testing) console.log(`handleChartAriaLabels Testing On:`, state) // eslint-disable-line
+  try {
+    if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
+    let ariaLabel = ''
+
+    if (state.visualizationType) {
+      ariaLabel += `${state.visualizationType} chart`
+    }
+
+    if (state.title && state.visualizationType) {
+      ariaLabel += ` with the title: ${state.title}`
+    }
+
+    return ariaLabel
+  } catch (e) {
+    console.error('COVE: ', e.message) // eslint-disable-line
+  }
+}