Timeline Component Working Group

[markacianfrani]

We're currently working on building out the Timeline component and would love to hear from the community as we start drafting out the API spec.

Current Alpha Release: timeline-alpha.2

• Web Components: npm install @astrouxds/astro-web-components@timeline-alpha.2
• React: npm install @astrouxds/react@timeline-alpha.2
• Angular: npm install @astrouxds/astro-web-components@timeline-alpha.2
• Documentation: https://621fea4386202a8dd48113bc--astro-components.netlify.app/?path=/story/astro-uxds-welcome-start-here--page

timeline-alpha.2 changelog

• BREAKING CHANGE Renamed position property to playhead
• Added status props to rux-time-region as a QOL for displaying Astro status icons and associated border colors
• Added a selected prop to rux-time-region to visually display the selected state

Roadmap

• Support for second intervals
• Support for week intervals
• Adjustable height/vertical scrollbars
• Styling
• Auto scroll to playhead when zooming
• UTC / Timezone support

[alexfrigault]

I am currently using 'dhtmlx-gantt' to make my timeline visualizations. The major draw back I am having with dhtml-gantt is it contains a lot of inline styles and scripts which aren't configurable to be compliant with our new Content Security Policy. It is also just a gantt chart so there is a good amount of configuring I need to do to make it function like a timeline. Your Timeline component would be a nice replacement.

One limitation I can see with your Timeline component is that it doesn't support different time intervals and ranges. Along with being able to see past events, I am happy to see that you are already discussing those features. As mentioned above, the ability to have the Timeline component follow a Content Security Policy without 'unsafe' parameters is also desirable.

[markacianfrani]

@alexfrigault can you expand a little on what you mean by supporting different time intervals? Is that something you'd think you need direct control over or can the timeline be responsible for setting those?

For example, something like this

https://visjs.github.io/vis-timeline/examples/timeline-generated/codepen.cd241505bf80e03e6b96c4b8aa197e6b07591e7162df44cd75e72362318f3e0f.html

where there's a clear relationship between the zoom control and what intervals are being shown?

I'm finding that if we expose the intervals directly, zooming is a little clunky over large ranges.

[alexfrigault]

For my application, I was limiting the range to surround the minimum and maximum dates since there needed to be one to generate my timeline. However, your solution with zoom control works very nicely and I would be happy with it.

[markacianfrani]

We're excited to release the first alpha for Timeline and would love to get as much feedback as possible.

You can install it today under the timeline-alpha.0 tag by:

npm i @astrouxds/react@timeline-alpha.0 if you're using React or npm i @astrouxds/astro-web-components@timeline-alpha.0 if you're using the web components. You should be able to drop this into your existing applications without any issues.

Documentation for the new Timeline can be found at https://deploy-preview-225--astro-stencil.netlify.app/?path=/docs/components-timeline--default-story

Example project: https://codesandbox.io/s/dreamy-bartik-socoi?file=/src/App.js

NOTE: This is NOT production ready and contains almost zero styling. Also if you're running your application in watch mode, you may need to manually refresh your page if things aren't rendering as you'd expect.

Questions:

• Is the API intuitive? Is it flexible enough to allow for your own use cases?
• Are there any critical features that are missing for your use case?
• Does the documentation make sense? Are there any specific areas that could use more detail?

[markacianfrani]

We've just released timeline-alpha.1 which now has support for vertical scrolling. You'll need to update your package.json for the new version. You can enable vertical scrolling by defining a height on the time-region-container CSS shadow part:

rux-timeline::part(time-region-container) {
    max-height: 400px;
}

Since this is heavily tied to styling, we felt like a shadow part would be the best choice to give control over the overall height, but we're definitely open to suggestions. For example, we could add a prop, but that would give you less freedom. With a part, you can choose min-height, max-height, height, etc.

[markacianfrani]

timeline-alpha.2 has just been released with a few QOL features for individual time regions. This release is looking like the last alpha before we move forward on the first release candidate so if you find any critical missing features, be sure to let us know.

Post-rc, we're planning on merging this into 6.X as an 'experimental' or 'beta' status component which means that it will not adhere to our semvar versioning. In other words, we may publish breaking changes to Timeline during minor/patch releases for 6.X.X. More details about that to come.