@cdc/chart 4.23.5 → 4.23.7

package/src/components/BarChart.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState, useEffect } from 'react'
 import { Group } from '@visx/group'
-import { BarGroup, BarStack } from '@visx/shape'
+import { BarGroup, BarStack, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
 import chroma from 'chroma-js'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -8,8 +8,8 @@ import ConfigContext from '../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
 
-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 BarChart = ({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible, handleTooltipMouseOver, handleTooltipMouseOff, handleTooltipClick }) => {
+  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'
@@ -63,7 +63,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
       if (!colorMap.has(values[i])) {
         colorMap.set(values[i], palettesArr[colorMap.size % palettesArr.length])
       }
-      // push the colosr to the result array
+      // push the color to the result array
       result.push(colorMap.get(values[i]))
     }
     return result
@@ -171,11 +171,17 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     yAxisTooltip = config.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                   }
 
-                  const tooltip = `<div>
-                  ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
+                  const {
+                    legend: { showLegendValuesTooltip },
+                    runtime: { seriesLabels }
+                  } = config
+
+                  const barStackTooltip = `<div>
+                  <p class="tooltip-heading"><strong>${xAxisTooltip}</strong></p>
+                  ${showLegendValuesTooltip && seriesLabels && hasMultipleSeries ? `${seriesLabels[bar.key] || ''}<br/>` : ''}
                   ${yAxisTooltip}<br />
-                  ${xAxisTooltip}
                     </div>`
+
                   return (
                     <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
                       <style>
@@ -200,8 +206,15 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           style={{ background: bar.color, border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}
                           opacity={transparentBar ? 0.5 : 1}
                           display={displayBar ? 'block' : 'none'}
-                          data-tooltip-html={tooltip}
+                          data-tooltip-html={barStackTooltip}
                           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 +279,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 && (
@@ -429,17 +449,17 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                       let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                       if (!hasMultipleSeries && config.runtime.horizontal) {
-                        xAxisTooltip = config.isLegendValue ? `${bar.key}: ${xAxisValue}` : config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                        xAxisTooltip = config.isLegendValue ? `<p className="tooltip-heading">${bar.key}: ${xAxisValue}</p>` : config.runtime.xAxis.label ? `<p className="tooltip-heading">${config.runtime.xAxis.label}: ${xAxisValue}</p>` : xAxisValue
                       }
                       if (!hasMultipleSeries && !config.runtime.horizontal) {
                         yAxisTooltip = config.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                       }
 
-                      const tooltip = `<div>
+                      const tooltip = `<ul>
                       ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
-                      ${yAxisTooltip}<br />
-                      ${xAxisTooltip}
-                        </div>`
+                      <li class="tooltip-heading">${yAxisTooltip}</li>
+                      <li class="tooltip-body">${xAxisTooltip}</li>
+                        </li></ul>`
 
                       const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                       const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
@@ -447,14 +467,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 +545,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
@@ -612,7 +679,12 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
               : ''}
           </Group>
         )}
+
+        {/* tooltips */}
+        {orientation !== 'horizontal' && <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={false ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />}
       </Group>
     </ErrorBoundary>
   )
 }
+
+export default BarChart

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,14 +10,15 @@ 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)
+  const { rawData, tableData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, currentViewport } = useContext(ConfigContext)
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
   const [tableExpanded, setTableExpanded] = useState(config.table.expanded)
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
+  const isLegendBottom = ['sm', 'xs', 'xxs'].includes(currentViewport)
 
   const DownloadButton = ({ data }, type) => {
     const fileName = `${config.title.substring(0, 50)}.csv`
@@ -93,24 +95,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 +134,21 @@ 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'
+            })
+
+            if (config.visualizationType !== 'Combo') resolvedAxis = 'left'
+
+            return <>{numberFormatter(d[row.original], resolvedAxis)}</>
           },
           id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
           canSort: true
@@ -210,12 +231,12 @@ 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}>
+      <section style={{ marginTop: !isLegendBottom ? config.dynamicMarginTop + 'px' : '0px' }} id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
         <div
           role='button'
           className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}