neuronetio/gantt-elastic

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

gantt-elastic's Issues

Rendering issue for the calendar / progress part.

Hi

I have updated to the latest version of Vue and GanttElastic

I have a specific rendering issue

The task list is shown
The calendar/progressBar is visibly empty, but all elements seems rendered but hidden, outside/below of the calendar/Progress zone.

When I select the rendered elements via Console or Vue Console (in browser)
They are located below the chart zone, and not visible
<CalendarRow key='1547593200000h4'> <CalendarRow key='1547593200000h5'> <Grid> <DependencyLines> <Milestone> <ChartText> <ProgressBar>
etc...

then when I look at the detail it seems that some option are not ok, maybe the issue could be there maybe not..
see "(error during evaluation)"

<ProgressBar> props task:Object data $route computed getLinePoints:"M 232.04812454244004 0 L 232.04812454244004 24" getLineStyle:"(error during evaluation)" getProgressWidth:"50%" getSolidStyle:"(error during evaluation)" injected root:gantt-elastic props options:Object locale:Object Before/After:"Expand" Display task list:"Task list" Now:"Now" Task list width:"Task list" X-Scale:"Zoom-X" Y-Scale:"Zoom-Y" code:"en" taskList:Object tasks:Array[10] 0:Object allChildren:Array[0] children:Array[0] collapsed:false dependencyLines:Array[0] dependentOn:Array[0] duration:432000 durationMs:432000000 height:24 id:1 label:"Make some noise" mouseOver:false name:"Make some noise" parent:Object parentId:null parents:Array[1] progress:85 start:"2019-01-04 00:00:00" startDate:Object startTime:1546556400000 style:Object (empty) tooltip:Object type:"milestone" user:"<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>" visible:true width:580.3703113561 x:116.27406227122002 y:6

<Calendar> Inspect DOM Open in editor data $route days:Array[14] hours:Array[84] months:Array[1] 0:Object computed daysStyle:"(error during evaluation)" getDays:Array[14] getHours:Array[84] getMonths:Array[1] 0:Object getWidth:1628.3368704513157 getX:0.25 getY:0.25 hoursStyle:"(error during evaluation)" monthsStyle:"(error during evaluation)" injected root:gantt-elastic props options:Object locale:Object Before/After:"Expand" Display task list:"Task list" Now:"Now" Task list width:"Task list" X-Scale:"Zoom-X" Y-Scale:"Zoom-Y" code:"en"

hoping you have an idea for this..
Thanks
Regards

Working days / hours

First of all amazing work!

Have you tough about adding an configuration option for working days?
Or even better with working hours?
Most of the gantt chart tools lack of this features, which makes them more or less not so useful.

Keep the good work!

How do you implement this tool in vue-cli? I need some help

Is there any tutorial or example of the implementation of this tool in a vue-cli project?

[vuex] duplicate getter key: GanttElastic/options

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Go to the gantt chart page
2. Switch to a new page
3. Go back to the gantt chart page
4. See error

Expected behavior
This is a bug or could you please help me to resolve this error, thank you. I use vue-cli3

dayjs should be included in dependencies, not dev-dependencies

seem to need to include dayjs in in dependencies, not dev-dependencies

• OS: mac
• Browser chrome
• Version 0.6.16

error log:

This dependency was not found:

• dayjs in ./node_modules/vue-loader/lib??vue-loader-options!./node_modules/gantt-elastic/src/GanttElastic.vue?vue&type=script&lang=js&, ./node_modules/vue-loader/lib??vue-loa
  der-options!./node_modules/gantt-elastic/src/components/Calendar/Calendar.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save dayjs

Syntax Error: Unexpected token (592:10)

Couldn't get complied version of GanttElastic to work. I'm using an old webpack and there is no way I can update it because of dependencies

This is my error stack:

error in ./~/gantt-elastic/src/GanttElastic.vue

Syntax Error: Unexpected token (592:10)

