@unovis/ts 1.0.0-alpha.4

package/components/sankey/config.d.ts

@@ -0,0 +1,162 @@
+import { ComponentConfigInterface, ComponentConfig } from "../../core/component/config";
+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 {
+    /** 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: 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;
+    /** 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: N, node2: N) => 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: L, link2: L) => number) | null | undefined;
+    /** 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>>;
+    /** 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>>;
+    /** 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 pixel. Default: `12` */
+    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 pixel. Default: `10` */
+    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 declare class SankeyConfig<N extends SankeyInputNode, L extends SankeyInputLink> extends ComponentConfig implements SankeyConfigInterface<N, L> {
+    heightNormalizationCoeff: number;
+    exitTransitionType: SankeyExitTransitionType;
+    enterTransitionType: SankeyEnterTransitionType;
+    id: (d: SankeyInputNode | SankeyInputLink, i: number) => string;
+    highlightSubtreeOnHover: boolean;
+    highlightDuration: number;
+    highlightDelay: number;
+    iterations: number;
+    linkSort: (link2: L, link1: L) => number;
+    nodeSort: any;
+    nodeWidth: number;
+    nodeAlign: SankeyNodeAlign;
+    nodeHorizontalSpacing: number;
+    nodeMinHeight: number;
+    nodeMaxHeight: number;
+    nodePadding: number;
+    nodeColor: (d: SankeyNode<N, L>) => string;
+    nodeFixedValue: (d: N) => number;
+    showSingleNode: boolean;
+    nodeCursor: any;
+    nodeIcon: any;
+    nodeIconColor: any;
+    label: (d: SankeyNode<N, L>) => string;
+    labelPosition: Position;
+    labelVerticalAlign: VerticalAlign;
+    labelBackground: boolean;
+    labelTextSeparator: string[];
+    labelFit: FitMode;
+    labelTrimMode: TrimMode;
+    labelForceWordBreak: boolean;
+    labelFontSize: number;
+    labelCursor: any;
+    labelColor: any;
+    labelMaxWidth: number;
+    labelExpandTrimmedOnHover: boolean;
+    labelVisibility: any;
+    subLabel: any;
+    subLabelFontSize: number;
+    subLabelColor: any;
+    subLabelPlacement: SankeySubLabelPlacement;
+    subLabelToLabelInlineWidthRatio: number;
+    linkValue: (d: L) => number;
+    linkColor: (d: SankeyLink<N, L>) => string;
+    linkCursor: any;
+}

package/components/sankey/config.js

@@ -0,0 +1,65 @@
+import { ComponentConfig } from '../../core/component/config.js';
+import { getNumber } from '../../utils/data.js';
+import { VerticalAlign, FitMode, TrimMode } from '../../types/text.js';
+import { Position } from '../../types/position.js';
+import { SankeyExitTransitionType, SankeyEnterTransitionType, SankeyNodeAlign, SankeySubLabelPlacement } from './types.js';
+
+/* eslint-disable dot-notation */
+class SankeyConfig extends ComponentConfig {
+    constructor() {
+        super(...arguments);
+        // General
+        this.heightNormalizationCoeff = 1 / 16;
+        this.exitTransitionType = SankeyExitTransitionType.Default;
+        this.enterTransitionType = SankeyEnterTransitionType.Default;
+        // eslint-disable-next-line dot-notation
+        this.id = (d, i) => { var _a; return (_a = d['_id']) !== null && _a !== void 0 ? _a : `${i}`; };
+        this.highlightSubtreeOnHover = false;
+        this.highlightDuration = 300;
+        this.highlightDelay = 1000;
+        this.iterations = 32;
+        // Sorting
+        this.linkSort = (link2, link1) => getNumber(link1, this.linkValue) - getNumber(link2, this.linkValue);
+        this.nodeSort = undefined;
+        // Nodes
+        this.nodeWidth = 25;
+        this.nodeAlign = SankeyNodeAlign.Justify;
+        this.nodeHorizontalSpacing = 150;
+        this.nodeMinHeight = 20;
+        this.nodeMaxHeight = 100;
+        this.nodePadding = 2;
+        this.nodeColor = (d) => d['color'];
+        this.nodeFixedValue = (d) => d['fixedValue'];
+        this.showSingleNode = true;
+        this.nodeCursor = undefined;
+        this.nodeIcon = undefined;
+        this.nodeIconColor = undefined;
+        // Labels
+        this.label = (d) => d['label'];
+        this.labelPosition = Position.Auto;
+        this.labelVerticalAlign = VerticalAlign.Middle;
+        this.labelBackground = false;
+        this.labelTextSeparator = [' ', '-'];
+        this.labelFit = FitMode.Trim;
+        this.labelTrimMode = TrimMode.Middle;
+        this.labelForceWordBreak = true;
+        this.labelFontSize = 12;
+        this.labelCursor = undefined;
+        this.labelColor = undefined;
+        this.labelMaxWidth = 70;
+        this.labelExpandTrimmedOnHover = true;
+        this.labelVisibility = undefined;
+        this.subLabel = undefined;
+        this.subLabelFontSize = 10;
+        this.subLabelColor = undefined;
+        this.subLabelPlacement = SankeySubLabelPlacement.Below;
+        this.subLabelToLabelInlineWidthRatio = 0.4;
+        // Links
+        this.linkValue = (d) => d['value'];
+        this.linkColor = (d) => d['color'];
+        this.linkCursor = undefined;
+    }
+}
+
+export { SankeyConfig };
+//# sourceMappingURL=config.js.map

package/components/sankey/config.js.map

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

package/components/sankey/index.d.ts

@@ -0,0 +1,59 @@
+import { ComponentCore } from "../../core/component";
+import { GraphDataModel } from "../../data-models/graph";
+import { ExtendedSizeComponent } from "../../types/component";
+import { Spacing } from "../../types/spacing";
+import { SankeyConfig, SankeyConfigInterface } from './config';
+import * as s from './style';
+import { SankeyInputLink, SankeyInputNode, SankeyLink, SankeyNode } from './types';
+export declare class Sankey<N extends SankeyInputNode, L extends SankeyInputLink> extends ComponentCore<{
+    nodes: N[];
+    links?: L[];
+}> implements ExtendedSizeComponent {
+    static selectors: typeof s;
+    config: SankeyConfig<N, L>;
+    datamodel: GraphDataModel<N, L, SankeyNode<N, L>, SankeyLink<N, L>>;
+    private _extendedWidth;
+    private _extendedHeight;
+    private _extendedHeightIncreased;
+    private _linksGroup;
+    private _nodesGroup;
+    private _backgroundRect;
+    private _sankey;
+    private _highlightTimeoutId;
+    private _highlightActive;
+    events: {
+        [x: string]: {
+            mouseenter: (d: SankeyNode<N, L>, event: MouseEvent) => void;
+            mouseleave: (d: SankeyNode<N, L>, event: MouseEvent) => void;
+        } | {
+            mouseenter: (d: SankeyLink<N, L>, event: MouseEvent) => void;
+            mouseleave: (d: SankeyLink<N, L>, event: MouseEvent) => void;
+        };
+    };
+    constructor(config?: SankeyConfigInterface<N, L>);
+    get bleed(): Spacing;
+    setData(data: {
+        nodes: N[];
+        links?: L[];
+    }): void;
+    setConfig(config: SankeyConfigInterface<N, L>): void;
+    _render(customDuration?: number): void;
+    private _populateLinkAndNodeValues;
+    private _preCalculateComponentSize;
+    private _prepareLayout;
+    getWidth(): number;
+    getHeight(): number;
+    getLayoutWidth(): number;
+    getLayoutHeight(): number;
+    getColumnCenters(): number[];
+    highlightSubtree(node: SankeyNode<N, L>): void;
+    recursiveSetSubtreeState(node: SankeyNode<N, L>, linksKey: 'sourceLinks' | 'targetLinks', nodeKey: 'source' | 'target', key: string, value: any): void;
+    disableHighlight(): void;
+    private _hasLinks;
+    private _onNodeMouseOver;
+    private _onNodeMouseOut;
+    private _onNodeRectMouseOver;
+    private _onNodeRectMouseOut;
+    private _onLinkMouseOver;
+    private _onLinkMouseOut;
+}

package/components/sankey/index.js

@@ -0,0 +1,299 @@
+import { select } from 'd3-selection';
+import { sankey } from 'd3-sankey';
+import { max, extent, sum } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
+import { ComponentCore } from '../../core/component/index.js';
+import { GraphDataModel } from '../../data-models/graph.js';
+import { Sizing } from '../../types/component.js';
+import { Position } from '../../types/position.js';
+import { VerticalAlign } from '../../types/text.js';
+import { isNumber, getNumber, groupBy, getString } from '../../utils/data.js';
+import { SankeyConfig } from './config.js';
+import * as style from './style.js';
+import { background, links, nodes, link, nodeGroup, nodeExit } from './style.js';
+import { SankeyLayout } from './types.js';
+import { removeLinks, createLinks, updateLinks } from './modules/link.js';
+import { removeNodes, createNodes, updateNodes, onNodeMouseOver, onNodeMouseOut } from './modules/node.js';
+import { requiredLabelSpace, getLabelOrientation } from './modules/label.js';
+
+class Sankey extends ComponentCore {
+    constructor(config) {
+        super();
+        this.config = new SankeyConfig();
+        this.datamodel = new GraphDataModel();
+        this._extendedWidth = undefined;
+        this._extendedHeight = undefined;
+        this._extendedHeightIncreased = undefined;
+        this._sankey = sankey();
+        this._highlightTimeoutId = null;
+        this._highlightActive = false;
+        this.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),
+            },
+        };
+        if (config)
+            this.setConfig(config);
+        this._backgroundRect = this.g.append('rect').attr('class', background);
+        this._linksGroup = this.g.append('g').attr('class', links);
+        this._nodesGroup = this.g.append('g').attr('class', nodes);
+    }
+    get bleed() {
+        const { config, datamodel: { nodes, links } } = this;
+        const labelSize = requiredLabelSpace(config.labelMaxWidth, config.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) {
+        super.setData(data);
+        // Pre-calculate component size for Sizing.EXTEND
+        if ((this.sizing !== Sizing.Fit) || !this._hasLinks())
+            this._preCalculateComponentSize();
+    }
+    setConfig(config) {
+        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));
+        this._sankey.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) {
+        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(`.${link}`).call(removeLinks, duration);
+            this._nodesGroup.selectAll(`.${nodeGroup}`).call(removeNodes, config, duration);
+        }
+        // Prepare Layout
+        this._prepareLayout();
+        // Links
+        this._linksGroup.attr('transform', `translate(${bleed.left},${bleed.top})`);
+        const linkSelection = this._linksGroup.selectAll(`.${link}`)
+            .data(links, (d, i) => { var _a; return (_a = config.id(d, i)) !== null && _a !== void 0 ? _a : i; });
+        const linkSelectionEnter = linkSelection.enter().append('g').attr('class', link);
+        linkSelectionEnter.call(createLinks);
+        linkSelection.merge(linkSelectionEnter).call(updateLinks, config, duration);
+        linkSelection.exit().call(removeLinks);
+        // Nodes
+        this._nodesGroup.attr('transform', `translate(${bleed.left},${bleed.top})`);
+        const nodeSelection = this._nodesGroup.selectAll(`.${nodeGroup}`)
+            .data(nodes, (d, i) => { var _a; return (_a = config.id(d, i)) !== null && _a !== void 0 ? _a : i; });
+        const nodeSelectionEnter = nodeSelection.enter().append('g').attr('class', nodeGroup);
+        nodeSelectionEnter.call(createNodes, this.config, this._width, bleed);
+        nodeSelection.merge(nodeSelectionEnter).call(updateNodes, config, this._width, bleed, this._hasLinks(), duration);
+        nodeSelection.exit()
+            .attr('class', nodeExit)
+            .call(removeNodes, config, duration);
+        // Background
+        this._backgroundRect
+            .attr('width', this.getWidth())
+            .attr('height', this.getHeight())
+            .attr('opacity', 0);
+    }
+    _populateLinkAndNodeValues() {
+        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);
+        });
+    }
+    _preCalculateComponentSize() {
+        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 = 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 = (config.nodeWidth + config.nodeHorizontalSpacing) * Object.keys(groupedByColumn).length - config.nodeHorizontalSpacing + bleed.left + bleed.right;
+    }
+    _prepareLayout() {
+        var _a, _b;
+        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([sankeyWidth - bleed.left - bleed.right, sankeyHeight - bleed.top - bleed.bottom]);
+        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 && !((_a = node.sourceLinks) === null || _a === void 0 ? void 0 : _a.length) && !((_b = node.targetLinks) === null || _b === void 0 ? void 0 : _b.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() {
+        return Math.max(this._extendedWidth || 0, this._width);
+    }
+    getHeight() {
+        return Math.max(this._extendedHeightIncreased || 0, this._extendedHeight || 0, this._height);
+    }
+    getLayoutWidth() {
+        return this.sizing === Sizing.Fit ? this._width : this._extendedWidth;
+    }
+    getLayoutHeight() {
+        return this.sizing === Sizing.Fit ? this._height : (this._extendedHeightIncreased || this._extendedHeight);
+    }
+    getColumnCenters() {
+        const { datamodel } = this;
+        const nodes = datamodel.nodes;
+        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) {
+        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, linksKey, nodeKey, key, value) {
+        node._state[key] = value;
+        for (const l of node[linksKey]) {
+            l._state[key] = value;
+            this.recursiveSetSubtreeState(l[nodeKey], linksKey, nodeKey, key, value);
+        }
+    }
+    disableHighlight() {
+        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);
+        }
+    }
+    _hasLinks() {
+        const { datamodel } = this;
+        return datamodel.links.length > 0;
+    }
+    _onNodeMouseOver(d, event) {
+        onNodeMouseOver(d, select(event.currentTarget), this.config, this._width);
+    }
+    _onNodeMouseOut(d, event) {
+        onNodeMouseOut(d, select(event.currentTarget), this.config, this._width);
+    }
+    _onNodeRectMouseOver(d) {
+        const { config } = this;
+        if (config.highlightSubtreeOnHover)
+            this.highlightSubtree(d);
+    }
+    _onNodeRectMouseOut(d) {
+        this.disableHighlight();
+    }
+    _onLinkMouseOver(d, event) {
+        const { config } = this;
+        if (config.highlightSubtreeOnHover)
+            this.highlightSubtree(d.target);
+    }
+    _onLinkMouseOut(d, event) {
+        this.disableHighlight();
+    }
+}
+Sankey.selectors = style;
+
+export { Sankey };
+//# sourceMappingURL=index.js.map