@cdc/chart 4.24.10 → 4.24.11

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -4,7 +4,14 @@ import { Group } from '@visx/group'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 
 const ScatterPlot = ({ xScale, yScale }) => {
-  const { transformedData: data, config, tableData, formatNumber, seriesHighlight, colorPalettes } = useContext(ConfigContext)
+  const {
+    transformedData: data,
+    config,
+    tableData,
+    formatNumber,
+    seriesHighlight,
+    colorPalettes
+  } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
   const circleRadii = 4.5
@@ -23,10 +30,19 @@ const ScatterPlot = ({ xScale, yScale }) => {
       }
     ])
   const handleTooltip = (item, s, dataIndex) => `<div>
-    ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[s] || ''}<br/>` : ''}
+    ${
+      config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries
+        ? `${config.runtime.seriesLabels[s] || ''}<br/>`
+        : ''
+    }
     ${config.xAxis.label}: ${formatNumber(item[config.xAxis.dataKey], 'bottom')} <br/>
     ${config.yAxis.label}: ${formatNumber(item[s], 'left')}<br/>
-   ${additionalColumns.map(([label, name, options]) => `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}<br/>`).join('')}
+   ${additionalColumns
+     .map(
+       ([label, name, options]) =>
+         `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}<br/>`
+     )
+     .join('')}
 </div>`
 
   return (
@@ -36,7 +52,7 @@ const ScatterPlot = ({ xScale, yScale }) => {
         return config.runtime.seriesKeys.map((s, index) => {
           const transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s) === -1
           const displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s) !== -1
-          const seriesColor = config.palette ? colorPalettes[config.palette][index] : '#000'
+          const seriesColor = config?.customColors ? config.customColors[index] : config.palette ? colorPalettes[config.palette][index] : '#000'
 
           let pointStyles = {
             filter: 'unset',

package/src/data/initial-state.js

@@ -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',

package/src/hooks/useLegendClasses.ts

@@ -1,22 +1,12 @@
-type ConfigType = {
-  legend: {
-    position: 'left' | 'bottom' | 'top' | 'right'
-    singleRow?: boolean
-    reverseLabelOrder?: boolean
-    verticalSorted?: boolean
-    hideBorder: {
-      side?: boolean
-      topBottom?: boolean
-    }
-  }
-}
+import { ChartConfig } from '../types/ChartConfig'
 
-const useLegendClasses = (config: ConfigType) => {
+const useLegendClasses = (config: ChartConfig) => {
+  const { position, singleRow, reverseLabelOrder, verticalSorted, hideBorder } = config.legend
   const containerClasses = ['legend-container']
   const innerClasses = ['legend-container__inner']
 
   // Handle legend positioning
-  switch (config.legend.position) {
+  switch (position) {
     case 'left':
       containerClasses.push('left')
       break
@@ -34,33 +24,30 @@ const useLegendClasses = (config: ConfigType) => {
   }
 
   // Handle single row configuration for 'bottom' and 'top' positions
-  if (['bottom', 'top'].includes(config.legend.position) && config.legend.singleRow) {
+  if (['bottom', 'top'].includes(position) && singleRow) {
     innerClasses.push('single-row')
   }
 
   // Reverse label order
-  if (config.legend.reverseLabelOrder) {
+  if (reverseLabelOrder) {
     innerClasses.push('d-flex', 'flex-column-reverse')
   }
 
   // Vertical sorting for 'bottom' and 'top' positions
-  if (['bottom', 'top'].includes(config.legend.position) && config.legend.verticalSorted) {
+  if (['bottom', 'top'].includes(position) && verticalSorted) {
     innerClasses.push('vertical-sorted')
   }
 
   // Configure border classes
-  if (
-    config.legend.hideBorder.side &&
-    (['right', 'left'].includes(config.legend.position) || !config.legend.position)
-  ) {
+  if (hideBorder.side && (['right', 'left'].includes(position) || !position)) {
     containerClasses.push('no-border')
   }
 
-  if (config.legend.hideBorder.topBottom && ['top', 'bottom'].includes(config.legend.position)) {
+  if (hideBorder.topBottom && ['top', 'bottom'].includes(position)) {
     containerClasses.push('no-border')
   }
 
-  if (config.legend.hideBorder.topBottom && ['top'].includes(config.legend.position)) {
+  if (hideBorder.topBottom && ['top'].includes(position)) {
     containerClasses.push('p-0')
   }
 

package/src/hooks/useMinMax.ts

@@ -40,11 +40,13 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   const minRequiredCIPadding = 1.15 // regardless of Editor if CI data, there must be 10% padding added
   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 || {}
 
@@ -122,8 +124,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 +133,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 +153,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 +185,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
         return valueMatch && (index === 0 || index === tableData.length - 1)
       })
     })
-    min = enteredMinValue && isMinValid ? enteredMinValue : suppressedMinValue ? 0 : minValue
+    min = Number(enteredMinValue) && isMinValid ? Number(enteredMinValue) : suppressedMinValue ? 0 : minValue
   }
   //If data value max wasn't provided, calculate it
   if (max === Number.MIN_VALUE) {

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,9 @@
-import { LogScaleConfig, scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } from '@visx/scale'
+import { LinearScaleConfig, LogScaleConfig, scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } 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'
+
 const scaleTypes = {
   TIME: 'time',
   LOG: 'log',
@@ -31,8 +31,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 +63,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 +75,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 +107,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 +117,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 +153,19 @@ const useScales = (properties: useScaleProps) => {
     if (highestFence > max) max = highestFence
 
     // Set Scales
+
     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: config.boxplot.categories
     })
     xScale.type = scaleTypes.BAND
+
+    seriesScale = composeScalePoint(seriesDomain, [0, yMax])
   }
 
   // handle Paired bar
@@ -193,10 +196,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 +210,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 +239,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],
@@ -386,3 +389,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))
+  }
+}