590 | for (let [index, task] of tasks.entries()) {
591 | tasks[index] = {

592 | ...task,
| ^
593 | id: task[options.taskMapping.id],
594 | start: task[options.taskMapping.start],
595 | label: task[options.taskMapping.label],

@ ./~/gantt-elastic/src/GanttElastic.vue 7:2-169
@

.//babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!.//vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/web/dashboard/project/StageFiveComponent.vue

Error while using

6/5000
Follow your tutorial，will be prompted: "Vue is not defined"


I don't know what's wrong. I need your help

Gantt Charts stopped working, need some help here =)

Hi, after last update 10h ago, Gantt Component stopped working with the following error:

Screenshot here

Can you explain why this happened ? Thanks in advance.
Below is a little piece of code, how I initialize Gantt.
And why I can't get gantt instance via event 'gantt-elastic-ready' ? =)
Sorry for my english :P

const gantt = new Vue({
    components: {
      'gantt-header': Header,
      'gantt-elastic': GanttElastic
    },
    data: {
      tasks: [],
      options,
      showHeader: true
    },
    computed: {
      gellastic() {
        return this.$refs.gellastic;
      },
      gellasticheader() {
        return this.$refs.gellasticheader;
      }
    },
    watch: {
      tasks() {
        setTimeout(() => {instance.setHeight(this.gellastic.state.height)}, 100);
      }
    }
  }).$mount(ganttWrapper);

Add task button doesn't work in the demo

Describe the bug
Add task button does nothing

To Reproduce
Steps to reproduce the behavior:

1. Go to demo
2. Click on Add Task
3. See error

Expected behavior
It should have added a task

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Can not support vue-slider-component with v3.x

Is your feature request related to a problem? Please describe.

I am trying to get started for gantt-elastic, when I ran vue project in local, I found it is compiler error that vue-slider-component v3.x does not have vue2-slider.vue.

this is git branch of vue-slider-component v2.x, we can see there is not vue2-slider.vue file from the master branch, but current gantt-elastic is using vue2-slider.vue at https://github.com/neuronetio/gantt-elastic/blob/master/src/components/Header.vue#L117

Describe the solution you'd like

• Update README file to note prerequisites of gantt-elastic, such as:
  npm install --save vue-switches
npm install --save [email protected]

• Or support latest version of dependencies

Locale options doesn't seem to work

Locale options sent are as below but could not get them loaded Gantt elastic.

locale: { code: "en", Now: "Now", "X-Scale": "Zoom-X", "Y-Scale": "Zoom-Y", "Task list width": "Task list", "Before/After": "Expand", "Display task list": "Task list" } }

How can I modify a start time?

Completion and name are changing on the chart, but start time is not.. What's the best way to modify the start time?

Question about months in the time line

I have a question about months in the time line, how can I set to see for example 3 or 2 months and so on? Could not find an answer.

error while disabling Hour

Hi, thanks for the great job.
This is the first time I open an issue. I'll just get to the point:

I keep having an error when I try to disable 'hour' in the Calendar options:
ReferenceError: "userOptions is not defined"

calendar: { gap: 6, height: 0, hour: { height: 20, display: false, format: { long (date) { return dayjs(date) .locale(userOptions.locale.code) .format("HH:mm"); }, medium (date) { return dayjs(date) .locale(userOptions.locale.code) .format("HH:mm"); }, short (date) { return dayjs(date) .locale(userOptions.locale.code) .format("HH"); } } }, day: { height: 20, display: true, format: { long (date) { return dayjs(date) .locale(userOptions.locale.code) .format("DD dddd"); }, medium (date) { return dayjs(date) .locale(userOptions.locale.code) .format("DD ddd"); }, short (date) { return dayjs(date) .locale(userOptions.locale.code) .format("DD"); } } }, month: { height: 20, display: true, format: { short (date) { return dayjs(date) .locale(userOptions.locale.code) .format("MM"); }, medium (date) { return dayjs(date) .locale(userOptions.locale.code) .format("'YY MMM"); }, long (date) { return dayjs(date) .locale(userOptions.locale.code) .format("YYYY MMMM (MM)"); } } } },

Extend documentation

Hi!

It is probably need to add a description of the task properties parentId and dependentOn in the tasks description on the wiki page. These properties are used in the example but they are not mentioned in the documentation.

collapse rows on loading

