@cdc/chart 4.26.7 → 4.26.10

package/src/components/LineChart/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useId } from 'react'
 
 // VisX library imports
 import * as allCurves from '@visx/curve'
@@ -26,6 +26,7 @@ import { type ChartContext } from '../../types/ChartContext'
 import { type LineChartProps } from './LineChartProps'
 
 const LineChart = (props: LineChartProps) => {
+  const lineRaceMaskPrefix = `line-race-reveal-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`
   // prettier-ignore
   const {
     getXAxisData,
@@ -41,10 +42,12 @@ const LineChart = (props: LineChartProps) => {
     } = props
 
   const {
+    brushData,
     colorScale,
     config,
     formatNumber,
     handleLineType,
+    lineRaceProgress,
     parseDate,
     seriesHighlight,
     tableData,
@@ -60,16 +63,21 @@ const LineChart = (props: LineChartProps) => {
   })
   const { yScaleRight } = useRightAxis({ config, yMax, data: dataForRightAxis, updateConfig })
   const showSingleSeries = config.tooltips.singleSeries
+  const isLineRace = typeof lineRaceProgress === 'number'
+  const normalizedLineRaceProgress =
+    isLineRace && Number.isFinite(lineRaceProgress) ? Math.min(Math.max(lineRaceProgress, 0), 1) : 0
   if (!handleTooltipMouseOver) return
 
   const DEBUG = false
   const { lineDatapointStyle, showLineSeriesLabels, legend } = config
+  const activeRawData = Array.isArray(brushData) && brushData.length > 0 ? brushData : tableData
 
   const xPos = d => {
     return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
 
   const tooltipPoints = []
+  const hasConfidenceIntervalBand = Boolean(config.confidenceKeys?.lower && config.confidenceKeys?.upper)
 
   return (
     <ErrorBoundary component='LineChart'>
@@ -79,12 +87,21 @@ const LineChart = (props: LineChartProps) => {
           const seriesData = config.runtime.series.find(item => item.dataKey === seriesKey)
           const _seriesKey = seriesData.dynamicCategory ? seriesData.originalDataKey : seriesKey
           const lineType = seriesData.type
+          const lineRaceMaskId = `${lineRaceMaskPrefix}-${index}`
           const seriesAxis = seriesData.axis || 'left'
+          const seriesColor = colorScale(config.runtime.seriesLabels[seriesKey])
           const displayArea =
             legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
 
+          const _data = seriesData.dynamicCategory
+            ? data.filter(d => d[seriesData.dynamicCategory] === seriesKey)
+            : data
+          const activeRawSeriesData = seriesData.dynamicCategory
+            ? activeRawData.filter(d => d[seriesData.dynamicCategory] === seriesKey)
+            : activeRawData
+          const pointData = isLineRace ? activeRawSeriesData : _data
           const suppressedSegments = createDataSegments({
-            data: tableData,
+            data: activeRawSeriesData,
             seriesKey,
             preliminaryData: config.preliminaryData,
             dynamicCategory: seriesData.dynamicCategory,
@@ -94,30 +111,28 @@ const LineChart = (props: LineChartProps) => {
           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 circleData = filterCircles(
             config?.preliminaryData,
-            tableData,
+            activeRawSeriesData,
             seriesKey,
             seriesData.dynamicCategory,
             _seriesKey
           )
 
           // Prepare sorted data for line and area rendering
-          const sortedData =
-            config.visualizationType == 'Bump Chart'
-              ? _data
-              : config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
-              ? _data.sort((d1, d2) => {
-                  let x1 = getXAxisData(d1)
-                  let x2 = getXAxisData(d2)
-                  if (x1 < x2) return -1
-                  if (x2 < x1) return 1
-                  return 0
-                })
-              : _data
+          const sortedData = isLineRace
+            ? [..._data].sort((d1, d2) => xPos(d1) - xPos(d2))
+            : config.visualizationType == 'Bump Chart'
+            ? _data
+            : config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
+            ? _data.sort((d1, d2) => {
+                let x1 = getXAxisData(d1)
+                let x2 = getXAxisData(d2)
+                if (x1 < x2) return -1
+                if (x2 < x1) return 1
+                return 0
+              })
+            : _data
 
           return (
             <Group
@@ -145,7 +160,7 @@ const LineChart = (props: LineChartProps) => {
                 fill={DEBUG ? 'red' : 'transparent'}
                 fillOpacity={0.05}
               />
-              {_data.map((d, dataIndex) => {
+              {pointData.map((d, dataIndex) => {
                 tooltipPoints.push({
                   color: colorScale(config.runtime.seriesLabels[seriesKey]),
                   seriesKey: _seriesKey,
@@ -155,7 +170,7 @@ const LineChart = (props: LineChartProps) => {
                 })
 
                 // Build array of point coordinates for intelligent label positioning
-                const dataPointsForSeries = _data
+                const dataPointsForSeries = pointData
                   .filter(item => isNumber(item[_seriesKey]))
                   .map(item => ({
                     x: xPos(item),
@@ -212,10 +227,11 @@ const LineChart = (props: LineChartProps) => {
                           mode='ALWAYS_SHOW_POINTS'
                           dataIndex={dataIndex}
                           tableData={tableData}
-                          data={_data}
+                          data={pointData}
                           d={d}
                           config={config}
                           seriesKey={_seriesKey}
+                          seriesColor={seriesColor}
                           displayArea={displayArea}
                           tooltipData={tooltipData}
                           xScale={xScale}
@@ -234,10 +250,11 @@ const LineChart = (props: LineChartProps) => {
                           mode='HOVER_POINTS'
                           dataIndex={dataIndex}
                           tableData={tableData}
-                          data={_data}
+                          data={pointData}
                           d={d}
                           config={config}
                           seriesKey={_seriesKey}
+                          seriesColor={seriesColor}
                           displayArea={displayArea}
                           xScale={xScale}
                           yScale={yScale}
@@ -255,10 +272,11 @@ const LineChart = (props: LineChartProps) => {
                         seriesIndex={index}
                         dataIndex={dataIndex}
                         tableData={tableData}
-                        data={_data}
+                        data={pointData}
                         d={d}
                         config={config}
                         seriesKey={_seriesKey}
+                        seriesColor={seriesColor}
                         displayArea={displayArea}
                         xScale={xScale}
                         yScale={yScale}
@@ -336,7 +354,7 @@ const LineChart = (props: LineChartProps) => {
               ) : (
                 <>
                   {/* Confidence Interval Band */}
-                  {config.confidenceKeys &&
+                  {hasConfidenceIntervalBand &&
                     config.series.map((seriesData, seriesKey) => {
                       if (seriesData.dynamicCategory) {
                         // Get unique categories from the data
@@ -383,7 +401,31 @@ const LineChart = (props: LineChartProps) => {
                     })}
 
                   {/* STANDARD LINE */}
+                  {isLineRace && (
+                    <mask id={lineRaceMaskId} maskUnits='userSpaceOnUse'>
+                      <LinePath
+                        data-line-race-reveal-path
+                        pathLength={1}
+                        curve={allCurves[seriesData.lineType]}
+                        data={sortedData}
+                        x={d => xPos(d)}
+                        y={d =>
+                          seriesAxis === 'Right'
+                            ? yScaleRight(getYAxisData(d, _seriesKey))
+                            : yScale(Number(getYAxisData(d, _seriesKey)))
+                        }
+                        fill='none'
+                        stroke='white'
+                        strokeWidth={(seriesData.weight || 2) + 2}
+                        strokeDasharray={`${normalizedLineRaceProgress} 1`}
+                        defined={(item, i) => {
+                          return item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
+                        }}
+                      />
+                    </mask>
+                  )}
                   <LinePath
+                    data-line-race-series-path={isLineRace ? true : undefined}
                     curve={allCurves[seriesData.lineType]}
                     data={sortedData}
                     x={d => xPos(d)}
@@ -397,6 +439,7 @@ const LineChart = (props: LineChartProps) => {
                     strokeOpacity={1}
                     shapeRendering='geometricPrecision'
                     strokeDasharray={lineType ? handleLineType(lineType) : 0}
+                    mask={isLineRace ? `url(#${lineRaceMaskId})` : undefined}
                     defined={(item, i) => {
                       return item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
                     }}
@@ -473,6 +516,7 @@ const LineChart = (props: LineChartProps) => {
               )}
               {/* Render series labels at end if each line if selected in the editor */}
               {showLineSeriesLabels &&
+                (!isLineRace || lineRaceProgress >= 1) &&
                 (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map(seriesKey => {
                   let lastDatum
                   for (let i = _data.length - 1; i >= 0; i--) {
@@ -540,6 +584,7 @@ const LineChart = (props: LineChartProps) => {
               <React.Fragment key={`series-${seriesKey}-point-${dataIndex}`}>
                 <LineChartCircle
                   mode='TOOLTIP_POINTS'
+                  seriesColor={color}
                   dataIndex={dataIndex}
                   tooltipPoint={d}
                   tableData={tableData}