G6

createGraph(
  {
    data: {
      nodes: new Array(25).fill(0).map((_, index) => ({
        id: `node-${index}`,
        data: {
          timestamp: new Date('2023-08-01').getTime() + (index % 5) * 3600 * 24 * 1000,
          value: index % 10,
          label: new Date(new Date('2023-08-01').getTime() + (index % 5) * 3600 * 24 * 1000).toLocaleString(),
        },
      })),
      edges: new Array(25).fill(0).map((_, i) => ({
        id: `edge-${i}`,
        source: `node-${i % 12}`,
        target: `node-${(i % 10) + 15}`,
        data: {
          edgeType: 'e1',
        },
      })),
    },
    layout: { type: 'grid', cols: 5 },
    node: {
      style: { size: 24, fill: '#7e3feb' },
      palette: { field: 'cluster' },
    },
    edge: { style: { stroke: '#8b9baf' } },
    behaviors: ['drag-canvas'],
    plugins: [
      'grid-line',
      {
        type: 'timebar',
        key: 'timebar',
        data: [10, 2, 3, 4, 15].map((value, index) => ({
          time: new Date(new Date('2023-08-01').getTime() + index * 3600 * 24 * 1000),
          value,
          label: new Date(new Date('2023-08-01').getTime() + index * 3600 * 24 * 1000).toLocaleString(),
        })),
        timebarType: 'time',
        height: 100,
      },
    ],
    autoFit: 'view',
    padding: [10, 0, 100, 0],
  },
  { width: 600, height: 400 },
  (gui, graph) => {
    const options = {
      type: 'timebar',
      position: 'bottom',
      enable: true,
      timebarType: 'time',
      className: 'g6-timebar',
      width: 450,
      height: 100,
      zIndex: 3,
      elementTypes: ['node'],
      mode: 'modify',
      loop: false,
    };
    const optionFolder = gui.addFolder('Timebar Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'height', 40, 100, 1);
    optionFolder.add(options, 'width', 200, 800, 1);
    optionFolder.add(options, 'position', ['bottom', 'top']);
    optionFolder.add(options, 'timebarType', ['time', 'chart']);
    optionFolder.add(options, 'loop');

    optionFolder.onChange(({ property, value }) => {
      graph.updatePlugin({
        key: 'timebar',
        [property]: value,
      });
      graph.render();
    });

    const apiFolder = gui.addFolder('Timebar API');
    const instance = graph.getPluginInstance('timebar');
    apiFolder.add(instance, 'play');
    apiFolder.add(instance, 'pause');
    apiFolder.add(instance, 'forward');
    apiFolder.add(instance, 'backward');
    apiFolder.add(instance, 'reset');
  },
);

Options

Required type

string

Plugin type

className

string Default: 'g6-timebar'

The class name appended to the menu DOM for custom styles

Required data

number[] | { time: number; value: number; }[]

Time data

When timebarType is 'chart', you need to pass in the value field as chart data

elementTypes

'node' | 'edge' | 'combo'__[]

Filter element types

getTime

(datum: NodeData | EdgeData | ComboData__) => number

Get element time

height

number Default: 60

Timebar height

labelFormatter

(time: number | Date__) => string

Custom time formatting in chart mode

loop

boolean Default: false

Whether to loop

mode

'modify' | 'visibility' Default: 'modify'

Filter mode

'modify': Filter by modifying the graph data.
'visibility': Filter by modifying element visibility

onBackward

() => void

Callback executed when backward

onChange

(values: number | [number, number]) => void

Callback executed when the time interval changes

onForward

() => void

Callback executed when forward

onPause

() => void

Callback executed when paused

onPlay

() => void

Callback executed when playback starts

onReset

() => void

Callback executed when reset

onSpeedChange

(speed: number) => void

Callback executed when the playback speed changes

padding

number | number[]

Padding

position

'bottom' | 'top' Default: 'bottom'

Timebar location

timebarType

'time' | 'chart' Default: 'time'

Timebar Displays the type

'time': Display as a timeline
'chart': Display as a trend chart

values

number | [number, number] | Date | [Date, Date__]

Current time value

width

number Default: 450

Timebar width

x

number

X position

position will be invalidated after setting x

y

number

Y position

position will be invalidated after setting y

API

Timebar.backward()

Backward

backward(): void;

Timebar.forward()

Forward

forward(): void;

Timebar.pause()

Pause

pause(): void;

Timebar.play()

Play

play(): void;

Timebar.reset()

Reset

reset(): void;