From 992e0aa04eb8c89f14f99e06359bac1c3b0c8e1a Mon Sep 17 00:00:00 2001 From: Sergey Solodyagin Date: Tue, 19 Oct 2021 00:03:14 +0300 Subject: [PATCH] chore: update README.md --- README.md | 39 ++++++++++++++++++++++++++++------ src/components/GGanttChart.vue | 8 +++---- 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 6e5afa7..c6484a9 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ A simple and easy-to-use Gantt chart component for Vue.js You can install and use Vue-Ganttastic in your project using npm: ``` -npm install vue-ganttastic +npm install @tenrok/vue-ganttastic ``` [Moment.js](https://momentjs.com/) is a peer-dependency of Vue-Ganttastic. In order for Vue-Ganttastic to work correctly, you need to install it in your project: @@ -24,10 +24,10 @@ npm install moment ## Basic Usage -Import the components GGanttChart and GGanttRow. -Use g-gantt-chart in your template, pass the desired chart start and chart end time as props (chart-start and chart-end) and add g-gantt-rows -to the default template slot. -Pass an array containing your bar objects to every row using the bars prop, while specifying the name of the properties in your bar objects that stand for the bar start and bar end time using the props bar-start and bar-end +Import the components `GGanttChart` and `GGanttRow`. +Use `g-gantt-chart` in your template, pass the desired chart start and chart end time as props (`chart-start` and `chart-end`) and add `g-gantt-row`s +to the default template slot. +Pass an array containing your bar objects to every row using the `bars` prop, while specifying the name of the properties in your bar objects that stand for the bar start and bar end time using the props `bar-start` and `bar-end` For more detailed information, such as how to style the bars or additional configuration options, please refer to the [docs](https://infectoone.github.io/vue-ganttastic-homepage/#/docs) on the project's homepage (coming soon). @@ -107,6 +107,33 @@ The following code showcases a simple usage example in a .vue SFC (Single File C ``` +## Setup + +### Parameters + +| Props(Parameter) | Type | Default | Description | +| ------------------------ | --------------- | --------- | ------------------------------------------------------------------- | +| bar-start-key | `String` | `start` | property name of the bar objects that represents the start datetime | +| bar-end-key | `String` | `end` | property name of the bar objects that represents the end datetime | +| chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` | +| chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` | +| grid | `Boolean` | `false` | hide/show grid | +| grid-size | `Number` | `30` | horizontal cell width in pixels | +| height | `String` | - | the total height of the entire ganttastic component | +| hide-timeaxis | `Boolean` | `false` | hide timeaxis | +| highlighted-days | `Array` | `[]` | format of day `YYYY-MM-DD` | +| highlighted-hours | `Array` | `[]` | | +| is-magnetic | `Boolean` | - | magnetic effect | +| locale | `String` | `en` | localization | +| may-add | `Boolean` | `true` | add new bar on double click | +| precision | `String` | `month` | day, month | +| push-on-overlap | `Boolean` | - | | +| row-height | `Number` | `40` | | +| row-label-width | `Number` | `200` | label width in pixels | +| snap-back-on-overlap | `Boolean` | - | | +| theme | `String` | `default` | | +| width | `String` | `100%` | the total width of the entire ganttastic component | + ## Contributing Pull requests are warmly welcomed, while every major change or proposal ought to be discussed in an issue first. As the project is still new, I will gladly accept suggestions, proposals, contributions etc. @@ -119,7 +146,7 @@ Pull requests are warmly welcomed, while every major change or proposal ought to npm install -g @vue/cli npm install -g @vue/cli-service-global ``` -3. App.vue is a dedicated Vue SFC where all Vue-Ganttastic features can be +3. `App.vue` is a dedicated Vue SFC where all Vue-Ganttastic features can be played around with and tested out. Get it running using: ``` npm run serve diff --git a/src/components/GGanttChart.vue b/src/components/GGanttChart.vue index 9eb5176..6021ff1 100644 --- a/src/components/GGanttChart.vue +++ b/src/components/GGanttChart.vue @@ -54,14 +54,14 @@ export default { }, props: { - chartStart: { type: String }, - chartEnd: { type: String }, - hideTimeaxis: { type: Boolean }, + chartStart: { type: String, required: true }, + chartEnd: { type: String, required: true }, + hideTimeaxis: { type: Boolean, default: false }, rowLabelWidth: { type: Number, default: 200 }, rowHeight: { type: Number, default: 40 }, locale: { type: String, default: 'en' }, theme: { type: String }, - grid: { type: Boolean }, + grid: { type: Boolean, default: false }, gridSize: { type: Number, default: 30 }, highlightedHours: { type: Array, default: () => [] }, highlightedDays: { type: Array, default: () => [] }, // format YYYY-MM-DD