Timeline Component

The timeline component is a powerful tool for displaying events and data in a timeline format. It is designed to be flexible and customizable, allowing you to display events in a variety of ways.

component: timeline
props:
  orientation: "horizontal" # horizontal, vertical
  view: "day" # day, week, month, year
  startDate: "{{ startDate }}" # limit the timeline to a specific date range
  endDate: "{{ endDate }}" # limit the timeline to a specific date range
  defaultDate: "{{ today() }}" # default date to display when no date is provided
  options:
    height: "400px"
  eventTemplate: # Item template is used to display the events in the timeline
    component: card
    props:
      title: "{{ item.title }}"
      description: "{{ item.description }}"
      backgroundColor: "{{ item.backgroundColor }}"
      textColor: "{{ item.textColor }}"
      icon: "{{ item.icon }}"
    children:
      - component: icon
        props:
          name: "{{ item.icon }}"
          color: "{{ item.iconColor }}"
          size: "{{ item.iconSize }}"
  eventSources:
    - query: # query will be executed for visible timeline range
        command: >-
          query GetOrders($organizationId: Int!, $filter: String) {
          orders(organizationId: $organizationId, take: 1000, filter: $filter) {
                  items {
                      orderId
                      orderDate
                      orderNumber
                  }
              }
          }
        variables:
          organizationId: "{{ number organizationId }}"
          filter: "orderDate:[{{startDate}} TO {{endDate}}]"
        path: orders.items
        mapping:
          date: "{{ item.orderDate }}" # date is a required field
          title: "{{ item.orderNumber }}" # title is a required field