Plugins

37 min read

There are several plugins in G6 which can be used for G6's graph or other applications.

Configure to Graph

Instantiate the plugin and configure the minimap onto the instance of Graph:

// Instantialize the Grid plugin
const grid = new G6.Grid();
// Instantialize the Minimap plugin
const minimap = new G6.Minimap();
const graph = new G6.Graph({
  //... Other configurations
  plugins: [grid, minimap], // Configure Grid and Minimap to the graph
});

Legend

Legend is a built-in legend plugin for G6. It is useful for npde/edge type demonstration, and the end-users are able to interact with the legend to highlight and filter the items on the graph. supported by v4.3.0 and later versions.

img

Configuration

NameTypeDescription
dataGraphDataThe data for the legend, not related to the data of the graph. The legend for nodes currently supports 'circle', 'rect', and 'ellipse'. The legend for edges currently supports 'line', 'cubic', and 'quadratic'. type for each data means the type of the legend item, and the order could be assigned to each node/edge data for ordering in a legend group
position'top' / 'top-left' / 'top-right' / 'right' / 'right-top' / 'right-bottom' / 'left' / 'left-top' / 'left-bottom' / 'bottom' / 'bottom-left' / 'bottom-right'The relative of the position to the canvas. 'top' by default, which means the legend area is on the top of the canvas
paddingnumber / number[]The inner distance between the content of the legend to the border of the legend area. Array with four numbers means the padding to the top, right, bottom, and left responsively
marginnumber / number[]The outer distance between the legend area to the border of the canvas. Array with four numbers means the distance to the top, right, bottom, and left responsively. Only the top distance takes effect when position:'top', situations for other position configurations are similar to it
offsetXnumberThe x-axis offset for the legend area, it is useful when you want to adjust the position of the lenged slightly
offsetYnumberThe y-axis offset for the legend area, it is useful when you want to adjust the position of the lenged slightly
containerStyleShapeStyleThe style for the background rect, the format is similar as rect shape style
horiSepnumberThe horizontal seperation of the legend items
vertiSepnumberThe vertical seperation of the legend items
layout'vertical' / 'horizontal'The layout of the legend items. 'horizontal' by default
align'center' / 'right' / 'left'The alignment of the legend items. 'center' by default
titlestringThe title string for the legend, the style of the title could be configured by titleConfig
titleConfigobjectThe style of the legend title, detail configurations are shown in following lines
titleConfig.position'center' / 'right' / 'left'The alignment of the title to the legend content. 'center' by default
titleConfig.offsetXnumberThe x-axis offset for the legend title, it is useful when you want to adjust the position of the title slightly
titleConfig.offsetYnumberThe y-axis offset for the legend title, it is useful when you want to adjust the position of the title slightly
titleConfig[key]ShapeStyleOther styles for the text, configurations are same as text shape style
filterobjectConfigurations for the graph item filtering while the end-user interacting with the legend items. Detials are shown in the following lines
filter.enablebooleanWhether allow filtering the items in the main graph while the end-user interaction with the legend items. false by default
filter.multiplebooleanWhether support active multiple types of legend items, false by default, which means only one type of legend item will be activated in the same time. If it is true, multiple items could be activated only when the filter.trigger is 'click'
filter.trigger'click' / 'mouseenter'The interaction way to the legend items. click by default, which means while the end-user clicking a legend item, the legend item and corresponding filtered items on the main graph will be activated
filter.legendStateStyles{ active?: ShapeStyle, inactive?: ShapeStyleThe state styles for the legend items while filtering, inluding filter.legendStateStyles.active and filter.legendStateStyles.inactive. The type of each one is ShapeStyle. Similar to the nodeStateStyles of Graph
filter.graphActiveStatestringThe activate state name for the items on the main graph. When a lenged item is activated, the corresponding items of the main graph will be set to filter.graphActiveState, 'active' by default. And you should assign the state style for this state name on Graph
filter.graphInactiveStatestringThe inactivate state name for the items on the main graph. When a lenged item is inactivated, the corresponding items of the main graph will be set to filter.graphInactiveState, 'inactive' by default. And you should assign the state style for this state name on Graph
filter.filterFunctions{ [key: string]: (d) => boolean; }Since the data of the legend is not related to the main graph, you should configure filtering functions for each legend item type. The key is corresponding to the type of the legend item, and the value is a function. For the function, the parameter is the item data of the main graph, and the return value is a boolean which means whether the item of the main graph should be activated

SnapLine

SnapLine is a built-in components in G6. supported by v4.3.0 and later versions.

Configuration

NameTypeRequiredDescription
lineShapeStylefalsethe style of SnapLine
itemAlignTypeboolean、'horizontal' 、'vertical'、'center';falsethe type of SnapLine

Grid

Grid plugin draws grids on the canvas.

img

Use the code in Configure to Graph to instantiate grid plugin with the following configurations.

Configuration

NameTypeRequiredDescription
imgSrtingfalsebase64 formatted string for the grid image

Minimap

Minimap is a tool for quick preview and exploration on large graph.

img

It can be configured to adjust the styles and functions.

Configuration

NameTypeRequiredDescription
containerObjectfalseThe DOM container of Minimap. The plugin will generate a new one if container is not defined
classNameStringfalseThe className of the DOM element of the Minimap
viewportClassNameStringfalseThe className of the DOM element of the view port on the Minimap
typeStringfalseRender type. Options: 'default': Render all the graphics shapes on the graph; 'keyShape': Only render the keyShape of the items on the graph to reach better performance; 'delegate': Only render the delegate of the items on the graph to reach better performance. Performance: 'default' < 'keyShape' < 'delegate'. 'default' by default
sizeArrayfalseThe size of the Minimap
delegateStyleObjectfalseTakes effect when type is 'delegate'. The style of the delegate of the items on the graph

The delegateStyle has the properties:

NameTypeRequiredDescription
fillStringfalseFilling color
strokeStringfalseStroke color
lineWidthNumberfalseThe width of the stroke
opacityNumberfalseOpacity
fillOpacityNumberfalseFilling opacity

Edge Bundling

In complex graph with large number of edges, edge bundling can help you to improve the visual clutter.

img
Edge bundling on American airline graph. Demo Link. Demo Document.

The edge bundling plugin can be configured to adjust the styles and functions.

Configuration

NameTypeRequiredDefaultDescription
KNumberfalse0.1The strength of the bundling
lambdaNumberfalse0.1The initial step length
divisionsNumberfalse1The initial number of division on each edge. It will be multipled by divRate in each cycle
divRateNumberfalse2The rate of the divisions increasement. Large number means smoother result, but the performance will be worse when the number is too large
cyclesNumberfalse6The number of outer interations
iterationsNumberfalse90The initial number of inner interations. It will be multiplied by iterRate in each cycle
iterRateNumberfalse0.6666667The rate of the iterations decreasement
bundleThresholdNumberfalse0.6The edge similarity threshold for bundling. Large number means the edges in one bundle have smaller similarity, in other words, more edges in one bundle

Menu is used to configure the right-click menu on the node.

Configuration

NameTypeRequiredDescription
classNamestringnullthe class name of the menu dom
getContent(evt?: IG6GraphEvent, graph?: IGraph) => HTMLDivElement / stringimgthe menu content,supports DOM or string
handleMenuClick(target: HTMLElement, item: Item, graph?: IGraph) => voidundefinedthe callback function when click the menu
shouldBegin(evt: G6Event) => booleanundefinedWhether allow the tooltip show up. You can return true or false according to the content of the evt.item (current item of the event) or evt.target (current shape of the event)
offsetXnumber6the offset of tooltip along x axis, the padding of the parent container should be take into consider
offsetYnumber6the offset of tooltip along y axis, the padding of the parent container should be take into consider
itemTypesstring[]['node', 'edge', 'combo']the item types that allow the tooltip show up. e.g. if you only want the node tooltip, set the itemTypes to be ['node']
trigger'click' / 'contextmenu''contextmenu'the trigger for the menu, 'contextmenu' by default, which means the menu will show up when the end user right click on some item. 'click' means left click. 'click' is supported by v4.3.2 and later versions

Usage

Use G6 build-in menu by default.

// Instantiate Menu plugin
const menu = new G6.Menu();
const graph = new G6.Graph({
  //... other Configuration
  plugins: [menu],
});

DOM Menu

const menu = new G6.Menu({
  offsetX: 10,
  offsetY: 20,
  itemTypes: ['node'],
  getContent(e, graph) {
    const outDiv = document.createElement('div');
    outDiv.style.width = '180px';
    outDiv.innerHTML = `<ul>
        <li>menu01</li>
        <li>menu01</li>
        <li>menu01</li>
        <li>menu01</li>
        <li>menu01</li>
      </ul>`
    return outDiv
  },
  handleMenuClick(target, item, graph) {
    console.log(target, item, graph)
  },
});

const graph = new G6.Graph({
  //... other Configuration
  plugins: [menu], // the Menu plugin
});

String Menu

const menu = new G6.Menu({
  getContent(e) {
    return `<ul>
      <li title='1'>menu02</li>
      <li title='2'>menu02</li>
      <li>menu02</li>
      <li>menu02</li>
      <li>menu02</li>
    </ul>`;
  },
  handleMenuClick(target, item) {
    console.log(target, item)
  },
});

const graph = new G6.Graph({
  //... other Configuration
  plugins: [menu], // The Menu plugin
});

ToolBar

ToolBar has the following operations by default:

  • Undo;
  • Redo;
  • Zoom-in;
  • Zoom-out;
  • Fit the View;
  • Actual Size.

Configuration

NameTypeDefaultDescription
containerHTMLDivElementnullThe container of the ToolBar. It will take use the DOM of the canvas by default
classNamestringnullThe class name of the sub DOM nodes of the ToolBar
getContent(graph?: IGraph) => HTMLDivElement / stringimgThe content of the ToolBar
handleClick(code: string, graph: IGraph) => voidundefinedThe callback functions for the icons of the ToolBar
positionPointnullThe position of the ToolBar

Usage

Default Usage

ToolBar provides some default operations above.

const toolbar = new G6.ToolBar();

const graph = new G6.Graph({
  //... Other configurations
  plugins: [toolbar], // Use the ToolBar plugin
});

Custom ToolBar by String

const tc = document.createElement('div');
tc.id = 'toolbarContainer';
document.body.appendChild(tc);

const toolbar = new G6.ToolBar({
  container: tc,
  getContent: () => {
    return `
      <ul>
        <li code='add'>Add Node</li>
        <li code='undo'>Undo</li>
      </ul>
    `
  },
  handleClick: (code, graph) => {
    if (code === 'add') {
      graph.addItem('node', {
        id: 'node2',
        label: 'node2',
        x: 300,
        y: 150
      })
    } else if (code === 'undo') {
      toolbar.undo()
    }
  }
});

const graph = new G6.Graph({
  //... Other configurations
  plugins: [toolbar], // Use the ToolBar plugin
});

Custom ToolBar by DOM

const toolbar = new G6.ToolBar({
  getContent: () => {
    const outDiv = document.createElement('div');
    outDiv.style.width = '180px';
    outDiv.innerHTML = `<ul>
        <li>example 01</li>
        <li>example 02</li>
        <li>example 03</li>
        <li>example 04</li>
        <li>example 05</li>
      </ul>`
    return outDiv
  },
  handleClick: (code, graph) => {

  }
});

const graph = new G6.Graph({
  //... Other configurations
  plugins: [toolbar], // Use the ToolBar plugin
});

ToolTip

ToolTip helps user to explore detail infomations on the node and edge. Do note that, This Tooltip Plugins will replace the tooltip in the built-in behavior after G6 4.0.

Configuration

NameTypeDefaultDescription
classNamestringnullTge class name of the tooltip's container
containerHTMLDivElementnullThe container of the Tooltip. The canvas DOM will be used by default
getContent(evt?: IG6GraphEvent) => HTMLDivElement / stringimgThe content of the Tooltip
shouldBegin(evt: G6Event) => booleanundefinedWhether allow the tooltip show up. You can return true or false according to the content of the evt.item (current item of the event) or evt.target (current shape of the event)
offsetXnumber6the offset of tooltip along x axis, the padding of the parent container should be take into consider
offsetYnumber6the offset of tooltip along y axis, the padding of the parent container should be take into consider
itemTypesstring[]['node', 'edge', 'combo']the item types that allow the tooltip show up. e.g. if you only want the node tooltip, set the itemTypes to be ['node']

Usage

The content of the Tooltip is the type and id of the item by default. Users are free to custom the content of the Tooltip by configuring getContent:

Dom Tooltip

const tooltip = new G6.Tooltip({
  offsetX: 10,
  offsetY: 20,
  getContent(e) {
    const outDiv = document.createElement('div');
    outDiv.style.width = '180px';
    outDiv.innerHTML = `
      <h4>自定义tooltip</h4>
      <ul>
        <li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
      </ul>`
    return outDiv
  },
  itemTypes: ['node']
});


const graph = new G6.Graph({
  //... Other configurations
  plugins: [tooltip], // Use Tooltip plugin
});

String Tooltip

const tooltip = new G6.Tooltip({
  getContent(e) {
    return `<div style='width: 180px;'>
      <ul id='menu'>
        <li title='1'>example 01</li>
        <li title='2'>example 02</li>
        <li>example 03</li>
        <li>example 04</li>
        <li>example 05</li>
      </ul>
    </div>`;
  },
});

const graph = new G6.Graph({
  //... Other configurations
  plugins: [tooltip], // Use Tooltip plugin
});

Fisheye Lens

Fisheye is designed for focus_context exploration, it keeps the context and the relationships between context and the focus while magnifing the focus area.

Configuration

NameTypeRequiredDefaultDescription
trigger'drag' / 'mousemove' / 'click'false'mousemove'The trigger for the lens
dNumberfalse1.5Magnify coefficient. Larger the value, larger the focus area will be magnified
rNumberfalse300The radius of the focus area
delegateStyleObjectfalse{ stroke: '#000', strokeOpacity: 0.8, lineWidth: 2, fillOpacity: 0.1, fill: '#ccc' }The style of the lens's delegate
showLabelBooleanfalsefalseIf the label is hidden, whether to show the label of nodes inside the focus area
maxRNumberThe height of the graphThe maximum radius scaled by the wheel
minRNumber0.05 * The height of the graphThe minimum radius scaled by the wheel
maxDNumber5when trigger is 'mousemove' or 'click', minimap allow users to adjust the magnifying coefficient d by dragging left / right on the lens. maxD is the maximum magnifying coefficient that limits this interaction. The suggested range for maxD is [0, 5]. Note that updating the configurations by minimap.updateParam will not be limited by maxD
minDNumber0when trigger is 'mousemove' or 'click', minimap allow users to adjust the magnifying coefficient d by dragging left / right on the lens. minD is the minimum magnifying coefficient that limits this interaction. The suggested range for minD is [0, 5]. Note that updating the configurations by fisheye.updateParams will not be limited by minD
scaleRBy'wheel'/'drag'/'unset'/undefinedfalse'unset'The trigger for end users to scale the range of the lens
scaleDBy'wheel'/'drag'/'unset'/undefinedfalse'unset'The trigger for end users to scale the magnification factor of the lens
showDPercentBooleanfalsetrueWhether show the percent of current magnification factor on the bottom of the lens, where the percent is about the D, minD, and maxD

Member Function

updateParams(cfg)

Update partial of the configurations of the fisheye instance, including trigger, d, r, maxR, minR, maxD, minD, scaleDBy, and scaleRBy. E.g.

const fisheye = new G6.Fisheye({
  trigger: 'mousemove'
});

... // Other operations

fisheye.updateParams({
  d: 2,
  r: 500,
  // ...
})

Usage

const fisheye = new G6.Fisheye({
  trigger: 'mousemove',
  d: 1.5,
  r: 300,
  delegateStyle: clone(lensDelegateStyle),
  showLabel: false
});

const graph = new G6.Graph({
  //... Other graph configurations
  plugins: [fisheye], // configuring fisheye plugin
});

Edge Filter Lens

Edge Filter Lens is designed for edge filtering, the desired edges will be kept inside the lens while the others will be hidden.

Configuration

NameTypeRequiredDefaultDescription
trigger'drag' / 'mousemove' / 'click'false'mousemove'The trigger for the lens
type'one' / 'both' / 'only-source' / 'only-target'false'both'Simple filtering conditions related to the end nodes. 'one': show the edge whose one or more end nodes are inside the filter lens; 'both': show the edge whose both end nodes are inside the lens; 'only-source': show the edge whose source node is inside the lens and target node is not; 'only-target': show the edge whose target node is inside the lens and source node is not. More complicated conditions can be defined by the shouldShow
shouldShow(d?: unknown) => booleanfalseundefinedThe custom conditions for filtering. The parameter d is the data of each edge, you can return boolean value according to the data, where true means show.
rNumberfalse60The radius of the filter area
delegateStyleObjectfalse{ stroke: '#000', strokeOpacity: 0.8, lineWidth: 2, fillOpacity: 0.1, fill: '#ccc' }The style of the lens's delegate
showLabel'edge' / 'node' / 'both'false'edge'If the label is hidden, whether to show the label of nodes inside the focus area
maxRNumberThe height of the graphThe maximum radius scaled by the wheel
minRNumber0.05 * The height of the graphThe minimum radius scaled by the wheel
scaleRBy'wheel'/'drag'/'unset'/undefinedfalse'unset'The trigger for end users to scale the range of the lens

Member Function

updateParams(cfg)

Update partial of the configurations of the filter lens instance, including trigger, type, r, maxR, minR, shouldShow, showLabel, and scaleRBy. E.g.

const filterLens = new G6.EdgeFilterLens({
  trigger: 'drag'
});

... // Other operations

filterLens.updateParams({
  r: 500,
  // ...
})

Usage

const filterLens = new G6.EdgeFilterLens({
  trigger: 'mousemove',
  r: 300,
  shouldShow: d => {
    return d.size > 10;
  }
});

const graph = new G6.Graph({
  //... Other graph configurations
  plugins: [filterLens], // configuring edge filter lens plugin
});

TimeBar

There are three types of built-in TimeBar in G6:

  • Time bar with a line chart as background;
  • Simple time bar;
  • Time bar with descrete ticks.

All the three types of timebar supports play, fast forward, and fast backward.


Time bar with a line chart as background

Simple time bar

Time bar with descrete ticks


Refer to the demos HERE

Common Usage

Same to other plugins of G6, the users can initiate the TimeBar and assign it to the graph as:

import G6 from '@antv/g6';

const timebar = new G6.TimeBar({
  width: 500,
  height: 150,
  padding: 10,
  type: 'trend',
  trend: {
    data: timeBarData,
  },
});

const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  plugins: [timebar],
});


