<commit_before>import React from 'react';
import ReactDOM from 'react-dom';

import {ResponsiveContainer, Tooltip, LineChart, Line, AreaChart, CartesianGrid, Area, XAxis, YAxis} from 'recharts';
import HistoryTooltip from '../../shared/history-tooltip';

import moment from 'moment';
import {orderBy} from 'lodash';

export default class DetailTimeline extends React.PureComponent {
	static propTypes = {
		isChecking: React.PropTypes.bool.isRequired,
		snapshots: React.PropTypes.array.isRequired,
		length: React.PropTypes.number.isRequired
	}
	constructor(props) {
		super(props);
	}
	render() {
		const toPercent = (decimal, fixed = 0) => {
			return `${(decimal * 100).toFixed(fixed)}%`;
		};
		const snapshots = this.props.snapshots.map((item, index) => {
			return {
				missingSupport: item.missingSupport,
				partialSupport: item.partialSupport,
				fullSupport: 100 - item.missingSupport - item.partialSupport
			}
		});
		const lastCheck = this.props.isChecking ? 
			(<span><i className="icon icon-spinner8 animate rotate"></i>Currently checking…</span>) : 
			(<span>{moment(snapshots[snapshots.length - 1].captured).calendar()}</span>);

		return (
			<div className="history-container">
				<div className="description">
					<span>Timeline</span>
					<span className="align-right">Last check: {lastCheck}</span>
				</div>
				<HistoryTooltip/>
				<div className="chart chart--extended">
					<ResponsiveContainer>

						<AreaChart width={1000} height={600} data={snapshots} stackOffset="expand">
							<XAxis dataKey="captured"/>
							<YAxis tickFormatter={toPercent}/>
							<CartesianGrid strokeDasharray="3 3"/>
							<Area type='monotone' dataKey='fullSupport' stackId="1" stroke='#82ca9d' fill='#82ca9d' />
							<Area type='monotone' dataKey='partialSupport' stackId="1" stroke='#ffc658' fill='#ffc658' />
							<Area type='monotone' dataKey='missingSupport' stackId="1" stroke='#f36666' fill='#f36666' />
						</AreaChart>




					</ResponsiveContainer>
				</div>
			</div>
		);
	}
}<commit_msg>fixed tooltip for detailed timeline<commit_after>import React from 'react';
import ReactDOM from 'react-dom';

import {ResponsiveContainer, Tooltip, LineChart, Line, AreaChart, CartesianGrid, Area, XAxis, YAxis} from 'recharts';
import HistoryTooltip from '../../shared/history-tooltip';

import moment from 'moment';
import {orderBy} from 'lodash';

export default class DetailTimeline extends React.PureComponent {
	static propTypes = {
		isChecking: React.PropTypes.bool.isRequired,
		snapshots: React.PropTypes.array.isRequired,
		length: React.PropTypes.number.isRequired
	}
	constructor(props) {
		super(props);
	}
	render() {
		const toPercent = (decimal, fixed = 0) => {
			return `${(decimal * 100).toFixed(fixed)}%`;
		};
		const renderTooltipContent = (o) => {
			const { payload, label } = o;
			console.log(label);
			return (
				<div className="history-tooltip">
					<p className="label">{`${label}`}</p>
					<ul className="list">
						{
							payload.map((entry, index) => (
								<li className="" key={`item-${index}`} style={{color: entry.color}}>
								{`${entry.name}: ${entry.value.toFixed(2)}%`}
								</li>
							))
						}
					</ul>
				</div>
			);
		};
		
		const snapshots = this.props.snapshots.map((item, index) => {
			return {
				missingSupport: item.missingSupport,
				partialSupport: item.partialSupport,
				fullSupport: 100 - item.missingSupport - item.partialSupport,
				captured: moment(item.captured).calendar()
			}
		});
		const lastCheck = this.props.isChecking ? 
			(<span><i className="icon icon-spinner8 animate rotate"></i>Currently checking…</span>) : 
			(<span>{snapshots[snapshots.length - 1].captured}</span>);

		return (
			<div className="history-container">
				<div className="description">
					<span>Timeline</span>
					<span className="align-right">Last check: {lastCheck}</span>
				</div>
				<HistoryTooltip/>
				<div className="chart chart--extended">
					<ResponsiveContainer>

						<AreaChart width={1000} height={150} data={snapshots}
							margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
							<XAxis dataKey="captured" />
							<YAxis />
							<Tooltip content={renderTooltipContent}/>
							<CartesianGrid strokeDasharray="3 3"/>
							<Area type='monotone' dataKey='fullSupport' stackId="1" stroke='#82ca9d' fill='#82ca9d' />
							<Area type='monotone' dataKey='partialSupport' stackId="1" stroke='#ffc658' fill='#ffc658' />
							<Area type='monotone' dataKey='missingSupport' stackId="1" stroke='#f36666' fill='#f36666' />
						</AreaChart>




					</ResponsiveContainer>
				</div>
			</div>
		);
	}
}
{'fraction_non_alphanumeric': 0.16156828953037483, 'fraction_numerical': 0.02003446790176648, 'mean_word_length': 3.8668763102725365, 'pattern_counts': {'":': 0, '<': 66, '<?xml version=': 0, '>': 72, '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': '6811748', 'n_tokens_mistral': 1875, 'n_tokens_neox': 1488, 'n_words': 304}