@creowis/gantt-chart v1.0.7

@creowis/gantt-chart

An unique way of rendering gantt chart with collapsible rows

@creowis/gantt-chart is a lightweight yet powerful gantt chart.

Features ✨

• ⚡ Lightweight and performant
• 🎨 Customizable
• ❆ Collapsible
• 📝 Built in data processor
• ⚡️ Data highlight
• ⭕️ Error rendering

Basic Usage 🚀

Install the Package

First, install the @creowis/gantt-chart package using npm or yarn:

npm install @creowis/gantt-chart
# or
yarn add @creowis/gantt-chart

After installing, here's a quick example to get you started:

import { GanttChart, DataModel, ChartOptions } from '@creowis/gantt-chart';

type InputProps = {
  data: DataModel[],
  options: ChartOptions,
  onClick: (id: string) => void,
};

export const Page = ({ data, options, onClick }: InputProps) => {
  return <GanttChart data={data} chartoptions={options} onClick={onClick} />;
};

Data Model

export type DataModel = {
  id: string, // Unique id to the entity
  startTime: string, // start time of the event in string TZ
  endTime: string, // end time of the event in string TZ
  startms?: number, // OPTIONAL: Staring value
  parentId?: string, // OPTIONAL: To create hierarchy
  duration: number, //Total duration of the event
  label: string, // Title or label for the entitiy
  description?: string, //OPTIONAL: Description to the entity
  color?: string, //OPTIONAL: Color code for the entity
  children?: DataModel[], //OPTIONAL: If not passed, it will be calculated by the library
  muted?: boolean, // OPTIONAL: Flag to denote if an entity is muted
  error?: boolean, //OPTIONAL: Flag to denote if an entity is in error state
};

ChartOptions

export type ChartOptions = {
  width?: number,
  height?: number,
  colorrange?: string[],
  headerColumnWidth?: number,
  background?: string,
  errorColor?: string,
  barThickness?: number,
  className?: string,
  textColor?: string,
  headerColor?: string,
  lineColor?: string,
  hideHeaderColumn?: boolean,
};

Interactions

On Bar Clicked

OPTIONAL: OnClick event returns the ID of the element.

<GanttChart
  data={data}
  chartoptions={options}
  onClick={(id: string) => alert(`Clicked on ${id}`)}
/>

Playground

Gantt Chart

Screenshorts

TODO

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.