If you want to use the TimeBar with line chart, assign the type to be trend when instantiating the TimeBar, which results in:


Assigning the type to be simple results in:


And assigning the type to be tick results in a TimeBar with descrete ticks. Note that it is different from the above two types of TimeBar, **The TimeBar with decrete ticks is configured with the tick object but not the trend object.

const timebar = new G6.TimeBar({
  width,
  height: 150,
  type: 'tick',
  tick: {
    data: timeBarData,
    width,
    height: 42,
    tickLabelFormatter: d => {
      const dateStr = `${d.date}`;
      if ((count - 1) % 10 === 0) {
        return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
      }
      return false;
    },
    tooltipFomatter: d => {
      const dateStr = `${d}`;
      return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
    },
  },
});

Event Listener

TimeBar Plugin exposes several timing events. They could be listened by graph.on('eventname', e => {}).

Event NameDescription
valuechangeEmitted when the value range of the timebar is chaged.
timebarstartplayEmitted when the timeline starts to play.
timebarendplayEmitted when the timeline ends playing.

Definition of the Configurations

Definition of the Interfaces

The complete interfaces for the TimeBar is shown below:

interface TimeBarConfig extends IPluginBaseConfig {
  // position size
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  readonly padding?: number;

  readonly type?: 'trend' | 'simple' | 'tick';
  // the configuration for the TimeBar with line chart and simple TimeBar, takes effect whtn the type is 'trend' or 'simple'
  readonly trend?: TrendConfig;

