ui-widget-toolkit
Version:
UI widgets built on top of D3, Pixi.js and ag-grid-community
4,801 lines • 197 kB
TypeScript
// Generated by dts-bundle v0.7.3
// Dependencies for this module:
// ../d3
// ../pixi.js
import * as d3 from 'd3';
import * as PIXI from 'pixi.js';
export function showContextMenu(event: MouseEvent, data: any, contextMenuItems: IContextMenuItem[], propogateEvent?: boolean): void;
export function getSelectionName(className: string): string;
export function removeFromList(value: any, arr: any[]): void;
/** modified from d3-array */
export function bisect(compare?: any): any;
/** puts all raw data into buckets based on thresholds and values */
export function bucketData(values: any[], thresholds: number[], accessor: (d: any) => number): {
[index: string]: any[];
};
export function copy(obj: any): Object;
export function merge(obj1: any, obj2: any): void;
export function convertTraceToTrees(input: ITraceValue[]): ITreeNode[];
export class SimpleBuffer<DataType> implements IBuffer<DataType> {
constructor(data?: DataType[]);
push(d: DataType): void;
get(index: number): DataType;
length(): number;
getData(): DataType[];
}
export class RingBuffer<DataType> implements IBuffer<DataType> {
constructor(size: number);
/** add a new value to the buffer */
push(d: DataType): void;
/** return the value offset index from the start index
* @param index the offset from the start of the buffer
*/
get(index: number): DataType;
/** get the number of items in the buffer */
length(): number;
getData(): DataType[];
}
export function bisectBuffer(compare?: any): any;
export function transposeKeys(data: ISummaryValue[]): ISummaryValue[];
export function runFunctionOnLeaf(node: ICheckboxTreeNode, func: (leafNode: ICheckboxTreeNode) => void): void;
export function isOverlapping(rect1: IRect, rect2: IRect): boolean;
export interface IScalar {
/** the multiplier used on the base scale to get this scale */
scalar: number;
/** the units for this scale */
units: string;
/** the maximum range for this scale. For example if this is .1,
* any value above .1 will use the next scale and any value below .1
* will use this scale (until the next lower scale)
*/
maxRange: number;
}
export interface IScalingInfo {
/** the base scale for the axis */
baseScale: IScalar;
/** the list of scalars for the axis */
scalars?: IScalar[];
}
/**
* defines what type of axis scaling to use
*
* @enum {number}
*/
export enum AxisType {
/** continuous axis of data with a linear scale */
Linear = 0,
/** continuous axis of data with a logarithmic (base 10) scale */
Logarithmic = 1,
/** axis of data with discrete values that are enumerated or derived from the data */
Ordinal = 2
}
/** interface that describes the data represented in an axis */
export interface IAxisDescription {
scaleType: AxisType;
/** what scaling and text to show for the units */
scalingInfo?: IScalingInfo;
/** how many decimals to show for the units */
precision?: number;
/** text to define what this axis represents */
label?: string;
/** used for the Ordinal scaling type to define the keys */
keys?: any[];
/** used for a continuous axis to define what range the axis should show */
range?: IRange;
}
/** options to pass to the axis to change how it is rendered */
export interface IAxisOptions extends IOptions {
/** change the number of ticks to show on this axis when rendering */
tickCount?: number;
/** change the size of ticks that are not the two outside ticks */
tickSizeInner?: number;
/** change the size of the two outside ticks */
tickSizeOuter?: number;
/** map tick string to another value */
tickMappingFunc?: (value: any) => string;
/** rotate the text of the axis */
rotateText?: boolean;
/** percentage to rotate the text of the axis */
rotateTextDegrees?: number;
/** enable brush selection in ordinal case which is atypical */
enableOrdinalBrushSelection?: boolean;
/** try to set range from 0 to the value if possible */
enableZeroOffset?: boolean;
}
/** the combination of axis definition and rendering information needed
* to render this axis
*/
export interface IAxis extends UIElement {
renderer?: UIRenderer;
manager?: UIElementManager;
/** defines what data to represent in the axis */
axisDesc: IAxisDescription;
/** defines whether an axis is top/bottom/left/right */
alignment: Alignment;
/** used for Y axis if you want the range to autoscale as you zoom in and out */
enableDynamicRange?: boolean;
/** any misc options to configure the axis */
options?: IAxisOptions;
/** an axis may be hidden if it is just being used to scale the data */
hidden?: boolean;
/** any special CSS to hardcode for this axis */
css?: ICss;
}
/** An axis that has been render */
export interface IRenderedAxis {
/** returns a function that converts a value into the pixel scaled value */
getScale(): (value: any) => number;
/** returns the number of pixels for this axis */
getRangePixels(): number;
}
/**
* bit mask to define how to render the data. This is an input to the RenderSeries.
* Note Stacked can be compbined with Line/Area/Bar. In the future release (2.x) note
* that we will make this a flat enum, not a bitmask as it is now.
*
* @enum {number}
*/
export enum RenderType {
/** render the data as a line. Supports IXYValue data */
Line = 1,
/** render the data as an area graph, Supports IXYValue data */
Area = 2,
/** render the data as a scatter plot, Supports IXYValue data */
Scatter = 4,
/** render the data as a bar chart, Supports ISummaryValue data */
Bar = 8,
/** render the line/area/bar data stacked. One data renders the Y value
* from 0-y1 and the next series renders from y1-y2 and so on for the data
*/
Stacked = 16,
/** render the data as a min max value chart, Supports IMinMaxValue data */
MinMaxValue = 32,
/** render the data as a flame chart, Supports ITraceValue data */
FlameChart = 64,
/** render the data as markers, supports ITraceValue data and
* requires image/decimation image in series*/
Marker = 128,
/** render the data as an arrow */
DirectionalArrow = 256,
/** render the data as a box plot */
BoxPlot = 512,
/** render the data as a heat map */
HeatMap = 1024,
/** render the data with no decimation but just as a line between XY values
* Note this has other side effects like we do not include the data
* by default in the tooltip metric list since we cannot be sure it is a metric
* being rendered.
*/
Raw = 2048
}
/**
* how to render a line graph
*
* @enum {number}
*/
export enum InterpolateType {
/** render a connected line from the previous value y to the current value y */
Linear = 0,
/** render a horizontal line using the previous y value from the previous x value
* to the current x value and then render a vertical line from the previous value
* y to the current value y
*/
StepBefore = 1,
/** render a horizontal line using the current y value from the current x value
* to the next x value and then render a vertical line from the current value
* y to the next value y
*/
StepAfter = 2
}
/** a series of IXYValues, their description and any rendering css options */
export interface IXYSeries {
values?: IXYValue[] | IBuffer<IXYValue>;
/** a function that is run per X value to generate the output Y value*/
functionMap?: IFunctionMap;
/** the name for this series may be used by the
* [[SelectionHelper]] and [[ColorManager]]
* */
name?: string;
/** CSS for this data */
css?: ICss;
/** EXPERIMENTAL: this flag enables text rendering for each XY scatter point*/
showTitleText?: boolean;
/** EXPERIMENTAL: description is drawn along the line/area graph */
description?: {
/** the description text */
text: string;
/** this describes where along the line/area the description is drawn*/
percentage?: number;
alignment?: Alignment;
};
}
/** a series of IXYValues, their description and any rendering css options */
export interface IRectSeries {
/** a list of rectangles to render in the chart */
rects: IXYRect[];
/** the name for this series */
name?: string;
/** CSS for this rectangle */
css?: ICss;
/** EXPERIMENTAL: description is drawn along the rectangle graph */
description?: {
/** the description text */
text: string;
/** this describes where along the line/area the description is drawn*/
percentage?: number;
alignment?: Alignment;
};
}
/** the layer of data is a set of data and how to render it */
export interface IBaseLayer {
/** how to render the data */
renderType: RenderType;
/** any css to be applied to the data */
css?: ICss;
/** index of the axis in the associated chart that is the x-axis for this data */
xAxisIdx?: number;
/** index of the axis in the associated chart that is the y-axis for this data */
yAxisIdx?: number;
/** scaling info for the X axis */
xScalingInfo?: IScalingInfo;
/** scaling info for the Y axis */
yScalingInfo?: IScalingInfo;
/** hide this data series in the legend for some reason */
hideInLegend?: boolean;
/** extra color information for the bar series type */
colors?: {
[index: string]: string;
};
/** the callback when an item in this data is hovered over
* @param event contains the data for the item that was hovered
*/
onHover?: (event: IEvent) => void;
/** the callback when an item in this data is clicked
* @param event contains the data for the item that was clicked
*/
onClick?: (event: IEvent) => void;
/** the callback when an item in this data is double clicked
* @param event contains the data for the item that was clicked
*/
onDoubleClick?: (event: IEvent) => void;
/** the context menu definitions for when the user right clicks */
contextMenuItems?: IContextMenuItem[];
/** DEPRECATED disable using web workers for decimation */
disableWebWorkers?: boolean;
/** enable web workers for this data set */
enableWebWorkers?: boolean;
/** force a from one time from scratch redraw if layer changes */
forceUpdate?: boolean;
}
/** a set of xy data. line/area/scatter plots */
export interface IXYLayer extends IBaseLayer {
/** a set of list of XY to render */
data: IXYSeries[];
/** any transformation to do before rendering the data */
decimator?: IXYDecimator | IXYStackedDecimator;
/** tells the line graph how to render information between two points */
interpolateType?: InterpolateType;
/** tells the scatter plot to use the IXYValue.value as the radius */
useValueWhenRendering?: boolean;
/** populated by the renderer */
getAbsolutePosition?: (value: IXYValue) => IXYValue;
}
/** a set of summary data. bar graphs */
export interface ISummaryLayer extends IBaseLayer {
/** a set of summary values to render */
data: ISummaryValue[];
/** extra color information for the bar series type */
colors?: {
[index: string]: string;
};
}
/** a set of min/max/value data */
export interface IMinMaxValueLayer extends IBaseLayer {
/** a list of min max values to render */
data: IMinMaxValue[];
}
/** a set of flame chart data */
export interface ITraceValueLayer extends IBaseLayer {
/** a list of trace values to render */
data: ITraceValue[];
/** any transformation to do before rendering the data */
decimator?: IFlameChartDecimator | ITraceResidencyDecimator;
/** turn on rendering of the background, useful when using the rect limit decimator */
enableBackground?: boolean;
/** disable automatic hover of all identically named items */
disableHover?: boolean;
/** tells the area graph how to render information between two points */
interpolateType?: InterpolateType;
}
/** a set of flame chart data */
export interface IStackLayer extends IBaseLayer {
/** a list of trace values to render */
data: IFlameChartValue[];
/** any transformation to do before rendering the data */
decimator?: IFlameChartDecimator | ITraceResidencyDecimator;
/** turn on rendering of the background, useful when using the rect limit decimator */
enableBackground?: boolean;
/** disable automatic hover of all identically named items */
disableHover?: boolean;
/** tells the area graph how to render information between two points */
interpolateType?: InterpolateType;
}
/** a set of markert data */
export interface IMarkerLayer extends IBaseLayer {
/** a list of marker values to render */
data: ITraceValue[];
/** the image to use to render raw data */
image: any;
/** the image to use to render decimated data */
decimatedImage?: any;
/** any transformation to do before rendering the data */
decimator?: any;
}
export interface IRectLayer extends IBaseLayer {
data: IRectSeries[];
}
export type ILayer = IXYLayer | ISummaryLayer | IMinMaxValueLayer | ITraceValueLayer | IStackLayer | IRectLayer | IMarkerLayer;
export interface ITooltipEvent extends IEvent {
defaultTitle?: string;
defaultClass?: {
getTooltipData: (event: IEvent) => ITooltipData[];
};
}
/** base chart class */
export interface IChart extends UIElement {
category?: string;
/** a title for this chart that may be displayed */
title?: string;
/** context menu items that will be added to the context menu */
contextMenuItems?: IContextMenuItem[];
/** a callback that will be fired when the tooltip is triggered */
onTooltip?: (event: ITooltipEvent) => any;
/** once the chart is rendered this API object is filled with callbacks to
* interact with the chart
*/
api?: {
/**
* @deprecated Deprecated in favor of focus
* fire a hover event for this element
*
* @param event any event to pass to the renderer
*/
hover?: (event?: IEvent) => void;
/**
* fire a focus event for this element
*
* @param event any event to pass to the renderer
*/
focus?: (event?: IEvent) => void;
/**
* fire a select event for this element
*
* @param event any event to pass to the renderer
*/
select?: (event?: IEvent) => void;
/**
* fire a zoom event for this element
*
* @param event any event to pass to the renderer
*/
zoom?: (event?: IEvent) => void;
/**
* pan to a given event location
*/
pan?: (event?: IEvent) => void;
/**
* fire a mouse/touch change event for this element
*
* @param event any event to pass to the renderer
*/
cursorChange?: (event?: IEvent) => void;
/**
* fire a brush event for this element
*
* @param event any event to pass to the renderer
*/
brush?: (event?: IEvent) => void;
/**
* re-render the chart
*
*/
render?: (renderer?: UIRenderer, options?: IOptions) => Promise<any>;
/** [[createImage]] is triggered and prompts the user to save it via
* the browser save dialog
*/
saveImage?: () => void;
/** creates and image and loads it into memory */
createImage?: () => void;
/** reset the zoom for the chart to the original value */
zoomReset?: () => void;
/** zoom in by one step */
zoomIn?: () => void;
/** zoom out by one step */
zoomOut?: () => void;
/** pan right by one step */
panRight?: () => void;
/** pan left by one step */
panLeft?: () => void;
/** limit the X range of the chart, works only with 1 x axis */
rangeUpdate?: (event?: IEvent) => void;
/** reset the X range of the chart to default values, works only with 1 x axis */
rangeReset?: () => void;
};
}
/** cartesian chart is used to define a chart with an X and Y axis */
export interface ICartesianChart extends IChart {
/** the sets of data to render */
dataSets: ILayer[];
/** flag if the x-axis is continuous. A continuous x-axis allows zooming */
isXContinuous: boolean;
/** the set of axes for this chart that the data can reference */
axes?: IAxis[];
/** the set of legends for this chart */
legends?: ILegend[];
/** brush selectoin results in the following context menu */
brushContextMenuItems?: IContextMenuItem[];
}
export interface IPolarChart extends IChart {
/** the legend for this chart */
legend?: ILegend;
/** units string */
units?: string;
/** callback when user clicks on an arc */
onClick?: (event: IEvent) => void;
/** the callback when an item in this data is double clicked
* @param event contains the data for the item that was clicked
*/
onDoubleClick?: (event: IEvent) => void;
}
/** defines a simple pie chart */
export interface IPieChart extends IPolarChart {
/** the data for the pie, each key/value pair is a pie segment
* the index is used by [[SelectionHelper]] and [[ColorManager]]
*/
data: {
[index: string]: number;
};
/** specify what colors to use for each key in the bar */
colors?: {
[index: string]: string;
};
/** a value from 0-1 which specifies the percentage of the outer radius
* to cut out of the middle of the pie to make a donut chart */
innerRadius?: number;
}
/** defines a sunburst chart */
export interface ISunburstChart extends IPolarChart {
/** the data for the sunburst, each key/value pair is a pie segment */
data: ITreeNode[];
/** a decimator for the data */
decimator?: ISunburstDecimator;
}
/** defines a sunburst chart */
export interface IRadarChart extends IPolarChart {
/** the data for the sunburst, each key/value pair is a pie segment */
data: ISummaryValue[];
}
/**
* XY Data can be rendered using RenderType
* Line, Area, Scatter, DirectionalArrow, HeatMap
* The x maybe used by [[SelectionHelper]] and [[ColorManager]]
*/
export interface IXYValue {
x: any;
y: any;
info?: {
title?: string;
colorKey?: string;
};
value?: any;
}
/**
* Trace data can be rendered using RenderType
* FlameChart, Marker, Area
* The key/name maybe used by [[SelectionHelper]] and [[ColorManager]]
*/
export interface ITraceValue {
key: number | string;
name?: string;
desc?: string;
x: number;
dx?: number;
value?: any;
}
/**
* TreeNode data can be rendered using the treemap renderer
* The key maybe used by [[SelectionHelper]] and [[ColorManager]]
*/
export interface ITreeNode {
key: number | string;
value: number;
children: ITreeNode[];
parent: ITreeNode;
name?: string;
displayValue?: any;
}
/**
* IXYRect data can be rendered using the cartesian chart
*/
export interface IXYRect {
x: any;
x1: any;
y: any;
y1: any;
value?: any;
}
/**
* IXYRect data can be rendered using the cartesian chart MixMaxValue render type.
* The x maybe used by [[SelectionHelper]] and [[ColorManager]]
*/
export interface IMinMaxValue {
x: any;
y: number;
min: number;
max: number;
}
/**
* ICandlestickValue data can be rendered using the cartesian chart BoxPlot
* render type. The x maybe used by [[SelectionHelper]] and [[ColorManager]]
*/
export interface ICandlestickValue {
x: any;
min: any;
max: any;
entry: any;
exit: any;
y?: any;
}
/**
* This data is used as the output of the flame chart decimators
*/
export interface IFlameChartValue {
depth: number;
traceValue: ITraceValue;
decimatedValues?: ITraceValue[];
}
/**
* this function map should be passed as a parameter of the
* [[IXYSeries]]
*/
export interface IFunctionMap {
y: (x: any) => any;
xMin?: any;
xMax?: any;
yMin?: any;
yMax?: any;
}
/**
* Summary value data can be rendered by RenderType Bar or
* as a polar pie chart
*/
export interface ISummaryValue {
key: string;
data: {
[index: string]: number;
} | number | ISummaryValue[];
range?: {
min: number;
max: number;
};
units?: string;
}
export interface ICartesianSeriesPlugin {
/** get the name of this series */
getName: () => string;
/** check if the x is continuous series */
isXContinuousSeries: () => boolean;
/** check if the y is continuous series */
isYContinuousSeries: () => boolean;
/** get all discrete x values */
getDiscreteXValues?: (isStacked: boolean) => string[];
/** get all discrete y values */
getDiscreteYValues?: () => string[];
/** get x min max values for the object */
getXMinMax: () => number[];
/** get y min max values for the object */
getYMinMax: () => number[];
/** get the minimum graph height */
getRequiredHeight: () => number;
/** decimate the data for the series or series group */
decimateData: (xStart: number, xEnd: number, xAxis: IRenderedAxis, yAxis: IRenderedAxis) => Promise<any>;
/** get the x scaling info cfor this series */
getXScalingInfo: () => IScalingInfo;
/** get the y scaling info for this series */
getYScalingInfo: () => IScalingInfo;
/** fill in tooltip information */
getTooltipMetrics: (elem: UIElement, event: IEvent) => ITooltipData[];
/** get information for the legend to render */
getLegendInfo: () => ILegendItem[];
/** handle on focus events if we want to */
focus: (selection: string) => void;
/** handle on unfocus events if we want to */
unfocus: (selection: string) => void;
/** handle on focus events if we want to */
select: (selection: string) => void;
/** handle on unfocus events if we want to */
unselect: (selection: string) => void;
/** set update data for the given plugin */
setData: (layer: ILayer) => void;
/** render all of the data in the series
* @param svg the svg to draw the data in
* @param yOffsets for each data point in this element
*/
render: (yOffsets?: number[]) => void;
}
/**
* Define the interface for a decimator
*/
export interface IDecimator {
initialize?(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* the name of this decimation scheme
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): any;
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: any): any;
}
/**
* Internally used class for the array of values
*/
export interface INEWSDecimationValue extends ICandlestickValue {
y: any;
}
/*************************************************************
* SIMPLE XY CHART DECIMATORS
*/
export interface IXYDecimator extends IDecimator {
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the decimated list of data
*/
getValues(): IXYValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IXYValue>): IXYValue[];
}
/****************************************************
* STACKED XY DECIMATORS
*/
export interface IXYStackedDecimator extends IDecimator {
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number, seriesNames?: string[]): void;
/**
* Returns the decimated list of data
*/
getValues(): IXYValue[][];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IXYValue>[]): IXYValue[][];
}
/*************************************************************
* FLAME CHART DECIMATORS
*/
export interface IFlameChartDecimator extends IDecimator {
initialize?(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): IFlameChartValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IFlameChartValue[]>): IFlameChartValue[];
}
/*************************************************************
* TRACE DATA DECIMATORS
*/
export interface ITraceResidencyDecimator extends IDecimator {
initialize?(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number, seriesNames?: string[]): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): IXYValue[][];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: any): IXYValue[][];
}
export interface ITraceStateDecimator extends IDecimator {
initialize?(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number, seriesNames?: string[]): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): INEWSDecimationValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: any): INEWSDecimationValue[];
}
export interface IPolarCoord {
angle: number;
radius: number;
}
export interface IPolarSegment {
startAngle: number;
endAngle: number;
outerRadius: number;
innerRadius: number;
depth: number;
rawData: any;
}
export interface ISunburstDecimationInfo {
arcs: IPolarSegment[];
renderedArcs: IPolarSegment[];
background: IPolarCoord[];
}
export interface ISunburstDecimator {
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): ISunburstDecimationInfo;
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(values: any): ISunburstDecimationInfo;
/**
* reset the decimator
*/
reset(): void;
}
/**
* Represents a node in a tree of nodes
*/
export interface ITreeMapNode {
/** the unique ID of this node
* May be used in [[SelectionHelper]] and [[ColorManager]]
*/
id: any;
/** display name for this name
* May be used in [[SelectionHelper]] and [[ColorManager]]
*/
name?: string;
/** children of this node if the top level node represents
* multiple aggregated nodes
*/
children?: ITreeMapNode[];
/** the value of the node which determines the size
* of the node
*/
value?: number;
}
export interface ITreeMap extends UIElement {
root: ITreeMapNode;
/** the context menu definitions for when the user right clicks */
contextMenuItems?: IContextMenuItem[];
/** when hovering over a node, render the children of this node
* within the bounds of the top level node
*/
showChildrenOnHover?: boolean;
}
export interface ITooltipData {
/** the element that triggered this tooltip */
source: UIElement;
/** the name of the group for this tooltip */
group: string;
/** a list of data to be shown in the tooltip */
metrics: {
[index: string]: string;
};
}
export interface IEvent {
/** specifies the type of event from
* [[EventType]]
*/
event?: EventType;
selection?: string;
selectionKey?: string;
/** data associated with the event */
data?: any;
/** tooltip used to display information about data */
tooltip?: any;
/** the original caller who caused this event to be fired*/
caller?: UIElement;
/** xStart bounds of associated with this event */
xStart?: number;
/** xEnd bounds of associated with this event */
xEnd?: number;
/** yStart bounds of associated with this event */
yStart?: number;
/** yEnd bounds of associated with this event */
yEnd?: number;
}
export interface IOptions {
/** attempt to fit a graph into the view specified by the
* [[IOptions]]
*/
fitToWindow?: boolean;
/** blink assocaited data when a selection is done */
disableSelection?: boolean;
selectionBlink?: boolean;
disableBackground?: boolean;
/** tell a widget to ignore the hover events */
disableHover?: boolean;
disableAutoResizeWidth?: boolean;
disableAutoResizeHeight?: boolean;
hideRowTitle?: boolean;
/** @deprecated deprecated for focusRadiusDelta */
hoverRadiusDelta?: number;
focusRadiusDelta?: number;
enableSaveAsImage?: boolean;
forceSvgRenderer?: boolean;
forceCanvasRenderer?: boolean;
/** @deprecated WebGL is now the default in PIXI so we have to force the canvas renderer */
forceWebGLRenderer?: boolean;
/** brush options */
disableBrush?: boolean;
forceBrushToFront?: boolean;
/** animation time in milliseconds, defaults to 1000 **/
animateDuration?: number;
enableXYZoom?: boolean;
disableZoomViewUpdate?: boolean;
disableZoomMouseWheel?: boolean;
showSelectionAsOverlay?: boolean;
/** handle resize controls */
disableResize?: boolean;
disableResizeRight?: boolean;
disableResizeBottom?: boolean;
disableResizeLeft?: boolean;
/** tooltip behavior */
disableHoverTooltip?: boolean;
disableTooltip?: boolean;
tooltipDelay?: number;
/** async display behavior */
enableWebWorkers?: boolean;
/** DEPRECATED */
disableWebWorkers?: boolean;
disableProgressSpinner?: boolean;
height?: any;
width?: any;
xStart?: number;
xEnd?: number;
yStart?: number;
yEnd?: number;
topMargin?: number;
bottomMargin?: number;
leftMargin?: number;
rightMargin?: number;
}
export interface IBuffer<DataType> {
push(d: DataType): void;
get(index: number): DataType;
length(): number;
getData(): DataType[];
}
/**
* Represents a relative alignment
*/
export enum Alignment {
Left = 1,
Right = 2,
Top = 4,
Bottom = 8,
None = 0
}
export enum EventType {
CursorStart = 0,
CursorMove = 1,
CursorEnd = 2,
BrushStart = 3,
BrushMove = 4,
BrushEnd = 5,
HoverStart = 6,
HoverEnd = 7,
HoverClear = 8,
FocusStart = 6,
FocusEnd = 7,
FocusClear = 8,
SelectAdd = 9,
SelectRemove = 10,
SelectStart = 9,
SelectEnd = 10,
SelectClear = 11,
Zoom = 12,
Click = 13,
DoubleClick = 14,
RangeUpdate = 15
}
export enum UIType {
Unrendered = 0,
Cartesian = 1,
Pie = 2,
Grid = 3,
FlowDiagram = 4,
ForceDirectedGraph = 5,
Sunburst = 6,
HierarchyGraph = 7,
PortDiagram = 8,
SimpleGraph = 9,
TreeMap = 10,
Axis = 11,
Radar = 12
}
export interface IContextMenuItem {
/** add a clickable item title */
title?: string;
/** add a clickable item callback */
action?: (elem: any, data: any, index: any) => void;
/** disable this clickable item */
disabled?: boolean;
/** used to add a divider */
divider?: boolean;
submenu?: IContextMenuItem[];
submenuDiv?: HTMLDivElement;
}
export enum LegendType {
Discrete = 0,
Gradient = 1
}
export enum LegendOrientation {
Vertical = 0,
Horizontal = 1
}
export enum LegendItemShape {
Rectangle = 0,
Line = 1,
Circle = 2
}
export interface ILegendItem {
key: any;
name?: string;
color?: string;
opacity?: string;
shape?: string | LegendItemShape;
value?: any;
units?: string;
}
export interface ILegendDefinition {
items: ILegendItem[];
type?: LegendType;
}
export interface ILegend {
alignment: Alignment;
orientation?: LegendOrientation;
showValue?: boolean;
definition?: ILegendDefinition;
/** brush selectoin results in the following context menu */
contextMenuItems?: IContextMenuItem[];
/** callback when user clicks on an item */
onClick?: (event: IEvent) => void;
}
export interface ICheckboxTreeNode {
id: any;
name: string;
children: ICheckboxTreeNode[];
parent?: ICheckboxTreeNode;
open?: boolean;
checked?: boolean;
indeterminate?: boolean;
propogateChange?: boolean;
notCheckable?: boolean;
}
export interface UIRenderer {
/** free resources associated with the element */
destroy?: (caller: UIElement) => void;
setDiv?: any;
setOnRenderCallback?: (callback: (elem: UIElement, options: IOptions) => void) => void;
/** callbacks for when this element has been updated, used so the render owner
* can maintain state if they want of each element
*/
onRender?: (caller: UIElement, options: IOptions) => void;
/**
* @deprecated ('Deprecated since 1.14.0 in favor of focus. Will be removed in 2.x')
* hover event
*
* @param element to fire the hover event on
* @param event any event to pass to the renderer
*/
hover?(element: UIElement, event: IEvent): void;
/**
* focus event
*
* @param element to fire the focus event on
* @param event any event to pass to the renderer
*/
focus?(element: UIElement, event: IEvent): void;
/**
* select event
*
* @param element to fire the click event on
* @param event any event to pass to the renderer
*/
select?(element: UIElement, event: IEvent): void;
/**
* zoom event
*
* @param element to fire the zoom event on
* @param event any event to pass to the renderer
*/
zoom?(element: UIElement, event: IEvent): void;
/**
* brush event
*
* @param element to fire the brush event on
* @param event any event to pass to the renderer
*/
brush?(element: UIElement, event: IEvent): void;
/**
* cursor moved event
*
* @param element to fire the move event on
* @param event any event to pass to the renderer
*/
cursorChange?(element: UIElement, event: IEvent): void;
/**
* Render the given element
*
* @param the element to render
*/
render(element: UIElement, options?: IOptions): void;
/**
* Invalidate the given element. This is different from
* render in that it completely redraws the element instead of
* just re-rendering it
*
* @param the element to invalidate
*/
invalidate(element: UIElement, options?: IOptions): void;
/**
* Get the css actually rendered. This is useful for legend swatches
* and the like.
*
* @param the element to get the rendered CSS information for
*
* @return The css rendered, or undefined if called before the chart is
* rendered
*/
getRenderedCss?(element: UIElement): Css;
/**
* tooltip the element.
*
* @param renderer an IRenderer object that has the tooltip
* @param event any event to pass to the renderer
*/
getTooltipData?(element: UIElement, event: IEvent): ITooltipData[];
/**
* get the options the renderer is using for the given element
*
* @param the element to invalidate
*/
getOptions(element: UIElement): IOptions;
/**
* get the colors the renderer is using for the given element
*
* @param the element to invalidate
*/
getColorManager(): ColorManager;
}
export interface UIElement {
type?: UIType;
options?: IOptions;
renderer?: UIRenderer;
manager?: UIElementManager;
api?: {
/**
* @deprecated ('Deprecated since 1.14.0 in favor of focus. Will be removed in 2.x')
* fire a hover event for this element
*
* @param event any event to pass to the renderer
*/
hover?: (event?: IEvent) => void;
/**
* fire a focus event for this element
*
* @param event any event to pass to the renderer
*/
focus?: (event?: IEvent) => void;
/**
* fire a select event for this element
*
* @param event any event to pass to the renderer
*/
select?: (event?: IEvent) => void;
/**
* fire a zoom event for this element
*
* @param event any event to pass to the renderer
*/
zoom?: (event?: IEvent) => void;
/**
* fire a mouse/touch change event for this element
*
* @param event any event to pass to the renderer
*/
cursorChange?: (event?: IEvent) => void;
/**
* fire a brush event for this element
*
* @param event any event to pass to the renderer
*/
brush?: (event?: IEvent) => void;
/**
* pan to a given event location
*/
pan?: (event?: IEvent) => void;
/**
* Render the element.
*
* @param renderer an IRenderer object that can render this element
* @param options any options to pass to the renderer
*/
render?: (renderer?: UIRenderer, options?: IOptions) => Promise<any>;
getOptions?: () => IOptions;
saveImage?: () => void;
createImage?: () => void;
};
/**
* get tooltip data for the element
*
* @param event any event to pass to the renderer
*/
getTooltip?: (event?: IEvent) => ITooltipData[];
/**
* callback when a tooltip occurs in this element
*
* @param event the event related to this callback
*/
onTooltip?: (event: IEvent) => any;
/**
* callback when a hover occurs in this element
*
* @param event the event related to this callback
*/
onHover?: (event: IEvent) => void;
/** callback when user clicks on an item */
onClick?: (event: IEvent) => void;
/** the callback when an item in this data is double clicked
* @param event contains the data for the item that was clicked
*/
onDoubleClick?: (event: IEvent) => void;
/**
* callback when a zoom action occurs in this element
*
* @param event the event related to this callback
*/
onZoom?: (event: IEvent) => void;
/**
* callback when a brush action occurs in this element
*
* @param event the event related to this callback
*/
onBrush?: (event: IEvent) => void;
/**
* callback when the cursor change occurs in this element
*
* @param event the event related to this callback
*/
onCursorChanged?: (event: IEvent) => void;
/**
* callback when a re-render occurs in this element
*
* @param options the options used when render was called
*/
onRender?: (options: IOptions) => void;
handleUpdate?: (caller: UIElement, options: IOptions) => void;
/**
* get all elements associated with the render call of this UIElement
*/
getElements?: () => UIElement[];
}
export interface IRect {
x: number;
y: number;
width: number;
height: number;
right?: number;
bottom?: number;
}
export interface ICss {
classes?: {
[index: string]: boolean;
};
style?: {
[index: string]: any;
};
}
export interface IRange {
min: number;
max: number;
}
export class Rect implements IRect {
x: number;
y: number;
width: number;
height: number;
constructor(x?: number, y?: number, width?: number, height?: number);
contains(x: number, y: number): boolean;
}
/**
* Used to manipulate CSS class and style information
*/
export class Css implements ICss {
classes: {
[index: string]: boolean;
};
style: {
[index: string]: any;
};
constructor(classes?: string, style?: {
[index: string]: any;
});
/**
* add a class to the class list
* @param classes to add, can be strings separated by spaces
*
* @return the manager instance
*/
addClasses(classesStr: string): Css;
/**
* add a set of styles to the style object
* @param style a style object
*
* @return the manager instance
*/
addStyles(style: {
[index: string]: any;
}): Css;
/** set the color value
*
* @param color a string representing the color to use
*/
setColor(color: string): Css;
/** set the opcaity value
*
* @param opcaity a string representing the color to use
*/
setOpacity(opacity: number): Css;
/**
* remove a class from the class list
* @param className the class to remove
*
* @return the manager instance
*/
removeClass(className: string): Css;
/**
* remove a style from the style map
* @param key the name of the style to remove
*
* @return the manager instance
*/
removeStyle(key: string): Css;
/**
* get the list of classes
*
* @return a list of classes for this manager
*/
getClasses(): string[];
/**
* helper to get a space separated list of classes
*
* @return a string list of classes for this manager
*/
getClassString(): string;
/**
* get the style map
*
* @return an object that contains key/value style pairs
*/
getStyles(): any;
/**
* helper to get a json representation of the style map
*
* @return the json string of the style map
*/
getStyleString(): any;
}
/**
* implemented a basic API on top of the IRange object
*/
export class Range implements IRange {
min: number;
max: number;
constructor(min: number, max: number);
/**
* set the min value for the range
*
* @return the min range value
*/
setMin(min: number): Range;
/**
* get the min value for the range
*
* @return the min range value
*/
getMin(): number;
/**
* set the max value for the range
*
* @return the max range value
*/
setMax(max: number): Range;
/**
* get the max value for the range
*
* @return the max range value
*/
getMax(): number;
}
export interface UIElementManager {
/**
* add a elem to the manager
*
* @param elem - the elem that should should be added
* @param tooltipGroupName - Name of the group that this elem should be "ganged"
* with when showing tooltips. If not specified, this elem will not be "ganged" with any
* other elem.
* @param highlightGroupName - Name of the group that this elem should be "ganged"
* with when doing highlighting. If not specified, this elem will not be "ganged" with any
* other elem.
* @param renderGroupName - Name of the group that this elem should be "ganged"
* with when rerendering. If not specified, this elem will not be "ganged" with any
* other elem.
* @return - The elem manager instance.
*/
addElement(elem: UIElement, tooltipGroupName?: string, highlightGroupName?: string, renderGroupName?: string): UIElementManager;
/**
* remove a elem from the manager, removes it from all groups
*
* @param elem - the elem that should should be removed
*
* @return - The elem manager instance.
*/
removeElement(elem: UIElement): UIElementManager;
/**
* Return all the elems in this list
* @return the list of elems
*/
getElements(): UIElement[];
/**
* user callback called when a hover event happens
*
* @param the function to be called
*/
setHoverCallback(callback: (group: UIElement[], event: IEvent) => void): UIElementManager;
/**
* user callback called when a tooltip is created
*
* @param the functiotn to be called
*/
setTooltipCallback(callback: (group: UIElement[], event: IEvent) => ITooltipData): UIElementManager;
/**
* user callback called when a selection event happens
*
* @param the function to be called
*/
setBrushCallback(callback: (group: UIElement[], event: IEvent) => void): UIElementManager;
/**
* set the group this tooltip is associated with
*
* @param elem - the elem that should should be "ganged"
* @param groupName - Name of the group that this elem should be "ganged"
* with.
*
* @return - The elem manager instance.
*/
addToTooltipGroup(elem: UIElement, groupName: string): UIElementManager;
/**
* remove the elem from the tooltip group it is in
*
* @param elem - the elem that should should be "unganged"
*
* @return - The elem manager instance.
*/
removeFromTooltipGroup(elem: UIElement): UIElementManager;
/**
* set the group to select this elem with
*
* @param elem - the elem that should should be "ganged"
* @param groupName - Name of the group that this elem should be "ganged"
* with.
*
* @return - The elem manager instance.
*/
addToHighlightGroup(elem: UIElement, groupName: string): UIElementManager;
/**
* remove the elem from the zoom group it is in
*
* @param elem - the elem that should should be "unganged"
*
* @return - The elem manager instance.
*/
removeFromHighlightGroup(elem: UIElement): UIElementManager;
/**
* set the group to select this elem with
*
* @param elem - the elem that should should be "ganged"
* @param groupName - Name of the group that this elem should be "ganged"
* with.
*
* @return - The elem manager instance.
*/
addToRenderGroup(elem: UIElement, groupName: string): UIElementManager;
/**
* remove the elem from the zoom group it is in
*
* @param elem - the elem that should should be "unganged"
*
* @return - The elem manager instance.
*/
removeFromRenderGroup(elem: UIElement): UIElementManager;
/** clear all the elements in this list */
clear(): void;
}
/**
* detect IE
* returns version of IE or false, if browser is not Internet Explorer
*/
export function detectIE(): number | false;
export function useIEPolyfill(window: any): void;
export class GroupInfo {
_nameMap: {
[index: string]: UIElement[];
};
_objectMap: Map<UIElement, UIElement[]>;
constructor();
}
/** adds some default callbacks to a given UI object */
export function addCallbacks(elem: UIElement): void;
/** used to group UI elements together. Can be used to sync
* selection/tooltips
*/
export class ElementManager implements UIElementManager {
/** the list of elements managed by this manager */
protected _elems: UIElement[];
/** the groups of elements created by this group */
protected _groupInfo: GroupInfo[];
protected _hoverCallback: (group: UIElement[], event: IEvent) => void;
protected _clickCallback: (group: UIElement[], event: IEvent) => void;
protected _zoomCallback: (group: UIElement[], event: IEvent) => void;
protected _tooltipCallback: (group: UIElement[], event: IEvent) => ITooltipData;
protected _cursorChangeCallback: (group: UIElement[], event: IEvent) => void;
protected _brushCallback: (group: UIElement[], event: IEvent) => void;
protected _onTooltipCallback: (event: IEvent) => ITooltipData[];
protected _onZoomCallback: (event: IEvent) => void;
protected _onHoverCallback: (event: IEvent) => void;
protected _onClickCallback: (event: IEvent) => void;
protected _onCursorChangeCallback: (event: IEvent) => void;
protected _onBrushCallback: (event: IEvent) => void;
protected _onUpdateCallback: (caller: UIElement, options: IOptions) => void;
constructor();
/**
* add a elem to the manager
*
* @param elem - the elem that should should be added
* @param tooltipGroupName - Name of the group that this elem should be "ganged"
* with when showing tooltips. If not specified, this elem will not be "ganged" with any
* other elem.
* @param highlightGroupName - Name of the group that this elem should be "ganged"
* with when doing highlighting. If not specified, this elem will not be "ganged" with any
* other elem.
* @param renderGroupName - Name of the group that this elem should be "ganged"
* with when rerendering. If not specified, this elem will not be "ganged" with any
* other elem.
* @return - The elem manager instance.
*/
addElement(elem: UIElement, tooltipGroupName?: string, highlightGroupName?: string, renderGroupName?: string): ElementManager;
/**
* remove a elem from the manager, removes it from all groups
*
* @param elem - the elem that should should be removed
*
* @return - The elem manager instance.
*/
removeElement(elem: UIElement): ElementManager;
/**
* Return all the elems in this list
* @return the list of elems
*/
getElements(): UIElement[];
/**
* user callback called when a tooltip is created
*
* @param the functiotn to be called
*/
setZoomCallback(callback: (group: UIElement[], event: IEvent) => ITooltipData): ElementManager;
/**
* user callback called when a hover event happens
*
* @param the function to be called
*/
setHoverCallback(callback: (group: UIElement[], event: IEvent) => void): ElementManager;
/**
* user callback called when a hover event happens
*
* @param the function to be called
*/
setClickCallback(callback: (group: UIElement[], event: IEvent) => void): ElementManager;
/**
* user callback called when a tooltip is created
*
* @param the functiotn to be called
*/
setTooltipCallback(callback: (group: UIElement[], event: IEvent) => ITooltipData): ElementManager;
/**
* user callback called when a selection event happens
*
* @param the function to be called
*/
setBrushCallback(callback: (group: UIElement[], event: IEvent) => void): ElementManager;
/**
* set the group this tooltip is associated with
*
* @param elem - the elem that should should be "ganged"
* @param groupName - Name of the group that this elem should be "ganged"
* with.
*
* @return - The elem manager instance.
*/
addToTooltipGroup(elem: UIElement, groupName: string): ElementManager;
/**
* remove the elem from the tooltip group it is in
*
* @param elem - the elem that should should be "unganged"
*
* @return - The elem manager instance.
*/
removeFromTooltipGroup(elem: UIElement): ElementManager;
/**
* set the group to sync this elem with
*
* @param elem - the elem that should should be "ganged"
* @param groupName - Name of the group that this elem should be "ganged"
* with.
*
* @return - The elem manager instance.
*/
addToFocusGroup(elem: UIElement, groupName: string): ElementManager;
/**
* remove the elem from the zoom group it is in
*
* @param elem - the elem that should should be "unganged"
*
* @return - The elem manager instance.
*/
removeFromFocusGroup(elem: UIElement): ElementManager;
/**
* set the group to sync this elem with
*
* @param elem - the elem that should should be "ganged"
* @param groupName - Name of the group that this elem should be "ganged"
* with.
*
* @return - The elem manager instance.
*/
addToSelectGroup(elem: UIElement, groupName: string): ElementManager;
/**
* remove the elem from the zoom group it is in
*
* @param elem - the elem that should should be "unganged"
*
* @return - The elem manager instance.
*/
removeFromSelectGroup(elem: UIElement): ElementManager;
/**
* set the group to sync this elem with
*
* @param elem - the elem that should should be "ganged"
* @param groupName - Name of the group that this elem should be "ganged"
* with.
*
* @return - The elem manager instance.
*/
addToHighlightGroup(elem: UIElement, groupName: string): ElementManager;
/**
* remove the elem from the zoom group it is in
*
* @param elem - the elem that should should be "unganged"
*
* @return - The elem manager instance.
*/
removeFromHighlightGroup(elem: UIElement): ElementManager;
/**
* set the group to select this elem with
*
* @param elem - the elem that should should be "ganged"
* @param groupName - Name of the group that this elem should be "ganged"
* with.
*
* @return - The elem manager instance.
*/
addToRenderGroup(elem: UIElement, groupName: string): ElementManager;
/**
* remove the elem from the zoom group it is in
*
* @param elem - the elem that should should be "unganged"
*
* @return - The elem manager instance.
*/
removeFromRenderGroup(elem: UIElement): ElementManager;
/** clear all the elements in this list */
clear(): void;
}
/** used to organize and create colors for the UI */
export class ColorManager {
constructor(randomColorFunc?: () => string);
/**
* check if an existing color exists for a given key
*
* @param the key associated with your data
*/
hasColor(key: string): boolean;
/**
* set the color associated with a given key
*
* @param key associated with your data
* @param color to associate with the key
*/
setColor(key: string, color: string): void;
/**
* get the color associated with a given key
*
* @param key associated with your data
*/
getColor(key: string): string;
static IntToHex(value: number): string;
static RgbToHex(color: string): string;
static RgbToInt(color: string): number;
}
export class TreeMap extends SVGRenderer {
protected _radius: number;
protected _hoverItem: any;
protected _graphArea: d3.Selection<any, any, d3.BaseType, any>;
protected _onHoverChanged: (event?: IEvent) => void;
protected _hoverStart: (event?: IEvent) => void;
protected _hoverEnd: (event?: IEvent) => void;
protected _currentRoot: any;
protected _treemap: any;
protected _xScale: any;
protected _yScale: any;
protected _navBarHeight: number;
protected _navBarText: string;
protected _navBarSvg: d3.Selection<any, any, d3.BaseType, any>;
protected _childMap: any;
constructor(element: UIElement, renderer: D3Renderer, parent: d3.Selection<any, any, d3.BaseType, any>);
protected _showChildMap(target: any, node: any): d3.Selection<SVGGElement, any, d3.BaseType, any>;
protected _hasChildMap(node: any): any;
protected _addInteractionHelper(target: any, onClick: (event: IEvent) => void, onDoubleClick: (event: IEvent) => void, contextMenuItems: IContextMenuItem[]): void;
protected _renderTreeMap(oldRoot: any, newRoot: any): void;
createLayout(): void;
/**
* Render the given element
*
* @param the options to render
*/
render(options: IOptions): void;
}
/**
* XYValue
*
* Class for simple data that will be rendered as part of a chart
*/
export class XYValue implements IXYValue {
/** Specifies the independent axis co-ordinate */
x: any;
/** Specifies the dependent axis co-ordinate */
y: any;
/**
* Creates a XYValue instance
*
* @param x the independent axis coordinate
* @param y the dependent axis coordinate
*/
constructor(x: any, y: any);
}
/**
* MinMaxValue
*
* Class for candlestick data that will be rendered as part of a chart
*/
export class MinMaxValue implements IMinMaxValue {
/** Specifies the axis co-ordinate */
x: any;
/** Specifies the minimum value of metric for the axis co-ordinate */
min: number;
/** Specifies the maximum value of metric for the axis co-ordinate */
max: number;
/** Specifies the misc value of metric for the axis co-ordinate */
y: number;
/**
* Creates a MinMaxValue instance
*
* @param key - the axis co-ordinate which will be x co-ordinate
* @param min - the minimum value of metric for the axis co-ordinate
* @param max - the maximum value of metric for the axis co-ordinate
* @param misc - a misc value of metric for the axis co-ordinate
*/
constructor(x: any, min: number, max: number, misc: number);
}
/**
* CandlestickValue
*
* Class for candlestick data that will be rendered as part of a chart
*/
export class CandlestickValue implements ICandlestickValue {
/** Specifies the axis co-ordinate */
x: any;
/** Specifies the minimum value of metric for the axis co-ordinate */
min: any;
/** Specifies the maximum value of metric for the axis co-ordinate */
max: any;
/** Specifies the entry value of metric for the axis co-ordinate */
entry: any;
/** Specifies the exit value of metric for the axis co-ordinate */
exit: any;
/**
* Creates a CandlestickValue instance
*
* @param x - the axis co-ordinate which will be x co-ordinate
* @param min - the minimum value of metric for the axis co-ordinate
* @param max - the maximum value of metric for the axis co-ordinate
* @param entry - the entry value of metric for the axis co-ordinate
* @param exit - the exit value of metric for the axis co-ordinate
*/
constructor(x: any, min: number, max: number, entry: number, exit: number);
}
/**
* SummaryValue class
*/
export class SummaryValue implements ISummaryValue {
/** the description of this value */
key: string;
/** the description of this value */
data: {
[index: string]: number;
};
/**
* SummaryValue class
*
* @param primaryKey - key for the data
* @param value - value for this key
* @param secondaryKey - optional secondary key for the data
*/
constructor(key: string, value?: {
[index: string]: number;
});
/**
* Value getter
*
* @returns add a value to this key
*/
addValue(key: string, value: number): SummaryValue;
}
export function getStyle(target: d3.Selection<d3.BaseType, any, d3.BaseType, any>): any;
/**
* take two lists of strings and merge them into one list with only unique values
* note this changes the original list
*/
export function mergeKeys(arr1: string[], arr2: string[]): void;
export function getKeys(data: any[], accessor: (value: any) => string[]): string[];
export function focus(d3Obj: d3.Selection<any, any, d3.BaseType, any>, fillColors: WeakMap<Object, string>, strokeColors: WeakMap<Object, string>): void;
export function unfocus(d3Obj: d3.Selection<any, any, d3.BaseType, any>, fillColors: WeakMap<Object, string>, strokeColors: WeakMap<Object, string>): void;
export function select(d3Obj: d3.Selection<any, any, d3.BaseType, any>, fillColors: WeakMap<Object, string>, strokeColors: WeakMap<Object, string>): void;
export function unselect(d3Obj: d3.Selection<any, any, d3.BaseType, any>, fillColors: WeakMap<Object, string>, strokeColors: WeakMap<Object, string>): void;
export function onSelectHelper(caller: UIElement, value: any, selectionValue: string): void;
export function addClickHelper(target: d3.Selection<d3.BaseType, any, d3.BaseType, any>, options: IOptions, onClick: (event: IEvent) => void, onDoubleClick: (event: IEvent) => void, contextMenuItems: IContextMenuItem[], tooltip: BaseTooltip, caller: UIElement, value?: any, selectionValue?: string): void;
/** Note this is very expensive due to the getBoudingClientRect() call so
* you should cache this result if possible
*/
export function convertToSVGCoords(svg: d3.Selection<any, any, d3.BaseType, any>, element: d3.Selection<any, any, d3.BaseType, any>): IRect;
export function getTextRect(svg: d3.Selection<any, any, d3.BaseType, any>, text: string): IRect;
export function animatePath(path: d3.Selection<d3.BaseType, {}, any, any>, duration: number): void;
export class Arrow {
static getAngle(start: IXYValue, end: IXYValue): number;
static createArrow(group: d3.Selection<d3.BaseType, {}, any, any>, size?: number): d3.Selection<SVGPathElement, {}, any, any>;
static animateArrow(path: d3.Selection<d3.BaseType, {}, any, any>, arrow: d3.Selection<d3.BaseType, {}, any, any>, duration: number): void;
}
export class Spinner {
constructor(svg: any, rect: Rect);
}
/**
* Interface for the zoom callback function
*
* @param timeBounds - The min and max for the zoom (the domain)
*
* @returns Should always return true.
*/
export interface IBrushCallback {
(brushBounds: number[]): boolean;
}
/**
* The Brush class uses D3's brush behavior to implement zooming
* for Configuration Analyzer graphs where the X axis is time.
*
*/
export class Brush {
/** Internal function to be called at 'on mousedown' */
onBrushStart: any;
/** Internal function to be called at 'on mousemove' */
onBrushMove: any;
/** Internal function to be called at 'on mouseup' */
onBrushEnd: any;
/**
* Construct a Brush instance.
*/
constructor();
moveToFront(): void;
moveToBack(): void;
enableCallbacks(): Brush;
disableCallbacks(): Brush;
brushStart(domain: d3.BrushSelection): void;
brushMove(domain: d3.BrushSelection): void;
brushEnd(): void;
setXY(isXY: boolean): Brush;
setTarget(graphSVG: d3.Selection<d3.BaseType, any, d3.BaseType, any>): Brush;
setStartCallback(startFunc: IBrushCallback): Brush;
setMoveCallback(moveFunc: IBrushCallback): Brush;
setEndCallback(endFunc: IBrushCallback): Brush;
setRect(rect: Rect): Brush;
ready(): Brush;
/**
* Release all brush listeners on the target. Failure to release the
* listeners can prevent the target from being freed.
*
* @param target - The object to have any tooltip listeners reset.
*/
static releaseListeners(target: d3.Selection<d3.BaseType, any, d3.BaseType, any>): void;
}
export class D3Legend {
constructor(svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, legend: ILegend, title: string, rect?: Rect);
setPosition(rect: Rect): void;
getPosition(): Rect;
setItems(items: ILegendItem[]): void;
addItems(items: ILegendItem[]): void;
getAlignment(): Alignment;
getRenderedRect(): Rect;
getRows(): number;
protected renderDiscreteLegend(orientation: any): void;
protected renderGradientLegend(): void;
render(): void;
}
export class SVGRenderer extends UIElementRenderer {
/** used to disable cross graph calls when in redraw mode */
static IS_RESIZING: boolean;
cursorChange(event: IEvent): void;
zoom(event: IEvent): void;
brush(event: IEvent): void;
render(options: IOptions): void;
protected configureTooltip(): void;
createLayout(): void;
protected DEFAULT_GRAPH_HEIGHT: number;
protected MIN_MARGIN: {
TOP: number;
BOTTOM: number;
LEFT: number;
RIGHT: number;
};
protected LEGEND_PADDING: {
X: number;
Y: {
TOP: number;
BOTTOM: number;
};
};
protected AXIS_PADDING: {
X: number;
Y: {
TOP: number;
BOTTOM: number;
};
};
protected _minSvgWidth: number;
protected _maxGraphWidth: number;
protected _maxSvgWidth: number;
/** the parent renderer of this renderer */
protected _renderer: UIRenderer;
protected _parent: d3.Selection<any, any, d3.BaseType, any>;
/** The height of the graph. This INCLUDES the margins. */
protected _svgRect: Rect;
/** The width of the graph. This EXCLUDES the margins. */
protected _graphRect: Rect;
/** Tooltip div id */
protected _tooltipId: string;
/** Holds the analytics name for the tooltip for this chart */
protected _tooltipAnalyticsName: string;
/** width of any graph handles */
protected _handleWidth: number;
/** indicates we need to relayout the existing graph */
protected _requiresRelayout: boolean;
/** stores the original fill colors for an series */
protected _fillColors: WeakMap<Object, string>;
/** stores the original stroke colors for an series */
protected _strokeColors: WeakMap<Object, string>;
protected _interactionState: InteractionState;
/** the tooltip object */
protected _dataTooltip: CustomDivTooltip;
constructor();
setColorManager(colorManager: ColorManager): void;
protected initialize(element: UIElement, renderer: UIRenderer, parent: d3.Selection<any, any, d3.BaseType, any>): void;
protected loadOptions(options: IOptions): void;
getElement(): UIElement;
getOptions(): IOptions;
getAnimateDuration(): number;
/**
* Get the css actually rendered. This is useful for legend swatches
* and the like.
*
* @param the element to get the rendered CSS information for
*
* @return The css rendered, or undefined if called before the chart is
* rendered
*/
getRenderedCss(): Css;
/**
* tooltip the element.
*
* @param renderer an IRenderer object that has the tooltip
* @param event the event to pass to the renderer
*/
getTooltipData(event: IEvent): any;
/**
* @deprecated ('Deprecated since 1.14.0 in favor of focus. Will be removed in 2.x')
* hover event
*
* @param event the event to pass to the renderer
*/
hover(event: IEvent): void;
/**
* bring an item into focus
*
* @param event the event to focus on
*/
focus(event: IEvent): void;
/**
* select an item
*
* @param event the event to focus on
*/
select(event: IEvent): void;
/** the svg that contains the chart */
protected _svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>;
/** the svg that contains the chart */
protected _backgroundSVG: d3.Selection<d3.BaseType, {}, d3.BaseType, any>;
_focus(selection: any): void;
_unfocus(selection: any): void;
_select(selection: any): void;
_unselect(selection: any): void;
invalidate(options: IOptions): void;
updateHandles(): void;
createHandles(): void;
createImage(): Promise<any>;
saveImage(): void;
}
export var findFirstInsertionIdx: (buffer: IBuffer<{
x: any;
}>, x: number) => number;
export var findLastInsertionIdx: (buffer: IBuffer<{
x: any;
}>, x: number) => number;
/** This function is created by a user to do a user defined decimation.
* Note that the function is called once per x pixel on the screen. Also
* it is guaranteed that the inputValues will be in the same order as they
* are in the original array, so runnings statistical values can be stored
* in the function if really needed.
*
* yValueToCoord will map the yValue to an actual pixel. The larger the
* output of yValueToCoord, the smaller the actual value is aka there is an
* inverse relationship between yValueToCoord output and the actual Y value.
*
*/
export type IXYXSimpleDecimationFunction = (inputValues: IBuffer<IXYValue>, startIdx: number, endIdx: number, yValueToCoord: (value: any) => number, xValueToCoord: (value: any) => number, xStart: number, xEnd: number) => IXYValue[];
export class XYDummyDecimator implements IDecimator {
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
getKey(): string;
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): IXYValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IXYValue>): IXYValue[];
}
/**
* this class allows a decimation function to be passed in to allow for
* generic decimation
*/
export class CustomPointXYDecimator implements IXYDecimator {
/** this function should take a set of buckets and reduce them
* to a decimated subset for a given range */
protected _key: string;
protected _name: string;
/** this function should take a set of buckets and reduce them
* to a decimated subset for a given range */
protected _customFunc: IXYXSimpleDecimationFunction;
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
/** the list of values in the bucket */
protected _decimatedValues: IXYValue[];
constructor();
/**
* construct a generic decimator using a custom user function
*
* @param xValueToCoord converts the x value to a GUI x coordinate
* @param yValueToCoord converts the y value to a GUI y coordinate
* @param decimationFunc convert a list of data to a for rendering smaller list
*/
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* Returns the name of this decimator
*/
getName(): string;
/**
* Returns the decimated list of buckets
*/
getValues(): IXYValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, inputValues: IBuffer<IXYValue>): IXYValue[];
}
/** used to compute the min values for a set of data */
export class MinPointDecimator extends CustomPointXYDecimator {
static KEY: string;
constructor();
}
/** used to compute the avg values for a set of data */
export class AvgPointDecimator extends CustomPointXYDecimator {
static KEY: string;
constructor();
}
/** used to compute the min values for a set of data */
export class MaxPointDecimator extends CustomPointXYDecimator {
static KEY: string;
constructor();
}
/**
* Data decimation to fit information to onto the graph.
*
* This class divides the x-Axis time range into a set of buckets. Each
* bucket provides the average of the values, the minimum & maximum
* values, and the values upon entry & exit.
* It assumes that the DB values are increase over the time.
*/
export class XYPointDecimator extends CustomPointXYDecimator {
static KEY: string;
constructor();
}
/**
* this class allows a decimation function to be passed in to allow for
* generic decimation
*/
export class CustomContinuousXYDecimator implements IXYDecimator {
/** this function should take a set of buckets and reduce them
* to a decimated subset for a given range */
protected _key: string;
protected _name: string;
/** this function should take a set of buckets and reduce them
* to a decimated subset for a given range */
protected _customFunc: IXYXSimpleDecimationFunction;
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
/** the list of values in the bucket */
protected _decimatedValues: IXYValue[];
constructor();
/**
* construct a generic decimator using a custom user function
*
* @param xValueToCoord converts the x value to a GUI x coordinate
* @param yValueToCoord converts the y value to a GUI y coordinate
* @param decimationFunc convert a list of data to a for rendering smaller list
*/
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* Returns the name of this decimator
*/
getName(): string;
/**
* Returns the decimated list of buckets
*/
getValues(): IXYValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, inputValues: IBuffer<IXYValue>): IXYValue[];
}
/** used to compute the avg values for a set of data */
export class AvgContinuousDecimator extends CustomContinuousXYDecimator {
static KEY: string;
constructor();
}
/** this is a helper function class that computes the summed values for each
* Y state per each X bucket
*/
export function sumMultiXYSeriesValues(_xValueToCoord: (value: any) => number, _xCoordToValue: (value: any) => number, _yValueToCoord: (value: any) => number, xStart: number, xEnd: number, values: IBuffer<IXYValue>[]): any[][];
/** class that computes the summed values for each Y state per each X bucket */
export class SummedValueMultiXYSeriesDecimator implements IXYStackedDecimator {
static KEY: string;
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
/** the list of values in the bucket */
protected _decimatedValues: IXYValue[][];
constructor();
/**
* construct a generic decimator using a custom user function
*
* @param xValueToCoord converts the x value to a GUI x coordinate
* @param yValueToCoord converts the y value to a GUI y coordinate
* @param decimationFunc convert a list of data to a for rendering smaller list
*/
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* Returns the decimated list of buckets
*/
getName(): string;
/**
* Returns the decimated list of buckets
*/
getValues(): IXYValue[][];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IXYValue>[]): IXYValue[][];
}
/** class that computes the residency values for each Y state per each X bucket.
* This means the sum of all values within an output bucket is 100.
*/
export class ResidencyDecimator extends SummedValueMultiXYSeriesDecimator {
static KEY: string;
constructor();
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* Returns the decimated list of buckets
*/
getName(): string;
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IXYValue>[]): IXYValue[][];
}
/** class that computes the summed Y value per each X bucket */
export class SummedValueXYSeriesDecimator implements IXYDecimator {
static KEY: string;
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
/** the list of values in the bucket */
protected _decimatedValues: IXYValue[];
constructor();
/**
* construct a generic decimator using a custom user function
*
* @param xValueToCoord converts the x value to a GUI x coordinate
* @param yValueToCoord converts the y value to a GUI y coordinate
* @param decimationFunc convert a list of data to a for rendering smaller list
*/
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the name of this decimator
*/
getKey(): string;
/**
* Returns the name of this decimator
*/
getName(): string;
/**
* Returns the decimated list of buckets
*/
getValues(): IXYValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IXYValue>): IXYValue[];
}
/**
* Internally used class for the array of values
*/
export class NEWSDecimationValue extends CandlestickValue implements INEWSDecimationValue {
y: any;
/** number of samples that contributed to this bucket */
_bucketPts: number;
/**
* Construct a DecimationValue instance
*
* @param value - an XYValue to initialize the decimation value
*/
constructor(x?: any);
}
/**
* Data decimation to fit information to onto the graph.
*
* This class divides the x-Axis time range into a set of buckets. Each
* bucket provides the average of the values, the minimum & maximum
* values, and the values upon entry & exit.
* It assumes that the DB values are increase over the time.
*/
export class NEWSBaseDecimator implements IDecimator {
/** an unique identifier for this decimator */
protected _key: string;
/** The buckets we're accumlating */
protected _buckets: NEWSDecimationValue[];
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
getName(): string;
/**
* Get the accumulated buckets
*
* @returns the accumulated buckets
*/
getValues(): NEWSDecimationValue[];
/**
* Bucket dumper
*/
_dumpBucket(firstTimeStamp: number, bucket: NEWSDecimationValue, valuesInBucket: number): string;
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, inputValues: IBuffer<IXYValue>): NEWSDecimationValue[];
}
/** this class takes a series x, y points and using for each X bucket provides
* the Y entry/exit/min/max/average for that X bucket
*/
export class NEWSPointDecimator extends NEWSBaseDecimator {
static KEY: string;
constructor();
protected createNewBucket(decimatedValue: NEWSDecimationValue, value: IXYValue): void;
/**
* Add an x/y value pair to this value. Both the time (x) and
* value (y) are added to this point/bucket
*
* @param dbPoint - The x/y value pair to add to this value.
*/
protected addToBucket(decimatedValue: NEWSDecimationValue, value: IXYValue): void;
protected finalizeBucket(decimatedValue: NEWSDecimationValue, pointsInBucket?: number): void;
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, inputValues: IBuffer<IXYValue>): NEWSDecimationValue[];
}
/** this class takes a series x, y points and using for each X bucket provides
* the Y entry/exit/min/max/average for that X bucket
*/
export class NEWSStateDecimator extends NEWSBaseDecimator {
static KEY: string;
protected _weightedSums: {
[index: string]: number;
};
protected _prevX: number;
protected _isYObject: boolean;
protected _states: string[];
constructor(states?: string[]);
protected createNewBucket(decimatedValue: NEWSDecimationValue, value: IXYValue): void;
protected addToStateValueToBucket(state: string, value: number): void;
protected addToBucket(decimatedValue: NEWSDecimationValue, value: IXYValue): void;
protected finalizeBucket(decimatedValue: NEWSDecimationValue, pointsInBucket?: number): void;
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, inputValues: IBuffer<IXYValue>): NEWSDecimationValue[];
}
export class FlameChartRectLimitDecimator implements IFlameChartDecimator {
static KEY: string;
protected _data: IFlameChartValue[];
protected _rectLimit: number;
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): IFlameChartValue[];
setRectLimit(rectLimit: number): IFlameChartDecimator;
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IFlameChartValue[]>): IFlameChartValue[];
}
/** this decimator merges the rectangles in a flame chart to combine
* identical rectangles that are touching on a left/right pixel basis so
* we can merge them for rendering
*/
export class FlameChartMergeRectDecimator implements IFlameChartDecimator {
static KEY: string;
protected _data: IFlameChartValue[];
protected _rectLimit: number;
protected _minRectDelta: number;
protected _userPixelFunction: (IFlameChartValue: any) => IFlameChartValue;
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): IFlameChartValue[];
/**
* Set the minimum width of a rectangle. If there is multiple trace points
* within the the minimum width then the data is merged together into
* a single rectangle. Once all data in a rectangle is merged then we call
* the [setUserPixelFunction] callback so the the user can modify the value
* to be rendered if needed
*
* @param width the minimum width of a pixel in which data is grouped together
*/
setPixelWidth(width: number): FlameChartMergeRectDecimator;
setUserPixelFunction(cb: (IFlameChartValue: any) => IFlameChartValue): void;
/**
* used to generate a list of all rects that could be drawn sorted by duration
*/
protected mergeRects(values: IFlameChartValue[][]): IFlameChartValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IFlameChartValue[]>): IFlameChartValue[];
}
/**
* Takes ITraceValue data and for each bucket returns a residency value
* by ITracevalue.name. This means the sum of all values within an output bucket is 100.
*/
export class TraceResidencyDecimator implements ITraceResidencyDecimator {
static KEY: string;
protected _decimatedValues: IXYValue[][];
protected _states: string[];
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number, states: string[]): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): IXYValue[][];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<ITraceValue>): IXYValue[][];
}
/**
* Takes ITraceValue data and for each bucket returns a sum by ITracevalue.name.
* This means the sum of all values within an output bucket is 100.
*/
export class TraceStateDecimator implements ITraceStateDecimator {
static KEY: string;
protected _decimatedValues: INEWSDecimationValue[];
protected _states: string[];
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number, states: string[]): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): INEWSDecimationValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<ITraceValue>): INEWSDecimationValue[];
}
/**
* For a marker layer just removes markers that have the same X value
*/
export class SimpleMarkerDecimator implements IDecimator {
static KEY: string;
protected _data: ITraceValue[];
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): ITraceValue[];
mergeMarkers(values: ITraceValue[]): ITraceValue[];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<ITraceValue>): ITraceValue[];
}
/** */
export class XYHeatMapDecimator implements IXYStackedDecimator {
static KEY: string;
/** this function is used to map the input xyValues to x scaled values*/
protected _xValueToCoord: (value: any) => number;
/** this function is used to map the revert xyValues from x scaled values*/
protected _xCoordToValue: (value: any) => number;
/** this function is used to map the input xyValues to y scaled values*/
protected _yValueToCoord: (value: any) => number;
/** the list of values in the bucket */
protected _decimatedValues: IXYValue[][];
constructor();
/**
* construct a generic decimator using a custom user function
*
* @param xValueToCoord converts the x value to a GUI x coordinate
* @param yValueToCoord converts the y value to a GUI y coordinate
* @param decimationFunc convert a list of data to a for rendering smaller list
*/
initialize(xValueToCoord: (value: any) => number, xCoordToValue: (value: any) => number, yValueToCoord: (value: any) => number): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* Returns the decimated list of buckets
*/
getName(): string;
/**
* Returns the decimated list of buckets
*/
getValues(): IXYValue[][];
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(xStart: number, xEnd: number, values: IBuffer<IXYValue>[]): IXYValue[][];
}
export let InternalDecimatorMap: {
[index: string]: IDecimator;
};
export let MAX_DISCRETE_WIDTH: number;
export class ScalingInfo implements IScalingInfo {
baseScale: IScalar;
scalars: IScalar[];
constructor(scalar?: number, units?: string, maxRange?: number);
/**
* Get the unit string
*
* @return - the unit string
*/
getBaseUnit(): string;
/**
* Get the base scalar
*
* @return - the base scalar
*/
getBaseScalar(): number;
/**
* add a new range
*/
addScalar(scalar: IScalar): void;
/**
* Get the scalar list
*
* @return - the scalar list
*/
getScalars(): IScalar[];
}
export function getScalar(info: IScalingInfo, range: number): IScalar;
/**
* Provides basic functionality (getters & setters) for an axis. This
* class should not be used directly Classes should be derived from this one
* to implement different types of axes.
*/
export class D3Axis implements IRenderedAxis {
protected cache: {
pixels: number;
domain: any[];
};
protected _formatter: (d: any) => string;
/**
* Create an axis
*
* @param renderAxis - the axis definition from the user
*/
constructor(svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, renderAxis: IAxis, rect: Rect);
/**
* get the width of the axis
*/
setRangePixels(pixels: number): D3Axis;
/**
* get the width of the axis
*/
getRangePixels(): number;
/**
* set the domain for this axis
*
* @param the domain of the axis
*/
setDomain(domain: any[], level?: number): D3Axis;
/**
* append to the domain values for this axis
*
* @param the domain values of to add
*/
appendDomain(newVals: any[], level?: number): D3Axis;
/**
* set the domain for this axis
*
*/
getDomain(level?: number): any[];
/**
* get axis levels, used only for nested banded axes
*/
getLevelCount(): number;
/**
* if you have a banded range there may be multiple bars per domain entry
*
*/
setKeysPerDomain(keyCount: number): void;
/**
* get the user axis
*/
getAxis(): IAxis;
getPosition(): Rect;
setPosition(pos: Rect): void;
getRenderedRect(): Rect;
/**
* get the d3 scale for the given level of this axis
*
* @return the d3 scale helper
*/
setScale(scale: d3.AxisScale<any>, level?: number): any;
/**
* get the d3 scale for the given level of this axis
*
* @return the d3 scale helper
*/
getScale(level?: number): any;
/**
* Map a value in the range (pixels) to the domain
*
* @param coordinate - The value in the range to be mapped to the domain
*
* @return - The value in the domain
*/
mapCoordinateToValue(coordinate: number): any;
/**
* set that the axis is banded based on inspection
*/
setBanded(isBanded: boolean): void;
/**
* Return whether axis is banded (for bar graphs) or not
* (for point graphs). Returns false for linear axes.
*
* @return - True if this is a banded ordinal axis
*/
isBanded(): boolean;
/**
* Sets the range maximum (assumes that the range minimum is 0).
* Creates the d3 scale and axis, completing the axis' initialization.
* Assumes that the domain has been set.
*
* @param pixels - The max range for the axis.
*
* @return - The axis instance
*/
commitRange(pixels: number): D3Axis;
saveState(): void;
render(): void;
}
export function getBoundedPixelValue(value: number, maxPixels: number): number;
/**
* Chart
*
* This class helps the user define a proper chart to pass to the renderer.
*/
export class Chart {
/**
* Help make sure the chart is set up correctly.
* This should be called before rendering the chart.
*
* This will try to create axes and associate data with them when needed.
*/
static finalize(chart: ICartesianChart): boolean;
static mergeCharts(category: string, title: string, chart1: ICartesianChart, chart2: ICartesianChart): ICartesianChart;
}
/** a helper class to render a group of charts together */
export class ChartGroup {
static handleChartUpdate(charts: ICartesianChart[], chartOptions: IOptions[], stateObj: any, legends?: ILegend[]): void;
static handleRenderOptionsUpdate(stateObj: any, baseOptions: IOptions, chartOptions: IOptions[]): void;
static handleRemoveChart(chart: IChart): void;
}
export interface ID3Chart {
getTitle(): string;
getOptions(): IOptions;
getElement(): UIElement;
getRenderer(): UIRenderer;
getTooltip(): CustomDivTooltip;
getContextMenuItems(): IContextMenuItem[];
getGraphGroup(): any;
getAnimateDuration(): number;
onHover: (event: IEvent) => boolean;
cursorEnter: () => boolean;
cursorMove: () => boolean;
cursorExit: () => boolean;
select: (event: IEvent) => void;
}
export class D3Chart extends SVGRenderer implements ID3Chart {
/** the d3 scale used for brushes and tooltips */
protected _scaleAxis: D3Axis;
/** Brush for this graph - Only defined if this graph can be zoomed */
_brush: Brush;
/** Tooltip div id */
protected _hoverLine: d3.Selection<d3.BaseType, {}, d3.BaseType, any>;
/** flag that determines whether to have a bottom handle.
* May be controlled by IOptions.disableResizeBottom or based on
* the data type in the chart
*/
protected _hasBottomHandle: boolean;
/** the tooltip object */
protected _brushTooltip: OneLineTooltip;
protected _xMinLimit: number;
protected _xMaxLimit: number;
protected _xMin: number;
protected _xMax: number;
/** this is used to prevent stack overflow from zoom behavior change in 5.10.x on */
protected _ignoreZoomHack: boolean;
onHover: (event: IEvent) => boolean;
cursorEnter: () => boolean;
cursorMove: () => boolean;
cursorExit: () => boolean;
protected _contextMenuItems: IContextMenuItem[];
/**
* Append the div for this graph to the parent div. The div we create
* will be filled when Render() is called
*
* @param parent - The div that will contain the div for this chart.
*
* @return - The chart instance
*/
constructor(element: UIElement, renderer: D3Renderer, parent: d3.Selection<any, any, d3.BaseType, any>);
getContextMenuItems(): IContextMenuItem[];
getTooltip(): CustomDivTooltip;
getTitle(): string;
getRenderer(): UIRenderer;
contextMenu(menu: IContextMenuItem[], opts?: any): (data: any, index: number) => void;
/**
* hover event
*
* @param element to fire the hover event on
* @param event the event to pass to the renderer
*/
cursorChange(event: IEvent): void;
protected onZoomChanged(event: IEvent): void;
protected updateZoomHelper(group: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xStart: number, xEnd: number, yStart: number, yEnd: number): void;
protected updateZoom(xStart: number, xEnd: number, yStart: number, yEnd: number): void;
/**
* zoom event
*
* @param element to fire the zoom event on
* @param event the event to pass to the renderer
*/
zoom(event: IEvent): void;
/**
* brush event
* @param event the event to pass to the renderer
*/
brush(event: IEvent): void;
getGraphGroup(): any;
/**
* get tooltip for the graph
*
* @return -The chart instance.
*/
getTooltipData(event: IEvent): ITooltipData[];
/**
* Fill the tooltip div with information about values in this chart.
*
* @param xPixelOffset - tooltip location
*/
protected populateTooltip(xPixelOffset: number, yPixelOffset: number): void;
protected configureZoomHelper(group: d3.Selection<d3.BaseType, {}, d3.BaseType, any>): void;
protected configureZoom(): void;
protected configureBrushHelper(group: d3.Selection<d3.BaseType, {}, d3.BaseType, any>): void;
/**
* configure our selection brush
*/
protected configureBrush(): void;
protected configureContextMenu(): void;
/**
* configure a tooltip to be rendered after rendering data
*/
protected configureTooltip(): void;
/** add a selection from all of the elements */
_focus(selection: any): void;
/** remove a selection from all of the elements */
_unfocus(selection: any): void;
/** add a selection from all of the elements */
_select(selection: any): void;
/** remove a selection from all of the elements */
_unselect(selection: any): void;
protected configureCursorTracking(): void;
static SERIES_RENDERERS: any[];
static register(seriesRenderer: any): void;
createHandles(): void;
createLayout(): void;
protected addHoverline(): void;
/**
* Render the graph
*
* @param the options to render
*/
render(options?: IOptions): void;
}
export function createDecimatorWorker(decimator: any, xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis, values: any, names: any, resolve: any, reject: any): any;
export class BoxPlotSeries extends BaseSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _data: ICandlestickValue[];
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
setData(layer: ILayer): void;
isYContinuousSeries(): boolean;
getCss(): ICss;
/** get all discrete x values */
getDiscreteXValues(): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
/** decimate the data for the series or series group
* @param xScale function to scale from values to x coord
* @param yScale function to scale from values to y coord
*/
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
render(): void;
}
export class FlameChartSeries extends BaseSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _data: ITraceValue[] | IStackLayer[];
protected _backgroundData: IMinMaxValue[];
protected _decimator: IFlameChartDecimator;
protected _layer: ITraceValueLayer;
protected _worker: Worker;
protected _pixi: PIXI.Renderer;
protected _pixiHelper: PIXIHelper;
protected _allRects: IFlameChartValue[][];
protected getDataKey: (d: any) => number | string;
protected getDataName: (d: any) => string;
protected getDataStart: (d: any) => number;
protected getDataDuration: (d: any) => number;
protected _minHeight: number;
protected _stackHeight: number;
protected getEventDataValue(value: IFlameChartValue): ITraceValue | ITraceValue[];
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
setData(layer: ILayer): void;
protected getDecimationName(): string;
isYContinuousSeries(): boolean;
getCss(): ICss;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
/** decimate the data for the series or series group
* @param xAxis representation of x-axis
* @param yAxis representation of y-axis
*/
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
/** get the minimum graph height */
getRequiredHeight(): number;
protected _selection: ITraceValue;
protected configureSegmentInteraction(elem: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, value?: IFlameChartValue): void;
protected getSegmentClasses(d: any): string;
protected renderBackground(): void;
render(): void;
}
/** render all of the data in the series
* @param svg the svg to draw the data in
*/
export class BaseHeatMap extends BaseSeries implements ICartesianSeriesPlugin {
protected _selectionClasses: string;
protected _classes: string;
protected _worker: Worker;
protected _decimator: any;
protected _selection: any;
protected _pixi: PIXI.Renderer;
protected _pixiHelper: PIXIHelper;
protected _rectTexture: PIXI.Texture;
getXMinMax(): number[];
getYMinMax(): number[];
isXContinuousSeries(): boolean;
isYContinuousSeries(): boolean;
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
setData(layer: ILayer, index?: number): void;
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
/** return the name of the series */
getName(): string;
protected initializeClasses(): void;
protected applyStyles(): void;
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
/** maps a data value to a pixel value */
protected xMap: (d: any) => number;
protected yMap: (d: any) => number;
protected configureTooltip(rect: any): void;
render(): void;
}
export class XYHeatMapSeries extends BaseHeatMap implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _data: IXYSeries;
protected _values: IBuffer<IXYValue>;
protected _layer: IXYLayer;
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
/** exists so grouped XY can set the data instead of assuming it's*/
setData(layer: ILayer, index?: number): void;
protected applyStyles(): void;
protected getDecimationName(): string;
/** return the name of the series */
getName(): string;
isXContinuousSeries(): boolean;
/** check if this series is continuous */
isYContinuousSeries(): boolean;
getCss(): ICss;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** decimate the data for the series or series group
* @param xAxis representation of x-axis
* @param yAxis representation of y-axis
*/
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
/** fill in tooltip information */
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
}
export class TraceHeatMapSeries extends BaseHeatMap implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _values: IBuffer<ITraceValue>;
protected _layer: ITraceValueLayer;
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
/** exists so grouped XY can set the data instead of assuming it's*/
setData(layer: ILayer, index?: number): void;
getName(): string;
protected getDecimationName(): string;
isXContinuousSeries(): boolean;
/** check if this series is continuous */
isYContinuousSeries(): boolean;
getCss(): ICss;
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** decimate the data for the series or series group
* @param xAxis representation of x-axis
* @param yAxis representation of y-axis
*/
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
/** fill in tooltip information */
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
}
export class TraceSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _d3Chart: ID3Chart;
protected _layer: ITraceValueLayer;
protected _data: ITraceValue[];
protected _d3SeriesList: XYSeries[];
protected _isXContinuous: boolean;
protected _worker: Worker;
protected _svg: any;
protected _xAxis: D3Axis;
protected _yAxis: D3Axis;
protected _states: string[];
protected _isStackedArea: boolean;
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
setData(layer: ITraceValueLayer): void;
getName(): string;
getMaxNameLength(): number;
/** check if the x is continuous series */
isXContinuousSeries(): boolean;
/** check if the y is continuous series */
isYContinuousSeries(): boolean;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
/** get the minimum graph height */
getRequiredHeight(): number;
/** get the x scaling info for this series */
getXScalingInfo(): IScalingInfo;
/** get the y scaling info for this series */
getYScalingInfo(): IScalingInfo;
/** decimate the data for the series or series group */
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
/** fill in tooltip information */
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
/** handle on focus events if we want to */
focus(selection: string): void;
/** handle on unfocus events if we want to */
unfocus(selection: string): void;
/** handle on focus events if we want to */
select(selection: string): void;
/** handle on unfocus events if we want to */
unselect(selection: string): void;
/** render all of the data in the series
* @param svg the svg to draw the data in
* @param yOffsets for each data point in this element
*/
render(yOffsets?: number[]): void;
}
export class FunctionSeries extends XYSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _data: IXYSeries;
protected _colors: {
[index: string]: string;
};
protected _classes: string;
protected _layer: IXYLayer;
protected _worker: Worker;
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
setData(layer: ILayer): void;
/** check if this series is continuous */
isYContinuousSeries(): boolean;
getCss(): ICss;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
}
export class MinMaxSeries extends BaseSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _data: IMinMaxValue[];
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
setData(layer: ILayer): void;
isYContinuousSeries(): boolean;
getCss(): ICss;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
/** decimate the data for the series or series group
* @param xScale function to scale from values to x coord
* @param yScale function to scale from values to y coord
*/
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
render(): void;
}
export class RectSeries extends BaseSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _data: IRectSeries;
protected _values: IBuffer<IXYRect>;
protected _classes: string;
protected _layer: IXYLayer;
protected _description: any;
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
setData(layer: ILayer): void;
protected applyStyles(): void;
/** return the name of the series */
getName(): string;
/** check if this series is continuous */
isYContinuousSeries(): boolean;
getCss(): ICss;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
/** decimate the data for the series or series group
* @param xAxis representation of x-axis
* @param yAxis representation of y-axis
*/
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
/** fill in tooltip information */
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
/** maps a data value to a pixel value */
protected xMap: (d: any) => number;
protected yMap: (d: any) => number;
/** render all of the data in the series
* @param svg the svg to draw the data in
*/
render(): void;
}
export class MarkerSeries extends BaseSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _data: ITraceValue[];
protected _decimator: any;
protected _layer: IMarkerLayer;
protected _worker: Worker;
protected getDataKey: (d: any) => number | string;
protected getDataName: (d: any) => string;
protected getDataStart: (d: any) => number;
protected getDataDuration: (d: any) => number;
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis);
setData(layer: ILayer): void;
protected getDecimationName(): string;
isYContinuousSeries(): boolean;
getCss(): ICss;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
/** decimate the data for the series or series group
* @param xAxis representation of x-axis
* @param yAxis representation of y-axis
*/
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
render(): void;
}
export class VerticalBarSeries extends BaseSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _data: ISummaryValue[];
protected _colors: {
[index: string]: string;
};
protected _hasLevels: boolean;
protected _stackData: any[];
protected _levelKeys: {
[index: string]: boolean;
}[];
protected _levelKeyList: string[][];
protected _leafData: {
[index: string]: {
[index: string]: number;
}[];
};
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
setData(layer: ILayer): void;
isYContinuousSeries(): boolean;
getCss(): ICss;
getMaxName(): string;
getLevelKeys(): string[][];
formatDataPerLevel(): void;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
getBarsPerDomain(isStacked: boolean): number;
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
/** decimate the data for the series or series group
* @param xAxis representation of x-axis
* @param yAxis representation of y-axis
*/
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
getTooltipMetricHelper(tooltipList: ITooltipData[], elem: UIElement, event: IEvent, value: ISummaryValue): void;
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
/** render all of the data in the series
* @param svg the svg to draw the data in
*/
render(): void;
}
export class XYSeries extends BaseSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _data: IXYSeries;
protected _values: IBuffer<IXYValue>;
protected _colors: {
[index: string]: string;
};
protected _classes: string;
protected _selectionClasses: string;
protected _layer: IXYLayer;
protected _worker: Worker;
protected _pixi: PIXI.Renderer;
protected _pixiHelper: PIXIHelper;
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
protected initializeClasses(): void;
/** exists so grouped XY can set the data instead of assuming it's*/
setData(layer: ILayer, index?: number): void;
protected applyStyles(): void;
protected getDecimationName(): string;
protected getInterpolateType(): d3.CurveFactory;
/** return the name of the series */
getName(): string;
/** check if this series is continuous */
isYContinuousSeries(): boolean;
getCss(): ICss;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
/** decimate the data for the series or series group
* @param xAxis representation of x-axis
* @param yAxis representation of y-axis
*/
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
protected getTooltipText(value: any): any;
/** fill in tooltip information */
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
protected getAngle(start: IXYValue, end: IXYValue): number;
protected getAnimateDuration(): number;
protected renderArrows(indices: number[], color: string): void;
protected optimizeLinePath(yFunction: (index: number) => number): any[];
protected renderLines(color: string): void;
protected optimizeAreaPath(y0: (index: number) => number, y1: (index: number) => number): any[];
protected renderAreas(indices: number[], color: string): void;
protected renderCirclePoints(indices: number[], color: string, radius: number): void;
/** maps a data value to a pixel value */
protected xMap: (d: any) => number;
protected yMap: (d: any) => number;
/** maps a data value to a pixel value using the index to the element in the
* outputData array as the input. This is needed for stacking the data */
protected xIndexMap: (d: any) => number;
protected yIndexMap: (d: any) => number;
protected yIndexPreStackMap: (d: any) => number;
protected yIndexPostStackMap: (d: any) => number;
/** render all of the data in the series
* @param svg the svg to draw the data in
* @param yOffsets for each data point in this element
*/
render(yOffsets?: number[]): void;
getRenderedYRange(): number[];
}
export class XYGroupSeries implements ICartesianSeriesPlugin {
static canRender(layer: ILayer): boolean;
protected _d3Chart: ID3Chart;
protected _layer: ILayer;
protected _data: IXYSeries[];
protected _d3SeriesList: XYSeries[];
protected _isXContinuous: boolean;
protected _worker: Worker;
protected _svg: any;
protected _xAxis: D3Axis;
protected _yAxis: D3Axis;
constructor(chart: ID3Chart, layer: ILayer, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean);
setData(layer: ILayer): void;
getName(): string;
getMaxName(): string;
/** check if the x is continuous series */
isXContinuousSeries(): boolean;
/** check if the y is continuous series */
isYContinuousSeries(): boolean;
/** get all discrete x values */
getDiscreteXValues(isStacked: boolean): string[];
/** get all discrete y values */
getDiscreteYValues(): string[];
/** get x min max values for the object */
getXMinMax(): number[];
/** get y min max values for the object */
getYMinMax(): number[];
/** get the minimum graph height */
getRequiredHeight(): number;
/** get the x scaling info for this series */
getXScalingInfo(): IScalingInfo;
/** get the y scaling info for this series */
getYScalingInfo(): IScalingInfo;
/** decimate the data for the series or series group */
decimateData(xStart: number, xEnd: number, xAxis: D3Axis, yAxis: D3Axis): Promise<any>;
/** fill in tooltip information */
getTooltipMetrics(elem: UIElement, event: IEvent): ITooltipData[];
/** get information for the legend to render */
getLegendInfo(): ILegendItem[];
/** handle on select events if we want to */
focus(selection: string): void;
/** handle on deselect events if we want to */
unfocus(selection: string): void;
/** handle on select events if we want to */
select(selection: string): void;
/** handle on deselect events if we want to */
unselect(selection: string): void;
/** render all of the data in the series
* @param svg the svg to draw the data in
* @param yOffsets for each data point in this element
*/
render(yOffsets?: number[]): void;
getRenderedYRange(): number[];
}
export class D3Pie extends D3Polar {
protected _arcData: IPolarSegment[];
protected _renderData: IPolarSegment[];
getTooltipData(event: IEvent): ITooltipData[];
protected getLegendData(): any[];
protected renderData(): void;
/**
* Render the given element
*
* @param the options to render
*/
render(options: IOptions): void;
}
export class SunburstDecimator implements ISunburstDecimator {
static KEY: string;
protected _data: ISunburstDecimationInfo;
protected _sortedArcs: IPolarSegment[];
protected _maxDepth: number;
protected _arcLimit: number;
constructor();
reset(): void;
/**
* Returns the key of this decimator
*/
getKey(): string;
/**
* the name of this decimation scheme
*/
getName(): string;
/**
* Returns the decimated list of data
*/
getValues(): ISunburstDecimationInfo;
/**
* used to generate a list of all rects that could be drawn sorted by duration
*/
protected getArcs(root: ITreeNode): IPolarSegment[];
protected decimateArcs(root: ITreeNode, arcLimit?: number): void;
protected generateBackground(root: ITreeNode): void;
setArcLimit(arcLimit: number): ISunburstDecimator;
/**
* Values to be decimated
*
* @param xStart - start time of the region
* @param xEnd - start time of the region
* @param values - Values to be decimated.
*/
decimateValues(root: ITreeNode): ISunburstDecimationInfo;
}
export class D3Sunburst extends D3Polar {
protected static TWO_PI: number;
protected _decimator: ISunburstDecimator;
constructor(element: UIElement, renderer: D3Renderer, parent: d3.Selection<any, any, d3.BaseType, any>);
createLayout(): void;
protected getLegendData(): IPolarSegment[];
protected configureHoverLine(): void;
protected configureTooltip(): void;
protected renderData(): void;
/**
* Render the given element
*
* @param the options to render
*/
render(options: IOptions): void;
}
export class D3Radar extends D3Polar {
/**
* @deprecated ('Deprecated since 1.14.0 in favor of focus. Will be removed in 2.x')
* hover event
*
* @param event the event to pass to the renderer
*/
hover(event: IEvent): void;
/**
* bring an item into focus
*
* @param event the event to focus on
*/
focus(event: IEvent): void;
getTooltipData(event: IEvent): ITooltipData[];
protected configureTooltip(target?: d3.Selection<d3.BaseType, any, d3.BaseType, any>, value?: ISummaryValue): void;
protected getLegendData(): any[];
/**
* Render the given element
*/
protected renderData(): void;
}
export function getTextWidth(text: string, font: string, size: string): any;
export class UIElementRenderer {
protected _options: IOptions;
protected _colorMgr: ColorManager;
/** the original user defined element */
protected _element: UIElement;
/**
* get the options the renderer is using for the given element
*
* @param the element to invalidate
*/
getOptions(): IOptions;
/**
* get the colors the renderer is using for the given element
*
* @param the element to invalidate
*/
getColorManager(): ColorManager;
setColorManager(colorMgr: ColorManager): void;
}
export class D3Renderer implements UIRenderer {
static register(type: UIType, renderer: Object): void;
/** The parent id of the div */
protected _parent: d3.Selection<d3.BaseType, any, d3.BaseType, any>;
protected _parentId: string;
protected _colorMgr: ColorManager;
/** maps to render elements if multiple renders are used
* through this interface */
protected _rendererMap: WeakMap<UIElement, SVGRenderer>;
onRender: (elem: UIElement, options: IOptions) => void;
constructor(parentId?: string, colorMgr?: ColorManager);
setOnRenderCallback(callback: (elem: UIElement, options: IOptions) => void): void;
clearDiv(parentDiv: Element): void;
setDiv(parentDiv: Element): void;
/**
* Get the css actually rendered. This is useful for legend swatches
* and the like.
*
* @param the element to get the rendered CSS information for
*
* @return The css rendered, or undefined if called before the chart is
* rendered
*/
getRenderedCss(element: UIElement): Css;
/**
* @deprecated ('Deprecated since 1.14.0 in favor of focus. Will be removed in 2.x')
* hover event
*
* @param element to fire the hover event on
* @param event the event to pass to the renderer
*/
hover(element: UIElement, event: IEvent): void;
/**
* bring an item into focus
*
* @param element to fire the focus event on
* @param event the event to pass to the renderer
*/
focus(element: UIElement, event: IEvent): void;
/**
* select an item
*
* @param element to fire the select event on
* @param event the event to pass to the renderer
*/
select(element: UIElement, event: IEvent): void;
/**
* zoom event
*
* @param element to fire the zoom event on
* @param event the event to pass to the renderer
*/
zoom(element: UIElement, event: IEvent): void;
/**
* tooltip the element.
*
* @param renderer an IRenderer object that has the tooltip
* @param event the event to pass to the renderer
*/
getTooltipData(element: UIElement, event: IEvent): ITooltipData[];
/**
* hover event
*
* @param element to fire the hover event on
* @param event the event to pass to the renderer
*/
cursorChange(element: UIElement, event: IEvent): void;
/**
* brush event
*
* @param element to fire the brush event on
* @param event the event to pass to the renderer
*/
brush(element: UIElement, event: IEvent): void;
protected configureElement(element: UIElement): void;
/**
* Render the given element
*
* @param the element to render
*/
render(element: UIElement, options?: IOptions): void;
/**
* invalidate the given element
*
* @param the element to invalidate
*/
invalidate(element: UIElement, options?: IOptions): void;
setColorManager(colorManager: ColorManager): void;
/**
* get color manager for this renderer
*/
getColorManager(): ColorManager;
/**
* free the resources used by the renderer for this element
*/
destroy(element: UIElement): void;
/**
* get the options the renderer is using for the given element
*
* @param the element to invalidate
*/
getOptions(element: UIElement): IOptions;
}
export let D3ChartRenderer: typeof D3Renderer;
export let D3GraphRenderer: typeof D3Renderer;
export interface IGraph extends UIElement {
title?: string;
}
/** a node in a connected graph */
export interface IGraphNode {
/** the key of the node that is used by the
* by the [[SelectionHelper]] and [[ColorManager]]
*/
key: string;
/** specifies list of larger groups this node is part of. Used
* by the [[SelectionHelper]] and [[ColorManager]]
*/
type?: string[];
}
/** a line between two nodes in a connected graph */
export interface IGraphLink {
/** the key of the node that starts the connection */
from: string | IGraphNode;
/** the key of the node that ends the connection */
to: string | IGraphNode;
/** a value associated with the link */
value?: number;
}
/** a set of links and nodes to render as a connected graph */
export interface IConnectedGraph extends IGraph {
links: IGraphLink[];
nodes?: IGraphNode[];
/** add a legend definition to render */
legend?: ILegend;
/** the context menu definitions for when the user right clicks */
contextMenuItems?: IContextMenuItem[];
/** the context menu definitions for when the user finishes a brush action */
brushContextMenuItems?: IContextMenuItem[];
}
export enum LinkType {
Linear = 1,
Elbow = 2,
/** adds an arrow from the input to the output */
Directional = 4,
/** adds an arrow from the input to the output and vice versa */
Bidirectional = 8,
/** render the link as a curve */
Curve = 16
}
/** common diagram link type so we can have one common rendering function */
export interface IDiagramLink extends IGraphLink {
/** how to render the link */
linkType?: LinkType;
/** width of this link */
width?: number;
/** color for this link */
color?: string;
/** type of link which may be used for coloring */
type?: string[];
}
export interface IHierarchyGraphLink extends IDiagramLink {
/** an id on the from node for links that want to share the link point on the node */
fromConnectionPoint?: string;
/** an id on the to node for links that want to share the link point on the node */
toConnectionPoint?: string;
}
/** a node in a connected graph */
export interface IHierarchyNode extends IGraphNode {
/** specifies an image associated with this node */
image?: string;
/** specifies an image associated with this node */
imageHeight?: number;
/** specifies an image associated with this node */
imageWidth?: number;
/** Label for this node, use if label is duplicated */
label?: string;
/** any center aligned nodes */
center?: IHierarchyNode[];
/** specifies top aligned nodes */
top?: IHierarchyNode[];
/** specifies bottom aligned nodes */
bottom?: IHierarchyNode[];
/** specifies bottom aligned nodes */
left?: IHierarchyNode[];
/** specifies bottom aligned nodes */
right?: IHierarchyNode[];
/** whether to render the border around the node or not */
hideBorder?: boolean;
/** whether to show a tooltip on this element or not */
hideTooltip?: boolean;
/** whether to show the image and label of this element or not */
hideImageLabel?: boolean;
/** disable hover events */
disableHover?: boolean;
/** this data may be added by the rendering algorithm */
parent?: IHierarchyNode;
depth?: number;
}
/** implement this interface if you want to adjust what nodes to draw */
export interface IGraphNodeDecimator {
/**
* @param node - node to test if it passes the decimator
* @returns true if the node should be rendered
*/
isVisible: (node: IHierarchyNode) => boolean;
}
/** a set of links and nodes to render as a connected graph */
export interface IHierarchyGraph extends IGraph {
links: IHierarchyGraphLink[];
nodes?: IHierarchyNode;
/** add a legend definition to render */
legend?: ILegend;
/** the context menu definitions for when the user right clicks */
contextMenuItems?: IContextMenuItem[];
/** a decimator used to control graph node visibility */
decimator?: IGraphNodeDecimator;
}
export enum NodeType {
/** render port nodes as a circle */
NodeSimple = 0,
/** render port nodes as a rectangle putting the type as the title */
NodeRectangle = 1
}
/** a node in a port diagram */
export interface IPortDiagramNode extends IGraphNode {
x: number;
y: number;
ports: {
left?: {
key: string;
}[];
right?: {
key: string;
}[];
top?: {
key: string;
}[];
bottom?: {
key: string;
}[];
};
renderType?: NodeType;
width?: number;
height?: number;
}
export interface IPortDiagramLink extends IDiagramLink {
/** an id on the from node for links that want to share the link point on the node */
fromPort: string;
/** an id on the to node for links that want to share the link point on the node */
toPort: string;
}
/** a set of links and nodes to render as a connected graph */
export interface IPortDiagram extends IConnectedGraph {
links: IPortDiagramLink[];
nodes: IPortDiagramNode[];
decimator?: (node: any) => boolean;
/** global control of what types of render nodes to use */
nodeRenderType?: NodeType;
/** disable port rendering for performance reasons if needed */
disablePortRendering?: boolean;
}
export class D3ForceGraph extends D3SimpleGraph {
constructor(element: UIElement, renderer: D3Renderer, parent: d3.Selection<any, any, d3.BaseType, any>);
render(options: IOptions): void;
}
export class D3SankeyDiagram extends D3ConnectedGraphSVG {
constructor(element: UIElement, renderer: D3Renderer, parent: d3.Selection<any, any, d3.BaseType, any>);
protected renderLinks(graphArea: d3.Selection<any, any, d3.BaseType, any>): d3.Selection<any, any, d3.BaseType, any>;
protected renderNodes(graphArea: d3.Selection<any, any, d3.BaseType, any>, dragMove: (node: any) => void): d3.Selection<any, any, d3.BaseType, any>;
render(options: IOptions): void;
}
export class D3HierarchyGraph extends D3ConnectedGraphSVG {
protected _margin: number;
protected _padding: number;
/** cache the decimator used for this graph */
protected _decimator: IGraphNodeDecimator;
/** this is where the elements are going to appear from relative from in the SVG */
protected _renderOrigin: {
x: number;
y: number;
};
protected _nodes: any;
constructor(element: UIElement, renderer: D3Renderer, parent: d3.Selection<any, any, d3.BaseType, any>);
static isNodeRendered(renderedNode: IRenderedDiagramNode): d3.Selection<any, any, d3.BaseType, any>;
/**
* configure the hover requirements for a node
*/
protected configureItemHover(elem: any, node: IRenderedDiagramNode): void;
/**
* helper function to traverse the node trees.
* Walks over the top/bottom/left/right/center children arrays and applies the
* callback function to those nodes
*/
static CHILDREN: string[];
/**
* render the hierarchical graph
*/
render(options: IOptions): void;
}
export interface IPortDiagramNodeRenderer {
def?: IPortDiagramNode;
renderer?: INodeRenderer;
}
export interface INodeRenderer extends IPortDiagramNodeRenderer {
updatePosition: (pos: {
dx: number;
dy: number;
}) => void;
getNode?: () => any;
renderNode: (options?: any) => any;
renderPort: (port: any, options?: any) => any;
configureNode: () => void;
getPortAreaRect: () => IRect;
}
export class D3PortDiagram extends UIElementRenderer {
_rendererManager: UIRenderer;
_renderer: any;
_parent: any;
_nodes: any;
_requiresLayout: boolean;
_renderedNodes: INodeRenderer[];
/** get the xy position of the start of the link */
getLinkStartXY: (link: IRenderedDiagramLink) => IXYValue;
/** get the xy position of the end of the link */
getLinkEndXY: (link: IRenderedDiagramLink) => IXYValue;
/** cache stuff for later, portMap allows links to find the right
* port to attached to by to/from. The ports array is just for rendering quickly
*/
_nodePortInfo: {
[index: string]: {
[index: string]: {
key: any;
index: number;
alignment: Alignment;
x: number;
y: number;
};
};
};
protected _options: IOptions;
constructor(element: UIElement, renderer: UIRenderer, parent: d3.Selection<any, any, d3.BaseType, any>);
/**
* @deprecated ('Deprecated since 1.14.0 in favor of focus. Will be removed in 2.x')
* hover event
*
* @param event the event to pass to the renderer
*/
hover(event: IEvent): void;
/**
* bring an item into focus
*
* @param event the event to focus on
*/
focus(event: IEvent): void;
/**
* select an item
*
* @param event the event to focus on
*/
select(event: IEvent): void;
cursorChange(event: IEvent): void;
/**
* brush event
*
* @param event the event to pass to the renderer
*/
brush(event: IEvent): void;
addPorts(node: INodeRenderer): void;
getColor(node: IPortDiagramNode): any;
getClasses(node: IPortDiagramNode): string;
addNode(node: INodeRenderer): void;
createRenderedLinks(): IRenderedDiagramLink[];
layout(nodes: INodeRenderer[], links: IRenderedDiagramLink[]): void;
render(options: IOptions): void;
invalidate: any;
}
export class D3PortDiagramSVG extends D3ConnectedGraphSVG {
protected _portDiagram: D3PortDiagram;
constructor(element: UIElement, renderer: UIRenderer, parent: d3.Selection<any, any, d3.BaseType, any>, portDiagram: D3PortDiagram);
render(options: IOptions): void;
}
export class D3PortDiagramPixi extends D3ConnectedGraphPixi {
protected _portDiagram: D3PortDiagram;
protected _renderedLinks: IRenderedDiagramLink[];
protected _nodeGraphics: GraphicsManager;
protected _portGraphics: GraphicsManager;
constructor(element: UIElement, renderer: UIRenderer, parent: d3.Selection<any, any, d3.BaseType, any>, portDiagram: D3PortDiagram);
_select(selection: string): void;
_unselect(selection: string): void;
render(options: IOptions): void;
}
export class D3SimpleGraph extends D3ConnectedGraphSVG {
constructor(element: UIElement, renderer: D3Renderer, parent: d3.Selection<any, any, d3.BaseType, any>);
protected renderLinks(graphArea: d3.Selection<any, any, d3.BaseType, any>): d3.Selection<any, any, d3.BaseType, any>;
protected renderNodes(graphArea: d3.Selection<any, any, d3.BaseType, any>, dragStart: (node: any) => void, dragMove: (node: any) => void, dragEnd: (node: any) => void): d3.Selection<any, any, d3.BaseType, any>;
render(options: IOptions): void;
}
export interface AbstractColDef {
/** The name to render in the column header */
headerName: string;
/** CSS class for the header */
headerClass?: string | string[] | ((params: any) => string | string[]);
}
export interface IColGroupDef extends AbstractColDef {
/** Columns in this group */
children: (IColDef | IColGroupDef)[];
}
export interface IColDef extends AbstractColDef {
/** The field of the row to get the cells data from */
field?: string;
/** If sorting by default, set it here. Set to 'asc' or 'desc' */
sort?: string;
/** Whether this column is pinned or not. */
pinned?: boolean | string;
/** The field where we get the tooltip on the object */
tooltipField?: string;
/** Tooltip for the column header */
headerTooltip?: string;
/** Initial width, in pixels, of the cell */
width?: number;
/** Min width, in pixels, of the cell */
minWidth?: number;
/** Max width, in pixels, of the cell */
maxWidth?: number;
/** Class to use for the cell. Can be string, array of strings, or function. */
cellClass?: string | string[] | ((cellClassParams: any) => string | string[]);
/** An object of css values. Or a function returning an object of css values. */
cellStyle?: {} | ((params: any) => {});
/** renderer used to render the cell information */
cellRenderer?: (params: any) => (HTMLElement | string);
/** called when a cell is clicked */
onCellClicked?: (event: IEvent) => void;
/** called when a cell is double clicked */
onCellDoubleClicked?: (event: IEvent) => void;
/** used to translate the data in the data set into the value shown to the user */
valueGetter?: (rowData: any) => void;
/** the context menu definitions for when the user right clicks */
contextMenuItems?: IContextMenuItem[];
/** whether the value is numerical and can be shown as a percentage */
canShowPercentage?: boolean;
/** the value is numerical and should be shown as a percentage by default */
showAsPercentage?: boolean;
}
export interface IGridOptions {
rowData?: any[];
columnDefs?: (IColDef | IColGroupDef)[];
gridClass?: string;
defaultColDef?: {
sortable?: boolean;
};
enableSingleKeyboardSelection?: boolean;
animateRows?: boolean;
api?: any;
/** called when a row is selected */
onRowSelected?: (event: IEvent) => void;
/**
* called when a row is clicked
*/
onRowClicked?: (event: IEvent) => void;
/**
* called when a row is double clicked
*/
onRowDoubleClicked?: (event: IEvent) => void;
/** used when there is a period in field data to ignore the dot */
suppressFieldDotNotation?: boolean;
/** the context menu definitions for when the user right clicks */
contextMenuItems?: IContextMenuItem[];
/** called after the grid is rendered */
onGridReady?: (event: any) => void;
/** the field to use for a selection */
selectionKey?: any;
/** auto scroll to make the row visible when a selection happens */
autoScrollToSelection?: boolean;
}
export interface IGrid extends UIElement {
type: UIType;
gridOptions: IGridOptions;
api?: {
select: (event: IEvent) => void;
hover: (event: IEvent) => void;
};
}
export class Column implements IColDef {
headerName: string;
field: string;
constructor(headerName: string, field: string);
}
export function percentCellRenderer(params: any): HTMLDivElement;
export function computeMaxAndPercentage(rowData: any, columns: IColDef[]): void;
export function valueCellRenderer(params: any): HTMLDivElement;
export function valueComparator(valueA: any, valueB: any, nodeA: any, nodeB: any, isInverted: any): number;
export let menuItemShowAsPercentage: {
title: string;
action: (elem: any, data: any, index: any) => void;
};
export let menuItemShowAsTotal: {
title: string;
action: (elem: any, data: any, index: any) => void;
};
export class AgGridRenderer implements UIRenderer {
onRender: (elem: UIElement, options: IOptions) => void;
/** maps to render elements if multiple renders are used
* through this interface */
private _rendererMap;
constructor(parent?: string, options?: {}, colorMgr?: ColorManager);
getColorManager(): any;
setOnRenderCallback(callback: (elem: UIElement, options: IOptions) => void): void;
/** update any options */
setOptions(options: any): void;
/** @deprecated ('Deprecated since 1.14.0 in favor of focus. Will be removed in 2.x') */
hover(element: UIElement, event: IEvent): void;
focus(element: UIElement, event: IEvent): void;
select(element: UIElement, event: IEvent): void;
setDiv(element: UIElement, div: Element): void;
/**
* Render the given element
*
* @param the element to render
*/
render(element: UIElement, options?: IOptions): void;
invalidate: (element: UIElement, options?: IOptions) => void;
/**
* free the resources used by the renderer for this element
*/
destroy(element: UIElement): void;
getOptions(): any;
}
/**
* Defines the callback for tooltip enter, leave and move functions.
*
* @param d - Usually the data associated with the item the mouse is over.
*
* @return - Return false on failure. If the tooltip enter callback returns
* false, the tooltip will not be displayed. The return value of other
* callbacks is ignored.
*/
export interface ITooltipCallback {
(d: any): boolean;
}
/**
* Defines a tooltip placement function. This interface is used internally
* to implement various tooltip placement algorithms.
*/
export interface ITooltipPlacementFunc {
(event: {
x: number;
y: number;
clientX: number;
clientY: number;
}): void;
}
/**
* The tooltip class provides a mechanism to display a tooltip, usually in
* response to the mouse entering some region.
*/
export class BaseTooltip {
/** the targets who this tooltip is listening to */
protected _targets: any[];
/** div containing the tooltip to be displayed */
protected _tooltipDiv: HTMLDivElement;
/** Function to be called when the mouse enters the target region */
protected _enterfunc: ITooltipCallback;
/** Function to be called when the mouse leaves the target region */
protected _leavefunc: ITooltipCallback;
/** Function to be called when the mouse moves in the target region */
protected _movefunc: ITooltipCallback;
/** Width of the tooltip div */
protected _tooltipWidth: number;
/** Height of the tooltip div */
protected _tooltipHeight: number;
/** Tooltip background color */
protected _tooltipBackgroundColor: string;
/** Tooltip font color */
protected _tooltipFontColor: string;
/** Tooltip font type */
protected _tooltipFontType: string;
/** Tooltip font size */
protected _tooltipFontSize: string;
/** Width of the browser window */
protected _windowWidth: number;
/** Height of the browser window */
protected _windowHeight: number;
/** ID for the timer used to delay appearance of the tooltip */
protected _timerId: number;
/** Additional pixels to offset the tooltip from the mouse */
protected _tooltipOffset: number;
/** Debugging aid - set to a unique value for each tooltip instance */
protected _counter: number;
/** Set if the caller has decided to disable the tooltip by calling Enabled() */
protected _disabled: boolean;
/** Value to set 'display' attribute to to to hide tooltip */
protected _hide: string;
/** Name for analytics events for this tooltip */
protected _analyticsName: string;
/** Seconds a tooltip should be visible. 0 Specifies that there is no timeout. */
protected _visibilityTimeoutSecs: number;
/** Time ID for the visibility timeout */
protected _visibilityTimerId: number;
/** Whether the leave function should be called when the tooltip is hidden. */
protected _visibilityTimeoutCallLeaveFunction: boolean;
/** Delay in milliseconds for showing the tooltip when the mouse enters the target region */
protected _lastShowTs: number;
/** Delay in milliseconds for showing the tooltip when the mouse enters the target region */
protected _delayMS: number;
/** Function to place the tooltip */
protected _tooltipPlacementFunc: ITooltipPlacementFunc;
/** Default delay for showing a tooltip (.5 second) */
protected static _defaultDelayMS: number;
/** Counter used to generate a unique value for each tooltip */
protected static _counter: number;
/** Flag whether we should always recalcuate the tooltip width */
protected _alwaysRecalcWidth: boolean;
/**
* Flag whether the tooltip should be shown to the left of the mouse.
*
* Only used by _PlaceTooltipLeftRight
*/
protected _tooltipLeftOfMouse: boolean;
/**
* Mouse enter function applied to the target. The mouse enter function
* handles calling an enter function, if one was specified, and delaying
* the display of the tooltip
*/
onMouseEnter: (d: any) => void;
/**
* Mouse leave function applied to the target. The mouse leave function
* cancels any pending timers, calls the exit function, if one was
* specified, and hides the tooltip.
*/
onMouseLeave: (d: any) => void;
/**
* Mouse move function applied to the target. The mouse move function
* calls the move function, if one was specifies, and then moves the
* tooltip div to keep in near the mouse cursor.
*/
onMouseMove: (d: any, pos?: any) => void;
/**
* Create at tooltip instance.
*
* @params tooltipDivId - The ID for the div that is to be filled with the
* tooltip information.
* @param tooltipStyle - css class that describes tooltip format. Defaults
* to tooltip-t.
*/
constructor(tooltipDivId: string, tooltipStyle?: string);
protected adjustVerticalPosition(top: number, bottom: number): void;
/**
* Tooltip placement routine to place the tooltip to the left of
* the mouse. Designed to be used for the chart value tooltip.
*/
protected placeTooltipLeft(event: any): void;
/**
* Tooltip placement routine to place the tooltip to the right or left of
* the mouse. Designed to be used for the chart value tooltip.
*
* The placement (left or right of the mouse) is changed if the mouse is
* in the left or right third of the window. Placement is left alone in
* the middle third.
*/
protected placeTooltipLeftRight(event: any): void;
/**
* Default Tooltip placement routine. Attempts to make the entire
* tooltip visibile without covering the mouse.
*/
protected defaultTooltipPlacement(event: {
x: number;
y: number;
clientY: number;
clientX: number;
}): void;
/**
* Override the default offset of the tooltip from the mouse.
*/
setOffset(value: number): BaseTooltip;
setEnabled(enable: boolean): BaseTooltip;
/**
* HideDisplayValue
*
* The value the CSS 'display' attribute will be set to to hide the
* tooltip. This defaults to 'none'. 'display' will be set to 'block'
* when the tooltip is to be visible.
*/
setHideDisplayValue(hide: string): BaseTooltip;
/**
* When the mouse enters the target region, instead of instantly showing
* the tooltip, there's a small delay. This prevents the tooltip from
* popping up and disappearing if the user is just moving the mouse over
* the target region instead of waiting for information. By default, the
* delay is 1 second.
*
* @param milliseconds - The number of milliseconds to delay showing the
* tooltip after the mouse enters the target region.
*
* @return - The tooltip instance.
*/
setDelay(milliseconds: number): BaseTooltip;
setPlaceTooltipLeft(): BaseTooltip;
setPlaceTooltipLeftRight(): BaseTooltip;
/**
* Release all tooltip listeners on the target. Failure to release the
* listeners can prevent the target from being freed.
*
* @param target - The object to have any tooltip listeners reset.
*/
releaseListeners(): void;
/**
* Sets a limit on the time a tooltip is visible.
*
* @param seconds - Seconds the tooltip should be visible
* @param callLeaveFunctionOnTimeout - True if the leave function should
* be called when the timeout occurs.
*
* @return - The tooltip instance.
*/
setVisibilityTimeout(seconds: number, callLeaveFunctionOnTimeout?: boolean): BaseTooltip;
/**
* Set whether to recalculate the tooltip width every time the cursor moves.
*
* Defaults to false
*
* @param value - Whether to recalculate the tooltip width every time the
* cursor moves.
*/
alwaysRecalcWidth(value: boolean): BaseTooltip;
/**
* Override tooltip background color. The background color is applied to
* the tooltip div immediately.
*
* @param value - color encoding, for example '#000000'
*
* @returns - The tooltip instance.
*/
setBackgroundColor(color: string): BaseTooltip;
/**
* Override tooltip font color. The font color is applied to
* the tooltip div immediately.
*
* @param value - color encoding, for example '#000000'
*
* @returns - The tooltip instance.
*/
setFontColor(color: string): BaseTooltip;
/**
* Override tooltip font type. The font family is applied to
* the tooltip div immediately.
*
* @param value - string, for example 'Segoe UI'
*
* @returns - The tooltip instance.
*/
setFontType(font: string): BaseTooltip;
/**
* Override tooltip font size. The font size is applied to
* the tooltip div immediately.
*
* @param value - font size in pixels, for example '8px'
*
* @returns - The tooltip instance.
*/
setFontSize(size: string): BaseTooltip;
/**
* Set the analytics name for the tooltip. Not currently used.
*
* @param value - The analytics name to report when this tooltip is shown
* or hidden.
*
* @returns - The tooltip instance.
*/
setAnalyticsName(value: string): BaseTooltip;
/**
* Set the CSS class for the tooltip. The class is applied immediately.
*
* @param cssClass - The CSS class(es) to apply to this tooltip.
*
* @returns - The tooltip instance.
*/
setCssClass(cssClass: string): BaseTooltip;
/**
* Set the target for the tooltip
*
* @param target - The selection of DOM objects that should cause the
* tooltip to appear.
*
* @returns - The tooltip instance.
*/
setTarget(target: any): BaseTooltip;
/**
* Set the function to be called when the mouse moves into the target
* DOM object(s)
*
* @param enterfunc - The function to be called when the mouse moves into
* the target DOM object. If the tooltip will only be shown if the
* enterfunc returns true.
*
* @returns - The tooltip instance.
*/
setEnterCallback(enterfunc: ITooltipCallback): BaseTooltip;
/**
* Set the function to be called when the mouse moves off of the target
* DOM object(s)
*
* @param leavefunc - The function to be called when the mouse moves off of
* the target DOM object.
*
* @returns - The tooltip instance.
*/
setLeaveCallback(leavefunc: ITooltipCallback): BaseTooltip;
/**
* Set the function to be called when the mouse moves while it is on the
* target DOM object(s)
*
* @param movefunc - The function to be called when the mouse moves while
* it is on the target DOM object.
*
* @returns - The tooltip instance.
*/
setMoveCallback(moveFunc: ITooltipCallback): BaseTooltip;
/**
* Display the tooltip div after a delay
*
* @param delayMS - milliseconds to delay before showing the tooltip
*
* @returns - The tooltip instance.
*/
displayTooltip(delayMS: number): BaseTooltip;
/**
* Hide the tooltip div
*
* @returns - The tooltip instance.
*/
hideTooltip(): BaseTooltip;
}
export class OneLineTooltip extends BaseTooltip {
protected _title: string;
constructor(tooltipDivId: string, tooltipStyle?: string);
getTitle(): string;
setData(title: string, data: string): void;
}
export class MetricListTooltip extends BaseTooltip {
protected _title: string;
constructor(tooltipDivId: string, tooltipStyle?: string);
getTitle(): string;
setData(title: string, ttList: ITooltipData[]): void;
}
export class CustomDivTooltip extends MetricListTooltip {
constructor(tooltipDivId: string, tooltipStyle?: string);
clearTooltip(): void;
getTooltipDiv(): any;
}
export class InteractionState {
protected _doBlink: boolean;
protected _highlightTimer: any;
protected _currFocus: any[];
protected _currSelection: any[];
protected _focus: (d: any) => void;
protected _unfocus: (d: any) => void;
protected _select: (d: any) => void;
protected _unselect: (d: any) => void;
constructor(focus: (d: any) => void, unfocus: (d: any) => void, doBlink?: boolean, select?: (d: any) => void, unselect?: (d: any) => void);
static getFocusColor(input: string): string;
/** add a selection from all of the elements */
protected _addFocusHelper(selection: any): void;
/** remove a selection from all of the elements */
protected _unfocusHelper(selection: any, isFlashing?: boolean): void;
/** add a selection from all of the elements */
protected _addSelectionHelper(selection: any): void;
/** remove a selection from all of the elements */
protected _removeSelectionHelper(selection: any, isFlashing?: boolean): void;
focus(event: IEvent): void;
select(event: IEvent): void;
/** used to restore any selections on a redraw */
onRedraw(): void;
}
/** @deprecated to be renamed to StateHelper in 2.x */
export let SelectionHelper: typeof InteractionState;
export class BaseSeries {
/** the chart that owns this series */
protected _d3Chart: ID3Chart;
/** The series as defined by the user with render type and decimation info */
protected _layer: ILayer;
/** The series data for the given region */
protected _outputData: IBuffer<any>;
/** The svg for this series*/
protected _d3svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>;
/** The x axis object */
protected _d3XAxis: D3Axis;
/** The y axis object */
protected _d3YAxis: D3Axis;
/** the D3 render object */
protected _d3Elems: d3.Selection<d3.BaseType, {}, d3.BaseType, any>[];
/** is the x axis a continuous series */
protected _isXContinuous: boolean;
/** scaling information for the x axis */
protected _xScalingInfo: IScalingInfo;
/** scaling information for the y axis */
protected _yScalingInfo: IScalingInfo;
/** stores the original fill colors for an series */
protected _fillColors: WeakMap<Object, string>;
/** stores the original stroke colors for an series */
protected _strokeColors: WeakMap<Object, string>;
protected _contextMenuItems: IContextMenuItem[];
/**
* Create an series
*
* @param _orientation - The orientation of the axis. One of 'left',
* 'right', or 'bottom'
*/
constructor(chart: ID3Chart, layer: ILayer, xAxis: D3Axis, yAxis: D3Axis, isXContinuous: boolean, svg: d3.Selection<d3.BaseType, {}, d3.BaseType, any>);
protected initializeContextMenuItems(): void;
protected applyStyles(): void;
getMaxNameLength(): number;
/** check if the x is continuous series */
isXContinuousSeries(): boolean;
/** get the x scaling info for this series */
getXScalingInfo(): IScalingInfo;
/** get the y scaling info for this series */
getYScalingInfo(): IScalingInfo;
/** get the name of this series */
getName(): string;
protected getDecimationName(): string;
protected getClassNames(type: string, name?: string): string;
getRequiredHeight(): number;
protected getSelectionClasses(type: string): string;
/** handle on focus events if we want to */
focus(selection: string): void;
/** handle on deselect events if we want to */
unfocus(selection: string): void;
/** handle on select events if we want to */
select(selection: string): void;
/** handle on deselect events if we want to */
unselect(selection: string): void;
/**
* get the actual rendered data
*/
setOutputData(data: any[] | IBuffer<any>): void;
/**
* get the actual rendered data
*/
getOutputData(): IBuffer<any>;
/** get the minimum graph height */
getMinHeight(): number;
/** lambda function to wrap shared click callback flows */
protected clickCallback(value: any, callback: (event: IEvent) => void): (event: IEvent) => void;
protected onClick(value: any): (event: IEvent) => void;
protected onDoubleClick(value: any): (event: IEvent) => void;
/** lambda function to wrap shared click execution flows */
protected clickExecute(value: any, selectionValue: string): void;
/** this adds some logic since the brush is behind rendered elements so
* we need to handle mouse/touch events properly to bring the brush to
* the front and do the brush selection correctly.
*/
protected configureItemInteraction(elem: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, value: any, selectionValue: string): void;
protected configureBandedItemInteration(elem: d3.Selection<d3.BaseType, {}, d3.BaseType, any>, value: any, selectionValue: string): void;
/** this adds some logic since the brush is behind the elements we need to
* handle mouse/touch events properly to bring the brush to the front and
* do the brush selection correctly.
*/
protected configureItemInteractionPIXI(elem: any, value: any, selectionValue: string): void;
clear(): void;
}
export class GraphicsManager {
protected _renderer: PIXI.Renderer;
protected _graphicsMap: {
[index: string]: any;
};
constructor(renderer: PIXI.Renderer);
add(mainKey: string, altKey: string, scaleMode: any, resolution: number, create: () => PIXI.DisplayObject): any;
}
export class PIXIHelper {
protected _stage: PIXI.Container;
protected _renderer: PIXI.Renderer;
protected _rectTexture: PIXI.Texture;
protected _selectionItems: {
[index: string]: any;
};
protected _useWebGLRenderer: boolean;
constructor(useWebGLRenderer?: boolean);
getRenderer(): PIXI.Renderer;
createGraphicsManager(): GraphicsManager;
addPixiSvg(svg: d3.Selection<any, any, any, any>, classes: string, width: number, height: number): d3.Selection<any, any, any, any>;
createRectange(width: number, height: number, backgroundColor: number): PIXI.Sprite;
createRectangleContainer(x: number, y: number, width: number, height: number, backgroundColor: number): PIXI.Container;
renderText(name: string, parent: any, color?: number, resolution?: number, scaling?: number): PIXI.Text;
addInteractionHelper(target: PIXI.DisplayObject, options: IOptions, onClick: (event: IEvent) => void, onDoubleClick: (event: IEvent) => void, contextMenuItems: IContextMenuItem[], hoverStart: (event: IEvent) => void, hoverEnd: (event: IEvent) => void, tooltip: BaseTooltip, caller: UIElement, value: any, selectionValue: any): void;
clearSelections(): void;
addSelection(key: string, item: any): void;
getSelection(key: string): any[];
getStage(): PIXI.Container;
render(stage?: PIXI.Container): void;
}
export class D3Polar extends SVGRenderer {
protected _radius: number;
protected _center: IXYValue;
protected _hoverItem: any;
protected _legend: D3Legend;
protected _graphArea: d3.Selection<any, any, d3.BaseType, any>;
/** the tooltip object */
protected _dataTooltip: CustomDivTooltip;
protected arc: d3.Arc<any, IPolarSegment>;
protected getDataKey: (d: any) => number | string;
protected getDataName: (d: any) => string;
protected getDataValue: (d: any) => number;
protected getDataDisplayValue: (d: any) => number;
constructor(element: UIElement, renderer: D3Renderer, parent: d3.Selection<any, any, d3.BaseType, any>);
createLayout(): void;
protected getSegmentClasses(d: any): string;
/** configures segment hover and stores the current hovered
* item for others to use in the _selection variable
**/
protected configureItemInteraction(target: d3.Selection<d3.BaseType, any, d3.BaseType, any>, value: any, selectionValue: string): void;
protected configureTooltip(target?: d3.Selection<d3.BaseType, any, d3.BaseType, any>): void;
protected renderData(): void;
/**
* get the polar data for the legend
*/
protected getLegendData(): any[];
protected renderLegend(pieLeft: number, pieTop: number, diameter: number): void;
/**
* Render the given element
*
* @param the options to render
*/
render(options: IOptions): void;
}
/**
* If you want to extend this class and its helpers then before rendering the links
* you have to add source and target properties to the original links which are
* the associated link from/to objects.
*/
export class ConnectedGraphBase {
_parent: any;
_graphContainer: any;
_zoom: d3.ZoomBehavior<Element, {}>;
_svg: any;
_svgRect: any;
_element: IConnectedGraph;
_contextMenuItems: IContextMenuItem[];
_dataTooltip: CustomDivTooltip;
_tooltipId: string;
_tooltipAnalyticsName: string;
_options: IOptions;
_brush: Brush;
_brushTooltip: OneLineTooltip;
onHoverChanged: (event?: IEvent) => void;
nodeHoverStart: () => void;
linkHoverStart: () => void;
hoverEnd: () => void;
getTooltipData: (event: IEvent) => any;
getLinkNode: (linkNode: any, nodes: IGraphNode[], nodeMap: {
[index: string]: number;
}) => void;
getNextXY: (rect: IRect, portAlignment: Alignment, fromXY: IXYValue, toXY: IXYValue) => IXYValue;
addElbow: (path: IXYValue[], link: IRenderedDiagramLink, fromXY: IXYValue, toXY: IXYValue) => void;
getElbowLinkPath: (link: IRenderedDiagramLink, fromXY: IXYValue, toXY: IXYValue) => any[];
getSelectionString: (data: any) => string;
getTooltipString: (data: any) => string;
bindZoom: () => void;
configureZoom: (xExtent: number[], yExtent: number[], height: number, width: number) => void;
renderLegend: (height: number) => number;
brush: (event: IEvent) => void;
configureBrush: () => void;
configureContextMenu: () => void;
getAnimateDuration: () => number;
protected static addNode(node: any, nodeList: IGraphNode[], nodeMap: {
[index: string]: number;
}): number;
initializeGraph(def: IConnectedGraph): void;
bind(renderer: UIRenderer, graph: IPortDiagram, getSelectionString: (data: any) => string, getTooltipString: (data: any) => string): void;
configureView(height: number, width: number): void;
}
export class DiagramBase extends ConnectedGraphBase {
bind(renderer: UIRenderer, graph: IPortDiagram): void;
}
export class D3ConnectedGraphSVG extends SVGRenderer {
_graphContainer: any;
_zoom: d3.ZoomBehavior<Element, {}>;
_dataTooltip: CustomDivTooltip;
_tooltipId: string;
_tooltipAnalyticsName: string;
_contextMenuItems: IContextMenuItem[];
_brush: Brush;
_brushTooltip: OneLineTooltip;
onHoverChanged: (event?: IEvent) => void;
nodeHoverStart: () => void;
linkHoverStart: () => void;
hoverEnd: () => void;
/** get the xy position of the start of the link */
getLinkStartXY: (link: IRenderedDiagramLink) => IXYValue;
/** get the xy position of the end of the link */
getLinkEndXY: (link: IRenderedDiagramLink) => IXYValue;
getElbowLinkPath: (link: IRenderedDiagramLink, fromXY: IXYValue, toXY: IXYValue) => any[];
configureZoom: (xExtent: number[], yExtent: number[], height: number, width: number) => void;
constructor(element: UIElement, renderer: UIRenderer, parent: d3.Selection<any, any, d3.BaseType, any>);
protected renderLegend(graphHeight?: number): number;
protected bindZoom(): void;
protected configureContextMenu(): void;
initializeGraphArea(options: IOptions): d3.Selection<SVGGElement, {}, d3.BaseType, any>;
/**
* configure the hover requirements for a node
*/
protected configureLinkHover(elem: any, link: IRenderedDiagramLink): void;
protected initializeLinkLayer(graphArea: d3.Selection<any, any, d3.BaseType, any>): void;
protected renderLinkHelper(graphArea: d3.Selection<any, any, d3.BaseType, any>, renderedLinks: IRenderedDiagramLink[], isUpdate?: boolean): void;
protected configureView(): void;
}
export class D3ConnectedGraphPixi extends UIElementRenderer {
/*****************************
* ConnectedGraphHelper code
*/
_graphContainer: any;
_zoom: d3.ZoomBehavior<Element, {}>;
protected _renderer: UIRenderer;
protected _parent: any;
_dataTooltip: CustomDivTooltip;
_tooltipId: string;
_tooltipAnalyticsName: string;
protected _contextMenuItems: IContextMenuItem[];
onHoverChanged: (event?: IEvent) => void;
nodeHoverStart: () => void;
linkHoverStart: () => void;
hoverEnd: () => void;
/** get the xy position of the start of the link */
getLinkStartXY: (link: IRenderedDiagramLink) => IXYValue;
/** get the xy position of the end of the link */
getLinkEndXY: (link: IRenderedDiagramLink) => IXYValue;
getElbowLinkPath: (link: IRenderedDiagramLink, fromXY: IXYValue, toXY: IXYValue) => any[];
configureZoom: (xExtent: number[], yExtent: number[], height: number, width: number) => void;
/*********************************************
* Renderer specific code
*/
protected _interactionState: InteractionState;
protected _pixi: PIXI.Renderer;
protected _pixiHelper: PIXIHelper;
protected _stage: PIXI.Container;
protected _pixiLinks: PIXI.Graphics;
protected _arrowTexture: PIXI.Texture;
protected _pixiArrows: PIXI.Container;
constructor(element: UIElement, renderer: UIRenderer, parent: d3.Selection<any, any, d3.BaseType, any>);
/**
* @deprecated ('Deprecated since 1.14.0 in favor of focus. Will be removed in 2.x')
* hover event
*
* @param event the event to pass to the renderer
*/
hover(event: IEvent): void;
/**
* bring an item into focus
*
* @param event the event to focus on
*/
focus(event: IEvent): void;
/**
* select an item
*
* @param event the event to item on
*/
select(event: IEvent): void;
/**
* brush event
* @param event the event to pass to the renderer
*/
brush(event: IEvent): void;
changeCursor(event: IEvent): void;
getTooltipData(event: IEvent): any;
getAnimateDuration(): number;
protected bindZoom(): void;
_focus(selection: string): void;
_unfocus(selection: string): void;
_select(selection: string): void;
_unselect(selection: string): void;
configureInteractionVisualization(): void;
protected configureContextMenu(): void;
protected initializeGraphArea(options: IOptions): any;
protected renderLinkHelper(stage: any, renderedLinks: IRenderedDiagramLink[]): void;
protected renderLegend(height: number): number;
protected configureView(): void;
}
export interface IRenderedDiagramLink {
/** user definition of the link */
def: IGraphLink;
/** source of the link */
source: {
node: IRenderedDiagramNode;
alignment: Alignment;
endPoint?: number;
};
target: {
node: IRenderedDiagramNode;
alignment: Alignment;
endPoint?: number;
};
/** path for this link */
path?: any[];
}
export interface IRenderedDiagramNode {
/** node definition frmo the user */
def: IGraphNode;
/** the d3 selection of this node */
d3selection?: d3.Selection<any, any, d3.BaseType, any>;
/** rect of this node */
rect?: Rect;
/** cached classes of this node */
classes?: string;
/** cached color of this node */
color?: string;
/** cached svg coords of this node */
svgCoords?: {
x: number;
y: number;
width: number;
height: number;
right?: number;
bottom?: number;
};
}
export function getCoordsAndCache(svg: d3.Selection<any, any, d3.BaseType, any>, node: any): any;