@cdc/chart 4.24.10 → 4.24.12-2

package/src/components/LinearChart.tsx

@@ -35,12 +35,14 @@ import { calcInitialHeight } from '../helpers/sizeHelpers'
 import useMinMax from '../hooks/useMinMax'
 import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
-import useScales, { getTickValues } from '../hooks/useScales'
+import useScales, { getTickValues, filterAndShiftLinearDateTicks } from '../hooks/useScales'
 import useTopAxis from '../hooks/useTopAxis'
 import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
 import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 import Annotation from './Annotations'
 import { BlurStrokeText } from '@cdc/core/components/BlurStrokeText'
+import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+import { countNumOfTicks } from '../helpers/countNumOfTicks'
 
 type LinearChartProps = {
   parentWidth: number
@@ -50,6 +52,7 @@ type LinearChartProps = {
 const BOTTOM_LABEL_PADDING = 9
 const X_TICK_LABEL_PADDING = 3
 const DEFAULT_TICK_LENGTH = 8
+const MONTH_AS_MS = 1000 * 60 * 60 * 24 * 30
 
 const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, parentWidth }, svgRef) => {
   // prettier-ignore
@@ -100,6 +103,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const [animatedChart, setAnimatedChart] = useState(false)
   const [point, setPoint] = useState({ x: 0, y: 0 })
   const [suffixWidth, setSuffixWidth] = useState(0)
+  const [yAxisAutoPadding, setYAxisAutoPadding] = useState(0)
 
   // REFS
   const axisBottomRef = useRef(null)
@@ -109,7 +113,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const triggerRef = useRef()
   const xAxisLabelRefs = useRef([])
   const xAxisTitleRef = useRef(null)
-  const prevTickRef = useRef(null)
+  const lastMaxValue = useRef(maxValue)
 
   const dataRef = useIntersectionObserver(triggerRef, {
     freezeOnceVisible: false
@@ -120,8 +124,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const isHorizontal = orientation === 'horizontal' || config.visualizationType === 'Forest Plot'
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   const isForestPlot = visualizationType === 'Forest Plot'
+  const isDateTime = config.xAxis.type === 'date-time'
   const suffixHasNoSpace = !suffix.includes(' ')
-
+  const labelsOverflow = onlyShowTopPrefixSuffix && !suffixHasNoSpace
+  const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
   const yLabelOffset = isNaN(parseInt(`${runtime.yAxis.labelOffset}`)) ? 0 : parseInt(`${runtime.yAxis.labelOffset}`)
 
   // zero if not forest plot
@@ -130,7 +136,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   // height before bottom axis
   const initialHeight = useMemo(
     () => calcInitialHeight(config, currentViewport),
-    [config, currentViewport, parentHeight]
+    [config, currentViewport, parentHeight, config.heights?.vertical, config.heights?.horizontal]
   )
   const forestHeight = useMemo(() => initialHeight + forestRowsHeight, [initialHeight, forestRowsHeight])
 
@@ -170,11 +176,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const xMax = width - runtime.yAxis.size - (visualizationType === 'Combo' ? config.yAxis.rightAxisSize : 0)
   const yMax = initialHeight + forestRowsHeight
 
-  const checkLineToBarGraph = () => {
-    return isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)
-  }
+  const isNoDataAvailable = config.filters && config.filters.values.length === 0 && data.length === 0
 
-  // GETTERS & FUNCTIONS
   const getXAxisData = d =>
     isDateScale(config.runtime.xAxis)
       ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime()
@@ -188,7 +191,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const properties = {
     data,
     tableData,
-    config,
+    config: {
+      ...config,
+      yAxis: {
+        ...config.yAxis,
+        scalePadding: labelsOverflow ? yAxisAutoPadding : config.yAxis.scalePadding,
+        enablePadding: labelsOverflow || config.yAxis.enablePadding
+      }
+    },
     minValue,
     maxValue,
     isAllLine,
@@ -209,6 +219,40 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xMax: parentWidth - Number(config.orientation === 'horizontal' ? config.xAxis.size : config.yAxis.size)
   })
 
+  const [yTickCount, xTickCount] = ['yAxis', 'xAxis'].map(axis =>
+    countNumOfTicks({ axis, max, runtime, currentViewport, isHorizontal, data, config, min })
+  )
+  const handleNumTicks = isForestPlot ? config.data.length : yTickCount
+
+  // Tooltip Helpers
+  const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip()
+
+  // prettier-ignore
+  const {
+    handleTooltipMouseOver,
+    handleTooltipClick,
+    handleTooltipMouseOff,
+    TooltipListItem,
+    getXValueFromCoordinate
+  } = useCoveTooltip({
+      xScale,
+      yScale,
+      showTooltip,
+      hideTooltip
+  })
+  // get the number of months between the first and last date
+  const { dataKey } = runtime.xAxis
+  const dateSpanMonths =
+    data.length && isDateTime
+      ? [0, data.length - 1].map(i => parseDate(data[i][dataKey])).reduce((a, b) => Math.abs(a - b)) / MONTH_AS_MS
+      : 0
+  const useDateSpanMonths = isDateTime && dateSpanMonths > xTickCount
+
+  // GETTERS & FUNCTIONS
+  const checkLineToBarGraph = () => {
+    return isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)
+  }
+
   const handleLeftTickFormatting = (tick, index, ticks) => {
     if (isLogarithmicAxis && tick === 0.1) {
       //when logarithmic scale applied change value of first tick
@@ -227,16 +271,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     return tick
   }
 
-  const handleBottomTickFormatting = tick => {
+  const handleBottomTickFormatting = (tick, i, ticks) => {
     if (isLogarithmicAxis && tick === 0.1) {
       // when logarithmic scale applied change value FIRST  of  tick
       tick = 0
     }
 
     if (isDateScale(runtime.xAxis) && config.visualizationType !== 'Forest Plot') {
-      const formattedDate = formatDate(tick, prevTickRef.current)
-      prevTickRef.current = tick
-      return formattedDate
+      return formatDate(tick, i, ticks)
     }
     if (orientation === 'horizontal' && config.visualizationType !== 'Forest Plot')
       return formatNumber(tick, 'left', shouldAbbreviate)
@@ -254,80 +296,33 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     return tick
   }
 
-  const countNumOfTicks = axis => {
-    let { numTicks } = runtime[axis]
-    if (runtime[axis].viewportNumTicks && runtime[axis].viewportNumTicks[currentViewport]) {
-      numTicks = runtime[axis].viewportNumTicks[currentViewport]
-    }
-    let tickCount = undefined
-
-    if (axis === 'yAxis') {
-      tickCount =
-        isHorizontal && !numTicks
-          ? data.length
-          : isHorizontal && numTicks
-          ? numTicks
-          : !isHorizontal && !numTicks
-          ? undefined
-          : !isHorizontal && numTicks && numTicks
-      // to fix edge case of small numbers with decimals
-      if (tickCount === undefined && !config.dataFormat.roundTo) {
-        // then it is set to Auto
-        if (Number(max) <= 3) {
-          tickCount = 2
-        } else {
-          tickCount = 4 // same default as standalone components
-        }
-      }
-      if (Number(tickCount) > Number(max)) {
-        // cap it and round it so its an integer
-        tickCount = Number(min) < 0 ? Math.round(max) * 2 : Math.round(max)
-      }
-    }
-
-    if (axis === 'xAxis') {
-      tickCount =
-        isHorizontal && !numTicks
-          ? undefined
-          : isHorizontal && numTicks
-          ? numTicks
-          : !isHorizontal && !numTicks
-          ? undefined
-          : !isHorizontal && numTicks && numTicks
-      if (isHorizontal && tickCount === undefined && !config.dataFormat.roundTo) {
-        // then it is set to Auto
-        // - check for small numbers situation
-        if (max <= 3) {
-          tickCount = 2
-        } else {
-          tickCount = 4 // same default as standalone components
-        }
-      }
+  const chartHasTooltipGuides = () => {
+    const { visualizationType } = config
+    if (visualizationType === 'Combo' && runtime.forecastingSeriesKeys > 0) return true
+    if (visualizationType === 'Area Chart') return true
+    if (visualizationType === 'Line') return true
+    if (visualizationType === 'Bar') return true
+    return false
+  }
 
-      if (config.visualizationType === 'Forest Plot') {
-        tickCount = config.yAxis.numTicks !== '' ? config.yAxis.numTicks : 4
-      }
+  const getManualStep = () => {
+    let manualStep = config.xAxis.manualStep
+    if (config.xAxis.viewportStepCount && config.xAxis.viewportStepCount[currentViewport]) {
+      manualStep = config.xAxis.viewportStepCount[currentViewport]
     }
-
-    return tickCount
+    return manualStep
   }
 
-  // Tooltip Helpers
-  const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip()
+  const onMouseMove = event => {
+    const svgRect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - svgRect.left
+    const y = event.clientY - svgRect.top
 
-  // prettier-ignore
-  const {
-    handleTooltipMouseOver,
-    handleTooltipClick,
-    handleTooltipMouseOff,
-    TooltipListItem,
-    getXValueFromCoordinate
-  } = useCoveTooltip({
-      xScale,
-      yScale,
-      showTooltip,
-      hideTooltip
-  })
+    setPoint({
+      x,
+      y
+    })
+  }
 
   // EFFECTS
 
@@ -410,56 +405,49 @@ 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, bottomLabelStart, brush, currentViewport, topYLabelRef.current])
+  }, [axisBottomRef.current, config, bottomLabelStart, brush, currentViewport, topYLabelRef.current, initialHeight])
 
