@cdc/chart 4.24.10 → 4.24.12

package/src/data/initial-state.js

@@ -49,7 +49,7 @@ export default {
     labelColor: '#333',
     tickLabelColor: '#333',
     tickColor: '#333',
-    rightHideAxis: true,
+    rightHideAxis: false,
     rightAxisSize: 0,
     rightLabel: '',
     rightLabelOffsetSize: 0,
@@ -68,15 +68,8 @@ export default {
   boxplot: {
     plots: [],
     borders: 'true',
-    firstQuartilePercentage: 25,
-    thirdQuartilePercentage: 75,
-    boxWidthPercentage: 40,
     plotOutlierValues: false,
     plotNonOutlierValues: true,
-    legend: {
-      showHowToReadText: false,
-      howToReadText: ''
-    },
     labels: {
       q1: 'Lower Quartile',
       q2: 'q2',
@@ -88,7 +81,7 @@ export default {
       median: 'Median',
       sd: 'Standard Deviation',
       iqr: 'Interquartile Range',
-      total: 'Total',
+      count: 'Count',
       outliers: 'Outliers',
       values: 'Values',
       lowerBounds: 'Lower Bounds',
@@ -128,7 +121,8 @@ export default {
     target: 0,
     maxTickRotation: 0,
     padding: 5,
-    showYearsOnce: false
+    showYearsOnce: false,
+    sortByRecentDate: false
   },
   table: {
     label: 'Data Table',
@@ -177,10 +171,11 @@ export default {
     hideBorder: {
       side: false,
       topBottom: true
-    }
+    },
+    position: 'right'
   },
   brush: {
-    height: 25,
+    height: 45,
     active: false
   },
   exclusions: {

package/src/helpers/countNumOfTicks.ts

@@ -0,0 +1,57 @@
+export const countNumOfTicks = ({ axis, max, runtime, currentViewport, isHorizontal, data, config, min }) => {
+  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) && !isHorizontal) {
+      // 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
+      }
+    }
+
+    if (config.visualizationType === 'Forest Plot') {
+      tickCount = config.yAxis.numTicks !== '' ? config.yAxis.numTicks : 4
+    }
+  }
+
+  return tickCount
+}

package/src/helpers/getQuartiles.ts

@@ -4,27 +4,24 @@
  * @param {Array} arr - The array of integers or decimals.
  * @returns {Object} An object containing the q1 and q3 values.
  */
-export const getQuartiles = arr => {
-  arr.sort((a, b) => a - b)
+import _ from 'lodash'
 
-  // Calculate the index of the median value of the array
-  const medianIndex = Math.floor(arr.length / 2)
+export const getQuartiles = (values: number[]): { q1: number; q3: number } => {
+  const sortedData: number[] = _.sortBy(values)
 
-  // Check if the length of the array is even or odd
-  const isEvenLength = arr.length % 2 === 0
+  const quantile = (sortedData: number[], q: number): number => {
+    const position: number = (sortedData.length - 1) * q
+    const base: number = Math.floor(position)
+    const rest: number = position - base
+    if (sortedData[base + 1] !== undefined) {
+      return sortedData[base] + rest * (sortedData[base + 1] - sortedData[base])
+    } else {
+      return sortedData[base]
+    }
+  }
 
-  // Split the array into two subarrays based on the median index
-  const q1Array = isEvenLength ? arr.slice(0, medianIndex) : arr.slice(0, medianIndex + 1)
-  const q3Array = isEvenLength ? arr.slice(medianIndex) : arr.slice(medianIndex + 1)
+  const q1: number = quantile(sortedData, 0.25)
+  const q3: number = quantile(sortedData, 0.75)
 
-  // Calculate the median of the first subarray to get the q1 value
-  const q1Index = Math.floor(q1Array.length / 2)
-  const q1 = isEvenLength ? (q1Array[q1Index - 1] + q1Array[q1Index]) / 2 : q1Array[q1Index]
-
-  // Calculate the median of the second subarray to get the q3 value
-  const q3Index = Math.floor(q3Array.length / 2)
-  const q3 = isEvenLength ? (q3Array[q3Index - 1] + q3Array[q3Index]) / 2 : q3Array[q3Index]
-
-  // Return an object containing the q1 and q3 values
   return { q1, q3 }
 }

package/src/hooks/useMinMax.ts

@@ -37,21 +37,25 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   const { visualizationType, series } = config
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
-  const minRequiredCIPadding = 1.15 // regardless of Editor if CI data, there must be 10% padding added
+  const paddingAddedToAxis = config.yAxis.enablePadding ? 1 + config.yAxis.scalePadding / 100 : 1
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   // do validation bafore applying t0 charts
-  const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
-  const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 : (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
+  const isMaxValid = existPositiveValue ? Number(enteredMaxValue) >= maxValue : Number(enteredMaxValue) >= 0
+  const isMinValid = isLogarithmicAxis
+    ? Number(enteredMinValue) >= 0
+    : (Number(enteredMinValue) <= 0 && minValue >= 0) || (Number(enteredMinValue) <= minValue && minValue < 0)
 
-  min = enteredMinValue && isMinValid ? enteredMinValue : minValue
-  max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
+  min = enteredMinValue && isMinValid ? Number(enteredMinValue) : minValue
+  max = enteredMaxValue && isMaxValid ? Number(enteredMaxValue) : Number.MIN_VALUE
 
   const { lower, upper } = config?.confidenceKeys || {}
 
   if (lower && upper && config.visualizationType === 'Bar') {
     const buffer = min < 0 ? 1.1 : 0
-    max = Math.max(maxValue, Math.max(...data.flatMap(d => [d[upper], d[lower]])) * 1.15)
-    min = Math.min(minValue, Math.min(...data.flatMap(d => [d[upper], d[lower]])) * 1.15) * buffer
+    const maxValueWithCI = Math.max(...data.flatMap(d => [d[upper], d[lower]])) * paddingAddedToAxis
+    const minValueWithCIPlusBuffer = Math.min(...data.flatMap(d => [d[upper], d[lower]])) * paddingAddedToAxis * buffer
+    max = max > maxValueWithCI ? max : maxValueWithCI
+    min = min < minValueWithCIPlusBuffer ? min : minValueWithCIPlusBuffer
   }
 
   if (config.series.filter(s => s?.type === 'Forecasting')) {
@@ -122,8 +126,8 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
       leftMax = findMaxFromSeriesKeys(data, leftAxisSeriesItems, leftMax, 'left')
       rightMax = findMaxFromSeriesKeys(data, rightAxisSeriesItems, rightMax, 'right')
 
-      if (leftMax < enteredMaxValue) {
-        leftMax = enteredMaxValue
+      if (leftMax < Number(enteredMaxValue)) {
+        leftMax = Number(enteredMaxValue)
       }
     } catch (e) {
       console.error(e.message)
@@ -131,10 +135,18 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   }
 
   // this should not apply to bar charts if there is negative CI data
-  if ((visualizationType === 'Bar' || checkLineToBarGraph() || (visualizationType === 'Combo' && !isAllLine)) && min > 0) {
+  if (
+    (visualizationType === 'Bar' || checkLineToBarGraph() || (visualizationType === 'Combo' && !isAllLine)) &&
+    min > 0
+  ) {
     min = 0
   }
-  if ((config.visualizationType === 'Bar' || checkLineToBarGraph() || (config.visualizationType === 'Combo' && !isAllLine)) && min < 0) {
+  if (
+    (config.visualizationType === 'Bar' ||
+      checkLineToBarGraph() ||
+      (config.visualizationType === 'Combo' && !isAllLine)) &&
+    min < 0
+  ) {
     min = min * 1.1
   }
 
@@ -143,18 +155,22 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
       min = 0
     }
     if (enteredMinValue) {
-      const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
-      min = enteredMinValue && isMinValid ? enteredMinValue : minValue
+      const isMinValid = isLogarithmicAxis
+        ? Number(enteredMinValue) >= 0 && Number(enteredMinValue) < minValue
+        : Number(enteredMinValue) < minValue
+      min = Number(enteredMinValue) && isMinValid ? Number(enteredMinValue) : minValue
     }
   }
 
   if (config.visualizationType === 'Deviation Bar' && min > 0) {
     const isMinValid = Number(enteredMinValue) < Math.min(minValue, Number(config.xAxis.target))
-    min = enteredMinValue && isMinValid ? enteredMinValue : 0
+    min = Number(enteredMinValue) && isMinValid ? Number(enteredMinValue) : 0
   }
 
   if (config.visualizationType === 'Line' && !checkLineToBarGraph()) {
-    const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
+    const isMinValid = isLogarithmicAxis
+      ? Number(enteredMinValue) >= 0 && Number(enteredMinValue) < minValue
+      : Number(enteredMinValue) < minValue
     // update minValue for (0) Suppression points
     const suppressedMinValue = tableData?.some((dataItem, index) => {
       return config.preliminaryData?.some(pd => {
@@ -171,7 +187,15 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
         return valueMatch && (index === 0 || index === tableData.length - 1)
       })
     })
-    min = enteredMinValue && isMinValid ? enteredMinValue : suppressedMinValue ? 0 : minValue
+    let isCategoricalAxis = config.yAxis.type === 'categorical'
+    min =
+      enteredMinValue !== '' && isMinValid
+        ? Number(enteredMinValue)
+        : suppressedMinValue
+        ? 0
+        : isCategoricalAxis
+        ? 0
+        : minValue
   }
   //If data value max wasn't provided, calculate it
   if (max === Number.MIN_VALUE) {
@@ -212,6 +236,10 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     }
   }
 
+  if (config.visualizationType === 'Area Chart' && config.visualizationSubType === 'stacked') {
+    min = 0
+  }
+
   return { min, max, leftMax, rightMax }
 }
 export default useMinMax

package/src/hooks/useReduceData.ts

@@ -3,12 +3,28 @@ import isNumber from '@cdc/core/helpers/isNumber'
 function useReduceData(config, data) {
   const isBar = config.series.every(({ type }) => type === 'Bar')
   const isAllLine = config.series.every(({ type }) => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(type))
-  const sumYValues = seriesKeys => xValue => seriesKeys.reduce((yTotal, k) => (isNaN(Number(xValue[k])) ? yTotal : yTotal + Number(xValue[k])), 0)
-
+  const sumYValues = seriesKeys => xValue =>
+    seriesKeys.reduce((yTotal, k) => (isNaN(Number(xValue[k])) ? yTotal : yTotal + Number(xValue[k])), 0)
+  const getSeriesKey = seriesKey => {
+    const series = config.runtime.series.find(item => item.dataKey === seriesKey)
+    return series?.dynamicCategory ? series.originalDataKey : seriesKey
+  }
   const getMaxValueFromData = () => {
-    let max = Math.max(...data.map(d => Math.max(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : 0)))))
-
-    if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) && config.visualizationSubType === 'stacked') {
+    let max = Math.max(
+      ...data.map(d =>
+        Math.max(
+          ...config.runtime.seriesKeys.map(key => {
+            const seriesKey = getSeriesKey(key)
+            return isNumber(d[seriesKey]) ? Number(cleanChars(d[seriesKey])) : 0
+          })
+        )
+      )
+    )
+
+    if (
+      (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) &&
+      config.visualizationSubType === 'stacked'
+    ) {
       const yTotals = data.map(sumYValues(config.runtime.seriesKeys)).filter(num => !isNaN(num))
       max = Math.max(...yTotals)
     }
@@ -18,15 +34,23 @@ function useReduceData(config, data) {
       max = Math.max(...yTotals)
     }
 
-    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar') && config.series && config.series.dataKey) {
-      max = Math.max(...data.map(d => (isNumber(d[config.series.dataKey]) ? Number(cleanChars(d[config.series.dataKey])) : 0)))
+    if (
+      (config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar') &&
+      config.series &&
+      config.series.dataKey
+    ) {
+      max = Math.max(
+        ...data.map(d => (isNumber(d[config.series.dataKey]) ? Number(cleanChars(d[config.series.dataKey])) : 0))
+      )
     }
 
     if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
       if (config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys) {
         const yTotals = data.map(sumYValues(config.runtime.barSeriesKeys))
 
-        const lineMax = Math.max(...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key]))))))
+        const lineMax = Math.max(
+          ...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key])))))
+        )
         const barMax = Math.max(...yTotals)
 
         max = Math.max(barMax, lineMax)
