cylaotimelinenpm v1.0.8

Getting started

Usage

call paramters: new Timeline(element, eventEmitter, data, options)

import {TimelineChart,TYPE } from 'cylaotimelinenpm';
 let ee = new events.EventEmitter();
    const element = document.getElementById('timeline');

    const timeline = new TimelineChart(element,
     ee,
     this.data, 
      {
      tip: function(d) {
          return d.at || `${d.from}<br>${d.to}`;
      }
    });

    ee.on('clickDot', function(d){
        alert(d.at);
    });

    ee.on('clickInterval', function(d){
        alert(d.label);
    });

You can use EventEmitter to call events on click dots or interval to show whatever you want.

Options

    locale: fr_FR,  // A TimeLocaleDefinition
    intervalMinWidth: 10, // px
    tip: function(d) {return d.at || ${d.from}<br>${d.to};}, //Show Tooltips
    textTruncateThreshold: 30,
    hideGroupLabels: false,
    width:1600,
    height:600,
    textWidth:10

TimeLocale Exemple:

 var fr_FR: TimeLocaleDefinition = {
    "dateTime": "%A, le %e %B %Y, %X",
    "date": "%d/%m/%Y",
    "time": "%H:%M:%S",
    "periods": ["AM", "PM"],
    "days": ["dimanche", "lundi", "mardi", "mercredi", "jeudi""vendredi", "samedi"],
    "shortDays": ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.""sam."],
    "months": ["janvier", "février", "mars", "avril", "mai", "juin",         "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
    "shortMonths": ["janv.", "févr.", "mars", "avr.", "mai", "juin""juil.", "août", "sept.", "oct.", "nov.", "déc."]
          };

Data Example:

private data = [{
        label: 'Name',
        data: [{
            type: "POINT",
            at: new Date(2016, 5, 1),
            color:"blue"
        }, {
            type: "POINT",
            at: new Date(2016, 6, 1)
        }, {
            type: "POINT",
            at: new Date(2016, 6, 1),
            color:"red"
        }, {
            type: "POINT",
            at: new Date(2016, 8, 1)
        }, {
            type: "POINT",
            at: new Date(2016, 9, 1)
        }, {
            type: "POINT",
            at: new Date(2016, 10, 1),
            color:"red"
        }]
    }, {
        label: 'Name 1',
        data: [{
            label: 'Label 1',
            labelColor:'green',
            type: "INTERVAL",
            from: new Date(2016, 5, 15),
            to: new Date(2016, 7, 1)
        }, {
            label: 'Label 2',
            type: "INTERVAL",
            from: new Date(2016, 6, 1),
            to: new Date(2016, 8, 1),
            color:"green"
        },{
            label: 'Label 1',
            type: "INTERVAL",
            from: new Date(2016, 7, 10),
            to: new Date(2016, 9, 15)
        }]
    }];