  // the configurations for the two sliders
  readonly slider?: SliderOption;

  // when the type is 'tick', it is the configuration for the TimeBar with descrete ticks
  // when the type is 'trend' or 'simpe', it is the configuration for the time tick labels under the timeBar
  readonly tick?: TimeBarSliceOption | TickCfg;

  // the buttons for play, fast forward, and back forward
  readonly controllerCfg?: ControllerCfg;

  // [Supported from v4.5.1] the CSS style for the DOM container of the timebar
  readonly containerCSS?: Object;

  // [Supported from v4.5.1] the item types that will be filtered by the timebar. e.g. ['node', 'edge']. The default value is ['node']
  readonly filterItemTypes?: string[];

  // [Deprecated from v4.5.1, replaced by filterItemTypes] whether to consider the edge filtering. If it is false, only filter the nodes and the edges whose end nodes are filtered out while the selected range of the timeBar is changed. If it is true, there should be `date` properties on the edges data, and the timeBar will filter the edges which is not in the selected range in the same time
  readonly filterEdge?: boolean;

  // [Supported from v4.5.1] whether filter the nodes and edges on the graph by graph.changeData, which means the data of the graph will be changed by the timebar. If it is false, the graph.hideItem and graph.showItem will be called to hide/show the nodes and edges instead of changeData
  readonly changeData?: boolean;