-  const chartHasTooltipGuides = () => {
-    const { visualizationType } = config
-    if (visualizationType === 'Combo' && runtime.forecastingSeriesKeys > 0) return true
-    if (visualizationType === 'Area Chart') return true
-    if (visualizationType === 'Line') return true
-    if (visualizationType === 'Bar') return true
-    return false
-  }
+  useEffect(() => {
+    if (lastMaxValue.current === maxValue) return
+    lastMaxValue.current = maxValue
 
-  const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
-  const fontSize = { small: 16, medium: 18, large: 20 }
+    if (!yAxisAutoPadding) return
+    setYAxisAutoPadding(0)
+  }, [maxValue])
+  useEffect(() => {
+    if (orientation === 'horizontal') return
 
-  const handleNumTicks = () => {
-    // On forest plots we need to return every "study" or y axis value.
-    if (config.visualizationType === 'Forest Plot') return config.data.length
-    return countNumOfTicks('yAxis')
-  }
+    const maxValueIsGreaterThanTopGridLine = maxValue > Math.max(...yScale.ticks(handleNumTicks))
 
-  const getManualStep = () => {
-    let manualStep = config.xAxis.manualStep
-    if (config.xAxis.viewportStepCount && config.xAxis.viewportStepCount[currentViewport]) {
-      manualStep = config.xAxis.viewportStepCount[currentViewport]
-    }
-    return manualStep
-  }
+    if (!maxValueIsGreaterThanTopGridLine || !labelsOverflow) return
+    const ticks = yScale.ticks(handleNumTicks)
+    const tickGap = ticks.length === 1 ? ticks[0] : ticks[1] - ticks[0]
+    const nextTick = Math.max(...yScale.ticks(handleNumTicks)) + tickGap
+    const divideBy = minValue < 0 ? maxValue / 2 : maxValue
+    const calculatedPadding = (nextTick - maxValue) / divideBy
 
-  const onMouseMove = event => {
-    const svgRect = event.currentTarget.getBoundingClientRect()
-    const x = event.clientX - svgRect.left
-    const y = event.clientY - svgRect.top
+    // if auto padding is too close to next tick, add one more ticks worth of padding
+    const PADDING_THRESHOLD = 0.025
+    const newPadding =
+      calculatedPadding > PADDING_THRESHOLD ? calculatedPadding : calculatedPadding + tickGap / divideBy
 
-    setPoint({
-      x,
-      y
-    })
-  }
+    /* sometimes even though the padding is getting to the next tick exactly,
+    d3 still doesn't show the tick. we add 0.1 to ensure to tip it over the edge */
+    setYAxisAutoPadding(newPadding * 100 + 0.1)
+  }, [maxValue, labelsOverflow, yScale, handleNumTicks])
 
