@lemonadejs/timeline

LemonadeJS

JavaScript Timeline

LemonadeJS Timeline is a framework-agnostic JavaScript plugin that offers integration with Vue, React, and Angular. Designed to enable developers to craft logs, event highlights, and minimalist roadmaps easily, it provides extensive customization options. Users have the flexibility to modify colours, content, and point positions and can take advantage of the automatic event grouping by month, complete with navigation functionality.

Settings

Attribute	Type	Description
data	Item[]	An array of items to be displayed. Each item should follow the structure defined in the 'Item Properties' section.
type?	string	There are default and monthly types. The latter will create a navigation per month and group all items.
align?	string	Align the bullet points. Accepted values include "left", "right", "top", and "bottom". Default: "left".
message?	string	Will show when no data to display
order?	string	Accepted values are 'asc' for ascending and 'desc' for descending order.
width?	number	Determines the width of the timeline container.
height?	number	Determines the height of the timeline container.
url?: String	Specifies the URL for fetching the data.
remote?: Boolean	Enable the remote functionality. Default: false

Item Properties

Attribute	Description
date?: string	A date associated with the item, providing chronological information.
title?: : string	Title for the item.
subtitle?: string	Sub caption for the item.
description?: string	Item description.
borderColor?: string	Border color
borderStyle?: string	Define the style of the item's border, such as "solid," "dashed," or "dotted."

Events

Event	Trigger
onupdate?	Called when the items are updated.

Installation

To install it in your project using npm, run the following command:

$ npm install @lemonadejs/timeline

CDN

To use timeline via a CDN, include the following script tags in your HTML file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/timeline/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/timeline/dist/style.min.css" />

Usage

Quick example with Lemonade

import lemonade from 'lemonadejs'
import Timeline from '@lemonadejs/timeline';
import '@lemonadejs/timeline/dist/style.css';

export default function App() {
    const self = this;

    self.data = [
        {
            title: "Issue Identification",
            date: new Date(2022, 6, 1),
        },
        {
            title: "Root Cause Analysis",
            date: new Date(2022, 6, 2),
        },
        {
            title: "Implementation of Solution",
            date: new Date(2022, 6, 3),
            borderColor: '#808000',
            borderStyle: 'dashed',
        },
        {
            title: "Implementation of Solution",
            date: new Date(2022, 6, 4),
        }
    ];

    return `<Timeline :data="self.data" align="left" /></div>`
}

A micro reactive timeline in javascript and LemonadeJS. https://lemonadejs.net

Other useful tools

https://jspreadsheet.com

https://jsuites.net