gverni / kairoi

Project Timelines made easy...

Kairoi

Project Timelines made easy....

This project is a fork of the excellent d3kit-timeline with the following differences:

• Removal of d3kit (last commit on this project was Feb 2017)
• Update of D3 version to 5
• Working with IE10 / IE11 (limited testing)

Add it to your project

Kairoi depends on d3 and labella. These dependencies needs to be loaded separately. For example you can use the following to import kairoi and the dependencies in your HTML:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/labella/1.1.4/labella.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gverni/kairoi@latest/dist/kairoi.js"></script>

Simple usage

Make sure your HTML page contains a target element for the SVG, e.g.:

<div id="timeline"></div>

Initalize the data

var testData = [
    {date: new Date('01 January 2019'), label: 'First / green', labelBgColor: 'green'},
    {date: new Date('06 January 2019'), label: 'Second / green', labelBgColor: 'green'},
    {date: new Date('05 April 2019'), label: 'Third / red', labelBgColor: 'red'},
    {date: new Date('01 May 2019'), label: 'Fourth / red', labelBgColor: 'red'}
]

Create a new Kaiori object passing the selector for the target element.

var timeline = new Kairoi('#timeline')

Add the data to the newly created object:

timeline.data(testData)

Finally, draw the timeline

timeline.draw()

Data initalization

Each label must have at least these two values:

• date: This is the date of the label on the timeline. Note that in d3kit-timeline this was called time. The name can be customized using the timeFn option.
• label: This is the caption of the label. Note that in d3kit-timeline this was called text. The name can be customized using the textFn option.

Optionally you can specify:

• labelBgColor: this specify the bakground color of the label. You can use any CSS value for this.

See more at API documentation

Demo

Simple front-end demo using this project can be found here

Migrating from d3kit-timeline

If you are migrating from d3kit-timeline please note:

• The default key for the date in the data is now date (instead of time)
• The default key for the label caption in the data is now label (instead of text)
• The visualize method is now called draw
• The default value for direction is up (instead of right)
• The data method does not trigger a re-draw of the timeline. This needs to be called esplicitely using draw() (in roadmap for implementation)
• No chart.on() doesn't work (in roadmap for implementation)
• The method options() has been replaced by setOptions()
• The method resizeToFit() is not implemented
• The textStyle is no longer supported. Partial support is provided by labelTextStyle

kairoi's Issues

Add today's mark

Add an option to show a "today" mark on the timeline (e.g. red dotted vertical line)

Add re-draw on `data` event

In d3kit-timeline the data() method trigger a re-draw of the timeline. This is currently not supported.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Add events handler

d3kit-timeline have several events handler. This is currently not available

Add support to IE10 & IE11

On IE11 the rendering of the dots / label is wrong:

Fix "similar-code" issue in src/kairoi.js

Similar blocks of code found in 2 locations. Consider refactoring.

https://codeclimate.com/github/gverni/kairoi/src/kairoi.js#issue_5ca32cf52ccaf60001000025