hustcc / gantt-for-react

:herb: Frappe Gantt components for React wrapper. 一个简单的甘特图 React 组件封装。

gantt-for-react

Frappe Gantt component for React wrapper.

1. Install

npm install --save gantt-for-react

2. Usage

Online demo see https://git.hust.cc/gantt-for-react/.

import React from 'react';
import ReactGantt from 'gantt-for-react';

<ReactGantt
  tasks={this.getTasks()}
  viewMode={this.state.viewMode}
  onClick={this._func}
  onDateChange={this._func}
  onProgressChange={this._func}
  onViewChange={this._func}
  customPopupHtml={this._html_func}
/>

Or you can see the code here.

3. Component props

• tasks (required, array)

The tasks array need to be show with gantt graph. task is an object with format: { id, name, start, end, progress, dependencies, custom_class }.

• viewMode (required, string)

The view mode of gantt. Can be Quarter Day, Half Day, Day, Week, Month.

• customPopupHtml (optional, func)

The popo html function, can be a function that returns html or a simple html string.

And 4 event function props: onClick, onDateChange, onProgressChange, onViewChange. Document can see here.

4. Screenshot

5. LICENSE

MIT @hustcc

gantt-for-react's Issues

提示moment未定义，打包老失败

提示moment未定义， 我自己打包老失败。不知道什么原因

tasks is empty,can not refresh view

when tasks=[], ui is not refreshed, and I find this may be a bug in frappe-gantt.
can you help me to fix this bug ?

why my ReactGantt backgroundcolor is black?

import ReactGantt from 'gantt-for-react';

<ReactGantt tasks={this.state.tasks}
viewMode={this.state.viewMode}
customPopupHtml={this.customPopupHtml}
scrollOffsets={this.state.scrollOffsets}

                    style={{backgroundColor:'none'}}
        />

about React hooks error

when i use hooks grammar，
cannot run ..
scheduler.development.js:178 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

ReferenceError: moment is not defined

I followed the example
https://github.com/hustcc/gantt-for-react/blob/master/demo/GanttComponent.jsx.

But while running it saying moment is not defined.

Uncaught ReferenceError: moment is not defined

您好，请问我使用该组件一直报这个错，我已经引入了moment包还是不行

background color for task name

how to give background color for task name if the task is for 2 days only and it has longer name.

Any idea about translation or at least date localization?

If none of this is possible, can we at the very minimum add translation for months?

I am thinking something of the sorts:

const {
      onClick,
      onDateChange,
      onProgressChange,
      onViewChange,
      customPopupHtml,
      tasks,
      viewMode,
      **language**
    } = this.props;

which could then be passed to frappe gantt:

this.ganttInst = new GanttJS(this.ganttRef, tasks, {
      on_click: onClick || noop,
      on_date_change: onDateChange || noop,
      on_progress_change: onProgressChange || noop,
      on_view_change: onViewChange || noop,
      custom_popup_html: customPopupHtml || null
      **language: language || null**
    });

However, I don't believe frappe gantt has a way of modifying month translations (adding extra languages), as date_utils is kind of static and does not accept props. Therefore, I am thinking we should at least try to implement date format options, so we can avoid month names by using numerical style, e.g. 01.2019 instead of January 2019.

Any thoughts?

frappe-gantt中moment报错

我在使用组件时，
import ReactGantt from 'gantt-for-react'

正常引用，跟demo中代码一样， 但是会出现错误、
index.js:133452 Uncaught ReferenceError: moment is not defined
说frappe-gantt中的moment不存在， 我项目中也安装了moment？
是什么原因？

Error when build

Hey,

I got errors when building react app that use this package. I know that react don't compile the code that not ES5. Can someone help me to fix it?

yarn run v1.7.0
$ cross-env REACT_APP_BUILD_ENV=production react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

 	./node_modules/frappe-gantt/src/svg_utils.js:9 

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.

dragged task event

on drag task i'm getting all dependent along with dragged task, how to differentiate that which task i have dragged and which are the dependent which are dragged along with the main task.

No Support for IE

can we expect support for IE?

It is not working with tsx file.

@hustcc Please suggest the solution to work with tsx file.

how to run the app without error

