@cdc/chart 4.23.5 → 4.23.6

package/src/components/AreaChart.jsx

@@ -27,7 +27,7 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
   const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
 
   // import tooltip helpers
-  const { tooltipData, showTooltip } = useTooltip()
+  const { tooltipData, showTooltip, hideTooltip } = useTooltip()
 
   // here we're inside of the svg,
   // it appears we need to use TooltipInPortal.
@@ -41,8 +41,6 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
   // Turn DEBUG on for additional context.
   if (!data) return
   let barThickness = xMax / data.length
-  let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
-  let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
 
   // Tooltip helper for getting data to the closest date/category hovered.
   const getXValueFromCoordinate = x => {
@@ -87,6 +85,9 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
       if (!yScaleValues[0]) return
       for (const item of Object.entries(yScaleValues[0])) {
         if (item[0] === seriesKey) {
+          // let userUpdatedSeriesName = config.series.filter(series => series.dataKey === item[0])?.[0]?.name
+          // if (userUpdatedSeriesName) item[0] = userUpdatedSeriesName
+
           seriesToInclude.push(item)
         }
       }
@@ -95,6 +96,7 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
     // filter out the series that aren't added to the map.
     seriesToInclude.map(series => yScaleMaxValues.push(Number(yScaleValues[0][series])))
     if (!seriesToInclude) return
+
     let tooltipDataFromSeries = Object.fromEntries(seriesToInclude) ? Object.fromEntries(seriesToInclude) : {}
 
     let tooltipData = {}
@@ -143,8 +145,9 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
 
             if (config.xAxis.type === 'date') {
               data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
+            } else {
+              data.map(d => xScale(d[config.xAxis.dataKey]))
             }
-
             return (
               <React.Fragment key={index}>
                 {/* prettier-ignore */}
@@ -182,6 +185,7 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
                   fillOpacity={0.05}
                   style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}}
                   onMouseMove={e => handleMouseOver(e, data)}
+                  onMouseOut={hideTooltip}
                   />
 
                 {/* circles that appear on hover */}
@@ -197,25 +201,6 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
                   />
                 )}
 
-                {/* another tool for showing bars during debug mode. */}
-                {DEBUG &&
-                  data.map((item, index) => {
-                    return (
-                      <Bar
-                        className='bar-here'
-                        x={Number(barThickness * index)}
-                        y={d => Number(yScale(d[config.series[index].dataKey]))}
-                        yScale={yScale}
-                        width={Number(barThickness)}
-                        height={yMax}
-                        fill={DEBUG ? 'red' : 'transparent'}
-                        fillOpacity={1}
-                        style={{ stroke: 'black', strokeWidth: 2 }}
-                        onMouseMove={e => handleMouseOver(e, data)}
-                      />
-                    )
-                  })}
-
                 {tooltipData && Object.entries(tooltipData.data).length > 0 && (
                   <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition + chartPosition?.top} left={tooltipData.dataXPosition + chartPosition?.left} style={defaultStyles}>
                     <ul style={{ listStyle: 'none', paddingLeft: 'unset', fontFamily: 'sans-serif', margin: 'auto', lineHeight: '1rem' }} data-tooltip-id={tooltip_id}>

package/src/components/BarChart.jsx

@@ -7,9 +7,10 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
+import { act } from 'react-dom/test-utils'
 
 export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible }) {
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, tableData, formatDate, isNumber, getTextWidth, parseDate } = useContext(ConfigContext)
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, tableData, formatDate, isNumber, getTextWidth, parseDate, setSharedFilter, setSharedFilterValue, dashboardConfig } = useContext(ConfigContext)
   const { HighLightedBarUtils } = useHighlightedBars(config)
   const { orientation, visualizationSubType } = config
   const isHorizontal = orientation === 'horizontal'
@@ -202,6 +203,13 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           display={displayBar ? 'block' : 'none'}
                           data-tooltip-html={tooltip}
                           data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          onClick={e => {
+                            e.preventDefault()
+                            if (setSharedFilter) {
+                              bar[config.xAxis.dataKey] = xAxisValue
+                              setSharedFilter(config.uid, bar)
+                            }
+                          }}
                         ></foreignObject>
                       </Group>
                     </Group>
