Code Monkey home page Code Monkey logo

gantt's Introduction

Gantt Chart

Gantt chart library using jsx support SVG, Canvas and SSR

NPM version NPM downloads Greenkeeper badge

Install

$ npm install gantt --save

Usage

View demo online

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,
  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,
  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,
}];

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();

image

API

interface Link {
  target: number,
  type: 'FS' | 'FF' | 'SS' | 'SF'
}

interface Item {
  id: number,
  parent: number,
  text: string,
  start: Date,
  end: Date,
  percent: number,
  links: Array<Link>
}

type StyleOptions = {
  bgColor: string,           // default: '#fff'
  lineColor: string,         // default: '#eee'
  redLineColor: string,      // default: '#f04134'
  groupBack: string,         // default: '#3db9d3'
  groupFront: string,        // default: '#299cb4'
  taskBack: string,          // default: '#65c16f'
  taskFront: string,         // default: '#46ad51'
  milestone: string,         // default: '#d33daf'
  warning: string,           // default: '#faad14'
  danger: string,            // default: '#f5222d'
  link: string,              // default: '#ffa011'
  textColor: string,         // default: '#222'
  lightTextColor: string,    // default: '#999'
  lineWidth: string,         // default: '1px'
  thickLineWidth: string,    // default: '1.4px'
  fontSize: string,          // default: '14px'
  smallFontSize: string,     // default: '12px'
  fontFamily: string,        // default: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
}

type Options = {
  viewMode: 'day' | 'week' | 'month',
  onClick: (item: Item) => {},
  offsetY: number,               // default: 60,
  rowHeight: number,             // default: 40,
  barHeight: number,             // default: 16,
  thickWidth: number,            // default: 1.4,
  styleOptions: StyleOptions
}

declare class SVGGantt {
  constructor(element: string | HTMLElement, data: Array<Item>, options: Options);
  setData(data: Array<Item>): void;      // set data and re-render
  setOptions(options: Options): void;    // set options and re-render
  render(): void;
}

declare class CanvasGantt {
  constructor(element: string | HTMLElement, data: Array<Item>, options: Options);
  setData(data: Array<Item>): void;      // set data and re-render
  setOptions(options: Options): void;    // set options and re-render
  render(): void;
}

declare class StrGantt {
  constructor(data: Array<Item>, options: Options);
  setData(data: Array<Item>): void;
  setOptions(options: Options): void;
  render(): string;
}

Report a issue

License

Gantt is available under the terms of the MIT License.

gantt's People

Contributors

helloyou2012 avatar greenkeeper[bot] avatar nickicindy avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.