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

@visactor/vtable-gantt

v1.10.3

Published

canvas table width high performance

Downloads

1,417

Readme

VTable-Gantt 打造高效、灵活的甘特图解决方案,让项目管理更轻松。通过简单的配置和自定义布局,快速上手并满足各种复杂需求。提升团队协作效率,实现项目进度透明化。.

npm Version npm Download license

简体中文| English

(video)

介绍

VTable-Gantt 是 VisActor 可视化体系中的甘特图组件库,基于表格组件VTabe和可视化渲染引擎 VRender 进行封装。它专为项目管理和任务跟踪设计,提供了强大的可视化和交互功能。核心能力如下:

  1. 高效性能:支持大规模项目数据的快速运算与渲染,确保流畅的用户体验。
  2. 灵活布局:支持自定义时间轴、任务条样式和布局,满足不同项目管理需求。
  3. 强大交互:提供任务的拖拽、缩放和编辑功能,简化项目管理操作。
  4. 丰富的可视化能力:支持信息单元格及任务条的自定义渲染,提供树形结构展示,提升数据展示的多样性和直观性。

代码仓库介绍

主要包含以下几个子项目:

  1. packages/vtable:表格组件代码
  2. packages/vtable-gantt: 甘特图组件代码
  3. packages/vtable-editors: 表格编辑器组件代码
  4. packages/vtable-export: 表格导出工具代码
  5. packages/vtable-search: 表格搜索工具代码
  6. packages/react-vtable: React 版本的表格组件
  7. packages/vue-vtable: Vue 版本的表格组件
  8. docs: 教程文档

用法

安装

npm package

// npm
npm install @visactor/vtable-gantt

// yarn
yarn add @visactor/vtable-gantt

快速上手

import {Gantt} from '@visactor/vtable-gantt';

const records = [
  {
    id: 1,
    title: 'Task 1',
    developer: '[email protected]',
    start: '2024-07-24',
    end: '2024-07-26',
    progress: 31,
    priority: 'P0',
  },
  {
    id: 2,
    title: 'Task 2',
    developer: '[email protected]',
    start: '07/24/2024',
    end: '08/04/2024',
    progress: 60,
    priority: 'P0'
  },
  {
    id: 3,
    title: 'Task 3',
    developer: '[email protected]',
    start: '2024-08-04',
    end: '2024-08-04',
    progress: 100,
    priority: 'P1'
  },
  {
    id: 4,
    title: 'Task 4',
    developer: '[email protected]',
    start: '2024-07-26',
    end: '2024-07-28',
    progress: 31,
    priority: 'P0'
  }
];

const columns = [
  {
    field: 'title',
    title: 'title',
    width: 'auto',
    sort: true,
    tree: true,
    editor: 'input'
  },
  {
    field: 'start',
    title: 'start',
    width: 'auto',
    sort: true,
    editor: 'date-input'
  },
  {
    field: 'end',
    title: 'end',
    width: 'auto',
    sort: true,
    editor: 'date-input'
  }
];
const option = {
  overscrollBehavior: 'none',
  records,
  taskListTable: {
    columns,
  },
  taskBar: {
    startDateField: 'start',
    endDateField: 'end',
    progressField: 'progress'
  },
  timelineHeader: {
    colWidth: 100,
    backgroundColor: '#EEF1F5',
    horizontalLine: {
      lineWidth: 1,
      lineColor: '#e1e4e8'
    },
    verticalLine: {
      lineWidth: 1,
      lineColor: '#e1e4e8'
    },
    scales: [
      {
        unit: 'day',
        step: 1,
        format(date) {
          return date.dateIndex.toString();
        },
        style: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white',
          strokeColor: 'black',
          textAlign: 'right',
          textBaseline: 'bottom',
          backgroundColor: '#EEF1F5'
        }
      }
    ]
  },
};
const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option);

更多 demo 和详细教程

相关链接

生态系统

| Project | Description | | ----------------------------------------------------------- | -------------------------------------------------------------------------------------- | | AI-generated Components | AI-generated table component. |

参与贡献

如想参与贡献,请先阅读 行为准则贡献指南

细流成河,终成大海!

许可证

MIT 协议