@@ -266,6 +274,13 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             display={displayBar ? 'block' : 'none'}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                            onClick={e => {
+                              e.preventDefault()
+                              if (setSharedFilter) {
+                                bar[config.xAxis.dataKey] = xAxisValue
+                                setSharedFilter(config.uid, bar)
+                              }
+                            }}
                           ></foreignObject>
 
                           {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
@@ -447,14 +462,54 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       const highlightedBarColor = config.orientation === 'vertical' ? getHighlightedBarColorByValue(xAxisValue) : getHighlightedBarColorByValue(yAxisValue)
                       const highlightedBar = config.orientation === 'vertical' ? getHighlightedBarByValue(xAxisValue) : getHighlightedBarByValue(yAxisValue)
 
-                      const background = isRegularLollipopColor ? barColor : isTwoToneLollipopColor ? chroma(barColor).brighten(1) : isHighlightedBar ? 'transparent' : barColor
+                      const background = () => {
+                        if (isRegularLollipopColor) return barColor
+                        if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
+                        if (isHighlightedBar) return 'transparent'
+                        // loop through shared filters and get active values
+                        if (dashboardConfig && dashboardConfig?.dashboard.sharedFilters?.length > 0) {
+                          let activeFilters = []
+                          let backgroundColor = barColor
+
+                          const checkForResetValue = () => {
+                            return dashboardConfig.dashboard.sharedFilters?.map((filter, index) => {
+                              if (filter.resetLabel === filter.active) {
+                                backgroundColor = barColor
+                              } else {
+                                return backgroundColor
+                              }
+                            })
+                          }
+
+                          dashboardConfig.dashboard.sharedFilters?.forEach((filter, index) => {
+                            activeFilters.push(filter.active)
+                          })
+
+                          // if reset value is found use that.
+
+                          if (config.orientation === 'horizontal') {
+                            if (!activeFilters.includes(yAxisValue)) {
+                              backgroundColor = '#ccc'
+                            }
+                          }
+
+                          if (config.orientation !== 'horizontal') {
+                            if (!activeFilters.includes(xAxisValue)) {
+                              backgroundColor = '#ccc'
+                            }
+                          }
+                          checkForResetValue()
+                          return backgroundColor
+                        }
+                        return barColor
+                      }
 
                       const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
 
                       const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
 
                       const finalStyle = {
-                        background,
+                        background: background(),
                         borderColor,
                         borderStyle: 'solid',
                         borderWidth,
@@ -485,6 +540,13 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                               display={displayBar ? 'block' : 'none'}
                               data-tooltip-html={tooltip}
                               data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                              onClick={e => {
+                                e.preventDefault()
+                                if (setSharedFilter) {
+                                  bar[config.xAxis.dataKey] = config.orientation === 'horizontal' ? yAxisValue : xAxisValue
+                                  setSharedFilter(config.uid, bar)
+                                }
+                              }}
                             ></foreignObject>
                             {orientation === 'horizontal' && !config.isLollipopChart && displayNumbersOnBar && (
                               <Text // prettier-ignore

package/src/components/DataTable.jsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState, useMemo } from 'react'
 import { useTable, useSortBy, useResizeColumns, useBlockLayout } from 'react-table'
 import Papa from 'papaparse'
 import { Base64 } from 'js-base64'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
@@ -9,7 +10,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 
 import ConfigContext from '../ConfigContext'
 
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 
 export default function DataTable() {
   const { rawData, tableData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext(ConfigContext)
@@ -93,24 +94,29 @@ export default function DataTable() {
             {
               Header: '',
               Cell: ({ row }) => {
-                const seriesLabel = config.runtime.seriesLabels ? config.runtime.seriesLabels[row.original] : row.original
+                const getSeriesLabel = () => {
+                  let userUpdatedSeriesName = config.series.filter(series => series.dataKey === row.original)?.[0]?.name
+
+                  if (userUpdatedSeriesName) return userUpdatedSeriesName
+                  if (config.runtimeSeriesLabels) return config.runtime.seriesLabels[row.original]
+                  return row.original
+                }
                 return (
                   <>
                     {config.visualizationType !== 'Pie' && (
                       <LegendCircle
                         fill={
-                          // non-dynamic leged
-                          !config.legend.dynamicLegend
-                            ? colorScale(seriesLabel)
-                            : // dynamic legend
-                            config.legend.dynamicLegend
+                          // non-dynamic legend
+                          !config.legend.dynamicLegend && config.visualizationType !== 'Forecasting'
+                            ? colorScale(getSeriesLabel())
+                            : config.legend.dynamicLegend
                             ? colorPalettes[config.palette][row.index]
                             : // fallback
                               '#000'
                         }
                       />
                     )}
-                    <span>{seriesLabel}</span>
+                    <span>{getSeriesLabel()}</span>
                   </>
                 )
               },
@@ -127,7 +133,19 @@ export default function DataTable() {
         const newCol = {
           Header: resolveTableHeader(),
           Cell: ({ row }) => {
-            return <>{numberFormatter(d[row.original], 'left')}</>
+            let leftAxisItems = config.series.filter(item => item?.axis === 'Left')
+            let rightAxisItems = config.series.filter(item => item?.axis === 'Right')
+            let resolvedAxis = ''
+
+            leftAxisItems.map(leftSeriesItem => {
+              if (leftSeriesItem.dataKey === row.original) resolvedAxis = 'left'
+            })
+
+            rightAxisItems.map(rightSeriesItem => {
+              if (rightSeriesItem.dataKey === row.original) resolvedAxis = 'right'
+            })
+
+            return <>{numberFormatter(d[row.original], resolvedAxis)}</>
           },
           id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
           canSort: true
@@ -210,10 +228,10 @@ export default function DataTable() {
 
   return (
     <ErrorBoundary component='DataTable'>
-      <CoveMediaControls.Section classes={['download-links']}>
-        <CoveMediaControls.Link config={config} />
+      <MediaControls.Section classes={['download-links']}>
+        <MediaControls.Link config={config} />
         {config.table.download && <DownloadButton data={rawData} type='link' />}
-      </CoveMediaControls.Section>
+      </MediaControls.Section>
 
       <section id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
         <div