@cdc/chart 4.24.9 → 4.24.11

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,24 +63,29 @@ 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)
-    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)
+    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])
 
@@ -103,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
@@ -113,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
@@ -147,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
@@ -190,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]
       }
     }
 
@@ -204,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],
@@ -233,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],
@@ -264,14 +270,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 +306,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
   }
 
@@ -358,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))
+  }
+}

package/src/hooks/useTooltip.tsx

@@ -7,6 +7,7 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 // Third-party library imports
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
+import _ from 'lodash'
 
 export const useTooltip = props => {
   const {
@@ -56,14 +57,9 @@ export const useTooltip = props => {
   const getFormattedValue = (seriesKey, value, config, getAxisPosition) => {
     // handle case where data is missing
     const showMissingDataValue = config.general.showMissingDataLabel && (!value || value === 'null')
-    let formattedValue = seriesKey === config.xAxis.dataKey ? value : formatNumber(value, getAxisPosition(seriesKey))
+    const formattedValue = seriesKey === config.xAxis.dataKey ? value : formatNumber(value, getAxisPosition(seriesKey))
 
-    formattedValue =
-      showMissingDataValue && (config.visualizationSubType === 'stacked' ? !config.general.hideNullValue : true)
-        ? 'N/A'
-        : formattedValue
-
-    return formattedValue
+    return showMissingDataValue ? 'N/A' : formattedValue
   }
 
   const getTooltipInformation = (tooltipDataArray, eventSvgCoords) => {
@@ -104,37 +100,9 @@ export const useTooltip = props => {
 
     const closestXScaleValue = getXValueFromCoordinate(x - Number(config.yAxis.size || 0))
 
-    const includedSeries =
-      visualizationType !== 'Pie'
-        ? config.runtime.series.filter(series => series.tooltip === true).map(item => item.dataKey)
-        : config.runtime.series.map(item => item.dataKey)
-    includedSeries.push(config.xAxis.dataKey)
-    if (config.visualizationType === 'Forecasting') {
-      config.runtime.series.map(s => {
-        s.confidenceIntervals.map(c => {
-          if (c.showInTooltip) {
-            includedSeries.push(c.high)
-            includedSeries.push(c.low)
-          }
-        })
-      })
-    }
-    function getColumnNames(columns) {
-      let names = []
-      for (let key in columns) {
-        if (columns.hasOwnProperty(key)) {
-          names.push(columns[key].name)
-        }
-      }
-      return names
-    }
-    includedSeries.push(...getColumnNames(config.columns))
-    includedSeries.push(...getColumnNames(config.columns))
-
-    const yScaleValues = getYScaleValues(closestXScaleValue, includedSeries)
     const xScaleValues = data.filter(d => d[xAxis.dataKey] === getClosestYValue(y))
 
-    const resolvedScaleValues = orientation === 'vertical' ? yScaleValues : xScaleValues
+    const resolvedScaleValues = orientation === 'vertical' ? getYScaleValues(closestXScaleValue) : xScaleValues
 
     const getAxisPosition = seriesKey => {
       const seriesObj = config.runtime.series.filter(s => s.dataKey === seriesKey)[0]
@@ -190,18 +158,36 @@ export const useTooltip = props => {
       if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot' && !config.tooltips.singleSeries) {
         tooltipItems.push(
           ...getIncludedTooltipSeries()
-            ?.filter(
-              seriesKey =>
-                config.runtime.series?.find(item => item.dataKey === seriesKey && item?.tooltip) ||
-                config.xAxis?.dataKey == seriesKey ||
-                visualizationType === 'Forecasting'
-            )
+            ?.filter(seriesKey => {
+              const series = config.runtime.series?.find(
+                s => s.dataKey === seriesKey && s?.tooltip && !s.dynamicCategory
+              )
+              return series || config.xAxis?.dataKey == seriesKey || visualizationType === 'Forecasting'
+            })
             ?.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)]]
+              }
             })
         )
+
+        config.runtime.series?.forEach(series => {
+          if (series?.dynamicCategory) {
+            const seriesKey = series.dataKey
+            const resolvedScaleValue = resolvedScaleValues.find(v => v[series.dynamicCategory] === seriesKey)
+            if (!resolvedScaleValue) return
+            const value = resolvedScaleValue[series.originalDataKey]
+            const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
+            tooltipItems.push([seriesKey, formattedValue, getAxisPosition(seriesKey)])
+          }
+        })
       }
 
       // handle tooltip for single hovered series
