cluedin-widget/widget/entity/entityTimeToRead/index.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from "react";
import { register } from "../../../core/registry";
import { connect } from "react-redux";
import Widget from "../../../core/components/generics/widget.jsx";
import RadialProgress from "../../../core/components/charts/RadialProgress.jsx";
import TimeLineBar from "../../../core/components/charts/TimeLineBar.jsx";
import ValueLabel from "../../../core/components/generics/ValueLabel.jsx";
import iso from "../../../iso";

class EntityTimeToRead extends Component {
    render() {
        const { isFetchingEntity, entity } = this.props;
        let content;

        if( !isFetchingEntity ) {

            let docProperties = iso.collection.filter( entity.properties, function( p ) {
                return (p.category === 'doctime' && p.value);
            } );

            content = docProperties.map( ( prop )=> {
                if( prop.key === 'timetoread' ) {
                    let timeToReadBar = (<div style={{textAlign: 'center'}}>
                        <RadialProgress diameter={175} value={prop.original}></RadialProgress>
                    </div>);

                    return (<ValueLabel label={prop.displayName}
                                        after={timeToReadBar}>
                    </ValueLabel>);
                }

                if( prop.key === 'timetopresent' ) {
                    let timeToPresentBar = <TimeLineBar value={prop.original}></TimeLineBar>;

                    return (<ValueLabel label={prop.displayName} value={prop.value}
                                        after={timeToPresentBar}></ValueLabel>);
                }

                if( prop.key === 'timetopresent' ) {
                    let timeToPresentBar = <TimeLineBar mode="timetowrite" value={prop.original}></TimeLineBar>;

                    return (<ValueLabel label={prop.displayName} value={prop.value}
                                        after={timeToPresentBar}></ValueLabel>);
                }
            } );

            if( !content || content.length === 0 ) {
                content = <p>We do not have enough information on this document currently.</p>
            }
        }

        return (
            <Widget loading={isFetchingEntity} title="Should I read?">
                {content}
            </Widget>
        );
    }
}

function select( state ) {
    return {
        entity: state.entity.selectedEntity,
        isFetchingEntity: state.entity.isFetchingEntity
    };
}

register( 'EntityTimeToRead', connect( select )( EntityTimeToRead ) );