@cdc/chart 4.23.11 → 4.24.2

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect, useRef } from 'react'
+import React, { useContext, useState, useEffect, useRef, useMemo } from 'react'
 import { animated, useTransition, interpolate } from 'react-spring'
 import chroma from 'chroma-js'
 
@@ -7,21 +7,34 @@ import { Pie } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
+import { colorPalettesChart as colorPalettes } from '@cdc/core/data/colorPalettes'
 
 // 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'
+import LegendComponent from '../Legend/Legend.Component'
+import { createFormatLabels } from '../Legend/helpers/createFormatLabels'
+import { scaleOrdinal } from '@visx/scale'
 
 const enterUpdateTransition = ({ startAngle, endAngle }) => ({
   startAngle,
   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, colorScale, currentViewport, dimensions, highlight, highlightReset, seriesHighlight } = useContext(ConfigContext)
+  const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
     xScale: false,
     yScale: false,
@@ -30,6 +43,50 @@ const PieChart = props => {
   })
   const [filteredData, setFilteredData] = useState(undefined)
   const [animatedPie, setAnimatePie] = useState(false)
+  const pivotColumns = Object.values(config.columns).filter(column => column.showInViz)
+  const dataNeedsPivot = pivotColumns.length > 0
+  const pivotKey = dataNeedsPivot ? 'pivotColumn' : undefined
+  const _data = useMemo(() => {
+    if (dataNeedsPivot) {
+      let newData = []
+      const primaryColumn = config.yAxis.dataKey
+      const additionalColumns = pivotColumns.map(column => column.name)
+      const allColumns = [primaryColumn, ...additionalColumns]
+      const columnToUpdate = config.xAxis.dataKey
+      data.forEach(d => {
+        allColumns.forEach(col => {
+          const data = d[col]
+          if (data) {
+            newData.push({
+              [pivotKey]: data,
+              [columnToUpdate]: `${d[columnToUpdate]} - ${col}`
+            })
+          }
+        })
+      })
+      return newData
+    }
+    return data
+  }, [data, dataNeedsPivot])
+
+  const _colorScale = useMemo(() => {
+    if (dataNeedsPivot) {
+      const keys = {}
+      _data.forEach(d => {
+        if (!keys[d[config.xAxis.dataKey]]) keys[d[config.xAxis.dataKey]] = true
+      })
+      const numberOfKeys = Object.entries(keys).length
+      let palette = config.customColors || colorPalettes[config.palette]
+      palette = palette.slice(0, numberOfKeys)
+
+      return scaleOrdinal({
+        domain: Object.keys(keys),
+        range: palette,
+        unknown: null
+      })
+    }
+    return colorScale
+  }, [colorScale, dataNeedsPivot])
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -87,24 +144,24 @@ const PieChart = props => {
                     endAngle
                   })
                 )}
-                fill={colorScale(arc.data[config.runtime.xAxis.dataKey])}
+                fill={_colorScale(arc.data[config.runtime.xAxis.dataKey])}
                 onMouseEnter={e => handleTooltipMouseOver(e, { data: arc.data[config.runtime.xAxis.dataKey], arc })}
                 onMouseLeave={e => handleTooltipMouseOff()}
               />
             </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
 
           let textColor = '#FFF'
