@unovis/ts 1.1.1-beta.5 → 1.1.1-beta.7

package/src/components/sankey/index.ts

@@ -0,0 +1,387 @@
+import { select, Selection } from 'd3-selection'
+import { sankey } from 'd3-sankey'
+import { extent, max, sum } from 'd3-array'
+import { scaleLinear } from 'd3-scale'
+
+// Core
+import { ComponentCore } from 'core/component'
+import { GraphDataModel } from 'data-models/graph'
+
+// Types
+import { ExtendedSizeComponent, Sizing } from 'types/component'
+import { Position } from 'types/position'
+import { Spacing } from 'types/spacing'
+import { VerticalAlign } from 'types/text'
+
+// Utils
+import { smartTransition } from 'utils/d3'
+import { getNumber, getString, groupBy, isNumber } from 'utils/data'
+import { getCSSVariableValueInPixels } from 'utils/misc'
+
+// Config
+import { SankeyConfig, SankeyConfigInterface } from './config'
+
+// Styles
+import * as s from './style'
+
+// Local Types
+import { SankeyInputLink, SankeyInputNode, SankeyLayout, SankeyLink, SankeyNode } from './types'
+
+// Modules
+import { createLinks, removeLinks, updateLinks } from './modules/link'
+import { createNodes, onNodeMouseOut, onNodeMouseOver, removeNodes, updateNodes } from './modules/node'
+import { getLabelOrientation, requiredLabelSpace } from './modules/label'
+
+export class Sankey<
+  N extends SankeyInputNode,
+  L extends SankeyInputLink,
+> extends ComponentCore<
+  {nodes: N[]; links?: L[]},
+  SankeyConfig<N, L>,
+  SankeyConfigInterface<N, L>
+  > implements ExtendedSizeComponent {
+  static selectors = s
+  config: SankeyConfig<N, L> = new SankeyConfig()
+  datamodel: GraphDataModel<N, L, SankeyNode<N, L>, SankeyLink<N, L>> = new GraphDataModel()
+  private _extendedWidth = undefined
+  private _extendedHeight = undefined
+  private _extendedHeightIncreased = undefined
+  private _linksGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
+  private _nodesGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
+  private _backgroundRect: Selection<SVGRectElement, unknown, SVGGElement, unknown>
+  private _sankey = sankey()
+  private _highlightTimeoutId = null
+  private _highlightActive = false
+  events = {
+    [Sankey.selectors.nodeGroup]: {
+      mouseenter: this._onNodeMouseOver.bind(this),
+      mouseleave: this._onNodeMouseOut.bind(this),
+    },
+    [Sankey.selectors.node]: {
+      mouseenter: this._onNodeRectMouseOver.bind(this),
+      mouseleave: this._onNodeRectMouseOut.bind(this),
+    },
+    [Sankey.selectors.link]: {
+      mouseenter: this._onLinkMouseOver.bind(this),
+      mouseleave: this._onLinkMouseOut.bind(this),
+    },
+  }
+
+  constructor (config?: SankeyConfigInterface<N, L>) {
+    super()
+    if (config) this.setConfig(config)
+    this._backgroundRect = this.g.append('rect').attr('class', s.background)
+    this._linksGroup = this.g.append('g').attr('class', s.links)
+    this._nodesGroup = this.g.append('g').attr('class', s.nodes)
+  }
+
+  get bleed (): Spacing {
+    const { config, datamodel: { nodes, links } } = this
+    const labelFontSize = config.labelFontSize ?? getCSSVariableValueInPixels('var(--vis-sankey-label-font-size)', this.element)
+    const labelSize = requiredLabelSpace(config.labelMaxWidth, labelFontSize)
+
+    let left = 0
+    let right = 0
+
+    // We pre-calculate sankey layout to get information about node labels placement and calculate bleed properly
+    // Potentially it can be a performance bottleneck for large layouts, but generally rendering of such layouts is much more computationally heavy
+    if (nodes.length) {
+      const sankeyProbeSize = 1000
+      this._populateLinkAndNodeValues()
+      this._sankey.size([sankeyProbeSize, sankeyProbeSize])
+      this._sankey({ nodes, links })
+      const maxDepth = max(nodes, d => d.depth)
+      const zeroDepthNodes = nodes.filter(d => d.depth === 0)
+      const maxDepthNodes = nodes.filter(d => d.depth === maxDepth)
+
+      left = zeroDepthNodes.some(d => getLabelOrientation(d, sankeyProbeSize, config.labelPosition) === Position.Left) ? labelSize.width : 0
+      right = maxDepthNodes.some(d => getLabelOrientation(d, sankeyProbeSize, config.labelPosition) === Position.Right) ? labelSize.width : 0
+    }
+
+    const top = config.labelVerticalAlign === VerticalAlign.Top ? 0
+      : config.labelVerticalAlign === VerticalAlign.Bottom ? labelSize.height
+        : labelSize.height / 2
+
+    const bottom = config.labelVerticalAlign === VerticalAlign.Top ? labelSize.height
+      : config.labelVerticalAlign === VerticalAlign.Bottom ? 0
+        : labelSize.height / 2
+
+    return { top, bottom, left, right }
+  }
+
+  setData (data: { nodes: N[]; links?: L[] }): void {
+    super.setData(data)
+
+    // Pre-calculate component size for Sizing.EXTEND
+    if ((this.sizing !== Sizing.Fit) || !this._hasLinks()) this._preCalculateComponentSize()
+  }
+
+  setConfig (config: SankeyConfigInterface<N, L>): void {
+    super.setConfig(config)
+
+    // Pre-calculate component size for Sizing.EXTEND
+    if ((this.sizing !== Sizing.Fit) || !this._hasLinks()) this._preCalculateComponentSize()
+
+    // Using "as any" because typings are not full ("@types/d3-sankey": "^0.11.2")
+    const nodeId = ((d, i) => getString(d, this.config.id, i)) as any;
+    (this._sankey as any).linkSort(this.config.linkSort)
+    this._sankey
+      .nodeId(nodeId)
+      .nodeWidth(this.config.nodeWidth)
+      .nodePadding(this.config.nodePadding)
+      .nodeAlign(SankeyLayout[this.config.nodeAlign])
+      .nodeSort(this.config.nodeSort)
+      .iterations(this.config.iterations)
+  }
+
+  _render (customDuration?: number): void {
+    const { config, bleed, datamodel: { nodes, links } } = this
+    const duration = isNumber(customDuration) ? customDuration : config.duration
+
+    if (
+      (nodes.length === 0) ||
+      (nodes.length === 1 && links.length > 0) ||
+      (nodes.length === 1 && !config.showSingleNode) ||
+      (nodes.length > 1 && links.length === 0)
+    ) {
+      this._linksGroup.selectAll<SVGGElement, SankeyLink<N, L>>(`.${s.link}`).call(removeLinks, duration)
+      this._nodesGroup.selectAll<SVGGElement, SankeyNode<N, L>>(`.${s.nodeGroup}`).call(removeNodes, config, duration)
+    }
+
+    // Prepare Layout
+    this._prepareLayout()
+
+    // Links
+    smartTransition(this._linksGroup, duration).attr('transform', `translate(${bleed.left},${bleed.top})`)
+    const linkSelection = this._linksGroup.selectAll<SVGGElement, SankeyLink<N, L>>(`.${s.link}`)
+      .data(links, (d, i) => config.id(d, i) ?? i)
+    const linkSelectionEnter = linkSelection.enter().append('g').attr('class', s.link)
+    linkSelectionEnter.call(createLinks)
+    linkSelection.merge(linkSelectionEnter).call(updateLinks, config, duration)
+    linkSelection.exit<SankeyLink<N, L>>().call(removeLinks)
+
+    // Nodes
+    smartTransition(this._nodesGroup, duration).attr('transform', `translate(${bleed.left},${bleed.top})`)
+
+    const nodeSelection = this._nodesGroup.selectAll<SVGGElement, SankeyNode<N, L>>(`.${s.nodeGroup}`)
+      .data(nodes, (d, i) => config.id(d, i) ?? i)
+    const nodeSelectionEnter = nodeSelection.enter().append('g').attr('class', s.nodeGroup)
+    nodeSelectionEnter.call(createNodes, this.config, this._width, bleed)
+    nodeSelection.merge(nodeSelectionEnter).call(updateNodes, config, this._width, bleed, this._hasLinks(), duration)
+    nodeSelection.exit<SankeyNode<N, L>>()
+      .attr('class', s.nodeExit)
+      .call(removeNodes, config, duration)
+
+    // Background
+    this._backgroundRect
+      .attr('width', this.getWidth())
+      .attr('height', this.getHeight())
+      .attr('opacity', 0)
+  }
+
+  private _populateLinkAndNodeValues (): void {
+    const { config, datamodel } = this
+
+    const nodes = datamodel.nodes
+    const links = datamodel.links
+
+    // For d3-sankey each link must be an object with the `value` property
+    links.forEach((link, i) => {
+      link.value = getNumber(link, d => getNumber(d, config.linkValue, i))
+    })
+
+    // Populating node.fixedValue for d3-sankey
+    nodes.forEach((node, i) => {
+      node.fixedValue = getNumber(node, config.nodeFixedValue, i)
+    })
+  }
+
+  private _preCalculateComponentSize (): void {
+    const { bleed, config, datamodel } = this
+    const nodes = datamodel.nodes
+
+
+    if (nodes.length) {
+      this._populateLinkAndNodeValues()
+      this._sankey(datamodel)
+    }
+
+    const scaleExtent = extent(nodes, d => d.value || undefined)
+    const scaleRange = [config.nodeMinHeight, config.nodeMaxHeight]
+    const scale = scaleLinear().domain(scaleExtent).range(scaleRange).clamp(true)
+    nodes.forEach(n => { n._state.precalculatedHeight = scale(n.value) || config.nodeMinHeight })
+
+    const groupedByColumn: { [key: string]: SankeyNode<N, L>[] } = groupBy(nodes, d => d.layer)
+    const values = Object.values(groupedByColumn)
+      .map((group) =>
+        sum(group.map(n => n._state.precalculatedHeight + config.nodePadding)) - config.nodePadding
+      )
+
+    const height = max(values) || config.nodeMinHeight
+    this._extendedHeight = height + bleed.top + bleed.bottom
+    this._extendedWidth = Math.max(0, (config.nodeWidth + config.nodeHorizontalSpacing) * Object.keys(groupedByColumn).length - config.nodeHorizontalSpacing + bleed.left + bleed.right)
+  }
+
+  private _prepareLayout (): void {
+    const { config, bleed, datamodel } = this
+    const isExtendedSize = this.sizing === Sizing.Extend
+    const sankeyHeight = this.sizing === Sizing.Fit ? this._height : this._extendedHeight
+    const sankeyWidth = this.sizing === Sizing.Fit ? this._width : this._extendedWidth
+    this._sankey
+      .size([
+        Math.max(sankeyWidth - bleed.left - bleed.right, 0),
+        Math.max(sankeyHeight - bleed.top - bleed.bottom, 0),
+      ])
+
+    const nodes = datamodel.nodes
+    const links = datamodel.links
+
+    // If there are no links we manually calculate the visualization layout
+    if (!this._hasLinks()) {
+      let y = 0
+      const nodesTotalHeight = sum(nodes, n => n._state.precalculatedHeight || 1)
+      for (const node of nodes) {
+        const sankeyHeight = this.getHeight() - bleed.top - bleed.bottom
+        const nodeHeight = node._state.precalculatedHeight || 1
+        const h = isExtendedSize ? nodeHeight : (sankeyHeight - config.nodePadding * (nodes.length - 1)) * nodeHeight / nodesTotalHeight
+
+        node.width = Math.max(10, config.nodeWidth)
+        node.x0 = 0
+        node.x1 = node.width
+        node.y0 = y
+        node.y1 = y + Math.max(1, h)
+        node.layer = 0
+
+        y = node.y1 + config.nodePadding
+      }
+
+      this._extendedHeightIncreased = undefined
+      return
+    }
+
+    // Calculate sankey
+    this._populateLinkAndNodeValues()
+    this._sankey({ nodes, links })
+
+    // Setting minimum node height
+    //   Default: 1px
+    //   Extended size nodes that have no links: config.nodeMinHeight
+    for (const node of nodes) {
+      const singleExtendedSize = isExtendedSize && !node.sourceLinks?.length && !node.targetLinks?.length
+      const h = Math.max(singleExtendedSize ? config.nodeMinHeight : 1, node.y1 - node.y0)
+      const y = (node.y0 + node.y1) / 2
+      node.y0 = y - h / 2
+      node.y1 = y + h / 2
+    }
+
+    if (isExtendedSize) {
+      const height = max(nodes, d => d.y1)
+      this._extendedHeightIncreased = height + bleed.top + bleed.bottom
+    }
+  }
+
+  getWidth (): number {
+    return this.sizing === Sizing.Fit ? this._width : (this._extendedWidth || 0)
+  }
+
+  getHeight (): number {
+    return this.sizing === Sizing.Fit ? this._height : Math.max(this._extendedHeightIncreased || 0, this._extendedHeight || 0)
+  }
+
+  getLayoutWidth (): number {
+    return this.sizing === Sizing.Fit ? this._width : this._extendedWidth
+  }
+
+  getLayoutHeight (): number {
+    return this.sizing === Sizing.Fit ? this._height : (this._extendedHeightIncreased || this._extendedHeight)
+  }
+
+  getColumnCenters (): number[] {
+    const { datamodel } = this
+    const nodes = datamodel.nodes as SankeyNode<N, L>[]
+    const centers = nodes.reduce((pos, node) => {
+      const idx = node.layer
+      if (!isFinite(pos[idx])) {
+        pos[idx] = (node.x0 + node.x1) / 2
+      }
+      return pos
+    }, [])
+
+    return centers
+  }
+
+  highlightSubtree (node: SankeyNode<N, L>): void {
+    const { config, datamodel } = this
+
+    clearTimeout(this._highlightTimeoutId)
+    this._highlightTimeoutId = setTimeout(() => {
+      for (const n of datamodel.nodes) n._state.greyout = true
+      for (const l of datamodel.links) l._state.greyout = true
+
+      this.recursiveSetSubtreeState(node, 'sourceLinks', 'target', 'greyout', false)
+      this.recursiveSetSubtreeState(node, 'targetLinks', 'source', 'greyout', false)
+      this._render(config.highlightDuration)
+      this._highlightActive = true
+    }, config.highlightDelay)
+  }
+
+  recursiveSetSubtreeState (
+    node: SankeyNode<N, L>,
+    linksKey: 'sourceLinks' | 'targetLinks',
+    nodeKey: 'source' | 'target',
+    key: string,
+    value: unknown
+  ): void {
+    node._state[key] = value
+
+    for (const l of node[linksKey]) {
+      l._state[key] = value
+      this.recursiveSetSubtreeState(l[nodeKey] as SankeyNode<N, L>, linksKey, nodeKey, key, value)
+    }
+  }
+
+  disableHighlight (): void {
+    const { config, datamodel } = this
+
+    clearTimeout(this._highlightTimeoutId)
+    if (this._highlightActive) {
+      this._highlightActive = false
+
+      for (const n of datamodel.nodes) n._state.greyout = false
+      for (const l of datamodel.links) l._state.greyout = false
+      this._render(config.highlightDuration)
+    }
+  }
+
+  private _hasLinks (): boolean {
+    const { datamodel } = this
+    return datamodel.links.length > 0
+  }
+
+  private _onNodeMouseOver (d: SankeyNode<N, L>, event: MouseEvent): void {
+    onNodeMouseOver(d, select(event.currentTarget as SVGGElement), this.config, this._width)
+  }
+
+  private _onNodeMouseOut (d: SankeyNode<N, L>, event: MouseEvent): void {
+    onNodeMouseOut(d, select(event.currentTarget as SVGGElement), this.config, this._width)
+  }
+
+  private _onNodeRectMouseOver (d: SankeyNode<N, L>): void {
+    const { config } = this
+    if (config.highlightSubtreeOnHover) this.highlightSubtree(d)
+  }
+
+  private _onNodeRectMouseOut (d: SankeyNode<N, L>): void {
+    this.disableHighlight()
+  }
+
+  private _onLinkMouseOver (d: SankeyLink<N, L>, event: MouseEvent): void {
+    const { config } = this
+
+    if (config.highlightSubtreeOnHover) this.highlightSubtree(d.target as SankeyNode<N, L>)
+  }
+
+  private _onLinkMouseOut (d: SankeyLink<N, L>, event: MouseEvent): void {
+    this.disableHighlight()
+  }
+}

