Usage

To use Sunorhc.Timeline on a web page, please follow the steps below.

1. Include the CSS file in the head tag of your HTML and load the JS file before the end of the body tag.

   <link rel="stylesheet" src="/path/to/dists/css/sunorhc.timeline.css">
   
   <script src="/path/to/dists/js/sunorhc.timeline.js"></script>

2. Then, prepare a container element within the body tag to display the timeline.

   <div id="myTimeline"></div>

3. Finally, instantiate the timeline component within the script tag to complete the process.

   Sunorhc.Timeline.create('myTimeline', { sidebar: { items: [ { type: 'text', label: 'Row 1'} ] } })

Note: Currently instantiation will fail unless at least one sidebar item is defined.

Note: The instantiated timeline component is automatically registered to the global Window object. To access the instance after it is created, refer to the window.SunorhcTimelineInstances property.

Instantiation Tips

• To control the component after it is instantiated, we recommend using asynchronous instantiation, as see below.

  (async () => {
    await Sunorhc.Timeline.create('myTimeline', { options... })
    .then(thisInstance => {
        console.log(window.SunorhcTimelineInstances, thisInstance.getOptions())
    })
  })()

  or

  (async () => {
    const ST = await Sunorhc.Timeline.create('myTimeline', { options... })
    console.log('Timeline instancenated:', ST.getOptions())
  })()

• It is also possible to define instantiation options for a timeline as a dataset attribute within its container element.

  <div id="myTimeline"
    data-options="{
      start: '2024-06-01',
      end  : '2024-06-30',
      scale: 'day',
      header: { display: true, label: 'My Timeline Name' },
      footer: { display: true, label: '&copy; copyright' },
      sidebar: { placement: 'left', itemHeight: 200, items: [ { type: 'text', label: 'Pointer Events' }, { type: 'text', label: 'Bar Events'} ] },
      ruler: { placement: 'bottom', top: { rows: ['month', 'day', 'weekday'] }, bottom: { rows: ['weekday', 'day', 'month'] } },
      layout: { outlined: 'both', width: 'auto', height: 'auto' },
      zoomable: true,   
    }"
  ></div>

  In this case, instantiate the instance factory method without including any optional arguments.

  Sunorhc.Timeline.create('myTimeline')

• You can also separate the timeline options from the HTML by specifying an external JSON file in the dataset attribute.

  <div id="myTimeline" data-options="timeline-options.json"></div>

  Again, the instance factory methods are simpler in this case as well.

  Sunorhc.Timeline.create('myTimeline')

  This instantiation is useful when you want to separate the generation of timeline instances from the front-end and manage them in a separate system such as the back-end.