@cdc/chart 4.26.7 → 4.26.10

package/src/components/Network/helpers/prepareNetworkData.ts

@@ -0,0 +1,101 @@
+import type { NetworkColumns, NetworkLink, NetworkPreparedData, NetworkRawRow } from '../types'
+import { sanitizePaletteColor } from '@cdc/core/helpers/palettes/colorValidation'
+
+const getLabel = (row: NetworkRawRow, column?: string) => {
+  if (!column) return ''
+  const value = row[column]
+  if (value === null || typeof value === 'undefined') return ''
+  if (!['string', 'number'].includes(typeof value)) return ''
+  return String(value).trim()
+}
+
+const getWeight = (row: NetworkRawRow, column?: string) => {
+  if (!column) return 1
+  const rawValue = row[column]
+  if (typeof rawValue === 'string') {
+    const trimmedValue = rawValue.trim()
+    if (!/^(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(trimmedValue)) return null
+  }
+  const value = typeof rawValue === 'string' ? rawValue.replaceAll(',', '').trim() : rawValue
+  const weight = Number(value)
+  return Number.isFinite(weight) && weight > 0 ? weight : null
+}
+
+const getStyle = (row: NetworkRawRow, column?: string): NetworkLink['style'] => {
+  if (!column) return 'solid'
+  return String(row[column] ?? '')
+    .trim()
+    .toLowerCase() === 'dashed'
+    ? 'dashed'
+    : 'solid'
+}
+
+const getNodeColor = (row: NetworkRawRow, column?: string) => {
+  if (!column) return ''
+  return sanitizePaletteColor(row[column])
+}
+
+export const prepareNetworkData = (
+  data: unknown,
+  columns: NetworkColumns = {},
+  directed = false
+): NetworkPreparedData => {
+  const rawRows = Array.isArray(data) ? data : []
+  const rows = rawRows.filter(row => row && typeof row === 'object' && !Array.isArray(row)) as NetworkRawRow[]
+  const linksByPair = new Map<string, NetworkLink>()
+  const nodeColors = new Map<string, string>()
+  let rejectedRowCount = rawRows.length - rows.length
+
+  rows.forEach(row => {
+    const source = getLabel(row, columns.source)
+    const target = getLabel(row, columns.target)
+    const weight = getWeight(row, columns.weight)
+    const style = getStyle(row, columns.style)
+
+    if (!source || !target || source === target || weight === null) {
+      rejectedRowCount += 1
+      return
+    }
+
+    const [normalizedSource, normalizedTarget] = !directed && source > target ? [target, source] : [source, target]
+    const id = JSON.stringify([normalizedSource, normalizedTarget])
+    const existing = linksByPair.get(id)
+
+    if (existing) {
+      const aggregatedWeight = existing.weight + weight
+      if (!Number.isFinite(aggregatedWeight)) {
+        rejectedRowCount += 1
+        return
+      }
+      existing.weight = aggregatedWeight
+      existing.rowCount += 1
+      if (style === 'dashed') existing.style = 'dashed'
+    } else {
+      linksByPair.set(id, {
+        id,
+        source: normalizedSource,
+        target: normalizedTarget,
+        weight,
+        rowCount: 1,
+        style
+      })
+    }
+
+    const nodeColor = getNodeColor(row, columns.nodeColor)
+    if (nodeColor && !nodeColors.has(source)) nodeColors.set(source, nodeColor)
+  })
+
+  const links = Array.from(linksByPair.values()).sort((a, b) => a.id.localeCompare(b.id))
+  const connectionCounts = new Map<string, number>()
+  links.forEach(link => {
+    connectionCounts.set(link.source, (connectionCounts.get(link.source) || 0) + 1)
+    connectionCounts.set(link.target, (connectionCounts.get(link.target) || 0) + 1)
+  })
+
+  const nodes = Array.from(connectionCounts, ([id, connectionCount]) => {
+    const color = nodeColors.get(id)
+    return color ? { id, connectionCount, color } : { id, connectionCount }
+  }).sort((a, b) => a.id.localeCompare(b.id))
+
+  return { nodes, links, rejectedRowCount, hasWeights: Boolean(columns.weight) }
+}

package/src/components/Network/helpers/resolveNetworkLabels.test.ts

@@ -0,0 +1,112 @@
+import type { NetworkLayoutLink, NetworkLayoutNode } from '../types'
+import { estimateNetworkLabelWidth, resolveNetworkLabels } from './resolveNetworkLabels'
+
+const makeNode = (id: string, x: number, y: number): NetworkLayoutNode => ({
+  id,
+  connectionCount: 1,
+  x,
+  y
+})
+
+const makeLink = (source: NetworkLayoutNode, target: NetworkLayoutNode, strokeWidth = 2): NetworkLayoutLink => ({
+  id: `${source.id}-${target.id}`,
+  source,
+  target,
+  weight: 1,
+  rowCount: 1,
+  style: 'solid',
+  strokeWidth
+})
+
+describe('resolveNetworkLabels', () => {
+  it('moves a label away from a straight connector', () => {
+    const labeled = makeNode('A long label', 40, 40)
+    const target = makeNode('Target', 160, 40)
+
+    const placements = resolveNetworkLabels([labeled, target], [makeLink(labeled, target)], { nodeRadius: 6 })
+
+    expect(placements[0].anchor).toBe('top')
+  })
+
+  it('avoids another node when a conflict-free candidate is available', () => {
+    const labeled = makeNode('Long label', 40, 40)
+    const blocker = makeNode('Blocker', 85, 40)
+
+    const placements = resolveNetworkLabels([labeled, blocker], [], { nodeRadius: 15 })
+
+    expect(placements[0].anchor).toBe('top')
+  })
+
+  it('avoids previously placed label bounds', () => {
+    const first = makeNode('Long first label', 40, 40)
+    const second = makeNode('Long second label', 40, 50)
+
+    const placements = resolveNetworkLabels([first, second], [], { nodeRadius: 2 })
+
+    expect(placements[0].anchor).toBe('right')
+    expect(placements[1].anchor).not.toBe('right')
+  })
+
+  it('uses the lowest-conflict stable priority when every candidate is blocked', () => {
+    const target = makeNode('Target', 100, 100)
+    const blockers = [
+      makeNode('top', 100, 70),
+      makeNode('right', 145, 100),
+      makeNode('bottom', 100, 130),
+      makeNode('left', 55, 100)
+    ]
+    const options = { nodeRadius: 20, labelHeight: 16, labelGap: 0 }
+
+    const first = resolveNetworkLabels([target, ...blockers], [], options)
+    const second = resolveNetworkLabels([target, ...blockers], [], options)
+
+    expect(second).toEqual(first)
+    expect(first[0].anchor).toBe('right')
+  })
+
+  it('accounts for weighted connector stroke width', () => {
+    const labeled = makeNode('Wide line', 50, 83)
+    const source = makeNode('Source', 0, 100)
+    const target = makeNode('Target', 200, 100)
+    const thinPlacement = resolveNetworkLabels([labeled, source, target], [makeLink(source, target, 2)], {
+      nodeRadius: 6
+    })
+    const weightedPlacement = resolveNetworkLabels([labeled, source, target], [makeLink(source, target, 16)], {
+      nodeRadius: 6
+    })
+
+    expect(thinPlacement[0].anchor).toBe('right')
+    expect(weightedPlacement[0].anchor).not.toBe('right')
+  })
+
+  it('uses conservative deterministic estimates for long and Unicode labels', () => {
+    const longLabel = 'Network label '.repeat(40)
+
+    expect(estimateNetworkLabelWidth('MMMM')).toBeGreaterThan(estimateNetworkLabelWidth('iiii'))
+    expect(estimateNetworkLabelWidth('健康')).toBeGreaterThanOrEqual(24)
+    expect(estimateNetworkLabelWidth('🙂')).toBeGreaterThanOrEqual(12)
+    expect(estimateNetworkLabelWidth(longLabel)).toBe(estimateNetworkLabelWidth(longLabel))
+    expect(resolveNetworkLabels([makeNode(longLabel, 20, 20)], [], { nodeRadius: 4 })[0].bounds.width).toBe(
+      estimateNetworkLabelWidth(longLabel)
+    )
+  })
+
+  it('does not mutate nodes, links, or options', () => {
+    const source = makeNode('Source', 20, 20)
+    const target = makeNode('Target', 160, 20)
+    const nodes = [source, target]
+    const links = [makeLink(source, target, 8)]
+    const options = { nodeRadius: 6, labelHeight: 16, labelGap: 5 }
+    const before = structuredClone({ nodes, links, options })
+
+    resolveNetworkLabels(nodes, links, options)
+
+    expect({ nodes, links, options }).toEqual(before)
+  })
+
+  it('reserves the rendered line box for the 16px label font', () => {
+    const [placement] = resolveNetworkLabels([makeNode('Label', 20, 20)], [], { nodeRadius: 4 })
+
+    expect(placement.bounds.height).toBe(18)
+  })
+})

package/src/components/Network/helpers/resolveNetworkLabels.ts

@@ -0,0 +1,206 @@
+import type { NetworkLayoutLink, NetworkLayoutNode } from '../types'
+
+export type NetworkLabelAnchor = 'top' | 'right' | 'bottom' | 'left'
+
+export type NetworkLabelBounds = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type NetworkLabelPlacement = {
+  nodeId: string
+  anchor: NetworkLabelAnchor
+  x: number
+  y: number
+  textAnchor: 'start' | 'middle' | 'end'
+  dominantBaseline: 'hanging'
+  bounds: NetworkLabelBounds
+}
+
+type ResolveOptions = {
+  nodeRadius: number
+  labelHeight?: number
+  labelGap?: number
+}
+
+type Point = { x: number; y: number }
+
+// A 16px SVG font has an approximately 18px rendered line box in supported browsers.
+const LABEL_HEIGHT = 18
+const LABEL_GAP = 5
+const LINK_CLEARANCE = 1
+
+const boundsMayIntersect = (a: NetworkLabelBounds, b: NetworkLabelBounds) =>
+  a.x <= b.x + b.width && a.x + a.width >= b.x && a.y <= b.y + b.height && a.y + a.height >= b.y
+
+const boundsIntersect = (a: NetworkLabelBounds, b: NetworkLabelBounds) =>
+  a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y
+
+const expandBounds = (bounds: NetworkLabelBounds, amount: number): NetworkLabelBounds => ({
+  x: bounds.x - amount,
+  y: bounds.y - amount,
+  width: bounds.width + amount * 2,
+  height: bounds.height + amount * 2
+})
+
+const getSegmentBounds = (start: Point, end: Point, padding: number): NetworkLabelBounds =>
+  expandBounds(
+    {
+      x: Math.min(start.x, end.x),
+      y: Math.min(start.y, end.y),
+      width: Math.abs(end.x - start.x),
+      height: Math.abs(end.y - start.y)
+    },
+    padding
+  )
+
+const pointInBounds = (point: Point, bounds: NetworkLabelBounds) =>
+  point.x >= bounds.x &&
+  point.x <= bounds.x + bounds.width &&
+  point.y >= bounds.y &&
+  point.y <= bounds.y + bounds.height
+
+const segmentIntersectsBounds = (start: Point, end: Point, bounds: NetworkLabelBounds) => {
+  if (!boundsMayIntersect(getSegmentBounds(start, end, 0), bounds)) return false
+  if (pointInBounds(start, bounds) || pointInBounds(end, bounds)) return true
+
+  const dx = end.x - start.x
+  const dy = end.y - start.y
+  const p = [-dx, dx, -dy, dy]
+  const q = [
+    start.x - bounds.x,
+    bounds.x + bounds.width - start.x,
+    start.y - bounds.y,
+    bounds.y + bounds.height - start.y
+  ]
+  let minimum = 0
+  let maximum = 1
+
+  for (let index = 0; index < p.length; index += 1) {
+    if (p[index] === 0) {
+      if (q[index] < 0) return false
+      continue
+    }
+    const ratio = q[index] / p[index]
+    if (p[index] < 0) minimum = Math.max(minimum, ratio)
+    else maximum = Math.min(maximum, ratio)
+    if (minimum > maximum) return false
+  }
+
+  return true
+}
+
+export const estimateNetworkLabelWidth = (label: string) =>
+  Math.max(
+    1,
+    Array.from(label).reduce((width, character) => {
+      if (/\s/.test(character)) return width + 5.5
+      if (/[ilI1.,'|!:;]/.test(character)) return width + 4.75
+      if (/[MW@#%&]/.test(character)) return width + 16
+      return width + (character.codePointAt(0)! > 0x7f ? 16 : 10)
+    }, 0)
+  )
+
+const getCandidates = (
+  node: NetworkLayoutNode,
+  width: number,
+  height: number,
+  nodeRadius: number,
+  gap: number
+): NetworkLabelPlacement[] => {
+  const definitions: Record<
+    NetworkLabelAnchor,
+    Omit<NetworkLabelPlacement, 'nodeId' | 'anchor' | 'dominantBaseline'>
+  > = {
+    right: {
+      x: nodeRadius + gap,
+      y: -height / 2,
+      textAnchor: 'start',
+      bounds: { x: node.x + nodeRadius + gap, y: node.y - height / 2, width, height }
+    },
+    top: {
+      x: 0,
+      y: -nodeRadius - gap - height,
+      textAnchor: 'middle',
+      bounds: { x: node.x - width / 2, y: node.y - nodeRadius - gap - height, width, height }
+    },
+    bottom: {
+      x: 0,
+      y: nodeRadius + gap,
+      textAnchor: 'middle',
+      bounds: { x: node.x - width / 2, y: node.y + nodeRadius + gap, width, height }
+    },
+    left: {
+      x: -nodeRadius - gap,
+      y: -height / 2,
+      textAnchor: 'end',
+      bounds: { x: node.x - nodeRadius - gap - width, y: node.y - height / 2, width, height }
+    }
+  }
+
+  return (['right', 'top', 'bottom', 'left'] as const).map(anchor => ({
+    nodeId: node.id,
+    anchor,
+    dominantBaseline: 'hanging',
+    ...definitions[anchor]
+  }))
+}
+
+export const resolveNetworkLabels = (
+  nodes: NetworkLayoutNode[],
+  links: NetworkLayoutLink[],
+  options: ResolveOptions
+): NetworkLabelPlacement[] => {
+  const nodeRadius = Math.max(2, Number.isFinite(options.nodeRadius) ? options.nodeRadius : 2)
+  const labelHeight = Math.max(1, Number.isFinite(options.labelHeight) ? options.labelHeight! : LABEL_HEIGHT)
+  const labelGap = Math.max(0, Number.isFinite(options.labelGap) ? options.labelGap! : LABEL_GAP)
+  const nodeObstacles = nodes.map(node => ({
+    nodeId: node.id,
+    bounds: {
+      x: node.x - nodeRadius,
+      y: node.y - nodeRadius,
+      width: nodeRadius * 2,
+      height: nodeRadius * 2
+    }
+  }))
+  const linkObstacles = links.map(link => {
+    const padding = Math.max(0, Number.isFinite(link.strokeWidth) ? link.strokeWidth / 2 : 0) + LINK_CLEARANCE
+    return {
+      start: { x: link.source.x, y: link.source.y },
+      end: { x: link.target.x, y: link.target.y },
+      padding,
+      bounds: getSegmentBounds(link.source, link.target, padding)
+    }
+  })
+  const placements: NetworkLabelPlacement[] = []
+
+  nodes.forEach(node => {
+    const candidates = getCandidates(node, estimateNetworkLabelWidth(node.id), labelHeight, nodeRadius, labelGap)
+    let bestCandidate = candidates[0]
+    let bestScore = Infinity
+
+    candidates.forEach((candidate, priority) => {
+      const nodeConflicts = nodeObstacles.filter(
+        obstacle => obstacle.nodeId !== node.id && boundsIntersect(candidate.bounds, obstacle.bounds)
+      ).length
+      const labelConflicts = placements.filter(placement => boundsIntersect(candidate.bounds, placement.bounds)).length
+      const linkConflicts = linkObstacles.filter(
+        link =>
+          boundsMayIntersect(candidate.bounds, link.bounds) &&
+          segmentIntersectsBounds(link.start, link.end, expandBounds(candidate.bounds, link.padding))
+      ).length
+      const score = nodeConflicts * 10000 + labelConflicts * 10000 + linkConflicts * 100 + priority
+
+      if (score < bestScore) {
+        bestCandidate = candidate
+        bestScore = score
+      }
+    })
+
+    placements.push(bestCandidate)
+  })
+
+  return placements
+}

package/src/components/Network/index.tsx

@@ -0,0 +1,3 @@
+import Network from './components/Network'
+
+export default Network

package/src/components/Network/network.css

@@ -0,0 +1,107 @@
+.network-chart__container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.network-chart__plot {
+  flex: 1 1 auto;
+  min-height: 0;
+  position: relative;
+}
+
+.network-chart {
+  cursor: grab;
+  display: block;
+  overflow: hidden;
+  touch-action: none;
+}
+
+.network-chart:active {
+  cursor: grabbing;
+}
+
+.network-chart__controls {
+  align-items: center;
+  bottom: 2em;
+  display: flex;
+  gap: 0.25rem;
+  left: 1em;
+  position: absolute;
+  z-index: 4;
+}
+
+.network-chart__controls .cove-button {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+.network-chart__status {
+  background: rgb(255 255 255 / 90%);
+  color: #666;
+  left: 0;
+  padding: 0.25rem 0.5rem;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+
+.network-chart__link,
+.network-chart__link-group,
+.network-chart__node {
+  outline: none;
+}
+
+.network-chart__link-group:focus-visible,
+.network-chart__node:focus-visible {
+  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #005ea8);
+}
+
+.network-chart__link--dashed {
+  stroke-dasharray: 12 8;
+}
+
+.network-chart__link-key-line {
+  fill: none;
+}
+
+.network-chart__label {
+  font-size: 16px;
+  pointer-events: none;
+}
+
+.network-chart__link-key {
+  align-items: center;
+  display: flex;
+  flex: 0 0 32px;
+  font-size: 12px;
+  gap: 1rem;
+  justify-content: flex-end;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0 0.5rem;
+  white-space: nowrap;
+}
+
+.network-chart__link-key-item {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 0.35rem;
+}
+
+.network-chart__message {
+  color: #666;
+  padding: 2rem;
+  text-align: center;
+}
+
+.network-chart__tooltip {
+  --rt-opacity: 1;
+
+  background: #fff;
+  border: 1px solid #bdbdbd;
+  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
+  color: var(--cool-gray-90, #1b1b1b);
+}

package/src/components/Network/types/index.ts

@@ -0,0 +1,56 @@
+import type { Runtime } from '@cdc/core/types/Runtime'
+
+export type NetworkRawRow = Record<string, unknown>
+
+export type NetworkColumns = {
+  source?: string
+  target?: string
+  weight?: string
+  style?: string
+  nodeColor?: string
+}
+
+export type NetworkNode = {
+  id: string
+  connectionCount: number
+  color?: string
+}
+
+export type NetworkLink = {
+  id: string
+  source: string
+  target: string
+  weight: number
+  rowCount: number
+  style: 'solid' | 'dashed'
+}
+
+export type NetworkPreparedData = {
+  nodes: NetworkNode[]
+  links: NetworkLink[]
+  rejectedRowCount: number
+  hasWeights: boolean
+}
+
+export type NetworkLayoutNode = NetworkNode & {
+  x: number
+  y: number
+}
+
+export type NetworkLayoutLink = Omit<NetworkLink, 'source' | 'target'> & {
+  source: NetworkLayoutNode
+  target: NetworkLayoutNode
+  strokeWidth: number
+}
+
+export type NetworkLayout = {
+  nodes: NetworkLayoutNode[]
+  links: NetworkLayoutLink[]
+}
+
+export type NetworkProps = {
+  data: unknown
+  width: number
+  height: number
+  runtime?: Runtime
+}

package/src/components/PairedBarChart.jsx

@@ -8,6 +8,7 @@ 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'
+import { getSeriesValueLabel } from '@cdc/core/helpers/getSeriesName'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
 const PairedBarChart = ({ width, height, originalWidth, yAxisWidth }) => {
@@ -28,9 +29,8 @@ const PairedBarChart = ({ width, height, originalWidth, yAxisWidth }) => {
   const offset = 1.02 // Offset of the left bar from the Axis
 
   const groupOne = {
-    parentKey: config.dataDescription?.seriesKey,
     dataKey: config.series[0].dataKey,
-    dataKeyLabel: config.runtime.seriesLabels[config.series[0].dataKey] || config.series[0].dataKey,
+    dataKeyLabel: getSeriesValueLabel(config.series[0].dataKey, config),
     color: colorScale(config.runtime.seriesLabels[config.series[0].dataKey]),
     max: Math.max.apply(
       Math,
@@ -40,9 +40,8 @@ const PairedBarChart = ({ width, height, originalWidth, yAxisWidth }) => {
   }
 
   const groupTwo = {
-    parentKey: config.dataDescription?.seriesKey,
     dataKey: config.series[1].dataKey,
-    dataKeyLabel: config.runtime.seriesLabels[config.series[1].dataKey] || config.series[1].dataKey,
+    dataKeyLabel: getSeriesValueLabel(config.series[1].dataKey, config),
     color: colorScale(config.runtime.seriesLabels[config.series[1].dataKey]),
     max: Math.max.apply(
       Math,
@@ -60,21 +59,17 @@ const PairedBarChart = ({ width, height, originalWidth, yAxisWidth }) => {
   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}: ` : ''
-
   const dataTipOne = d => {
     return `<p>
-				${config.dataDescription?.seriesKey}: ${groupOne.dataKeyLabel}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${label}${formatNumber(d[groupOne.dataKey], 'left')}
+				${groupOne.dataKeyLabel}: ${formatNumber(d[groupOne.dataKey], 'left')}
 			</p>`
   }
 
   const dataTipTwo = d => {
     return `<p>
-				${config.dataDescription?.seriesKey}: ${groupTwo.dataKeyLabel}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${label}${formatNumber(d[groupTwo.dataKey], 'left')}
+				${groupTwo.dataKeyLabel}: ${formatNumber(d[groupTwo.dataKey], 'left')}
 			</p>`
   }