Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Requirements for a new Vuetify Horizontal Timeline component

Horizontal Timeline Component - requirements

Must have

User Interface

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.

API

Props

  • items: array of items to display, see below for item properties.

Events

  • click:item when an item is clicked

Slots

  • 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”}]

Nice To Have

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

Future versions

  • Grouping of sub-items below parent item.
  • Gantt features

License

The component must be open source using either MIT or Apache 2.0 license.

Inspiration

Gantt Elastic component

https://github.com/neuronetio/gantt-elastic

Pros

  • Advanced gantt features, great for project mgmt.

Cons

  • Too complex for simple use-cases
  • Different configuration compared to Vuetify components

CHAP Timeline example

CHAP Timeline Home

(example below shows contracts lifecycle)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment