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

package/src/components/nested-donut/index.ts

@@ -1,176 +0,0 @@
-import { Selection } from 'd3-selection'
-import { arc } from 'd3-shape'
-import { hierarchy, partition } from 'd3-hierarchy'
-import { scaleLinear, ScaleLinear } from 'd3-scale'
-import { group, max, min, sum } from 'd3-array'
-
-// Core
-import { ComponentCore } from 'core/component'
-import { SeriesDataModel } from 'data-models/series'
-
-// Types
-import { VerticalAlign } from 'types/text'
-
-// Utils
-import { getColor, getHexValue } from 'utils/color'
-import { getString, getValue, isNumber } from 'utils/data'
-import { smartTransition } from 'utils/d3'
-import { wrapSVGText } from 'utils/text'
-
-// Local Types
-import { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment, defaultLayerSettings } from './types'
-
-// Config
-import { NestedDonutConfig, NestedDonutConfigInterface } from './config'
-
-// Modules
-import { createArc, updateArc, removeArc } from './modules/arc'
-import { createLabel, updateLabel, removeLabel } from './modules/label'
-
-// Styles
-import * as s from './style'
-
-export class NestedDonut<Datum> extends ComponentCore<
-Datum[],
-NestedDonutConfig<Datum>,
-NestedDonutConfigInterface<Datum>
-> {
-  static selectors = s
-  static cssVariables = s.variables
-  config: NestedDonutConfig<Datum> = new NestedDonutConfig()
-  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()
-
-  arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>
-  arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>
-  centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>
-
-  arcGen = arc<Partial<NestedDonutSegment<Datum>>>()
-  radiusScale: ScaleLinear<number, number> = scaleLinear()
-  colorScale: ScaleLinear<string, string> = scaleLinear()
-
-  events = { }
-
-  constructor (config?: NestedDonutConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-    this.arcBackground = this.g.append('path')
-    this.arcGroup = this.g.append('g')
-    this.centralLabel = this.g.append('text')
-      .attr('class', s.centralLabel)
-    this.centralSubLabel = this.g.append('text')
-      .attr('class', s.centralSubLabel)
-  }
-
-  private getHierarchyData (): NestedDonutSegment<Datum>[] {
-    const { config, datamodel } = this
-
-    const layerAccessors = config.layers?.map(layerAccessor => (d: Datum, i: number) => getString(d, layerAccessor, i))
-    const nestedData = group(datamodel.data, ...layerAccessors as [(d: Datum) => string])
-    const rootNode = hierarchy(nestedData).count()
-    const partitionData = partition().size([config.angleRange[1], 1])(rootNode) as NestedDonutSegment<Datum>
-
-    partitionData.eachBefore((node, index) => {
-      const scale = this.colorScale.domain([-1, node.children?.length])
-      node._id = this.uid + index
-      node._layer = node.depth - 1
-
-      node.data = { key: node.data[0], root: node.parent?.data.root ?? node.data[0] }
-      node.children?.forEach((child, i) => {
-        child._index = i
-        child._state = {
-          fill:
-            getColor(child, config.color, i, child.depth !== 1) ??
-            scale.range(['#fff', getHexValue(node._state.fill, this.element)])(i),
-        }
-      })
-    })
-    const segments = partitionData.descendants().filter(d => d.parent && d.children && d.data.key)
-    return segments
-  }
-
-  _render (customDuration?: number): void {
-    const { config } = this
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-
-    const layers: NestedDonutLayerSettings[] = config.layers?.map((_, i) => getValue(i, config.layerSettings) ?? defaultLayerSettings)
-    const data = this.getHierarchyData()
-
-    const outerRadius = Math.min(this._width, this._height) / 2
-    const innerRadius = Math.max(0, outerRadius - sum(layers, d => d.width + config.layerPadding))
-
-    const yMin = min(data, d => d.y0)
-    const yMax = max(data, d => d.y1)
-
-    this.radiusScale
-      .domain(config.direction === NestedDonutDirection.OUTWARDS ? [yMin, yMax] : [yMax, yMin])
-      .range([innerRadius, outerRadius])
-
-    this.arcGen
-      .startAngle(d => d.x0)
-      .endAngle(d => d.x1)
-      .innerRadius(d => this.radiusScale(d.y0))
-      .outerRadius(d => this.radiusScale(d.y1))
-      .padAngle(config.padAngle)
-      .cornerRadius(config.cornerRadius)
-
-    this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)
-
-    // Arcs
-    const arcs = this.arcGroup
-      .selectAll<SVGPathElement, NestedDonutSegment<Datum>>(`.${s.segment}`)
-      .data(data, d => d._id)
-
-    const arcsEnter = arcs.enter().append('path')
-      .attr('class', s.segment)
-      .call(createArc, config)
-
-    arcs.merge(arcsEnter)
-      .call(updateArc, config, this.arcGen, duration)
-
-    arcs.exit<NestedDonutSegment<Datum>>()
-      .attr('class', s.segmentExit)
-      .call(removeArc, duration)
-
-    // Segment labels
-    const arcLabels = this.arcGroup
-      .selectAll<SVGTextElement, NestedDonutSegment<Datum>>(`.${s.segmentLabel}`)
-      .data(data, d => d._id)
-
-    const arcLabelsEnter = arcLabels.enter().append('text')
-      .attr('class', s.segmentLabel)
-      .call(createLabel, config)
-
-    arcLabels.merge(arcLabelsEnter)
-      .call(updateLabel, config, this.arcGen, duration)
-
-    arcLabels.exit<NestedDonutSegment<Datum>>()
-      .call(removeLabel, duration)
-
-    // Chart labels
-    this.centralLabel
-      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
-      .attr('dy', config.centralSubLabel ? '-0.55em' : null)
-      .text(config.centralLabel ?? null)
-
-    this.centralSubLabel
-      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
-      .attr('dy', config.centralLabel ? '0.55em' : null)
-      .text(config.centralSubLabel ?? null)
-
-    if (config.centralSubLabelWrap) wrapSVGText(this.centralSubLabel, innerRadius * 1.9, VerticalAlign.Top)
-
-    // Background
-    this.arcBackground.attr('class', s.background)
-      .attr('visibility', config.showBackground ? null : 'hidden')
-      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
-
-    smartTransition(this.arcBackground, duration)
-      .attr('d', arc()({
-        startAngle: config.angleRange?.[0] ?? config.angleRange?.[0] ?? 0,
-        endAngle: config.angleRange?.[1] ?? config.angleRange?.[1] ?? 2 * Math.PI,
-        innerRadius,
-        outerRadius,
-      }))
-  }
-}

package/src/components/nested-donut/modules/arc.ts

@@ -1,78 +0,0 @@
-import { Selection } from 'd3-selection'
-import { Transition } from 'd3-transition'
-import { interpolate } from 'd3-interpolate'
-import { Arc } from 'd3-shape'
-
-// Utils
-import { getColor } from 'utils/color'
-import { smartTransition } from 'utils/d3'
-
-// Local Types
-import { NestedDonutSegment } from '../types'
-
-// Config
-import { NestedDonutConfig } from '../config'
-
-type AnimState = { x0: number; x1: number; y0: number; y1: number }
-export interface ArcNode extends SVGElement {
-  _animState?: AnimState;
-}
-
-export function createArc<Datum> (
-  selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
-  config: NestedDonutConfig<Datum>
-): void {
-  selection
-    .style('fill', d => getColor(d, config.color) ?? d._state.fill)
-    .style('opacity', 0)
-    .each((d, i, els) => {
-      const arcNode: ArcNode = els[i]
-      const angleCenter = (d.x0 + d.x1) / 2
-      const angleHalfWidth = (d.x1 - d.x0) / 2
-      arcNode._animState = {
-        x0: angleCenter - angleHalfWidth,
-        x1: angleCenter + angleHalfWidth,
-        y0: d.y0,
-        y1: d.y1,
-      }
-    })
-}
-
-export function updateArc<Datum> (
-  selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
-  config: NestedDonutConfig<Datum>,
-  arcGen: Arc<any, AnimState>,
-  duration: number
-): void {
-  selection
-    .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
-    .style('fill', d => getColor(d, config.color) ?? d._state.fill)
-
-  if (duration) {
-    const transition = smartTransition(selection, duration)
-      .style('opacity', 1) as Transition<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, ArcNode>
-
-    transition.attrTween('d', (d, i, els) => {
-      const arcNode: ArcNode = els[i]
-      const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }
-      const datum = interpolate(arcNode._animState, nextAnimState)
-
-      return (t: number): string => {
-        arcNode._animState = datum(t)
-        return arcGen(arcNode._animState)
-      }
-    })
-  } else {
-    selection.attr('d', arcGen)
-      .style('opacity', 1)
-  }
-}
-
-export function removeArc<Datum> (
-  selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .style('opacity', 0)
-    .remove()
-}