  // the callback function after the time range is changed. When it is not assigned, the graph elements will be filtered after the time range is changed
  rangeChange?: (graph: IGraph, minValue: string, maxValue: string) => void;

  // [Supported from v4.5.1] user returns the date value according to the data of a node or an edge
  getDate?: (d: any) => number;

  // [Supported from v4.5.1] user returns the value according to the data of a node or an edge. The value is used to draw the trend line for timebar with type 'trend'
  getValue?: (d: any) => number;

  // [Supported from v4.5.1] user returns true or false to decide whether to ignore the node or the edge while filtering. If it is true, the item with data model will be ignored. Or the item will be filtered according to the min and max date value
  shouldIgnore?: (itemType: 'node' | 'edge', model: any, dateRage: { min: number, max: number }) => boolean;
}

The Parameters of the Interfaces

NameTypeDefault ValueDescription
containerHTMLDivElementnullThe DOM container of the TimeBar. By default, the plugin will create a container DOM with 'g6-component-timebar' as className
xnumber0The beginning x position of the TimeBar plugin
ynumber0The beginning y position of the TimeBar plugin
widthnumberRequred, the width of the TimeBar
heightnumberRequred, the height of the TimeBar
paddingnumber/number[]10The padding of the container of the TimeBar
type'trend' / 'simple' / 'tick'trendThe type of the TimeBar, 'trend' by default
trendTrendConfignullThe configuration for the TimeBar with line chart and simple TimeBar, takes effect whtn the type is 'trend' or 'simple'
sliderSliderOptionnullThe configurations for the two sliders
tickTimeBarSliceOption / TickCfgnullIf the type is 'tick', it is the configuration for the TimeBar with descrete ticks. If it the type is 'trend' or 'simple', it is the configuration for the time tick labels under the timeBar
controllerCfgControllerCfgnullThe buttons for play, fast forward, and back forward
containerCSSObjectnull[Supported from v4.5.1] The CSS style for the DOM container of the timebar
filterItemTypesstring[]null[Supported from v4.5.1] The item types that will be filtered by the timebar. e.g. ['node', 'edge']. The default value is ['node']
filterEdgebooleanfalse[Deprecated from v4.5.1, replaced by filterItemTypes] Whether to consider the edge filtering. If it is false, only filter the nodes and the edges whose end nodes are filtered out while the selected range of the timeBar is changed. If it is true, there should be date properties on the edges data, and the timeBar will filter the edges which is not in the selected range in the same time
changeDatabooleannull[Supported from v4.5.1] Whether filter the nodes and edges on the graph by graph.changeData, which means the data of the graph will be changed by the timebar. If it is false, the graph.hideItem and graph.showItem will be called to hide/show the nodes and edges instead of changeData
rangeChangeFunctionnullThe callback function after the time range is changed. When it is not assigned, the graph elements will be filtered after the time range is changed
getDate(d: any) => numbernull[Supported from v4.5.1] User returns the date value according to the data of a node or an edge
getValue(d: any) => numbernull[Supported from v4.5.1] User returns the value according to the data of a node or an edge. The value is used to draw the trend line for timebar with type 'trend'
shouldIgnore(itemType: 'node''edge', model: any, dateRage: { min: number, max: number }) => booleannull

