Skip to content

A simple Gantt chart table tool that does not depend on third-party frameworks. 一个甘特图表格工具,不依赖于第三方库

License

Notifications You must be signed in to change notification settings

waterbeside/oh-my-gantt

Repository files navigation

OH-MY-GANTT

English | 简体中文

Oh-my-gantt is a simple Gantt chart table tool that does not depend on third-party frameworks and can be integrated with major Javascript frameworks.

Installation

NPM

npm install oh-my-gantt -S
# or 
yarn add oh-my-gantt
// import to your js or ts
import 'oh-my-gantt/dist/index.css'
import { OhMyGantt } from 'oh-my-gantt'

Direct <script> Include

<link rel="stylesheet"  href="https://unpkg.com/oh-my-gantt@1.2.7/dist/index.css" />
<script src="https://unpkg.com/oh-my-gantt@1.2.7/dist/index.umd.js"></script>
<script>
  var OhMyGantt = OMG.OhMyGantt
<script>

Usage

HTML

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

JavaScript

const data = [
  {
    name: 'Task 1',
    timebar: [
      {
        from: '2021-12-01',
        to: '2021-12-03',
        desc: 'Task 1',
      },
    ]
  },
  {
    name: 'Task 2',
    timebar: [
      {
        from: '2021-12-04',
        to: '2021-12-05',
        desc: 'Task 2',
        __config: { style: { backgroundColor: 'rgb(36, 112, 122)' } }
      },
    ]
  },
]

const gantt = new OhMyGantt('#gantt-box', {
  from: '2021-12-01',
  to: '2021-12-31',
  timeInterval: 'day',
  timeCellWidth: 120,
  columns: [
    {
      name: 'name',
      label: 'Task Name',
      width: 140,
    }
  ],
  data
})

  • Refer to docs/examples/advanced.html to draw something similar to the one shown above.
  • The picture indicates the elements of dataGrid, timeGrid, markLine, timebar, etc.

OhMyGantt Instance

The OhMyGantt constructor wraps two parameters: element and Options

const myGanttInstacne = new OhMyGantt(element, {
  // ...Options
})

element

Provide the OhMyGantt instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement.

Options

Option Descript Type Default value / Params Return
from Set the start time of the Gantt chart table display Date | string
to Set the end time of the Gantt chart table display Date | string
timeInterval Set the time interval of the time column 'day' |'hour' | 'week' | 'month' | 'year' | number 'day'
dataGridWidth The width setting of the data grid(the table on the left). number 240
timeCellWidth The width of each column of the time grid number 120
timebarHeight height of the timebar number 32
timebarDraggable Whether the timebar allows dragging boolean false
columns Data grid field settings ColumnItem[]
data Data content for display MyGanttDataItem
timebarRenderer A function for customizing the content rendered by the timebar (TimebarData, OhMyGantt) string or HTMLElement or null
timeGridCellRenderer A function to customize the rendered content of timetable cells (data: ColumnItem, columnIndex: number, ctx: OhMyGantt)
timeLabelRenderer The function used to customize the rendered content of the sub-content of the header cell of the timetable header (data: ColumnItem, columnIndex: number, ctx: OhMyGantt) string or HTMLElement or null
onClickTimebar Event fired when Timebar is clicked (TimebarData, Event)
onMouseoverTimebar Event fired when the mouse passes the Timebar (TimebarData, Event)
onMouseleaveTimebar Event fired when the mouse leaves the Timebar (TimebarData, Event)
onDragTimebar Event fired when timebar is dragged (TimebarData, Event)
onDragstartTimebar Event fired when the timebar starts to be dragged (TimebarData, Event)
onDragendTimebar Event fired when the timebar is finished dragging (TimebarData, Event)
onClickCell Event fired when cell is clicked ( CellData, Event)
onDropCell The event fired when the timebar is dragged and dropped to the cell (CellData, Event)
onDragoverCell The event fired when the timebar is drag over the cell (CellData, Event)
onDragenterCell The event triggered when the timebar is dragged enter the cell (CellData, Event)
onDragleaveCell Event fired when timebar is dragged away from cell (CellData, Event)
onScroll Event fired when table scrolls (GridScrollData, Event)
onCreated Event fired after the line executes new OhMyGantt(Element, Options) (OhMyGantt)
onRendered Event fired after rendering the table (OhMyGantt)

