diff --git a/CHANGELOG.md b/CHANGELOG.md index abe1025..1b0ae2d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,11 +6,21 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). -## [0.0.1] - 2020-03-06 +## [?.?.?] - ????-??-?? ### Added -- Initial release. - ### Changed - ### Fixed + + +## [0.0.2] - 2020-03-08 + +### Added +- API documentation. +- Unit tests with a coverage of about 95%. + + +## [0.0.1] - 2020-03-06 + +### Added +- Initial release. diff --git a/package.json b/package.json index 6a02a7d..76b0a32 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simple-gantt-chart", - "version": "0.0.1", + "version": "0.0.2", "author": "Dieter Oberkofler ", "license": "MIT", "description": "Very simple vanilla JavaScript library for displaying projects as Gantt Charts.", diff --git a/src/index.ts b/src/index.ts index 4849fbf..7b34e37 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,6 +2,16 @@ import {Config} from './config'; import {setData} from './data'; import {render} from './render'; +/** +* Task type definition. +* +* @typedef {Object} taskType +* @property {string} id - The unique id of the task. +* @property {string} text - The title of the task. +* @property {Date} startDate - The start date of the task. +* @property {number} days - The duration in days of the task. +* @property {Array} [dependencies] - The optional list of tasks this tasks depends upon. +*/ export type taskType = { id: number, text: string, @@ -10,32 +20,82 @@ export type taskType = { dependencies?: Array, }; +/** +* Tree column type definition. +* +* @typedef {Object} headerColumnType +* @property {string} id - The unique id of the column. +* @property {string} title - The title of the column. +* @property {string} [width] - The optional width in pixel of the column. +*/ export type headerColumnType = { id: string, title: string, width?: number, }; +/** +* Gantt chart configuration options type definition. +* +* @typedef {Object} optionsType +* @property {number} [treeWidthPercentage] - The percentual width of the tree. +* @property {Array} [columns] - The columns of the tree. +*/ export type optionsType = { treeWidthPercentage?: number, columns?: Array, }; +/** +* Gantt Chart. +*/ export class GanttChart { readonly #config: Config; // eslint-disable-line @typescript-eslint/explicit-member-accessibility + /** + * Constructor. + * + * @example const gantt = new GanttChart(); + */ public constructor() { this.#config = new Config(); } + /** + * Set configuration options. + * + * @param {optionsType} options - The configuration object. + * + * @example gantt.setConfig({treeWidthPercentage: 50}); + */ public setConfig(options: optionsType): void { this.#config.setConfig(options); } + /** + * Set the tasks and dependencies. + * + * @param {Array} tasks - The tasks in the prject. + * + * @example + * + * gantt.setData([ + * {id: 1, text: 'Planning', startDate: new Date('2020-01-01'), days: 1}, + * {id: 2, text: 'Analysis', startDate: new Date('2020-01-02'), days: 1, dependencies: [1]}, + * ]); + * + */ public setData(tasks: Array): void { setData(tasks, this.#config); } + /** + * Render the gantt chart in a given element. + * + * @param {HTMLElement} container - The container element. + * + * @example gantt.render(document.getElementById('gantt_here')); + */ public render(container: HTMLElement): void { render(container, this.#config); } diff --git a/types/index.d.ts b/types/index.d.ts index 78dbc4e..274a213 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,3 +1,13 @@ +/** +* Task type definition. +* +* @typedef {Object} taskType +* @property {string} id - The unique id of the task. +* @property {string} text - The title of the task. +* @property {Date} startDate - The start date of the task. +* @property {number} days - The duration in days of the task. +* @property {Array} [dependencies] - The optional list of tasks this tasks depends upon. +*/ export declare type taskType = { id: number; text: string; @@ -6,19 +16,73 @@ export declare type taskType = { dependencies?: Array; }; +/** +* Tree column type definition. +* +* @typedef {Object} headerColumnType +* @property {string} id - The unique id of the column. +* @property {string} title - The title of the column. +* @property {string} [width] - The optional width in pixel of the column. +*/ export declare type headerColumnType = { id: string; title: string; width?: number; }; +/** +* Gantt chart configuration options type definition. +* +* @typedef {Object} optionsType +* @property {number} [treeWidthPercentage] - The percentual width of the tree. +* @property {Array} [columns] - The columns of the tree. +*/ export declare type optionsType = { treeWidthPercentage?: number; columns?: Array; }; +/** +* Gantt Chart. +*/ export declare class GanttChart { + /** + * Constructor. + * + * @example const gantt = new GanttChart(); + */ + constructor(); + + /** + * Set configuration options. + * + * @param {optionsType} options - The configuration object. + * + * @example gantt.setConfig({treeWidthPercentage: 50}); + */ setConfig(options: optionsType): void; + + /** + * Set the tasks and dependencies. + * + * @param {Array} tasks - The tasks in the prject. + * + * @example + * + * gantt.setData([ + * {id: 1, text: 'Planning', startDate: new Date('2020-01-01'), days: 1}, + * {id: 2, text: 'Analysis', startDate: new Date('2020-01-02'), days: 1, dependencies: [1]}, + * ]); + * + */ + setData(tasks: Array): void; + /** + * Render the gantt chart in a given element. + * + * @param {HTMLElement} container - The container element. + * + * @example gantt.render(document.getElementById('gantt_here')); + */ render(container: HTMLElement): void; }