+  // Render Functions
   const generatePairedBarAxis = () => {
     const axisMaxHeight = bottomLabelStart + BOTTOM_LABEL_PADDING
 
     const getTickPositions = (ticks, xScale) => {
       if (!ticks.length) return false
-      // filterout first index
+      // filter out first index
       const filteredTicks = ticks.filter(tick => tick.index !== 0)
       const numberOfTicks = filteredTicks?.length
       const xMaxHalf = xScale.range()[0] || xMax / 2
       const tickWidthAll = filteredTicks.map(tick =>
-        getTextWidth(formatNumber(tick.value, 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
+        getTextWidth(formatNumber(tick.value, 'left'), `normal ${fontSizes[config.fontSize]}px sans-serif`)
       )
       const accumulator = 100
       const sumOfTickWidth = tickWidthAll.reduce((a, b) => a + b, accumulator)
@@ -498,7 +486,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 {props.ticks.map((tick, i) => {
                   const textWidth = getTextWidth(
                     formatNumber(tick.value, 'left'),
-                    `normal ${fontSize[config.fontSize]}px sans-serif`
+                    `normal ${fontSizes[config.fontSize]}px sans-serif`
                   )
                   const isTicksOverlapping = getTickPositions(props.ticks, g1xScale)
                   const maxTickRotation = Number(config.xAxis.maxTickRotation) || 90
@@ -550,7 +538,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   {props.ticks.map((tick, i) => {
                     const textWidth = getTextWidth(
                       formatNumber(tick.value, 'left'),
-                      `normal ${fontSize[config.fontSize]}px sans-serif`
+                      `normal ${fontSizes[config.fontSize]}px sans-serif`
                     )
                     const isTicksOverlapping = getTickPositions(props.ticks, g2xScale)
                     const maxTickRotation = Number(config.xAxis.maxTickRotation) || 90
@@ -611,7 +599,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           ref={svgRef}
           onMouseMove={onMouseMove}
           width={parentWidth}
-          height={parentHeight}
+          height={isNoDataAvailable ? 1 : parentHeight}
           className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${
             debugSvg && 'debug'
           } ${isDraggingAnnotation && 'dragging-annotation'}`}
@@ -626,7 +614,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             <AxisLeft
               scale={yScale}
               left={Number(runtime.yAxis.size) - config.yAxis.axisPadding}
-              numTicks={handleNumTicks()}
+              numTicks={handleNumTicks}
             >
               {props => {
                 const axisCenter =
@@ -690,7 +678,17 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               showTooltip={showTooltip}
             />
           )}
-          {visualizationType === 'Box Plot' && <BoxPlot xScale={xScale} yScale={yScale} />}
+          {visualizationType === 'Box Plot' && (
+            <BoxPlot
+              seriesScale={seriesScale}
+              xMax={xMax}
+              yMax={yMax}
+              min={min}
+              max={max}
+              xScale={xScale}
+              yScale={yScale}
+            />
+          )}
           {((visualizationType === 'Area Chart' && config.visualizationSubType === 'regular') ||
             visualizationType === 'Combo') && (
             <AreaChart
@@ -778,20 +776,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               isBrush={false}
             />
           )}
-          {/* y anchors */}
-          {config.yAxis.anchors &&
-            config.yAxis.anchors.map(anchor => {
-              return (
-                <Line
-                  strokeDasharray={handleLineType(anchor.lineStyle)}
-                  stroke='rgba(0,0,0,1)'
-                  className='customAnchor'
-                  from={{ x: 0 + config.yAxis.size, y: yScale(anchor.value) }}
-                  to={{ x: xMax, y: yScale(anchor.value) }}
-                  display={runtime.horizontal ? 'none' : 'block'}
-                />
-              )
-            })}
           {visualizationType === 'Forest Plot' && (
             <ForestPlot
               xScale={xScale}
@@ -814,16 +798,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             />
           )}
           {/*Brush chart */}
-          {config.brush.active && config.xAxis.type !== 'categorical' && (
-            <BrushChart
-              xScaleBrush={xScaleBrush}
-              yScale={yScale}
-              xMax={xMax}
-              yMax={yMax}
-              xScale={xScale}
-              seriesScale={seriesScale}
-            />
-          )}
+          {config.brush.active && config.xAxis.type !== 'categorical' && <BrushChart xMax={xMax} yMax={yMax} />}
           {/* Line chart */}
           {/* TODO: Make this just line or combo? */}
           {!['Paired Bar', 'Box Plot', 'Area Chart', 'Scatter Plot', 'Deviation Bar', 'Forecasting', 'Bar'].includes(
@@ -845,14 +820,19 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           {/* y anchors */}
           {config.yAxis.anchors &&
             config.yAxis.anchors.map((anchor, index) => {
-              let anchorPosition = yScale(anchor.value)
-              // have to move up
-              // const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
+              let position = yScale(anchor.value)
+              let middleOffset = 0
+
               if (!anchor.value) return
-              const middleOffset =
-                orientation === 'horizontal' && visualizationType === 'Bar' ? config.barHeight / 4 : 0
+              if (config.yAxis.labelPlacement === 'Below Bar') {
+                const textOffset = -6.5
+                middleOffset = textOffset + Number(config.series.length * config.barHeight) / config.series.length
+              } else {
+                const paddingOffset = 8
+                middleOffset = paddingOffset
+              }
 
-              if (!anchorPosition) return
+              if (!position) return
 
               return (
                 // prettier-ignore
@@ -861,8 +841,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   strokeDasharray={handleLineType(anchor.lineStyle)}
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-y'
-                  from={{ x: 0 + padding, y: anchorPosition - middleOffset}}
-                  to={{ x: width - config.yAxis.rightAxisSize, y: anchorPosition - middleOffset }}
+                  from={{ x: 0 + padding, y: position - middleOffset}}
+                  to={{ x: width - config.yAxis.rightAxisSize, y: position - middleOffset }}
                 />
               )
             })}
@@ -874,10 +854,19 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 newX = yAxis
               }
 
-              let anchorPosition = isDateScale(newX) ? xScale(parseDate(anchor.value, false)) : xScale(anchor.value)
+              const getAnchorPosition = (): number | undefined => {
+                let position: number | undefined
 
-              // have to move up
-              // const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
+                position = isDateScale(newX) ? xScale(parseDate(anchor.value, false)) : xScale(anchor.value)
+                if (config.xAxis.type === 'categorical' || config.xAxis.type === 'date') {
+                  position = position
+                    ? position + (newX.type === 'categorical' || newX.type === 'date' ? xScale.bandwidth() : 0) / 2
+                    : 0
+                }
+                return position
+              }
+
+              let anchorPosition = getAnchorPosition()
 
               if (!anchorPosition) return
 
@@ -939,7 +928,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               />
             </Group>
           )}
-          {config.filters && config.filters.values.length === 0 && data.length === 0 && (
+          {isNoDataAvailable && (
             <Text
               x={Number(config.yAxis.size) + Number(xMax / 2)}
               y={initialHeight / 2 - (config.xAxis.padding || 0) / 2}
@@ -1002,7 +991,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               label={runtime.yAxis.label || runtime.yAxis.label}
               stroke='#333'
               tickFormat={handleLeftTickFormatting}
-              numTicks={handleNumTicks()}
+              numTicks={handleNumTicks}
             >
               {props => {
                 const axisCenter =
@@ -1345,43 +1334,63 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               tickFormat={handleBottomTickFormatting}
               scale={xScale}
               stroke='#333'
-              numTicks={countNumOfTicks('xAxis')}
+              numTicks={useDateSpanMonths ? dateSpanMonths : xTickCount}
               tickStroke='#333'
               tickValues={
                 config.xAxis.manual
-                  ? getTickValues(
-                      xAxisDataMapped,
-                      xScale,
-                      config.xAxis.type === 'date-time' ? countNumOfTicks('xAxis') : getManualStep(),
-                      config
-                    )
+                  ? getTickValues(xAxisDataMapped, xScale, isDateTime ? xTickCount : getManualStep(), config)
+                  : config.xAxis.type === 'date'
+                  ? xAxisDataMapped
                   : undefined
               }
             >
               {props => {
+                // For these charts, we generated all ticks in tickValues above, and now need to filter/shift them
+                // so the last tick is always labeled
+                if (config.xAxis.type === 'date' && !config.xAxis.manual) {
+                  props.ticks = filterAndShiftLinearDateTicks(config, props, xAxisDataMapped, formatDate)
+                }
+
+                const distanceBetweenTicks =
+                  useDateSpanMonths &&
+                  xScale
+                    .ticks(xTickCount)
+                    .map(t => props.ticks.findIndex(tick => tick.value.getTime() === t.getTime()))
+                    .slice(0, 2)
+                    .reduce((acc, curr) => curr - acc)
+
+                // filter out every [distanceBetweenTicks] tick starting from the end, so the last tick is always labeled
+                const filteredTicks = useDateSpanMonths
+                  ? [...props.ticks]
+                      .reverse()
+                      .filter((_, i) => i % distanceBetweenTicks === 0)
+                      .reverse()
+                      .map((tick, i, arr) => ({
+                        ...tick,
+                        // reformat in case showYearsOnce, since first month of year may have changed
+                        formattedValue: handleBottomTickFormatting(tick.value, i, arr)
+                      }))
+                  : props.ticks
+
                 const axisMaxHeight = bottomLabelStart + BOTTOM_LABEL_PADDING
 
-                const axisCenter =
-                  config.visualizationType !== 'Forest Plot'
-                    ? (props.axisToPoint.x - props.axisFromPoint.x) / 2
-                    : dimensions[0] / 2
                 const containsMultipleWords = inputString => /\s/.test(inputString)
-                const ismultiLabel = props.ticks.some(tick => containsMultipleWords(tick.value))
+                const ismultiLabel = filteredTicks.some(tick => containsMultipleWords(tick.value))
 
                 // Calculate sumOfTickWidth here, before map function
                 const tickWidthMax = Math.max(
-                  ...props.ticks.map(tick =>
-                    getTextWidth(tick.formattedValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                  ...filteredTicks.map(tick =>
+                    getTextWidth(tick.formattedValue, `normal ${fontSizes[config.fontSize]}px sans-serif`)
                   )
                 )
                 // const marginTop = 20 // moved to top bc need for yMax calcs
                 const accumulator = ismultiLabel ? 180 : 100
 
-                const textWidths = props.ticks.map(tick =>
-                  getTextWidth(tick.formattedValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidths = filteredTicks.map(tick =>
+                  getTextWidth(tick.formattedValue, `normal ${fontSizes[config.fontSize]}px sans-serif`)
                 )
                 const sumOfTickWidth = textWidths.reduce((a, b) => a + b, accumulator)
-                const spaceBetweenEachTick = (xMax - sumOfTickWidth) / (props.ticks.length - 1)
+                const spaceBetweenEachTick = (xMax - sumOfTickWidth) / (filteredTicks.length - 1)
 
                 // Check if ticks are overlapping
                 // Determine the position of each tick
@@ -1409,6 +1418,16 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   areTicksTouching = true
                 }
 
+                // force wrap it last tick is close to the end of the axis
+                const lastTickWidth = textWidths[textWidths.length - 1]
+                const lastTickPosition = positions[positions.length - 1] + lastTickWidth
+                const lastTickEnd = lastTickPosition + lastTickWidth / 2
+                const lastTickEndThreshold = xMax - lastTickWidth
+
+                if (lastTickEnd > lastTickEndThreshold) {
+                  areTicksTouching = true
+                }
+
                 const dynamicMarginTop =
                   areTicksTouching && config.isResponsiveTicks ? tickWidthMax + DEFAULT_TICK_LENGTH + 20 : 0
 
@@ -1417,15 +1436,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
                 return (
                   <Group className='bottom-axis' width={dimensions[0]}>
-                    {props.ticks.map((tick, i, propsTicks) => {
+                    {filteredTicks.map((tick, i, propsTicks) => {
                       // when using LogScale show major ticks values only
                       const showTick = String(tick.value).startsWith('1') || tick.value === 0.1 ? 'block' : 'none'
                       const tickLength = showTick === 'block' ? 16 : DEFAULT_TICK_LENGTH
                       const to = { x: tick.to.x, y: tickLength }
-                      const textWidth = getTextWidth(
-                        tick.formattedValue,
-                        `normal ${fontSize[config.fontSize]}px sans-serif`
-                      )
                       const limitedWidth = 100 / propsTicks.length
                       //reset rotations by updating config
                       config.yAxis.tickRotation =
@@ -1476,7 +1491,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                     <Text
                       innerRef={xAxisTitleRef}
                       className='x-axis-title-label'
-                      x={axisCenter}
+                      x={xMax / 2}
                       y={isForestPlot ? 0 /* set via ref */ : axisMaxHeight}
                       textAnchor='middle'
                       verticalAnchor='start'

package/src/components/PieChart/PieChart.tsx

@@ -170,6 +170,7 @@ const PieChart = props => {
           )
         })}
         {transitions.map(({ item: arc, key }, i) => {
+          const roundTo = Number(config.dataFormat.roundTo) || 0
           const [centroidX, centroidY] = path.centroid(arc)
           const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
 
@@ -177,6 +178,11 @@ const PieChart = props => {
           if (_colorScale(arc.data[config.runtime.xAxis.dataKey])) {
             textColor = getContrastColor(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey]))
           }
+          const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
+
+          // Calculate the percentage of the full circle (360 degrees)
+          const percentageOfCircle = (degrees / 360) * 100
+          const roundedPercentage = percentageOfCircle.toFixed(roundTo)
 
           return (
             <animated.g key={`${key}${i}`}>
@@ -189,7 +195,7 @@ const PieChart = props => {
                   textAnchor='middle'
                   pointerEvents='none'
                 >
-                  {Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}
+                  {roundedPercentage + '%'}
                 </Text>
               )}
             </animated.g>