package/src/components/sankey/modules/label.ts

@@ -0,0 +1,228 @@
+import { Selection } from 'd3-selection'
+
+// Utils
+import { estimateTextSize, trimSVGText, wrapSVGText } from 'utils/text'
+import { smartTransition } from 'utils/d3'
+import { getString, getValue } from 'utils/data'
+import { getColor } from 'utils/color'
+import { getCSSVariableValueInPixels } from 'utils/misc'
+
+// Types
+import { GenericAccessor } from 'types/accessor'
+import { FitMode, VerticalAlign } from 'types/text'
+import { Position } from 'types/position'
+
+// Local Types
+import { SankeyInputLink, SankeyInputNode, SankeyNode, SankeySubLabelPlacement } from '../types'
+
+// Config
+import { SankeyConfig } from '../config'
+
+// Styles
+import * as s from '../style'
+
+
+const NODE_LABEL_SPACING = 10
+const LABEL_BLOCK_PADDING = 6.5
+
+function getLabelBackground (
+  width: number,
+  height: number,
+  orientation: Position.Left | Position.Right,
+  arrowWidth = 5,
+  arrowHeight = 8
+): string {
+  const halfHeight = height / 2
+  const halfArrowHeight = arrowHeight / 2
+
+  if (orientation === Position.Left) {
+    const rightArrowPos = `L 0 ${halfHeight - halfArrowHeight}   L   ${+arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`
+    return `
+      M 0 0
+      ${rightArrowPos}
+      L 0  ${height}
+      L ${-width} ${height}
+      L ${-width} 0
+      L 0 0 `
+  } else {
+    const leftArrowPos = `L 0 ${halfHeight - halfArrowHeight}   L   ${-arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`
+    return `
+      M 0 0
+      ${leftArrowPos}
+      L 0  ${height}
+      L ${width} ${height}
+      L ${width} 0
+      L 0 0 `
+  }
+}
+
+export function getLabelOrientation<N extends SankeyInputNode, L extends SankeyInputLink> (
+  d: SankeyNode<N, L>,
+  sankeyWidth: number,
+  labelPosition: GenericAccessor<Position.Auto | Position.Left | Position.Right | string, N>
+): (Position.Left | Position.Right) {
+  let orientation = getValue(d, labelPosition)
+  if (orientation === Position.Auto || !orientation) {
+    orientation = d.x0 < sankeyWidth / 2 ? Position.Left : Position.Right
+  }
+
+  return orientation as (Position.Left | Position.Right)
+}
+
+export const requiredLabelSpace = (labelWidth: number, labelFontSize: number): { width: number; height: number } => {
+  return {
+    height: labelFontSize * 2.5 + 2 * LABEL_BLOCK_PADDING, // Assuming 2.5 lines per label
+    width: labelWidth + 2 * NODE_LABEL_SPACING + 2 * LABEL_BLOCK_PADDING,
+  }
+}
+
+export function getLabelGroupXTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (
+  d: SankeyNode<N, L>,
+  config: SankeyConfig<N, L>,
+  width: number
+): number {
+  const orientation = getLabelOrientation(d, width, config.labelPosition)
+  switch (orientation) {
+    case Position.Right: return config.nodeWidth + NODE_LABEL_SPACING
+    case Position.Left:
+    default:
+      return -NODE_LABEL_SPACING
+  }
+}
+
+export function getLabelGroupYTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (
+  d: SankeyNode<N, L>,
+  labelGroupHeight: number,
+  config: SankeyConfig<N, L>
+): number {
+  const nodeHeight = d.y1 - d.y0
+  if (config.labelBackground && (nodeHeight < labelGroupHeight)) return (nodeHeight - labelGroupHeight) / 2
+
+  switch (config.labelVerticalAlign) {
+    case VerticalAlign.Bottom: return nodeHeight - labelGroupHeight
+    case VerticalAlign.Middle: return nodeHeight / 2 - labelGroupHeight / 2
+    case VerticalAlign.Top:
+    default: return 0
+  }
+}
+
+export function getLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (
+  d: SankeyNode<N, L>,
+  config: SankeyConfig<N, L>,
+  width: number
+): string {
+  const orientation = getLabelOrientation(d, width, config.labelPosition)
+  switch (orientation) {
+    case Position.Right: return 'start'
+    case Position.Left:
+    default:
+      return 'end'
+  }
+}
+
+export function getSubLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (
+  d: SankeyNode<N, L>,
+  config: SankeyConfig<N, L>,
+  width: number
+): string {
+  const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline
+  const orientation = getLabelOrientation(d, width, config.labelPosition)
+  switch (orientation) {
+    case Position.Right: return isSublabelInline ? 'end' : 'start'
+    case Position.Left:
+    default:
+      return isSublabelInline ? 'start' : 'end'
+  }
+}
+
+export function renderLabel<N extends SankeyInputNode, L extends SankeyInputLink> (
+  labelGroup: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, any>,
+  d: SankeyNode<N, L>,
+  config: SankeyConfig<N, L>,
+  width: number,
+  duration: number,
+  forceExpand = false
+): { x: number; y: number; width: number; height: number; layer: number; selection: any; hidden?: boolean } {
+  const labelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.label}`)
+  const labelShowBackground = config.labelBackground || forceExpand
+  const sublabelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.sublabel}`)
+  const labelPadding = labelShowBackground ? LABEL_BLOCK_PADDING : 0
+  const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline
+  const separator = config.labelForceWordBreak ? '' : config.labelTextSeparator
+  const fastEstimatesMode = true // Fast but inaccurate
+  const fontWidthToHeightRatio = 0.52
+  const dy = 0.32
+  const labelOrientation = getLabelOrientation(d, width, config.labelPosition)
+  const labelOrientationMult = labelOrientation === Position.Left ? -1 : 1
+  const labelText = getString(d, config.label)
+  const sublabelText = getString(d, config.subLabel)
+  let wasTrimmed = false
+
+  const labelFontSize = config.labelFontSize ?? getCSSVariableValueInPixels('var(--vis-sankey-node-label-font-size)', labelGroup.node())
+  const subLabelFontSize = config.subLabelFontSize ?? getCSSVariableValueInPixels('var(--vis-sankey-node-sublabel-font-size)', labelGroup.node())
+
+  // Render the main label, wrap / trim it and estimate its size
+  const labelsFontSizeDifference = sublabelText ? labelFontSize - subLabelFontSize : 0
+  const labelTranslateY = labelPadding + ((isSublabelInline && labelsFontSizeDifference < 0) ? -0.6 * labelsFontSizeDifference : 0)
+  labelTextSelection
+    .text(labelText)
+    .attr('font-size', labelFontSize)
+    .style('fill', getColor(d, config.labelColor))
+    .attr('transform', `translate(${labelOrientationMult * labelPadding},${labelTranslateY})`)
+    .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))
+
+  const labelMaxWidth = isSublabelInline ? config.labelMaxWidth * (1 - (sublabelText ? config.subLabelToLabelInlineWidthRatio : 0)) : config.labelMaxWidth
+  if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(labelTextSelection, labelMaxWidth, separator)
+  else wasTrimmed = trimSVGText(labelTextSelection, labelMaxWidth, config.labelTrimMode, fastEstimatesMode, labelFontSize, fontWidthToHeightRatio)
+
+  const labelSize = estimateTextSize(labelTextSelection, labelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)
+
+  // Render the sub-label, wrap / trim it and estimate its size
+  const sublabelTranslateX = labelOrientationMult * (labelPadding + (isSublabelInline ? config.labelMaxWidth : 0))
+  const sublabelMarginTop = 0
+  const sublabelTranslateY = labelPadding + (isSublabelInline
+    ? (labelsFontSizeDifference > 0 ? 0.6 * labelsFontSizeDifference : 0)
+    : labelSize.height + sublabelMarginTop)
+  sublabelTextSelection
+    .text(sublabelText)
+    .attr('font-size', subLabelFontSize)
+    .style('fill', getColor(d, config.subLabelColor))
+    .attr('transform', `translate(${sublabelTranslateX},${sublabelTranslateY})`)
+    .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))
+
+  const sublabelMaxWidth = isSublabelInline ? config.labelMaxWidth * config.subLabelToLabelInlineWidthRatio : config.labelMaxWidth
+  if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(sublabelTextSelection, sublabelMaxWidth, separator)
+  else wasTrimmed = wasTrimmed || trimSVGText(sublabelTextSelection, sublabelMaxWidth, config.labelTrimMode, fastEstimatesMode, subLabelFontSize, fontWidthToHeightRatio)
+
+  labelGroup.classed(s.labelTrimmed, wasTrimmed)
+  const sublabelSize = estimateTextSize(sublabelTextSelection, subLabelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)
+
+  // Draw the background if needed
+  const labelGroupHeight = (isSublabelInline ? Math.max(labelSize.height, sublabelSize.height) : (labelSize.height + sublabelSize.height)) + 2 * labelPadding
+  const labelBackground = labelGroup.select(`.${s.labelBackground}`)
+
+  labelBackground
+    .attr('d', labelShowBackground ? getLabelBackground(config.labelMaxWidth + 2 * labelPadding, labelGroupHeight, labelOrientation as (Position.Left | Position.Right)) : null)
+
+  // Position the label
+  const labelTextAnchor = getLabelTextAnchor(d, config, width)
+  const sublabelTextAnchor = getSubLabelTextAnchor(d, config, width)
+  const xTranslate = getLabelGroupXTranslate(d, config, width)
+  const yTranslate = getLabelGroupYTranslate(d, labelGroupHeight, config)
+
+  labelTextSelection.attr('text-anchor', labelTextAnchor)
+  sublabelTextSelection.attr('text-anchor', sublabelTextAnchor)
+
+  const hasTransform = !!labelGroup.attr('transform')
+  smartTransition(labelGroup, hasTransform ? duration : 0)
+    .attr('transform', `translate(${xTranslate},${yTranslate})`)
+
+  return {
+    x: d.x0 + xTranslate,
+    y: d.y0 + yTranslate,
+    width: config.labelMaxWidth,
+    height: labelGroupHeight,
+    layer: d.layer,
+    selection: labelGroup,
+  }
+}