Interface for TrendConfig

Does not support the configurations for the style of the tick labels.

interface TrendConfig {
  // The data
  readonly data: {
    date: string;
    value: string;
  }[];
  // The position and size
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  // The styles
  readonly smooth?: boolean;
  readonly isArea?: boolean;
  readonly lineStyle?: ShapeStyle;
  readonly areaStyle?: ShapeStyle;
  readonly interval?: Interval;
}

Parameters of the TrendConfig

NameTypeDefault ValueDescription
xnumber0The beginning x position of the trend line chart
ynumber0The beginning y position of the trend line chart
widthnumberThe width of the TimeBarThe width of the trend line chart of the TimeBar, we suggest to use the default value. If you wanna custom it, please assign the width of the slider in the same time
heightnumber28 when type='trend'
8 when type='simple'
The height of the TimeBar
smoothbooleanfalseWhether to show a smooth line on the trend line chart
isAreabooleanfalseWhether to show a area chart instead
lineStyleShapeStylenullThe configurations for the style of the line in the line chart
areaStyleShapeStylenullThe configuration for the style of the area in the chart when isArea is true
intervalIntervalnullThe configuration for the style of the bars in the chart. When it is assigned, a mixed trend chart will take place. Interval = { data: number[], style: ShapeStyle }. Except the configurations in ShapeStyle for the style of the shapes in the bar charts, barWidth for the width of one bar is also configurable for style

