OSiDashboard/Luzzu Dashboard/src/views/DataSetDetails/DataSetDetails.js

//© 2019 Dublin City University, Trinity College Dublin. All rights reserved. This material may not be reproduced, displayed, modified or distributed without the express prior written permission of the copyright holder.
import React, { Component } from 'react';
import {
  Card,
  CardBody,
  CardHeader,
  Row,
  CardSubtitle
} from 'reactstrap';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import DataQualityOverTime from './DataQualityOverTime';
import DimensionsQualityDetails from './DimensionsQualityDetails';
import PerformAnalysis from './AnalyticsWidget/PerformAnalysis';
import CircularProgressbar from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
const noteReadyToPublish = "rgba(255,0,0,0.6)";
const readyToPublish = "rgba(34,139,34,0.8)";


class DataSetAssessmentDetails extends Component {

  constructor(props) {
    super(props);
    this.state = {
        analysisDropdownOpen: false,
        radioSelected: 2,
      }
  }

  analysisToggle = () => {
    this.setState({
      analysisDropdownOpen: !this.state.analysisDropdownOpen,
    });
  }

  loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>

  render() {
    let datasetDetails = this.props.datasetDetailsCache;
    let percentageValue = 0;
    let display = null;
    if(datasetDetails.length>0){
      percentageValue = Number.parseFloat(datasetDetails[0].lastAssessmentQuality * 100).toFixed(2);
      let canPublish = "Not Ready to Publish";
      let displayColour = noteReadyToPublish;
      let canPublishClass = "text-left font-weight-bold";

      if (datasetDetails[0].lastAssessmentQuality >= datasetDetails[0].expectedProgress) {
        canPublish = "Ready to Publish";
        displayColour = readyToPublish;
        canPublishClass = "text-left font-weight-bold";
      }

      display = (    <div className="animated fadeIn">
      <Row >
      <Card className="w-100" >
        <CardHeader>
        <span className="h3">{datasetDetails[0].datasetName}</span>

        </CardHeader>
        </Card>
      </Row>

            <Row >
              <Card className="w-25" >
                <CardHeader>
                  Current Data Quality
                </CardHeader>
                <CardBody className="pb-0">
                  <CardSubtitle className={canPublishClass} style={{ color: displayColour }}>{canPublish}</CardSubtitle>
                  <p/>
                  <div style={{ width: '150px', margin: 'auto' }}>
                    <CircularProgressbar percentage={percentageValue} text={`${percentageValue}%`} styles={{ text: { fill: displayColour }, path: { stroke: displayColour } }} />
                  </div>
                  <div style={{ height: '20px' }} />
                </CardBody>
              </Card>
              <DataQualityOverTime datasetID={datasetDetails[0].datasetID} is1Spatial={false} />
            </Row>

            <Row>
              <Card className="w-100">
                <CardHeader>
                  Dimensions Measured
                  </CardHeader>
                <CardBody>
                  <Row>
                    <DimensionsQualityDetails lastAssessmentMetrics={datasetDetails[0].lastAssessmentMetrics} assessmentMetrics={datasetDetails[0].assessmentMetrics}/>

                  </Row>
                </CardBody>
              </Card>
            </Row>

            <Row>
              <Card className="w-100">
                <CardHeader>
                  Analysis
                  </CardHeader>
                <CardBody>

                  <PerformAnalysis datasetID={this.props.match.params.datasetID}/>


                </CardBody>
              </Card>
            </Row>
          </div>);
    }
    else {
      display =(<Redirect to="/dashboard" />);
    }


    return (
      <React.Fragment>{display}</React.Fragment>

    );
  }
}


const mapStateToProps = (state,ownProps) => {
  let datasetID = Number(ownProps.match.params.datasetID);
  let datasetDetails = state.datasetDetailsCache.filter((dataset)=>{if(dataset.datasetID===datasetID){return dataset;} return null; });
    return (
        {
            datasetDetailsCache: datasetDetails
        }
    );
}


export default connect(mapStateToProps)(DataSetAssessmentDetails);