Resource Histogram

import { useRef, useCallback } from 'react';
import { ResourceHistogram, ResourceHistogramRef,
         HistogramResource, HistogramAllocation } from '@timelinekit/react';
import '@timelinekit/core/styles';

function day(offset: number) {
  const d = new Date();
  d.setDate(d.getDate() + offset);
  d.setHours(0, 0, 0, 0);
  return d;
}

export default function App() {
  const ref = useRef<ResourceHistogramRef>(null);

  const handleReady = useCallback(() => {
    const histogram = ref.current;
    if (!histogram) return;

    histogram.data.addResource(new HistogramResource('r1', 'Alice'));
    histogram.data.addResource(new HistogramResource('r2', 'Bob'));
    histogram.data.addResource(new HistogramResource('r3', 'Charlie'));

    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r1', 'Backend API', day(0), day(10), 100));
    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r1', 'Code Review', day(5), day(12), 50));
    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r2', 'UI Design', day(2), day(8), 80));
    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r3', 'Testing', day(4), day(14), 100));
    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r3', 'Documentation', day(6), day(11), 60));

    histogram.zoomToFit();
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <ResourceHistogram ref={ref} onReady={handleReady} />
    </div>
  );
}