Timeline

A free and public tool to organise your timeline charts entirely made with Svelte, Typescript & 💖.

Take a look on our demo and give your feedback here.

Roadmap

Currently, there is no clear roadmap but we have done a lot of great stuff!

• ✔️ Allow multiple charts for the same session
• ✔️ Allow switching between your charts
• ✔️ Improve rendering when the graph is spread over very long periods (> 15 months)
• ✔️ Allow .toml files's usage
• ✔️ Guessing encoding of your files
• ✔️ Allow users to save their charts remotely
• ✔️ Share charts between user

But we continue to have lots of exciting ideas

• 🔥 Improve tests coverage
• 📅 Adding more control on data (length of string / validation of date / ...)
• 📅 Implementing other types of charts (like gantt) see #4
• 📅 New options to customize color see #2
• 📅 Zooming in/out on your charts see #3
• ... see more

Contributions

Thank you everybody for your help!

• Kevin Danezis
• CMCmike

Developing

npm install

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Running tests

Tests are located in /src/__test__ directory. They are made with jest

npm run test

#or run the tests and refresh the test each time you modify a file
npm run test:watch

You can also ask for coverage

npm run coverage

Check code & linter

npx sv check
npx eslint

Demo

If you'd like to try out TimeChart, or if you don't have the knowledge (or inclination) to host the application yourself, we suggest you use the official TimeChart server.

Advantages :

• ✅ Free and available (as long as I can to pay the bills)
• ✅ You don't have to worry about maintenance (version upgrades, server support, backup).

Keep in mind that the data you enter are stored with me.

Installation

Docker Compose [Recommended]

The easiest way to install TimeChart is to use our docker-compose.yml file.

Step 1: Download files

Create a directory of your choice (eg: ./timechart) to store the docker-compose.yml and .env files.

mkdir ./timechart
cd ./timechart

Download the docker-compose.yml and .env files by running these commands

wget -O docker-compose.yml https://github.com/besstiolle/Timeline/releases/latest/download/docker-compose.yml
wget -O .env https://github.com/besstiolle/Timeline/releases/latest/download/example.env

If you wish to download the files via your web browser, remember to rename example.env to .env.

Step 2: Fill in the .env file with your own values

# You can find documentation for all the supported env variables at https://github.com/besstiolle/Timeline

# The location where your database is stored
DB_LOCATION=/your/own/directory/to/db

# The data-website-id code from umami
#TIMECHART_ANALYTICS_UMAMI_CODE=aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa
#TIMECHART_ANALYTICS_UMAMI_SCRIPT=https://cloud.umami.is/script.js

# The data-domain code from plausible
#TIMECHART_ANALYTICS_PLAUSIBLE_CODE=timechart.dev
#TIMECHART_ANALYTICS_PLAUSIBLE_SCRIPT=https://plausible.io/js/script.js

# Do we need to show the version of the install
TIMECHART_SHOW_VERSION=TRUE

Explanations of environmental variables

Step 3: Start the container.

Still in the directory of your choice (eg: ./timechart), start the containers with these commands

docker compose up -d

Docker

If you don't want to use Docker Compose, you can launch the application with a single command line:

docker run \
  --rm --name timechart_latest \
  -p 3000:3000 \
  -v /your/own/directory/to/db:/app/db \
  -e TIMECHART_ANALYTICS_UMAMI_CODE=aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa \
  -e TIMECHART_SHOW_VERSION=TRUE \
  besstiolle/timechart:latest

Explanations:

• --rm --name timechart_latest Optional : sets a clear name for the container and deletes it once the container has been switched off. (No data loss is expected if you use the option -v /your/own/directory/to/db:/app/db)
• -p 3000:3000 Optional : Used to expose port 3000. You can configure to expose another port. For example, exposing port 8080 would give: -p 8080:3000
• -v /your/own/directory/to/db:/app/db : Defines the location of your database on the host disk.
• -e VAR_NAME=VAR_VALUE : Used to initialise the value of an environment variable. Please refer to the dedicated explanation table.

Translation

We've been using inlang and its equivalent Paraglide JS to translate this software since TimeChart version 0.2.0.

The following translations are currently available:

• ✅ English
• ✅ Français

Don't hesitate to push a PR to improve translation coverage.

Add a new language

To add a new language, create the corresponding file in ./messages/ (example: es.json for Spanish) Modify the project.inlang/settings.json file and add the code in the locales node (example: es for Spanish)

  "locales": [
    "en",
    "fr"
  ],

    "locales": [
    "en",
    "fr",
    "es"
  ],

Update translations, complete missing translations

Open the language file in ./messages/ (example: ./messages/es.json for Spanish) and add the missing key or modify the text.

  "example_message": "Hola {username}",

Useful commands

Validate the entire translation structure:

npx @inlang/cli validate --project project.inlang

Help translate missing text (this requires proofreading after all)

npx @inlang/cli machine translate --project project.inlang