Interaction

Click Events

Subscribe to click and double-click events on histogram bars. Each event provides the resource, the date of the clicked time bucket, and the utilization value.

// Single click on a bar
histogram.events.barClick$.subscribe(({ resource, date, utilization }) => {
  console.log(resource.name, date, Math.round(utilization) + '%');
});

// Double click on a bar
histogram.events.barDblClick$.subscribe(({ resource, date, utilization }) => {
  openResourceDetail(resource, date);
});

HistogramBarClickArgs

resource: HistogramResource	The clicked resource.
date: Date	The start date of the clicked time bucket.
utilization: number	Total utilization percentage in this bucket.

Context Menu

Right-click events let you build custom context menus. Use mouseEvent.preventDefault()to suppress the browser's default context menu.

histogram.events.chartContextMenu$.subscribe(({
  resource, date, area, mouseEvent
}) => {
  mouseEvent.preventDefault();
  if (area === 'content' && resource) {
    showContextMenu(mouseEvent.clientX, mouseEvent.clientY, [
      { label: 'View Allocations', action: () => showAllocations(resource) },
      { label: 'Filter to This Resource', action: () => {
        histogram.filter = r => r.id === resource.id;
      }},
    ]);
  }
});

HistogramChartContextMenuArgs

resource: HistogramResource \| null	The right-clicked resource, or null if clicking empty area.
date: Date	The date at the click position.
area: 'header' \| 'content'	Whether the click was on the header or the content area.
mouseEvent: MouseEvent	The original browser mouse event.

Hover

The resourceHover$ event emits when the user hovers over a resource row in the chart area. It emits null when the mouse leaves all rows.

histogram.events.resourceHover$.subscribe(resource => {
  if (resource) {
    highlightRow(resource.id);
  } else {
    clearHighlight();
  }
});

Filtering

Apply a filter function to show only specific resources. Filtered resources are hidden from both the sheet and the chart. In aggregate view mode, the aggregate considers only visible resources.

// Show only over-allocated resources
histogram.filter = resource => {
  const peak = histogram.data.getPeakUtilization(resource.id);
  return peak > 100;
};

// Show only specific resources by name
histogram.filter = resource =>
  resource.name.toLowerCase().includes(searchText);

// Clear filter (show all resources)
histogram.clearFilter();
// or
histogram.filter = null;

Keyboard Navigation

The histogram supports keyboard shortcuts for common actions:

Ctrl+Z	Undo the last action.
Ctrl+Shift+Z / Ctrl+Y	Redo the last undone action.
Ctrl++ / Ctrl+=	Zoom in.
Ctrl+-	Zoom out.
Arrow keys	Navigate between cells in the sheet.
Home / End	Jump to first/last column in the sheet.

Undo & Redo

All data changes (adding/removing/modifying resources and allocations) are automatically tracked. Use undo and redo to revert or re-apply changes.

// Programmatic undo/redo
histogram.undo();
histogram.redo();

// Observe availability (for enabling/disabling toolbar buttons)
histogram.canUndo$.subscribe(canUndo => {
  undoButton.disabled = !canUndo;
});
histogram.canRedo$.subscribe(canRedo => {
  redoButton.disabled = !canRedo;
});

// Events emitted after undo/redo
histogram.events.undone$.subscribe(() => console.log('Undone'));
histogram.events.redone$.subscribe(() => console.log('Redone'));