DOCSEARCHbyAlgolia
Submit Docs

Vue Ganttastic

repository·master·Indexed 20 days ago

https://github.com/zunnzunn/vue-ganttastic

A simple, interactive, and highly customizable Gantt chart component for Vue 3 applications. It provides components like g-gantt-chart and g-gantt-row to build timelines with support for custom precision (hour, day, week, month), bar bundling, overlap prevention, and deep styling via ganttBarConfig. The library includes built-in event handling for bar interactions and supports custom themes and locales via Day.js.

Tokens
10.1K
Snippets
32
Records
42
Agent score
71%

What's inside @infectoone/vue-ganttastic

  1. Overview of Vue Ganttastic features

    master

    Vue Ganttastic is an interactive and highly customizable Gantt chart component designed specifically for Vue 3. It provides built-in TypeScript support with out-of-the-box type declarations.

    Key capabilities include:

    • Interactivity: Bars are dynamic, movable, and pushable.
    • Reactivity/Responsiveness: The chart automatically repositions bars when changes occur.
    • Customization: Extensive options for chart and bar styling, including the use of slots and event handlers.

  2. Get started with Vue-Ganttastic

    master
    Vue-Ganttastic is a simple, interactive, and highly customizable Gantt chart component for Vue.js. It is built with Vue 3 and TypeScript, providing out-of-the-box type declarations. You can use it to create dynamic Gantt charts with movable bars and custom styling for both the chart and individual bars.

  4. Manage bar overlapping and bundling

    master

    Vue Ganttastic provides mechanisms to handle how bars interact when they occupy the same time space:

    • no-overlap: A boolean prop on <g-gantt-chart> that prevents bars from overlapping in the same row.
    • push-on-overlap: A boolean prop on <g-gantt-chart> that causes bars to be pushed to different rows when they overlap.
    • Bundling: You can group bars together using the bundle key inside the ganttBarConfig object. Bars with the same bundle string are treated as a single unit (e.g., moving one moves the others).
    // Example of a bar configuration with a bundle
const bar = {
  beginDate: "01.01.2022 23:00",
  endDate: "02.02.2022 08:05",
  ganttBarConfig: {
    id: "5621987352",
    label: "I'm in a bundle",
    bundle: "myBundle", // Bars with this same ID will be bundled
    style: { background: "#1c8745" }
  }
}

  5. Configure Gantt chart precision and time scales

    master

    The precision prop on <g-gantt-chart> determines the granularity of the time scale. Supported values include hour, day, and month. This setting affects how the grid and time intervals are rendered.

    Commonly used props alongside precision:

    • chart-start / chart-end: Defines the visible time range of the chart.
    • date-format: A string defining how dates are parsed and displayed (e.g., DD.MM.YYYY HH:mm).
    • bar-start / bar-end: Specifies which keys in your bar data objects represent the start and end dates.
    <g-gantt-chart 
  chart-start="01.01.2022 12:00" 
  chart-end="02.01.2022 12:00" 
  precision="hour" 
  date-format="DD.MM.YYYY HH:mm"
  bar-start="beginDate" 
  bar-end="endDate"
/>

  6. Install and initialize Vue Ganttastic

    master

    To use Vue Ganttastic in your project, install the package via npm and then register the plugin in your Vue application entry point (e.g., src/main.js or src/main.ts). Registering the plugin globally makes the g-gantt-chart and g-gantt-row components available throughout your application.

    npm install @infectoone/vue-ganttastic
    import { createApp } from "vue"
import App from "./App.vue"
import ganttastic from '@infectoone/vue-ganttastic'

createApp(App)
  .use(ganttastic)
  .mount('#app')

  7. Initialize the Vue Ganttastic plugin

    master

    To use the components globally, initialize the plugin in your application's entry point (e.g., src/main.js). This registers the g-gantt-chart and g-gantt-row components.

    import { createApp } from "vue"
import App from "./App.vue"
import ganttastic from '@infectoone/vue-ganttastic'

createApp(App)
  .use(ganttastic)
  .mount('#app')

  9. Add new bars to a Gantt chart

    master

    To add bars dynamically, render a g-gantt-row component and pass an array of bar objects to its bars prop. Because this prop is reactive, you can add bars by pushing new objects into the array.

    Each bar object must satisfy these requirements:

    1. Contain a property for the start date and a property for the end date. The names of these properties must match the values passed to the bar-start and bar-end props on the g-gantt-chart component.
    2. Contain a nested ganttBarConfig object with a unique id string.
    <template>
  <g-gantt-chart
    chart-start="2021-07-11 12:00"
    chart-end="2021-07-15 12:00"
    precision="hour"
    width="100%"
    bar-start="myBeginDate"
    bar-end="myEndDate"
  >
    <g-gantt-row
      label="My row 1"
      :bars="myBarList"
    />
  </g-gantt-chart>
</template>

<script setup>

import { ref } from "vue"

const myBarList = ref([])
const addNewBar = () => {
  const bar = {
    myBeginDate: "2021-07-11 17:00",
    myEndDate: "2021-07-12 03:00",
    ganttBarConfig : {
      id: "some-id-blabla" // make sure this is unique!
    }
  }
  myBarList.push(bar)
}
</script>

  11. Set chart themes and locales

    master

    Chart Themes

    Apply pre-made color schemes using the color-scheme prop on g-gantt-chart.

    Locale

    Vue Ganttastic uses Day.js for datetime manipulations. To change the language/locale of the chart, you must change the global locale of Day.js (typically in your main.js before initializing the plugin).

  12. Configure Gantt chart appearance and themes

    master

    You can control the visual style of the chart using several props on <g-gantt-chart>:

    • color-scheme: Sets the overall theme. Options include dark and vue.
    • font: Sets the font family for the chart (e.g., Courier).
    • row-height: A numeric value to set the height of each row in pixels.
    • grid: Enables/disables the grid display.
    • highlight-on-hover: (Applied to <g-gantt-row>) Enables highlighting of the row when the user hovers over it.
    <g-gantt-chart 
  precision="day" 
  color-scheme="dark" 
  :row-height="70" 
  font="Courier"
/>