npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@xpyjs/gantt

v2.1.14

Published

A high-performance vue gantt component.

Downloads

590

Readme

XGantt

OSCS Status

[English] [中文]

A high-performance vue gantt component for vue3.

  • vue2 version is HERE

About Version

v1 and v2 are not compatible.

  • props not same
  • slots not same
  • components not same

More details see document

Important

This repo is pervious jz-gantt. Only vue3 version. If you have used jz-gantt before, you should read the following section carefully.

Specification:

This version 1.0.1 is correspond to [email protected]. And jz-gantt is archived.

How to migrate

  1. package name changesd @xpyjs/gantt replaced jz-gantt.
  2. All j- or J prefixes update to x- or X.

Beyond that, no other action is required.

Snipaste

Snipaste

What is XGantt

  • [x] Automatically generate gantt charts based on dates
  • [x] Support for multi-layer expanding
  • [x] High-performance
  • [x] Multi-layer linkage
  • [x] Multistage selected
  • [x] Custom table column content
  • [x] Custom gantt row content
  • [x] Custom header content
  • [x] Dynamic update data
  • [x] Custom any style
  • [x] Support dark model
  • [x] Multiple date display modes switch
  • [ ] More

Document

For resource code, see Github

For more detailed documentation, see document web

For example, see Example web

If you has any problem, please issue.

How to use

install

npm install @xpyjs/gantt --save

// or
yarn add @xpyjs/gantt

use

import XGantt from "@xpyjs/gantt";
import "@xpyjs/gantt/index.css";

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

Basic use

Data should be Array type, index, startDate, endDate and children are supposed in data item, they help to display the data correctly. Each field can be customized.

children in V2 is no longer required. V2 index to id default.

const dataList = [
    {
        index: 1,
        startDate: "2020-06-05",
        endDate: "2020-08-20",
        ttt: {
            a: "aaa",
            b: "bbb"
        },
        name: "mydata1",
        children: [] // children is required. If no child, empty array is ok.
    },
    {
        index: 2,
        startDate: "2020-07-07",
        endDate: "2020-09-11",
        ttt: {},
        name: "mydata2",
        children: [
            {
                index: 3,
                startDate: "2020-07-10",
                endDate: "2020-08-15",
                ttt: {
                    a: "aaa"
                },
                name: "child1",
                children: [] // children is required. If no child, empty array is ok.
            }
        ]
    }
];
<x-gantt data-index="index" :data="dataList" />
<x-gantt data-id="index" :data="dataList" />

Use table column

We provide a slot named XGanttColumn. Label is required, and it should match data key.

label is required, and it should match data key. label's value should correspond to the name of the field in 'data' (deep query support), which tells the component to render the column.

<x-gantt data-index="index" :data="dataList">
  <x-gantt-column label="name" />
</x-gantt>
<x-gantt data-id="index" :data="dataList">
  <x-gantt-column prop="name" />
</x-gantt>

Use gantt slider

We provide a slot named XGanttSlider.

Only one slider whill be rendered. If you insert more than one slider, only last slider will be display.

<x-gantt data-index="index" :data="dataList">
  <x-gantt-slider />   <!-- no render -->
  <x-gantt-slider />   <!-- will be rendered -->
</x-gantt>
<x-gantt data-id="index" :data="dataList">
  <x-gantt-slider />   <!-- no render -->
  <x-gantt-slider />   <!-- will be rendered -->
</x-gantt>

License

MIT