@cdc/chart 4.23.10 → 4.24.1

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

@@ -1,18 +1,20 @@
 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'
 import { bisector } from 'd3-array'
+import { DataTransform } from '@cdc/core/helpers/DataTransform'
+const transform = new DataTransform()
 
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 
 export const useTooltip = props => {
-  const { tableData: data, config, formatNumber, capitalize, formatDate, parseDate } = 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
    * @function getTooltipInformation
@@ -51,13 +53,12 @@ export const useTooltip = props => {
     const { x, y } = eventSvgCoords
 
     // Additional data for pie charts
-    const { data: pieChartData, arc } = additionalChartData
+    const { data: pieChartData, arc } = additionalChartData ?? {}
 
     const closestXScaleValue = getXValueFromCoordinate(x - Number(config.yAxis.size || 0))
 
     const includedSeries = visualizationType !== 'Pie' ? config.series.filter(series => series.tooltip === true).map(item => item.dataKey) : config.series.map(item => item.dataKey)
     includedSeries.push(config.xAxis.dataKey)
-
     if (config.visualizationType === 'Forecasting') {
       config.series.map(s => {
         s.confidenceIntervals.map(c => {
@@ -68,15 +69,23 @@ export const useTooltip = props => {
         })
       })
     }
+    function getColumnNames(columns) {
+      let names = []
+      for (let key in columns) {
+        if (columns.hasOwnProperty(key)) {
+          names.push(columns[key].name)
+        }
+      }
+      return names
+    }
+    includedSeries.push(...getColumnNames(config.columns))
+    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'
@@ -84,49 +93,62 @@ export const useTooltip = props => {
     }
 
     const getTooltipDataArray = () => {
-      if (visualizationType === 'Forest Plot') {
-        const columns = config.columns
-        const columnsWithTooltips = []
-
-        for (const [colKeys, colVals] of Object.entries(columns)) {
-          const formattingParams = {
-            addColPrefix: config.columns[colKeys].prefix,
-            addColSuffix: config.columns[colKeys].suffix,
-            addColRoundTo: config.columns[colKeys].roundToPlace ? config.columns[colKeys].roundToPlace : '',
-            addColCommas: config.columns[colKeys].commas
-          }
-
-          let closestValue = getClosestYValue(y, colVals.name)
-
-          const formattedValue = formatColNumber(closestValue, 'left', true, config, formattingParams)
+      const columns = config.columns
+      const columnsWithTooltips = []
+      const tooltipItems = []
+
+      for (const [colKeys, colVals] of Object.entries(columns)) {
+        const formattingParams = {
+          addColPrefix: config.columns[colKeys].prefix,
+          addColSuffix: config.columns[colKeys].suffix,
+          addColRoundTo: config.columns[colKeys].roundToPlace ? config.columns[colKeys].roundToPlace : '',
+          addColCommas: config.columns[colKeys].commas
+        }
+        let closestValue = null
 
-          if (colVals.tooltips) {
-            columnsWithTooltips.push([colVals.label, formattedValue])
-          }
+        if (config.visualizationType === 'Pie') {
+          closestValue = arc?.data[colVals.name]
+        } else {
+          closestValue = resolvedScaleValues[0]?.[colVals.name]
         }
 
-        const tooltipItems = []
-        tooltipItems.push([config.xAxis.dataKey, getClosestYValue(y)])
+        const formattedValue = formatColNumber(closestValue, 'left', true, config, formattingParams)
 
-        columnsWithTooltips.forEach(columnData => {
-          tooltipItems.push([columnData[0], columnData[1]])
-        })
-        return tooltipItems
+        if (colVals.tooltips) {
+          columnsWithTooltips.push([colVals.label, formattedValue])
+        }
       }
+      const additionalTooltipItems = []
+
+      columnsWithTooltips.forEach(columnData => {
+        additionalTooltipItems.push([columnData[0], columnData[1]])
+      })
 
       if (visualizationType === 'Pie') {
-        return [
+        tooltipItems.push(
+          // ignore
           [config.xAxis.dataKey, pieChartData],
           [config.runtime.yAxis.dataKey, formatNumber(arc?.data[config.runtime.yAxis.dataKey])],
           ['Percent', `${Math.round((((arc?.endAngle - arc?.startAngle) * 180) / Math.PI / 360) * 100) + '%'}`]
-        ]
+        )
       }
 
-      return getIncludedTooltipSeries()
-        .filter(Boolean)
-        .flatMap((seriesKey, index) => {
-          return resolvedScaleValues[0][seriesKey] ? [[seriesKey, resolvedScaleValues[0][seriesKey], getAxisPosition(seriesKey)]] : []
-        })
+      if (visualizationType === 'Forest Plot') {
+        tooltipItems.push([config.xAxis.dataKey, getClosestYValue(y)])
+      }
+
+      if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot') {
+        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, getAxisPosition(seriesKey)]] : []
+            })
+        )
+      }
+
+      return [...tooltipItems, ...additionalTooltipItems]
     }
 
     // Returns an array of arrays.
