Vuetify Component
- Follow Vuetify / Material Design look and feel
- Compatible with Vuetify, light/dark theme.
- Follow Vuetify conventions, naming, props, events, etc.
Resolution/Precision
- Start/stop must support timestamp with minute precision. Some use-cases will only need date precision.
Horizontal zoom
- User must be able to zoom in/out using mouse and/or UI buttons,
Horizontal panning
- User must be able to drag/swipe left and right to go back and forward in time
Current Day/Time indicator
- UI must show current time, preferable with a vertical line.
- items: array of items to display, see below for item properties.
- click:item when an item is clicked
- item to customize HTML inside the event's horizontal bar
Items have the following properties:
- id: event id, probably required
- start: timestamp when event starts
- end: timestamp when event ends
- label: name of event, label/title to display in horizontal bar
- color: optional background color
- tags: array of strings or objects, render as chips inside event.
Tags can be string or object, were object allow for chip color to be specified. Colored tags example: tags: [{label: ”bug”, color: ”red”}, {label: ”improvement”, color: ”green”}]
Controls
- left/right to scroll back and forward in time
- zoom in/out to change resolution, from months (maybe years) down to hours (maybe minutes).
- developer should be able to place controls in any corner.
- prop to show controls on hover inside timeline area
Other
- more events?
- more slots, like header, footer, controls
- load items on-demand, when they become visible in the UI, for better performance
- Grouping of sub-items below parent item.
- Gantt features
The component must be open source using either MIT or Apache 2.0 license.
https://github.com/neuronetio/gantt-elastic
- Advanced gantt features, great for project mgmt.
- Too complex for simple use-cases
- Different configuration compared to Vuetify components
(example below shows contracts lifecycle)