TimelineKit

Data

Resources

Resources represent the entities whose utilization is being tracked — people, teams, or equipment. Each resource is displayed as a row in the histogram.

Resource Properties

id: stringUnique identifier (read-only). Auto-generated if not provided.
name: stringDisplay name of the resource.
maxCapacity: numberMaximum capacity in percent. 100 = 1 FTE, 200 = 2 FTE. Default: 100.
filtered: booleanWhether this resource is excluded by the active filter (read-only).

Adding & Removing Resources

// Create and add a resource
const r = new HistogramResource('r1', 'Alice');
r.maxCapacity = 100;
histogram.data.addResource(r);

// Factory method (auto-generated ID)
const r2 = histogram.data.createResource();
r2.name = 'Bob';
r2.maxCapacity = 150; // 1.5 FTE
histogram.data.addResource(r2);

// Access resources
const first = histogram.data.getResource(0);
const byId = histogram.data.getResourceById('r1');
console.log(histogram.data.resourcesLength); // 2

// Remove
histogram.data.removeResource(r);
histogram.data.removeResourceById('r1');

// Replace all resources at once
histogram.data.assignResources([r1, r2, r3]);

// Clear everything
histogram.data.clearAll();

Serialization

Resources can be serialized to and from plain objects using toAny() and HistogramResource.fromAny(obj).

const obj = resource.toAny();
// { id: 'r1', name: 'Alice', maxCapacity: 150 }

const restored = HistogramResource.fromAny(obj);

Allocations

Allocations represent time blocks during which a resource is assigned to a task or activity. Each allocation has a time range and a capacity percentage. Multiple overlapping allocations are summed to compute total utilization.

Allocation Properties

id: stringUnique identifier (read-only). Auto-generated if not provided.
resourceId: stringID of the resource this allocation belongs to.
name: stringDisplay name (typically the task name).
startTime: DateStart date/time of the allocation.
endTime: DateEnd date/time of the allocation.
capacity: numberAllocation capacity in percent. 100 = full-time, 50 = half-time.

Adding & Removing Allocations

// Create and add an allocation
const alloc = new HistogramAllocation(
  null,        // auto-generate ID
  'r1',        // resourceId
  'Backend',   // name
  new Date('2026-03-01'),
  new Date('2026-03-15'),
  100          // capacity: 100%
);
histogram.data.addAllocation(alloc);

// Factory method
const alloc2 = histogram.data.createAllocation(
  'r1', new Date('2026-03-10'), new Date('2026-03-20')
);
alloc2.name = 'Code Review';
alloc2.capacity = 50;
histogram.data.addAllocation(alloc2);

// Query allocations
const byId = histogram.data.getAllocationById('a1');
const forResource = histogram.data.getAllocationsForResource('r1');
console.log(histogram.data.allocationsLength);

// Remove
histogram.data.removeAllocation(alloc);
histogram.data.removeAllocationById('a1');

// Replace all allocations at once
histogram.data.assignAllocations([alloc1, alloc2, alloc3]);

Utilization

The histogram computes utilization per time bucket by summing all overlapping allocations. Partial overlaps are weighted proportionally. A value of 100 means the resource is fully allocated; values above maxCapacity indicate over-allocation and are shown in red.

// Get utilization for a specific time bucket
const util = histogram.data.getUtilization(
  'r1',
  new Date('2026-03-05'),
  new Date('2026-03-06')
); // e.g. 150 (= 150%)

// Get peak utilization across all time for a resource
const peak = histogram.data.getPeakUtilization('r1'); // e.g. 150

// Aggregate utilization across all visible resources
const aggr = histogram.data.getAggregateUtilization(
  new Date('2026-03-05'),
  new Date('2026-03-06')
);

// Total max capacity across all visible resources
const totalCap = histogram.data.aggregateMaxCapacity;

// Time range of all allocations
const earliest = histogram.data.minStartTime; // Date | null
const latest = histogram.data.maxEndTime;     // Date | null

Gantt Chart Binding

The histogram can be bound to a Gantt Chart for automatic, live data synchronization. When bound, the histogram reflects the Gantt's resources, task-resource assignments, zoom level, and scroll position in real time. Changes in the Gantt are automatically propagated to the histogram.

// Bind to a Gantt Chart instance
histogram.bindToGantt(gantt);

// The histogram now automatically shows:
// - Resources from the Gantt
// - Allocations derived from task-resource assignments
// - Synchronized zoom level and horizontal scroll
// - Synchronized project timeline bounds

// Disconnect when no longer needed
histogram.unbindFromGantt();
// Histogram retains its current data but stops syncing

When bound, you do not need to manually add resources or allocations — they are automatically derived from the Gantt's task data. Each task-resource assignment with a capacity value becomes a histogram allocation.