https://codesandbox.io/s/k2wqq89vjo

this a link sandbox that didn't work the app how to run it ?

'customPopupHtml' how to set css style?

I get popupView background is black; It is not my mind; And i how to setup style with pupupView?
Is lick this?

  customPopupHtml = task => {
    return `
    <style type="text/css">
    .details-container {
       width: 160px;
       background: #fff;
    }
    </style>
    <div class="details-container">
          <h5>${task.name}</h5>
          <p>Expected to finish by ${task._end}</p>
          <p>${task.progress}% completed!</p>
    </div>
    `;
  };

But the pupUpView bottom and top margin is still black!

Error: Error: <text> attribute x: Expected length, "NaN".

Have tried similar to
https://github.com/hustcc/gantt-for-react/blob/master/demo/Gantt.jsx

But getting this error

Uncaught ReferenceError: moment is not defined

class MyApp extends Component {
  render() {
    const tasks = [
      {
        id: 'Task 1',
        name: 'Redesign website',
        start: '2016-12-28',
        end: '2016-12-31',
        progress: 20,
        dependencies: 'Task 2, Task 3',
        custom_class: 'bar-milestone', // optional
      },
    ];
    return (
      <ReactGantt tasks={tasks} viewMode={'Day'} />
    );
  }
}

Uncaught ReferenceError: moment is not defined
    at frappe-gantt.js:154
    at Array.map (<anonymous>)
    at prepare_tasks (frappe-gantt.js:151)
    at prepare (frappe-gantt.js:142)
    at change_view_mode (frappe-gantt.js:135)
    at init (frappe-gantt.js:92)
    at new Gantt (frappe-gantt.js:801)
    at ReactGantt.renderFrappeGanttDOM (gantt-for-react.js:93)
    at ReactGantt.componentDidMount (gantt-for-react.js:65)
    at commitLifeCycles (react-dom.development.js:8770)
    at commitAllLifeCycles (react-dom.development.js:9946)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at commitRoot (react-dom.development.js:10050)
    at performWorkOnRoot (react-dom.development.js:11017)
    at performWork (react-dom.development.js:10967)
    at requestWork (react-dom.development.js:10878)
    at scheduleWorkImpl (react-dom.development.js:10732)
    at scheduleWork (react-dom.development.js:10689)
    at Object.enqueueSetState (react-dom.development.js:6212)
    at LoadableComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:237)
    at update (index.js:196)
    at index.js:206
(anonymous) @ frappe-gantt.js:154
prepare_tasks @ frappe-gantt.js:151
prepare @ frappe-gantt.js:142
change_view_mode @ frappe-gantt.js:135
init @ frappe-gantt.js:92
Gantt @ frappe-gantt.js:801
renderFrappeGanttDOM @ gantt-for-react.js:93
componentDidMount @ gantt-for-react.js:65
commitLifeCycles @ react-dom.development.js:8770
commitAllLifeCycles @ react-dom.development.js:9946
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10050
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:237
update @ index.js:196
(anonymous) @ index.js:206
Promise.then (async)
componentWillMount @ index.js:205
callComponentWillMount @ react-dom.development.js:6370
mountClassInstance @ react-dom.development.js:6435
updateClassComponent @ react-dom.development.js:7840
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:12
__webpack_require__ @ bootstrap e11f36b260dc6681b3c2:707
fn @ bootstrap e11f36b260dc6681b3c2:112
0 @ localStorage.js:20
__webpack_require__ @ bootstrap e11f36b260dc6681b3c2:707
./node_modules/@firebase/app/dist/index.cjs.js.Object.defineProperty.value @ bootstrap e11f36b260dc6681b3c2:805
(anonymous) @ bootstrap e11f36b260dc6681b3c2:805
index.js:2178 The above error occurred in the <ReactGantt> component:
    in ReactGantt (at ReceptionistReport.js:20)
    in div (created by styled.div)
    in styled.div (at ApplicationLayout.js:20)
    in ApplicationLayout (at ReceptionistReport.js:19)
    in ReceptionistReport (created by LoadableComponent)
    in LoadableComponent (at RequireAuth.js:30)
    in Authentication (created by Connect(Authentication))
    in Connect(Authentication) (created by Route)
    in Route (at appRoutes.js:228)
    in Switch (at appRoutes.js:116)
    in Router (created by BrowserRouter)
    in BrowserRouter (at appRoutes.js:115)
    in AppRoutes (at App.js:42)
    in div (created by styled.div)
    in styled.div (at App.js:40)
    in ThemeProvider (at App.js:39)
    in App (created by Connect(App))
    in Connect(App) (at index.js:14)
    in Provider (at index.js:13)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:9747