Hi,

When loading the page with tens of sub-tasks, the cpu usage is very high.
~70% on my config.
Would it possible to add the option to collapse all tasks by default?

Thx,
Michael

Proposal: Would you like to make the props tasks immutable?

Problem

• If you have tasks as the state of vuex, you need to prepare a copy object of tasks separately

...
export const state = () => ({
  tasks: [],
  ...
  ...
  ...
})
...

Error: [vuex] do not mutate vuex store state outside mutation handlers.

    <GanttElastic :tasks="tasks" :options="options">
...
...
  computed: {
    ...mapState(['tasks']),
...
...

In order to avoid this

    <GanttElastic :tasks="copyTasks" :options="options">
...
...
  data() {
    return {
      copyTasks: []
    }
  } 
...
...
  computed: {
    ...mapState(['tasks']),
...
...
  created() {
    this.copyTasks = JSON.parse(JSON.stringify(this.tasks)) // need to copy
  }

Proposal contents

Copy in elastic gantt component

Advantages and disadvantages

• Advantages
  • There is no need to copy on the caller side. To be simple :)
• Disadvantages
  • Failure occurs when caller expects change.

export 'mergeDeepReactive' was not found in './GanttElastic.vue

hi~
i want to use gantt-elastic in my project, but when i follow your demo, my terminal show the warning. just like this

how can i fixed it? thanks

Feature: Multiple tasks for a user on the same row

Multiple tasks for a user on the same row. At the moment gantt elastic creates multiple rows.
Is it possible?

columns click function,can not get "this"

hi,
I want to add a click event to columns,and set a dialog visable
but in click function,I got "this" is binded to event object.

data() {
  return {
   lastId: 16,
  }
},
....
In option->taskList->columns:
{
html: true,
events:{
click({event, data}) {
    console.log(this.lastId++)   <-  [this.lastId] is undefined
}

I would appreciate for any help.

Headers can't expand back out when contracted all the way.

Describe the bug
Once headers of gantt chart are contracted all the way, they can't be expanded back out again.

To Reproduce
Steps to reproduce the behavior:

1. Load example Gantt chart in examples/index.html

2. Drag one of the headers (Either "%", "Type", "Start", etc), contract them to the left until they are no longer visible.

3. Try to expand those contracted headers back out again and try to make them visible.

Expected behavior
The contracted headers should be made visible again by dragging them back out to the right. Instead they stay hidden until you refresh the page.

Desktop (please complete the following information):

• OS: Fedora Linux
• Browser: Firefox Quantum Version 60.0 64 bit.

Can set calendar in Chinese？

Can set calendar in Chinese？

"TypeError: this.$store is undefined"

Hi,

I migrated from 0.9.6 to 0.10.15 and I've got this error: this.$store is undefined
I import gantt-elastic in my project using Webpack, my index.js is :

My entry point in my template is : {{ encore_entry_script_tags('gantt-planning') }}

State tasks is not updating

I am using Gantt elastic component as a child in my component where I am sending the value for props 'tasks' which is a list of tasks objects received from API response using axios. 'tasks' is a computed property which gets value from vuex. While loading the component, 'tasks' of parent is with the inital value from vuex state and is passed to GanttElastic. I see in GanttElastic that 'tasks' prop is used to initialize state.tasks where state is the data object in GanttElastic. When my action in vuex mutates the prop 'tasks', value is mutated in 'tasks' prop of GanttElastic but is not updating state.tasks (state.tasks is used for computed prop visibleTasks to render chart. ) state.tasks is assigned from prop in setup() method which is called only in the created() of GanttElastic , but not computed everytime when 'tasks' prop is changed. setup() or initialize() might be the proper method which should also be called when tasks prop is updated to update state.tasks. Could you please check on this and provide us a way to use the mutated prop 'tasks'

Add week number

Another great option in addition of working days,
would be the Week Numbers.

Rgds,
Michael

How do implement gantt-elastic as vue component in Nuxt.js?

Please tell me how to configure it

This project looks really nice! Is there a roadmap?

This looks like something I could really utilize for a project I have, and I'd be interested in contributing where I can. Is there any kind of roadmap or intended usecase for this lib yet?

Updating to 0.10.x

Describe the bug
Trying to update from 0.9.6 to 0.10.x. Starting from 0.10.0, getting:

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'observable' of undefined"

found in

---> <GanttElastic> at src/GanttElastic.vue
       <Gantt>
         <Root>

and a bunch of other similar errors.

To Reproduce
Steps to reproduce the behavior:

    const options = {
    };

    var tasks = [];

    Vue.use(Vuex);
    const store = new Vuex.Store({
        state: {
          tasks,
          options,
        },
        mutations: {
          updateTasks(state, tasks) {
            state.tasks = tasks.map(task => task);
          },
          updateOptions(state, options) {
            state.options = { ...options };
          },
        }
    });

    Vue.component('gantt', {
      template:`<gantt-elastic :tasks="$store.state.tasks" :options="$store.state.options">
      </gantt-elastic>`,
      store,
      components: {
        "gantt-elastic": GanttElastic,
      },
    });


    var planComp = new Vue({
        el: 'plan',
        data: function () {
            return {
            };
        },
        template: `
          <div>
            <gantt>
            </gantt>
          </div>
        `
    });

Expected behavior
Expect to work with code above

Click to select task (for editing/deleting)

Hello,

I am looking for a way to make the task list item selectable (with checkbox) for further actions (on chart click, etc.). But I couldnt find any instruction. I currently do as follows, I would appreciate for any help.

gantt-elastic v-on:main-view-mouseup="taskclicked"

taskclicked: function (event, data) {
if (event.path[4]) {
if (event.path[4].className === 'gantt-elastic__task-list-item') {
let t_id, t_name, t_assigned, t_start_date, t_type, t_progress
t_id = event.path[4].childNodes[0].innerText

        let filtered_task = this.ganttState.tasks.filter(function(task) {
          return task.id == t_id;
        });

        let selected_task = filtered_task[0];

        this.selecting_task.id = selected_task.id;
        this.selecting_task.label = selected_task.label;
        ...

}

Thanks in advance.

Unknown custom element: <foreignObject> into TaskList.vue

Describe the bug
When I add a ganttchart into my page, in a vuejs page component in a SPA,
I have this issue, as described in the Console:

" [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <TaskList> at node_modules\gantt-elastic\src\components\TaskList\TaskList.vue
<MainView> at node_modules\gantt-elastic\src\components\MainView.vue
<GanttElastic> at node_modules\gantt-elastic\src\GanttElastic.vue "

result: the task list on left appears ok, but the charts on right are not visible, all is empty

To Reproduce
Steps to reproduce the behavior:

1. Add the <gantt-elastic :tasks="gantttasks" :options="ganttoptions" > </gantt-elastic> into a page, into a tab in my case

See screenshots result

Maximum call stack size exceeded

i try to use it in my project, but it has an error.please help

row click in table

I would like to know how to click on the table row, same as the @chart-project-click (vue) method but clicking on the table.
Help?

Events other than scroll or zoom do not work in bundle mode.

Describe the bug
When using event listeners other than the scroll or zoom in bundle mode, the event listeners such as click or mouseover do not fire when the specified components are either clicked or hovered over.

To Reproduce

1. Modify the ready function in the examples/index.html file in your project. Do not use any Vue.js in that file. Only use VanillaJS or jQuery.
2. Append these event listeners as shown here after line 266 of the examples/index.html file.

`GanttElastic.component.components['gantt-header'] = Header;
    const app = GanttElastic.mount({
      el: '#app', // <- your container id
      tasks: tasks,
      options: options,
      ready(ganttInstance) {
        console.log('ready!', ganttInstance);
        ganttInstance.$on('times-timeZoom-change', (ev) => {
          console.log('time zoom changed!', ev)
        });
        ganttInstance.$on('chart-task-click',function({event,data}) {
            console.log("click");
        });
        ganttInstance.$on('chart-milestone-click',function({event,data}) {
            console.log("click");
        });
        ganttInstance.$on('chart-project-click',function({event,data}) {
            console.log("click");
        });
        ganttInstance.$on('chart-task-mouseover',function({event,data}) {
            console.log("mouseover");
        });
        ganttInstance.$on('chart-milestone-mouseover',function({event,data}) {
            console.log("mouseover");
        });
        ganttInstance.$on('chart-project-mouseover',function({event,data}) {
            console.log("mouseover");
        });
   }
   });
  </script>
</body>

</html>
 

Expected behavior
Clicking or hovering on the chart project, tasks, and milestones should output the corresponding console.logs in each event. For example a hover should output "mouseover" in the console and a click should output "click".

Desktop (please complete the following information):

• OS: Linux and Mac.
• Browser: Chrome 66.0.3359.181 64-bit and Firefox 60.0 64-bit.

<DemoHeader> won't show

<DemoHeader> with controls won't show.

Here is the example given earlier
And the result I've got : missing controls

I also note we lose the bakcground color after a certain lenght

blank page on safari

https://neuronet.io/gantt-elastic/#/ link appear with a blank page.
it's run with Firefox on the same machine

• OS: Mojave 10.14.5 (beta)
• Browser safari
• Version 12.1.1

ReferenceError: Header is not defined using standalone, pure-JS mode

Describe the bug
I copied the demo code from the Readme into a html file and opened it. It gives an error on the Console:

ReferenceError: Header is not defined

Even if I comment the line that's coming from out (from options), then there are no errors but nothing shows up on the page. Just a blank page.

To Reproduce
Steps to reproduce the behavior:

1. Copy readme's HTML to a html file
2. Open it in web browser
3. See error and/or blank screen

Expected behavior
I'd expect a demo similar to what's shown in the screenshots to appear.

Screenshots
Just blank screen

Desktop (please complete the following information):

• OS: Windows 7 64-bit
• Browser Firefox 66.0.2, Chrome 73.0.3683.103

Customizable task model

Is your feature request related to a problem? Please describe.
If you have a different task model, that is, different properties instead of label, start, etc. you must create a copy of the tasks with the correct properties.

Describe the solution you'd like
It should be an option like const options = { labelProp: 'title', startProp: 'startDate' }

Describe alternatives you've considered
I fetch the task list and create a copy with the needed properties

I can work on this feature if you find it useful and need help!

This Gantt component is wonderful! Thanks a lot!
Luca

change locale code to 'zh-cn', there is error.

Describe the bug
in options, i change locale.code from 'en' to 'zh-cn',there is a error

TypeError: Cannot read property '1' of undefined
    at a (dayjs.min.js?a2a4:1)
    at f.c.format (dayjs.min.js?a2a4:1)
    at Object.long (GanttElastic.vue?a636:182)
    at eval (GanttElastic.vue?a636:1052)
    at Array.forEach (<anonymous>)
    at _loop3 (GanttElastic.vue?a636:1051)
    at VueComponent.computeDayWidths (GanttElastic.vue?a636:1047)
    at VueComponent.computeCalendarWidths (GanttElastic.vue?a636:998)
    at VueComponent.setup (GanttElastic.vue?a636:1144)
    at VueComponent.created (GanttElastic.vue?a636:1237)

To Reproduce
Steps to reproduce the behavior:

1. in options, i change locale.code from 'en' to 'zh-cn'
2. the error printed in console of browser

Expected behavior
change date format to Chinese style.

Desktop (please complete the following information):

• OS: windows
• Browser: chrome
• Version: 0.9.2

Clickable timeline

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.

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.

Change the time interval bearable by the default gantt calendar

Hi, I want to change the time interval bearable by the default gantt calendar. For example, when you put a start date in 2014 and an end date in 2019, the current calendar takes longer to display the data in the chart. Do you know which component is responsible of this management of the time interval displayable by the calendar? Thanks

Support end date property in tasks instead of duration

Is your feature request related to a problem? Please describe.
Make possible to use duration as well as end property for task duration/gantt bar width

Describe the solution you'd like
Support a property of Date type that defines task end, if both duration and end are present, priority is on 1 of the 2

Describe alternatives you've considered
I have 2 props in my task startDate and dueDate and I have to loop all tasks to create task.duration = (task.dueDate - task.startDate) / 1000

Computed property was assigned but it has no setter

Describe the bug
When the vue component is initialized the logs the following errors
Computed property "horizontalLines" was assigned to but it has no setter.
Computed property "verticalLines" was assigned to but it has no setter.

To Reproduce
Steps to reproduce the behavior:

1. Add the gantt-elastic to your SPA project
2. View the page the component is displayed on

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox, Edge, Chrome
• Version FF

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version Firefox 63.0.3, Chrome 71.0.3578.98, Edge 42.17134.1.0

Additional context
The project is a single page application

Built using webpack 3.12.x

Vue 2.5.19
Vue-router 3.0.2
dayjs 1.7.8
gantt-elastic 5.0.4

tutorial is in need

please provide tutorial for clear vue cli 2 webpack or vue cli 3
Seems awesome but was unable to add it to my project.

Thank you anyway

Rendering issue

Trying the latest version in webpack vue-cli application.

The diagram is rendering 7 px tall

Those small dots are the diagram. Exclamation marks are normal size.

I tried the webpack project, but it has the older version and no scripts to build easily..

Also errors in console:

Please help!

Calendare dates are not shown as per the start dates and durations passed

I have been using wide range of start dates and durations but always the calendar dates prepared and displayed in the gantt chart are only today, tomorrow and yesterday. I have checked at prepareDates () in the source code which actually picks the values and computes the dates but still doesn't load well in the chart. Could you please take a look.

Here is a sample data I am passing.

Thank you.

Question about date format in calendar row

First thanks for your project. I want to set the format of date in calendar like : "weekdays date in number". For example I want to see in calendar "Saturday 24" instead of "24 Saturday".
How I can do that? What property in with which component i should change? Thanks in advance for your answer.
Ps: i translate my dates in French this is why i want this format instead of the one you set in default calendar

after page zoom task table disappear？

after page zoom task table disappear？

Adding gantt-elastic as vue component error

Hi all,

Not sure if I should post this on stackoverflow vs here but thought I try it here first. I'm new to gantt-elastic and vue in general but wanted to add gantt-elastic as a vue component. I ran into an issue registering the component.

I installed gantt-elastic using yarn add gantt-elastic.

Then I registered the vue component in my main.ts:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';

import 'quasar/dist/quasar.min.css'; // WS- Added this after commenting out .styl imports
import './styles/quasar.styl';
import '@quasar/extras/roboto-font/roboto-font.css';
import '@quasar/extras/material-icons/material-icons.css';
import GanttElastic from "gantt-elastic/src/GanttElastic.vue";

import {
  Quasar,
  QLayout,
  QHeader,
  QDrawer,
  QPageContainer,
  QPage,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QItem,
  QItemSection,
  QItemLabel
} from 'quasar';

Vue.use(Quasar, {
  config: {},
  components: {
    QLayout,
    QHeader,
    QDrawer,
    QPageContainer,
    QPage,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QItem,
    QItemSection,
    QItemLabel,
    GanttElastic
  },
  directives: {},
  plugins: {}
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app');

then I tried to add the example in a vue file called Chart.vue:

<template>
  <q-page padding>
    <gantt-elastic :tasks="tasks" :options="options">
    <!-- <gantt-elastic-header slot="header"></gantt-elastic-header>
    <gantt-elastic-footer slot="footer"></gantt-elastic-footer> -->
  </gantt-elastic>
  </q-page>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class PageAbout extends Vue {
  private tasks:any;
  private options:any;

}
</script>

I receive a Vue-warn of:

vue.runtime.esm.js?8846:619 [Vue warn]: Unknown custom element: <gantt-elastic> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <PageAbout> at src/views/Chart.vue
       <QPageContainer>
         <QLayout>
           <LayoutDefault> at src/layouts/Default.vue
             <App> at src/App.vue
               <Root>

How do I register it correctly?

Add more zoom

Hi,
is there any way to zoom down to 10 minutes or less?

I have a task list with ranges for example from 04-24/2019 10:05:00 to 04-24/2019 10:27:00.

Great project.

How to use this awesome thing in Angular?

Hello, Is there anyway i can use this thing in Angular 6 ?