Methods and Props

Prop/Method Descript Type Return
element The target Dom that was mounted when the instance was created Element
data The data set when the instance was created MyGanttDataItem[]
timeList Time list of all time in the time grid Date[]
from Start time of the time grid Date
to End time of the time grid Date
options Setting items when creating an instance Options
$elements The object of the HTMLElement object that stores the data table and the time table after the instance is created {
dataGrid: HTMLElement | null,
timeGrid: HTMLElement | null
}
renderDataGrid Method: Render the left table (Data grid ()=>[HTMLElement, number]
Returns the HTMLElement of the data grid and its width
renderTimeGrid Method: Render the right table (Time grid) ()=>[HTMLElement, number]
Returns the HTMLElement of the time grid and its width
render Method: Render the table (the renderDataGrid and renderTimeGrid methods will be executed) ()=>void
getScrollTop Method: Get the scroll top of the table () => number Return scroll top
getRowDataByIndex Get the data of the row by the index value of the row (index: number) => MyGanttDataItem | null return the row of data
getRowDataById Get the row data by row id (index: number) => MyGanttDataItem | null return the row of data
setMarkLine Set a mark line (markLine: MarkLine)=> void
removeMarkLine remove a mark line (markLine: MarkLine)=> void
scrollToTime The time grid scrolls horizontally to the specified time (time: Date string)=> void
setScrollTop Scroll the table to the specified height (top: number)=> void
scrollToRow Scrolls the table to the specified row by row id or index value ({index: number})=> void |
({id: string | number })=> void

Type and interface

MyGanttDataItem

Props Descript Type Required
timebar timebar设置 TimebarSetting[]
__config The related settings for this row { height?: number, [key: string]: any}
[key: string] 数据表格有其它任意数据 any

TimebarSetting

Props Descript Type Required
from Start time of timebar Date | string Yes
to End time of timebar Date | string Yes
__config The relevant settings of the timebar { style?: number, [key: string]: any}

ColumnItem

Props Descript Type Required
name column name string Yes
label This column displays the content of the header string Yes
width set column width number
sourceData Customized data content (if it is in the time table, it will be automatically generated, and its value is the timestamp of the time in this column) any

CellData

Props Descript Type
rowData Data of the current row any
$target The HTMLElement for the current cell HTMLElement
rowIndex The index value of the current row number
value The value of the current cell any
columnIndex The index value of the current column number
columnName The name of the current column any

TimebarData

Props Descript Type
rowData Data of the current row any
$target The HTMLElement for the current timebar HTMLElement
rowIndex The index value of the row where the current timebar is located number
value The value of the current timebar starting cell (usually the timestamp of the column time) string
columnIndex The index value of the current timebar starting cell any
timeColumnsIndex The index of the field occupied by the current timebar any
timebarItemData Current timebar related settings TimebarSetting

MarkLine instance

import { MarkLine } from 'oh-my-gantt'

const markLineInstance = new MarkLine({
  // ...MarkLine Options
})

// add a markLine
myGanttInstacne.setMarkLine(markLineInstance)

// remove markLine
myGanttInstacne.removeMarkLine(markLineInstance)

MarkLine Options

Option Descript Type Default Required
time The time corresponding to the time grid date | string Yes
label The text content displayed by the marker line label string Yes
color The color of the mark line string '#0086d4'
lineStyle Line style 'solid' | 'dashed' | 'dotted' 'solid'
lineWidth Line width number 1

The props of the MarkLine instance

Props Descript Type
options Setting items when creating MarkLine MarkLineOptions
id Unique ID generated when MarkLine is created string
$element HTMLElement generated when MarkLine is created HTMLElement

About

A simple Gantt chart table tool that does not depend on third-party frameworks. 一个甘特图表格工具,不依赖于第三方库

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published