captureError @ react-dom.development.js:10540
commitRoot @ react-dom.development.js:10058
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:237
update @ index.js:196
(anonymous) @ index.js:206
Promise.then (async)
componentWillMount @ index.js:205
callComponentWillMount @ react-dom.development.js:6370
mountClassInstance @ react-dom.development.js:6435
updateClassComponent @ react-dom.development.js:7840
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:12
__webpack_require__ @ bootstrap e11f36b260dc6681b3c2:707
fn @ bootstrap e11f36b260dc6681b3c2:112
0 @ localStorage.js:20
__webpack_require__ @ bootstrap e11f36b260dc6681b3c2:707
./node_modules/@firebase/app/dist/index.cjs.js.Object.defineProperty.value @ bootstrap e11f36b260dc6681b3c2:805
(anonymous) @ bootstrap e11f36b260dc6681b3c2:805
frappe-gantt.js:154 Uncaught (in promise) ReferenceError: moment is not defined
    at frappe-gantt.js:154
    at Array.map (<anonymous>)
    at prepare_tasks (frappe-gantt.js:151)
    at prepare (frappe-gantt.js:142)
    at change_view_mode (frappe-gantt.js:135)
    at init (frappe-gantt.js:92)
    at new Gantt (frappe-gantt.js:801)
    at ReactGantt.renderFrappeGanttDOM (gantt-for-react.js:93)
    at ReactGantt.componentDidMount (gantt-for-react.js:65)
    at commitLifeCycles (react-dom.development.js:8770)
    at commitAllLifeCycles (react-dom.development.js:9946)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at commitRoot (react-dom.development.js:10050)
    at performWorkOnRoot (react-dom.development.js:11017)
    at performWork (react-dom.development.js:10967)
    at requestWork (react-dom.development.js:10878)
    at scheduleWorkImpl (react-dom.development.js:10732)
    at scheduleWork (react-dom.development.js:10689)
    at Object.enqueueSetState (react-dom.development.js:6212)
    at LoadableComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:237)
    at update (index.js:196)
    at index.js:206
(anonymous) @ frappe-gantt.js:154
prepare_tasks @ frappe-gantt.js:151
prepare @ frappe-gantt.js:142
change_view_mode @ frappe-gantt.js:135
init @ frappe-gantt.js:92
Gantt @ frappe-gantt.js:801
renderFrappeGanttDOM @ gantt-for-react.js:93
componentDidMount @ gantt-for-react.js:65
commitLifeCycles @ react-dom.development.js:8770
commitAllLifeCycles @ react-dom.development.js:9946
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10050
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:237
update @ index.js:196
(anonymous) @ index.js:206
Promise.catch (async)
componentWillMount @ index.js:207
callComponentWillMount @ react-dom.development.js:6370
mountClassInstance @ react-dom.development.js:6435
updateClassComponent @ react-dom.development.js:7840
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:12
__webpack_require__ @ bootstrap e11f36b260dc6681b3c2:707
fn @ bootstrap e11f36b260dc6681b3c2:112
0 @ localStorage.js:20
__webpack_require__ @ bootstrap e11f36b260dc6681b3c2:707
./node_modules/@firebase/app/dist/index.cjs.js.Object.defineProperty.value @ bootstrap e11f36b260dc6681b3c2:805
(anonymous) @ bootstrap e11f36b260dc6681b3c2:805

DOMException when tasks array is empty

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

This happens when tasks goes empty ([], length 0, you get the point).

This renders the whole thing useless.

{
	this.state.tasks.length
		?
		<ReactGantt 
			tasks={this.state.tasks}
		/>
		:
		<p>{this.props.t('info.emptyProjectProgress')}</p>
}

As soon as state.tasks.length goes to 0, everything goes bust.