trc-client-core/src/report/ServiceExcellenceChart.jsx

The core of the TRC Client

import React from 'react';
import {connect} from 'react-redux';
import {fetchServiceExcellenceReport} from 'trc-client-core/src/report/ServiceExcellenceActions';

import {Inline} from 'jsxstyle';
import Col from 'trc-client-core/src/components/Col';
import Grid from 'trc-client-core/src/components/Grid';
import Loader from 'trc-client-core/src/components/Loader';
import TriangleChart from 'trc-client-core/src/report/TriangleChart';

import {color} from 'trc-client-core/src/global/ThemeStore';
import DataTable from 'bd-stampy/components/DataTable';
import Icon from 'trc-client-core/src/components/Icon';

var ServiceExcellenceChart = React.createClass({
    displayName: 'ServiceExcellenceChart',
    getDefaultProps() {
        return {
            regionCode: null,
            dealerCode: null
        };
    },
    componentWillReceiveProps(nextProps) {
        if(
            this.props.regionCode !== nextProps.regionCode ||
            this.props.dealerCode !== nextProps.dealerCode
        ) {
            this.fetchData(nextProps);            
        }
    },
    componentWillMount() {
        this.fetchData(this.props);
    },
    fetchData(props) {
        var regionCode = (props.dealerCode) ? null : props.regionCode;
        this.props.dispatch(fetchServiceExcellenceReport({
            region: regionCode,
            dealer: props.dealerCode
        }));
    },
    getResult(row) {
        return Math.round(((row.value / row.required) * 100) * 100) / 100;
    },
    render() {
        if(!this.props.serviceExcellence) {
            return <Loader></Loader>
        }

        return (
            <Grid>
                <Col width="4">{this.renderChart()}</Col>
                <Col>{this.renderTable()}</Col>
            </Grid>
        );
    },
    renderChart() {
        return <TriangleChart data={this.props.serviceExcellence.filter(this.removeExtraRoles).toJS()} />;
    },
    renderTable() {
        var tableSchema = [{
            heading: 'Role',
            filter: 'key',
            render: (row) => <Inline color={row.backgroundColor}>{row.key}</Inline>

        }, {
            heading: 'Actual',
            filter: 'value'
        }, {
            heading: 'Required',
            filter: 'required'
        }, {
            heading: 'Result',
            filter: (row) => row.value / row.required,
            render: (row) => {
                if(row.required) {
                    return <Inline 
                        children={this.getResult(row) + '%'}
                        color={(this.getResult(row) >= 100) ? color('green') : color('red')}
                    />;                    
                } else {
                    return '-';
                }
            }
        }, {
            heading: '',
            render: (row) => {
                if(row.required) {
                    return (row.value >= row.required) ? <Icon modifier="small" className="t-green" hexCode="e207"/> : <Icon modifier="small" className="t-red" hexCode="e208"/>;
                } else {
                    return '-';
                }
            }
        }];

        return <DataTable modifier="data"  schema={tableSchema} data={this.props.serviceExcellence.pop().toJS()} />;
    },
    removeExtraRoles(row) {
        return row.get('key') !== 'DT Hybrid Specialist' && row.get('key') !== 'DT Electrical Specialist';
    }
});

export default connect(state => ({
    serviceExcellence: state.serviceExcellence
}))(ServiceExcellenceChart);