@cdc/chart 4.26.2 → 4.26.4

package/src/components/PieChart/PieChart.tsx

@@ -24,14 +24,9 @@ import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { scaleOrdinal } from '@visx/scale'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { type TooltipDisplayData } from '../../helpers/tooltipHelpers'
 
-type TooltipData = {
-  data: {
-    [key: string]: string | number
-  }
-  dataXPosition: number
-  dataYPosition: number
-}
+type TooltipData = TooltipDisplayData
 
 type PieChartProps = {
   parentWidth?: number
@@ -172,8 +167,22 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     const domainKeys = isPercentageMode ? dataKeys.filter(k => k !== labelForCalcArea) : dataKeys
     const numberOfKeys = domainKeys.length
 
-    let palette = getPaletteColors(config, colorPalettes)
-    palette = applyEnhancedColorDistribution(config, palette, numberOfKeys)
+    const orderedCustomColors = config.general?.palette?.customColorsOrdered
+    const customColors = config.general?.palette?.customColors
+    const shouldUseOrderedCustomColors = Array.isArray(orderedCustomColors) && orderedCustomColors.length > 0
+
+    let palette = shouldUseOrderedCustomColors ? orderedCustomColors : getPaletteColors(config, colorPalettes)
+    if (!shouldUseOrderedCustomColors && customColors?.length) {
+      palette = customColors
+    }
+
+    while (palette.length > 0 && palette.length < numberOfKeys) {
+      palette = palette.concat(palette)
+    }
+
+    palette = shouldUseOrderedCustomColors
+      ? palette.slice(0, numberOfKeys)
+      : applyEnhancedColorDistribution(config, palette, numberOfKeys)
 
     const unknownColor = isPercentageMode
       ? getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-10').trim()
@@ -206,6 +215,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     config.general?.palette?.name,
     config.general?.palette?.isReversed,
     config.general?.palette?.customColors,
+    config.general?.palette?.customColorsOrdered,
     config.palette
   ])
 
