@cdc/chart 4.26.2 → 4.26.3

package/src/components/ForestPlot/ForestPlot.tsx

@@ -26,7 +26,7 @@ const ForestPlot = ({
   handleTooltipMouseOver,
   forestPlotRightLabelRef
 }: ForestPlotProps) => {
-  const { rawData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
+  const { transformedData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
   const { forestPlot } = config as ChartConfig
   const labelPosition = config.xAxis.tickWidthMax + 10
   const [initialLogTicksSet, setInitialLogTicks] = useState(false)
@@ -90,7 +90,9 @@ const ForestPlot = ({
     }
   }, [config.forestPlot.type])
 
-  const pooledData = config.data.find(d => d[config.xAxis.dataKey] === config.forestPlot.pooledResult.column)
+  const pooledData = data.find(d => d[config.xAxis.dataKey] === config.forestPlot.pooledResult.column)
+  const [plotStart, plotEnd] = [...xScale.range()].sort((a, b) => a - b)
+  const plotWidth = plotEnd - plotStart
 
   const regressionPoints = pooledData
     ? [
@@ -112,12 +114,12 @@ const ForestPlot = ({
 
   const topLine = [
     { x: 0, y: topMarginOffset },
-    { x: width, y: topMarginOffset }
+    { x: plotEnd, y: topMarginOffset }
   ]
 
   const bottomLine = [
     { x: 0, y: height },
-    { x: width, y: height }
+    { x: plotEnd, y: height }
   ]
 
   type Columns = {
@@ -289,30 +291,21 @@ const ForestPlot = ({
             {forestPlot.regression.description}
           </Text>
         )}
-
-        <Bar
-          key='forest-plot-tooltip-area'
-          className='forest-plot-tooltip-area'
-          width={width}
-          height={height}
-          fill={false ? 'red' : 'transparent'}
-          fillOpacity={0.5}
-          onMouseMove={e => handleTooltipMouseOver(e, data)}
-          onMouseOut={handleTooltipMouseOff}
-        />
       </Group>
       <Line
         from={topLine[0]}
         to={topLine[1]}
-        style={{ stroke: 'black', strokeWidth: 2 }}
+        style={{ stroke: '#333', strokeWidth: 1 }}
         className='forestplot__top-line'
       />
-      <Line
-        from={bottomLine[0]}
-        to={bottomLine[1]}
-        style={{ stroke: 'black', strokeWidth: 2 }}
-        className='forestplot__bottom-line'
-      />
+      {config.xAxis.hideAxis && (
+        <Line
+          from={bottomLine[0]}
+          to={bottomLine[1]}
+          style={{ stroke: '#333', strokeWidth: 1 }}
+          className='forestplot__bottom-line'
+        />
+      )}
 
       {/* column data */}
       {columnsOnChart.map((column, colIndex) => {
@@ -400,6 +393,17 @@ const ForestPlot = ({
           {forestPlot.rightLabel}
         </Text>
       )}
+      <Bar
+        key='forest-plot-tooltip-area'
+        className='forest-plot-tooltip-area'
+        x={0}
+        width={width}
+        height={height}
+        fill={false ? 'red' : 'transparent'}
+        fillOpacity={0.5}
+        onMouseMove={e => handleTooltipMouseOver(e, data)}
+        onMouseOut={handleTooltipMouseOff}
+      />
     </>
   )
 }

package/src/components/Legend/LegendGroup/LegendGroup.styles.css

@@ -6,14 +6,14 @@
     margin-bottom: 0.5rem;
 
     .group-item .visx-legend-label {
-      font-weight: 400;
       font-size: 0.889rem;
+      font-weight: 400;
       margin-bottom: 0.5rem;
     }
     .group-label {
-      font-weight: 500;
       font-family: Nunito, sans-serif;
       font-size: 1rem;
+      font-weight: 500;
     }
   }
 
@@ -22,9 +22,9 @@
     grid-gap: 10px;
 
     &.group-item {
+      align-items: flex-start;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
     }
 
     & .inactive {
@@ -32,9 +32,9 @@
       transition: 0.2s all;
     }
     & .highlighted {
+      border-radius: 1px;
       outline: 1px solid #005ea2;
       outline-offset: 5px;
-      border-radius: 1px;
     }
   }
 }

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -17,7 +17,8 @@ import { FaStar } from 'react-icons/fa'
 import { Label } from '../../../types/Label'
 import { ColorScale, TransformedData } from '../../../types/ChartContext'
 import { ChartConfig } from '../../../types/ChartConfig'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import sortBy from 'lodash/sortBy'
 import { scaleSequential } from 'd3-scale'
 import { interpolateRgbBasis } from 'd3-interpolate'
 import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
@@ -173,7 +174,7 @@ export const createFormatLabels =
 
     const sortVertical = labels =>
       legend.verticalSorted
-        ? _.sortBy(_.cloneDeep(labels), label => {
+        ? sortBy(cloneDeep(labels), label => {
             const match = label.datum?.match(/-?\d+(\.\d+)?/)
             return match ? parseFloat(match[0]) : Number.MAX_SAFE_INTEGER
           })

package/src/components/LinearChart/tests/LinearChart.test.tsx

@@ -4,6 +4,7 @@ import { describe, expect, it, vi, beforeAll } from 'vitest'
 import LinearChart from '../../LinearChart'
 import ConfigContext from '../../../ConfigContext'
 import { createMockChartContext } from './mockConfigContext'
+import forestPlotConfig from '../../../../examples/feature/forest-plot/forest-plot.json'
 
 // Mock ResizeObserver
 vi.stubGlobal(
@@ -147,6 +148,82 @@ describe('LinearChart', () => {
       })
       expect(container).toBeTruthy()
     })
+
+    it('keeps forest plot lines inside the computed plot bounds at narrow and wide widths', () => {
+      const forestContextOverrides = {
+        transformedData: forestPlotConfig.data,
+        rawData: forestPlotConfig.data
+      }
+
+      const narrowRender = renderLinearChart(forestPlotConfig as any, forestContextOverrides, {
+        parentWidth: 320,
+        parentHeight: 500
+      })
+      const wideRender = renderLinearChart(forestPlotConfig as any, forestContextOverrides, {
+        parentWidth: 960,
+        parentHeight: 500
+      })
+
+      const narrowTopLine = narrowRender.container.querySelector('.forestplot__top-line')
+      const wideTopLine = wideRender.container.querySelector('.forestplot__top-line')
+      const narrowCiLine = narrowRender.container.querySelector('line[class^="line-"]')
+      const wideCiLine = wideRender.container.querySelector('line[class^="line-"]')
+
+      expect(narrowTopLine).toBeTruthy()
+      expect(wideTopLine).toBeTruthy()
+      expect(narrowCiLine).toBeTruthy()
+      expect(wideCiLine).toBeTruthy()
+
+      const narrowStart = Number(narrowTopLine?.getAttribute('x1'))
+      const narrowEnd = Number(narrowTopLine?.getAttribute('x2'))
+      const wideStart = Number(wideTopLine?.getAttribute('x1'))
+      const wideEnd = Number(wideTopLine?.getAttribute('x2'))
+
+      expect(narrowStart).toBe(0)
+      expect(narrowEnd).toBeLessThanOrEqual(320)
+      expect(wideStart).toBe(0)
+      expect(wideEnd).toBeLessThanOrEqual(960)
+      expect(wideEnd - wideStart).toBeGreaterThan(narrowEnd - narrowStart)
+
+      expect(Number(narrowCiLine?.getAttribute('x1'))).toBeGreaterThan(narrowStart)
+      expect(Number(narrowCiLine?.getAttribute('x2'))).toBeLessThanOrEqual(narrowEnd)
+      expect(Number(wideCiLine?.getAttribute('x1'))).toBeGreaterThan(wideStart)
+      expect(Number(wideCiLine?.getAttribute('x2'))).toBeLessThanOrEqual(wideEnd)
+    })
+
+    it('avoids rendering a duplicate manual bottom border when the forest plot x-axis is visible', () => {
+      const { container } = renderLinearChart(
+        forestPlotConfig as any,
+        {
+          transformedData: forestPlotConfig.data,
+          rawData: forestPlotConfig.data
+        },
+        { parentWidth: 800, parentHeight: 500 }
+      )
+
+      expect(container.querySelector('.forestplot__top-line')).toBeTruthy()
+      expect(container.querySelector('.forestplot__bottom-line')).toBeFalsy()
+      const bottomAxisLine = container.querySelector('.bottom-axis > line[stroke="#333"]')
+      expect(bottomAxisLine?.getAttribute('x1')).toBe('0')
+    })
+
+    it('renders forest plot rows from transformedData instead of rawData', () => {
+      const filteredData = forestPlotConfig.data.slice(0, 2)
+      const { container } = renderLinearChart(
+        forestPlotConfig as any,
+        {
+          transformedData: filteredData,
+          rawData: forestPlotConfig.data
+        },
+        { parentWidth: 800, parentHeight: 500 }
+      )
+
+      expect(container.querySelectorAll('.lower-ci')).toHaveLength(filteredData.length)
+      expect(container.querySelectorAll('line[class^="line-"]')).toHaveLength(filteredData.length)
+      expect(container.textContent).not.toContain(
+        String(forestPlotConfig.data[forestPlotConfig.data.length - 1]['Author(s) and Year'])
+      )
+    })
   })
 
   describe('axis rendering', () => {

package/src/components/LinearChart/tests/mockConfigContext.ts

@@ -124,6 +124,8 @@ export const createMockChartContext = (
     clean: (s: any) => s,
     formatTooltipsDate: (date: any) => String(date),
     legendId: 'test-legend',
+    rawData: config.data,
+    updateConfig: () => {},
     ...contextOverrides
   } as ChartContext
 }

package/src/components/LinearChart.tsx

@@ -18,8 +18,7 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
 import 'react-tooltip/dist/react-tooltip.css'
 import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
-import _ from 'lodash'
-
+import ResizeObserver from 'resize-observer-polyfill'
 // CDC Components
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ConfigContext from '../ConfigContext'
@@ -152,6 +151,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const [suffixWidth, setSuffixWidth] = useState(0)
   const [calculatedSvgHeight, setCalculatedSvgHeight] = useState<number | null>(null)
   const [axisUpdateKey, setAxisUpdateKey] = useState(0)
+  const [axisBottomSizeKey, setAxisBottomSizeKey] = useState(0)
   const [synchronizedXValue, setSynchronizedXValue] = useState<any>(null)
 
   // REFS
@@ -245,6 +245,17 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     setAxisUpdateKey(prev => prev + 1)
   }, [data.length, xAxisDataMapped?.[0], xAxisDataMapped?.[xAxisDataMapped.length - 1]])
 
+  // Recompute heights when bottom axis size changes (e.g., font load or wrap).
+  useEffect(() => {
+    const axisBottomEl = axisBottomRef.current
+    if (!axisBottomEl) return
+    const observer = new ResizeObserver(() => {
+      setAxisBottomSizeKey(prev => prev + 1)
+    })
+    observer.observe(axisBottomEl)
+    return () => observer.disconnect()
+  }, [axisBottomRef.current])
+
   const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
 
   // State for computed y-axis width - allows re-render when horizontal bar label space is calculated
@@ -415,7 +426,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   // Make sure the chart is visible if in the editor
   useEffect(() => {
-    const element = document.querySelector('.isEditor')
+    const element = document.querySelector('.is-editor')
     if (element) {
       setAnimatedChart(true)
     }
@@ -498,7 +509,16 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const legendIsLeftOrRight =
       legend?.position !== 'top' && legend?.position !== 'bottom' && !isLegendWrapViewport(currentViewport)
     legendRef.current.style.transform = legendIsLeftOrRight ? `translateY(${topLabelOnGridlineHeight}px)` : 'none'
-  }, [axisBottomRef.current, config, config.xAxis.brushActive, currentViewport, topYLabelRef.current, initialHeight])
+  }, [
+    axisBottomRef.current,
+    config,
+    config.xAxis.brushActive,
+    currentViewport,
+    topYLabelRef.current,
+    initialHeight,
+    parentWidth,
+    axisBottomSizeKey
+  ])
 
   useEffect(() => {
     if (!tooltipOpen) return
@@ -542,7 +562,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
         <svg
           ref={internalSvgRef}
           onMouseMove={onMouseMove}
-          width={parentWidth + config.yAxis.rightAxisSize}
+          width={parentWidth}
           height={isNoDataAvailable ? 1 : calculatedSvgHeight ?? parentHeight}
           className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${
             debugSvg && 'debug'
@@ -834,7 +854,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               <TooltipWithBounds
                 ref={tooltipRef}
                 key={Math.random()}
-                className={'tooltip cdc-open-viz-module'}
+                className={'tooltip cove-visualization'}
                 left={tooltipLeft}
                 top={tooltipTop}
               >

package/src/components/PieChart/PieChart.tsx

@@ -172,8 +172,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 +220,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 +231,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)
@@ -421,7 +436,7 @@ 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}
               >

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

@@ -91,7 +91,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 +99,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()
@@ -151,7 +151,7 @@ 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[]
@@ -193,7 +193,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return from + Number(config.yAxis.size)
     }
     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)
@@ -252,7 +252,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 +281,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()

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/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/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/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,11 +143,15 @@ 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: '',
@@ -156,7 +161,7 @@ const createInitialState = () => {
       indexLabel: '',
       download: false,
       showVertical: true,
-      dateDisplayFormat: '',
+      dateDisplayFormat: '%B %-d, %Y',
       showMissingDataLabel: true,
       showSuppressedSymbol: true,
       collapsible: true
@@ -196,7 +201,7 @@ const createInitialState = () => {
         side: false,
         topBottom: true
       },
-      position: 'right',
+      position: 'top',
       orderedValues: [],
       patterns: {},
       patternField: ''
@@ -224,7 +229,7 @@ const createInitialState = () => {
     },
     labels: false,
     dataFormat: {
-      commas: false,
+      commas: true,
       prefix: '',
       suffix: '',
       abbreviated: false,
@@ -235,9 +240,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 +259,7 @@ const createInitialState = () => {
     tooltips: {
       opacity: 90,
       singleSeries: false,
-      dateDisplayFormat: ''
+      dateDisplayFormat: '%B %-d, %Y'
     },
     forestPlot: {
       startAt: 0,