gantt-extended

Gantt Chart Extended Version

News

This is an extended version of github.com/d-band/gantt

• It provides visualization of different time units from Months to Seconds
• Added different color for each data item feature
• Added feature to display or not the start and end date of every bar on the chart
• Version 1.0.2 updating maxTextWidth when changing data source.
• Version 1.0.3 feature for showing a second color with an offset from starting point of each Bar.

• If you don't want a second color just  set the 'showOffset' variable to false or not mention it at all.
  

Install

$ npm install gantt-extended --save

Usage

import { SVGGantt, CanvasGantt, StrGantt } from 'gantt';

const data = [{
  id: 1,
  type: 'group',
  text: '1 Waterfall model',
  start: new Date('2018-10-10T09:24:24.319Z'),
  end: new Date('2018-12-12T09:32:51.245Z'),
  percent: 0.71,
  // feature in Version 1.0.3
  offset: [
           {
            start: new Date('2018-10-10T09:26:24.319Z'),
            percent: 0.25 // percent of the total width of the bar
           },
         ] // if you want more colors on the same bar, JSON objects to the offset array above
  links: []
}, {
  id: 11,
  parent: 1,
  text: '1.1 Requirements',
  start: new Date('2018-10-21T09:24:24.319Z'),
  end: new Date('2018-11-22T01:01:08.938Z'),
  percent: 0.29,
  // feature in Version 1.0.3
  offset: [
           {
            start: new Date('2018-10-21T19:26:24.319Z'),
            percent: 0.45 // percent of the total width of the bar
           },
         ] // if you want more colors on the same bar, JSON objects to the offset array above
  links: [{
    target: 12,
    type: 'FS'
  }]
}, {
  id: 12,
  parent: 1,
  text: '1.2 Design',
  start: new Date('2018-11-05T09:24:24.319Z'),
  end: new Date('2018-12-12T09:32:51.245Z'),
  percent: 0.78,
  // To change a bar color
  color: 'red'
}];

new SVGGantt('#svg-root', data, {
  viewMode: 'week'
});

new CanvasGantt('#canvas-root', data, {
  viewMode: 'week'
});

const strGantt = new StrGantt(data, {
  viewMode: 'week'
});
this.body = strGantt.render();

Options

{
  // View mode: day/week/month
  viewMode: 'week',
  onClick: (item) => {},
  offsetY: 60,
  rowHeight: 40,
  barHeight: 16,
  thickWidth: 1.4,
  styleOptions: {
    bgColor: '#fff',
    lineColor: '#eee',
    redLineColor: '#f04134',
    groupBack: '#3db9d3',
    groupFront: '#299cb4',
    taskBack: '#65c16f',
    taskFront: '#46ad51',
    milestone: '#d33daf',
    warning: '#faad14',
    danger: '#f5222d',
    // here we set the offset color
    offsetColor: '#fafafa',
    link: '#ffa011',
    textColor: '#222',
    lightTextColor: '#999',
    lineWidth: '1px',
    thickLineWidth: '1.4px',
    fontSize: '14px',
    smallFontSize: '12px',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
  }
   // To display every item's color (default: true, relies on the procent fill)
   showDelay: false,
   // To display the second color on top of the main Bar
   showOffset: true, // (by default it's false)
   // To hide start and end values from dates on the bars (default: true)
   displayStartEndDates: false
}

License

Gantt Chart Extended is available under the terms of the MIT License.