package/src/components/nested-donut/modules/label.ts

@@ -1,63 +0,0 @@
-import { Selection } from 'd3-selection'
-import { color } from 'd3-color'
-import { Arc } from 'd3-shape'
-
-// Utils
-import { getColor, hexToBrightness } from 'utils/color'
-import { smartTransition } from 'utils/d3'
-import { getString } from 'utils/data'
-
-// Config
-import { NestedDonutConfig } from '../config'
-
-// Local Types
-import { NestedDonutSegment } from '../types'
-
-// Styles
-import { labelColors } from '../style'
-
-function getLabelFillColor<Datum> (
-  d: NestedDonutSegment<Datum>,
-  config: NestedDonutConfig<Datum>
-): string {
-  const c = getColor(d, config.color, d._index, true)
-  const colorParsed = color(c)
-  const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0
-  return brightness > 0.65 ? labelColors.dark : labelColors.light
-}
-
-export function createLabel<Datum> (
-  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
-  config: NestedDonutConfig<Datum>
-): void {
-  selection
-    .text(d => getString(d, config.label) ?? d.data.key)
-    .style('opacity', 0)
-}
-
-export function updateLabel<Datum> (
-  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
-  config: NestedDonutConfig<Datum>,
-  arcGen: Arc<unknown, NestedDonutSegment<Datum>>,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .style('opacity', 1)
-
-  selection
-    .text(d => getString(d, config.label) ?? d.data.key)
-    .attr('x', d => arcGen.centroid(d)[0])
-    .attr('y', d => arcGen.centroid(d)[1])
-    .style('fill', d => getLabelFillColor(d, config))
-}
-
-export function removeLabel<Datum> (
-  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .style('opacity', 0)
-    .remove()
-}
-
-

package/src/components/nested-donut/style.ts

@@ -1,82 +0,0 @@
-import { css } from '@emotion/css'
-
-// Utils
-import { getCssVarNames, injectGlobalCssVariables } from 'utils/style'
-
-export const labelColors = {
-  dark: '#5b5f6d',
-  light: '#fff',
-}
-
-const cssVarDefaults = {
-  '--vis-nested-donut-background-color': '#E7E9F3',
-  // Undefined by default to allow proper fallback to var(--vis-font-family)
-  '--vis-nested-donut-font-family': undefined,
-
-  // Central label
-  '--vis-nested-donut-central-label-font-size': '16px',
-  '--vis-nested-donut-central-label-font-weight': 600,
-  '--vis-nested-donut-central-label-text-color': labelColors.dark,
-
-  // Central sub-label
-  '--vis-nested-donut-central-sublabel-font-size': '12px;',
-  '--vis-nested-donut-central-sublabel-font-weight': 500,
-  '--vis-nested-donut-central-sublabel-text-color': labelColors.dark,
-
-  // Segments
-  '--vis-nested-donut-segment-stroke-width': '1px',
-  '--vis-nested-donut-segment-stroke-color': '',
-
-  /* Dark theme */
-  '--vis-dark-nested-donut-background-color': '#18160C',
-  '--vis-dark-nested-donut-central-label-text-color': labelColors.light,
-  '--vis-dark-nested-donut-central-sublabel-text-color': labelColors.light,
-}
-
-export const root = css`
-  label: nested-donut-component;
-`
-
-export const variables = getCssVarNames(cssVarDefaults)
-injectGlobalCssVariables(cssVarDefaults, root)
-
-export const background = css`
-  label: background;
-  fill: var(--vis-donut-background-color);
-`
-
-export const segment = css`
-  label: segment;
-  stroke-width: var(--vis-nested-donut-segment-stroke-width);
-  stroke: var(--vis-nested-donut-segment-stroke-color, var(--vis-donut-background-color));
-`
-
-export const segmentLabel = css`
-  label: segment-label;
-  text-anchor: middle;
-  dominant-baseline: middle;
-`
-
-export const segmentExit = css`
-  label: segment-exit;
-`
-
-export const centralLabel = css`
-  label: central-label;
-  text-anchor: middle;
-  dominant-baseline: middle;
-  font-size: var(--vis-nested-donut-central-label-font-size);
-  font-family: var(--vis-nested-donut-central-label-font-family, var(--vis-font-family));
-  font-weight: var(--vis-nested-donut-central-label-font-weight);
-  fill: var(--vis-nested-donut-central-label-text-color);
-`
-
-export const centralSubLabel = css`
-  label: central-sub-label;
-  text-anchor: middle;
-  dominant-baseline: middle;
-  font-size: var(--vis-nested-donut-central-sublabel-font-size);
-  font-family: var(--vis-nested-donut-central-sublabel-font-family, var(--vis-font-family));
-  font-weight: var(--vis-nested-donut-central-sublabel-font-weight);
-  fill: var(--vis-nested-donut-central-sublabel-text-color);
-`

