@cdc/chart 4.24.10 → 4.24.11

package/src/components/LineChart/index.tsx

@@ -17,6 +17,7 @@ import useRightAxis from '../../hooks/useRightAxis'
 import { filterCircles, createStyles, createDataSegments } from './helpers'
 import LineChartCircle from './components/LineChart.Circle'
 import LineChartBumpCircle from './components/LineChart.BumpCircle'
+import isNumber from '@cdc/core/helpers/isNumber'
 
 // Types
 import { type ChartContext } from '../../types/ChartContext'
@@ -38,7 +39,7 @@ const LineChart = (props: LineChartProps) => {
   } = props
 
   // prettier-ignore
-  const { colorScale, config, formatNumber, handleLineType, isNumber, parseDate, seriesHighlight, tableData, transformedData, updateConfig, brushConfig,clean  } = useContext<ChartContext>(ConfigContext)
+  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
 
@@ -51,53 +52,51 @@ const LineChart = (props: LineChartProps) => {
     data = clean(brushConfig.data)
     tableD = clean(brushConfig.data)
   }
+
+  const xPos = d => {
+    return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+  }
+
   return (
     <ErrorBoundary component='LineChart'>
       <Group left={Number(config.runtime.yAxis.size)}>
         {' '}
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
-          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 =
+          const seriesData = config.runtime.series.find(item => item.dataKey === seriesKey)
+          const lineType = seriesData.type
+          const seriesAxis = seriesData.axis || 'left'
+          const 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
           )
