ddmy / vue3-gantt Goto Github PK

View Code? Open in Web Editor NEW

93.0 2.0 15.0 6.04 MB

Vue3 Gantt Chart Component. 基于Vue3的甘特图组件

License: Apache License 2.0

HTML 0.57% JavaScript 50.34% Vue 49.09%

gantt vue vue3 vue3-gantt vue-gantt excel export-excel

vue3-gantt's Introduction

Vue3 Gantt Chart Component

简体中文

Introduction

A simplified Gantt chart component developed based on vue3.x:

Supports exporting the Gantt chart to an Excel file.
Supports exporting the Gantt chart as an image.
Supports displaying overlapping schedules.
Supports dynamic configuration for responsive updates.
Responsive layout, compatible with small screens.

If you encounter any issues during use, feel free to raise issues 😊.

Demo Online Preview

Usage

  <Gantt
    :data="data"
    itemText="Project"
    dateText="Date"
    :dateRangeList="dateRangeList"
  />

import { ref } from 'vue'
import Gantt from 'vue3-gantt'
import 'vue3-gantt/dist/style.css'
const dateRangeList = ref(['2022-01-01', '2022-03-05'])
const data = ref([
  {
    type: 'normal',
    color: '',
    name: 'Project 1',
    schedule: [
      {
        id: 333330,
        name: '900 Warriors Simultaneous Online Celebration Event',
        desc: 'This event is very important, generating millions of revenue. It is a cross-departmental collaboration and a major project with the CEO personally present to command. Everyone must work together!',
        backgroundColor: 'rgb(253, 211, 172)',
        textColor: 'rgb(245, 36, 9)',
        days: ["2022-01-15","2022-02-05"]
      },
      {
        id: 555550,
        name: 'XXXXXX',
        desc: 'This event is very important, generating millions of revenue. It is a cross-departmental collaboration and a major project with the CEO personally present to command. Everyone must work together!',
        backgroundColor: '#28f',
        textColor: '#fff',
        days: ["2022-02-15","2022-02-25"]
      },
    ],
  },
  {
    type: 'normal',
    color: '',
    name: 'Meteor Butterfly Sword',
    schedule: [
      {
        id: 222221,
        name: 'Chinese New Year Event',
        desc: 'This event is very important, generating millions of revenue. It is a cross-departmental collaboration and a major project with the CEO personally present to command. Everyone must work together!',
        backgroundColor: '#482',
        textColor: '#fff',
        days: ["2022-02-25","2022-03-10"]
      }
    ],
  },
])

Component Props

Key	Type	Default	Description
data	Array[Object]	[]	antt chart data
dateRangeList	Array	[]	The date range within the current chart. This array should have a length of 2, with elements as the start and end date in the format 'YYYY-MM-DD'.
itemText	String	null	The header description for the items in the Gantt chart.
dateText	String	null	The header description for the dates in the Gantt chart.
activeDate	String	Today	The day to be highlighted on the timeline (does not override schedule styles). Format: 'YYYY-MM-DD'.
repeatMode	Object	See below	Configuration for handling overlapping schedules.
itemWidth	Number	40	-
itemHeight	Number	40	-
scheduleTitle	Function	null	-
borderColor	String	'#eee'	-

The content width of the component needs to be controlled manually to ensure the minimum width.

Component Events

Event	Type	Description
scheduleClick	Function	Callback event when clicking on a schedule. Receives the schedule details as a parameter.
scrollXEnd	Function	Event triggered when the horizontal scrollbar reaches the end.
scrollYEnd	Function	Event triggered when the vertical scrollbar reaches the end.

Data Configuration: data Array[Object]

Key	Value	Description
type	'alike'\|\|'normal'	The project type (display style).
color	CSS color format	Background color for the current project. Applicable when the type is 'alike'.
name	String	The name of the current project.
schedule	Array[Object]	The project schedules.

Schedule Configuration: schedule Object

For easier development, you can extend additional fields based on the following.

Key	Description
id	A globally unique ID for the schedule.
name	The name of the schedule.
desc	Description of the schedule.
backgroundColor	Background color for the schedule.
textColor	Text color for the schedule name.
days	Array of Schedule Dates

repeatMode Configuration: Object

Key	Options	Default	说Description明
mode	'cover'\|\|'extract'	'cover'	Handling mode for overlapping schedules. 'cover' will simply overlap schedules, while 'extract' will extract and group overlapping schedules separately.
backgroundColor	CSS color format	'#FFFFCC'	Background color for the extracted schedules in 'extract' mode.
textColor	CSS color format	'#336666'	Text color for the extracted schedules in 'extract' mode.
name	`String`\|\|`Function`	'Overlapping Schedules'	Text to display for overlapping schedules. If it's a function, it receives a list of overlapping schedules as a parameter.
desc	`String`\|\|`Function`	'These are multiple schedules.'	Description to display for overlapping schedules. If it's a function, it receives a list of overlapping schedules as a parameter.

Component Instance Methods

Export Full Snapshot Image of the Current Gantt Chart

<Gantt
    ref="gantt"
    ...
/>
<button @click="exportImg">Download Image</button>

