@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.
129 lines (128 loc) • 3.6 kB
TypeScript
export declare class VisualizationComponent {
hostElement: HTMLElement;
/**
* The size of the graph. Defaults to '1350px,650px'.
*
* @prop
* @type {string}
*/
size: string;
/**
* Whether to show attributes in the graph. Defaults to true.
* If true it will show all the attributes/properties
* If false it wont show any attributes
* Default value : true
*
* @prop
* @type {boolean}
*/
showAttributes: boolean;
/**
* Whether to show primary links in the graph.
* If true it will show all the links between primary nodes
* Defaults to true.
*
* @prop
* @type {boolean}
*/
showPrimaryLinks: boolean;
/**
* Input data in JSON format for the graph.
*
* @prop
* @type {string}
*/
data: string;
/**
* Properties to be excluded from outside the component. Defaults to an empty string.
*
* @prop
* @type {string}
*/
excludeProperties: string;
/**
* Whether to show hover effects on the graph nodes. Defaults to true.
*
* @prop
* @type {boolean}
*/
showDetailsOnHover: boolean;
/**
* Whether to show the legend in the graph. Defaults to true.
*
* @prop
* @type {boolean}
*/
showLegend: boolean;
/**
* The configuration object for customizing the graph color, and legend.
*
* @prop
* @type {any}
*/
configurations: any;
private tooltip;
chartData: any;
parsedConfig: any;
primaryNodeColor: string;
/**
* Declare a private instance variable of the 'PrepareData' class.
* It is used for preparing or processing data for the chart.
*/
private dataUtil;
/**
* Declare a private instance variable of the 'GraphSetup' class.
* It is used for setting up and configuring the D3.js graph.
*/
private d3GraphSetup;
/**
* Declare a private instance variable of the 'HandleEvents' class.
* It is used for handling events related to the D3.js graph.
*/
private handleEvents;
/**
* Callback invoked when the 'data' property changes. Updates the visualization.
*
* @watch
* @param {string} newData - The new data.
*/
inputDataChanged(newData: any): void;
/**
* Callback invoked when the 'showAttributes' property changes.
* Updates the data utility and regenerates the D3 graph.
*
* @watch
* @param {boolean} newValue - The new value of 'showAttributes'.
*/
showAttributesChanged(newValue: boolean): void;
/**
* Callback invoked when the 'showPrimaryLinks' property changes.
* Updates the data utility and regenerates the D3 graph.
*
* @watch
* @param {boolean} newValue - The new value of 'showPrimaryLinks'.
*/
showPrimaryLinksChanged(newValue: boolean): void;
/**
* Lifecycle method invoked when the component is connected.
* Initializes data utility, D3 graph setup, and parses input data.
*/
connectedCallback(): void;
/**
* Lifecycle method invoked when the component is loaded.
* Initializes and sets up the D3.js graph.
*/
componentDidLoad(): void;
/**
* Sets up the D3.js graph visualization based on the input data.
*
* @param {any[]} setupData - The data to set up the graph.
*/
generateD3Graph(setupData: any[]): void;
/**
* Renders the component with an SVG element for the graph.
*
* @return {JSX.Element}
*/
render(): any;
}