@@ -180,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
@@ -191,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
@@ -226,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]
@@ -251,11 +275,20 @@ 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)
+      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')
-      let datum = config.data.filter(item => item[config.xAxis.dataKey] === closestXScaleValue)
+      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}`)
+      }
 
-      if (setSharedFilter) {
+      if (setSharedFilter && config?.uid && datum?.[0]) {
         setSharedFilter(config.uid, datum[0])
       }
     } catch (e) {
@@ -272,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 []
@@ -328,7 +358,7 @@ export const useTooltip = props => {
       if (!config.dashboard) {
         switch (visualizationType) {
           case 'Combo':
-            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys, ...stageColumns, ...ciItems]
+            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys, ...ciItems]
             break
           case 'Forecasting':
             standardLoopItems = [runtime.xAxis.dataKey, ...stageColumns, ...ciItems]
@@ -346,7 +376,6 @@ export const useTooltip = props => {
             standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
           default:
             throw new Error('No visualization type found in handleTooltipMouseOver')
-            break
         }
       }
 
@@ -403,7 +432,7 @@ export const useTooltip = props => {
     if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? value : value}`}</li>
 
     // TOOLTIP BODY
-    return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${formatNumber(value, axisPosition)}`}</li>
+    return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${value}`}</li>
   }
 
   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;
 
@@ -74,34 +138,6 @@
     }
   }
 
-  .chart-title {
-    position: relative;
-    padding: 0.6em 0.8em;
-    margin: 0;
-    color: #fff;
-    font-size: 1.1em;
-    border-bottom-width: 3px;
-    border-bottom-style: solid;
-
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-
-    em {
-      font-style: italic;
-    }
-
-    strong {
-      font-weight: bold;
-    }
-
-    &:not(:empty) {
-      margin: 0 0 1rem 0 !important;
-      padding: 0.6em 0.8em;
-      border-bottom-width: 3px;
-      border-bottom-style: solid;
-    }
-  }
-
   .chart-description {
     margin-bottom: 20px;
   }
@@ -560,14 +596,14 @@
 
     &.animated {
       .vertical rect,
-      .vertical foreignObject {
+      .vertical foreignObject div {
         opacity: 0;
         animation: growBar 0.5s linear forwards;
         animation-play-state: paused;
       }
 
       .horizontal rect,
-      .horizontal foreignObject {
+      .horizontal foreignObject div {
         opacity: 0;
         animation: growBarH 0.5s linear forwards;
         animation-play-state: paused;
@@ -575,7 +611,7 @@
 
       &.animate {
         rect,
-        foreignObject {
+        foreignObject div {
           animation-play-state: running;
         }
       }
@@ -674,10 +710,6 @@
     background: transparent;
   }
 
-  .chart-title:not(:empty) {
-    margin-bottom: 0 !important;
-  }
-
   .cove-component__content .chart-container {
     padding: 1em;
   }

package/src/types/ChartConfig.ts

@@ -0,0 +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 = Record<string, Column>
+
+type Region = {
+  from: string
+  to: string
+  label: string
+  color: string
+  background: string
+  range: 'Custom' | 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
+  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'
+  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
+  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'
+} & AllChartsConfig
+
+export type ChartConfig = LineChartConfig | ForestPlotConfig | AllChartsConfig

package/src/types/ChartContext.ts

@@ -0,0 +1,54 @@
+import { type ChartConfig } from './ChartConfig'
+import { PickD3Scale } from '@visx/scale'
+
+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: TransformedData[]
+  updateConfig: Function
+  visualizationType: 'Line'
+}
+
+export type ChartContext =
+  | LineChartContext
+  | (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?: TransformedData[]
+      setSharedFilter?: Function
+      sharedFilterValue?: string
+      updateConfig?: Function
+    })

package/src/types/ForestPlot.ts

@@ -0,0 +1,53 @@
+import { type Color } from '@cdc/core/types/Color'
+
+export type ForestPlotConfigSettings = {
+  colors: {
+    // color of line of no effect
+    line: Color
+    // color for effect estimate shape
+    shape: Color
+  }
+  // description - appears below the study column.
+  description: {
+    show: boolean
+    text: string
+    location: number
+  }
+  // column chose for the effect estimate
+  estimateField: string
+  // column chose for the esimate radius
+  estimateRadius: string
+  hideDateCategoryCol: boolean
+  leftWidthOffset: number
+  lineOfNoEffect: {
+    show: boolean
+  }
+  lower: string
+  upper: string
+  // type - determines the type of scale we're using, including the position of line of effect (0 or 1)
+  type: 'Linear' | 'Logarithmic'
+  pooledResult: {
+    diamondHeight: number
+    column: string
+  }
+  // rowHeight - height of study
+  rowHeight: number
+  // radius - scaling for effect estimates
+  radius: {
+    min: number
+    max: number
+    scalingColumn: string
+  }
+  result: {
+    show: boolean
+    text: string
+    location: number
+  }
+  rightWidthOffset: number
+  shape: string
+  startAt: number
+  title: string // centered title above the chart
+  // labels under chart
+  leftLabel: string
+  rightLabel: string
+}