<commit_before>/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import * as React from 'react';
import { defaults } from 'chart.js';
import UIOptionsContainer from '../containers/UIOptionsContainer';
import LineChartContainer from '../containers/LineChartContainer';
import BarChartContainer from '../containers/BarChartContainer';
import MultiCompareChartContainer from '../containers/MultiCompareChartContainer';
import SpinnerComponent from './SpinnerComponent';
import { ChartTypes } from '../types/redux/graph';

import * as moment from 'moment';
import { TimeInterval } from '../../../common/TimeInterval';

import Button from 'reactstrap/lib/Button';
import { FormEvent } from 'react';
import { FormattedMessage } from 'react-intl';
import { Dispatch, Thunk, ActionType } from '../types/redux/actions';

import * as Plotly from 'plotly.js';

defaults.plugins = {
	datalabels: {
		display: false
	}
};


interface DashboardProps {
	chartToRender: ChartTypes;
	optionsVisibility: boolean;
	lineLoading: false;
	barLoading: false;
	compareLoading: false;
	selectedTimeInterval: TimeInterval;
	changeTimeInterval(timeInterval: TimeInterval): Promise<any>;
}


/**
 * React component that controls the dashboard
 */
export default class DashboardComponent extends React.Component<DashboardProps, {}> {
	constructor(props: DashboardProps) {
		super(props);
		this.handleTimeIntervalChange = this.handleTimeIntervalChange.bind(this);
	}

	public render(){
		let ChartToRender: typeof LineChartContainer | typeof MultiCompareChartContainer | typeof BarChartContainer;
		let showSpinner = false;
		if (this.props.chartToRender === ChartTypes.line) {
			if (this.props.lineLoading) {
				showSpinner = true;
			}
			ChartToRender = LineChartContainer;
		} else if (this.props.chartToRender === ChartTypes.bar) {
			if (this.props.barLoading) {
				showSpinner = true;
			}
			ChartToRender = BarChartContainer;
		} else {
			if (this.props.compareLoading) {
				showSpinner = true;
			}
			ChartToRender = MultiCompareChartContainer;
		}

		const optionsClassName = this.props.optionsVisibility ? 'col-2 d-none d-lg-block' : 'd-none';
		const chartClassName = this.props.optionsVisibility ? 'col-12 col-lg-10' : 'col-12';

		const buttonMargin: React.CSSProperties = {
			marginRight: '10px'
		};

		return (
			<div className='container-fluid'>
				<div className='row'>
					<div className={optionsClassName}>
						<UIOptionsContainer />
					</div>
					<div className={`${chartClassName} align-self-center text-center`}>
						{ showSpinner ? (
							<SpinnerComponent loading width={50} height={50} />
						) : (
							<ChartToRender />
						)}
						<Button
							style={buttonMargin}
							onClick={() => this.handleTimeIntervalChange("range")}
						>
							Redraw
						</Button>
						<Button
							style={buttonMargin}
							onClick={() => this.handleTimeIntervalChange("all")}
						>
							Restore
						</Button>
					</div>
				</div>
			</div>
		);		
	}<commit_msg>Place the buttons on the line chart page only<commit_after>/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import * as React from 'react';
import { defaults } from 'chart.js';
import UIOptionsContainer from '../containers/UIOptionsContainer';
import LineChartContainer from '../containers/LineChartContainer';
import BarChartContainer from '../containers/BarChartContainer';
import MultiCompareChartContainer from '../containers/MultiCompareChartContainer';
import SpinnerComponent from './SpinnerComponent';
import { ChartTypes } from '../types/redux/graph';

import * as moment from 'moment';
import { TimeInterval } from '../../../common/TimeInterval';

import Button from 'reactstrap/lib/Button';
import { FormEvent } from 'react';
import { FormattedMessage } from 'react-intl';
import { Dispatch, Thunk, ActionType } from '../types/redux/actions';

import * as Plotly from 'plotly.js';

defaults.plugins = {
	datalabels: {
		display: false
	}
};


interface DashboardProps {
	chartToRender: ChartTypes;
	optionsVisibility: boolean;
	lineLoading: false;
	barLoading: false;
	compareLoading: false;
	selectedTimeInterval: TimeInterval;
	changeTimeInterval(timeInterval: TimeInterval): Promise<any>;
}


/**
 * React component that controls the dashboard
 */
export default class DashboardComponent extends React.Component<DashboardProps, {}> {
	constructor(props: DashboardProps) {
		super(props);
		this.handleTimeIntervalChange = this.handleTimeIntervalChange.bind(this);
	}

	public render(){
		let ChartToRender: typeof LineChartContainer | typeof MultiCompareChartContainer | typeof BarChartContainer;
		let showSpinner = false;
		if (this.props.chartToRender === ChartTypes.line) {
			if (this.props.lineLoading) {
				showSpinner = true;
			}
			ChartToRender = LineChartContainer;
		} else if (this.props.chartToRender === ChartTypes.bar) {
			if (this.props.barLoading) {
				showSpinner = true;
			}
			ChartToRender = BarChartContainer;
		} else {
			if (this.props.compareLoading) {
				showSpinner = true;
			}
			ChartToRender = MultiCompareChartContainer;
		}

		const optionsClassName = this.props.optionsVisibility ? 'col-2 d-none d-lg-block' : 'd-none';
		const chartClassName = this.props.optionsVisibility ? 'col-12 col-lg-10' : 'col-12';

		const buttonMargin: React.CSSProperties = {
			marginRight: '10px'
		};

		return (
			<div className='container-fluid'>
				<div className='row'>
					<div className={optionsClassName}>
						<UIOptionsContainer />
					</div>
					<div className={`${chartClassName} align-self-center text-center`}>
						{ showSpinner ? (
							<SpinnerComponent loading width={50} height={50} />
						) : (
							<ChartToRender />
						)}
						{ (this.props.chartToRender === ChartTypes.line) ? (
							[<Button
								style={buttonMargin}
								onClick={() => this.handleTimeIntervalChange("range")}
							> Redraw
							</Button>,
							<Button
								style={buttonMargin}
								onClick={() => this.handleTimeIntervalChange("all")}
							> Restore
							</Button>]
						) : (
							null
						)}
					</div>
				</div>
			</div>
		);		
	}
{'fraction_non_alphanumeric': 0.1254871395167576, 'fraction_numerical': 0.005300077942322681, 'mean_word_length': 3.6492753623188405, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 41, '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': '1453788', 'n_tokens_mistral': 2241, 'n_tokens_neox': 1866, 'n_words': 469}