vue-ganttastic

WebJar for vue-ganttastic

License	MIT
Categories	Ant Build Tools
GroupId	org.webjars.npm
ArtifactId	vue-ganttastic
Last Version	0.9.32
Release Date	Feb 24, 2021
Type	jar
Description	vue-ganttastic WebJar for vue-ganttastic
Project URL	https://www.webjars.org
Source Code Management	https://github.com/InfectoOne/vue-ganttastic

Download vue-ganttastic

Filename	Size
vue-ganttastic-0.9.32.pom
vue-ganttastic-0.9.32.jar	17 KB
vue-ganttastic-0.9.32-sources.jar	22 bytes
vue-ganttastic-0.9.32-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-ganttastic/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-ganttastic</artifactId>
    <version>0.9.32</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/vue-ganttastic/
implementation 'org.webjars.npm:vue-ganttastic:0.9.32'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/vue-ganttastic/
implementation ("org.webjars.npm:vue-ganttastic:0.9.32")

Apache Buildr

'org.webjars.npm:vue-ganttastic:jar:0.9.32'

Apache Ivy

<dependency org="org.webjars.npm" name="vue-ganttastic" rev="0.9.32">
  <artifact name="vue-ganttastic" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='vue-ganttastic', version='0.9.32')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "vue-ganttastic" % "0.9.32"

Leiningen

[org.webjars.npm/vue-ganttastic "0.9.32"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

vue-ganttastic

A simple and easy-to-use Gantt chart component for Vue.js

Homepage

Homepage of the project

Installation

You can install and use Vue-Ganttastic in your project using npm:

npm install vue-ganttastic

Moment.js is a peer-dependency of Vue-Ganttastic. In order for Vue-Ganttastic to work correctly, you need to install it in your project:

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

For more detailed information, such as how to style the bars or additional configuration options, please refer to the docs on the project's homepage (coming soon).

The following code showcases a simple usage example in a .vue SFC (Single File Component)

<template>
  ...

  <g-gantt-chart
    :chart-start="myChartStart"
    :chart-end="myChartEnd"
  >
    <g-gantt-row
      v-for="row in rows"
      :key="row.label"
      :label="row.label"
      :bars="row.bars"
      bar-start="myStart"
      bar-end="myEnd"
    />
  </g-gantt-chart>

  ...
</template>

<script>

import {GGanttChart, GGanttRow} from 'vue-ganttastic'

export default {

  ...

  components:{
    GGanttChart,
    GGanttRow
  },

  data(){
    return {
      myChartStart: "2020-03-01 00:00",
      myChartEnd: "2020-03-03 00:00",
      rows: [
        {
          label: "My row #1",
          bars: [
            {
              myStart: "2020-03-01 12:10",
              myEnd: "2020-03-01 16:35"
            }
          ]
        },
        {
          label: "My row #2",
          bars: [
            {
              myStart: "2020-03-02 01:00",
              myEnd: "2020-03-02 12:00"
            },
            {
              myStart: "2020-03-02 13:00",
              myEnd: "2020-03-02 22:00"
            }
          ]
        }
      ]
    }
  }

  ...

}
</script>

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.

Contributing - How to run the project

1. Clone the project
2. Install the Vue CLI service, if you don't already have it installed:

     npm install -g @vue/cli
     npm install -g @vue/cli-service-global
   

3. Playground.vue is a dedicated Vue SFC where all Vue-Ganttastic features can be played around with and tested out. Get it running using:

     vue serve src/Playground.vue
   

Dependencies

Moment.js

License

MIT

Versions

Version
0.9.32 Feb 24, 2021