import { AriaAttributes, FunctionComponent, MouseEvent } from 'react'; import { HierarchyNode } from 'd3-hierarchy'; import { Link as LinkShape, DefaultLinkObject } from 'd3-shape'; import { SpringValues } from '@react-spring/web'; import { Box, Dimensions, MotionProps, PropertyAccessor, Margin } from '@nivo/core'; import { PartialTheme, Theme } from '@nivo/theming'; import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'; import { TooltipAnchor, TooltipPosition } from '@nivo/tooltip'; export type TreeMode = 'tree' | 'dendogram'; export type Layout = 'top-to-bottom' | 'right-to-left' | 'bottom-to-top' | 'left-to-right'; export type LayerId = 'links' | 'nodes' | 'labels' | 'mesh'; export type LinkCurve = 'bump' | 'linear' | 'step' | 'step-before' | 'step-after'; export type LabelsPosition = 'outward' | 'inward' | 'layout' | 'layout-opposite'; export interface DefaultDatum { id: string; value?: number; children?: readonly DefaultDatum[]; } export interface HierarchyTreeNode extends HierarchyNode { uid: string | undefined; ancestorIds: readonly string[] | undefined; ancestorUids: readonly string[] | undefined; descendantUids: readonly string[] | undefined; } export interface HierarchyTreeLink { source: HierarchyTreeNode; target: HierarchyTreeNode; } export interface IntermediateComputedNode { path: readonly string[]; uid: string; isRoot: boolean; isLeaf: boolean; ancestorIds: readonly string[]; ancestorUids: readonly string[]; descendantUids: readonly string[]; id: string; data: Datum; depth: number; height: number; x: number; y: number; } export interface ComputedNode extends IntermediateComputedNode { size: number; color: string; isActive: boolean | null; } export type CurrentNodeSetter = (node: ComputedNode | null) => void; export interface IntermediateComputedLink { id: string; source: ComputedNode; target: ComputedNode; } export interface ComputedLink extends IntermediateComputedLink { thickness: number; color: string; isActive: boolean | null; } export type NodeSizeFunction = (node: IntermediateComputedNode) => number; export type NodeSizeModifierFunction = (node: ComputedNode) => number; export type NodeAnimatedProps = { x: number; y: number; size: number; color: string; }; export interface NodeComponentProps { node: ComputedNode; isInteractive: boolean; onMouseEnter?: NodeMouseEventHandler; onMouseMove?: NodeMouseEventHandler; onMouseLeave?: NodeMouseEventHandler; onMouseDown?: NodeMouseEventHandler; onMouseUp?: NodeMouseEventHandler; onClick?: NodeMouseEventHandler; onDoubleClick?: NodeMouseEventHandler; setCurrentNode: CurrentNodeSetter; tooltip?: NodeTooltip; tooltipPosition: TooltipPosition; tooltipAnchor: TooltipAnchor; margin: Margin; animatedProps: SpringValues; } export type NodeComponent = FunctionComponent>; export interface NodeCanvasRendererProps { node: ComputedNode; } export type NodeCanvasRenderer = (ctx: CanvasRenderingContext2D, props: NodeCanvasRendererProps) => void; export interface NodeTooltipProps { node: ComputedNode; } export type NodeTooltip = FunctionComponent>; export type NodeMouseEventHandler = (node: ComputedNode, event: MouseEvent) => void; export type LinkThicknessFunction = (link: IntermediateComputedLink) => number; export type LinkThicknessModifierFunction = (link: ComputedLink) => number; export type LinkAnimatedProps = { sourceX: number; sourceY: number; targetX: number; targetY: number; thickness: number; color: string; }; export type LinkGenerator = LinkShape; export interface LinkComponentProps { link: ComputedLink; linkGenerator: LinkGenerator; isInteractive: boolean; onMouseEnter?: LinkMouseEventHandler; onMouseMove?: LinkMouseEventHandler; onMouseLeave?: LinkMouseEventHandler; onMouseDown?: LinkMouseEventHandler; onMouseUp?: LinkMouseEventHandler; onClick?: LinkMouseEventHandler; onDoubleClick?: LinkMouseEventHandler; tooltip?: LinkTooltip; tooltipAnchor: TooltipAnchor; animatedProps: SpringValues; } export type LinkComponent = FunctionComponent>; export interface LinkCanvasRendererProps { link: ComputedLink; linkGenerator: LinkGenerator; } export type LinkCanvasRenderer = (ctx: CanvasRenderingContext2D, props: LinkCanvasRendererProps) => void; export type LinkMouseEventHandler = (node: ComputedLink, event: MouseEvent) => void; export interface LinkTooltipProps { link: ComputedLink; } export type LinkTooltip = FunctionComponent>; export type LabelTextAnchor = 'start' | 'middle' | 'end'; export type LabelBaseline = 'auto' | 'middle' | 'hanging'; export interface ComputedLabel { id: string; label: string; node: ComputedNode; x: number; y: number; rotation: number; textAnchor: LabelTextAnchor; baseline: LabelBaseline; } export type LabelAnimatedProps = { x: number; y: number; rotation: number; }; export interface LabelComponentProps { label: ComputedLabel; animatedProps: SpringValues; } export type LabelComponent = FunctionComponent>; export interface LabelCanvasRendererProps { label: ComputedLabel; theme: Theme; } export type LabelCanvasRenderer = (ctx: CanvasRenderingContext2D, props: LabelCanvasRendererProps) => void; export interface CustomSvgLayerProps { nodes: readonly ComputedNode[]; nodeByUid: Record>; links: readonly ComputedLink[]; innerWidth: number; innerHeight: number; linkGenerator: LinkGenerator; setCurrentNode: (node: ComputedNode | null) => void; } export type CustomSvgLayer = FunctionComponent>; export type CustomCanvasLayerProps = Omit, 'setCurrentNode'>; export type CustomCanvasLayer = (ctx: CanvasRenderingContext2D, props: CustomCanvasLayerProps) => void; export interface TreeDataProps { data: Datum; } export interface CommonProps extends MotionProps { margin: Box; mode: TreeMode; layout: Layout; identity: PropertyAccessor; theme: PartialTheme; nodeSize: number | NodeSizeFunction; activeNodeSize: number | NodeSizeModifierFunction; inactiveNodeSize: number | NodeSizeModifierFunction; nodeColor: OrdinalColorScaleConfig>; fixNodeColorAtDepth: number; linkCurve: LinkCurve; linkThickness: number | LinkThicknessFunction; activeLinkThickness: number | LinkThicknessModifierFunction; inactiveLinkThickness: number | LinkThicknessModifierFunction; linkColor: InheritedColorConfig>; enableLabel: boolean; label: PropertyAccessor, string>; labelsPosition: LabelsPosition; orientLabel: boolean; labelOffset: number; isInteractive: boolean; useMesh: boolean; meshDetectionRadius: number; debugMesh: boolean; highlightAncestorNodes: boolean; highlightDescendantNodes: boolean; highlightAncestorLinks: boolean; highlightDescendantLinks: boolean; onNodeMouseEnter: NodeMouseEventHandler; onNodeMouseMove: NodeMouseEventHandler; onNodeMouseLeave: NodeMouseEventHandler; onNodeMouseDown: NodeMouseEventHandler; onNodeMouseUp: NodeMouseEventHandler; onNodeClick: NodeMouseEventHandler; onNodeDoubleClick: NodeMouseEventHandler; nodeTooltip: NodeTooltip; nodeTooltipPosition: TooltipPosition; nodeTooltipAnchor: TooltipAnchor; role: string; ariaLabel: AriaAttributes['aria-label']; ariaLabelledBy: AriaAttributes['aria-labelledby']; ariaDescribedBy: AriaAttributes['aria-describedby']; renderWrapper: boolean; } export type TreeSvgProps = TreeDataProps & Dimensions & Partial> & { layers?: (LayerId | CustomSvgLayer)[]; nodeComponent?: NodeComponent; linkComponent?: LinkComponent; labelComponent?: LabelComponent; onLinkMouseEnter?: LinkMouseEventHandler; onLinkMouseMove?: LinkMouseEventHandler; onLinkMouseLeave?: LinkMouseEventHandler; onLinkMouseDown?: LinkMouseEventHandler; onLinkMouseUp?: LinkMouseEventHandler; onLinkClick?: LinkMouseEventHandler; onLinkDoubleClick?: LinkMouseEventHandler; linkTooltip?: LinkTooltip; linkTooltipAnchor?: TooltipAnchor; }; export type TreeCanvasProps = TreeDataProps & Dimensions & Partial> & { layers?: (LayerId | CustomCanvasLayer)[]; renderNode?: NodeCanvasRenderer; renderLink?: LinkCanvasRenderer; renderLabel?: LabelCanvasRenderer; pixelRatio?: number; }; //# sourceMappingURL=types.d.ts.map