@cdc/chart 4.25.3 → 4.25.5-1

package/src/components/LineChart/index.tsx

@@ -28,7 +28,6 @@ const LineChart = (props: LineChartProps) => {
   const {
     getXAxisData,
     getYAxisData,
-    handleTooltipClick,
     handleTooltipMouseOff,
     handleTooltipMouseOver,
     tooltipData,
@@ -36,53 +35,53 @@ const LineChart = (props: LineChartProps) => {
     xScale,
     yMax,
     yScale,
-  } = props
+    } = props
 
   // prettier-ignore
   const { colorScale, config, formatNumber, handleLineType, parseDate, seriesHighlight, tableData, transformedData, updateConfig, brushConfig,clean  } = useContext<ChartContext>(ConfigContext)
   const { yScaleRight } = useRightAxis({ config, yMax, data: transformedData, updateConfig })
-  if (!handleTooltipMouseOver) return
+  const showSingleSeries = config.tooltips.singleSeries
 
   const DEBUG = false
   const { lineDatapointStyle, showLineSeriesLabels, legend } = config
-  let data = transformedData
-  let tableD = tableData
+  const isBrushOn = brushConfig.data.length > 0 && config.brush?.active
   // if brush on use brush data and clean
-  if (brushConfig.data.length > 0 && config.brush?.active) {
-    data = clean(brushConfig.data)
-    tableD = clean(brushConfig.data)
-  }
+  const data = isBrushOn ? clean(brushConfig.data) : transformedData
+  const _tableData = isBrushOn ? clean(brushConfig.data) : tableData
 
   const xPos = d => {
     return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
 
+  const tooltipPoints = []
+
   return (
     <ErrorBoundary component='LineChart'>
-      <Group left={Number(config.runtime.yAxis.size)}>
-        {' '}
+      <Group left={Number(config.runtime.yAxis.size)} className='line-chart-group'>
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
           const seriesData = config.runtime.series.find(item => item.dataKey === seriesKey)
+          const _seriesKey = seriesData.dynamicCategory ? seriesData.originalDataKey : seriesKey
           const lineType = seriesData.type
           const seriesAxis = seriesData.axis || 'left'
           const displayArea =
             legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
 
-          const suppressedSegments = createDataSegments(
-            tableData,
+          const suppressedSegments = createDataSegments({
+            data: tableData,
             seriesKey,
-            config.preliminaryData,
-            config.xAxis.dataKey
-          )
+            preliminaryData: config.preliminaryData,
+            dynamicCategory: seriesData.dynamicCategory,
+            originalSeriesKey: _seriesKey,
+            colorScale
+          })
           const isSplitLine =
             config?.preliminaryData?.filter(pd => pd.style && !pd.style.includes('Circles')).length > 0
 
           const _data = seriesData.dynamicCategory
             ? data.filter(d => d[seriesData.dynamicCategory] === seriesKey)
             : data
-          const _seriesKey = seriesData.dynamicCategory ? seriesData.originalDataKey : seriesKey
-          const circleData = filterCircles(config?.preliminaryData, tableD, _seriesKey)
+          const circleData = filterCircles(config?.preliminaryData, tableData, _seriesKey)
           return (
             <Group
               key={`series-${seriesKey}-${index}`}
@@ -108,11 +107,15 @@ const LineChart = (props: LineChartProps) => {
                 height={Number(yMax)}
                 fill={DEBUG ? 'red' : 'transparent'}
                 fillOpacity={0.05}
-                onMouseMove={e => handleTooltipMouseOver(e, tableData)}
-                onMouseOut={handleTooltipMouseOff}
-                onClick={e => handleTooltipClick(e, data)}
               />
               {_data.map((d, dataIndex) => {
+                tooltipPoints.push({
+                  color: colorScale(config.runtime.seriesLabels[seriesKey]),
+                  seriesKey: _seriesKey,
+                  seriesIndex: index,
+                  xValue: d[config.xAxis.dataKey],
+                  yValue: d[_seriesKey]
+                })
                 return (
                   isNumber(d[_seriesKey]) && (
                     <React.Fragment key={`series-${seriesKey}-point-${dataIndex}`}>
@@ -136,7 +139,6 @@ const LineChart = (props: LineChartProps) => {
                         <LineChartCircle
                           mode='ALWAYS_SHOW_POINTS'
                           dataIndex={dataIndex}
-                          circleData={circleData}
                           tableData={tableData}
                           data={_data}
                           d={d}
@@ -155,18 +157,37 @@ const LineChart = (props: LineChartProps) => {
                         />
                       )}
 
+                      {(lineDatapointStyle === 'hover' || lineDatapointStyle === 'hidden') && (
+                        <LineChartCircle
+                          mode='HOVER_POINTS'
+                          dataIndex={dataIndex}
+                          tableData={tableData}
+                          data={_data}
+                          d={d}
+                          config={config}
+                          seriesKey={_seriesKey}
+                          displayArea={displayArea}
+                          xScale={xScale}
+                          yScale={yScale}
+                          colorScale={colorScale}
+                          parseDate={parseDate}
+                          yScaleRight={yScaleRight}
+                          seriesAxis={seriesAxis}
+                          seriesIndex={index}
+                          key={`line-hover-circle--${dataIndex}`}
+                        />
+                      )}
+
                       <LineChartCircle
                         mode='ISOLATED_POINTS'
                         seriesIndex={index}
                         dataIndex={dataIndex}
                         tableData={tableData}
-                        circleData={circleData}
                         data={_data}
                         d={d}
                         config={config}
                         seriesKey={_seriesKey}
                         displayArea={displayArea}
-                        tooltipData={tooltipData}
                         xScale={xScale}
                         yScale={yScale}
                         colorScale={colorScale}
@@ -179,28 +200,6 @@ const LineChart = (props: LineChartProps) => {
                   )
                 )
               })}
-              <>
-                {lineDatapointStyle === 'hover' && (
-                  <LineChartCircle
-                    seriesIndex={index}
-                    tableData={tableData}
-                    dataIndex={0}
-                    mode='HOVER_POINTS'
-                    circleData={circleData}
-                    data={_data}
-                    config={config}
-                    seriesKey={seriesKey}
-                    displayArea={displayArea}
-                    tooltipData={tooltipData}
-                    xScale={xScale}
-                    yScale={yScale}
-                    colorScale={colorScale}
-                    parseDate={parseDate}
-                    yScaleRight={yScaleRight}
-                    seriesAxis={seriesAxis}
-                  />
-                )}
-              </>
 
               {/* SPLIT LINE */}
               {isSplitLine ? (
@@ -217,15 +216,17 @@ const LineChart = (props: LineChartProps) => {
                     }
                     styles={createStyles({
                       preliminaryData: config.preliminaryData,
-                      data: tableD,
+                      data: tableData,
                       stroke: colorScale(config.runtime.seriesLabels[seriesKey]),
                       strokeWidth: seriesData.weight || 2,
                       handleLineType,
                       lineType,
-                      seriesKey
+                      seriesKey,
+                      dynamicCategory: seriesData.dynamicCategory,
+                      originalSeriesKey: _seriesKey
                     })}
                     defined={(item, i) => {
-                      return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                      return item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
                     }}
                   />
 
@@ -238,16 +239,22 @@ const LineChart = (props: LineChartProps) => {
                           x={d => xPos(d)}
                           y={d =>
                             seriesAxis === 'Right'
-                              ? yScaleRight(getYAxisData(d, seriesKey))
-                              : yScale(Number(getYAxisData(d, seriesKey)))
+                              ? yScaleRight(getYAxisData(d, _seriesKey))
+                              : yScale(Number(getYAxisData(d, _seriesKey)))
+                          }
+                          stroke={
+                            seriesData.dynamicCategory
+                              ? segment.color
+                              : colorScale(config.runtime.seriesLabels[seriesKey])
                           }
-                          stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
                           strokeWidth={seriesData[0]?.weight || 2}
                           strokeOpacity={1}
                           shapeRendering='geometricPrecision'
                           strokeDasharray={handleLineType(segment.style)}
                           defined={(item, i) => {
-                            return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                            return (
+                              item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
+                            )
                           }}
                         />
                       )
@@ -269,6 +276,7 @@ const LineChart = (props: LineChartProps) => {
                           return (
                             <AreaClosed
                               key={`area-closed-${seriesKey}-${categoryIndex}`}
+                              className='confidence-interval'
                               data={categoryData}
                               x={d => xPos(d)}
                               y0={d => yScale(d[config.confidenceKeys.lower])} // Lower bound of the confidence interval
@@ -432,6 +440,52 @@ const LineChart = (props: LineChartProps) => {
           </Text>
         )}
       </Group>
+      <Group left={Number(config.runtime.yAxis.size)} className='glyph-tooltip-group'>
+        <Group key={`tooltip-group`} display={'block'}>
+          {/* tooltips */}
+          <Bar
+            key={'tooltip bars'}
+            width={Number(xMax)}
+            height={Number(yMax)}
+            fill={DEBUG ? 'red' : 'transparent'}
+            fillOpacity={0.05}
+            onMouseMove={e => {
+              if (showSingleSeries) return
+              handleTooltipMouseOver(e, tableData)
+            }}
+            onMouseOut={handleTooltipMouseOff}
+          />
+          {tooltipPoints.map((d, dataIndex) => {
+            const { _data, seriesKey, seriesIndex, color } = d
+            return (
+              <React.Fragment key={`series-${seriesKey}-point-${dataIndex}`}>
+                <LineChartCircle
+                  mode='TOOLTIP_POINTS'
+                  dataIndex={dataIndex}
+                  tooltipPoint={d}
+                  tableData={tableData}
+                  data={_data}
+                  d={d}
+                  config={config}
+                  seriesKey={seriesKey}
+                  displayArea={true}
+                  tooltipData={tooltipData}
+                  xScale={xScale}
+                  yScale={yScale}
+                  colorScale={colorScale}
+                  parseDate={parseDate}
+                  yScaleRight={yScaleRight}
+                  seriesAxis={'[circle]'}
+                  seriesIndex={seriesIndex}
+                  key={`line-circle--${dataIndex}`}
+                  handleTooltipMouseOver={handleTooltipMouseOver}
+                  handleTooltipMouseOff={handleTooltipMouseOff}
+                />
+              </React.Fragment>
+            )
+          })}
+        </Group>
+      </Group>
       {config.visualizationType === 'Bump Chart' && (
         <LineChartBumpCircle config={config} xScale={xScale} yScale={yScale} />
       )}

package/src/components/LinearChart.tsx

@@ -4,8 +4,8 @@ import React, { forwardRef, useContext, useEffect, useMemo, useRef, useState } f
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
 import { Group } from '@visx/group'
 import { Line, Bar } from '@visx/shape'
-import { Text } from '@visx/text'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 import _ from 'lodash'
 
@@ -226,7 +226,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     leftMax,
     rightMax,
     dimensions,
-    xMax: parentWidth - Number(config.orientation === 'horizontal' ? config.xAxis.size : config.yAxis.size)
+    xMax:
+      parentWidth -
+      Number(config.orientation === 'horizontal' ? config.xAxis.size : config.yAxis.size) -
+      (hasRightAxis ? config.yAxis.rightAxisSize : 0)
   })
 
   const [yTickCount, xTickCount] = ['yAxis', 'xAxis'].map(axis =>
@@ -243,10 +246,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     handleTooltipClick,
     handleTooltipMouseOff,
     TooltipListItem,
-    getXValueFromCoordinate
   } = useCoveTooltip({
       xScale,
       yScale,
+      seriesScale,
       showTooltip,
       hideTooltip
   })
@@ -256,7 +259,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     data.length && isDateTime
       ? [0, data.length - 1].map(i => parseDate(data[i][dataKey])).reduce((a, b) => Math.abs(a - b)) / MONTH_AS_MS
       : 0
-  const useDateSpanMonths = isDateTime && dateSpanMonths > xTickCount
+  const useDateSpanMonths = isDateTime && dateSpanMonths > xTickCount && !config.runtime.xAxis.manual
 
   // GETTERS & FUNCTIONS
   const handleLeftTickFormatting = (tick, index, ticks) => {
@@ -438,7 +441,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   }, [maxValue])
 
   useEffect(() => {
-    if (orientation === 'horizontal' || !labelsOverflow || config.yAxis?.max) {
+    if (!yScale?.ticks) return
+    const ticks = yScale.ticks(handleNumTicks)
+    if (orientation === 'horizontal' || !labelsOverflow || config.yAxis?.max || ticks.length === 0) {
       setYAxisAutoPadding(0)
       return
     }
@@ -446,13 +451,12 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     // minimum percentage of the max value that the distance should be from the top grid line
     const MINIMUM_DISTANCE_PERCENTAGE = 0.025
 
-    const topGridLine = Math.max(...yScale.ticks(handleNumTicks))
+    const topGridLine = Math.max(...ticks)
     const needsPaddingThreshold = topGridLine - maxValue * MINIMUM_DISTANCE_PERCENTAGE
     const maxValueIsGreaterThanThreshold = maxValue > needsPaddingThreshold
 
     if (!maxValueIsGreaterThanThreshold) return
 
-    const ticks = yScale.ticks(handleNumTicks)
     const tickGap = ticks.length === 1 ? ticks[0] : ticks[1] - ticks[0]
     const nextTick = Math.max(...yScale.ticks(handleNumTicks)) + tickGap
     const divideBy = minValue < 0 ? maxValue / 2 : maxValue
@@ -611,7 +615,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       </>
     )
   }
-
   return isNaN(width) ? (
     <React.Fragment></React.Fragment>
   ) : (
@@ -624,7 +627,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
         <svg
           ref={svgRef}
           onMouseMove={onMouseMove}
-          width={parentWidth}
+          width={parentWidth + config.yAxis.rightAxisSize}
           height={isNoDataAvailable ? 1 : parentHeight}
           className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${
             debugSvg && 'debug'
@@ -717,24 +720,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               yScale={yScale}
             />
           )}
-          {((visualizationType === 'Area Chart' && config.visualizationSubType === 'regular') ||
-            (visualizationType === 'Combo' && config.visualizationSubType === 'regular')) && (
-            <AreaChart
-              xScale={xScale}
-              yScale={yScale}
-              yMax={yMax}
-              xMax={xMax}
-              chartRef={svgRef}
-              width={xMax}
-              height={yMax}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              tooltipData={tooltipData}
-              showTooltip={showTooltip}
-            />
-          )}
           {((visualizationType === 'Area Chart' && config.visualizationSubType === 'stacked') ||
-            (visualizationType === 'Combo' && config.visualizationSubType === 'stacked')) && (
+            visualizationType === 'Combo') && (
             <AreaChartStacked
               xScale={xScale}
               yScale={yScale}
@@ -768,9 +755,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               chartRef={svgRef}
             />
           )}
-          {((visualizationType === 'Line' && !convertLineToBarGraph) ||
-            visualizationType === 'Combo' ||
-            visualizationType === 'Bump Chart') && (
+          {(visualizationType === 'Combo' || visualizationType === 'Bump Chart') && (
             <LineChart
               xScale={xScale}
               yScale={yScale}
@@ -784,7 +769,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               handleTooltipClick={handleTooltipClick}
               tooltipData={tooltipData}
               showTooltip={showTooltip}
-              chartRef={svgRef}
             />
           )}
           {(visualizationType === 'Forecasting' || visualizationType === 'Combo') && (
@@ -798,7 +782,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               height={yMax}
               xScaleNoPadding={xScaleNoPadding}
               chartRef={svgRef}
-              getXValueFromCoordinate={getXValueFromCoordinate}
               handleTooltipMouseOver={handleTooltipMouseOver}
               handleTooltipMouseOff={handleTooltipMouseOff}
               isBrush={false}
@@ -842,6 +825,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   xMax={xMax}
                   yMax={yMax}
                   seriesStyle={config.runtime.series}
+                  tooltipData={tooltipData}
+                  handleTooltipMouseOver={handleTooltipMouseOver}
+                  handleTooltipMouseOff={handleTooltipMouseOff}
                 />
               </>
             )}
@@ -926,79 +912,45 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               width={width}
             />
           )}
-          {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.verticalHoverLine && (
-            <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
+          {isNoDataAvailable && (
+            <Text
+              x={Number(config.yAxis.size) + Number(xMax / 2)}
+              y={initialHeight / 2 - (config.xAxis.padding || 0) / 2}
+              textAnchor='middle'
+            >
+              {config.chartMessage.noData}
+            </Text>
+          )}
+          {config.visual.horizontalHoverLine && tooltipData && (
+            <Group
+              key={`tooltipLine-horizontal${point.y}${point.x}`}
+              className='horizontal-tooltip-line'
+              left={config.yAxis.size ? config.yAxis.size : 0}
+            >
               <Line
-                from={{ x: tooltipData.dataXPosition - 10, y: 0 }}
-                to={{ x: tooltipData.dataXPosition - 10, y: yMax }}
+                from={{ x: 0, y: point.y }}
+                to={{ x: xMax, y: point.y }}
                 stroke={'black'}
                 strokeWidth={1}
                 pointerEvents='none'
                 strokeDasharray='5,5'
-                className='vertical-tooltip-line'
+                className='horizontal-tooltip-line'
               />
             </Group>
           )}
-          {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.horizontalHoverLine && (
-            <Group
-              key='tooltipLine-horizontal'
-              className='horizontal-tooltip-line'
-              left={config.yAxis.size ? config.yAxis.size : 0}
-            >
+          {config.visual.verticalHoverLine && tooltipData && (
+            <Group key={`tooltipLine-vertical${point.y}${point.x}`} className='vertical-tooltip-line'>
               <Line
-                from={{ x: 0, y: tooltipData.dataYPosition }}
-                to={{ x: xMax, y: tooltipData.dataYPosition }}
+                from={{ x: point.x, y: 0 }}
+                to={{ x: point.x, y: yMax }}
                 stroke={'black'}
                 strokeWidth={1}
                 pointerEvents='none'
                 strokeDasharray='5,5'
-                className='horizontal-tooltip-line'
+                className='vertical-tooltip-line'
               />
             </Group>
           )}
-          {isNoDataAvailable && (
-            <Text
-              x={Number(config.yAxis.size) + Number(xMax / 2)}
-              y={initialHeight / 2 - (config.xAxis.padding || 0) / 2}
-              textAnchor='middle'
-            >
-              {config.chartMessage.noData}
-            </Text>
-          )}
-          {(config.visualizationType === 'Bar' || convertLineToBarGraph) &&
-            config.tooltips.singleSeries &&
-            config.visual.horizontalHoverLine && (
-              <Group
-                key='tooltipLine-horizontal'
-                className='horizontal-tooltip-line'
-                left={config.yAxis.size ? config.yAxis.size : 0}
-              >
-                <Line
-                  from={{ x: 0, y: point.y }}
-                  to={{ x: xMax, y: point.y }}
-                  stroke={'black'}
-                  strokeWidth={1}
-                  pointerEvents='none'
-                  strokeDasharray='5,5'
-                  className='horizontal-tooltip-line'
-                />
-              </Group>
-            )}
-          {(config.visualizationType === 'Bar' || convertLineToBarGraph) &&
-            config.tooltips.singleSeries &&
-            config.visual.verticalHoverLine && (
-              <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
-                <Line
-                  from={{ x: point.x, y: 0 }}
-                  to={{ x: point.x, y: yMax }}
-                  stroke={'black'}
-                  strokeWidth={1}
-                  pointerEvents='none'
-                  strokeDasharray='5,5'
-                  className='vertical-tooltip-line'
-                />
-              </Group>
-            )}
           <Group left={Number(config.runtime.yAxis.size)}>
             <Annotation.Draggable
               xScale={xScale}
@@ -1564,7 +1516,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               </TooltipWithBounds>
             </>
           )}
-
         {config.visualizationType === 'Bump Chart' && (
           <ReactTooltip
             id={`bump-chart`}

package/src/components/PairedBarChart.jsx

@@ -6,6 +6,7 @@ import { Text } from '@visx/text'
 
 import ConfigContext from '../ConfigContext'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 const PairedBarChart = ({ width, height, originalWidth }) => {
@@ -47,8 +48,8 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   })
 
   // Set label color
-  groupOne.labelColor = groupOne.color ? getContrastColor('#000', groupOne.color) : '#000'
-  groupTwo.labelColor = groupTwo.color ? getContrastColor('#000', groupTwo.color) : '#000'
+  groupOne.labelColor = groupOne.color ? getContrastColor(APP_FONT_COLOR, groupOne.color) : APP_FONT_COLOR
+  groupTwo.labelColor = groupTwo.color ? getContrastColor(APP_FONT_COLOR, groupTwo.color) : APP_FONT_COLOR
 
   const label = config.yAxis.label ? `${config.yAxis.label}: ` : ''