Interfaces of SliderOption

export type SliderOption = Partial<{
  readonly width?: number;
  readonly height?: number;
  readonly backgroundStyle?: ShapeStyle;
  readonly foregroundStyle?: ShapeStyle;
  // The style of the sliders
  readonly handlerStyle?: {
    width?: number;
    height?: number;
    style?: ShapeStyle;
  };
  readonly textStyle?: ShapeStyle;
  // The start and end position for the sliders, which indicate the data range for the filtering. Ranges from 0 to 1
  readonly start: number;
  readonly end: number;
  // The labels for the sliders
  readonly minText: string;
  readonly maxText: string;
}>;

Parameters for the SliderOption

NameTypeDefault ValueDescription
widthnumberThe width of the container of the TimeBar - 2 * paddingThe width of the background trend chart. We suggest to use the default value. If you wanna custom it, assign it the the width in the trend in the same time
heightnumber28 when type='trend'
8 when type='simple'
The height of the background trend chart. We suggest to use the default value. If you wanna custom it, assign it the the height in the trend in the same time
backgroundStyleShapeStylenullThe configuration for the style of the background
foregroundStyleShapeStylenullThe configuration for the style of the forground
handlerStyleShapeStylenullThe configuration for the style of the two sliders
textStyleShapeStylenullThe configuration for the style of the labels on the two sliders
startnumber0.1The start position for the sliders, which indicate the start of the data range for the filtering. Ranges from 0 to end
endnumber0.9The end position for the sliders, which indicate the end of the data range for the filtering. Ranges from start to 1
minTextstringminThe label for the left slider
maxTextstringmaxThe label for the right slider