-          if (colorScale(arc.data[config.runtime.xAxis.dataKey]) && chroma.contrast(textColor, colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
+          if (_colorScale(arc.data[config.runtime.xAxis.dataKey]) && chroma.contrast(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
             textColor = '000'
           }
 
           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) + '%'}
@@ -134,7 +191,7 @@ const PieChart = props => {
     if (seriesHighlight.length > 0 && config.legend.behavior !== 'highlight') {
       let newFilteredData = []
 
-      data.forEach(d => {
+      _data.forEach(d => {
         if (seriesHighlight.indexOf(d[config.runtime.xAxis.dataKey]) !== -1) {
           newFilteredData.push(d)
         }
@@ -146,33 +203,38 @@ const PieChart = props => {
     }
   }, [seriesHighlight]) // eslint-disable-line
 
+  const createLegendLabels = createFormatLabels(config, [], _data, _colorScale)
+
   return (
-    <ErrorBoundary component='PieChart'>
-      <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
-        <Group top={centerY} left={centerX}>
-          {/* prettier-ignore */}
-          <Pie
-            data={filteredData || data}
-            pieValue={d => d[config.runtime.yAxis.dataKey]}
+    <>
+      <ErrorBoundary component='PieChart'>
+        <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
+          <Group top={centerY} left={centerX}>
+            {/* prettier-ignore */}
+            <Pie
+            data={filteredData || _data}
+            pieValue={d => d[pivotKey || config.runtime.yAxis.dataKey]}
             pieSortValues={() => -1}
             innerRadius={radius - donutThickness}
             outerRadius={radius}
           >
             {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]}/>}
           </Pie>
-        </Group>
-      </svg>
-      <div ref={triggerRef} />
-      {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
-        <>
-          <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100}) !important`}</style>
-          <TooltipWithBounds key={Math.random()} className={'tooltip cdc-open-viz-module'} left={tooltipLeft} top={tooltipTop}>
-            <ul>{typeof tooltipData === 'object' && Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}</ul>
-          </TooltipWithBounds>
-        </>
-      )}
-      {/* <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' /> */}
-    </ErrorBoundary>
+          </Group>
+        </svg>
+        <div ref={triggerRef} />
+        {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
+          <>
+            <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100}) !important`}</style>
+            <TooltipWithBounds key={Math.random()} className={'tooltip cdc-open-viz-module'} left={tooltipLeft} top={tooltipTop}>
+              <ul>{typeof tooltipData === 'object' && Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}</ul>
+            </TooltipWithBounds>
+          </>
+        )}
+        {/* <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' /> */}
+      </ErrorBoundary>
+      <LegendComponent config={config} colorScale={_colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+    </>
   )
 }
 

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,144 @@
+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'
+import { formatDate } from '@cdc/core/helpers/cove/date.js'
+
+type RegionsProps = {
+  xScale: Function
+  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 toDate = new Date(lastDate)
+
+        from = new Date(toDate.setDate(toDate.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 (region.fromType === 'Previous Days' && xAxis.type === 'date' && xAxis.sortDates && config.visualizationType === 'Line') {
+        let domain = xScale.domain()
+        let previousDays = Number(region.from)
+        let to = region.toType === 'Last Date' ? formatDate(config.xAxis.dateParseFormat, domain[domain.length - 1]) : region.to
+        let toDate = new Date(to)
+        from = new Date(toDate.setDate(toDate.getDate() - previousDays)).getTime()
+        from = xScale(from)
+        to = xScale(parseDate(to))
+        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/data/initial-state.js

@@ -29,6 +29,7 @@ export default {
     right: 5
   },
   suppressedData: [],
+  preliminaryData: [],
 
   yAxis: {
     hideAxis: false,
@@ -52,6 +53,7 @@ export default {
     rightAxisTickColor: '#333',
     numTicks: '',
     axisPadding: 0,
+    scalePadding: 10,
     tickRotation: 0,
     anchors: []
   },
@@ -128,7 +130,8 @@ export default {
     showDataTableLink: true,
     indexLabel: '',
     download: false,
-    showVertical: true
+    showVertical: true,
+    dateDisplayFormat: ''
   },
   orientation: 'vertical',
   color: 'pinkpurple',
@@ -138,7 +141,7 @@ export default {
   legend: {
     hide: false,
     behavior: 'isolate',
-    singleRow: false,
+    singleRow: true,
     colorCode: '',
     reverseLabelOrder: false,
     description: '',
@@ -190,7 +193,8 @@ export default {
   series: [],
   tooltips: {
     opacity: 90,
-    singleSeries: false
+    singleSeries: false,
+    dateDisplayFormat: ''
   },
   forestPlot: {
     startAt: 0,
@@ -208,7 +212,7 @@ export default {
     },
     estimateField: '',
     estimateRadius: '',
-    shape: '',
+    shape: 'square',
     rowHeight: 20,
     description: {
       show: true,
@@ -221,8 +225,8 @@ export default {
       location: 100
     },
     radius: {
-      min: 1,
-      max: 8,
+      min: 2,
+      max: 10,
       scalingColumn: ''
     },
     regression: {
@@ -233,11 +237,9 @@ export default {
     leftWidthOffset: 0,
     rightWidthOffset: 0,
     showZeroLine: false,
-    hideDateCategoryCol: 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
+  }
+}

package/src/helpers/handleLineType.ts

@@ -0,0 +1,18 @@
+export const handleLineType = lineType => {
+  switch (lineType) {
+    case 'dashed-sm':
+      return '5 5'
+    case 'Dashed Small':
+      return '5 5'
+    case 'dashed-md':
+      return '10 5'
+    case 'Dashed Medium':
+      return '10 5'
+    case 'dashed-lg':
+      return '15 5'
+    case 'Dashed Large':
+      return '15 5'
+    default:
+      return 0
+  }
+}

package/src/helpers/lineOptions.ts

@@ -0,0 +1,18 @@
+export const lineOptions = [
+  {
+    value: 'Dashed Small',
+    key: 'dashed-sm'
+  },
+  {
+    value: 'Dashed Medium',
+    key: 'dashed-md'
+  },
+  {
+    value: 'Dashed Large',
+    key: 'dashed-lg'
+  },
+  {
+    value: 'Solid Line',
+    key: 'solid-line'
+  }
+]

package/src/helpers/sort.ts

@@ -0,0 +1,7 @@
+export const sortAsc = (a, b) => {
+  return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+}
+
+export const sortDesc = (a, b) => {
+  return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+}