-          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)
-          }
+          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)
           return (
             <Group
-              key={`series-${seriesKey}`}
+              key={`series-${seriesKey}-${index}`}
               opacity={
                 legend.behavior === 'highlight' &&
                 seriesHighlight.length > 0 &&
-                seriesHighlight.indexOf(seriesKey) === -1
+                seriesHighlight.indexOf(_seriesKey) === -1
                   ? 0.5
                   : 1
               }
               display={
                 legend.behavior === 'highlight' ||
                 (seriesHighlight.length === 0 && !legend.dynamicLegend) ||
-                seriesHighlight.indexOf(seriesKey) !== -1
+                seriesHighlight.indexOf(_seriesKey) !== -1
                   ? 'block'
                   : 'none'
               }
@@ -113,12 +112,9 @@ const LineChart = (props: LineChartProps) => {
                 onMouseOut={handleTooltipMouseOff}
                 onClick={e => handleTooltipClick(e, data)}
               />
-              {data.map((d, dataIndex) => {
+              {_data.map((d, dataIndex) => {
                 return (
-                  d[seriesKey] !== undefined &&
-                  d[seriesKey] !== '' &&
-                  d[seriesKey] !== null &&
-                  isNumber(d[seriesKey]) && (
+                  isNumber(d[_seriesKey]) && (
                     <React.Fragment key={`series-${seriesKey}-point-${dataIndex}`}>
                       {/* Render label */}
                       {config.labels && (
@@ -126,13 +122,13 @@ const LineChart = (props: LineChartProps) => {
                           x={xPos(d)}
                           y={
                             seriesAxis === 'Right'
-                              ? yScaleRight(getYAxisData(d, seriesKey))
-                              : yScale(getYAxisData(d, seriesKey))
+                              ? yScaleRight(getYAxisData(d, _seriesKey))
+                              : yScale(getYAxisData(d, _seriesKey))
                           }
                           fill={'#000'}
                           textAnchor='middle'
                         >
-                          {formatNumber(d[seriesKey], 'left')}
+                          {formatNumber(d[_seriesKey], 'left')}
                         </Text>
                       )}
 
@@ -142,10 +138,10 @@ const LineChart = (props: LineChartProps) => {
                           dataIndex={dataIndex}
                           circleData={circleData}
                           tableData={tableData}
-                          data={data}
+                          data={_data}
                           d={d}
                           config={config}
-                          seriesKey={seriesKey}
+                          seriesKey={_seriesKey}
                           displayArea={displayArea}
                           tooltipData={tooltipData}
                           xScale={xScale}
@@ -163,10 +159,10 @@ const LineChart = (props: LineChartProps) => {
                         dataIndex={dataIndex}
                         tableData={tableData}
                         circleData={circleData}
-                        data={data}
+                        data={_data}
                         d={d}
                         config={config}
-                        seriesKey={seriesKey}
+                        seriesKey={_seriesKey}
                         displayArea={displayArea}
                         tooltipData={tooltipData}
                         xScale={xScale}
@@ -188,7 +184,7 @@ const LineChart = (props: LineChartProps) => {
                     dataIndex={0}
                     mode='HOVER_POINTS'
                     circleData={circleData}
-                    data={data}
+                    data={_data}
                     config={config}
                     seriesKey={seriesKey}
                     displayArea={displayArea}
@@ -203,78 +199,88 @@ const LineChart = (props: LineChartProps) => {
                 )}
               </>
               {/* SPLIT LINE */}
-              {splittedData.length > 0 ? (
+              {isSplitLine ? (
                 <>
                   <SplitLinePath
-                    curve={allCurves[seriesData[0].lineType]}
-                    segments={data.map(d => [d])}
+                    curve={allCurves[seriesData.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)))
+                        ? yScaleRight(getYAxisData(d, _seriesKey))
+                        : yScale(Number(getYAxisData(d, _seriesKey)))
                     }
-                    styles={styles}
+                    styles={createStyles({
+                      preliminaryData: config.preliminaryData,
+                      data: tableD,
+                      stroke: colorScale(config.runtime.seriesLabels[seriesKey]),
+                      strokeWidth: seriesData.weight || 2,
+                      handleLineType,
+                      lineType,
+                      seriesKey
+                    })}
                     defined={(item, i) => {
                       return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
                     }}
                   />
 
                   {suppressedSegments.map((segment, index) => {
-                    return (
-                      <LinePath
-                        key={index}
-                        data={segment.data}
-                        x={d => xPos(d)}
-                        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}
-                        shapeRendering='geometricPrecision'
-                        strokeDasharray={handleLineType(segment.style)}
-                        defined={(item, i) => {
-                          return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
-                        }}
-                      />
-                    )
+                    return Object.entries(segment.data).map(([key, value]) => {
+                      return (
+                        <LinePath
+                          key={index}
+                          data={value}
+                          x={d => xPos(d)}
+                          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}
+                          shapeRendering='geometricPrecision'
+                          strokeDasharray={handleLineType(segment.style)}
+                          defined={(item, i) => {
+                            return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                          }}
+                        />
+                      )
+                    })
                   })}
                 </>
               ) : (
                 <>
                   {/* STANDARD LINE */}
                   <LinePath
-                    curve={allCurves[seriesData[0].lineType]}
+                    curve={allCurves[seriesData.lineType]}
                     data={
                       config.visualizationType == 'Bump Chart'
-                        ? data
+                        ? _data
                         : config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
-                        ? data.sort((d1, d2) => {
+                        ? _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
+                        : _data
                     }
                     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={colorScale(config.runtime.seriesLabels[seriesKey])}
-                    strokeWidth={seriesData[0].weight || 2}
+                    strokeWidth={seriesData.weight || 2}
                     strokeOpacity={1}
                     shapeRendering='geometricPrecision'
                     strokeDasharray={lineType ? handleLineType(lineType) : 0}
                     defined={(item, i) => {
-                      return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                      return item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
                     }}
                   />
                 </>
@@ -288,11 +294,11 @@ const LineChart = (props: LineChartProps) => {
                     cx={xPos(item.data)}
                     cy={
                       seriesAxis === 'Right'
-                        ? yScaleRight(getYAxisData(item.data, seriesKey))
-                        : yScale(Number(getYAxisData(item.data, seriesKey)))
+                        ? yScaleRight(getYAxisData(item.data, _seriesKey))
+                        : yScale(Number(getYAxisData(item.data, _seriesKey)))
                     }
                     r={item.size}
-                    strokeWidth={seriesData[0].weight || 2}
+                    strokeWidth={seriesData.weight || 2}
                     stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'}
                     fill={
                       item.isFilled
@@ -309,13 +315,13 @@ const LineChart = (props: LineChartProps) => {
               {config.animate && (
                 <LinePath
                   className='animation'
-                  curve={allCurves[seriesData[0].lineType]}
-                  data={data}
+                  curve={allCurves[seriesData.lineType]}
+                  data={_data}
                   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='#fff'
                   strokeWidth={3}
@@ -331,9 +337,9 @@ const LineChart = (props: LineChartProps) => {
               {showLineSeriesLabels &&
                 (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map(seriesKey => {
                   let lastDatum
-                  for (let i = data.length - 1; i >= 0; i--) {
-                    if (data[i][seriesKey]) {
-                      lastDatum = data[i]
+                  for (let i = _data.length - 1; i >= 0; i--) {
+                    if (_data[i][seriesKey]) {
+                      lastDatum = _data[i]
                       break
                     }
                   }
@@ -341,7 +347,7 @@ const LineChart = (props: LineChartProps) => {
                     return <></>
                   }
                   return (
-                    <text
+                    <Text
                       x={xPos(lastDatum) + 5}
                       y={yScale(getYAxisData(lastDatum, seriesKey))}
                       alignmentBaseline='middle'
@@ -352,7 +358,7 @@ const LineChart = (props: LineChartProps) => {
                       }
                     >
                       {config.runtime.seriesLabels[seriesKey] || seriesKey}
-                    </text>
+                    </Text>
                   )
                 })}
             </Group>

package/src/components/LinearChart.tsx

@@ -109,7 +109,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const triggerRef = useRef()
   const xAxisLabelRefs = useRef([])
   const xAxisTitleRef = useRef(null)
-  const prevTickRef = useRef(null)
 
   const dataRef = useIntersectionObserver(triggerRef, {
     freezeOnceVisible: false
@@ -130,7 +129,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   // height before bottom axis
   const initialHeight = useMemo(
     () => calcInitialHeight(config, currentViewport),
-    [config, currentViewport, parentHeight]
+    [config, currentViewport, parentHeight, config.heights?.vertical, config.heights?.horizontal]
   )
   const forestHeight = useMemo(() => initialHeight + forestRowsHeight, [initialHeight, forestRowsHeight])
 
@@ -227,16 +226,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     return tick
   }
 
-  const handleBottomTickFormatting = tick => {
+  const handleBottomTickFormatting = (tick, i, ticks) => {
     if (isLogarithmicAxis && tick === 0.1) {
       // when logarithmic scale applied change value FIRST  of  tick
       tick = 0
     }
 
     if (isDateScale(runtime.xAxis) && config.visualizationType !== 'Forest Plot') {
-      const formattedDate = formatDate(tick, prevTickRef.current)
-      prevTickRef.current = tick
-      return formattedDate
+      return formatDate(tick, i, ticks)
     }
     if (orientation === 'horizontal' && config.visualizationType !== 'Forest Plot')
       return formatNumber(tick, 'left', shouldAbbreviate)
@@ -279,7 +276,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           tickCount = 4 // same default as standalone components
         }
       }
-      if (Number(tickCount) > Number(max)) {
+      if (Number(tickCount) > Number(max) && !isHorizontal) {
         // cap it and round it so its an integer
         tickCount = Number(min) < 0 ? Math.round(max) * 2 : Math.round(max)
       }
@@ -410,7 +407,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const legendIsLeftOrRight =
       legend?.position !== 'top' && legend?.position !== 'bottom' && !isLegendWrapViewport(currentViewport)
     legendRef.current.style.transform = legendIsLeftOrRight ? `translateY(${topLabelOnGridlineHeight}px)` : 'none'
-  }, [axisBottomRef.current, config, bottomLabelStart, brush, currentViewport, topYLabelRef.current])
+  }, [axisBottomRef.current, config, bottomLabelStart, brush, currentViewport, topYLabelRef.current, initialHeight])
 
   const chartHasTooltipGuides = () => {
     const { visualizationType } = config
@@ -690,7 +687,17 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               showTooltip={showTooltip}
             />
           )}
-          {visualizationType === 'Box Plot' && <BoxPlot xScale={xScale} yScale={yScale} />}
+          {visualizationType === 'Box Plot' && (
+            <BoxPlot
+              seriesScale={seriesScale}
+              xMax={xMax}
+              yMax={yMax}
+              min={min}
+              max={max}
+              xScale={xScale}
+              yScale={yScale}
+            />
+          )}
           {((visualizationType === 'Area Chart' && config.visualizationSubType === 'regular') ||
             visualizationType === 'Combo') && (
             <AreaChart
@@ -1476,7 +1483,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                     <Text
                       innerRef={xAxisTitleRef}
                       className='x-axis-title-label'
-                      x={axisCenter}
+                      x={xMax / 2}
                       y={isForestPlot ? 0 /* set via ref */ : axisMaxHeight}
                       textAnchor='middle'
                       verticalAnchor='start'

package/src/components/Sankey/index.tsx

@@ -14,9 +14,10 @@ import ConfigContext from '@cdc/chart/src/ConfigContext'
 import { ChartContext } from '../../types/ChartContext'
 import type { SankeyNode, SankeyProps } from './types'
 import { SankeyChartConfig, AllChartsConfig } from '../../types/ChartConfig'
+import useSankeyAlert from './useSankeyAlert'
 
 const Sankey = ({ width, height, runtime }: SankeyProps) => {
-  const { config } = useContext<ChartContext>(ConfigContext)
+  const { config, handleChartTabbing, legendId } = useContext<ChartContext>(ConfigContext)
   const { sankey: sankeyConfig } = config
 
   const isSankeyChartConfig = (config: AllChartsConfig | SankeyChartConfig): config is SankeyChartConfig => {
@@ -28,8 +29,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
 
   //Tooltip
   const [tooltipID, setTooltipID] = useState<string>('')
-  //Mobile Pop Up
-  const [showPopup, setShowPopup] = useState(false)
+  const { showAlert, alert } = useSankeyAlert()
 
   const handleNodeClick = (nodeId: string) => {
     // Store the previous tooltipID
@@ -46,16 +46,6 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
     }
   }
 
-  useEffect(() => {
-    if (window.innerWidth < 768 && window.innerHeight > window.innerWidth) {
-      setShowPopup(true)
-    }
-  }, [window.innerWidth])
-
-  const closePopUp = () => {
-    setShowPopup(false)
-  }
-
   // Uses Visx Groups innerRef to get all Group elements that are mapped.
   // Sets the largest group width in state and subtracts that group the svg width to calculate overall width.
   useEffect(() => {
@@ -313,7 +303,11 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
-              <tspan className={classStyle}>{sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}</tspan>
+              <tspan className={classStyle}>
+                {sankeyConfig.nodeValueStyle.textBefore +
+                  (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) +
+                  sankeyConfig.nodeValueStyle.textAfter}
+              </tspan>
             </text>
           </>
         )}
@@ -415,7 +409,16 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
             >
               {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextBefore}
             </Text>
-            <Text verticalAnchor='end' className={classStyle} x={node.x0! + textPositionHorizontal} y={(node.y1! + node.y0! + 25) / 2} fill={sankeyConfig.storyNodeFontColor || sankeyConfig.nodeFontColor} fontWeight='bold' textAnchor='start' style={{ pointerEvents: 'none' }}>
+            <Text
+              verticalAnchor='end'
+              className={classStyle}
+              x={node.x0! + textPositionHorizontal}
+              y={(node.y1! + node.y0! + 25) / 2}
+              fill={sankeyConfig.storyNodeFontColor || sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor='start'
+              style={{ pointerEvents: 'none' }}
+            >
               {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
             </Text>
             <Text
@@ -434,7 +437,15 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
           </>
         ) : (
           <>
-            <text x={node.x0! + textPositionHorizontal} y={(node.y1! + node.y0!) / 2 + textPositionVertical} dominantBaseline='text-before-edge' fill={sankeyConfig.nodeFontColor} fontWeight='bold' textAnchor='start' style={{ pointerEvents: 'none' }}>
+            <text
+              x={node.x0! + textPositionHorizontal}
+              y={(node.y1! + node.y0!) / 2 + textPositionVertical}
+              dominantBaseline='text-before-edge'
+              fill={sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor='start'
+              style={{ pointerEvents: 'none' }}
+            >
               <tspan id={node.id} className='node-id'>
                 {node.id}
               </tspan>
@@ -451,7 +462,9 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               style={{ pointerEvents: 'none' }}
             >
               <tspan onClick={() => handleNodeClick(node.id)} className={classStyle}>
-                {sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}
+                {sankeyConfig.nodeValueStyle.textBefore +
+                  (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) +
+                  sankeyConfig.nodeValueStyle.textAfter}
               </tspan>
             </text>
           </>
@@ -460,10 +473,15 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
     )
   })
 
-  return (
+  return !showAlert ? (
     <>
       <div className='sankey-chart'>
-        <svg className='sankey-chart__diagram' width={width} height={Number(config.heights.vertical)} style={{ overflow: 'visible' }}>
+        <svg
+          className='sankey-chart__diagram'
+          width={width}
+          height={Number(config.heights.vertical)}
+          style={{ overflow: 'visible' }}
+        >
           <Group className='links'>{allLinks}</Group>
           <Group className='nodes'>{allNodes}</Group>
           <Group className='finalNodes' style={{ display: 'none' }}>
@@ -473,21 +491,21 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
 
         {/* ReactTooltip needs to remain even if tooltips are disabled -- it handles when a user clicks off of the node and resets
         the sankey diagram. When tooltips are disabled this will nothing */}
-        <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`} afterHide={() => setTooltipID('')} events={['click']} place={'bottom'} style={{ backgroundColor: `rgba(238, 238, 238, 1)`, color: 'black', boxShadow: `0 3px 10px rgb(0 0 0 / 0.2)` }} />
-        {showPopup && (
-          <div className='popup'>
-            <div className='popup-content'>
-              <button className='visually-hidden' onClick={closePopUp}>
-                Select for accessible version.
-              </button>
-              <p>
-                <strong>Please change the orientation of your screen or increase the size of your browser to view the diagram better.</strong>
-              </p>
-            </div>
-          </div>
-        )}
+        <ReactTooltip
+          id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
+          afterHide={() => setTooltipID('')}
+          events={['click']}
+          place={'bottom'}
+          style={{
+            backgroundColor: `rgba(238, 238, 238, 1)`,
+            color: 'black',
+            boxShadow: `0 3px 10px rgb(0 0 0 / 0.2)`
+          }}
+        />
       </div>
     </>
+  ) : (
+    alert
   )
 }
 export default Sankey

package/src/components/Sankey/sankey.scss

@@ -25,8 +25,12 @@
     margin: 10px 0;
   }
 
+  .alert-dismissible {
+    padding-right: 4rem !important;
+  }
+
   svg.sankey-chart__diagram {
-    position:relative;
+    position: relative;
     font-family: 'Roboto', sans-serif;
     height: auto;
     width: 100%;
@@ -124,9 +128,6 @@
     .popup {
       display: block; /* Show the popup on smaller screens */
     }
-    .sankey-chart__diagram {
-      opacity: .1;
-    }
   }
 }
 
@@ -150,4 +151,4 @@
   font-size: 30px;
   padding: 10px;
   text-align: center;
-}
+}

package/src/components/Sankey/useSankeyAlert.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect, useContext } from 'react'
+import { ChartContext } from '../../types/ChartContext'
+import ConfigContext from '../../ConfigContext'
+
+const useSankeyAlert = () => {
+  const { config, handleChartTabbing, legendId } = useContext<ChartContext>(ConfigContext)
+
+  //Mobile Pop Up
+  const [showAlert, setShowAlert] = useState(false)
+  const alertMessage = (
+    <>
+      For best viewing we recommend portrait mode. If you are unable to put your device in portrait mode, please review
+      the <a href={`#${handleChartTabbing(config, legendId)}`}>data table</a> below.{' '}
+      <a onClick={() => setShowAlert(false)} href={'#!'}>
+        Close this alert
+      </a>{' '}
+      to continue viewing the chart.
+    </>
+  )
+
+  const handleCloseModal = () => {
+    setShowAlert(false)
+  }
+
+  const alert = showAlert ? (
+    <div className='alert alert-warning alert-dismissible' role='alert'>
+      <p style={{ padding: '35px' }}>{alertMessage}</p>
+      <button type='button' className='close' data-dismiss='alert' aria-label='Close' onClick={handleCloseModal}>
+        <span aria-hidden='true'>&times;</span>
+      </button>
+    </div>
+  ) : null
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768 && window.innerHeight > window.innerWidth) {
+        setShowAlert(true)
+      } else {
+        setShowAlert(false)
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    handleResize() // Call the function initially to set the state based on the initial window size
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return {
+    setShowAlert,
+    showAlert,
+    handleCloseModal,
+    alertMessage,
+    alert
+  }
+}
+
+export default useSankeyAlert