@cdc/chart 4.24.2 → 4.24.3

package/src/components/Regions/components/Regions.tsx

@@ -1,102 +1,153 @@
-import React, { useContext } from 'react'
-import { ChartConfig } from '../../../types/ChartConfig'
+import React, { MouseEventHandler, useContext } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import { ChartContext } from '../../../types/ChartContext'
 import { Text } from '@visx/text'
 import { Group } from '@visx/group'
-import * as d3 from 'd3'
-import { formatDate } from '@cdc/core/helpers/cove/date.js'
+import { formatDate, isDateScale } from '@cdc/core/helpers/cove/date.js'
 
 type RegionsProps = {
   xScale: Function
   yMax: number
   barWidth?: number
   totalBarsInGroup?: number
+  handleTooltipMouseOff: MouseEventHandler<SVGElement>
+  handleTooltipMouseOver: MouseEventHandler<SVGElement>
+  handleTooltipClick: MouseEventHandler<SVGElement>
+  tooltipData: unknown
+  showTooltip: Function
+  hideTooltip: Function
 }
 
-const Regions = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleTooltipMouseOff, handleTooltipMouseOver, handleTooltipClick, tooltipData, showTooltip, hideTooltip }: RegionsProps) => {
+// TODO: should regions be removed on categorical axis?
+const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleTooltipMouseOff, handleTooltipMouseOver, handleTooltipClick, tooltipData, showTooltip, hideTooltip }) => {
   const { parseDate, config } = useContext<ChartContext>(ConfigContext)
 
   const { runtime, regions, visualizationType, orientation, xAxis } = config
+  const domain = xScale.domain()
 
-  let from
-  let to
-  let width
+  const getFromValue = region => {
+    let from
 
-  if (regions && orientation === 'vertical') {
-    return regions.map(region => {
-      if (xAxis.type === 'date' && region.fromType !== 'Previous Days') {
-        from = xScale(parseDate(region.from).getTime())
-        to = xScale(parseDate(region.to).getTime())
-        width = to - from
+    // Fixed Date
+    if (!region?.fromType || region.fromType === 'Fixed') {
+      const date = new Date(region.from)
+      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+      from = xScale(parsedDate)
+
+      if (visualizationType === 'Bar' && xAxis.type === 'date-time') {
+        from = from - (barWidth * totalBarsInGroup) / 2
+      }
+    }
+
+    // Previous Date
+    if (region.fromType === 'Previous Days') {
+      const previousDays = Number(region.from) || 0
+      const categoricalDomain = domain.map(d => formatDate(config.xAxis.dateParseFormat, new Date(d)))
+      const d = region.toType === 'Last Date' ? new Date(domain[domain.length - 1]).getTime() : new Date(region.to) // on categorical charts force leading zero 03/15/2016 vs 3/15/2016 for valid date format
+      const to = config.xAxis.type === 'categorical' ? formatDate(config.xAxis.dateParseFormat, d) : formatDate(config.xAxis.dateParseFormat, d)
+      const toDate = new Date(to)
+      from = new Date(toDate.setDate(toDate.getDate() - Number(previousDays)))
+
+      if (xAxis.type === 'date') {
+        from = new Date(formatDate(xAxis.dateParseFormat, from)).getTime()
+
+        let closestDate = domain[0]
+        let minDiff = Math.abs(from - closestDate)
+
+        for (let i = 1; i < domain.length; i++) {
+          const diff = Math.abs(from - domain[i])
+          if (diff < minDiff) {
+            minDiff = diff
+            closestDate = domain[i]
+          }
+        }
+        from = closestDate
       }
 
+      // Here the domain is in the xScale.dateParseFormat
       if (xAxis.type === 'categorical') {
-        from = xScale(region.from)
-        to = xScale(region.to)
-        width = to - from
+        let closestDate = domain[0]
+        let minDiff = Math.abs(new Date(from).getTime() - new Date(closestDate).getTime())
+
+        for (let i = 1; i < domain.length; i++) {
+          const diff = Math.abs(new Date(from).getTime() - new Date(domain[i]).getTime())
+          if (diff < minDiff) {
+            minDiff = diff
+            closestDate = domain[i]
+          }
+        }
+        from = closestDate
       }
 
-      if ((visualizationType === 'Bar' || config.visualizationType === 'Combo') && xAxis.type === 'date') {
-        from = region.fromType !== 'Previous Days' ? xScale(parseDate(region.from).getTime()) - (barWidth * totalBarsInGroup) / 2 : null
-        to = region.toType !== 'Last Date' ? xScale(parseDate(region.to).getTime()) + (barWidth * totalBarsInGroup) / 2 : null
+      from = xScale(from)
+    }
 
-        width = to - from
-      }
+    if (xAxis.type === 'categorical' && region.fromType !== 'Previous Days') {
+      from = xScale(region.from)
+    }
 
-      if ((visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.xAxis.type === 'categorical') {
-        from = xScale(region.from)
-        to = xScale(region.to)
-        width = to - from
+    if (visualizationType === 'Line' || visualizationType === 'Area Chart') {
+      let scalePadding = Number(config.yAxis.size)
+      if (xScale.bandwidth) {
+        scalePadding += xScale.bandwidth() / 2
       }
+      from = from + scalePadding
+    }
 
-      if (region.fromType === 'Previous Days') {
-        to = region.toType !== 'Last Date' ? xScale(parseDate(region.to).getTime()) + (barWidth * totalBarsInGroup) / 2 : null
-
-        let domain = xScale.domain()
-        let bisectDate = d3.bisector(d => d).left
-        let closestValue
-
-        let previousDays = Number(region.from)
-        let lastDate = region.toType === 'Last Date' ? domain[domain.length - 1] : region.to
-        let toDate = new Date(lastDate)
-
-        from = new Date(toDate.setDate(toDate.getDate() - previousDays)).getTime()
-        let targetValue = from
-
-        let index = bisectDate(domain, targetValue)
-        if (index === 0) {
-          closestValue = domain[0]
-        } else if (index === domain.length) {
-          closestValue = domain[domain.length - 1]
-        } else {
-          let d0 = domain[index - 1]
-          let d1 = domain[index]
-          closestValue = targetValue - d0 > d1 - targetValue ? d1 : d0
-        }
-        from = Number(xScale(closestValue) - (visualizationType === 'Bar' || visualizationType === 'Combo' ? (barWidth * totalBarsInGroup) / 2 : 0))
+    if (visualizationType === 'Bar' && config.xAxis.type === 'date-time' && region.fromType === 'Previous Days') {
+      from = from - (barWidth * totalBarsInGroup) / 2
+    }
 
-        width = to - from
-      }
+    return from
+  }
 
-      // set the region max to the charts max range.
-      if (region.toType === 'Last Date') {
-        let domainValues = xScale.domain()
-        let lastDate = domainValues[domainValues.length - 1]
-        to = Number(xScale(lastDate) + (visualizationType === 'Bar' || visualizationType === 'Combo' ? (barWidth * totalBarsInGroup) / 2 : 0))
-        width = to - from
+  const getToValue = region => {
+    let to
+
+    // when xScale is categorical leading zeros are removed, ie. 03/15/2016 is 3/15/2016
+    if (xAxis.type === 'categorical') {
+      to = xScale(region.to)
+    }
+
+    if (isDateScale(xAxis)) {
+      if (!region?.toType || region.toType === 'Fixed') {
+        to = xScale(parseDate(region.to).getTime())
       }
 
-      if (region.fromType === 'Previous Days' && xAxis.type === 'date' && xAxis.sortDates && config.visualizationType === 'Line') {
-        let domain = xScale.domain()
-        let previousDays = Number(region.from)
-        let to = region.toType === 'Last Date' ? formatDate(config.xAxis.dateParseFormat, domain[domain.length - 1]) : region.to
-        let toDate = new Date(to)
-        from = new Date(toDate.setDate(toDate.getDate() - previousDays)).getTime()
-        from = xScale(from)
-        to = xScale(parseDate(to))
-        width = to - from
+      if (visualizationType === 'Bar' || config.visualizationType === 'Combo') {
+        to = region.toType !== 'Last Date' ? xScale(parseDate(region.to).getTime()) + barWidth * totalBarsInGroup : to
       }
+    }
+    if (region.toType === 'Last Date') {
+      const lastDate = domain[domain.length - 1]
+      to = Number(xScale(lastDate) + ((visualizationType === 'Bar' || visualizationType === 'Combo') && config.xAxis.type === 'date' ? barWidth * totalBarsInGroup : 0))
+    }
+
+    if (visualizationType === 'Line' || visualizationType === 'Area Chart') {
+      let scalePadding = Number(config.yAxis.size)
+      if (xScale.bandwidth) {
+        scalePadding += xScale.bandwidth() / 2
+      }
+      to = to + scalePadding
+    }
+
+    if (visualizationType === 'Bar' && config.xAxis.type === 'date-time' && region.toType !== 'Last Date') {
+      to = to - (barWidth * totalBarsInGroup) / 2
+    }
+
+    if ((visualizationType === 'Bar' || visualizationType === 'Combo') && xAxis.type === 'categorical') {
+      to = to + (visualizationType === 'Bar' || visualizationType === 'Combo' ? barWidth * totalBarsInGroup : 0)
+    }
+    return to
+  }
+
+  const getWidth = (to, from) => to - from
+
+  if (regions && orientation === 'vertical') {
+    return regions.map(region => {
+      const from = getFromValue(region)
+      const to = getToValue(region)
+      const width = getWidth(to, from)
 
       if (!from) return null
       if (!to) return null
@@ -120,16 +171,7 @@ const Regions = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleToolt
       }
 
       return (
-        <Group
-          className='regions regions-group--line'
-          left={config.visualizationType === 'Bar' || config.visualizationType === 'Combo' ? 0 : config?.visualizationType === 'Line' ? Number(runtime.yAxis.size) : 0}
-          key={region.label}
-          onMouseMove={handleTooltipMouseOver}
-          onMouseLeave={handleTooltipMouseOff}
-          handleTooltipClick={handleTooltipClick}
-          tooltipData={JSON.stringify(tooltipData)}
-          showTooltip={showTooltip}
-        >
+        <Group height={100} fill='red' className='regions regions-group--line zzz' key={region.label} onMouseMove={handleTooltipMouseOver} onMouseLeave={handleTooltipMouseOff} handleTooltipClick={handleTooltipClick} tooltipData={JSON.stringify(tooltipData)} showTooltip={showTooltip}>
           <TopRegionBorderShape />
           <HighlightedArea />
           <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>

package/src/components/Sankey/index.tsx

@@ -0,0 +1,434 @@
+import { useContext, useState, useRef, useEffect } from 'react'
+
+// External Libraries
+import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip'
+import { SankeyGraph, sankey, sankeyLinkHorizontal, sankeyLeft } from 'd3-sankey'
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import ReactDOMServer from 'react-dom/server'
+
+// Cdc
+import './sankey.scss'
+import 'react-tooltip/dist/react-tooltip.css'
+import ConfigContext from '@cdc/chart/src/ConfigContext'
+import { ChartContext } from '../../types/ChartContext'
+import type { SankeyNode, SankeyProps } from './types'
+
+const Sankey = ({ width, height, runtime }: SankeyProps) => {
+  const DEBUG = true
+  const { config } = useContext<ChartContext>(ConfigContext)
+  const { sankey: sankeyConfig } = config
+  // !info - changed config.sankey.data here to work with our current upload pattern saved on config.data
+  const data = config?.data[0]
+  const [largestGroupWidth, setLargestGroupWidth] = useState(0)
+  const groupRefs = useRef([])
+
+  //Tooltip
+  const [tooltipID, setTooltipID] = useState<string>('')
+
+  const handleNodeClick = (nodeId: string) => {
+    setTooltipID(nodeId)
+  }
+
+  const clearNodeClick = () => {
+    setTooltipID('')
+  }
+
+  //Mobile Pop Up
+  const [showPopup, setShowPopup] = useState(false)
+
+  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(() => {
+    let largest = 0
+    groupRefs?.current?.map(g => {
+      const groupWidth = g?.getBoundingClientRect().width
+      if (groupWidth > largest) {
+        largest = groupWidth
+      }
+    })
+    setLargestGroupWidth(largest)
+  }, [groupRefs, sankeyConfig, window.innerWidth])
+
+  //Retrieve all the unique values for the Nodes
+  const uniqueNodes = Array.from(new Set(data?.links?.flatMap(link => [link.source, link.target])))
+
+  // Convert JSON data to the format required
+  const sankeyData: SankeyGraph<SankeyNode, { source: number; target: number }> = {
+    nodes: uniqueNodes.map(nodeId => ({ id: nodeId })),
+    links: data?.links?.map(link => ({
+      source: uniqueNodes.findIndex(node => node === link.source),
+      target: uniqueNodes.findIndex(node => node === link.target),
+      value: link.value
+    }))
+  }
+
+  let textPositionHorizontal = 5
+  const BUFFER = 50
+
+  // Set the sankey diagram properties  console.log('largestGroupWidth', largestGroupWidth)
+
+  const sankeyGenerator = sankey<SankeyNode, { source: number; target: number }>()
+    .nodeWidth(sankeyConfig.nodeSize.nodeWidth)
+    .nodePadding(sankeyConfig.nodePadding)
+    .iterations(sankeyConfig.iterations)
+    .nodeAlign(sankeyLeft)
+    .extent([
+      [sankeyConfig.margin.margin_x, Number(sankeyConfig.margin.margin_y)],
+      [width - textPositionHorizontal - largestGroupWidth, config.heights.vertical - BUFFER]
+    ])
+
+  const { nodes, links } = sankeyGenerator(sankeyData)
+
+  const nodeStyle = (id: string) => {
+    let textPositionHorizontal = 30
+    let textPositionVertical = 0
+    let classStyle = 'node-value--storynode'
+    let storyNodes = true
+
+    // TODO: need a dynamic way to apply classes here instead of checking static values.
+
+    if (data?.storyNodeText?.every(node => node.StoryNode !== id)) {
+      storyNodes = false
+      textPositionVertical = 10
+      textPositionHorizontal = 8
+      classStyle = 'node-value'
+    }
+
+    return { textPositionHorizontal, textPositionVertical, classStyle, storyNodes }
+  }
+
+  const activeConnection = (id: String) => {
+    const currentNode = sankeyData.nodes.find(node => node.id === id)
+
+    const sourceNodes = []
+    const activeLinks = []
+
+    if (currentNode) {
+      links.forEach(link => {
+        const targetObj: any = link.target
+        const sourceObj: any = link.source
+        if (targetObj.id === id) {
+          sourceNodes.push(sourceObj.id)
+        }
+      })
+
+      sourceNodes.forEach(id => {
+        links.forEach(link => {
+          const targetObj: any = link.target
+          const sourceObj: any = link.source
+          if (targetObj.id === tooltipID && sourceObj.id === id) {
+            activeLinks.push(link)
+          }
+        })
+      })
+    }
+
+    return { sourceNodes, activeLinks }
+  }
+
+  const tooltipVal = `${(data?.tooltips.find(item => item.node === tooltipID) || {}).value}`
+  const tooltipSummary = `${(data?.tooltips.find(item => item.node === tooltipID) || {}).summary}`
+  const tooltipColumn1Label = (data?.tooltips.find(item => item.node === tooltipID) || {}).column1Label
+  const tooltipColumn2Label = (data?.tooltips.find(item => item.node === tooltipID) || {}).column2Label
+  const tooltipColumn1 = (data?.tooltips.find(item => item.node === tooltipID) || {}).column1
+  const tooltipColumn2 = (data?.tooltips.find(item => item.node === tooltipID) || {}).column2
+
+  const ColumnList = ({ columnData }) => {
+    return (
+      <ul>
+        {columnData?.map((entry, index) => (
+          <li key={index}>
+            {entry.label}: {entry.value} ({entry.additional_info}%)
+          </li>
+        ))}
+      </ul>
+    )
+  }
+
+  const tooltipColumn1Data = ReactDOMServer.renderToString(<ColumnList columnData={tooltipColumn1} />)
+  const tooltipColumn2Data = ReactDOMServer.renderToString(<ColumnList columnData={tooltipColumn2} />)
+
+  const sankeyToolTip = `<div class="sankey-chart__tooltip">
+                    <span class="sankey-chart__tooltip--tooltip-header">${tooltipID}</span>
+                    <span class="sankey-chart__tooltip--tooltip-header">${tooltipVal}</span>
+                    <div class="divider"></div>
+                    <span><strong>Summary: </strong>${tooltipSummary}</span>
+                    <div class="divider"></div>
+                      <div class="sankey-chart__tooltip--info-section">
+                        <div>
+                          <span><strong>${tooltipColumn1Label}<strong></span>
+                          ${tooltipColumn1Data}
+                        </div>
+                        <div>
+                          <span><strong>${tooltipColumn2Label}<strong></span>
+                          ${tooltipColumn2Data}
+                        </div>
+                      </div>
+                    </div>`
+
+  // Draw the nodes
+  const allNodes = sankeyData.nodes.map((node, i) => {
+    let { textPositionHorizontal, textPositionVertical, classStyle, storyNodes } = nodeStyle(node.id)
+    let { sourceNodes } = activeConnection(tooltipID)
+
+    let opacityValue = sankeyConfig.opacity.nodeOpacityDefault
+    let nodeColor = sankeyConfig.nodeColor.default
+
+    if (tooltipID !== node.id && tooltipID !== '' && !sourceNodes.includes(node.id)) {
+      nodeColor = sankeyConfig.nodeColor.inactive
+      opacityValue = sankeyConfig.opacity.nodeOpacityInactive
+    }
+
+    return (
+      <Group className='' key={i}>
+        <rect
+          height={node.y1! - node.y0! + 2} // increasing node size to account for smaller nodes
+          width={sankeyGenerator.nodeWidth()}
+          x={node.x0}
+          y={node.y0! - 1} //adjusting here the node starts so it looks more center with the link
+          fill={nodeColor}
+          fillOpacity={opacityValue}
+          rx={sankeyConfig.rxValue}
+          // todo: move enable tooltips to sankey
+          data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+          data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
+          onClick={() => handleNodeClick(node.id)}
+          style={{ pointerEvents: 'visible', cursor: 'pointer' }}
+        />
+        {storyNodes ? (
+          <>
+            <Text
+              /* Text Position Horizontal
+              x0 is the left edge of the node
+              # - positions text # units to the right of the left edge of the node */
+              x={node.x0! + textPositionHorizontal}
+              textAnchor={sankeyData.nodes.length - 1 === i ? 'end' : 'start'}
+              verticalAnchor='end'
+              /*Text Position Vertical
+              y1 and y0 are the top and bottom edges of the node
+              y1+y0 = total height
+              dividing by 2 gives you the midpoint of the node
+              minus 30 raises the vertical position to be higher
+              */
+              y={(node.y1! + node.y0!) / 2 - 30}
+              /* Using x and y in combination with dominant baseline allows for a more
+              precise positioning of the text within the svg
+              dominant baseline allows for different vertical alignments
+              text-before-edge aligns the text's bottom edge with the bottom edge of the container
+              */
+              fill={sankeyConfig.nodeFontColor}
+              fontWeight='bold' // font weight
+              style={{ pointerEvents: 'none' }}
+              className='node-text'
+            >
+              {(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' }}>
+              {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
+            </Text>
+            <Text
+              x={node.x0! + textPositionHorizontal}
+              // plus 50 will move the vertical position down
+              y={(node.y1! + node.y0!) / 2 + 50}
+              fill={sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor={sankeyData.nodes.length === i ? 'end' : 'start'}
+              style={{ pointerEvents: 'none' }}
+              className='node-text'
+              verticalAnchor='end'
+            >
+              {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextAfter}
+            </Text>
+          </>
+        ) : (
+          <>
+            <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>
+            </text>
+            <text
+              x={node.x0! + textPositionHorizontal}
+              /* adding 30 allows the node value to be on the next line underneath the node id */
+              y={(node.y1! + node.y0!) / 2 + 30}
+              dominantBaseline='text-before-edge'
+              fill={sankeyConfig.nodeFontColor}
+              //fontSize={16}
+              fontWeight='bold'
+              textAnchor='start'
+              style={{ pointerEvents: 'none' }}
+            >
+              <tspan className={classStyle}>{sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}</tspan>
+            </text>
+          </>
+        )}
+      </Group>
+    )
+  })
+
+  // Draw the links
+  const allLinks = links.map((link, i) => {
+    const linkGenerator = sankeyLinkHorizontal()
+    const path = linkGenerator(link)
+    let opacityValue = sankeyConfig.opacity.LinkOpacityDefault
+    let strokeColor = sankeyConfig.linkColor.default
+
+    let { activeLinks } = activeConnection(tooltipID)
+
+    if (!activeLinks.includes(link) && tooltipID !== '') {
+      strokeColor = sankeyConfig.linkColor.inactive
+      opacityValue = sankeyConfig.opacity.LinkOpacityInactive
+    }
+
+    return <path key={i} d={path!} stroke={strokeColor} fill='none' strokeOpacity={opacityValue} strokeWidth={link.width! + 2} />
+  })
+
+  // max depth - calculates how many nodes deep the chart goes.
+  const maxDepth: number = sankeyData.nodes.reduce((maxDepth, node) => {
+    return Math.max(maxDepth, node.depth)
+  }, -1)
+
+  // finalNodesAtMaxDepth - get only the right most nodes on the chart.
+  const finalNodesAtMaxDepth = sankeyData.nodes.filter(node => node.depth === maxDepth)
+
+  const finalNodes = finalNodesAtMaxDepth.map((node, i) => {
+    let { textPositionHorizontal, textPositionVertical, classStyle, storyNodes } = nodeStyle(node.id)
+    let { sourceNodes } = activeConnection(tooltipID)
+
+    let opacityValue = sankeyConfig.opacity.nodeOpacityDefault
+    let nodeColor = sankeyConfig.nodeColor.default
+
+    if (tooltipID !== node.id && tooltipID !== '' && !sourceNodes.includes(node.id)) {
+      nodeColor = sankeyConfig.nodeColor.inactive
+      opacityValue = sankeyConfig.opacity.nodeOpacityInactive
+    }
+
+    return (
+      <Group className='' key={i} innerRef={el => (groupRefs.current[i] = el)}>
+        <rect
+          height={node.y1! - node.y0! + 2} // increasing node size to account for smaller nodes
+          width={sankeyGenerator.nodeWidth()}
+          x={node.x0}
+          y={node.y0! - 1} //adjusting here the node starts so it looks more center with the link
+          fill={nodeColor}
+          fillOpacity={opacityValue}
+          rx={sankeyConfig.rxValue}
+          // todo: move enable tooltips to sankey
+          data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+          data-tooltip-id={`tooltip`}
+          onClick={() => handleNodeClick(node.id)}
+          style={{ pointerEvents: 'visible', cursor: 'pointer' }}
+        />
+        {storyNodes ? (
+          <>
+            <Text
+              /* Text Position Horizontal
+              x0 is the left edge of the node
+              # - positions text # units to the right of the left edge of the node */
+              x={node.x0! + textPositionHorizontal}
+              textAnchor={sankeyData.nodes.length - 1 === i ? 'end' : 'start'}
+              verticalAnchor='end'
+              /*Text Position Vertical
+              y1 and y0 are the top and bottom edges of the node
+              y1+y0 = total height
+              dividing by 2 gives you the midpoint of the node
+              minus 30 raises the vertical position to be higher
+              */
+              y={(node.y1! + node.y0!) / 2 - 30}
+              /* Using x and y in combination with dominant baseline allows for a more
+              precise positioning of the text within the svg
+              dominant baseline allows for different vertical alignments
+              text-before-edge aligns the text's bottom edge with the bottom edge of the container
+              */
+              fill={sankeyConfig.nodeFontColor}
+              fontWeight='bold' // font weight
+              style={{ pointerEvents: 'none' }}
+              className='node-text'
+            >
+              {(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' }}>
+              {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
+            </Text>
+            <Text
+              x={node.x0! + textPositionHorizontal}
+              // plus 50 will move the vertical position down
+              y={(node.y1! + node.y0!) / 2 + 50}
+              fill={sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor={sankeyData.nodes.length === i ? 'end' : 'start'}
+              style={{ pointerEvents: 'none' }}
+              className='node-text'
+              verticalAnchor='end'
+            >
+              {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextAfter}
+            </Text>
+          </>
+        ) : (
+          <>
+            <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>
+            </text>
+            <text
+              x={node.x0! + textPositionHorizontal}
+              /* adding 30 allows the node value to be on the next line underneath the node id */
+              y={(node.y1! + node.y0!) / 2 + 30}
+              dominantBaseline='text-before-edge'
+              fill={sankeyConfig.nodeFontColor}
+              //fontSize={16}
+              fontWeight='bold'
+              textAnchor='start'
+              style={{ pointerEvents: 'none' }}
+            >
+              <tspan className={classStyle}>{sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}</tspan>
+            </text>
+          </>
+        )}
+      </Group>
+    )
+  })
+
+  return (
+    <>
+      <div className='sankey-chart'>
+        <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' }}>
+            {finalNodes}
+          </Group>
+        </svg>
+
+        {/* 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={() => clearNodeClick()} 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>
+        )}
+      </div>
+    </>
+  )
+}
+export default Sankey