labo-components/app/components/collection/FieldAnalysisStats.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';

import IDUtil from '../../util/IDUtil';
import ReactTooltip from 'react-tooltip';
import ComponentUtil from '../../util/ComponentUtil';

class FieldAnalysisStats extends React.Component {

	constructor(props) {
		super(props);
	}

	render() {
		const stats = [];

		let tip1 = 'Selected date field:<br/><br/>';
		tip1 += this.props.collectionConfig.toPrettyFieldName(this.props.data.date_field);

		let tip2 = 'Selected analysis field:<br/><br/>';
		tip2 += this.props.collectionConfig.toPrettyFieldName(this.props.data.analysis_field)

		if(this.props.data && this.props.data.doc_stats) {
			stats.push(
				<tr key="tr__1">
					<td>Total number of records in the collection</td>
					<td className="align-right"><strong>{ComponentUtil.formatNumber(this.props.data.doc_stats.total)}</strong></td>
				</tr>
			);
            stats.push(
				<tr key="tr__2">
					<td>&nbsp;&nbsp;records that contain the selected date field&nbsp;
						<span data-for={'__ci_tooltip'}
							data-tip={tip1}
							data-html={true}>
							<i className="fas fa-info-circle"></i>
						</span>
					</td>
					<td className="align-right">{ComponentUtil.formatNumber(this.props.data.doc_stats.date_field)}</td>
				</tr>
            );
            stats.push(
				<tr key="tr__3">
					<td>&nbsp;&nbsp;&nbsp;&nbsp;records that contain both the selected date &amp; analysis field&nbsp;
						<span data-for={'__ci_tooltip'}
							data-tip={tip2}
							data-html={true}>
							<i className="fas fa-info-circle"></i>
						</span>
					</td>
					<td className="align-right">{ComponentUtil.formatNumber(this.props.data.field_stats.analysis_field_count)}</td>
				</tr>
			);
			stats.push(
				<tr key="tr__4">
					<td>&nbsp;&nbsp;records that do <strong>not</strong> contain the analysis field&nbsp;
						<span data-for={'__ci_tooltip'}
							data-tip={tip2}
							data-html={true}>
							<i className="fas fa-info-circle"></i>
						</span>
					</td>
					<td className="align-right">{ComponentUtil.formatNumber(this.props.data.doc_stats.no_analysis_field)}</td>
				</tr>
			);
			stats.push(
				<tr key="tr__5">
					<td>Expected date range (in {this.props.data.field_stats.date_field_scope.unit}s) based on selected date field</td>
					<td className="align-right">{this.props.data.field_stats.date_field_scope.start} - {this.props.data.field_stats.date_field_scope.end}</td>
				</tr>
			)
			stats.push(
				<tr key="tr__6">
					<td>Actual date range (in {this.props.data.field_stats.date_field_scope.unit}s) based on selected date field</td>
					<td className="align-right">{this.props.data.doc_stats.min_year} - {this.props.data.doc_stats.max_year}</td>
				</tr>
			);
			stats.push(
				<tr key="tr__7">
					<td>
						Dates outside of expected range</td>
					<td className="align-right">{this.props.data.field_stats.date_field_out_of_scope}</td>
				</tr>
			);
		}

		return (
			<div className={IDUtil.cssClassName('field-analysis-stats')}>
				<table className="table table-condensed">
					<tbody>
						{stats}
					</tbody>
				</table>
				<ReactTooltip id={'__ci_tooltip'}/>
			</div>
		);
	}
}
FieldAnalysisStats.propTypes = {
    collectionConfig: PropTypes.shape({
        toPrettyFieldName: PropTypes.func.isRequired
    }).isRequired,
    data: PropTypes.shape({
        analysis_field: PropTypes.string.isRequired,
        collection: PropTypes.string,
        date_field: PropTypes.string.isRequired,
        doc_stats: PropTypes.shape({
            analysis_field: PropTypes.number,
            date_field: PropTypes.number.isRequired,
            max_year: PropTypes.number.isRequired,
            min_year: PropTypes.number.isRequired,
            no_analysis_field: PropTypes.number.isRequired,
            no_date_field: PropTypes.number,
            total: PropTypes.number.isRequired,
        }).isRequired,
        doc_type: PropTypes.string,
        facets: PropTypes.array,
        field_stats: PropTypes.shape({
            analysis_field_count: PropTypes.number.isRequired,
            date_field_count: PropTypes.number,
            date_field_out_of_scope: PropTypes.number.isRequired,
            date_field_scope: PropTypes.shape({
                end: PropTypes.number.isRequired,
                start: PropTypes.number.isRequired,
                unit: PropTypes.string.isRequired
            }).isRequired,
            query: PropTypes.string,
            service: PropTypes.shape({
                collection: PropTypes.string,
                dependencies: PropTypes.array,
                name: PropTypes.string,
                version: PropTypes.string
            }),
            timeline: PropTypes.array,
            timestamp: PropTypes.string
        })

    }).isRequired
};
export default FieldAnalysisStats;