@cdc/chart 4.24.11 → 4.24.12-2

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,7 +37,7 @@ 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 ? Number(enteredMaxValue) >= maxValue : Number(enteredMaxValue) >= 0
@@ -52,8 +52,10 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   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')) {
@@ -185,7 +187,15 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
         return valueMatch && (index === 0 || index === tableData.length - 1)
       })
     })
-    min = Number(enteredMinValue) && isMinValid ? Number(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) {
@@ -226,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/useScales.ts

@@ -1,8 +1,18 @@
-import { LinearScaleConfig, 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 _ from 'lodash'
 
 const scaleTypes = {
   TIME: 'time',
@@ -154,6 +164,9 @@ const useScales = (properties: useScaleProps) => {
 
     // 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,
@@ -161,11 +174,10 @@ const useScales = (properties: useScaleProps) => {
     })
     xScale = scaleBand({
       range: [0, xMax],
-      domain: config.boxplot.categories
+      domain: categories
     })
     xScale.type = scaleTypes.BAND
-
-    seriesScale = composeScalePoint(seriesDomain, [0, yMax])
+    seriesScale = composeScaleBand(domain, range)
   }
 
   // handle Paired bar
@@ -327,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

package/src/hooks/useTooltip.tsx

@@ -553,9 +553,13 @@ export const useTooltip = props => {
             (!pd.column || key === pd.column)
         )) ||
       {}
-    const newValue = label || value
+    let newValue = label || value
     const style = displayGray ? { color: '#8b8b8a' } : {}
 
+    if (index == 1 && config.dataFormat.onlyShowTopPrefixSuffix) {
+      newValue = `${config.dataFormat.prefix}${newValue}${config.dataFormat.suffix}`
+    }
+
     return <li style={style} className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${newValue}`}</li>
   }
 

package/src/scss/DataTable.scss

@@ -1,5 +1,10 @@
 .data-table-container {
   margin: 20px 0 0;
+
+  &.brush-active {
+    margin: 80px 0 0;
+  }
+
   width: 100%;
   &.download-link-above {
     margin: 0;

package/src/scss/main.scss

@@ -140,7 +140,7 @@
   .subtext--responsive-ticks,
   .section-subtext {
     &--brush-active {
-      margin-top: 2.5em;
+      margin-top: 3em !important;
     }
   }
 
@@ -159,7 +159,7 @@
     border: 1px solid var(--lightGray);
     position: relative;
 
-    &.no-border {
+    &.border-0 {
       border: 1px solid transparent;
       padding: 0;
     }
@@ -261,6 +261,10 @@
     }
   }
 
+  .legend-container__inner.flex-column-reverse div.legend-item:last-child {
+    margin-bottom: 0.2rem !important;
+  }
+
   .dynamic-legend-list {
     // overide traditional legend item that uses !important
     .legend-item {