Add API documentation

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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-gantt-chart",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Dieter Oberkofler <[email protected]>",
   "license": "MIT",
   "description": "Very simple vanilla JavaScript library for displaying projects as Gantt Charts.",

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<number>} [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<number>,
 };
 
+/**
+*	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<headerColumnType>} [columns] - The columns of the tree.
+*/
 export type optionsType = {
 	treeWidthPercentage?: number,
 	columns?: Array<headerColumnType>,
 };
 
+/**
+* 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<taskType>} 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<taskType>): 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);
 	}

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<number>} [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<number>;
 };
 
+/**
+*	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<headerColumnType>} [columns] - The columns of the tree.
+*/
 export declare type optionsType = {
 	treeWidthPercentage?: number;
 	columns?: Array<headerColumnType>;
 };
 
+/**
+* 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<taskType>} 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<taskType>): 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;
 }