Skip to content

Instantly share code, notes, and snippets.

@goeh
Last active September 17, 2019 23:10
Show Gist options
  • Save goeh/728a7d7e57ba2c6afaee6adda8d8d48d to your computer and use it in GitHub Desktop.
Save goeh/728a7d7e57ba2c6afaee6adda8d8d48d to your computer and use it in GitHub Desktop.
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)

@goeh
Copy link
Author

goeh commented Sep 15, 2019

image

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