@cdc/chart 4.24.9 → 4.24.10

package/src/components/PairedBarChart.jsx

@@ -6,9 +6,10 @@ import { Text } from '@visx/text'
 
 import ConfigContext from '../ConfigContext'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 const PairedBarChart = ({ width, height, originalWidth }) => {
-  const { config, colorScale, transformedData: data, formatNumber, seriesHighlight, getTextWidth } = useContext(ConfigContext)
+  const { config, colorScale, transformedData: data, formatNumber, seriesHighlight } = useContext(ConfigContext)
 
   if (!config || config?.series?.length < 2) return
 
@@ -79,14 +80,27 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 				}
 				`}
         </style>
-        <svg id='cdc-visualization__paired-bar-chart' width={originalWidth} height={height} viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`} role='img' tabIndex={0}>
+        <svg
+          id='cdc-visualization__paired-bar-chart'
+          width={originalWidth}
+          height={height}
+          viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`}
+          role='img'
+          tabIndex={0}
+        >
           <title>{`Paired bar chart graphic with the title ${config.title ? config.title : 'No Title Found'}`}</title>
           <Group top={0} left={Number(config.xAxis.size)}>
             {data
               .filter(item => config.series[0].dataKey === groupOne.dataKey)
               .map((d, index) => {
-                let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(config.series[0].dataKey) === -1
-                let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[0].dataKey) !== -1
+                let transparentBar =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(config.series[0].dataKey) === -1
+                let displayBar =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(config.series[0].dataKey) !== -1
                 let barWidth = xScale(d[config.series[0].dataKey])
                 let barHeight = Number(config.barHeight) ? Number(config.barHeight) : 25
                 // update bar Y to give dynamic Y when user applyes BarSpace
@@ -95,7 +109,10 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(formatNumber(d[groupOne.dataKey], 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidth = getTextWidth(
+                  formatNumber(d[groupOne.dataKey], 'left'),
+                  `normal ${fontSize[config.fontSize]}px sans-serif`
+                )
                 const textFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
@@ -119,7 +136,14 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         tabIndex={-1}
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
-                        <Text textAnchor={textFits ? 'start' : 'end'} dx={textFits ? 5 : -5} verticalAnchor='middle' x={halfWidth - barWidth} y={y + config.barHeight / 2} fill={textFits ? groupOne.labelColor : '#000'}>
+                        <Text
+                          textAnchor={textFits ? 'start' : 'end'}
+                          dx={textFits ? 5 : -5}
+                          verticalAnchor='middle'
+                          x={halfWidth - barWidth}
+                          y={y + config.barHeight / 2}
+                          fill={textFits ? groupOne.labelColor : '#000'}
+                        >
                           {formatNumber(d[groupOne.dataKey], 'left')}
                         </Text>
                       )}
@@ -131,8 +155,14 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
               .filter(item => config.series[1].dataKey === groupTwo.dataKey)
               .map((d, index) => {
                 let barWidth = xScale(d[config.series[1].dataKey])
-                let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(config.series[1].dataKey) === -1
-                let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[1].dataKey) !== -1
+                let transparentBar =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(config.series[1].dataKey) === -1
+                let displayBar =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(config.series[1].dataKey) !== -1
                 let barHeight = config.barHeight ? Number(config.barHeight) : 25
                 // update bar Y to give dynamic Y when user applyes BarSpace
                 let y = 0
@@ -140,7 +170,10 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(formatNumber(d[groupTwo.dataKey], 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidth = getTextWidth(
+                  formatNumber(d[groupTwo.dataKey], 'left'),
+                  `normal ${fontSize[config.fontSize]}px sans-serif`
+                )
                 const isTextFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
@@ -171,7 +204,14 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         tabIndex={-1}
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
-                        <Text textAnchor={isTextFits ? 'end' : 'start'} dx={isTextFits ? -5 : 5} verticalAnchor='middle' x={halfWidth + barWidth} y={y + config.barHeight / 2} fill={isTextFits ? groupTwo.labelColor : '#000'}>
+                        <Text
+                          textAnchor={isTextFits ? 'end' : 'start'}
+                          dx={isTextFits ? -5 : 5}
+                          verticalAnchor='middle'
+                          x={halfWidth + barWidth}
+                          y={y + config.barHeight / 2}
+                          fill={isTextFits ? groupTwo.labelColor : '#000'}
+                        >
                           {formatNumber(d[groupTwo.dataKey], 'left')}
                         </Text>
                       )}

package/src/components/PieChart/PieChart.tsx

@@ -38,9 +38,6 @@ const PieChart = props => {
     config,
     colorScale,
     currentViewport,
-    dimensions,
-    highlight,
-    highlightReset,
     seriesHighlight,
     isDraggingAnnotation
   } = useContext(ConfigContext)
@@ -232,8 +229,6 @@ const PieChart = props => {
     }
   }, [seriesHighlight]) // eslint-disable-line
 
-  const createLegendLabels = createFormatLabels(config, [], _data, _colorScale)
-
   const getSvgClasses = () => {
     let classes = ['animated-pie', 'group']
     if (config.animate === false || animatedPie) {
@@ -280,7 +275,7 @@ const PieChart = props => {
               <TooltipWithBounds
                 key={Math.random()}
                 className={'tooltip cdc-open-viz-module'}
-                left={tooltipLeft}
+                left={tooltipLeft + centerX - radius}
                 top={tooltipTop}
               >
                 <ul>

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

@@ -19,7 +19,18 @@ type RegionsProps = {
 }
 
 // TODO: should regions be removed on categorical axis?
-const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleTooltipMouseOff, handleTooltipMouseOver, handleTooltipClick, tooltipData, showTooltip, hideTooltip }) => {
+const Regions: React.FC<RegionsProps> = ({
+  xScale,
+  barWidth = 0,
+  totalBarsInGroup = 1,
+  yMax,
+  handleTooltipMouseOff,
+  handleTooltipMouseOver,
+  handleTooltipClick,
+  tooltipData,
+  showTooltip,
+  hideTooltip
+}) => {
   const { parseDate, config } = useContext<ChartContext>(ConfigContext)
 
   const { runtime, regions, visualizationType, orientation, xAxis } = config
@@ -44,7 +55,10 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       const previousDays = Number(region.from) || 0
       const categoricalDomain = domain.map(d => formatDate(config.xAxis.dateParseFormat, new Date(d)))
       const d = region.toType === 'Last Date' ? new Date(domain[domain.length - 1]).getTime() : new Date(region.to) // on categorical charts force leading zero 03/15/2016 vs 3/15/2016 for valid date format
-      const to = config.xAxis.type === 'categorical' ? formatDate(config.xAxis.dateParseFormat, d) : formatDate(config.xAxis.dateParseFormat, d)
+      const to =
+        config.xAxis.type === 'categorical'
+          ? formatDate(config.xAxis.dateParseFormat, d)
+          : formatDate(config.xAxis.dateParseFormat, d)
       const toDate = new Date(to)
       from = new Date(toDate.setDate(toDate.getDate() - Number(previousDays)))
 
@@ -120,7 +134,12 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     }
     if (region.toType === 'Last Date') {
       const lastDate = domain[domain.length - 1]
-      to = Number(xScale(lastDate) + ((visualizationType === 'Bar' || visualizationType === 'Combo') && config.xAxis.type === 'date' ? barWidth * totalBarsInGroup : 0))
+      to = Number(
+        xScale(lastDate) +
+          ((visualizationType === 'Bar' || visualizationType === 'Combo') && config.xAxis.type === 'date'
+            ? barWidth * totalBarsInGroup
+            : 0)
+      )
     }
 
     if (visualizationType === 'Line' || visualizationType === 'Area Chart') {
@@ -152,27 +171,22 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       if (!from) return null
       if (!to) return null
 
-      const TopRegionBorderShape = () => {
-        return (
-          <path
-            stroke='#333'
-            d={`M${from} -5
-                L${from} 5
-                M${from} 0
-                L${to} 0
-                M${to} -5
-                L${to} 5`}
-          />
-        )
-      }
-
       const HighlightedArea = () => {
         return <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
       }
 
       return (
-        <Group height={100} fill='red' className='regions regions-group--line zzz' key={region.label} onMouseMove={handleTooltipMouseOver} onMouseLeave={handleTooltipMouseOff} handleTooltipClick={handleTooltipClick} tooltipData={JSON.stringify(tooltipData)} showTooltip={showTooltip}>
-          <TopRegionBorderShape />
+        <Group
+          height={100}
+          fill='red'
+          className='regions regions-group--line zzz'
+          key={region.label}
+          onMouseMove={handleTooltipMouseOver}
+          onMouseLeave={handleTooltipMouseOff}
+          handleTooltipClick={handleTooltipClick}
+          tooltipData={JSON.stringify(tooltipData)}
+          showTooltip={showTooltip}
+        >
           <HighlightedArea />
           <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
             {region.label}

package/src/components/ZoomBrush.tsx

@@ -7,6 +7,7 @@ import ConfigContext from '../ConfigContext'
 import { ScaleLinear, ScaleBand } from 'd3-scale'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 interface Props {
   xScaleBrush: ScaleLinear<number, number>
@@ -15,7 +16,7 @@ interface Props {
   yMax: number
 }
 const ZoomBrush: FC<Props> = props => {
-  const { tableData, config, parseDate, formatDate, setBrushConfig, getTextWidth, dashboardConfig } = useContext(ConfigContext)
+  const { tableData, config, parseDate, formatDate, setBrushConfig, dashboardConfig } = useContext(ConfigContext)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
   const isDashboardFilters = sharedFilters?.length > 0
   const { fontSize } = useBarChart()
@@ -175,7 +176,6 @@ const ZoomBrush: FC<Props> = props => {
             <BrushHandle
               left={Number(config.runtime.yAxis.size)}
               showTooltip={showTooltip}
-              getTextWidth={getTextWidth}
               pixelDistance={textProps.endPosition - textProps.startPosition}
               textProps={textProps}
               fontSize={fontSize[config.fontSize]}
@@ -202,7 +202,7 @@ const ZoomBrush: FC<Props> = props => {
 }
 
 const BrushHandle = props => {
-  const { x, isBrushActive, isBrushing, className, textProps, fontSize, showTooltip, left, getTextWidth } = props
+  const { x, isBrushActive, isBrushing, className, textProps, fontSize, showTooltip, left } = props
   const pathWidth = 8
   if (!isBrushActive) {
     return null
@@ -217,15 +217,34 @@ const BrushHandle = props => {
   return (
     <>
       {showTooltip && (
-        <Text x={(Number(textProps.xMax) - textWidth) / 2} dy={-12} pointerEvents='visiblePainted' fontSize={fontSize / 1.1}>
+        <Text
+          x={(Number(textProps.xMax) - textWidth) / 2}
+          dy={-12}
+          pointerEvents='visiblePainted'
+          fontSize={fontSize / 1.1}
+        >
           {tooltipText}
         </Text>
       )}
       <Group left={x + pathWidth / 2} top={-2}>
-        <Text pointerEvents='visiblePainted' dominantBaseline='hanging' x={isLeft ? 55 : -50} y={25} verticalAnchor='start' textAnchor={textAnchor} fontSize={fontSize / 1.4}>
+        <Text
+          pointerEvents='visiblePainted'
+          dominantBaseline='hanging'
+          x={isLeft ? 55 : -50}
+          y={25}
+          verticalAnchor='start'
+          textAnchor={textAnchor}
+          fontSize={fontSize / 1.4}
+        >
           {isLeft ? textProps.startValue : textProps.endValue}
         </Text>
-        <path cursor='ew-resize' d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12' fill={'#297EF1'} strokeWidth='1' transform={transform}></path>
+        <path
+          cursor='ew-resize'
+          d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12'
+          fill={'#297EF1'}
+          strokeWidth='1'
+          transform={transform}
+        ></path>
       </Group>
     </>
   )

package/src/coreStyles_chart.scss

@@ -0,0 +1,3 @@
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/heading-colors';
+@import '@cdc/core/styles/v2/themes/color-definitions';

package/src/data/initial-state.js

@@ -28,6 +28,7 @@ export default {
     showDownloadButton: false,
     showMissingDataLabel: true,
     showSuppressedSymbol: true,
+    showZeroValueData: true,
     hideNullValue: true
   },
   padding: {
@@ -122,10 +123,12 @@ export default {
     tickLabelColor: '#333',
     tickColor: '#333',
     numTicks: '',
-    labelOffset: 65,
+    labelOffset: 0,
     axisPadding: 200,
     target: 0,
-    maxTickRotation: 0
+    maxTickRotation: 0,
+    padding: 5,
+    showYearsOnce: false
   },
   table: {
     label: 'Data Table',
@@ -135,6 +138,7 @@ export default {
     caption: '',
     showDownloadUrl: false,
     showDataTableLink: true,
+    showDownloadLinkBelow: true,
     indexLabel: '',
     download: false,
     showVertical: true,

package/src/helpers/configHelpers.ts

@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash'
+import { ChartConfig } from '../types/ChartConfig'
+
+/* editConfigKeys
+ * Add edit or update config keys
+ * keyUpdates: { path: string[], value: any }[]
+ * path is the array of keys needed to reach the value to be updated
+ * value is the new value to be set
+ * if the key does not exist, it will be created
+ */
+export function editConfigKeys(config: ChartConfig, keyUpdates: { path: string[]; value: any }[]): ChartConfig {
+  const configDeepCopy = cloneDeep(config)
+
+  const newConfig = keyUpdates.reduce((acc, { path, value }) => {
+    const pathCopy = [...path]
+    const lastKey = pathCopy.pop()
+    const target = pathCopy.reduce((target, key) => {
+      if (!target[key]) {
+        target[key] = {}
+      }
+      return target[key]
+    }, acc)
+    target[lastKey] = value
+    return acc
+  }, configDeepCopy)
+
+  return newConfig
+}

package/src/helpers/handleRankByValue.ts

@@ -0,0 +1,15 @@
+import { ChartConfig } from '../types/ChartConfig'
+
+const getNumericValue = number => {
+  if (typeof number === 'string') return parseFloat(number.replace(/,/g, ''))
+  return Number(number)
+}
+
+export const handleRankByValue = (data, passedConfig: ChartConfig) => {
+  if (passedConfig.rankByValue) {
+    const series = passedConfig.series[0].dataKey
+    const sorted = data.sort((a, b) => getNumericValue(a[series]) - getNumericValue(b[series]))
+    return passedConfig.rankByValue === 'asc' ? sorted : sorted.reverse()
+  }
+  return data
+}

package/src/helpers/sizeHelpers.ts

@@ -0,0 +1,25 @@
+import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { ChartConfig, ViewportSize } from '../types/ChartConfig'
+
+export function getOrientation(
+  { orientation, heights, visualizationType }: Pick<ChartConfig, 'orientation' | 'heights' | 'visualizationType'>,
+  currentViewport: ViewportSize
+): 'vertical' | 'horizontal' | 'mobileVertical' {
+  const isForestPlot = visualizationType === 'Forest Plot'
+  const useVertical = orientation === 'vertical' || isForestPlot
+  const useMobileVertical = heights?.mobileVertical && isMobileHeightViewport(currentViewport)
+  const responsiveVertical = useMobileVertical ? 'mobileVertical' : 'vertical'
+
+  return useVertical ? responsiveVertical : 'horizontal'
+}
+export function calcInitialHeight(
+  { heights, orientation, visualizationType }: Pick<ChartConfig, 'heights' | 'orientation' | 'visualizationType'>,
+  currentViewport: ViewportSize
+): number {
+  // if no heights are provided assume config has not been loaded
+  if (!heights) return 0
+
+  const renderedOrientation = getOrientation({ orientation, heights, visualizationType }, currentViewport)
+  const height = Number(heights?.[renderedOrientation])
+  return isNaN(height) ? 0 : height
+}

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

@@ -0,0 +1,37 @@
+import { handleRankByValue } from '../handleRankByValue'
+import { ChartConfig } from '../../types/ChartConfig'
+
+describe('handleRankByValue', () => {
+  it('should sort the data in ascending order when rankByValue is "asc"', () => {
+    const data = [{ value: 3 }, { value: 1 }, { value: 2 }]
+    const config: ChartConfig = {
+      rankByValue: 'asc',
+      series: [{ dataKey: 'value' }]
+    }
+
+    const result = handleRankByValue(data, config)
+    expect(result).toEqual([{ value: 1 }, { value: 2 }, { value: 3 }])
+  })
+
+  it('should sort the data in descending order when rankByValue is "desc"', () => {
+    const data = [{ value: 3 }, { value: 1 }, { value: 2 }]
+    const config: ChartConfig = {
+      rankByValue: 'desc',
+      series: [{ dataKey: 'value' }]
+    }
+
+    const result = handleRankByValue(data, config)
+    expect(result).toEqual([{ value: 3 }, { value: 2 }, { value: 1 }])
+  })
+
+  it('should handle numeric strings correctly', () => {
+    const data = [{ value: '3' }, { value: '1' }, { value: '2' }]
+    const config: ChartConfig = {
+      rankByValue: 'asc',
+      series: [{ dataKey: 'value' }]
+    }
+
+    const result = handleRankByValue(data, config)
+    expect(result).toEqual([{ value: '1' }, { value: '2' }, { value: '3' }])
+  })
+})

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

@@ -0,0 +1,80 @@
+import { calcInitialHeight, getOrientation } from '../sizeHelpers'
+import { describe, expect, it } from 'vitest'
+import { ChartOrientation, VisualizationType } from '../../types/ChartConfig'
+
+describe('sizeHelpers', () => {
+  describe('getOrientation', () => {
+    it("should return 'vertical' when orientation is vertical", () => {
+      const config = {
+        orientation: 'vertical' as ChartOrientation,
+        heights: { mobileVertical: 0, vertical: 0, horizontal: 0 },
+        visualizationType: 'Bar' as VisualizationType
+      }
+      expect(getOrientation(config, 'md')).toBe('vertical')
+    })
+
+    it("should return 'horizontal' when orientation is horizontal", () => {
+      const config = {
+        orientation: 'horizontal' as ChartOrientation,
+        heights: { mobileVertical: 0, vertical: 0, horizontal: 0 },
+        visualizationType: 'Bar' as VisualizationType
+      }
+      expect(getOrientation(config, 'md')).toBe('horizontal')
+    })
+    it("should return 'vertical' when orientation is horizontal but visualizationType is 'Forest Plot'", () => {
+      const config = {
+        orientation: 'horizontal' as ChartOrientation,
+        heights: { mobileVertical: 0, vertical: 0, horizontal: 0 },
+        visualizationType: 'Forest Plot' as VisualizationType
+      }
+      expect(getOrientation(config, 'md')).toBe('vertical')
+    })
+
+    it('should return mobileVertical when viewport is mobile height', () => {
+      const config = {
+        orientation: 'vertical' as ChartOrientation,
+        heights: { mobileVertical: 100, vertical: 0, horizontal: 0 },
+        visualizationType: 'Bar' as VisualizationType
+      }
+      expect(getOrientation(config, 'xxs')).toBe('mobileVertical')
+    })
+  })
+})
+
+describe('calcInitialHeight', () => {
+  it('should return 0 when no heights are provided', () => {
+    const config = {
+      heights: undefined,
+      orientation: 'vertical' as ChartOrientation,
+      visualizationType: 'Bar' as VisualizationType
+    }
+    expect(calcInitialHeight(config, 'md')).toBe(0)
+  })
+
+  it('should return vertical height when orientation is vertical', () => {
+    const config = {
+      orientation: 'vertical' as ChartOrientation,
+      heights: { mobileVertical: 0, vertical: 100, horizontal: 0 },
+      visualizationType: 'Bar' as VisualizationType
+    }
+    expect(calcInitialHeight(config, 'md')).toBe(100)
+  })
+
+  it('should return horizontal height when orientation is horizontal', () => {
+    const config = {
+      orientation: 'horizontal' as ChartOrientation,
+      heights: { mobileVertical: 0, vertical: 0, horizontal: 100 },
+      visualizationType: 'Bar' as VisualizationType
+    }
+    expect(calcInitialHeight(config, 'md')).toBe(100)
+  })
+
+  it('should return mobileVertical height when viewport is mobile height', () => {
+    const config = {
+      heights: { mobileVertical: 100, vertical: 0, horizontal: 0 },
+      orientation: 'vertical' as ChartOrientation,
+      visualizationType: 'Bar' as VisualizationType
+    }
+    expect(calcInitialHeight(config, 'xxs')).toBe(100)
+  })
+})

package/src/hooks/useColorPalette.js

@@ -5,11 +5,14 @@ export const useColorPalette = (config, updateConfig) => {
   let twoColorPalettes = []
   let sequential = []
   let nonSequential = []
+  const accessibleColors = []
 
   // Get two color palettes if visualization type is Paired Bar
   if (config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') {
     const isReversed = config.twoColor.isPaletteReversed
-    twoColorPalettes = Object.keys(twoColorPalette).filter(name => (isReversed ? name.endsWith('reverse') : !name.endsWith('reverse')))
+    twoColorPalettes = Object.keys(twoColorPalette).filter(name =>
+      isReversed ? name.endsWith('reverse') : !name.endsWith('reverse')
+    )
   } else {
     // Get sequential and non-sequential palettes for other visualization types
     const seqPalettes = []
@@ -18,6 +21,7 @@ export const useColorPalette = (config, updateConfig) => {
     for (const paletteName in colorPalettesChart) {
       const isSequential = paletteName.startsWith('sequential')
       const isQualitative = paletteName.startsWith('qualitative')
+      const colorblindsafe = paletteName.startsWith('colorblindsafe')
       const isReversed = paletteName.endsWith('reverse')
 
       if (isSequential && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
@@ -27,6 +31,9 @@ export const useColorPalette = (config, updateConfig) => {
       if (isQualitative && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
         nonSeqPalettes.push(paletteName)
       }
+      if (colorblindsafe && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
+        accessibleColors.push(paletteName)
+      }
     }
 
     sequential = seqPalettes
@@ -64,5 +71,6 @@ export const useColorPalette = (config, updateConfig) => {
   }, [config.isPaletteReversed])
 
   // Return all palettes
-  return { twoColorPalettes, sequential, nonSequential }
+
+  return { twoColorPalettes, sequential, nonSequential, accessibleColors }
 }

package/src/hooks/useLegendClasses.ts

@@ -60,6 +60,10 @@ const useLegendClasses = (config: ConfigType) => {
     containerClasses.push('no-border')
   }
 
+  if (config.legend.hideBorder.topBottom && ['top'].includes(config.legend.position)) {
+    containerClasses.push('p-0')
+  }
+
   return {
     containerClasses,
     innerClasses

package/src/hooks/useScales.ts

@@ -72,7 +72,10 @@ const useScales = (properties: useScaleProps) => {
     let xAxisMin = Math.min(...xAxisDataMapped.map(Number))
     let xAxisMax = Math.max(...xAxisDataMapped.map(Number))
     xAxisMin -= (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
-    xAxisMax += (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
+    xAxisMax +=
+      visualizationType === 'Line'
+        ? 0
+        : (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
     xScale = scaleTime({
       domain: [xAxisMin, xAxisMax],
       range: [0, xMax]
@@ -264,14 +267,34 @@ const useScales = (properties: useScaleProps) => {
 
 export default useScales
 
-export const getTickValues = (xAxisDataMapped, xScale, num) => {
+export const getFirstDayOfMonth = ms => {
+  const date = new Date(ms)
+  return new Date(date.getFullYear(), date.getMonth(), 1).getTime()
+}
+
+export const dateFormatHasMonthButNoDays = dateFormat => {
+  return (
+    (dateFormat.includes('%b') ||
+      dateFormat.includes('%B') ||
+      dateFormat.includes('%m') ||
+      dateFormat.includes('%-m') ||
+      dateFormat.includes('%_m')) &&
+    !dateFormat.includes('%d') &&
+    !dateFormat.includes('%-d') &&
+    !dateFormat.includes('%_d') &&
+    !dateFormat.includes('%e')
+  )
+}
+
+export const getTickValues = (xAxisDataMapped, xScale, num, config) => {
   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 = []
+    let tickValues = []
     for (let i = xDomainMax; i >= xDomainMin; i -= step) {
       tickValues.push(i)
     }
@@ -280,6 +303,11 @@ export const getTickValues = (xAxisDataMapped, xScale, num) => {
     }
     tickValues.reverse()
 
+    // Use first days of months when showing months without days
+    if (dateFormatHasMonthButNoDays(config.xAxis.dateDisplayFormat)) {
+      tickValues = tickValues.map(tv => getFirstDayOfMonth(tv))
+    }
+
     return tickValues
   }
 

package/src/hooks/useTooltip.tsx

@@ -58,10 +58,7 @@ export const useTooltip = props => {
     const showMissingDataValue = config.general.showMissingDataLabel && (!value || value === 'null')
     let formattedValue = seriesKey === config.xAxis.dataKey ? value : formatNumber(value, getAxisPosition(seriesKey))
 
-    formattedValue =
-      showMissingDataValue && (config.visualizationSubType === 'stacked' ? !config.general.hideNullValue : true)
-        ? 'N/A'
-        : formattedValue
+    formattedValue = showMissingDataValue ? 'N/A' : formattedValue
 
     return formattedValue
   }
@@ -199,7 +196,14 @@ export const useTooltip = props => {
             ?.flatMap(seriesKey => {
               const value = resolvedScaleValues[0]?.[seriesKey]
               const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
-              return [[seriesKey, formattedValue, getAxisPosition(seriesKey)]]
+              if (
+                (value === null || value === undefined || value === '' || formattedValue === 'N/A') &&
+                config.general.hideNullValue
+              ) {
+                return []
+              } else {
+                return [[seriesKey, formattedValue, getAxisPosition(seriesKey)]]
+              }
             })
         )
       }