I'm a open source enthusiast, good at front-end development.
- 🌱 I’m currently working in ant financial
- 🏗 Focus on BI and data visualization
- 💬 WeChat:
AnyPlot
- 📫 Ping me by Email
:herb: Frappe Gantt components for React wrapper. 一个简单的甘特图 React 组件封装。
Home Page: https://git.hust.cc/gantt-for-react
License: MIT License
I'm a open source enthusiast, good at front-end development.
AnyPlot
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.
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 ?
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?
您好,请问我使用该组件一直报这个错,我已经引入了moment包还是不行
https://codesandbox.io/s/k2wqq89vjo
this a link sandbox that didn't work the app how to run it ?
@hustcc Please suggest the solution to work with tsx file.
can we expect support for IE?
我在使用组件时,
import ReactGantt from 'gantt-for-react'
正常引用,跟demo中代码一样, 但是会出现错误、
index.js:133452 Uncaught ReferenceError: moment is not defined
说frappe-gantt中的moment不存在, 我项目中也安装了moment?
是什么原因?
提示moment未定义, 我自己打包老失败。不知道什么原因
Have tried similar to
https://github.com/hustcc/gantt-for-react/blob/master/demo/Gantt.jsx
But getting this error
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.
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.
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
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!
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'}}
/>
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.
how to give background color for task name if the task is for 2 days only and it has longer name.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.