<commit_before>import * as d3 from 'd3/build/d3';

import eventDrops from '../src';
import '../src/style.css';
import { gravatar, humanizeDate } from './utils';

const repositories = require('./data.json');

const numberCommitsContainer = document.getElementById('numberCommits');
const zoomStart = document.getElementById('zoomStart');
const zoomEnd = document.getElementById('zoomEnd');

const updateCommitsInformation = (chart) => {
    const filteredData = chart.filteredData().reduce((total, repo) => total.concat(repo.data), []);

    numberCommitsContainer.textContent = filteredData.length;
    zoomStart.textContent = humanizeDate(chart.scale().domain()[0]);
    zoomEnd.textContent = humanizeDate(chart.scale().domain()[1]);
};

const tooltip = d3.select('body').append('div')
    .classed('tooltip', true)
    .style('opacity', 0);

const chart = eventDrops({
    d3,
    config: {
        drop: {
            date: d => new Date(d.date),
        },
        zoom: {
            onZoomEnd: () => updateCommitsInformation(chart),
        },
        drop: {
            onMouseOver: (commit) => {
                tooltip.transition()
                    .duration(200)
                    .style('opacity', 1);

                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><commit_msg>Fix demo<commit_after>import * as d3 from 'd3/build/d3';

import eventDrops from '../src';
import '../src/style.css';
import { gravatar, humanizeDate } from './utils';

const repositories = require('./data.json');

const numberCommitsContainer = document.getElementById('numberCommits');
const zoomStart = document.getElementById('zoomStart');
const zoomEnd = document.getElementById('zoomEnd');

const updateCommitsInformation = (chart) => {
    const filteredData = chart.filteredData().reduce((total, repo) => total.concat(repo.data), []);

    numberCommitsContainer.textContent = filteredData.length;
    zoomStart.textContent = humanizeDate(chart.scale().domain()[0]);
    zoomEnd.textContent = humanizeDate(chart.scale().domain()[1]);
};

const tooltip = d3.select('body').append('div')
    .classed('tooltip', true)
    .style('opacity', 0);

const chart = eventDrops({
    d3,
    config: {
        zoom: {
            onZoomEnd: () => updateCommitsInformation(chart),
        },
        drop: {
            date: d => new Date(d.date),
            onMouseOver: (commit) => {
                tooltip.transition()
                    .duration(200)
                    .style('opacity', 1);

                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>
{'fraction_non_alphanumeric': 0.15766052129688493, 'fraction_numerical': 0.008900190718372537, 'mean_word_length': 2.424374319912949, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1487826', 'n_tokens_mistral': 879, 'n_tokens_neox': 836, 'n_words': 163}