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>`
}

Quick example with React

import React, { useRef } from "react";
import Timeline from "@lemonadejs/timeline/dist/react";
import '@lemonadejs/timeline/dist/style.css';

const 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),
    }
];

export default function App() {
    const tabs = useRef();
    return (
        <>
            <Timeline ref={tabs} data={data} align="left"/>
        </>
    );
}

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

Other useful tools

https://jspreadsheet.com

https://jsuites.net