ZX LeaderView

ZX LeaderView is a simple, interactive and highly customizable Gantt chart component for Vue 3.

Features

• Vue 3 support
• TypeScript support (ships with out of the box type declarations)
• Interactivity (dynamic, movable and pushable bars)
• Reactivity / Responsiveness (when changes occur, bars are repositioned accordingly)
• Customization options (chart/bar styling, slots, event handlers etc.)

Quickstart

Install using

npm install zx-leaderview

Then, initalize the plugin in the starting point of your app (most likely src/main.js):

1import { createApp } from "vue"
2import App from "./App.vue"
3...
4import ganttastic from 'zx-leaderview'
5...
6createApp(App)
7  .use(ganttastic)
8  .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.

1<template>
2  <g-gantt-chart
3    chart-start="2021-07-12 12:00"
4    chart-end="2021-07-14 12:00"
5    precision="hour"
6    bar-start="myBeginDate"
7    bar-end="myEndDate"
8  >
9    <g-gantt-row label="My row 1" :bars="row1BarList" />
10    <g-gantt-row label="My row 2" :bars="row2BarList" />
11  </g-gantt-chart>
12</template>
13
14<script setup>
15  import { ref } from "vue"
16
17  const row1BarList = ref([
18    {
19      myBeginDate: "2021-07-13 13:00",
20      myEndDate: "2021-07-13 19:00",
21      ganttBarConfig: {
22        // each bar must have a nested ganttBarConfig object ...
23        id: "unique-id-1", // ... and a unique "id" property
24        label: "Lorem ipsum dolor"
25      }
26    }
27  ])
28  const row2BarList = ref([
29    {
30      myBeginDate: "2021-07-13 00:00",
31      myEndDate: "2021-07-14 02:00",
32      ganttBarConfig: {
33        id: "another-unique-id-2",
34        hasHandles: true,
35        label: "Hey, look at me",
36        style: {
37          // arbitrary CSS styling for your bar
38          background: "#e09b69",
39          borderRadius: "20px",
40          color: "black"
41        },
42        class: "foo" // you can also add CSS classes to your bars!
43      }
44    }
45  ])
46</script>

Build

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 <name_of_the_package>.tgz