task_scheduler/modules/gantt-chart-sk/gantt-chart-sk-demo.ts

import './index';
import { draw, Data } from './gantt-chart-sk';
import '../../../infra-sk/modules/theme-chooser-sk';

// This container holds the active chart, if any.
let container: HTMLDivElement | null = null;

// clearAndDraw is a helper for drawing charts.
const clearAndDraw = (data: Data) => {
  // Delete and recreate the container div so that we render from scratch.
  container?.remove();
  container = document.createElement('div');
  container.id = 'container';
  container.style.height = '500px';
  container.style.width = '1000px';
  document.body.appendChild(container);

  // Draw the new chart.
  draw(container, data);
};

// getData returns some placeholder data for a chart.
const getData = (): Data => ({
  lanes: [
    {
      label: 'lane1',
      blocks: [
        {
          start: new Date('1970-01-19T12:54:10.000Z'),
          end: new Date('1970-01-19T12:54:20.000Z'),
          color: 'blue',
          label: 'block1',
        },
      ],
    },
    {
      label: 'lane2',
      blocks: [
        {
          start: new Date('1970-01-19T12:54:11.000Z'),
          end: new Date('1970-01-19T12:54:12.000Z'),
          color: 'red',
          label: 'block1',
        },
        {
          start: new Date('1970-01-19T12:54:13.000Z'),
          end: new Date('1970-01-19T12:54:14.000Z'),
          color: 'green',
          label: 'block2',
        },
      ],
    },
  ],
  start: undefined,
  end: undefined,
  epochs: undefined,
});

// Set up event handlers for the buttons to render charts.

document
  .getElementById('simple')!
  .addEventListener('click', (ev: MouseEvent) => {
    clearAndDraw(getData());
  });

document
  .getElementById('simple-start-end')!
  .addEventListener('click', (ev: MouseEvent) => {
    const data = getData();
    data.start = new Date('1970-01-19T12:54:05.000Z');
    data.end = new Date('1970-01-19T12:54:25.000Z');
    clearAndDraw(data);
  });

document
  .getElementById('simple-epochs')!
  .addEventListener('click', (ev: MouseEvent) => {
    const data = getData();
    data.epochs = [
      new Date('1970-01-19T12:54:10.000Z'),
      new Date('1970-01-19T12:54:11.000Z'),
      new Date('1970-01-19T12:54:12.000Z'),
      new Date('1970-01-19T12:54:13.000Z'),
      new Date('1970-01-19T12:54:14.000Z'),
      new Date('1970-01-19T12:54:15.000Z'),
      new Date('1970-01-19T12:54:16.000Z'),
      new Date('1970-01-19T12:54:17.000Z'),
      new Date('1970-01-19T12:54:18.000Z'),
      new Date('1970-01-19T12:54:19.000Z'),
      new Date('1970-01-19T12:54:20.000Z'),
    ];
    clearAndDraw(data);
  });