package/src/components/nested-donut/types.ts

@@ -1,29 +0,0 @@
-import { HierarchyRectangularNode } from 'd3-hierarchy'
-
-export type NestedDonutSegmentDatum<Datum> = {
-  key: string;
-  root?: string;
-  values?: (Datum | NestedDonutSegmentDatum<Datum>)[];
-}
-
-export type NestedDonutSegment<Datum> = HierarchyRectangularNode<NestedDonutSegmentDatum<Datum>> & {
-  _id: string;
-  _layer: number;
-  _index?: number;
-  _state?: {
-    fill?: string;
-  };
-}
-
-export enum NestedDonutDirection {
-  INWARDS = 'inwards',
-  OUTWARDS = 'outwards',
-}
-
-export type NestedDonutLayerSettings = {
-  width?: number;
-}
-
-export const defaultLayerSettings = {
-  width: 50,
-}

package/src/components/sankey/config.ts

@@ -1,195 +0,0 @@
-/* eslint-disable dot-notation */
-
-// Config
-import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
-
-// Utils
-import { getNumber } from 'utils/data'
-
-// Types
-import { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'
-import { TrimMode, VerticalAlign, FitMode } from 'types/text'
-import { Position } from 'types/position'
-import {
-  SankeyInputLink,
-  SankeyInputNode,
-  SankeyNodeAlign,
-  SankeySubLabelPlacement,
-  SankeyExitTransitionType,
-  SankeyEnterTransitionType,
-  SankeyLink,
-  SankeyNode,
-} from './types'
-
-export interface SankeyConfigInterface<N extends SankeyInputNode, L extends SankeyInputLink> extends ComponentConfigInterface {
-  // General
-  /** Node / Link id accessor function. Used for mapping of data updates to corresponding SVG objects. Default: `(d, i) => d.id ?? i.toString()` */
-  id?: (d: SankeyInputNode | SankeyInputLink, i: number, ...any) => string;
-  /** Coefficient to scale the height of the diagram when the amount of links is low: `C * links.length`, clamped to `[height / 2, height]`. Default: `1/16` */
-  heightNormalizationCoeff?: number;
-  /** Type of animation on removing nodes. Default: `ExitTransitionType.Default` */
-  exitTransitionType?: SankeyExitTransitionType;
-  /** Type of animation on creating nodes. Default: `EnterTransitionType.Default` */
-  enterTransitionType?: SankeyEnterTransitionType;
-  /** Highlight the corresponding subtree on node / link hover. Default: `false` */
-  highlightSubtreeOnHover?: boolean;
-  /** Highlight animation duration, ms. Default: `400` */
-  highlightDuration?: number;
-  /** Highlight delay, ms. Default: `1000` */
-  highlightDelay?: number;
-  /** Sankey algorithm iterations. Default: `32` */
-  iterations?: number;
-
-  // Sorting
-  /** Sankey node sorting function. Default: `undefined`.
-   *  Node sorting is applied to nodes in one layer (column). Layer by layer.
-   *  Options: `undefined` - the order is determined by the layout;
-   *           `null` - the order is fixed by the input;
-   *           sort function - the order is determined by the function.
-  */
-  nodeSort?: ((node1: SankeyNode<N, L>, node2: SankeyNode<N, L>) => number) | null | undefined;
-  /** Sankey link sorting function. Default: `(link2, link1) => link1.value - link2.value`.
-   *  Link sorting is applied to the source (exiting) links within one node.
-   *  Options: `undefined` - the order is determined by the layout;
-   *           `null` - the order is fixed by the input;
-   *           sort function - the order is determined by the function.
-  */
-  linkSort?: ((link1: SankeyLink<N, L>, link2: SankeyLink<N, L>) => number) | null | undefined;
-
-  // Nodes
-  /** Sankey node width in pixels */
-  nodeWidth?: number;
-  /** Sankey node alignment method */
-  nodeAlign?: SankeyNodeAlign;
-  /** Horizontal space between the nodes. Extended Sizing property only. Default: `150` */
-  nodeHorizontalSpacing?: number;
-  /** Minimum node height. Extended Sizing property only. Default: `20` */
-  nodeMinHeight?: number;
-  /** Maximum node height. Extended Sizing property only. Default: `100` */
-  nodeMaxHeight?: number;
-  /** Sankey vertical separation between nodes in pixels. Default: `2` */
-  nodePadding?: number;
-  /** Display the graph when data has just one element */
-  showSingleNode?: boolean;
-  /** Node cursor on hover. Default: `undefined` */
-  nodeCursor?: StringAccessor<SankeyNode<N, L>>;
-  /** Node icon accessor function or value. Default: `undefined` */
-  nodeIcon?: StringAccessor<SankeyNode<N, L>>;
-  /** Node color accessor function or value. Default: `undefined` */
-  nodeColor?: ColorAccessor<SankeyNode<N, L>>;
-  /** Node `fixedValue` accessor function or constant. It defines the node value that will be used to calculate
-   * the height of the nodes by d3-sankey (by default the height will be based on aggregated `linkValue`).
-   * Default: `n => n.fixedValue`
-  */
-  nodeFixedValue?: NumericAccessor<N>;
-  /** Icon color accessor function or value. Default: `undefined` */
-  nodeIconColor?: ColorAccessor<SankeyNode<N, L>>;
-
-  // Links
-  /** Link color accessor function or value. Default: `l => l.color` */
-  linkColor?: StringAccessor<SankeyLink<N, L>>;
-  /** Link flow accessor function or value. Default: `l => l.value` */
-  linkValue?: NumericAccessor<L>;
-  /** Link cursor on hover. Default: `undefined` */
-  linkCursor?: StringAccessor<SankeyLink<N, L>>;
-
-  // Labels
-  /** Node label accessor function or value. Default: `n => n.label` */
-  label?: StringAccessor<SankeyNode<N, L>>;
-  /** Node sub-label accessor function or value. Default: `undefined` */
-  subLabel?: StringAccessor<SankeyNode<N, L>>;
-  /** Label position relative to the Node. Default: `Position.AUTO` */
-  labelPosition?: GenericAccessor<Position.Auto | Position.Left | Position.Right | string, SankeyNode<N, L>>;
-  /** Label vertical alignment */
-  labelVerticalAlign?: VerticalAlign | string;
-  /** Label background */
-  labelBackground?: boolean;
-  /** Label fit mode (wrap or trim). Default: `FitMode.TRIM` **/
-  labelFit?: FitMode;
-  /** Maximum label with in pixels. Default: `70` */
-  labelMaxWidth?: number;
-  /** Expand trimmed label on hover. Default: `true` */
-  labelExpandTrimmedOnHover?: boolean;
-  /** Label trimming mode. Default: `TrimMode.Middle` */
-  labelTrimMode?: TrimMode;
-  /** Label font size in pixels. If not provided, the value of CSS variable `--vis-sankey-node-label-font-size` will be used. Default: `undefined` */
-  labelFontSize?: number;
-  /** Label text separators for wrapping. Default: `[' ', '-']` */
-  labelTextSeparator?: string[];
-  /** Force break words to fit long labels. Default: `true` */
-  labelForceWordBreak?: boolean;
-  /** Label color. Default: `undefined` */
-  labelColor?: ColorAccessor<SankeyNode<N, L>>;
-  /** Label cursor on hover. Default: `undefined` */
-  labelCursor?: StringAccessor<SankeyNode<N, L>>;
-  /** Custom function to set the label visibility. Default: `undefined` */
-  labelVisibility?: ((d: SankeyNode<N, L>, bbox: { x: number; y: number; width: number; height: number }, hovered: boolean) => boolean) | undefined;
-  /** Sub-label font size in pixels. If not provided, the value of CSS variable `--vis-sankey-node-sublabel-font-size` will be used. Default: `undefined` */
-  subLabelFontSize?: number;
-  /** Sub-label color. Default: `undefined` */
-  subLabelColor?: ColorAccessor<SankeyNode<N, L>>;
-  /** Sub-label position. Default: `SankeySubLabelPlacement.Below` */
-  subLabelPlacement?: SankeySubLabelPlacement | string;
-  /**
-   * Sub-label to label width ratio when `subLabelPlacement` is set to `SankeySubLabelPlacement.Inline`
-   * Default: `0.4`, which means that 40% of `labelMaxWidth` will be given to sub-label, and 60% to the main label.
-  */
-  subLabelToLabelInlineWidthRatio?: number;
-}
-
-export class SankeyConfig<N extends SankeyInputNode, L extends SankeyInputLink> extends ComponentConfig implements SankeyConfigInterface<N, L> {
-  // General
-  heightNormalizationCoeff = 1 / 16
-  exitTransitionType = SankeyExitTransitionType.Default
-  enterTransitionType = SankeyEnterTransitionType.Default
-  // eslint-disable-next-line dot-notation
-  id = (d: SankeyInputNode | SankeyInputLink, i: number): string => d['_id'] ?? `${i}`
-  highlightSubtreeOnHover = false
-  highlightDuration = 300
-  highlightDelay = 1000
-  iterations = 32
-
-  // Sorting
-  linkSort = (link2: L, link1: L): number => getNumber(link1, this.linkValue) - getNumber(link2, this.linkValue)
-  nodeSort = undefined
-
-  // Nodes
-  nodeWidth = 25
-  nodeAlign = SankeyNodeAlign.Justify
-  nodeHorizontalSpacing = 150
-  nodeMinHeight = 20
-  nodeMaxHeight = 100
-  nodePadding = 2
-  nodeColor = (d: SankeyNode<N, L>): string => d['color']
-  nodeFixedValue = (d: N): number => d['fixedValue']
-  showSingleNode = true
-  nodeCursor = undefined
-  nodeIcon = undefined
-  nodeIconColor = undefined
-
-  // Labels
-  label = (d: SankeyNode<N, L>): string => d['label']
-  labelPosition = Position.Auto
-  labelVerticalAlign = VerticalAlign.Middle
-  labelBackground = false
-  labelTextSeparator = [' ', '-']
-  labelFit = FitMode.Trim
-  labelTrimMode = TrimMode.Middle
-  labelForceWordBreak = true
-  labelFontSize = undefined
-  labelCursor = undefined
-  labelColor = undefined
-  labelMaxWidth = 70
-  labelExpandTrimmedOnHover = true
-  labelVisibility = undefined
-  subLabel = undefined
-  subLabelFontSize = undefined
-  subLabelColor = undefined
-  subLabelPlacement = SankeySubLabelPlacement.Below
-  subLabelToLabelInlineWidthRatio = 0.4
-
-  // Links
-  linkValue = (d: L): number => d['value']
-  linkColor = (d: SankeyLink<N, L>): string => d['color']
-  linkCursor = undefined
-}