Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/seven-33/gantt-chart
Simple, interactive and highly customizable Gantt chart component for Vue 3
https://github.com/seven-33/gantt-chart
gantt gantt-chart gantt-diagram project-management typescript vue vue3 vuejs
Last synced: 4 days ago
JSON representation
Simple, interactive and highly customizable Gantt chart component for Vue 3
- Host: GitHub
- URL: https://github.com/seven-33/gantt-chart
- Owner: Seven-33
- Created: 2023-03-12T13:41:56.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-03-12T13:45:55.000Z (over 1 year ago)
- Last Synced: 2024-07-29T21:20:07.730Z (4 months ago)
- Topics: gantt, gantt-chart, gantt-diagram, project-management, typescript, vue, vue3, vuejs
- Language: TypeScript
- Homepage:
- Size: 1.33 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Vue Ganttastic
Vue Ganttastic is a simple, interactive and highly customizable Gantt chart component for Vue 3.
## Features
- **[Vue 3](https://v3.vuejs.org/) support**
- **[TypeScript](https://www.typescriptlang.org/) support** *(ships with out of the box type declarations)*
- **Interactivity** *(dynamic, moveable, pushable bars with various event handlers)*
- **Reactivity / Responsiveness** (*bars will be properly repositioned on width resize*)
- **Customization options** (*chart and bar styling, changes in behavior, slots, event handlers etc.*)
- **[Day.js](https://day.js.org/en/) support** *(uses Day.js under the hood for date-time manipulation)*
Using Vue 2? Check out [Vue-Ganttastic v1](https://github.com/zunnzunn/vue-ganttastic/tree/vue-ganttastic-v1).
## Quickstart
Install using
```
npm install @infectoone/vue-ganttastic
```
Then, initalize the plugin in the starting point of your app (most likely src/main.js):
```js
import { createApp } from "vue"
import App from "./App.vue"
...
import ganttastic from '@infectoone/vue-ganttastic'
...
createApp(App)
.use(ganttastic)
.mount('#app')
```
This will globally register the components g-gantt-chart and g-gantt-row and you will be able to use those two components right away.
```html
import { ref } from "vue"
const row1BarList = ref([
{
myBeginDate: "2021-07-13 13:00",
myEndDate: "2021-07-13 19:00",
ganttBarConfig: { // each bar must have a nested ganttBarConfig object ...
id: "unique-id-1", // ... and a unique "id" property
label: "Lorem ipsum dolor"
}
}
])
const row2BarList = ref([
{
myBeginDate: "2021-07-13 00:00",
myEndDate: "2021-07-14 02:00",
ganttBarConfig: {
id: "another-unique-id-2",
hasHandles: true,
label: "Hey, look at me",
style: { // arbitrary CSS styling for your bar
background: "#e09b69",
borderRadius: "20px",
color: "black"
}
}
}
])
```
## Contributing
Clone the project, make some changes, test your changes out, create a pull request with a short summary of what changes you made. Contributing is warmly welcomed!
To test your changes out before creating a pull request, create a build:
```
npm run build
```
To test out the build, you should create a tarball using:
```
npm pack
```
Then, place the tarball in some other test project and install the package from the tarball by using:
```
npm install .tgz
```
## Guide and Docs
For further guides and references, check out the [official docs](https://zunnzunn.github.io/vue-ganttastic/getting-started.html).
## About
**License** [MIT](https://choosealicense.com/licenses/mit/)
**Author**: Robinsondev428
## Screenshots
