@cdc/chart 4.23.11 → 4.24.2

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/useHighlightedBars.js

@@ -127,7 +127,7 @@ export const useHighlightedBars = (config, updateConfig) => {
    */
   HighLightedBarUtils.findDuplicates = arr => {
     const duplicates = {}
-    const result = arr.filter(obj => {
+    const result = arr?.filter(obj => {
       const { legendLabel } = obj
       if (!duplicates[legendLabel]) {
         duplicates[legendLabel] = true

package/src/hooks/useMinMax.ts

@@ -181,10 +181,10 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   if (config.yAxis.enablePadding) {
     if (min < 0) {
       // sets with negative data need more padding on the max
-      max *= 1.2
-      min *= 1.2
+      max *= 1 + (config.yAxis.scalePadding * 2) / 100
+      min *= 1 + (config.yAxis.scalePadding * 2) / 100
     } else {
-      max *= 1.1
+      max *= 1 + config.yAxis.scalePadding / 100
     }
   }
 

package/src/hooks/useScales.ts

@@ -56,21 +56,25 @@ const useScales = (properties: useScaleProps) => {
 
   // handle  Vertical bars
   if (!isHorizontal) {
-    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], 0.5)
-    xScale = composeScalePoint(xAxisDataMapped, [0, xMax], 0.5)
-    xScale.type = scaleTypes.POINT
+    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], .5)
+    xScale = composeScaleBand(xAxisDataMapped, [0, xMax], 1 - config.barThickness)
     yScale = composeYScale(properties)
-    seriesScale = composeScalePoint(seriesDomain, [0, xMax])
+    seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 
   // handle Area chart
   if (config.xAxis.type === 'date' && config.xAxis.sortDates) {
+    let xAxisMin = Math.min(...xAxisDataMapped)
+    let xAxisMax = Math.max(...xAxisDataMapped)
+    xAxisMin -= (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
+    xAxisMax += (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
     xScale = scaleTime({
-      domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
+      domain: [xAxisMin, xAxisMax],
       range: [0, xMax]
     })
     xScaleBrush = xScale
     xScale.type = scaleTypes.LINEAR
+    seriesScale = composeScaleBand(seriesDomain, [0, config.barThickness * (xMax)], 0)
   }
 
   // handle Deviation bar
@@ -190,7 +194,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
       }
@@ -284,3 +288,12 @@ const composeScalePoint = (domain, range, padding = 0) => {
     type: 'point'
   })
 }
+
+const composeScaleBand = (domain, range, padding = 0) => {
+  return scaleBand({
+    domain: domain,
+    range: range,
+    padding: padding,
+    type: 'band'
+  })
+}

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,7 +11,7 @@ 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, formatTooltipsDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
   const { xScale, yScale, showTooltip, hideTooltip } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
   const data = transform.applySuppression(tableData, config.suppressedData)
@@ -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,21 +215,24 @@ 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
     }
 
     if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
-      let eachBand = xScale.step()
+      let range = xScale.range()[1] - xScale.range()[0]
+      let eachBand = range / (xScale.domain().length + 1)
+
       let numerator = x
-      const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
+      const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
+      return xScale.domain()[index] // fixes off by 1 error
     }
 
     if (config.xAxis.type === 'date' && visualizationType !== 'Combo' && orientation !== 'horizontal') {
@@ -250,7 +253,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 +277,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 +307,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 []
@@ -424,10 +428,12 @@ export const useTooltip = props => {
       if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.xAxis.dataKey ? `${config.xAxis.dataKey}: ` : '')} ${config.yAxis.type === 'date' ? formatDate(parseDate(key, false)) : value}`}</li>
       return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${formatNumber(value, 'left')}`}</li>
     }
+    const formattedDate = config.tooltips.dateDisplayFormat ? formatTooltipsDate(parseDate(value, false)) : formatDate(parseDate(value, false))
 
     // TOOLTIP HEADING
-    if (visualizationType === 'Bar' && orientation === 'horizontal' && key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : '')} ${value}`}</li>
-    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>
+    if (visualizationType === 'Bar' && orientation === 'horizontal' && key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
+
+    if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
 
     // TOOLTIP BODY
     return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${value}`}</li>

package/src/scss/main.scss

@@ -1,7 +1,5 @@
 @import '@cdc/core/styles/base';
 @import '@cdc/core/styles/heading-colors';
