@cdc/chart 4.24.2 → 4.24.4

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

@@ -1,28 +1,29 @@
 import React, { useContext } from 'react'
-
 import * as allCurves from '@visx/curve'
 import { Group } from '@visx/group'
 import { LinePath } from '@visx/shape'
 import { Text } from '@visx/text'
 import { scaleLinear, scalePoint } from '@visx/scale'
 import { AxisBottom } from '@visx/axis'
-
 import { MarkerArrow } from '@visx/marker'
-
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import useReduceData from '../../../hooks/useReduceData'
+import ConfigContext from '../../../ConfigContext'
+import './../index.scss'
 
-import useReduceData from '../../hooks/useReduceData'
-
-import ConfigContext from '../../ConfigContext'
+type SparkLineProps = {
+  width: string | number
+  height: string | number
+}
 
-const SparkLine = props => {
+const SparkLine: React.FC<SparkLineProps> = props => {
   const { width: parentWidth, height: parentHeight } = props
   const { transformedData: data, config, parseDate, formatDate, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(ConfigContext)
-  let width = parentWidth
+  let width = Number(parentWidth)
   const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
 
   const margin = { top: 5, right: 10, bottom: 10, left: 10 }
-  const height = parentHeight
+  const height = Number(parentHeight)
 
   const xMax = width - config.runtime.yAxis.size
   const yMax = height - margin.top - 20
@@ -38,8 +39,8 @@ const SparkLine = props => {
   const isMinValid = Number(enteredMinValue) <= Number(minValue)
 
   if (data) {
-    let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
-    let max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
+    let min = enteredMinValue && isMinValid ? Number(enteredMinValue) : Number(minValue)
+    let max = enteredMaxValue && isMaxValid ? Number(enteredMaxValue) : Number(Number.MIN_VALUE)
 
     if (max === Number.MIN_VALUE) {
       max = maxValue
@@ -94,6 +95,7 @@ const SparkLine = props => {
   return (
     <ErrorBoundary component='SparkLine'>
       <svg role='img' aria-label={handleChartAriaLabels(config)} width={parentWidth} height={100} className={'sparkline'} tabIndex={0}>
+        <title>{`Spark line graphic with the title ${config.title ? config.title : 'No Title Found'}`}</title>
         {config.runtime.lineSeriesKeys?.length > 0
           ? config.runtime.lineSeriesKeys
           : config.runtime.seriesKeys.map((seriesKey, index) => (
@@ -106,15 +108,6 @@ const SparkLine = props => {
                   display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
                 >
                   {data.map((d, dataIndex) => {
-                    let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
-                    let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${d[config.runtime.xAxis.dataKey]}` : d[config.runtime.xAxis.dataKey]
-
-                    const tooltip = `<div>
-									${yAxisTooltip}<br />
-									${xAxisTooltip}<br />
-									${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''}
-									</div>`
-
                     return (
                       <Group key={`series-${seriesKey}-point-${dataIndex}`}>
                         <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
@@ -134,16 +127,7 @@ const SparkLine = props => {
                     shapeRendering='geometricPrecision'
                     markerEnd={`url(#${'arrow'}--${index})`}
                   />
-                  <MarkerArrow
-                    id={`arrow--${index}`}
-                    refX={2}
-                    size={6}
-                    markerEnd={`url(#${'arrow'}--${index})`}
-                    strokeOpacity={1}
-                    fillOpacity={1}
-                    // stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                    fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                  />
+                  <MarkerArrow id={`arrow--${index}`} refX={2} size={6} markerEnd={`url(#${'arrow'}--${index})`} strokeOpacity={1} fillOpacity={1} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} />
                 </Group>
                 <AxisBottom
                   top={yMax + margin.top}

package/src/components/Sparkline/index.scss

@@ -0,0 +1,3 @@
+.cdc-open-viz-module.type-chart.lg.type-sparkline .filters-section {
+  margin: 0;
+}

package/src/components/Sparkline/index.tsx

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

package/src/components/ZoomBrush.tsx

@@ -5,6 +5,7 @@ import { useBarChart } from '../hooks/useBarChart'
 import { FC, useContext, useEffect, useRef, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { ScaleLinear, ScaleBand } from 'd3-scale'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 interface Props {
   xScaleBrush: ScaleLinear<number, number>
@@ -55,7 +56,7 @@ const ZoomBrush: FC<Props> = props => {
       .find(item => item !== undefined)
     const startValue = xValues.find(item => item !== undefined)
 
-    const formatIfDate = value => (config.runtime.xAxis.type === 'date' ? formatDate(parseDate(value)) : value)
+    const formatIfDate = value => (isDateScale(config.runtime.xAxis) ? formatDate(parseDate(value)) : value)
 
     setTextProps(prev => ({
       ...prev,

package/src/data/initial-state.js

@@ -116,7 +116,7 @@ export default {
     tickColor: '#333',
     numTicks: '',
     labelOffset: 65,
-    axisPadding: 0,
+    axisPadding: 200,
     target: 0,
     maxTickRotation: 0
   },
@@ -141,6 +141,7 @@ export default {
   legend: {
     hide: false,
     behavior: 'isolate',
+    axisAlign: true,
     singleRow: true,
     colorCode: '',
     reverseLabelOrder: false,
@@ -152,7 +153,8 @@ export default {
     dynamicLegendChartMessage: 'Select Options from the Legend',
     lineMode: false,
     verticalSorted: false,
-    highlightOnHover: false
+    highlightOnHover: false,
+    seriesHighlight: []
   },
   brush: {
     height: 25,
@@ -242,5 +244,47 @@ export default {
   },
   area: {
     isStacked: false
+  },
+  sankey: {
+    title: {
+      defaultColor: 'black'
+    },
+    iterations: 1,
+    rxValue: 0.9,
+    overallSize: {
+      width: 900,
+      height: 700
+    },
+    margin: {
+      margin_y: 25,
+      margin_x: 0
+    },
+    nodeSize: {
+      nodeWidth: 26,
+      nodeHeight: 40
+    },
+    nodePadding: 55,
+    nodeFontColor: 'black',
+    nodeColor: {
+      default: '#ff8500',
+      inactive: '#808080'
+    },
+    linkColor: {
+      default: '#ffc900',
+      inactive: '#D3D3D3'
+    },
+    opacity: {
+      nodeOpacityDefault: 1.0,
+      nodeOpacityInactive: 0.1,
+      LinkOpacityDefault: 1.0,
+      LinkOpacityInactive: 0.1
+    },
+    storyNodeFontColor: '#006778',
+    storyNodeText: [],
+    nodeValueStyle: {
+      textBefore: '(',
+      textAfter: ')'
+    },
+    data: []
   }
 }

package/src/helpers/computeMarginBottom.ts

@@ -1,4 +1,5 @@
-import { ChartConfig, Legend } from '../types/ChartConfig'
+import { ChartConfig } from '../types/ChartConfig'
+import { Legend } from '@cdc/core/types/Legend'
 
 export const computeMarginBottom = (config: ChartConfig, legend: Legend, currentViewport: string): string | number => {
   const isLegendBottom = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)

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

@@ -1,4 +1,5 @@
-import { ChartConfig, Legend } from '../../types/ChartConfig'
+import { ChartConfig } from '../../types/ChartConfig'
+import { Legend } from '@cdc/core/types/Legend'
 import { computeMarginBottom } from '../computeMarginBottom'
 
 describe('computeMarginBottom', () => {

package/src/hooks/useBarChart.js

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 export const useBarChart = () => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight } = useContext(ConfigContext)
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } = useContext(ConfigContext)
   const { orientation } = config
   const [hoveredBar, setHoveredBar] = useState(null)
 
@@ -21,6 +21,8 @@ export const useBarChart = () => {
   const stackCount = config.runtime.seriesKeys.length
   const fontSize = { small: 16, medium: 18, large: 20 }
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
+  const isBarAndLegendIsolate = config.visualizationType === 'Bar' && config.legend.behavior === 'isolate' && config.legend.axisAlign
+  const barStackedSeriesKeys = isBarAndLegendIsolate && seriesHighlight?.length ? seriesHighlight : config.runtime.barSeriesKeys || config.runtime.seriesKeys
 
   useEffect(() => {
     if (orientation === 'horizontal' && !config.yAxis.labelPlacement) {
@@ -194,7 +196,7 @@ export const useBarChart = () => {
         return d[config.xAxis.dataKey] === xAxisDataValue
       }) || {}
     Object.keys(columns).forEach(colKeys => {
-      if(series && config.columns[colKeys].series && config.columns[colKeys].series !== series) return
+      if (series && config.columns[colKeys].series && config.columns[colKeys].series !== series) return
       const formattingParams = {
         addColPrefix: config.columns[colKeys].prefix,
         addColSuffix: config.columns[colKeys].suffix,
@@ -235,6 +237,7 @@ export const useBarChart = () => {
     tipRounding,
     radius,
     stackCount,
+    barStackedSeriesKeys,
     fontSize,
     hasMultipleSeries,
     applyRadius,

package/src/hooks/useScales.ts

@@ -4,6 +4,14 @@ import ConfigContext from '../ConfigContext'
 import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
 
+const scaleTypes = {
+  TIME: 'time',
+  LOG: 'log',
+  POINT: 'point',
+  LINEAR: 'linear',
+  BAND: 'band'
+}
+
 type useScaleProps = {
   config: ChartConfig // standard chart config
   data: Object[] // standard data array
@@ -37,14 +45,6 @@ const useScales = (properties: useScaleProps) => {
   let xScaleNoPadding = null
   let xScaleBrush = null
 
-  const scaleTypes = {
-    TIME: 'time',
-    LOG: 'log',
-    POINT: 'point',
-    LINEAR: 'linear',
-    BAND: 'band'
-  }
-
   // handle  Horizontal bars
   if (isHorizontal) {
     xScale = composeXScale({ min: min * 1.03, ...properties })
@@ -56,14 +56,14 @@ const useScales = (properties: useScaleProps) => {
 
   // handle  Vertical bars
   if (!isHorizontal) {
-    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], .5)
+    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], 0.5)
     xScale = composeScaleBand(xAxisDataMapped, [0, xMax], 1 - config.barThickness)
     yScale = composeYScale(properties)
     seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 
   // handle Area chart
-  if (config.xAxis.type === 'date' && config.xAxis.sortDates) {
+  if (config.xAxis.type === 'date-time') {
     let xAxisMin = Math.min(...xAxisDataMapped)
     let xAxisMax = Math.max(...xAxisDataMapped)
     xAxisMin -= (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
@@ -73,8 +73,8 @@ const useScales = (properties: useScaleProps) => {
       range: [0, xMax]
     })
     xScaleBrush = xScale
-    xScale.type = scaleTypes.LINEAR
-    seriesScale = composeScaleBand(seriesDomain, [0, config.barThickness * (xMax)], 0)
+    xScale.type = scaleTypes.TIME
+    seriesScale = composeScaleBand(seriesDomain, [0, config.barThickness * xMax], 0)
   }
 
   // handle Deviation bar
@@ -238,6 +238,38 @@ const useScales = (properties: useScaleProps) => {
 
 export default useScales
 
+export const getTickValues = (xAxisDataMapped, xScale, num) => {
+  const xDomain = xScale.domain();
+
+  if(xScale.type === 'time'){
+    const xDomainMax = xAxisDataMapped[xAxisDataMapped.length - 1];
+    const xDomainMin = xAxisDataMapped[0];
+    const step = (xDomainMax - xDomainMin) / (num - 1);
+    const tickValues = [];
+    for(let i = xDomainMax; i >= xDomainMin; i -= step){
+      tickValues.push(i);
+    }
+    if(tickValues[tickValues.length - 1] !== xDomainMin){
+      tickValues.push(xDomainMin);
+    }
+    tickValues.reverse();
+    
+    return tickValues;
+  }
+
+  if(xDomain.length > 2){
+    const step = num || 1;
+    const tickValues = [];
+    for(let i = xDomain.length; i > 0; i -= step){
+      const adjustedIndex = Math.max(Math.round(i) - 1, 0);
+      tickValues.push(xDomain[adjustedIndex]);
+    }
+    tickValues.reverse();
+
+    return tickValues;
+  }
+}
+
 /// helper functions
 const composeXScale = ({ min, max, xMax, config }) => {
   // Adjust min value if using logarithmic scale
@@ -249,8 +281,7 @@ const composeXScale = ({ min, max, xMax, config }) => {
     domain: [min, max],
     range: [0, xMax],
     nice: config.useLogScale,
-    zero: config.useLogScale,
-    type: config.useLogScale ? 'log' : 'linear'
+    zero: config.useLogScale
   })
 }
 
@@ -284,8 +315,7 @@ const composeScalePoint = (domain, range, padding = 0) => {
   return scalePoint({
     domain: domain,
     range: range,
-    padding: padding,
-    type: 'point'
+    padding: padding
   })
 }
 
@@ -293,7 +323,6 @@ const composeScaleBand = (domain, range, padding = 0) => {
   return scaleBand({
     domain: domain,
     range: range,
-    padding: padding,
-    type: 'band'
+    padding: padding
   })
 }

package/src/hooks/useTooltip.tsx

@@ -9,6 +9,7 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
 const transform = new DataTransform()
 
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 export const useTooltip = props => {
   const { tableData, config, formatNumber, capitalize, formatDate, formatTooltipsDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
@@ -188,7 +189,7 @@ export const useTooltip = props => {
       return xScale.domain()[index - 1] // fixes off by 1 error
     }
 
-    if (config.xAxis.type === 'date' && config.visualizationType !== 'Combo') {
+    if (isDateScale(config.xAxis) && config.visualizationType !== 'Combo') {
       const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
       const x0 = xScale.invert(xScale(x))
       const index = bisectDate(config.data, x0, 1)
@@ -207,20 +208,20 @@ export const useTooltip = props => {
     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') {
+    if (xScale.type === 'point' || xAxis.type === 'continuous' || isDateScale(xAxis)) {
       // Find the closest x value by calculating the minimum distance
       let closestX = null
       let minDistance = Number.MAX_VALUE
       let offset = x
 
       data.forEach(d => {
-        const xPosition = xAxis.type === 'date' ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
+        const xPosition = isDateScale(xAxis) ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
         let bwOffset = config.barHeight
         const distance = Math.abs(Number(xPosition - offset + (isClick ? bwOffset * 2 : 0)))
 
         if (distance <= minDistance) {
           minDistance = distance
-          closestX = xAxis.type === 'date' ? d[xAxis.dataKey] : d[xAxis.dataKey]
+          closestX = isDateScale(xAxis) ? d[xAxis.dataKey] : d[xAxis.dataKey]
         }
       })
       return closestX
@@ -235,7 +236,7 @@ export const useTooltip = props => {
       return xScale.domain()[index] // fixes off by 1 error
     }
 
-    if (config.xAxis.type === 'date' && visualizationType !== 'Combo' && orientation !== 'horizontal') {
+    if (isDateScale(xAxis) && visualizationType !== 'Combo' && orientation !== 'horizontal') {
       const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
       const x0 = xScale.invert(x)
       const index = bisectDate(config.data, x0, 1)
@@ -280,7 +281,7 @@ export const useTooltip = props => {
       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) {
+      if (isDateScale(xAxis) && closestXScaleValue) {
         closestXScaleValue = new Date(closestXScaleValue)
         closestXScaleValue = formatDate(closestXScaleValue)
         datum = config.data?.filter(item => formatDate(new Date(item[config.xAxis.dataKey])) === closestXScaleValue)
@@ -425,7 +426,7 @@ export const useTooltip = props => {
     const [key, value, axisPosition] = additionalData
 
     if (visualizationType === 'Forest Plot') {
-      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>
+      if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.xAxis.dataKey ? `${config.xAxis.dataKey}: ` : '')} ${isDateScale(yAxis) ? 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))
@@ -433,7 +434,7 @@ export const useTooltip = props => {
     // 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}: ` : '')} ${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>
+    if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${isDateScale(xAxis) ? formattedDate : value}`}</li>
 
     // TOOLTIP BODY
     return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${value}`}</li>

package/src/scss/main.scss

@@ -120,30 +120,6 @@
       }
     }
 
-    .legend-reset {
-      font-size: 0.7em;
-      color: rgba(0, 0, 0, 0.6);
-      position: absolute;
-      right: 1em;
-      background: rgba(0, 0, 0, 0.1);
-      text-transform: uppercase;
-      transition: 0.3s all;
-      padding: 0.375rem;
-      top: 1em;
-      border-radius: 3px;
-
-      &--dynamic {
-        position: relative;
-        float: right;
-        right: unset;
-      }
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.15);
-        transition: 0.3s all;
-      }
-    }
-
     .legend-item {
       text-align: left;
       align-items: flex-start !important;
@@ -154,6 +130,9 @@
         word-wrap: break-word;
         white-space: pre-wrap;
         word-break: break-word;
+        @include breakpoint(xs) {
+          font-size: $font-small;
+        }
       }
     }
 
@@ -167,13 +146,16 @@
       flex: 0 0 auto;
     }
 
-    h2 {
-      font-size: 1.3em;
+    h3 {
+      font-size: 1.3rem;
     }
 
-    h2,
+    h3,
     p {
       margin-bottom: 0.8em;
+      @include breakpoint(xs) {
+        font-size: $font-small + 0.2em;
+      }
     }
     & div.legend-item {
       margin-bottom: 0.5em !important;
@@ -216,6 +198,20 @@
     }
   }
 
+  .legend-preliminary {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    @include breakpoint(xs) {
+      font-size: $font-small;
+    }
+
+    & > svg {
+      width: 50px;
+      height: 23px;
+    }
+  }
+
   .visx-tooltip {
     z-index: 100000;
   }
@@ -528,21 +524,24 @@
     }
 
     &.animated {
+      .vertical path,
       .vertical rect,
       .vertical foreignObject div {
         opacity: 0;
-        animation: growBar 0.5s linear forwards;
+        animation: growBar 0.5s linear both;
         animation-play-state: paused;
       }
 
+      .horizontal path,
       .horizontal rect,
       .horizontal foreignObject div {
         opacity: 0;
-        animation: growBarH 0.5s linear forwards;
+        animation: growBarH 0.5s linear both;
         animation-play-state: paused;
       }
 
       &.animate {
+        path,
         rect,
         foreignObject div {
           animation-play-state: running;
@@ -620,6 +619,11 @@
   }
 }
 
+.cdc-open-viz-module .is-editor .cdc-chart-inner-container {
+  overflow: hidden;
+  background-color: var(--white);
+}
+
 .isEditor.type-sparkline .cdc-chart-inner-container {
   margin: 3em auto 0;
   max-width: 60%;

package/src/types/ChartConfig.ts

@@ -7,20 +7,14 @@ 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'
+import { type Link } from './../components/Sankey/types'
+import { Legend } from '@cdc/core/types/Legend'
+import { ConfidenceInterval } from '@cdc/core/types/ConfidenceInterval'
+import { Region } from '@cdc/core/types/Region'
+import { type PreliminaryDataItem } from '../components/LineChart/LineChartProps'
 
 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 DataFormat = {
   abbreviated: boolean
   bottomAbbreviated: boolean
@@ -58,9 +52,11 @@ type Filter = {
 }
 
 export type Legend = {
+  seriesHighlight: string[]
   additionalCategories: string[]
   // general legend onClick behavior
   behavior: 'highlight' | 'isolate' | string
+  axisAlign: boolean
   colorCode: string
   description: string
   // show or hide the legend
@@ -102,7 +98,7 @@ type AllChartsConfig = {
   color: string
   colorMatchLineSeriesLabels: boolean
   columns: ChartColumns
-  confidenceKeys: Record<string, any>
+  confidenceKeys: ConfidenceInterval
   customColors: string[]
   data: Object[]
   dataUrl: string
@@ -139,6 +135,7 @@ type AllChartsConfig = {
   orientation: 'vertical' | 'horizontal'
   palette: string
   pieType?: string
+  preliminaryData: PreliminaryDataItem[]
   primary?: DataFormat
   roundingStyle: string
   runtime: Runtime
@@ -162,16 +159,37 @@ type AllChartsConfig = {
   }
   topAxis: { hasLine: boolean }
   twoColor: { palette: string }
-  type: string
+  type: 'chart' | 'dashboard'
   useLogScale: boolean
   visual: Visual
-  visualizationType: 'Area Chart' | 'Bar' | 'Box Plot' | 'Deviation Bar' | 'Forest Plot' | 'Line' | 'Paired Bar' | 'Pie' | 'Scatter Plot' | 'Spark Line' | 'Combo' | 'Forecasting'
+  visualizationType: 'Area Chart' | 'Bar' | 'Box Plot' | 'Deviation Bar' | 'Forest Plot' | 'Line' | 'Paired Bar' | 'Pie' | 'Scatter Plot' | 'Spark Line' | 'Combo' | 'Forecasting' | 'Sankey'
   visualizationSubType: string
   xAxis: Axis
   yAxis: Axis
   xScale: Function
   yScale: Function
   regions: Region[]
+  sankey: {
+    data: { links: Link[]; storyNodeText: Object[]; tooltips: Object[] }[]
+    nodePadding: number
+    iterations: number
+    nodeSize: {
+      nodeWidth: number
+    }
+    margin: { margin_x: number; margin_y: number }
+    nodeColor: { default: boolean; inactive: boolean }
+    opacity: { LinkOpacityInactive: string; LinkOpacityDefault: string; nodeOpacityInactive: boolean; nodeOpacityDefault: boolean }
+    rxValue: number
+    nodeFontColor: string
+    nodeValueStyle: {
+      textBefore: string
+      textAfter: string
+    }
+    linkColor: {
+      inactive: string
+      default: string
+    }
+  }
 }
 
 export type ForestPlotConfig = {