Initialize Instance

<div id="gantt"></div>

import Gantt from 'bbl-gantt'
const gantt = new Gantt({
	// options
})

Options

export type GanttOptions = {
	el: ContainerType //  container element, can be a selector string or HTMLElement object
	mode?: GanttMode // mode, normal or duration
	durationModeOptions?: DurationModeOptions //  only works when mode is 'duration'
	readOnly?: boolean //  is readonly, while true, cannot edit data
	column?: Column // column config
	// row config
	row?: {
		height?: number // row height
	}
	// header config
	header?: {
		height?: number // header height
	}
	// view config
	view?: {
		timeFullWidth?: boolean //Whether the time covers the entire width, and then automatically calculate the gantt.column.timeMetric and gantt.column.width based on the width and start and end times, only taking effect in the mode=duration mode
		headerTimeFormat?: (args: HeaderTimeFormatArgs) => string // time format function
		whileShowScrollReduceScrollBarSize?: boolean // while container show scroll bar, reduce container size
		whileRowsLessContainerAutoReduceHeight?: boolean // while rows height less container auto reduce height
		showScrollBar?: boolean // whether to show scroll bar

		showTicks?: boolean // whether to show ticks
		showTickText?: boolean // whether to show tick text

		showTimeTicks?: boolean // whether to show the time scale ticks
		showTimeTickText?: boolean // whether to show the time scale tick text

		headerTickTextTickNeeded?: boolean // some tick text may overlap, but we only want to show non-overlapping text (set overrideHeaderTitle to true to achieve this), set this property to true to hide the tick without text part

		showEventTimeRange?: boolean // whether to show the event time range
		overrideHeaderTitle?: boolean // whether to override the header title to show non-overlapping text
		/**
		 * event item rect style padding top and bottom value, default is 0.25
		 * >1 unit is percentage, <1 unit is pixel
		 *  */
		eventRectStylePadY?: number
		tickTextAlign?: TickTextAlign | TickTextAlignFunc // tick text alignment, can be 'left' | 'center' or a function
		eventItemTimeFormat?: (time: Dayjs) => GanttEventItemTime // while normal mode, eventItemTimeFormat is a function to format the time in options.data
	}
	// action config
	action?: {
		/**
		 * mouse wheel zoom time metric in header
		 * min and max represent the minimum and maximum zoom values, unit is milliseconds
		 *  */
		headerWheelTimeMetric?:
			| boolean
			| {
					min?: number
					max?: number
			  }
		moveOrResizeStep?: boolean // move or resize event step unit by tick
		enableEventMove?: boolean // whether to enable event move
		enableEventResize?: boolean // whether to enable event resize
		enableCurrentTime?: boolean // container click to show current time
		enableMoveOrResizeOutOfEdge?: boolean // whether to enable moving or resizing events outside the edge of the container
		enableNewEventItem?: boolean // whether to enable creating new event item
		hoverEventShowTimeRange?: boolean // whether to show the event time range when hovering over the event
	}
	data?: GanttItem[] // data
}

export type Column = {
	width: number // column width
	timeMetric: number | TimeMetric | 'auto' // time metric or milliseconds, represents the time length of each column. When set to 'auto', the system automatically calculates an appropriate time metric based on the data's time range
	padding: {
		// duration mode is unvalidate, all padding is 0
		// accord to all data, calculate how many columns the data needs to be divided into, the padding represents how many blank columns to leave before and after these columns
		left: number
		right: number
	}
}

export enum TimeMetric {
	SECOND = 'SECOND',
	MINUTE = 'MINUTE',
	QUARTER_HOUR = 'QUARTER_HOUR',
	HALF_HOUR = 'HALF_HOUR',
	HOUR = 'HOUR',
	QUARTER_DAY = 'QUARTER_DAY',
	HALF_DAY = 'HALF_DAY',
	DAY = 'DAY',
	WEEK = 'WEEK',
	MONTH = 'MONTH',
	YEAR = 'YEAR',
}

timeMetric Auto Calculation Rules

When column.timeMetric is set to 'auto', the system automatically selects an appropriate time metric based on the data's time range (duration):

Time Range (duration)	Auto-selected timeMetric
< 3 seconds	SECOND
3 seconds ~ 15 minutes	MINUTE
15 minutes ~ 6 hours	HOUR
6 hours ~ 3.5 days	DAY
3.5 days ~ 15 days	WEEK
15 days ~ 90 days	MONTH
≥ 90 days	YEAR

Tip

The auto-calculation feature is especially useful for scenarios where the data time range is not fixed. The system intelligently selects the most appropriate time scale to display the data.

export type HeaderTimeFormatArgs = {
	gantt: Gantt
	time: Dayjs
	unit: UnitType
	type: 'currentTime' | 'timeRange' | 'tick'
}

export type DurationModeOptions = {
	duration: number // duration length, unit is seconds, decimal point to the third decimal place
}

export type ContainerType = string | HTMLElement

export enum GanttMode {
	Normal = 'normal',
	Duration = 'duration',
}

export type GanttItem = {
	id: string
	name: string
	events: GanttEventItem[]
	children?: GanttItem[]
	bg?: string
	[key: string]: any
}

export type GanttEventItem = {
	id: string
	start: GanttEventItemTime
	end: GanttEventItemTime
	name: string
	shape?: EventShapeType
	color?: string
	textColor?: string
	[key: string]: any
}

export type GanttEventItemTime = string | number | Date | Dayjs

export type TickTextAlign = 'left' | 'center'

export type TickTextAlignFunc = (args: {
	time: Dayjs
	index: number
}) => TickTextAlign

export enum EventShapeType {
	rect = 'rect',
	line = 'line',
}