const gantt = ref(null)

const exportImg = () => {
  gantt.value.exportImg({ download: true, waterValue: 'Made by YiJio' })
}

The exportImg method accepts an Object to configure the behavior of exporting the image. It returns a Promise, and upon successful completion, it receives the base64 value of the image.

Parameter Optional Values Default Value Description

download Boolean true Whether to automatically download the image.

waterValue String '' Watermark text to be added to the image. If empty, no watermark will be added. Customizing the text style is not supported at the moment.

Parameter	Optional Values	Default Value	Description
download	`Boolean`	`true`	Whether to automatically download the image.
waterValue	`String`	`''`	Watermark text to be added to the image. If empty, no watermark will be added. Customizing the text style is not supported at the moment.

Exporting Current Gantt Chart to Excel

<Gantt
    ref="gantt"
    ...
/>
<button @click="exportGanttExcel">Export Excel</button>

const gantt = ref(null)

const exportGanttExcel = () => {
  gantt.value.exportGanttExcel({ fileName: 'TestList' })
}

The exportGanttExcel method receives an Object named file to configure the export file information.

Parameter Optional Values Default Value Description

fileName String '数据' The name of the exported file.

Parameter	Optional Values	Default Value	Description
fileName	`String`	'数据'	The name of the exported file.

vue3-gantt's People

Contributors

Stargazers

Watchers

Forkers

sheldonfly yanwang-github qwecxzpoi tolutronics lc6937 hakunamatata052 wtmsfw json1224 764567192 ikostenevichdev ic-xu code-sci logep anand-patel awu1227

vue3-gantt's Issues

two bugs

作者的项目挺好用的，不过发现了几个问题:

schedule里的color设置为rgb会报错，npm的example跑不通；
配置了repeatMode重叠属性后，exportGanttExcel会报错。

另外，schedule里的days必须是连续的时间，若该任务时间跨过周末就会中断。
通常后端返回的时间数据是以天为单位的对象，考虑days支持离散输入会不会方便许多，如days: ['2022-12-30', '2023-01-03', '2023-01-04']。或者更智能点days输入一个时间区间，渲染自动跳过周末和法定假日。
还有个小建议，可以新增个属性来让周六周日两列置灰，这样视觉会好些

Im improving this component to adjust it to my requeriments and i watched a little and easy correction bug.
In Utils/index.js -> this function need to set the hour becouse the diference in hours makes missed last day on october

export const fethDaysRange = (start, stop) => {
  let current = new Date(start.replace(/\//g, '-'))
  const end = new Date(stop)
  current.setHours(0, 0, 0, 0); // Establecer las horas a las 00:00:00

  const result = [];

  while (end.getTime() >= current.getTime()) {
    const res = fetchDayDetail(current);
    result.push(`${res.year}-${res.month}-${res.day}`);
    current.setDate(current.getDate() + 1);
  }

  return result;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <div id="app">
            <Gantt ref="gantt" :data="[]" itemText="项目" dateText="日期" :dateRangeList="dateRangeList" />
        </div>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <script type="module">
            import Gantt from './gantt.es.js'

            const { ref, createApp } = Vue

            createApp({
                components: {
                    Gantt
                },
                setup() {
                    const dateRangeList = ref(['2022-12-10', '2022-12-30'])
                    return {
                        dateRangeList
                    }
                }
            }).mount('#app')
        </script>
    </body>
</html>

报错截图:

[Vue warn]: useCssVars is called without current active component instance.
[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
[Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol) 
  at <Gantt data= [{…}] dateRangeList= (2) ['2022-01-01', '2022-03-05'] itemText="游戏/项目"  ... > 
  at <Space vertical="" > 
  at <OverviewView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <LayoutContent style= {padding: '8px'} > 
  at <Layout has-sider="" position="absolute" style= {top: '64px'} > 
  at <Layout position="absolute" > 
  at <DashboardView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <RootNavView> 
  at <LoadingBarProvider> 
  at <NotificationProvider> 
  at <MessageProvider> 
  at <DialogProvider> 
  at <ConfigProvider theme= {name: 'light', common: {…}, Alert: {…}, Anchor: {…}, AutoComplete: {…}, …} locale= {name: 'zh-CN', global: {…}, Popconfirm: {…}, Cascader: {…}, Time: {…}, …} > 
  at <App>

我的代码:

<script setup>
import Gantt from 'vue3-gantt'
import 'vue3-gantt/dist/style.css'
const dateRangeList = ref(['2022-01-01', '2022-03-05'])
const data = ref([
  {
    type: "normal",
    color: "",
    name: "流星蝴蝶剑",
    schedule: [
      {
        id: 222221,
        name: "小年活动",
        desc:
            "这个活动很重要，6666666营收数百万，跨部门合作的一个大项目，BOSS亲自下场坐镇指挥，大家一定要团结一心!",
        backgroundColor: "#482",
        textColor: "#fff",
        days: ["2022-04-04", "2022-04-04"],
      },
    ],
  },
]);
</script>

<template>
<Gantt
        :data="data"
        :dateRangeList="dateRangeList"
        itemText="游戏/项目"
        dateText="日期"
    />
</template>