Giters

neuronetio / gantt-elastic

Gantt Chart [ javascript gantt chart, gantt component, vue gantt, vue gantt chart, responsive gantt, project manager , vue projects ]

Home Page:https://neuronet.io/gantt-elastic/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Clickable timeline

Mak-NOAA opened this issue · comments

commented

Feature is the ability to make the timeline colors on the gantt chart clickable and have a tooltip when hovering over it with a mouse.

Screen Shot 2019-03-25 at 8 27 51 AM

Would this feature require customizing gantt-elastic core code or can it be added on from our own project? I don't want to dig into things and then once there's an upgrade, it would wipe out the changes.

commented

You can listen chart events on main gantt-elastic component
https://github.com/neuronetio/gantt-elastic/wiki/Mouse-&-touch-events

<gantt-elastic 
    @chart-project-click="doSomething"
    @chart-task-mouseover="showYourTolltip" 
    @chart-task-mousemove="moveYourTooltip" 
    @chart-task-mouseout="hideYourTooltip" 
 ... >
commented

Thank you @neuronetio checking it out, will close this if there's no further questions.

commented

@neuronetio I'm new to TS myself so please bare with me.....so I am starting with the project click and it's not recognizing my function.

My main component is

    <gantt-elastic :tasks="tasks" :options="options"
    @chart-project-click="onTaskClick" 
    ></gantt-elastic>

then in the same TS snippet, I have declared:

function onTaskClick(event:any, data:any) {
  console.log("fsafaf");
}

However I'm getting the following error:

vue.runtime.esm.js?63f0:619 [Vue warn]: Property or method "onTaskClick" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <BaseIterator> at src/views/Chart.vue
       <QPageContainer>
         <QLayout>
           <LayoutDefault> at src/layouts/Default.vue
             <App> at src/App.vue
               <Root>
warn @ vue.runtime.esm.js?63f0:619
warnNonPresent @ vue.runtime.esm.js?63f0:2015
get @ vue.runtime.esm.js?63f0:2070
render @ Chart.vue?fb8a:11
Vue._render @ vue.runtime.esm.js?63f0:3542
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
createChildren @ vue.runtime.esm.js?63f0:6030
createElm @ vue.runtime.esm.js?63f0:5931
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
createChildren @ vue.runtime.esm.js?63f0:6030
createElm @ vue.runtime.esm.js?63f0:5931
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
createChildren @ vue.runtime.esm.js?63f0:6030
createElm @ vue.runtime.esm.js?63f0:5931
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
patch @ vue.runtime.esm.js?63f0:6493
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
(anonymous) @ main.ts?cd49:54
./src/main.ts @ app.js:6199
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:6367
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?63f0:619 [Vue warn]: Invalid handler for event "chart-project-click": got undefined

found in

---> <GanttElastic> at node_modules/gantt-elastic/src/GanttElastic.vue
       <QPage>
         <BaseIterator> at src/views/Chart.vue
           <QPageContainer>
             <QLayout>
               <LayoutDefault> at src/layouts/Default.vue
                 <App> at src/App.vue
                   <Root>
commented

I don't know ts either

commented

In js you must add this function to component methods