MIGRATION-1.0.md

Migrating from 0.3 to 1.0

In theory...

The API has been deeply reviewed to both simplify configuration, and improve overall performances. We chose to break backward compatibility to allow the implementation of the new features. That means you will probably need to rewrite your current scripts to make them work with the new version.

Here is a mapping of common configuration parameters, before and after this change:

Former Name	New Name	Comments
start	range.start	Now defaults to one year ago
end	range.end
margin	margins
labelsWidth	label.width
labelsRightMargin	label.padding
axisFormat	axis.formats	Now an object mapping each time format (%Y for year, etc.)
tickFormat	N/A	Removed to ease configuration
mouseover	drop.onMouseOver
zoomend	zoom.onZoomEnd
click	drop.onClick
hasDelimiter	N/A	Set false to bounds parameter to remove them.
hasTopAxis	N/A	Removed during chart redesign
hasBottomAxis	N/A	Removed during chart redesign
eventLineColor	line.color
eventColor	drop.color
minScale	zoom.minimumScale
maxScale	zoom.maximumScale
mouseout	drop.onMouseOut
zoomable	N/A	Set false to zoom to disable zoom.
date	drop.date

We also renamed the two exposed methods:

• Use scale instead of scales to retrieve currently displayed time range,
• Use filteredData instead of visibleDataInRow to retrieve currently displayed data.

And in Practice

Let's consider the demo code. Before, we displayed a drop chart using the following code:

const chart = eventDrops()
    .start(new Date(new Date().getTime() - 3600000 * 24 * 365)) // one year ago
    .end(new Date())
    .eventLineColor((d, i) => colors[i])
    .date(d => new Date(d.date))
    .mouseover(showTooltip)
    .mouseout(hideTooltip)
    .zoomend(updateInfos);

d3
    .select('#container')
    .datum(repositoriesData)
    .call(chart);

With 1.0 version, our code becomes:

const chart = eventDrops({
    drop: {
        date: d => new Date(d.date),
        onMouseOver: showTooltip,
        onMouseOut: hideTooltip,
    },
    zoom: {
        onZoomEnd: updateInfos,
    }
    line: {
        color: (_, i) => d3.schemeCategory10[i],
    }
    range: {
        start: new Date(new Date().getTime() - (3600000 * 24 * 365)), // one year ago
        end: new Date(),
    }
});

d3.select('#container').data(repositoriesData).call(chart);

Note that line and range parameters are not mandatory in this example, as they use default values.