Timeline Zoom and initial view

I am working with the timeline component, trying to make it usable for our users on the frontend and there are 2 problems I am having

  1. When I change projects that have different schedules, the timescale doesnt change to fit the data. I can set a dropdown to change this but if I want say 2 months, or 6 months I dont seem to be able to change it. Is there any way to set a timescale of start_date and end_date and fit all into that?
  2. If events in the timeline happen before today, the timeline always starts at the first event. Ideally I starts at today, or at least centers on today. Is this possible? I have set initial to moment.now() but it still loads at the start. This is particularly difficult for schedules that last a whole year but we maybe only want to look at the current or next week. We have to manually scroll horizontally to get to today each time.

Hi @kyleteal,

Could you share some screen shots or a screen recording of this behavior so I can look to reproduce this?

By "change projects" are you saying changing the data source of the component or clicking a different project in the current source?

The component is pretty brittle and only really works one day and on fairly small scales. We are collecting feedback on it with feature requests for a v2 of the component so we love getting feedback like this on how we can improve the feature and get it to support more use cases.

If you can show me a screen recording I can look to test things out to see if what you want to do is currently possible :+1:

For change projects, in our system we are using the timeline to visualize project schedules. So we have a select component to choose a project. On change we pull the schedule data for that project which includes name, category, category color, start and end dates. Then that goes into the timeline sown below. I also use a js transformer to create milestones for each week so we can have a vertical bar to delineate weeks, this would be very helpful if built in.

The issue described for #1, when I change projects the data oviously changes completely in the timeline component, but the zoom scale doesnt adjust to fit. Ideally there would be some way to have the horizontal zoom scale to be variable and end at first event start and last event end. This way you can see the full schedule. then a zoom bar to zoom in. instead of only week, month, quarter, year views which could show a ton of white space on either side.

For #2, when I change data, ideally it would scroll horizontally to show today on the left.

What would really be great, is implementation of the gantt schedule timeline component. This component has a lot of the functionality I would want in a timeline component. Specifically creating and editing events from the component itself. Currently we use a table above the component to manage data entry and this component only for visualization.

https://www.npmjs.com/package/gantt-schedule-timeline-calendar

Here is a great example of that in action, the zoom bar and moving events around

Hi @kyleteal,

Thank you for all the details! From my testing it seems that the timeline component does not have these functionalities but I can make feature requests for both 1 and 2.

I love the idea of a Gantt schedule timeline component! Let me pass that request along to one of our front end component PMs. I fully agree that such a component would be incredibly useful.

Thank you for the suggestion and apologies on the limitations of the current timeline component :head_shaking_vertically: