@cdc/chart 4.23.11 → 4.24.1

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 })
+}

package/src/helpers/tests/computeMarginBottom.test.ts

@@ -0,0 +1,20 @@
+import { ChartConfig, Legend } from '../../types/ChartConfig'
+import { computeMarginBottom } from '../computeMarginBottom'
+
+describe('computeMarginBottom', () => {
+  it('should return correct value', () => {
+    const config = {
+      orientation: 'horizontal',
+      xAxis: { labelOffset: '10' },
+      yAxis: { label: null },
+      brush: { active: false },
+      isResponsiveTicks: true,
+      dynamicMarginTop: 20
+    }
+    const legend = { position: 'top' }
+    const currentViewport = 'md'
+    expect(computeMarginBottom(config as unknown as ChartConfig, legend as Legend, currentViewport)).toBe('0px')
+    config.yAxis.label = 'label'
+    expect(computeMarginBottom(config as unknown as ChartConfig, legend as Legend, currentViewport)).toBe('40px')
+  })
+})

package/src/hooks/useBarChart.js

@@ -184,7 +184,7 @@ export const useBarChart = () => {
     return 0
   }
 
-  const getAdditionalColumn = xAxisDataValue => {
+  const getAdditionalColumn = (series, xAxisDataValue) => {
     if (!xAxisDataValue) return ''
     const columns = config.columns
     const columnsWithTooltips = []
@@ -193,7 +193,8 @@ export const useBarChart = () => {
       tableData.find(d => {
         return d[config.xAxis.dataKey] === xAxisDataValue
       }) || {}
-    for (const [colKeys, colVals] of Object.entries(columns)) {
+    Object.keys(columns).forEach(colKeys => {
+      if(series && config.columns[colKeys].series && config.columns[colKeys].series !== series) return
       const formattingParams = {
         addColPrefix: config.columns[colKeys].prefix,
         addColSuffix: config.columns[colKeys].suffix,
@@ -201,11 +202,11 @@ export const useBarChart = () => {
         addColCommas: config.columns[colKeys].commas
       }
 
-      const formattedValue = formatColNumber(closestVal[colVals?.name], 'left', true, config, formattingParams)
-      if (colVals.tooltips) {
-        columnsWithTooltips.push([colVals.label, formattedValue])
+      const formattedValue = formatColNumber(closestVal[config.columns[colKeys].name], 'left', true, config, formattingParams)
+      if (config.columns[colKeys].tooltips) {
+        columnsWithTooltips.push([config.columns[colKeys].label, formattedValue])
       }
-    }
+    })
     columnsWithTooltips.forEach(columnData => {
       additionalTooltipItems += `${columnData[0]} : ${columnData[1]} <br/>`
     })

package/src/hooks/useScales.ts

@@ -190,7 +190,7 @@ const useScales = (properties: useScaleProps) => {
       if (config.forestPlot.type === 'Linear') {
         xScale = scaleLinear({
           domain: [Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding],
-          range: [leftWidthOffset, xMax - rightWidthOffset]
+          range: [leftWidthOffset, dimensions[0] - rightWidthOffset]
         })
         xScale.type = scaleTypes.LINEAR
       }

package/src/hooks/{useTooltip.jsx → useTooltip.tsx}

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
-import { defaultStyles } from '@visx/tooltip'
+import { type ChartContext } from '../types/ChartContext'
 
 // third party
 import { localPoint } from '@visx/event'
@@ -11,9 +11,9 @@ const transform = new DataTransform()
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 
 export const useTooltip = props => {
-  const { tableData, config, formatNumber, capitalize, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
+  const { tableData, config, formatNumber, capitalize, formatDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
   const { xScale, yScale, showTooltip, hideTooltip } = props
-  const { xAxis, visualizationType, orientation, yAxis, runtime } = config
+  const { xAxis, visualizationType, orientation, yAxis, runtime, barWidth } = config
   const data = transform.applySuppression(tableData, config.suppressedData)
   /**
    * Provides the tooltip information based on the tooltip data array and svg cursor coordinates
@@ -82,13 +82,10 @@ export const useTooltip = props => {
     includedSeries.push(...getColumnNames(config.columns))
 
     const yScaleValues = getYScaleValues(closestXScaleValue, includedSeries)
-
     const xScaleValues = data.filter(d => d[xAxis.dataKey] === getClosestYValue(y))
 
     const resolvedScaleValues = orientation === 'vertical' ? yScaleValues : xScaleValues
 
-    // const forestPlotXValue = visualizationType === 'Forest Plot' ? data?.filter(d => d[xAxis.dataKey] === getClosestYValue(y))?.[0]?.[config.forestPlot.estimateField] : null
-
     const getAxisPosition = seriesKey => {
       const seriesObj = config.series.filter(s => s.dataKey === seriesKey)[0]
       const position = seriesObj?.axis ? String(seriesObj.axis).toLowerCase() : 'left'
@@ -112,7 +109,7 @@ export const useTooltip = props => {
         if (config.visualizationType === 'Pie') {
           closestValue = arc?.data[colVals.name]
         } else {
-          closestValue = resolvedScaleValues[0][colVals.name]
+          closestValue = resolvedScaleValues[0]?.[colVals.name]
         }
 
         const formattedValue = formatColNumber(closestValue, 'left', true, config, formattingParams)
@@ -135,6 +132,7 @@ export const useTooltip = props => {
           ['Percent', `${Math.round((((arc?.endAngle - arc?.startAngle) * 180) / Math.PI / 360) * 100) + '%'}`]
         )
       }
+
       if (visualizationType === 'Forest Plot') {
         tooltipItems.push([config.xAxis.dataKey, getClosestYValue(y)])
       }
@@ -143,9 +141,9 @@ export const useTooltip = props => {
         tooltipItems.push(
           ...getIncludedTooltipSeries()
             ?.filter(Boolean)
-            .flatMap(seriesKey => {
-              const formattedValue = seriesKey === config.xAxis.dataKey ? resolvedScaleValues[0][seriesKey] : formatNumber(resolvedScaleValues[0][seriesKey], getAxisPosition(seriesKey))
-              return resolvedScaleValues[0][seriesKey] ? [[seriesKey, formattedValue]] : []
+            ?.flatMap(seriesKey => {
+              const formattedValue = seriesKey === config.xAxis.dataKey ? resolvedScaleValues[0]?.[seriesKey] : formatNumber(resolvedScaleValues[0]?.[seriesKey], getAxisPosition(seriesKey))
+              return resolvedScaleValues?.[0]?.[seriesKey] ? [[seriesKey, formattedValue, getAxisPosition(seriesKey)]] : []
             })
         )
       }
@@ -204,9 +202,11 @@ export const useTooltip = props => {
    * @function getXValueFromCoordinate
    * @returns {String} - the closest x value to the cursor position
    */
-  const getXValueFromCoordinate = x => {
+  const getXValueFromCoordinate = (x, isClick = false) => {
     if (visualizationType === 'Pie') return
     if (orientation === 'horizontal') return
+
+    // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
     if (xScale.type === 'point' || xAxis.type === 'continuous' || xAxis.type === 'date') {
       // Find the closest x value by calculating the minimum distance
       let closestX = null
@@ -215,11 +215,12 @@ export const useTooltip = props => {
 
       data.forEach(d => {
         const xPosition = xAxis.type === 'date' ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
-        const distance = Math.abs(Number(xPosition - offset))
+        let bwOffset = config.barHeight
+        const distance = Math.abs(Number(xPosition - offset + (isClick ? bwOffset * 2 : 0)))
 
-        if (distance < minDistance) {
+        if (distance <= minDistance) {
           minDistance = distance
-          closestX = xAxis.type === 'date' ? parseDate(d[xAxis.dataKey]) : d[xAxis.dataKey]
+          closestX = xAxis.type === 'date' ? d[xAxis.dataKey] : d[xAxis.dataKey]
         }
       })
       return closestX
@@ -250,7 +251,6 @@ export const useTooltip = props => {
       const yPositionOnPlot = visualizationType !== 'Forest Plot' ? yScale(d[config.xAxis.dataKey]) : yScale(index)
 
       const distance = Math.abs(yPositionOnPlot - yPosition)
-
       if (distance < minDistance) {
         minDistance = distance
         closestYValue = key ? d[key] : d[config.xAxis.dataKey]
@@ -275,9 +275,14 @@ export const useTooltip = props => {
       const eventSvgCoords = localPoint(e)
       const { x } = eventSvgCoords
       if (!x) throw new Error('COVE: no x value in handleTooltipClick.')
-      let closestXScaleValue = getXValueFromCoordinate(x)
-      if (!closestXScaleValue) throw new Error('COVE: no closest x scale value in handleTooltipClick')
+      let closestXScaleValue = getXValueFromCoordinate(x, true)
       let datum = config.data?.filter(item => item[config.xAxis.dataKey] === closestXScaleValue)
+      if (!closestXScaleValue) throw new Error('COVE: no closest x scale value in handleTooltipClick')
+      if (xAxis.type === 'date' && closestXScaleValue) {
+        closestXScaleValue = new Date(closestXScaleValue)
+        closestXScaleValue = formatDate(closestXScaleValue)
+        datum = config.data?.filter(item => formatDate(new Date(item[config.xAxis.dataKey])) === closestXScaleValue)
+      }
 
       if (!datum[0]) {
         throw new Error(`COVE: no data found matching the closest xScale value: ${closestXScaleValue}`)
@@ -300,16 +305,13 @@ export const useTooltip = props => {
    */
   const getYScaleValues = (closestXScaleValue, includedSeries) => {
     try {
-      const formattedDate = formatDate(closestXScaleValue)
-
       let dataToSearch
 
       if (xAxis.type === 'categorical') {
         dataToSearch = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
       } else {
-        dataToSearch = data.filter(d => formatDate(parseDate(d[xAxis.dataKey])) === formattedDate)
+        dataToSearch = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
       }
-
       // Return an empty array if no matching data is found.
       if (!dataToSearch || dataToSearch.length === 0) {
         return []

package/src/scss/main.scss

@@ -1,8 +1,73 @@
 @import '@cdc/core/styles/base';
 @import '@cdc/core/styles/heading-colors';
-@import 'mixins';
-@import 'variables';
 @import '@cdc/core/styles/v2/themes/color-definitions';
+.dash-container {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.legend-dash-left {
+  margin-left: 8px !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-inner {
+  width: 20px;
+  margin-left: 0px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dashes {
+  display: inline-block;
+
+  &.open-circles {
+    width: 12px;
+    height: 12px;
+    border: 2px solid currentColor;
+    border-radius: 50%;
+  }
+
+  &.dashed-small {
+    margin: 0 0px;
+    font-size: 20px;
+  }
+
+  &.dashed-medium,
+  &.dashed-large {
+    span {
+      display: inline-block;
+      position: relative;
+      margin-right: 12px;
+      margin-left: 0 !important;
+
+      &::before {
+        content: '';
+        display: block;
+        height: 2px;
+        background-color: currentColor;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-20%);
+        width: 10px;
+      }
+    }
+  }
+
+  &.dashed-large {
+    span {
+      margin-right: 12px;
+      margin-left: 0 !important;
+
+      &::before {
+        width: 13px;
+      }
+    }
+  }
+}
 
 .form-container {
   overflow-y: auto;
@@ -17,7 +82,6 @@
 
 .cdc-open-viz-module.type-chart {
   @import 'DataTable';
-  @import 'editor-panel';
 
   border-radius: 3px;
 

package/src/types/ChartConfig.ts

@@ -1,43 +1,178 @@
+import { Axis } from '@cdc/core/types/Axis'
 import { type ForestPlotConfigSettings } from './ForestPlot'
+import { type Column } from '@cdc/core/types/Column'
+import { type Series } from '@cdc/core/types/Series'
+import { Runtime } from '@cdc/core/types/Runtime'
+import { FilterBehavior } from '@cdc/core/types/FilterBehavior'
+import { Table } from '@cdc/core/types/Table'
 
-export type ChartColumns = {
-  [key: string]: {
-    label: string
-    dataTable: boolean
-    tooltips: boolean
-    prefix: string
-    suffix: string
-    forestPlot: boolean
-    startingPoint: string
-    forestPlotAlignRight: boolean
-    name?: string
-  }
+export type ChartColumns = Record<string, Column>
+
+type Region = {
+  from: string
+  to: string
+  label: string
+  color: string
+  background: string
+  range: 'Custom' | string
 }
 
-type Series = {
-  dataKey: string
-  axis: string
+type BoxPlot = {
+  firstQuartilePercentage: number
+  [key: string]: any
+}
+
+type DataFormat = {
+  abbreviated: boolean
+  bottomAbbreviated: boolean
+  bottomCommas: boolean
+  bottomPrefix: string
+  bottomRoundTo: number
+  bottomSuffix: string
+  commas: boolean
+  prefix: string
+  rightCommas: boolean
+  rightPrefix: string
+  rightRoundTo: number
+  rightSuffix: string
+  roundTo: number
+  suffix: string
+}
+
+type Exclusions = {
+  keys: string[]
+  active: boolean
+  dateStart: string
+  dateEnd: string
+}
+
+type Filter = {
+  type: 'url'
+  columnName: string
+  showDropdown: boolean
+  filterStyle: string
+  label: string
+  order: 'asc' | 'desc' | 'cust'
+  values: string[]
+}
+
+export type Legend = {
+  additionalCategories: string[]
+  // general legend onClick behavior
+  behavior: 'highlight' | 'isolate' | string
+  colorCode: string
+  description: string
+  // show or hide the legend
+  hide: boolean
+  highlightOnHover: boolean
+  label: string
+  lineMode: boolean
+  position: string
+  reverseLabelOrder: boolean
+  singleRow: boolean
+  type: string
+  verticalSorted: boolean
+}
+
+type Visual = {
+  border?: boolean
+  borderColorTheme?: boolean
+  accent?: boolean
+  background?: boolean
+  hideBackgroundColor?: boolean
+  verticalHoverLine?: boolean
+  horizontalHoverLine?: boolean
 }
 
 type AllChartsConfig = {
+  animate: boolean
+  general: {
+    boxplot: BoxPlot
+  }
+  barHasBorder: 'true' | 'false'
+  barHeight: number
+  barSpace: number
+  barStyle: string
+  barThickness: number
+  boxplot: BoxPlot
+  brush: {
+    active: boolean
+    height: number
+  }
+  chartMessage: { noData?: string }
+  colorMatchLineSeriesLabels: boolean
   columns: ChartColumns
+  confidenceKeys: Record<string, any>
+  data: Object[]
+  dataCutoff: number
+  dataFormat: DataFormat
+  dataKey: string
+  description: string
+  dynamicMarginTop: number
+  exclusions: Exclusions
+  filters: Filter[]
+  filterBehavior: FilterBehavior
+  fontSize: 'small' | 'medium' | 'large'
+  footnotes: string
   forestPlot: ForestPlotConfigSettings
-  isLollipopChart: boolean
-  legend: {
-    behavior: 'highlight' | unknown
+  heights: {
+    vertical: number
   }
+  highlightedBarValues: { value: any; color: string; borderWidth: number; legendLabel: string }[]
+  introText: string
+  isLollipopChart: boolean
+  isLegendValue: boolean
+  isResponsiveTicks: boolean
+  isPaletteReversed: boolean
+  labels: boolean
+  legend: Legend
+  lineDatapointColor: 'Same as Line' | 'Lighter than Line'
+  lineDatapointStyle: 'hidden' | 'always show' | 'hover'
+  lollipopColorStyle: 'regular' | 'two-tone'
+  lollipopShape: string
+  lollipopSize: 'small' | 'medium' | 'large'
+  newViz: Object
   orientation: 'vertical' | 'horizontal'
-  runtime: {}
-  series: Series[]
+  palette: string
+  pieType?: string
+  roundingStyle: string
+  runtime: Runtime
+  series: Series
+  showLineSeriesLabels: boolean
+  showTitle: boolean
+  stackedAreaChartLineType: string
+  suppressedData?: { label: string; icon: string; value: string }[]
+  superTitle: string
+  theme: string
+  table: Table
+  tipRounding: string
+  title: string
+  tooltips: {
+    singleSeries: boolean
+    opacity: number
+  }
+  topAxis: { hasLine: boolean }
+  twoColor: { palette: string }
+  type: string
   useLogScale: boolean
-  visualizationType: 'Area Chart' | 'Bar' | 'Deviation Bar' | 'Forest Plot' | 'Paired Bar' | 'Scatter Plot' | 'Spark Line'
+  visual: Visual
+  visualizationType: 'Area Chart' | 'Bar' | 'Box Plot' | 'Deviation Bar' | 'Forest Plot' | 'Line' | 'Paired Bar' | 'Pie' | 'Scatter Plot' | 'Spark Line' | 'Combo' | 'Forecasting'
+  visualizationSubType: string
+  xAxis: Axis
+  yAxis: Axis
   xScale: Function
   yScale: Function
+  regions: Region[]
 }
 
+export type ForestPlotConfig = {
+  visualizationType: 'Forest Plot'
+  forestPlot: ForestPlotConfigSettings
+} & AllChartsConfig
+
 export type LineChartConfig = {
   visualizationType: 'Line'
   lineDatapointStyle: 'hidden' | 'always show' | 'hover'
-} & AllCharts
+} & AllChartsConfig
 
-export type ChartConfig = LineChartConfig | AllChartsConfig
+export type ChartConfig = LineChartConfig | ForestPlotConfig | AllChartsConfig

package/src/types/ChartContext.ts

@@ -1,38 +1,54 @@
 import { type ChartConfig } from './ChartConfig'
+import { PickD3Scale } from '@visx/scale'
 
-// Line Chart Specific Context
-type LineChartContext = {
-  colorScale: Function
+type ColorScale = PickD3Scale<'ordinal', any, any>
+
+type TransformedData = {
+  dataKey?: string
+  [key: string]: any
+}
+
+type SharedChartContext = {
+  colorScale?: ColorScale
   config: ChartConfig
+  currentViewport?: string
+  highlight?: Function
+  highlightReset?: Function
+}
+
+// Line Chart Specific Context
+type LineChartContext = SharedChartContext & {
   dimensions: [screenWidth: number, screenHeight: number]
   formatDate: Function
   formatNumber: Function
   handleLineType: Function
   isNumber: unknown
+  isDebug?: boolean
   parseDate: Function
   rawData: Object[]
   seriesHighlight: String[]
   tableData: Object[]
-  transformedData: Object[]
+  transformedData: TransformedData[]
   updateConfig: Function
   visualizationType: 'Line'
 }
 
 export type ChartContext =
   | LineChartContext
-  | {
-      colorScale?: Function
-      config?: ChartConfig
+  | (SharedChartContext & {
       dimensions: [screenWidth: number, screenHeight: number]
-
       formatDate?: Function
       formatNumber?: Function
       handleLineType?: Function
       isNumber?: boolean
+      // url param added to allow various console logs and chart helpers
+      isDebug?: boolean
       parseDate?: Function
       rawData?: Object[]
       seriesHighlight?: String[]
       tableData?: Object[]
-      transformedData?: Object[]
+      transformedData?: TransformedData[]
+      setSharedFilter?: Function
+      sharedFilterValue?: string
       updateConfig?: Function
-    }
+    })