Using Event Handlers

Overview

KronoGraph lets you respond to different kinds of events fired by the timeline, which can be triggered either by:

• user interactions - such as when the user double-clicks a group
• items changing in the timeline - such as when an entity is highlighted

To attach an event handler to an event, use the timeline.on() function. To detach it, use timeline.off(). pass your handler functions through to the event props.

When an event fires, KronoGraph passes a single object containing all the details of the event, such as which buttons or EventModifierKeys were active during the event, to the attached event handlers. Use destructuring to extract only the properties you need:

function clickHandler ({ id, button }) {
// the user clicked the left mouse button or tapped on screen
  if (button === 0) {
    console.log(id);
  }
}
timeline.on('click', clickHandler);

const handleClick = ({ id, button }) => {
// the user clicked the left mouse button or tapped on screen
  if (button === 0) {
    console.log(id);
  }
}
<Timeline
entities={entities}
events={events}
onTimelineClick={handleClick}
/>

To override the default behavior of an event, call the preventDefault() function in the event handler:

function eventHandler({preventDefault}) {
  // handler code
  preventDefault();
}

const preventDoubleClick = event => {
  event.preventDefault();
};

<Timeline
entities={entities}
events={events}
onTimelineDoubleClick = {preventDoubleClick}
/>

Some events, such as pointer-move or drag-move, fire continuously as the pointer moves. You can add a debouncing or throttling function to control this:

let timer;
function throttle(func, delay) {
  if (timer) return;
  timer = setTimeout(() => {
    func();
    timer = undefined;
  }, delay);
}
// throttle eventHandlerFunction to only run once every 100ms
timeline.on('pointer-move',() => {
  throttle(eventHandlerFunction, 100);
});

See Handling Events Handling Events for a complete list of the events.

Check out the Events story to see events in action.

Sub-items

When a user interacts with some types of items on the timeline, an event will return a subItem object in its handler that contains more information about the sub-item.

if (targetType === 'timeSeriesChart' && subItem) {
  const { x, y, value, time } = subItem;
  console.log(x, y, value, time);
}

KronoGraph returns a sub-item object for Heatmap Cells and Data Points.