-@import 'mixins';
-@import 'variables';
 @import '@cdc/core/styles/v2/themes/color-definitions';
 
 .form-container {
@@ -17,7 +15,6 @@
 
 .cdc-open-viz-module.type-chart {
   @import 'DataTable';
-  @import 'editor-panel';
 
   border-radius: 3px;
 

package/src/types/ChartConfig.ts

@@ -1,43 +1,187 @@
+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'
+import { BoxPlot } from '@cdc/core/types/BoxPlot'
+import { General } from '@cdc/core/types/General'
 
-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
+  fromType: 'Previous Days' | 'Fixed Date'
+  toType: 'Last Date' | 'Fised Date'
+  label: string
+  color: string
+  background: string
+  range: 'Custom' | string
 }
 
-type Series = {
-  dataKey: string
-  axis: string
+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 = {
+  active: string
+  type: 'url'
+  columnName: string
+  showDropdown: boolean
+  filterStyle: string
+  label: string
+  order: 'asc' | 'desc' | 'cust'
+  values: string[]
+  queryParameter: 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: General
+  barHasBorder: 'true' | 'false'
+  barHeight: number
+  barSpace: number
+  barStyle: string
+  barThickness: number
+  boxplot: BoxPlot
+  brush: {
+    active: boolean
+    height: number
+  }
+  chartMessage: { noData?: string }
+  color: string
+  colorMatchLineSeriesLabels: boolean
   columns: ChartColumns
+  confidenceKeys: Record<string, any>
+  customColors: string[]
+  data: Object[]
+  dataUrl: string
+  dataCutoff: number
+  dataDescription: string
+  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
+  formattedData: Object[] & { urlFiltered: boolean }
+  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
+  primary?: DataFormat
+  roundingStyle: string
+  runtime: Runtime
+  runtimeDataUrl: string
+  series: Series
+  showLineSeriesLabels: boolean
+  showSidebar: boolean
+  showTitle: boolean
+  sortData: 'ascending' | 'descending'
+  stackedAreaChartLineType: string
+  suppressedData?: { label: string; icon: string; value: string }[]
+  superTitle: string
+  theme: string
+  table: Table
+  tipRounding: string
+  title: string
+  tooltips: {
+    singleSeries: boolean
+    opacity: number
+    dateDisplayFormat: string
+  }
+  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,60 @@
 import { type ChartConfig } from './ChartConfig'
+import { PickD3Scale } from '@visx/scale'
 
-// Line Chart Specific Context
-type LineChartContext = {
-  colorScale: Function
+export type ColorScale = PickD3Scale<'ordinal', any, any>
+
+export 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
+  formatTooltipsDate: Function
   formatNumber: Function
   handleLineType: Function
   isNumber: unknown
+  isDebug?: boolean
   parseDate: Function
   rawData: Object[]
-  seriesHighlight: String[]
+  seriesHighlight: string[]
   tableData: Object[]
-  transformedData: Object[]
+  transformedData: TransformedData[]
   updateConfig: Function
   visualizationType: 'Line'
+  colorPalettes: Record<string, string[]>
+  twoColorPalette: Record<string, string[]>
 }
 
 export type ChartContext =
   | LineChartContext
-  | {
-      colorScale?: Function
-      config?: ChartConfig
+  | (SharedChartContext & {
       dimensions: [screenWidth: number, screenHeight: number]
-
       formatDate?: Function
+      formatTooltipsDate: 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[]
+      seriesHighlight?: string[]
       tableData?: Object[]
-      transformedData?: Object[]
+      transformedData?: TransformedData[]
+      setSharedFilter?: Function
+      sharedFilterValue?: string
       updateConfig?: Function
-    }
+      colorPalettes: any
+      twoColorPalette: any
+    })

package/src/types/ForestPlot.ts

@@ -2,8 +2,10 @@ import { type Color } from '@cdc/core/types/Color'
 
 export type ForestPlotConfigSettings = {
   colors: {
-    line: Color // color of line of effect
-    shape: Color // color for effect estimate shape
+    // color of line of no effect
+    line: Color
+    // color for effect estimate shape
+    shape: Color
   }
   // description - appears below the study column.
   description: {
@@ -11,8 +13,9 @@ export type ForestPlotConfigSettings = {
     text: string
     location: number
   }
-  // effect estimates
-  estimateField: string // column chose for the effect estimate
+  // column chose for the effect estimate
+  estimateField: string
+  // column chose for the esimate radius
   estimateRadius: string
   hideDateCategoryCol: boolean
   leftWidthOffset: number
@@ -33,15 +36,8 @@ export type ForestPlotConfigSettings = {
   radius: {
     min: number
     max: number
-    /** @deprecated - moved to estimateField due to duplication */
     scalingColumn: string
   }
-  /** @deprecated - moved to pooledResult */
-  regression: {
-    lower: number
-    upper: number
-    estimateField: number
-  }
   result: {
     show: boolean
     text: string
@@ -51,9 +47,6 @@ export type ForestPlotConfigSettings = {
   shape: string
   startAt: number
   title: string // centered title above the chart
-
-  /** @deprecated - moved to lineOfNoEffect*/
-  showZeroLine: boolean
   // labels under chart
   leftLabel: string
   rightLabel: string

package/src/types/Label.ts

@@ -0,0 +1,7 @@
+export type Label = {
+  datum: string
+  index: number
+  text: string
+  value: string
+  icon?: any
+}

package/examples/feature/scatterplot/scatterplot-continuous.csv

@@ -1,17 +0,0 @@
-x,y1,y2,y3,y4
-1000,8,37,72,82
-2000,2,30,75,83
-3000,15,42,51,95
-4,10,38,61,96
-5,1,38,66,86
-60,6,37,70,85
-10,19,47,59,91
-24,18,32,68,89
-3,7,38,74,89
-26,10,39,56,91
-42,16,38,55,76
-32,20,46,52,94
-11,9,41,57,86
-22,10,47,56,80
-73,1,36,71,94
-23,13,30,66,78