@ux-aspects/ux-aspects

import { AfterViewInit, ElementRef, OnChanges, TemplateRef } from '@angular/core'; import { ResizeDimensions } from '../../directives/resize/index'; import { ThemeColor } from '../../services/color/index'; import { SankeyLink, SankeyLinkInteraction, SankeyLinkPlot } from './interfaces/link.interface'; import { SankeyNodeLink } from './interfaces/node-link.interface'; import { SankeyNode } from './interfaces/node.interface'; import * as i0 from "@angular/core"; export declare class SankeyChartComponent<T> implements OnChanges, AfterViewInit { private readonly _focusManager; private readonly _changeDetector; private readonly _colorService; /** Define the nodes to display */ nodes: ReadonlyArray<SankeyNode<T>>; /** Define the links to display */ links: ReadonlyArray<SankeyLink>; /** Define the headers of each column */ columns: string[]; /** Define the minimum width of a node */ minWidth: number; /** Define the maximum width of a node */ maxWidth: number; /** The minimum height of a node. */ minHeight: number; /** Define the function to get the contents of a link tooltip */ linkTooltip: (link: SankeyLink) => string; /** Define the function to get the contents of a falloff tooltip */ falloffTooltip: (falloff: number) => string; /** Define the active color of a node */ color: string | ThemeColor; /** Define the template of sankey chart nodes */ nodeTemplate: TemplateRef<SankeyNodeContext<T>>; /** Access the SVG element which will contain the links */ linkContainer: ElementRef; /** Access the element which will contain the nodes */ nodeContainer: ElementRef; /** Store the width of the chart area */ _width: number; /** Store the height of the chart area */ _height: number; /** Define the nodes that should be rendered */ _nodes: ReadonlyArray<SankeyNodeLink<T>>; /** Define the columns to display */ _columns: ReadonlyArray<SankeyColumn>; /** Determine if the tooltip should be visible or not */ _isTooltipOpen: boolean; /** Define the position of the tooltip */ _tooltipPosition: SankeyTooltipPosition; /** Define the content to display in the tooltip */ _tooltipContent: string; /** Determine if the component is initialised */ private _isInitialised; /** Store the instance of the sankey layout */ private readonly _sankey; ngAfterViewInit(): void; /** * Detect any changes from Inputs. We can skip * the first function call as this happens before * the initial render so it has no effect. */ ngOnChanges(): void; /** Re-render the chart */ _render(): void; /** Update the layout whenever the dimensions change changes */ _onResize(dimensions: ResizeDimensions): void; /** * Column count should be based on the data, not the titles * as they may not specify titles but the nodes will still be * rendered. */ _getColumnCount(): number; /** * Get the SVG path that defines the shape of the link */ _getPath(link: SankeyLink): string; /** * Set the active state of a node and the inputs and outputs * associated with this node. */ _setNodeActive(nodeLink: SankeyNodeLink<T>, active: boolean): void; /** * Set the focused state of a node and the inputs and outputs * associated with this node. */ _setNodeFocus(nodeLink: SankeyNodeLink<T>, focused: boolean, element: HTMLDivElement): void; /** * Set the active state of a link and the source and target * nodes associated with the link */ _setLinkActive(link: SankeyLink & SankeyLinkPlot & SankeyLinkInteraction, active: boolean): void; /** * This is required because we want to toggle a class based on the `active` * property on a link, however toggling classes using `NgClass` or the class * binding syntax `[class.xyz]` does not work in IE when applied to an SVG * element. (https://github.com/angular/angular/issues/6327) * * The alternatice is to bind directly to the `class` attribute and return a * string that will toggle the class based on the `active` property. */ _getLinkClass(link: SankeyLink & SankeyLinkPlot & SankeyLinkInteraction): string; /** * Get the SVG path that defines the shape of the falloff indicator */ _getFalloffPath(node: SankeyNodeLink<T>): string; /** * Falloff represents the amount of data that does not get passed on, * for example, if a node gets 1,000,000 items from inputs and only outputs * 500,000 then there is falloff of 500,000. However, items in the last column * never pass on any information, so tecnhically 100% of their input is falloff * so we shouldn't show it in the last column. */ _showFalloff(nodeLink: SankeyNodeLink<T>): boolean; /** Update the visibility and content of the tooltip on falloff hover */ _setFalloffTooltip(nodeLink: SankeyNodeLink<T>, isVisible: boolean): void; /** * Update the position of the tooltip */ _setTooltipPosition(event: MouseEvent): void; /** * Correctly track the node changes in `*ngFor` based on * the unique node ids to prevent unnecessary re-rendering */ _trackNodeBy(_index: number, nodeLink: SankeyNodeLink<T>): string | number; /** * Correctly track the link changes in `*ngFor` based on * the source and target to prevent unnecessary re-rendering */ _trackLinkBy(_index: number, link: SankeyLink): string; /** * Get the color of node based on whether or not * the `color` input has been provided. */ _getColor(item: SankeyNodeLink<T> | (SankeyLink & SankeyLinkInteraction)): string; /** * We want the focus indicator color to match the active color, * which if programmatically defined need to be overriden */ _getFocusIndicator(nodeLink: SankeyNodeLink<T>): string; /** * Get columns mapped with their title if they have any */ private getColumns; /** * Get the start position of a column which can be determined * by finding a node that is in that column and using its * x position as all nodes start at the same position within a column. */ private getColumnPosition; /** * Get the default content of a link tooltip */ private getLinkTooltip; /** * Get the default content of a falloff tooltip */ private getFalloffTooltip; static ɵfac: i0.ɵɵFactoryDeclaration<SankeyChartComponent<any>, never>; static ɵcmp: i0.ɵɵComponentDeclaration<SankeyChartComponent<any>, "ux-sankey-chart", never, { "nodes": { "alias": "nodes"; "required": false; }; "links": { "alias": "links"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "linkTooltip": { "alias": "linkTooltip"; "required": false; }; "falloffTooltip": { "alias": "falloffTooltip"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, ["nodeTemplate"], never, false, never>; } export interface SankeyColumn { width: number; title: string; position: number; } export interface SankeyTooltipPosition { x: number; y: number; } export interface SankeyNodeContext<T> { node: SankeyNode<T>; active: boolean; focus: boolean; }