@@ -216,7 +226,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
 
   // Make sure the chart is visible if in the editor
   useEffect(() => {
-    const element = document.querySelector('.isEditor')
+    const element = document.querySelector('.is-editor')
     if (element) {
       // parent element is visible
       setAnimatePie(true)
@@ -411,7 +421,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
         <div ref={triggerRef} />
         {!isDraggingAnnotation &&
           tooltipData &&
-          Object.entries(tooltipData.data).length > 0 &&
+          tooltipData.data?.length > 0 &&
           tooltipOpen &&
           showTooltip &&
           tooltipData.dataYPosition &&
@@ -421,13 +431,20 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
                 config.tooltips.opacity / 100
               }) !important`}</style>
               <TooltipWithBounds
-                className={'tooltip cdc-open-viz-module'}
+                className={'tooltip cove-visualization'}
                 left={tooltipLeft + centerX - radius}
                 top={tooltipTop}
               >
                 <ul>
                   {typeof tooltipData === 'object' &&
-                    Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}
+                    tooltipData.data.map((row, index) => (
+                      <TooltipListItem
+                        row={row}
+                        index={index}
+                        key={index}
+                        useMarkerColumn={tooltipData.useMarkerColumn}
+                      />
+                    ))}
                 </ul>
               </TooltipWithBounds>
             </>

package/src/components/RadarChart/RadarChart.tsx

@@ -278,7 +278,7 @@ const RadarChart = React.forwardRef<SVGSVGElement, RadarChartProps>((props, ref)
           <style>{`.tooltip {background-color: rgba(255,255,255, ${
             (config.tooltips?.opacity || 90) / 100
           }) !important`}</style>
-          <TooltipWithBounds className='tooltip cdc-open-viz-module' left={tooltipLeft} top={tooltipTop}>
+          <TooltipWithBounds className='tooltip cove-visualization' left={tooltipLeft} top={tooltipTop}>
             <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>{tooltipData.entityName}</div>
             <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
               {tooltipData.values.map((item, index) => (

package/src/components/Regions/components/Regions.tsx

@@ -10,7 +10,8 @@ const VIZ_TYPES = {
   BAR: 'Bar',
   LINE: 'Line',
   AREA: 'Area Chart',
-  COMBO: 'Combo'
+  COMBO: 'Combo',
+  HORIZON: 'Horizon Chart'
 } as const
 
 type Region = {
@@ -35,6 +36,7 @@ type RegionsProps = {
   barWidth?: number
   totalBarsInGroup?: number
   xMax?: number
+  yAxisWidth?: number
 }
 
 type HighlightedAreaProps = {
@@ -63,14 +65,22 @@ const findClosestDate = <T,>(targetTime: number, domain: T[], getTime: (d: T) =>
   return closest
 }
 
-/** Check if visualization type is line-like (Line or Area Chart) */
-const isLineLike = (type: string): boolean => type === VIZ_TYPES.LINE || type === VIZ_TYPES.AREA
+/** Check if visualization type is line-like (Line, Area Chart, or Horizon Chart) */
+const isLineLike = (type: string): boolean =>
+  type === VIZ_TYPES.LINE || type === VIZ_TYPES.AREA || type === VIZ_TYPES.HORIZON
 
 /** Check if visualization type is bar-like (Bar or Combo) */
 const isBarLike = (type: string): boolean => type === VIZ_TYPES.BAR || type === VIZ_TYPES.COMBO
 
 // TODO: should regions be removed on categorical axis?
-const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, xMax }) => {
+const Regions: React.FC<RegionsProps> = ({
+  xScale,
+  barWidth = 0,
+  totalBarsInGroup = 1,
+  yMax,
+  xMax,
+  yAxisWidth = 0
+}) => {
   const { parseDate, config } = useContext<ChartContext>(ConfigContext)
 
   const { regions, visualizationType, orientation, xAxis } = config
@@ -91,7 +101,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
         ? new Date(domain[domain.length - 1] as string | number).getTime()
         : new Date(region.to)
 
-    const toFormatted = formatDate(config.xAxis.dateParseFormat, toRefDate)
+    const toFormatted = formatDate(config.xAxis.dateParseFormat, toRefDate, config.locale)
     const toDate = new Date(toFormatted)
     const fromDate = new Date(toDate)
     fromDate.setDate(fromDate.getDate() - previousDays)
@@ -99,7 +109,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     let closestValue: unknown
 
     if (axisType === 'date') {
-      const fromTime = new Date(formatDate(xAxis.dateParseFormat, fromDate)).getTime()
+      const fromTime = new Date(formatDate(xAxis.dateParseFormat, fromDate, config.locale)).getTime()
       closestValue = findClosestDate(fromTime, domain as number[], d => d)
     } else if (axisType === 'categorical') {
       const fromTime = fromDate.getTime()
@@ -122,8 +132,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     } else {
       from = xScale(region.from)
     }
-    // Add left padding (yAxis.size) + half bandwidth to center on the category
-    let scalePadding = Number(config.yAxis.size)
+    // Add left padding (yAxisWidth) + half bandwidth to center on the category
+    let scalePadding = yAxisWidth
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -135,8 +145,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateLineLastDatePosition_Categorical()
     }
     let to = xScale(region.to)
-    // Add left padding (yAxis.size) + half bandwidth
-    let scalePadding = Number(config.yAxis.size)
+    // Add left padding (yAxisWidth) + half bandwidth
+    let scalePadding = yAxisWidth
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -151,15 +161,15 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       // For date scale (band), we need to find the value in the domain
       // Parse the region date to match the format in the domain
       const date = new Date(region.from)
-      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
 
       // For band scales, find the closest date in the domain
       const domain = xScale.domain() as number[]
       const closestDate = findClosestDate(parsedDate, domain, d => d)
       from = xScale(closestDate)
     }
-    // Add left padding (yAxis.size) + half bandwidth
-    let scalePadding = Number(config.yAxis.size)
+    // Add left padding (yAxisWidth) + half bandwidth
+    let scalePadding = yAxisWidth
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -179,8 +189,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     const closestDate = findClosestDate(parsedDate, domain, d => d)
     let to = xScale(closestDate)
 
-    // Add left padding (yAxis.size) + half bandwidth
-    let scalePadding = Number(config.yAxis.size)
+    // Add left padding (yAxisWidth) + half bandwidth
+    let scalePadding = yAxisWidth
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -190,13 +200,13 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
   const getLineFromValue_DateTime = (region: Region): number => {
     if (region.fromType === 'Previous Days') {
       const from = calculatePreviousDaysFrom(region, 'date-time')
-      return from + Number(config.yAxis.size)
+      return from + yAxisWidth
     }
     const date = new Date(region.from)
-    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
     let from = xScale(parsedDate)
     // For date-time, xScale returns correct position (no bandwidth), just add left padding
-    return from + Number(config.yAxis.size)
+    return from + yAxisWidth
   }
 
   const getLineToValue_DateTime = (region: Region): number => {
@@ -204,17 +214,17 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateLineLastDatePosition_DateTime()
     }
     let to = xScale(parseDate(region.to).getTime())
-    return to + Number(config.yAxis.size)
+    return to + yAxisWidth
   }
 
   const calculateLineLastDatePosition_Categorical = (): number => {
-    const chartStart = Number(config.yAxis.size || 0)
+    const chartStart = yAxisWidth
     // Extend to the right edge of the chart
     return chartStart + (xMax || 0)
   }
 
   const calculateLineLastDatePosition_Date = (): number => {
-    const chartStart = Number(config.yAxis.size || 0)
+    const chartStart = yAxisWidth
     // For date scale line charts with Last Date, extend to the right edge of the chart
     return chartStart + (xMax || 0)
   }
@@ -223,8 +233,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     const domain = xScale.domain()
     const lastDate = domain[domain.length - 1]
     const lastDatePosition = xScale(lastDate)
-    // Match the non-Last Date logic: just add yAxis.size
-    return Number(lastDatePosition + Number(config.yAxis.size))
+    // Match the non-Last Date logic: just add yAxisWidth
+    return Number(lastDatePosition + yAxisWidth)
   }
 
   // ============================================
@@ -252,7 +262,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     }
     // For date scale (band), we need to find the value in the domain
     const date = new Date(region.from)
-    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
 
     // For band scales, find the closest date in the domain
     const domain = xScale.domain() as number[]
@@ -281,7 +291,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       from = calculatePreviousDaysFrom(region, 'date-time')
     } else {
       const date = new Date(region.from)
-      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
       from = xScale(parsedDate)
     }
     return from - getBarOffset()
@@ -389,7 +399,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
 
   if (!regions || orientation !== 'vertical') return null
 
-  const chartStart = Number(config.yAxis.size || 0)
+  const chartStart = yAxisWidth
   const chartEnd = xMax !== undefined ? chartStart + xMax : chartStart + 1000
 
   return regions.map((region: Region) => {

package/src/components/Sankey/components/Sankey.tsx

@@ -226,7 +226,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
-              {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
+              {typeof node.value === 'number' ? node.value.toLocaleString(config.locale) : node.value}
             </Text>
             <Text
               width={linkLength()}
@@ -281,7 +281,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
             >
               <tspan className={classStyle}>
                 {sankeyConfig.nodeValueStyle.textBefore +
-                  (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) +
+                  (typeof node.value === 'number' ? node.value.toLocaleString(config.locale) : node.value) +
                   sankeyConfig.nodeValueStyle.textAfter}
               </tspan>
             </text>
@@ -394,7 +394,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'none' }}
             >
-              {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
+              {typeof node.value === 'number' ? node.value.toLocaleString(config.locale) : node.value}
             </Text>
             <Text
               x={node.x0! + textPositionHorizontal}

package/src/components/Sankey/sankey.scss

@@ -5,7 +5,7 @@
   column-gap: 30px;
 }
 
-.cdc-open-viz-module .sankey-chart {
+.cove-visualization .sankey-chart {
   --font-size-small: 12px;
   --font-size-medium: 16px;
   --font-size-large: 18px;

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -4,22 +4,21 @@ import { Group } from '@visx/group'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { buildSeriesTooltipListHtml } from '../../helpers/tooltipHelpers'
 
-const ScatterPlot = ({ xScale, yScale }) => {
+const ScatterPlot = ({ xScale, yScale, yAxisWidth }) => {
   const {
     transformedData: data,
     config,
     tableData,
     formatNumber,
     seriesHighlight,
-    colorPalettes,
     colorScale,
     interactionLabel
   } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
   const circleRadii = 4.5
-  const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
   // Track current hover for analytics
   const [currentHover, setCurrentHover] = useState({ dataIndex: null, seriesKey: null })
@@ -37,23 +36,26 @@ const ScatterPlot = ({ xScale, yScale }) => {
       }
     ])
   const handleTooltip = (item, s, dataIndex) => `<div>
-    ${
-      config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries
-        ? `${config.runtime.seriesLabels[s] || ''}<br/>`
-        : ''
-    }
-    ${config.runtime?.xAxis?.label || config.xAxis.label}: ${formatNumber(item[config.xAxis.dataKey], 'bottom')} <br/>
-    ${config.runtime?.yAxis?.label || config.yAxis.label}: ${formatNumber(item[s], 'left')}<br/>
-   ${additionalColumns
-     .map(
-       ([label, name, options]) =>
-         `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}<br/>`
-     )
-     .join('')}
+    ${buildSeriesTooltipListHtml({
+      config,
+      colorScale,
+      heading: `${config.runtime?.xAxis?.label || config.xAxis.label}: ${formatNumber(
+        item[config.xAxis.dataKey],
+        'bottom'
+      )}`,
+      seriesKey: s,
+      seriesText: `${config.runtime.seriesLabels[s] || s}: ${formatNumber(item[s], 'left')}`,
+      extraRows: additionalColumns
+        .map(
+          ([label, name, options]) =>
+            `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}`
+        )
+        .filter(Boolean)
+    })}
 </div>`
 
   return (
-    <Group className='scatter-plot' left={config.yAxis.size}>
+    <Group className='scatter-plot' left={yAxisWidth}>
       {data.map((item, dataIndex) => {
         // prettier-ignore
         return config.runtime.seriesKeys.map((s, index) => {

package/src/components/SmallMultiples/SmallMultipleTile.tsx

@@ -114,6 +114,7 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
     hideYAxisLabel: !isFirstInRow,
     legend: {
       ...tileConfig.legend,
+      tooltipLegendVisible: !config.legend?.hide,
       hide: true // Hide legends for all small multiple tiles
     },
     xAxis: {

package/src/components/SmallMultiples/SmallMultiples.css

@@ -1,13 +1,13 @@
 .small-multiples-container {
-  width: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .small-multiples-grid {
   display: grid;
-  width: 100%;
   flex: 1;
+  width: 100%;
 }
 
 .small-multiple-tile {
@@ -20,13 +20,13 @@
 }
 
 .tile-title {
-  margin: 0;
   font-weight: 700;
-  text-align: left;
   line-height: 1.3;
+  margin: 0;
+  text-align: left;
 }
 
 .tile-chart {
-  width: 100%;
   flex-shrink: 0;
+  width: 100%;
 }

package/src/components/Sparkline/components/SparkLine.tsx

@@ -34,7 +34,7 @@ const SparkLine: React.FC<SparkLineProps> = props => {
   const margin = { top: 5, right: 20, bottom: 10, left: 10 }
   const height = Number(parentHeight)
 
-  const xMax = width - config.runtime.yAxis.size
+  const xMax = width - 50
   const yMax = height - margin.top - 20
 
   const getXAxisData = d =>

package/src/components/Sparkline/index.scss

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

package/src/components/WarmingStripes/WarmingStripes.tsx

@@ -15,6 +15,7 @@ type WarmingStripesProps = {
   yScale: any
   xMax: number
   yMax: number
+  yAxisWidth: number
   synchronizedXValue?: any
   showTooltip: (args: any) => void
   handleTooltipMouseOff: () => void
@@ -23,6 +24,7 @@ type WarmingStripesProps = {
 const WarmingStripes = ({
   xMax,
   yMax,
+  yAxisWidth,
   synchronizedXValue,
   showTooltip,
   handleTooltipMouseOff
@@ -119,7 +121,7 @@ const WarmingStripes = ({
         [valueKey, formattedValue, 'left']
       ]
 
-      const dataXPosition = index * stripeWidth + stripeWidth / 2 + Number(config.yAxis.size)
+      const dataXPosition = index * stripeWidth + stripeWidth / 2 + yAxisWidth
       const dataYPosition = mouseY ?? yMax / 2
 
       showTooltip({
@@ -132,7 +134,7 @@ const WarmingStripes = ({
         }
       })
     },
-    [valueKey, xAxisDataKey, stripeWidth, config.yAxis.size, yMax, formatNumber, showTooltip]
+    [valueKey, xAxisDataKey, stripeWidth, yAxisWidth, yMax, formatNumber, showTooltip]
   )
 
   // Handle incoming synchronized tooltip from sibling small multiple tiles
@@ -156,7 +158,7 @@ const WarmingStripes = ({
   }
 
   return (
-    <Group className='warming-stripes' left={config.yAxis.size}>
+    <Group className='warming-stripes' left={yAxisWidth}>
       {displayData.map((item, index) => {
         const value = Number(item[valueKey])
         if (isNaN(value)) return null

package/src/components/WarmingStripes/WarmingStripesGradientLegend.css

@@ -4,16 +4,16 @@
 }
 
 .warming-stripes-gradient-legend__title {
+  font-size: 16px;
   font-weight: 600;
   margin-bottom: 0.5rem;
-  font-size: 16px;
 }
 
 .warming-stripes-gradient-legend__description {
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-  font-size: 14px;
   color: #555;
+  font-size: 14px;
+  margin-bottom: 1rem;
+  margin-top: 0.5rem;
 }
 
 .warming-stripes-gradient-legend__container {
@@ -22,14 +22,14 @@
 
 .warming-stripes-gradient-legend__svg {
   display: block;
-  width: 100%;
   overflow: visible;
+  width: 100%;
 }
 
 .warming-stripes-gradient-legend__series-label {
-  text-align: center;
-  margin-top: 0.5rem;
+  color: #333;
   font-size: 14px;
   font-weight: 500;
-  color: #333;
+  margin-top: 0.5rem;
+  text-align: center;
 }

package/src/data/initial-state.js

@@ -54,12 +54,12 @@ const createInitialState = () => {
     },
     preliminaryData: [],
     yAxis: {
-      hideAxis: false,
+      hideAxis: true,
       displayNumbersOnBar: false,
       hideLabel: false,
-      hideTicks: false,
+      hideTicks: true,
       size: 50,
-      gridLines: false,
+      gridLines: true,
       enablePadding: false,
       min: '',
       max: '',
@@ -73,7 +73,7 @@ const createInitialState = () => {
       rightAxisLabelColor: '#1c1d1f',
       rightAxisTickLabelColor: '#1c1d1f',
       rightAxisTickColor: '#1c1d1f',
-      numTicks: '',
+      numTicks: 4,
       axisPadding: 0,
       scalePadding: 10,
       tickRotation: 0,
@@ -133,7 +133,8 @@ const createInitialState = () => {
       labelColor: '#1c1d1f',
       tickLabelColor: '#1c1d1f',
       tickColor: '#1c1d1f',
-      numTicks: '',
+      numTicks: 6,
+      dateDisplayFormat: '%b. %-d %Y',
       labelOffset: 0,
       axisPadding: 200,
       target: 0,
@@ -142,21 +143,26 @@ const createInitialState = () => {
       showYearsOnce: false,
       sortByRecentDate: false,
       brushActive: false,
-      brushDefaultRecentDateCount: undefined
+      brushDefaultRecentDateCount: undefined,
+      viewportNumTicks: {
+        xs: 4,
+        xxs: 4
+      }
     },
     table: {
       label: 'Data Table',
-      expanded: true,
+      expanded: false,
       limitHeight: false,
       height: '',
       caption: '',
       showDownloadUrl: false,
+      downloadUrlLabel: '',
       showDataTableLink: true,
       showDownloadLinkBelow: true,
       indexLabel: '',
       download: false,
       showVertical: true,
-      dateDisplayFormat: '',
+      dateDisplayFormat: '%B %-d, %Y',
       showMissingDataLabel: true,
       showSuppressedSymbol: true,
       collapsible: true
@@ -196,7 +202,7 @@ const createInitialState = () => {
         side: false,
         topBottom: true
       },
-      position: 'right',
+      position: 'top',
       orderedValues: [],
       patterns: {},
       patternField: ''
@@ -224,7 +230,7 @@ const createInitialState = () => {
     },
     labels: false,
     dataFormat: {
-      commas: false,
+      commas: true,
       prefix: '',
       suffix: '',
       abbreviated: false,
@@ -235,9 +241,13 @@ const createInitialState = () => {
     filters: [],
     confidenceKeys: {},
     visual: {
-      border: true,
-      accent: true,
-      background: true,
+      border: false,
+      borderColorTheme: false,
+      accent: false,
+      background: false,
+      hideBackgroundColor: false,
+      tp5Treatment: false,
+      tp5Background: false,
       verticalHoverLine: false,
       horizontalHoverLine: false,
       lineDatapointSymbol: 'none',
@@ -250,7 +260,7 @@ const createInitialState = () => {
     tooltips: {
       opacity: 90,
       singleSeries: false,
-      dateDisplayFormat: ''
+      dateDisplayFormat: '%B %-d, %Y'
     },
     forestPlot: {
       startAt: 0,

package/src/data/legacy-defaults.ts

@@ -0,0 +1,18 @@
+// Preserves the OLD default values for properties changed in initial-state.js.
+// When the backfill loop fills a missing property, it uses these values instead
+// of the current defaults so that existing configs aren't visually affected.
+//
+// - Changed defaults: record the ORIGINAL value before any changes.
+// - New properties:   set to `undefined` so they are not backfilled at all.
+//
+// See backfillDefaults() in @cdc/core for the shared fill logic.
+export const LEGACY_CHART_DEFAULTS: Record<string, Record<string, unknown>> = {
+  general: { useIntelligentLineChartLabels: undefined },
+  yAxis: { hideAxis: false, hideTicks: false, gridLines: false, numTicks: '' },
+  xAxis: { numTicks: '', dateDisplayFormat: undefined, viewportNumTicks: undefined },
+  table: { expanded: true, dateDisplayFormat: '' },
+  legend: { position: 'right' },
+  dataFormat: { commas: false },
+  tooltips: { dateDisplayFormat: '' },
+  visual: { border: false, accent: false, background: false }
+}