TimeBarSliceOption

export interface TimeBarSliceOption {
  // position size
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  readonly padding?: number;

  // styles
  readonly selectedTickStyle?: TickStyle;
  readonly unselectedTickStyle?: TickStyle
  readonly tooltipBackgroundColor?: string;

  readonly start?: number;
  readonly end?: number;

  // data
  readonly data: {
    date: string;
    value: string;
  }[];

  // custom the formatter function for the tick labels
  readonly tickLabelFormatter?: (d: any) => string | boolean;
  // custom the formatter function for the tooltip
  readonly tooltipFomatter?: (d: any) => string;
}

Parameters for the TimeBarSliceOption

NameTypeDefault ValueDescription
xnumber0The beginning x position for the TimeBar
ynumber0The beginning y position for the TimeBar
widthnumberRequred, the width of the TimeBar
heightnumberRequred, the height of the TimeBar
paddingnumber / number[]0The padding of the container of the TimeBar
selectedTickStyleShapeStylenullThe style of the tick(s) which is(are) selected
unselectedTickStyleShapeStylenullThe style of the tick(s) which is(are) unselected
tooltipBackgroundColorShapeStylenullThe background style for the tooltip
startnumber0.1The start position for the sliders, which indicate the start of the data range for the filtering. Ranges from 0 to end
endnumber0.9The end position for the sliders, which indicate the end of the data range for the filtering. Ranges from start to 1
dataany[][]Requred, the data for the ticks
tickLabelFormatterFunctionnullThe formatter function for customing the labels of the ticks
tooltipFomatterFunctionnullThe formatter function for customing the tooltip

TickCfg

export interface TickCfg {
  // the fomatter for the time tick labels
  readonly tickLabelFormatter?: (d: any) => string | undefined;
  // the shape style for the time tick labels. [Supported from v4.5.1] tickLabelStyle.rotate can be configured to controll the rotate of the tick label to avoid overlappings
  readonly tickLabelStyle?: ShapeStyle;
  // the shape style for the short vertical lines uppon the time tick labels
  readonly tickLineStyle?: ShapeStyle;
}

Parameters for TickCfg

NameTypeDefault ValueDescription
tickLabelFormatterFunctionnullThe formatter function for customing the labels of the ticks
tickLabelStyleShapeStyle{}The shape style for the time tick labels. [Supported from v4.5.1] tickLabelStyle.rotate can be configured to controll the rotate of the tick label to avoid overlappings
tickLineStyleShapeStyle{}The shape style for the short vertical lines uppon the time tick labels

Interface of the ControllerCfg

Does not support for now

Does not support the style configuration for controller buttons

Does not support loop play

