const md5 = require('./md5');
const repositories = require('json!./data.json');
import * as d3 from 'd3/build/d3';

import eventDrops from '../lib/eventDrops';

const colors = d3.schemeCategory10;
const gravatar = email =>
    `https://www.gravatar.com/avatar/${md5(email.trim().toLowerCase())}`;

// September 4 1986 8:30 PM
const humanizeDate = date => {
    const monthNames = [
        'Jan.',
        'Feb.',
        'March',
        'Apr.',
        'May',
        'June',
        'Jul.',
        'Aug.',
        'Sept.',
        'Oct.',
        'Nov.',
        'Dec.',
    ];

    return `
        ${monthNames[date.getMonth()]} ${date.getDate()} ${date.getFullYear()}
        ${date.getHours()}:${date.getMinutes()}
    `;
};

const FONT_SIZE = 16; // in pixels
const TOOLTIP_WIDTH = 30; // in rem

// we're gonna create a tooltip per drop to prevent from transition issues
const showTooltip = commit => {
    d3.select('body').selectAll('.tooltip').remove();

    const tooltip = d3
        .select('body')
        .append('div')
        .attr('class', 'tooltip')
        .style('opacity', 0); // hide it by default

    const t = d3.transition().duration(750).ease(d3.easeLinear);

    tooltip
        .transition(t)
        .on('start', () => {
            d3.select('.tooltip').style('display', 'block');
        })
        .style('opacity', 1);

    const rightOrLeftLimit = FONT_SIZE * TOOLTIP_WIDTH;

    const direction = d3.event.pageX > rightOrLeftLimit ? 'right' : 'left';

    const ARROW_MARGIN = 1.65;
    const ARROW_WIDTH = FONT_SIZE;
    const left = direction === 'right'
        ? d3.event.pageX - rightOrLeftLimit
        : d3.event.pageX - ARROW_MARGIN * FONT_SIZE - ARROW_WIDTH / 2;

    tooltip.html(
        `
            <div class="commit">
                <img class="avatar" src="${gravatar(commit.author.email)}" alt="${commit.author.name}" title="${commit.author.name}" />
                <div class="content">
                    <h3 class="message">${commit.message}</h3>
                    <p>
                        <a href="https://www.github.com/${commit.author.name}" class="author">${commit.author.name}</a>
                        on <span class="date">${humanizeDate(new Date(commit.date))}</span> -
                        <a class="sha" href="${commit.sha}">${commit.sha.substr(0, 10)}</a>
                    </p>
                </div>
            </div>
        `
    );
    tooltip
        .style('left', `${left}px`)
        .style('top', d3.event.pageY + 16 + 'px')
        .classed(direction, true);
};

const hideTooltip = () => {
    const t = d3.transition().duration(1000);

    d3
        .select('.tooltip')
        .transition(t)
        .on('end', this.remove)
        .style('opacity', 0);
};

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);

const element = d3.select('#eventdrops-demo').datum(
    repositories.map(repository => ({
        name: repository.name,
        data: repository.commits,
    }))
);

chart(element);

@@ -983,25 +983,16 @@
 tip = d3
-%0A        
 .select(
@@ -1580,24 +1580,26 @@
  'right'
+ ?
 %0A       
  ? d3.ev
@@ -1590,18 +1590,16 @@
 %0A       
- ?
  d3.even
@@ -1624,24 +1624,26 @@
 eftLimit
+ :
 %0A       
  : d3.ev
@@ -1634,18 +1634,16 @@
 %0A       
- :
  d3.even
@@ -1714,31 +1714,18 @@
 ip.html(
+%60
 %0A
-        %60%0A    
         
@@ -1757,20 +1757,16 @@
         
-    
 %3Cimg cla
@@ -1885,28 +1885,24 @@
             
-    
 %3Cdiv class=%22
@@ -1907,28 +1907,24 @@
 =%22content%22%3E%0A
-    
             
@@ -1990,20 +1990,12 @@
     
-    %3Cp%3E%0A    
+%3Cp%3E%0A
     
@@ -2126,20 +2126,16 @@
         
-    
 on %3Cspan
@@ -2216,20 +2216,16 @@
         
-    
 %3Ca class
@@ -2304,21 +2304,13 @@
     
-   
- 
 %3C/p%3E%0A
-    
     
@@ -2324,36 +2324,32 @@
  %3C/div%3E%0A        
-    
 %3C/div%3E%0A        %60
@@ -2347,21 +2347,13 @@
     
- 
-   %60%0A    
+%60
 );%0A
+%0A
     
@@ -2359,25 +2359,16 @@
  tooltip
-%0A        
 .style('
@@ -2409,16 +2409,17 @@
 ('top', 
+(
 d3.event
@@ -2429,16 +2429,17 @@
 geY + 16
+)
  + 'px')
@@ -2559,25 +2559,16 @@
 %0A%0A    d3
-%0A        
 .select(
@@ -2578,25 +2578,16 @@
 ooltip')
-%0A        
 .transit
@@ -2616,19 +2616,61 @@
 d', 
-this.remove
+function end() %7B%0A            this.remove();%0A        %7D
 )%0A  

Fix demo issue