@kit-data-manager/visualization-component
Version:
The visualization-component is a dynamic, interactive graph component built using D3.js. It is designed to render graphs based on provided JSON data, making it ideal for visualizing complex relationships and networks in an intuitive manner.
166 lines (165 loc) • 6.6 kB
TypeScript
/**
* Class responsible for setting up and managing the D3.js graph visualization.
*
* @class
*/
export declare class GraphSetup {
/**
* The HTML host element where the D3.js graph will be rendered.
*
* @private
* @type {HTMLElement}
*/
private hostElement;
/**
* The size of the graph. Defaults to '1350px,650px'.
*
* @private
* @type {string}
*/
private size;
private legendNodeSize;
private legendTextSize;
/**
* Default force properties for the graph simulation.
*
* @private
* @type {{
* center: { x: number, y: number },
* charge: { enabled: boolean, strength: number, distanceMin: number, distanceMax: number },
* link: { distance: number }
* }}
*/
private forceProperties;
constructor(hostElement: any);
/**
* Clears all elements inside the provided SVG element.
*
* @param {d3.Selection} svg - The SVG element to clear.
*/
clearSVG(svg: any): void;
/**
* Initializes the SVG element for the graph based on the host element.
*
* @returns {{ svg: d3.Selection, numericWidth: number, numericHeight: number }} - The initialized SVG element and its dimensions.
*/
initializeSVG(numPrimaryNodes: number): {
svg: any;
numericWidth: number;
numericHeight: number;
};
/**
* Creates a force simulation for the graph nodes and links.
*
* @param {any[]} nodes - The array of node data.
* @param {any[]} links - The array of link data.
* @param {number} numericWidth - The numeric width of the graph.
* @param {number} numericHeight - The numeric height of the graph.
* @returns {d3.Simulation<any, any>} - The configured force simulation.
*/
createForceSimulation(nodes: any, links: any, numericWidth: any, numericHeight: any): any;
/**
* Updates the force simulation properties.
*
* @param {{ [forceName: string]: { [propName: string]: any } }} newProps - The new properties to update.
*/
updateForceProperties(newProps: {
[forceName: string]: {
[propName: string]: any;
};
}): void;
/**
* Sets up attribute color mapping based on provided configurations if not provided then used default colors.
*
* @param {string[]} uniqueAttributeNames - The unique attribute names.
* @param {any[]} parsedConfig - The parsed configuration data.
* @returns {{ attributeColorMap: Map<string, string>, attributeColorScale: d3.ScaleOrdinal<string, string> }} - The attribute color map and scale.
*/
attributeColorSetup(uniqueAttributeNames: any, parsedConfig: any): {
attributeColorMap: Map<any, any>;
attributeColorScale: any;
};
/**
* Creates and appends link elements to the graph SVG.
*
* @param {d3.Selection} svg - The SVG element to which links will be appended.
* @param {any[]} links - The array of link data.
* @returns {d3.Selection} - The created link elements.
*/
createLinks(svg: any, links: any, colorType: any): any;
createPrimaryNodeMap(nodes: any, primaryNodeConfig: any): Map<any, any>;
/**
* Creates and appends node elements to the graph SVG.
*
* @param {d3.Selection} svg - The SVG element to which nodes will be appended.
* @param {any[]} nodes - The array of node data.
* @param {d3.ScaleOrdinal<string, string>} colorScale - The color scale for node colors.
* @returns {d3.Selection} - The created node elements.
*/
createNodes(svg: any, nodes: any, primaryNodeConfig: any, attributeColorMap: any, config: any): {
nodesCreated: any;
typeMatchedPrimaryNodes: any[];
};
/**
* Creates custom markers for links based on their types.
*
* @param {d3.Selection} svg - The SVG element.
* @param {any[]} links - The array of link data.
* @param {(type: string) => string} colorType - Function to retrieve color based on link type.
*/
createCustomMarkers(svg: any, links: any, colorType: any): void;
/**
* Applies the force simulation to update link and node positions on each simulation tick.
*
* @param {d3.Selection} nodes - The node elements in the graph.
* @param {d3.Selection} links - The link elements in the graph.
* @param {d3.Simulation<any, any>} simulation - The configured force simulation.
*/
applySimulation(nodes: any, links: any, simulation: any): void;
/**
* Prepares legend data based on provided configurationsif not provided then by defualt colors.
*
* @param {string[]} uniqueAttributeNames - The unique attribute names.
* @param {any[]} config - The legend configuration data.
* @param {d3.ScaleOrdinal<string, string>} attributeColorScale - The attribute color scale.
* @returns {any[]} - The prepared legend data.
*/
prepareLegend(typeMatchedPrimaryNodes: any, uniqueAttributeNames: any, config: any, attributeColorScale: any): {
primaryConfigFallback: {
label: string;
color: string;
description?: undefined;
};
legendConfigurations: any;
legendPrimaryConfig?: undefined;
legendAttributesConfig?: undefined;
} | {
primaryConfigFallback: {
label: any;
color: any;
description: any;
};
legendPrimaryConfig: any;
legendAttributesConfig: any;
legendConfigurations?: undefined;
};
/**
* Creates a legend for nodes in the graph.
*
* @param {d3.Selection} svg - The SVG element.
* @param {string} primaryNodeColor - The color for primary nodes.
* @param {boolean} showLegend - Whether to display the legend.
* @param {any[]} legendConfigurations - The legend configurations.
* @param {Map<string, string>} attributeColorMap - The attribute color map.
*/
createLegendNodes(svg: any, primaryNodeColor: any, showLegend: any, legendConfigurations: any, attributeColorMap: any, tooltip: any, legendPrimaryConfig: any): void;
/**
* Adds an item to the legend with the specified color, label, and size.
*
* @param {HTMLElement} legend - The legend container element.
* @param {string} color - The color of the legend item.
* @param {string} label - The label for the legend item.
* @param {number} size - The size of the legend item.
*/
addLegendItem(legend: any, color: any, label: any, size: any, description: any): any;
}