@@ -372,25 +358,48 @@ export const useTooltip = props => {
   /**
    * Provides an array of objects with the closest y series data items
    * @param {String} closestXScaleValue
-   * @param {Array} includedSeries
    * @returns an array of objects with the closest y series data items
    */
-  const getYScaleValues = (closestXScaleValue, includedSeries) => {
-    try {
-      let dataToSearch
+  const getYScaleValues = closestXScaleValue => {
+    const runtimeSeries = config.runtime.series.filter(
+      series => visualizationType === 'Pie' || (series.tooltip === true && !series.dynamicCategory)
+    )
+    const includedSeries = runtimeSeries.map(item => item.dataKey)
+    includedSeries.push(config.xAxis.dataKey)
+    // get dynamic category series
+    const dynamicDataCategories = _.uniq(
+      config.runtime.series.flatMap(series => {
+        if (series.dynamicCategory) {
+          return [series.dynamicCategory, series.originalDataKey]
+        }
+      })
+    )
+    includedSeries.push(...dynamicDataCategories)
 
-      if (xAxis.type === 'categorical') {
-        dataToSearch = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
-      } else {
-        dataToSearch = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
-      }
+    if (config.visualizationType === 'Forecasting') {
+      config.runtime.series.map(s => {
+        s.confidenceIntervals.map(c => {
+          if (c.showInTooltip) {
+            includedSeries.push(c.high)
+            includedSeries.push(c.low)
+          }
+        })
+      })
+    }
+
+    const colNames = Object.values(config.columns).map(column => column.name)
+    // @ Murad why are we adding them twice?
+    includedSeries.push(...colNames, ...colNames)
+
+    try {
+      const dataToSearch = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
       // Return an empty array if no matching data is found.
       if (!dataToSearch || dataToSearch.length === 0) {
         return []
       }
 
       const yScaleValues = dataToSearch.map(object => {
-        return Object.fromEntries(Object.entries(object).filter(([key, value]) => includedSeries.includes(key)))
+        return _.pick(object, includedSeries)
       })
       return yScaleValues
     } catch (error) {

package/src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import CdcChart from './CdcChart'
+import './coreStyles_chart.scss'
 
 import 'react-tooltip/dist/react-tooltip.css'
 

package/src/scss/DataTable.scss

@@ -1,7 +1,8 @@
-@include breakpointClass(md) {
-  .data-table-container {
-    margin: 5px 0em;
-    width: 100%;
+.data-table-container {
+  margin: 20px 0 0;
+  width: 100%;
+  &.download-link-above {
+    margin: 0;
   }
 }
 

package/src/scss/main.scss

@@ -1,6 +1,50 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
-@import '@cdc/core/styles/v2/themes/color-definitions';
+@mixin breakpoint($class) {
+  @if $class == xs {
+    @media (max-width: 767px) {
+      @content;
+    }
+  } @else if $class == sm {
+    @media (min-width: 768px) {
+      @content;
+    }
+  } @else if $class == md {
+    @media (min-width: 960px) {
+      @content;
+    }
+  } @else if $class == lg {
+    @media (min-width: 1300px) {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg";
+  }
+}
+
+@mixin breakpointClass($class) {
+  @if $class == xs {
+    &.xs,
+    &.xxs {
+      @content;
+    }
+  } @else if $class == sm {
+    &.sm,
+    &.md,
+    &.lg {
+      @content;
+    }
+  } @else if $class == md {
+    &.md,
+    &.lg {
+      @content;
+    }
+  } @else if $class == lg {
+    &.lg {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
+  }
+}
 
 .form-container {
   overflow-y: auto;
@@ -76,23 +120,6 @@
     }
   }
 
-  .btn {
-    background: #005eaa;
-    color: #fff !important;
-    border: 0;
-    padding: 0.4em 0.8em;
-    display: block;
-    border-radius: 5px;
-    transition: 0.1s all;
-    cursor: pointer;
-
-    &[disabled] {
-      opacity: 0.5;
-      z-index: -1;
-      position: relative;
-    }
-  }
-
   .warning-icon {
     position: relative;
     top: 2px;
@@ -129,11 +156,12 @@
     padding: 15px;
     vertical-align: top;
     text-align: left;
-    border: 1px solid $lightGray;
+    border: 1px solid var(--lightGray);
     position: relative;
 
     &.no-border {
       border: 1px solid transparent;
+      padding: 0;
     }
 
     &__inner {
@@ -147,7 +175,7 @@
       &.vertical-sorted {
         display: block;
 
-        @include breakpoint(md) {
+        @include breakpoint(sm) {
           column-count: 2;
           column-width: 100%;
         }
@@ -168,7 +196,6 @@
 
     .legend-item {
       text-align: left;
-      align-items: flex-start !important;
       user-select: none;
       white-space: nowrap;
 
@@ -177,10 +204,6 @@
         white-space: pre-wrap;
         word-break: break-word;
       }
-
-      & > :first-child {
-        margin-top: 3px;
-      }
     }
 
     .vertical-sorted:not(.single-row) .legend-item {
@@ -199,11 +222,11 @@
 
     h3,
     p {
-      margin-bottom: 0.8em;
+      margin-bottom: 0.4em;
     }
 
     & div.legend-item {
-      margin-bottom: 0.5em !important;
+      margin-bottom: 0.2em !important;
 
       &:last-child {
         margin: 0 !important;
@@ -456,46 +479,6 @@
     }
   }
 
-  .filters-section {
-    margin-left: 1rem;
-    margin-right: 1rem;
-
-    &__title {
-      margin: 15px 0;
-    }
-
-    &__wrapper {
-      hr {
-        margin-bottom: 20px;
-      }
-
-      label {
-        display: inherit;
-        margin-bottom: 5px;
-        font-weight: 600;
-        font-size: 16px;
-      }
-    }
-
-    @include breakpoint(md) {
-      display: flex;
-      gap: 30px;
-    }
-
-    label:not(:empty) {
-      margin-right: 0.4em;
-    }
-
-    select {
-      font-size: 1em;
-      padding-right: 5px;
-    }
-
-    .single-filter {
-      margin-bottom: 0.5em;
-    }
-  }
-
   @include breakpointClass(xs) {
     &.font-small {
       font-size: 0.8em;
@@ -522,7 +505,7 @@
     }
   }
 
-  @include breakpointClass(md) {
+  @include breakpointClass(sm) {
     .chart-container {
       .no-wrap {
         flex-wrap: nowrap;
@@ -544,7 +527,11 @@
           margin-left: 0;
         }
       }
+    }
+  }
 
+  @include breakpointClass(md) {
+    .chart-container {
       > svg {
         font-size: 16px;
         width: 75%;