@cdc/chart 4.24.7 → 4.24.9

package/src/components/LineChart/index.tsx

@@ -16,6 +16,7 @@ import useRightAxis from '../../hooks/useRightAxis'
 // Local helpers and components
 import { filterCircles, createStyles, createDataSegments } from './helpers'
 import LineChartCircle from './components/LineChart.Circle'
+import LineChartBumpCircle from './components/LineChart.BumpCircle'
 
 // Types
 import { type ChartContext } from '../../types/ChartContext'
@@ -56,15 +57,29 @@ const LineChart = (props: LineChartProps) => {
         {' '}
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
-          let lineType = config.series.filter(item => item.dataKey === seriesKey)[0].type
-          const seriesData = config.series.filter(item => item.dataKey === seriesKey)
+          let lineType = config.runtime.series.filter(item => item.dataKey === seriesKey)[0].type
+          const seriesData = config.runtime.series.filter(item => item.dataKey === seriesKey)
           const seriesAxis = seriesData[0].axis ? seriesData[0].axis : 'left'
-          let displayArea = legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
+          let displayArea =
+            legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
           const circleData = filterCircles(config?.preliminaryData, tableD, seriesKey)
           // styles for preliminary Data  items
-          let styles = createStyles({ preliminaryData: config.preliminaryData, data: tableD, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), strokeWidth: seriesData[0].weight || 2, handleLineType, lineType, seriesKey })
-          const suppressedSegments = createDataSegments(tableData, seriesKey, config.preliminaryData, config.xAxis.dataKey)
-
+          let styles = createStyles({
+            preliminaryData: config.preliminaryData,
+            data: tableD,
+            stroke: colorScale(config.runtime.seriesLabels[seriesKey]),
+            strokeWidth: seriesData[0].weight || 2,
+            handleLineType,
+            lineType,
+            seriesKey
+          })
+          const suppressedSegments = createDataSegments(
+            tableData,
+            seriesKey,
+            config.preliminaryData,
+            config.xAxis.dataKey
+          )
+          const splittedData = config?.preliminaryData?.filter(pd => pd.style && !pd.style.includes('Circles'))
           let xPos = d => {
             return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
           }
