@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. See Item Properties below.
type?	'monthly'	Enables month-based filtering plus the navigation header. Omit for a flat timeline.
value?	string | Date	Initial date used to seed year / month (useful with type: 'monthly').
format?	string	Mask used to render each item's day label. Defaults: dd mmm yyyy (monthly), dddd, dd (otherwise).
align?	'left' | 'right' | 'top' | 'bottom'	Side the bullet line is aligned to. Default: 'left'.
order?	'asc' | 'desc'	Sort order applied to result. Default: 'asc'.
message?	string	Displayed when no items match. Default: 'No records found'.
width?	number	Container width in pixels.
height?	number	Container height in pixels.
controls?	boolean	Show the navigation header. Default: true when type is 'monthly', false otherwise.
position?	string	Passthrough value for data-mode on the data container; hook for custom CSS.
url?	string	URL for fetching data.
remote?	boolean	When true together with url and type: 'monthly', items are refetched on month/order change.
onupdate?	(instance, result) => void	Called every time result is recomputed.
onedition?	(entry) => void	Called when the edit icon on an editable item is clicked.

Item Properties

Attribute	Description
date: string | Date	The item's date. Required.
title: string	The item's main label.
subtitle?: string	Secondary label shown under the title.
description?: string	Long-form description.
borderColor?: string	CSS color applied to the item's border (--lm-border-color).
borderStyle?: string	CSS border style (solid, dashed, dotted, ...) — sets --lm-border-style.
editable?: boolean	When true, renders an edit icon that fires onedition.
tags?: Tag[]	Array of tag chips rendered under the description.
day?: string	Formatted date label. Computed from date and format at runtime.

Tag Properties

Attribute	Description
title	Tag label.
color?	Background color applied to the chip (e.g. '#dc2626', 'red').
onclick?	(event, tag) => void — called when the tag is clicked.

Instance

Calling Timeline(root, options) returns an instance exposing:

Property / Method	Description
el	The root DOM element.
data	Reactive array of items (assign to replace).
result	Filtered + sorted array used for rendering.
year / month	Current navigation position (month is 1-12).
months	Localized month names.
next() / prev()	Navigate one month forward / backward.

Events

Event	Trigger
onupdate	Fired after result is recomputed (initial render + every change). Signature: (instance, result).
onedition	Fired when the edit icon is clicked on an editable item. Signature: (entry).

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 data = [
        {
            title: 'Issue Identification',
            date: new Date(2022, 6, 1),
            tags: [{ title: 'urgent', color: '#dc2626' }],
        },
        {
            title: 'Root Cause Analysis',
            date: new Date(2022, 6, 2),
        },
        {
            title: 'Implementation of Solution',
            date: new Date(2022, 6, 3),
            borderColor: '#808000',
            borderStyle: 'dashed',
            editable: true,
        },
        {
            title: 'Review',
            date: new Date(2022, 6, 4),
        },
    ];

    return (render) => render`<Timeline data="${data}" align="left" onedition="${(e) => console.log(e)}" /></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: 'Review', date: new Date(2022, 6, 4) },
];

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

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

Other useful tools

https://jspreadsheet.com

https://jsuites.net