https://github.com/ericreboisson/lifecycle-timeline
https://github.com/ericreboisson/lifecycle-timeline
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ericreboisson/lifecycle-timeline
- Owner: ericreboisson
- License: mit
- Created: 2025-12-26T17:46:52.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-01-12T22:16:26.000Z (15 days ago)
- Last Synced: 2026-01-13T02:40:21.057Z (15 days ago)
- Language: JavaScript
- Size: 1000 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - lifecycle-timeline - An interactive Vanilla JS component for visualizing product lifecycle stages, accompanied by an Angular integration guide. (Third Party Components / Dates)
- fucking-awesome-angular - lifecycle-timeline - An interactive Vanilla JS component for visualizing product lifecycle stages, accompanied by an Angular integration guide. (Third Party Components / Dates)
README
# 🕒 Lifecycle Timeline
A premium, interactive Vanilla JS component for visualizing product lifecycles, including OSS support, Enterprise support, and EOL (End-Of-Life) dates.
[**🚀 View Live Demo**](https://ericreboisson.github.io/lifecycle-timeline/)
## ✨ Features
- **Interactive Table**: A clear data table between the filter and tracks for quick reference.
- **Smart Filtering**: Real-time search to filter versions across both table and timeline.
- **Dark Mode**: Native support with a persistent toggle.
- **Rich Legend**: Detailed explanation of support states.
- **Responsive Design**: Works on all screen sizes with horizontal scroll support.
- **Sticky Labels**: Version names stay visible while scrolling through time.
- **Interactive Tooltips**: Detailed date information on hover.
- **Live Indicator**: Pulsing badge showing the current date line.
- **Fully Typed**: Includes TypeScript definitions out of the box.
## 🚀 Installation
### Via NPM
```bash
npm install lifecycle-timeline
```
> [!TIP]
> Using Angular? Check out our [Angular Integration Guide](ANGULAR_INTEGRATION.md).
### Manual Installation
Download the files from the `dist` folder: `timeline.js` (ESM), `timeline.umd.cjs` (UMD), and `timeline.css`.
## 🛠 Usage
### Modern JavaScript (ESM)
```javascript
import Timeline from 'lifecycle-timeline';
import 'lifecycle-timeline/style.css';
const data = [
{
version: "6.0.x",
ossStart: "2025-01-01",
ossEnd: "2026-08-20",
enterpriseEnd: "2027-02-15",
releaseNotesUrl: "https://example.com/notes"
}
];
new Timeline('timeline-root', data, { visibleCount: 3 });
```
### Browser (UMD)
```html
const data = [...];
new Timeline('timeline-root', data);
```
## ⚙️ Configuration & API
### Constructor
`new Timeline(elementId, data, options)`
#### `options` Object
| Property | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `visibleCount` | `number` | `3` | Initial versions shown before "Show More" appears. |
| `locale` | `string` | `auto` | UI language (`'en'`, `'fr'`). |
| `i18n` | `object` | `{}` | Custom translations or new languages. |
| `showTable` | `boolean` | `true` | Shows/hides the summary data table. |
| `showLegend` | `boolean` | `true` | Shows/hides the legend below the timeline. |
| `filterVersions` | `boolean` | `true` | Shows/hides the version filter input. |
| `splitSupport` | `boolean` | `false` | If `true`, Ent. starts after OSS end. If `false`, overlaps. |
| `compactMode` | `boolean` | `false` | Reduces vertical spacing for a denser view. |
| `showMajorFilter` | `boolean` | `false` | Adds a checkbox to filter for major versions only. |
### 🌐 Internationalization (i18n)
You can easily override existing labels or add new languages:
```javascript
new Timeline('timeline-root', data, {
locale: 'fr',
i18n: {
fr: {
filter: "Rechercher une version...",
more: "Afficher {n} de plus"
}
}
});
```
### 🛡️ Data Validation
The component automatically validates your data. If required fields (`version`, `ossStart`, `ossEnd`) are missing or if date formats are invalid, a warning is logged in the browser console.
## 🎨 Theming
The component uses CSS variables for easy customization:
```css
:root {
--accent-oss: #99e67d; /* Community support color */
--accent-ent: #ffe88e; /* Enterprise support color */
--current-date: #086dc3; /* Today's indicator color */
--accent-eol: #ef4444; /* End of life color */
}
```
## 🧪 Testing
We use **Vitest** for unit testing.
```bash
npm test
```
## 🛠 Development
1. `npm install`
2. `npm run dev`
3. `npm run build`
4. `npm run release` (Build + Publish)
## 📄 License
MIT © Eric REBOISSON