type ControllerCfg = Partial<{
  /** the begining position and the size of the controller, the width and height will not scale the sub-controllers but only affects the positions of them. To change the size of the sub-controllers, try ControllerCfg.scale or the scale in the style of sub-controller */
  readonly x?: number;
  readonly y?: number;
  readonly width: number;
  readonly height: number;
  /** the scale of the whole controller */
  readonly scale?: number;
  /** the fill and stroke color of the background */
  readonly fill?: string;
  readonly stroke?: string;
  /** the font family for the whole controller, whose priority is lower than the fontFamily in the text style of each sub-controller */
  readonly fontFamily?: string;

  /** the play spped, means the playing time for 1 tick */
  readonly speed?: number;
  /** whether play in loop */
  readonly loop?: boolean;
  /** whether hide the 'time type controller' on the right-bottom */
  readonly hideTimeTypeController: boolean;

  /** style of the backward button. scale, offsetX, offsetY are also can be assigned to it to controll the size and position of the backward button */
  readonly preBtnStyle?: ShapeStyle;

  /** style of the forward button. scale, offsetX, offsetY are also can be assigned to it to controll the size and position of the forward button */
  readonly nextBtnStyle?: ShapeStyle;

  /** style of the play button. scale, offsetX, offsetY are also can be assigned to it to controll the size and position of the paly button */
  readonly playBtnStyle?: ShapeStyle;

  /** style of the 'speed controller'. scale, offsetX, offsetY are also can be assigned to it and each sub-styles to controll the size and position of the speed controller and sub-shapes*/
  readonly speedControllerStyle?: {
    offsetX?: number,
    offsetY?: number;
    scale?: number
    pointer?: ShapeStyle,
    scroller?: ShapeStyle,
    text?: ShapeStyle
  };

  /** style of the 'time type controller'. scale, offsetX, offsetY  are also can be assigned to it and each sub-styles to controll the size and position of the speed controller and sub-shapes */
  readonly timeTypeControllerStyle?: {
    offsetX?: number,
    offsetY?: number;
    scale?: number
    check?: ShapeStyle,
    box?: ShapeStyle,
    text?: ShapeStyle
  };
  /** [Supported from v4.5.1] The style of the background rect of the controller */
  readonly containerStyle?: ExtendedShapeStyle;
  /** the text for the right-bottom switch controlling play with single time point or time range */
  readonly timePointControllerText?: string;
  readonly timeRangeControllerText?: string
}>

Parameters for ControllerCfg

NameTypeDefault ValueDescription
xnumber0The beginning x position for the buttons group of the TimeBar
ynumber0The beginning y position for the buttons group of the TimeBar
widthnumberThe width of the TimeBarThe width of the buttons group of the TimeBar, do not scale the sub-controllers but only affects the positions of them
heightnumber40The width of the buttons group of the TimeBar, do not scale the sub-controllers but only affects the positions of them
scalenumber1The scale of the whole controller
speednumber1The play speed
loopbooleanfalseDoes not support for now, whether play in loop
hideTimeTypeControllerbooleantrueWhther hide the time type controller on the right bottom
fillstringThe fillling color for the background of the controller
strokestringThe stroke color for the background of the buttons group
preBtnStyleShapeStylenullThe style of the backward button. scale, offsetX, offsetY are also can be assigned to it to controll the size and position of the backward button
nextBtnStyleShapeStylenullThe style of the forward button. scale, offsetX, offsetY are also can be assigned to it to controll the size and position of the forward button
playBtnStyleShapeStylenullThe style of the play button. scale, offsetX, offsetY are also can be assigned to it to controll the size and position of the paly button
speedControllerStyle{ offsetX?: number, offsetY?: number, scale?: number, pointer?: ShapeStyle, text?: ShapeStyle, scroller?: ShapeStyle}nullThe style of the 'speed controller'. scale, offsetX, offsetY are also can be assigned to it and each sub-styles to controll the size and position of the speed controller and sub-shapes
timeTypeControllerStyle{ offsetX?: number, offsetY?: number, scale?: number, box?: ShapeStyle, check?: ShapeStyle, text?: ShapeStyle }nullThe style of the 'time type controller'. scale, offsetX, offsetY are also can be assigned to it and each sub-styles to controll the size and position of the speed controller and sub-shapes
containerStyle | ShapeStyle{}[Supported from v4.5.1] The style of the background rect of the controller
timePointControllerTextstring"单一时间"The text for the right-bottom switch controlling play with single time point or time range
timeRangeControllerTextstring"时间范围"The text for the right-bottom switch controlling play with single time point or time range