// Type definitions for d3-org-chart 2.6 // Project: https://github.com/bumbeishvili/org-chart#readme // Definitions by: Adam Jones // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped import { HierarchyNode } from 'd3-hierarchy'; import { Selection } from 'd3-selection'; export as namespace d3; export type NodeId = string | number; export type Connection = any; export interface Point { x: number; y: number; } export interface Action { selector: string; onClick?: (event: Event, node: HierarchyNode, state: State) => void; onHover?: (event: Event, node: HierarchyNode, state: State) => void; } // This corresponds to the attrs in d3-org-chart export interface State { id: string; firstDraw: boolean; svgWidth: number; svgHeight: number; scaleExtent: [number, number]; container: string; defaultTextFill: string; defaultFont: string; ctx: CanvasRenderingContext2D; data: Datum[] | null; duration: number; setActiveNodeCentered: boolean; expandLevel: number; compact: boolean; rootMargin: number; nodeDefaultBackground: string; connections: Connection[]; lastTransform: { x: number; y: number; k: number }; nodeId: (d: Datum) => NodeId; parentNodeId: (d: Datum) => NodeId; backgroundColor: 'none'; zoomBehavior: null; svg: Selection; actions: Action[]; [key: string]: any; } export type Layout = 'left' | 'bottom' | 'right' | 'top'; export interface LayoutBinding { nodeLeftX: (node: HierarchyNode) => number; nodeRightX: (node: HierarchyNode) => number; nodeTopY: (node: HierarchyNode) => number; nodeBottomY: (node: HierarchyNode) => number; nodeJoinX: (node: HierarchyNode) => number; nodeJoinY: (node: HierarchyNode) => number; linkJoinX: (node: HierarchyNode) => number; linkJoinY: (node: HierarchyNode) => number; linkX: (node: HierarchyNode) => number; linkY: (node: HierarchyNode) => number; linkCompactXStart: (node: HierarchyNode) => number; linkCompactYStart: (node: HierarchyNode) => number; compactLinkMidX: (node: HierarchyNode, state: State) => number; compactLinkMidY: (node: HierarchyNode, state: State) => number; linkParentX: (node: HierarchyNode) => number; linkParentY: (node: HierarchyNode) => number; buttonX: (node: HierarchyNode) => number; buttonY: (node: HierarchyNode) => number; centerTransform: (params: { root: number; rootMargin: number; centerY: number; scale: number; centerX: number; chartWidth: number; chartHeight: number; }) => string; // CSS transform compactDimension: { sizeColumn: (node: HierarchyNode) => number; sizeRow: (node: HierarchyNode) => number; reverse(a: T[]): T[]; }; nodeFlexSize: (params: { height: number; width: number; siblingsMargin: number; childrenMargin: number; state: State; node: HierarchyNode; }) => [number, number]; zoomTransform: (params: { centerY: number; scale: number }) => string; // CSS transform diagonal: unknown; swap: (d: Point) => Point; // swaps x and y coordinates nodeUpdateTransform: (params: { width: number; height: number } & Point) => string; } export class OrgChart { constructor(); // Getters and setters, dynamically crreated in the constructor // TODO: improve unknown types id(): string; id(value: string): this; firstDraw(): boolean; firstDraw(value: boolean): this; svgWidth(): number; svgWidth(value: number): this; svgHeight(): number; svgHeight(value: number): this; container(): string; // CSS selector string, for example "#my-chart" container(value: string): this; defaultTextFill(): string; // CSS color, for example "#2C3E50" defaultTextFill(value: string): this; defaultFont(): string; // Font name, for example "Helvetica" defaultFont(value: string): this; actions(actions: Action[]): this; ctx(): CanvasRenderingContext2D; ctx(value: CanvasRenderingContext2D): this; data(): Datum[] | null; data(value: Datum[] | null): this; duration(): number; duration(value: number): this; setActiveNodeCentered(): boolean; setActiveNodeCentered(value: boolean): this; expandLevel(): number; expandLevel(value: number): this; compact(): boolean; compact(value: boolean): this; rootMargin(): number; rootMargin(value: number): this; nodeDefaultBackground(): string; // CSS color, for example "#2C3E50" nodeDefaultBackground(value: string): this; connections(): Connection[]; connections(value: Connection[]): this; lastTransform(): { k: number } & Point; lastTransform(value: { k: number } & Point): this; nodeId(): (node: HierarchyNode | Datum) => NodeId; // Given a node, returns an id for equality comparisons nodeId(value: (node: HierarchyNode | Datum) => NodeId): this; parentNodeId(): (node: HierarchyNode | Datum) => NodeId | undefined; // Given a node, returns it's parent id for equality comparisons parentNodeId(value: (node: HierarchyNode | Datum) => NodeId | undefined): this; backgroundColor(): string; // CSS color, for example "#2C3E50" backgroundColor(value: string): this; zoomBehavior(): unknown; zoomBehavior(value: unknown): this; defs(): unknown; defs(value: unknown): this; connectionsUpdate(): unknown; connectionsUpdate(value: unknown): this; linkUpdate(): (node: HierarchyNode, index: number, nodes: Array>) => void; linkUpdate(value: (node: HierarchyNode, index: number, nodes: Array>) => void): this; nodeEnter(): (node: HierarchyNode, index: number, nodes: Array>) => void; nodeEnter(value: (node: HierarchyNode, index: number, nodes: Array>) => void): this; nodeUpdate(): (node: HierarchyNode, index: number, nodes: Array>) => void; nodeUpdate(value: (node: HierarchyNode, index: number, nodes: Array>) => void): this; nodeWidth(): (node: HierarchyNode) => number; nodeWidth(value: (node: HierarchyNode) => number): this; nodeHeight(): (node: HierarchyNode) => number; nodeHeight(value: (node: HierarchyNode) => number): this; siblingsMargin(): (node: HierarchyNode) => number; siblingsMargin(value: (node: HierarchyNode) => number): this; childrenMargin(): (node: HierarchyNode) => number; childrenMargin(value: (node: HierarchyNode) => number): this; neightbourMargin(): (node1: HierarchyNode, node2: HierarchyNode) => number; // NB: typo to match library neightbourMargin(value: (node1: HierarchyNode, node2: HierarchyNode) => number): this; compactMarginPair(): (node: HierarchyNode) => number; compactMarginPair(value: (node: HierarchyNode) => number): this; compactMarginBetween(): (node: HierarchyNode) => number; compactMarginBetween(value: (node: HierarchyNode) => number): this; onNodeClick(): (event: Event, node: HierarchyNode) => void; onNodeClick(value: (event: Event, node: HierarchyNode) => void): this; linkGroupArc(): unknown; linkGroupArc(value: unknown): this; nodeContent(): ( node: HierarchyNode, index: number, nodes: Array>, state: State, ) => string; // Return type is HTML content nodeContent( value: ( node: HierarchyNode, index: number, nodes: Array>, state: State, ) => string, ): this; layout(): Layout; layout(value: Layout): this; buttonContent(): (params: { node: HierarchyNode; state: State }) => string; // Return type is HTML content buttonContent(value: (params: { node: HierarchyNode; state: State }) => string): this; layoutBindings(): Record>; layoutBindings(value: Record>): this; getChartState(): State; initialZoom(zoomLevel: number): this; initializeEnterExitUpdatePattern(): void; getNodeChildren(args: HierarchyNode, nodeStore: Datum[]): Datum[]; render(): this; addNode(node: Datum): this; removeNode(nodeId: NodeId): this; calculateCompactFlexDimensions(root: unknown): void; calculateCompactFlexPositions(root: unknown): void; update(params: { x0: number; y0: number; width: number; height: number } & Partial): void; isEdge(): boolean; // Whether the current browser is Microsoft Edge hdiagonal(source: Point, target: Point, m: Point): string; diagonal(source: Point, target: Point, m: Point): string; restyleForeignObjectElements(): void; onButtonClick(event: any, node: HierarchyNode): void; setExpansionFlagToChildren(node: HierarchyNode, isExpanded: boolean): void; expandSomeNodes(node: HierarchyNode): void; updateNodesState(): void; setLayouts(params: { expandNodesFirst?: boolean }): void; collapse(node: HierarchyNode): void; expand(node: HierarchyNode): void; zoomed(event: any, node: HierarchyNode): void; zoomTreeBounds(params: { x0: number; x1: number; y0: number; y1: number; params: { animate?: boolean; scale?: boolean }; }): void; fit(params?: { animate?: boolean; nodes?: Iterable>; scale?: boolean }): this; setExpanded(nodeId: NodeId, isExpanded?: boolean): this; setCentered(nodeId: NodeId): this; setHighlighted(nodeId: NodeId): this; setUpToTheRootHighlighted(nodeId: NodeId): this; clearHighlighting(): void; fullscreen(element?: Element): void; zoomIn(): void; zoomOut(): void; toDataUrl(url: string, callback: (result: string | ArrayBuffer) => void): void; exportImg(params?: { full?: boolean; scale?: number; onLoad?: (s: string) => void; save?: boolean }): void; exportSvg(): this; expandAll(): this; collapseAll(): this; downloadImage(params?: { node: SVGElement; scale?: number; isSvg?: boolean; save?: boolean; onAlreadySerialized?: () => void; onLoad?: (s: string) => void; }): void; getTextWidth( text: string, params: { fontSize?: number; fontWeight?: number; defaultFont?: string; ctx: CanvasRenderingContext2D }, ): number; }