@@ -72,36 +87,56 @@ const LineChart = (props: LineChartProps) => {
           return (
             <Group
               key={`series-${seriesKey}`}
-              opacity={legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
-              display={legend.behavior === 'highlight' || (seriesHighlight.length === 0 && !legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
+              opacity={
+                legend.behavior === 'highlight' &&
+                seriesHighlight.length > 0 &&
+                seriesHighlight.indexOf(seriesKey) === -1
+                  ? 0.5
+                  : 1
+              }
+              display={
+                legend.behavior === 'highlight' ||
+                (seriesHighlight.length === 0 && !legend.dynamicLegend) ||
+                seriesHighlight.indexOf(seriesKey) !== -1
+                  ? 'block'
+                  : 'none'
+              }
             >
+              {/* tooltips */}
+              <Bar
+                key={'bars'}
+                width={Number(xMax)}
+                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) => {
-                // Find the series object from the config.series array that has a dataKey matching the seriesKey variable.
-                const series = config.series.find(({ dataKey }) => dataKey === seriesKey)
-                const { axis } = series
-
-                const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
-                const labeltype = axis === 'Right' ? 'rightLabel' : 'label'
-                let label = config.runtime.yAxis[labeltype]
-
-                // if has muiltiple series dont show legend value on tooltip
-                if (!hasMultipleSeries) label = config.isLegendValue ? config.runtime.seriesLabels[seriesKey] : label
-
                 return (
                   d[seriesKey] !== undefined &&
                   d[seriesKey] !== '' &&
                   d[seriesKey] !== null &&
                   isNumber(d[seriesKey]) && (
-                    <Group key={`series-${seriesKey}-point-${dataIndex}`} className='checkwidth'>
-                      {/* tooltips */}
-                      <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, tableData)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
-
-                      {/* Render legend */}
-                      <Text display={config.labels ? 'block' : 'none'} x={xPos(d)} y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))} fill={'#000'} textAnchor='middle'>
-                        {formatNumber(d[seriesKey], 'left')}
-                      </Text>
+                    <React.Fragment key={`series-${seriesKey}-point-${dataIndex}`}>
+                      {/* Render label */}
+                      {config.labels && (
+                        <Text
+                          x={xPos(d)}
+                          y={
+                            seriesAxis === 'Right'
+                              ? yScaleRight(getYAxisData(d, seriesKey))
+                              : yScale(getYAxisData(d, seriesKey))
+                          }
+                          fill={'#000'}
+                          textAnchor='middle'
+                        >
+                          {formatNumber(d[seriesKey], 'left')}
+                        </Text>
+                      )}
 
-                      {(lineDatapointStyle === 'hidden' || lineDatapointStyle === 'always show') && (
+                      {lineDatapointStyle === 'always show' && (
                         <LineChartCircle
                           mode='ALWAYS_SHOW_POINTS'
                           dataIndex={dataIndex}
@@ -142,7 +177,7 @@ const LineChart = (props: LineChartProps) => {
                         seriesAxis={seriesAxis}
                         key={`isolated-circle-${dataIndex}`}
                       />
-                    </Group>
+                    </React.Fragment>
                   )
                 )
               })}
@@ -168,14 +203,18 @@ const LineChart = (props: LineChartProps) => {
                 )}
               </>
               {/* SPLIT LINE */}
-              {config?.preliminaryData?.some(pd => pd.value && pd.type) ? (
+              {splittedData.length > 0 ? (
                 <>
                   <SplitLinePath
                     curve={allCurves[seriesData[0].lineType]}
                     segments={data.map(d => [d])}
                     segmentation='x'
                     x={d => xPos(d)}
-                    y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                    y={d =>
+                      seriesAxis === 'Right'
+                        ? yScaleRight(getYAxisData(d, seriesKey))
+                        : yScale(Number(getYAxisData(d, seriesKey)))
+                    }
                     styles={styles}
                     defined={(item, i) => {
                       return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
@@ -188,7 +227,11 @@ const LineChart = (props: LineChartProps) => {
                         key={index}
                         data={segment.data}
                         x={d => xPos(d)}
-                        y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                        y={d =>
+                          seriesAxis === 'Right'
+                            ? yScaleRight(getYAxisData(d, seriesKey))
+                            : yScale(Number(getYAxisData(d, seriesKey)))
+                        }
                         stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
                         strokeWidth={seriesData[0].weight || 2}
                         strokeOpacity={1}
@@ -207,7 +250,9 @@ const LineChart = (props: LineChartProps) => {
                   <LinePath
                     curve={allCurves[seriesData[0].lineType]}
                     data={
-                      config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
+                      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)
@@ -218,7 +263,11 @@ const LineChart = (props: LineChartProps) => {
                         : data
                     }
                     x={d => xPos(d)}
-                    y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                    y={d =>
+                      seriesAxis === 'Right'
+                        ? yScaleRight(getYAxisData(d, seriesKey))
+                        : yScale(Number(getYAxisData(d, seriesKey)))
+                    }
                     stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
                     strokeWidth={seriesData[0].weight || 2}
                     strokeOpacity={1}
@@ -237,11 +286,21 @@ const LineChart = (props: LineChartProps) => {
                   <circle
                     key={i}
                     cx={xPos(item.data)}
-                    cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(item.data, seriesKey)) : yScale(Number(getYAxisData(item.data, seriesKey)))}
+                    cy={
+                      seriesAxis === 'Right'
+                        ? yScaleRight(getYAxisData(item.data, seriesKey))
+                        : yScale(Number(getYAxisData(item.data, seriesKey)))
+                    }
                     r={item.size}
                     strokeWidth={seriesData[0].weight || 2}
                     stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'}
-                    fill={item.isFilled ? (colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000') : '#fff'}
+                    fill={
+                      item.isFilled
+                        ? colorScale
+                          ? colorScale(config.runtime.seriesLabels[seriesKey])
+                          : '#000'
+                        : '#fff'
+                    }
                   />
                 )
               })}
@@ -253,7 +312,11 @@ const LineChart = (props: LineChartProps) => {
                   curve={allCurves[seriesData[0].lineType]}
                   data={data}
                   x={d => xPos(d)}
-                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                  y={d =>
+                    seriesAxis === 'Right'
+                      ? yScaleRight(getYAxisData(d, seriesKey))
+                      : yScale(Number(getYAxisData(d, seriesKey)))
+                  }
                   stroke='#fff'
                   strokeWidth={3}
                   strokeOpacity={1}
@@ -278,7 +341,16 @@ const LineChart = (props: LineChartProps) => {
                     return <></>
                   }
                   return (
-                    <text x={xPos(lastDatum) + 5} y={yScale(getYAxisData(lastDatum, seriesKey))} alignmentBaseline='middle' fill={config.colorMatchLineSeriesLabels && colorScale ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey) : 'black'}>
+                    <text
+                      x={xPos(lastDatum) + 5}
+                      y={yScale(getYAxisData(lastDatum, seriesKey))}
+                      alignmentBaseline='middle'
+                      fill={
+                        config.colorMatchLineSeriesLabels && colorScale
+                          ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey)
+                          : 'black'
+                      }
+                    >
                       {config.runtime.seriesLabels[seriesKey] || seriesKey}
                     </text>
                   )
@@ -293,6 +365,9 @@ const LineChart = (props: LineChartProps) => {
           </Text>
         )}
       </Group>
+      {config.visualizationType === 'Bump Chart' && (
+        <LineChartBumpCircle config={config} xScale={xScale} yScale={yScale} />
+      )}
     </ErrorBoundary>
   )
 }