@@ -37,7 +61,16 @@ function useReduceData(config, data) {
   }
 
   const getMinValueFromData = () => {
-    const minNumberFromData = Math.min(...data.map(d => Math.min(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : Infinity)))))
+    const minNumberFromData = Math.min(
+      ...data.map(d =>
+        Math.min(
+          ...config.runtime.seriesKeys.map(key => {
+            const seriesKey = getSeriesKey(key)
+            return isNumber(d[seriesKey]) ? Number(cleanChars(d[seriesKey])) : Infinity
+          })
+        )
+      )
+    )
 
     return String(minNumberFromData)
   }
@@ -46,7 +79,7 @@ function useReduceData(config, data) {
     if (!config.runtime.seriesKeys) {
       return false
     }
-    return config.runtime.seriesKeys.some(key => data.some(d => d[key] >= 0))
+    return config.runtime.seriesKeys.some(key => data.some(d => d[getSeriesKey(key)] >= 0))
   }
 
   const cleanChars = value => {

package/src/hooks/useScales.ts

@@ -1,9 +1,19 @@
-import { LogScaleConfig, scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } from '@visx/scale'
+import {
+  LinearScaleConfig,
+  LogScaleConfig,
+  scaleBand,
+  scaleLinear,
+  scaleLog,
+  scalePoint,
+  scaleTime,
+  getTicks
+} from '@visx/scale'
 import { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
 import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
-import * as d3 from 'd3'
+import _ from 'lodash'
+
 const scaleTypes = {
   TIME: 'time',
   LOG: 'log',
@@ -31,8 +41,7 @@ const useScales = (properties: useScaleProps) => {
   const seriesDomain = config.runtime.barSeriesKeys || config.runtime.seriesKeys
   const xAxisType = config.runtime.xAxis.type
   const isHorizontal = config.orientation === 'horizontal'
-
-  const { visualizationType } = config
+  const { visualizationType, xAxis, forestPlot } = config
 
   //  define scales
   let xScale = null
@@ -64,11 +73,11 @@ const useScales = (properties: useScaleProps) => {
 
   // handle Linear scaled viz
   if (config.xAxis.type === 'date' && !isHorizontal) {
-    const xAxisDataMappedSorted = xAxisDataMapped ? xAxisDataMapped.sort() : []
+    const xAxisDataMappedSorted = sortXAxisData(xAxisDataMapped, config.xAxis.sortByRecentDate)
     xScale = composeScaleBand(xAxisDataMappedSorted, [0, xMax], 1 - config.barThickness)
   }
 
-  if (config.xAxis.type === 'date-time') {
+  if (xAxis.type === 'date-time' || xAxis.type === 'continuous') {
     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)
@@ -76,15 +85,17 @@ const useScales = (properties: useScaleProps) => {
       visualizationType === 'Line'
         ? 0
         : (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
+    const range = config.xAxis.sortByRecentDate ? [xMax, 0] : [0, xMax]
     xScale = scaleTime({
       domain: [xAxisMin, xAxisMax],
-      range: [0, xMax]
+      range: range
     })
 
     xScale.type = scaleTypes.TIME
 
     let minDistance = Number.MAX_VALUE
-    let xAxisDataMappedSorted = xAxisDataMapped ? xAxisDataMapped.sort() : []
+    let xAxisDataMappedSorted = sortXAxisData(xAxisDataMapped, config.xAxis.sortByRecentDate)
+
     for (let i = 0; i < xAxisDataMappedSorted.length - 1; i++) {
       let distance = xScale(xAxisDataMappedSorted[i + 1]) - xScale(xAxisDataMappedSorted[i])
 
@@ -106,7 +117,7 @@ const useScales = (properties: useScaleProps) => {
       range: [0, yMax]
     })
     xScale = scaleLinear({
-      domain: [min * leftOffset, Math.max(Number(config.xAxis.target), max)],
+      domain: [min * leftOffset, Math.max(Number(xAxis.target), max)],
       range: [0, xMax],
       round: true,
       nice: true
@@ -116,9 +127,11 @@ const useScales = (properties: useScaleProps) => {
 
   // handle Scatter plot
   if (config.visualizationType === 'Scatter Plot') {
-    if (config.xAxis.type === 'continuous') {
+    if (xAxis.type === 'continuous') {
+      let min = xAxis.min ? xAxis.min : Math.min.apply(null, xScale.domain())
+      let max = xAxis.max ? xAxis.max : Math.max.apply(null, xScale.domain())
       xScale = scaleLinear({
-        domain: [0, Math.max.apply(null, xScale.domain())],
+        domain: [min, max],
         range: [0, xMax]
       })
       xScale.type = scaleTypes.LINEAR
@@ -150,19 +163,21 @@ const useScales = (properties: useScaleProps) => {
     if (highestFence > max) max = highestFence
 
     // Set Scales
+
+    const categories = _.uniq(data.map(d => d[config.xAxis.dataKey]))
+    const range = [0, config.barThickness * 100 || 1]
+    const domain = _.map(config.series, 'dataKey')
     yScale = scaleLinear({
       range: [yMax, 0],
       round: true,
       domain: [min, max]
     })
-
     xScale = scaleBand({
       range: [0, xMax],
-      round: true,
-      domain: config.boxplot.categories,
-      padding: 0.4
+      domain: categories
     })
     xScale.type = scaleTypes.BAND
+    seriesScale = composeScaleBand(domain, range)
   }
 
   // handle Paired bar
@@ -193,10 +208,10 @@ const useScales = (properties: useScaleProps) => {
 
   if (visualizationType === 'Forest Plot') {
     const resolvedYRange = () => {
-      if (config.forestPlot.regression.showDiamond || config.forestPlot.regression.description) {
-        return [0 + config.forestPlot.rowHeight * 2, yMax - config.forestPlot.rowHeight]
+      if (forestPlot.regression.showDiamond || forestPlot.regression.description) {
+        return [0 + forestPlot.rowHeight * 2, yMax - forestPlot.rowHeight]
       } else {
-        return [0 + config.forestPlot.rowHeight * 2, yMax]
+        return [0 + forestPlot.rowHeight * 2, yMax]
       }
     }
 
@@ -207,26 +222,26 @@ const useScales = (properties: useScaleProps) => {
 
     const xAxisPadding = 5
 
-    const leftWidthOffset = (Number(config.forestPlot.leftWidthOffset) / 100) * xMax
-    const rightWidthOffset = (Number(config.forestPlot.rightWidthOffset) / 100) * xMax
+    const leftWidthOffset = (Number(forestPlot.leftWidthOffset) / 100) * xMax
+    const rightWidthOffset = (Number(forestPlot.rightWidthOffset) / 100) * xMax
 
-    const rightWidthOffsetMobile = (Number(config.forestPlot.rightWidthOffsetMobile) / 100) * xMax
-    const leftWidthOffsetMobile = (Number(config.forestPlot.leftWidthOffsetMobile) / 100) * xMax
+    const rightWidthOffsetMobile = (Number(forestPlot.rightWidthOffsetMobile) / 100) * xMax
+    const leftWidthOffsetMobile = (Number(forestPlot.leftWidthOffsetMobile) / 100) * xMax
 
     if (screenWidth > 480) {
-      if (config.forestPlot.type === 'Linear') {
+      if (forestPlot.type === 'Linear') {
         xScale = scaleLinear({
           domain: [
-            Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding,
-            Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding
+            Math.min(...data.map(d => parseFloat(d[forestPlot.lower]))) - xAxisPadding,
+            Math.max(...data.map(d => parseFloat(d[forestPlot.upper]))) + xAxisPadding
           ],
           range: [leftWidthOffset, Number(screenWidth) - rightWidthOffset]
         })
         xScale.type = scaleTypes.LINEAR
       }
-      if (config.forestPlot.type === 'Logarithmic') {
-        let max = Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper])))
-        let fp_min = Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower])))
+      if (forestPlot.type === 'Logarithmic') {
+        let max = Math.max(...data.map(d => parseFloat(d[forestPlot.upper])))
+        let fp_min = Math.min(...data.map(d => parseFloat(d[forestPlot.lower])))
 
         xScale = scaleLog<LogScaleConfig>({
           domain: [fp_min, max],
@@ -236,20 +251,20 @@ const useScales = (properties: useScaleProps) => {
         xScale.type = scaleTypes.LOG
       }
     } else {
-      if (config.forestPlot.type === 'Linear') {
-        xScale = scaleLinear({
+      if (forestPlot.type === 'Linear') {
+        xScale = scaleLinear<LinearScaleConfig>({
           domain: [
-            Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding,
-            Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding
+            Math.min(...data.map(d => parseFloat(d[forestPlot.lower]))) - xAxisPadding,
+            Math.max(...data.map(d => parseFloat(d[forestPlot.upper]))) + xAxisPadding
           ],
           range: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
           type: scaleTypes.LINEAR
         })
       }
 
-      if (config.forestPlot.type === 'Logarithmic') {
-        let max = Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper])))
-        let fp_min = Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower])))
+      if (forestPlot.type === 'Logarithmic') {
+        let max = Math.max(...data.map(d => parseFloat(d[forestPlot.upper])))
+        let fp_min = Math.min(...data.map(d => parseFloat(d[forestPlot.lower])))
 
         xScale = scaleLog<LogScaleConfig>({
           domain: [fp_min, max],
@@ -324,6 +339,28 @@ export const getTickValues = (xAxisDataMapped, xScale, num, config) => {
   }
 }
 
+// Ensure that the last tick is shown for charts with a "Date (Linear Scale)" scale
+export const filterAndShiftLinearDateTicks = (config, axisProps, xAxisDataMapped, formatDate) => {
+  let ticks = axisProps.ticks
+  const filteredTickValues = getTicks(axisProps.scale, axisProps.numTicks)
+  if (filteredTickValues.length < xAxisDataMapped.length) {
+    let shift = 0
+    const lastIdx = xAxisDataMapped.indexOf(filteredTickValues[filteredTickValues.length - 1])
+    if (lastIdx < xAxisDataMapped.length - 1) {
+      shift = !config.xAxis.sortByRecentDate
+        ? xAxisDataMapped.length - 1 - lastIdx
+        : xAxisDataMapped.indexOf(filteredTickValues[0]) * -1
+    }
+    ticks = filteredTickValues.map(value => {
+      return axisProps.ticks[axisProps.ticks.findIndex(tick => tick.value === value) + shift]
+    })
+  }
+  ticks.forEach((tick, i) => {
+    tick.formattedValue = formatDate(tick.value, i, ticks)
+  })
+  return ticks
+}
+
 /// helper functions
 const composeXScale = ({ min, max, xMax, config }) => {
   // Adjust min value if using logarithmic scale
@@ -386,3 +423,21 @@ const composeScaleBand = (domain, range, padding = 0) => {
     padding: padding
   })
 }
+
+const sortXAxisData = (xAxisData, sortByRecentDate) => {
+  if (!xAxisData || xAxisData.length === 0) {
+    return []
+  }
+
+  // Check if the array has only one item
+  if (xAxisData.length === 1) {
+    return xAxisData
+  }
+  if (sortByRecentDate) {
+    // Sort from newest to oldes (recent dates first)
+    return xAxisData.sort((a, b) => Number(b) - Number(a))
+  } else {
+    // Sort from oldest to newest
+    return xAxisData.sort((a, b) => Number(a) - Number(b))
+  }
+}